@indice/ng-components 0.2.167-beta.3 → 0.2.167-beta.4

package/fesm2015/indice-ng-components.js

@@ -1,4389 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component, TemplateRef, ContentChild, LOCALE_ID, forwardRef, ViewChild, ContentChildren, Injectable, InjectionToken, ViewEncapsulation, ChangeDetectionStrategy, Optional, Injector, ElementRef, ViewChildren, Pipe, HostListener, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { isPlatformBrowser, formatDate, getLocaleMonthNames, FormStyle, TranslationWidth, getLocaleDayNames, DOCUMENT, CommonModule } from '@angular/common';
-import * as i1$1 from '@angular/router';
-import { Router, NavigationStart, ActivatedRoute, ActivationStart, RouterModule } from '@angular/router';
-import * as i4 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { BehaviorSubject, Subject, of, fromEvent } from 'rxjs';
-import { filter, debounceTime, distinctUntilChanged, share, map } from 'rxjs/operators';
-import { trigger, transition, style, animate } from '@angular/animations';
-import * as uuid from 'uuid';
-import * as i2 from '@indice/ng-auth';
-import { AuthService, IndiceAuthModule } from '@indice/ng-auth';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-//
-// 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: "12.2.16", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
-ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: { clickOutsideEnabled: "clickOutsideEnabled", attachOutsideOnClick: "attachOutsideOnClick", delayClickOutsideInit: "delayClickOutsideInit", emitOnBlur: "emitOnBlur", exclude: "exclude", excludeBeforeClick: "excludeBeforeClick", clickOutsideEvents: "clickOutsideEvents" }, outputs: { clickOutside: "clickOutside" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: DropDownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropDownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: { options: "options", selectedValue: ["selected", "selectedValue"], multiple: "multiple", placeholder: "placeholder" }, outputs: { selectedChange: "selectedChange", selectedChanged: "selectedChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"expanded = !expanded\"\r\n    class=\"dropdown-button\"\r\n    aria-haspopup=\"listbox\"\r\n    aria-expanded=\"true\"\r\n    aria-labelledby=\"listbox-label\"\r\n  >\r\n    <span class=\"dropdown-selected-text\">\r\n      {{ selectedOption?.text || placeholder }}\r\n    </span>\r\n    <span class=\"dropdown-button-icon\">\r\n      <!-- Heroicon name: solid/selector -->\r\n      <svg class=\"dropdown-arrow\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          d=\"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n      </svg>\r\n    </span>\r\n  </button>\r\n  <ul\r\n    *ngIf=\"expanded && options && options.length > 0\"\r\n    class=\"dropdown-ul\"\r\n    tabindex=\"-1\"\r\n    role=\"listbox\"\r\n    aria-labelledby=\"listbox-label\"\r\n    aria-activedescendant=\"listbox-option-3\"\r\n  >\r\n    <ng-container *ngFor=\"let option of options\">\r\n      <li\r\n        [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\"\r\n        (click)=\"selectOption(option)\"\r\n        id=\"listbox-option-0\"\r\n        role=\"option\"\r\n      >\r\n        <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\r\n          {{ option.text }}\r\n        </span>\r\n        <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\r\n          <!-- Heroicon name: solid/check -->\r\n          <svg\r\n            class=\"dropdown-li-selected-indicator\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            viewBox=\"0 0 20 20\"\r\n            fill=\"currentColor\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n              clip-rule=\"evenodd\"\r\n            />\r\n          </svg>\r\n        </span>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n", directives: [{ type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownMenuComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'lib-drop-down-menu',
-                    templateUrl: './drop-down-menu.component.html',
-                }]
-        }], 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';
-Icons.Messages = ' ms-Icon ms-Icon--Message';
-Icons.MessagesUnread = ' ms-Icon ms-Icon--MessageFill';
-
-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;
-    }
-}
-var PagerPosition;
-(function (PagerPosition) {
-    PagerPosition["Top"] = "top";
-    PagerPosition["Bottom"] = "bottom";
-    PagerPosition["Both"] = "both";
-})(PagerPosition || (PagerPosition = {}));
-var ShellLayoutType;
-(function (ShellLayoutType) {
-    ShellLayoutType["Stacked"] = "Stacked";
-    ShellLayoutType["Sidebar"] = "Sidebar";
-})(ShellLayoutType || (ShellLayoutType = {}));
-class DefaultShellConfig {
-    constructor() {
-        this.layout = ShellLayoutType.Stacked;
-        this.appLogo = 'https://tailwindui.com/img/logos/workflow-mark.svg?color=white';
-        this.appLogoAlt = 'your app name here';
-        this.showHeader = true;
-        this.showUserNameOnHeader = false;
-        this.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: "12.2.16", ngImport: i0, type: PagerComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerComponent, selector: "lib-pager", inputs: { busy: "busy", count: "count", page: "page", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sort: "sort", sortdir: ["sort-dir", "sortdir"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pager-container\">\r\n  <div class=\"pager-container-inner\">\r\n    <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\r\n      <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\r\n      <button (click)=\"toggleSortdir()\" [disabled]=\"!sort || busy\" class=\"pager-icon-button\">\r\n        <span class=\"sr-only\">sort direction</span>\r\n        <span class=\"inline-block relative\">\r\n          <i [class]=\"sortdirIcon\"></i>\r\n        </span>\r\n      </button>\r\n    </div>\r\n    <div class=\"pager-pages-container\">\r\n      <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\r\n      <div class=\"mx-2\"  *ngIf=\"count !== null && count > pageSize\">\r\n        <button [disabled]=\"!canPreviousPage || busy\"  (click)=\"previousPage()\"\r\n                class=\"pager-arrow-button-left\">\r\n          <span class=\"sr-only\">Previous</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                [disabled]=\"!canNextPage || busy\"  (click)=\"nextPage()\"\r\n                class=\"pager-arrow-button-right\">\r\n          <span class=\"sr-only\">Next</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <lib-drop-down-menu *ngIf=\"(pages && pages.length > 0) && (count !== null && count > pageSize)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder"], outputs: ["selectedChange", "selectedChanged"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-pager',
-                    templateUrl: './pager.component.html'
-                }]
-        }], 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: "12.2.16", ngImport: i0, type: ListTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListTileComponent, selector: "lib-list-tile", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: ListColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListColumnComponent, selector: "lib-list-column", inputs: { title: "title", fullWidth: ["full-width", "fullWidth"] }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: ListDetailsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListDetailsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListDetailsSectionComponent, selector: "lib-list-details-section", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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]
-            }] } });
-
-var Operators;
-(function (Operators) {
-    Operators.EQUALS = { label: '=', value: 'eq', description: 'Ίσο με' };
-    Operators.NOT_EQUALS = { label: '≠', value: 'neq', description: 'Διάφορο του' };
-    Operators.GREATER_THAN = { label: '>', value: 'gt', description: 'Μεγαλύτερο από' };
-    Operators.LESS_THAN = { label: '<', value: 'lt', description: 'Μικρότερο από' };
-    Operators.GREATER_THAN_EQUAL = { label: '≥', value: 'gte', description: 'Μεγαλύτερο ή ίσο με' };
-    Operators.LESS_THAN_EQUAL = { label: '≤', value: 'lte', description: 'Μικρότερο ή ίσο με' };
-    Operators.CONTAINS = { label: '∋', value: 'contains', description: 'Περιέχει' };
-    Operators.IN = { label: '1..n', value: 'in', description: 'Μέσα σε' };
-})(Operators || (Operators = {}));
-var QueryParameters;
-(function (QueryParameters) {
-    QueryParameters["VIEW"] = "view";
-    QueryParameters["PAGE_SIZE"] = "pagesize";
-    QueryParameters["PAGE"] = "page";
-    QueryParameters["SEARCH"] = "search";
-    QueryParameters["SORT_FIELD"] = "sort";
-    QueryParameters["SORT_DIRECTION"] = "dir";
-    QueryParameters["FILTER"] = "filter";
-    QueryParameters["FILTER_FROM"] = "from";
-    QueryParameters["FILTER_TO"] = "to";
-})(QueryParameters || (QueryParameters = {}));
-class FilterClause {
-    constructor(member, value, operator, dataType, searchOptions) {
-        var _a;
-        this.member = member;
-        this.value = value;
-        this.operator = operator || Operators.EQUALS.value;
-        this.dataType = dataType === undefined ? 'string' : dataType;
-        // uiName
-        if (this.dataType === 'datetime') { // special treatment for dates
-            this.uiName = this.member === QueryParameters.FILTER_FROM ? 'Από' : 'Έως';
-        }
-        else {
-            this.uiName = this.member;
-            let fo = {};
-            if (searchOptions && searchOptions.length > 0) {
-                fo = searchOptions.find((f) => {
-                    return f.field === this.member;
-                });
-            }
-            if (fo) {
-                this.uiName = fo.name;
-            }
-        }
-        // uiOperator
-        this.uiOperator = this.dataType === 'datetime' ? '' : Operators.EQUALS.label; // that's fine (for now)...
-        // uiValue
-        this.uiValue = this.value;
-        if ((this.dataType === 'datetime')) {
-            this.uiValue = formatDate(new Date(this.value), 'dd/MM/yyyy', 'en-US');
-        }
-        let fo;
-        if (searchOptions && searchOptions.length > 0) {
-            fo = searchOptions.find((f) => {
-                return f.field === this.member;
-            });
-        }
-        if (fo && fo.options) { // special treatment for arrays, if there is an options property then it is an array
-            this.dataType = 'array';
-            this.uiValue = (_a = fo.options.find((option) => {
-                return option.value === this.value;
-            })) === null || _a === void 0 ? void 0 : _a.label;
-        }
-    }
-    static parse(text) {
-        const pattern = /^\s*([A-Za-z_][A-Za-z0-9_\.]+)::(eq|neq|gt|lt|gte|lte|contains|in)::(\((string|integer|number|boolean|datetime)\))?(.+)\s*$/gi;
-        if (text != null) {
-            const matches = pattern.exec(text);
-            if (matches != null) {
-                const path = matches[1];
-                const op = matches[2];
-                const dt = matches[4];
-                const v = matches[5];
-                return new FilterClause(path, v, op, dt);
-            }
-        }
-        return undefined;
-    }
-    toString() {
-        if (this.dataType !== 'string' && this.dataType !== 'array') {
-            return `${this.member}::${this.operator}::(${this.dataType})${this.value}`;
-        }
-        else {
-            return `${this.member}::${this.operator}::${this.value}`;
-        }
-    }
-}
-
-// freaksly simple date picker : https://tailwind-elements.com/docs/standard/forms/datepicker/
-class DatepickerComponent {
-    constructor(locale) {
-        this.locale = locale;
-        this.readonly = false;
-        this.disabled = false;
-        this.inline = false;
-        this.displayFormat = 'dd/MM/yyyy';
-        this.placeholder = '';
-        this.value = null;
-        this.valueChange = new EventEmitter();
-        this.minDate = undefined;
-        this.maxDate = undefined;
-        this.showCalendar = false;
-        this.showYears = false;
-        this.monthNames = getLocaleMonthNames(this.locale, FormStyle.Standalone, TranslationWidth.Wide);
-        this.dayNames = getLocaleDayNames(this.locale, FormStyle.Standalone, TranslationWidth.Abbreviated);
-        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() {
-        var _a, _b;
-        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: (_a = this.value) === null || _a === void 0 ? void 0 : _a.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 == ((_b = this.value) === null || _b === void 0 ? void 0 : _b.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
-        if (!this.outOfRangeDate(date.day)) {
-            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.calcDays();
-            this.showCalendar = false;
-        }
-    }
-    selectYearValue(year) {
-        var _a, _b, _c, _d, _e;
-        // This should be in UTC
-        const tempYear = this.year;
-        this.year = year.year;
-        if (!this.outOfRangeDate((_b = (_a = this.calendarDates) === null || _a === void 0 ? void 0 : _a.find(x => x.selected == true)) !== null && _b !== void 0 ? _b : { day: 1 })) {
-            let selectedDate = new Date(year.year, (_c = this.month) !== null && _c !== void 0 ? _c : 1, (_e = (_d = this.calendarDates) === null || _d === void 0 ? void 0 : _d.find(x => x.selected == true).day) !== null && _e !== void 0 ? _e : 1, 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.showYears = false;
-            this.showCalendar = true;
-            this.calcDays();
-        }
-        else {
-            this.year = tempYear;
-            this.showYears = false;
-            this.showCalendar = true;
-        }
-    }
-    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) {
-        var _a;
-        if (!date1) {
-            return false;
-        }
-        const d = new Date(year !== null && year !== void 0 ? year : this.year, this.month, day !== null && day !== void 0 ? day : (_a = this.value) === null || _a === void 0 ? void 0 : _a.getDay());
-        return date1.toDateString() === d.toDateString();
-    }
-    ;
-    calcDays() {
-        var _a;
-        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((_a = this.value) !== null && _a !== void 0 ? _a : 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() {
-        var _a, _b;
-        if (((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.nativeElement.value) !== '' && !this.inline) {
-            var dateParts = (_b = this.dateInput) === null || _b === void 0 ? void 0 : _b.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();
-    }
-    outOfRangeDate(date) {
-        let outOfRange = false;
-        if (this.minDate || this.maxDate) {
-            const d = new Date(this.year, this.month, date.day);
-            const dateInMillis = d.getTime();
-            if (this.minDate) {
-                let minDate = this.minDate.getTime();
-                if (dateInMillis < minDate && this.minDate.toDateString() !== d.toDateString()) {
-                    outOfRange = true;
-                }
-            }
-            if (this.maxDate) {
-                let maxDate = this.maxDate.getTime();
-                if (dateInMillis > maxDate && this.maxDate.toDateString() !== d.toDateString()) {
-                    outOfRange = true;
-                }
-            }
-        }
-        return outOfRange;
-    }
-}
-DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatepickerComponent, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
-DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatepickerComponent, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", inline: "inline", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value", minDate: "minDate", maxDate: "maxDate" }, 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=\"flex\"\r\n     [ngClass]=\"{'relative': !inline}\"\r\n     (clickOutside)=\"closeCalendar()\">\r\n\r\n  <input type=\"text\"\r\n         *ngIf=\"!inline\"\r\n         #dateInput\r\n         [readonly]=\"readonly\"\r\n         name=\"dateInput\"\r\n         (blur)=\"onBlur($event)\"\r\n         id=\"dateInput\"\r\n         (focus)=\"showCalendar = false\"\r\n         [value]=\"value | date: displayFormat\"\r\n         class=\"detapicker-input\"\r\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n         [placeholder]=\"disabled ? '' : placeholder\">\r\n\r\n  <button type=\"button\"\r\n          *ngIf=\"!inline\"\r\n          class=\"datepicker-button\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"openCalendar()\"\r\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n  </button>\r\n\r\n  <div *ngIf=\"showCalendar || inline\"\r\n       [ngClass]=\"{'absolute': !inline}\"\r\n       class=\"datepicker-background\"\r\n       style=\"height:18rem;min-width:16rem;\"\r\n       name=\"calendar\">\r\n    <div class=\"datepicker-btn-wrapper\">\r\n      <div>\r\n        <button type=\"button\"\r\n                (click)=\"openYears()\">\r\n          <span class=\"datepicker-selected-month\">\r\n            {{monthNames[month]}}\r\n          </span>\r\n          <span class=\"datepicker-selected-year\">\r\n            {{year}}</span>\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\r\n        <button type=\"button\"\r\n                class=\"datepicker-nav-btn\"\r\n                (click)=\"previousMonth();\">\r\n          <svg fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 19l-7-7 7-7\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                class=\"datepicker-nav-btn\"\r\n                (click)=\"nextMonth()\">\r\n          <svg fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M9 5l7 7-7 7\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <ng-template #showYearsPickerTmpl>\r\n        <div>\r\n          <button type=\"button\"\r\n                  class=\"datepicker-nav-btn\"\r\n                  (click)=\"previousYear();\">\r\n            <svg fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M15 19l-7-7 7-7\" />\r\n            </svg>\r\n          </button>\r\n          <button type=\"button\"\r\n                  class=\"datepicker-nav-btn\"\r\n                  (click)=\"nextYear()\">\r\n            <svg fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 5l7 7-7 7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <div class=\"datepicker-wrapper\"\r\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\r\n      <div *ngFor=\"let day of dayNames\"\r\n           class=\"datepicker-day-name\"\r\n           style=\"width: 14.28%\">{{day}}</div>\r\n    </div>\r\n\r\n    <ng-template #showCalYearsTmpl>\r\n      <div class=\"datepicker-content-wrapper\">\r\n        <div *ngFor=\"let year of showCalendarYears\"\r\n             style=\"width: 18.28%\"\r\n             class=\"px-1 mb-1\">\r\n          <div (click)=\"selectYearValue(year)\"\r\n               class=\"datepicker-year\"\r\n               [class]=\"year.selected  ? 'selected' : 'not-selected'\">\r\n            {{year.year}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"datepicker-content-wrapper\"\r\n         *ngIf=\"!showYears\">\r\n      <div *ngFor=\"let blankday of blankDays\"\r\n           style=\"width: 14.28%\"\r\n           class=\"datepicker-blank-days\">{{blankday}}</div>\r\n      <div *ngFor=\"let date of calendarDates;\"\r\n           style=\"width: 14.28%\"\r\n           class=\"px-1 mb-1\">\r\n        <div (click)=\"selectDateValue(date)\"\r\n             class=\"datepicker-days\"\r\n             [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\r\n          {{date.day}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], pipes: { "date": i1.DatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatepickerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-date-picker',
-                    templateUrl: './date-picker.component.html',
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DatepickerComponent),
-                            multi: true
-                        }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }]; }, propDecorators: { readonly: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], inline: [{
-                type: Input
-            }], displayFormat: [{
-                type: Input,
-                args: ['display-format']
-            }], placeholder: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], dateInput: [{
-                type: ViewChild,
-                args: ['dateInput']
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }] } });
-
-class AdvancedSearchComponent {
-    constructor() {
-        this.advancedSearchChanged = new EventEmitter();
-        this.searchOptions = [];
-        this.filters = [];
-        this.menuOptions = [];
-        this.menuOptionsDictionary = {};
-    }
-    ngOnInit() {
-        this.searchOptions.forEach((searchOption) => {
-            var _a;
-            this.menuOptions.push({
-                text: searchOption.name,
-                value: searchOption.field,
-                data: searchOption.dataType,
-                description: searchOption.placeholder,
-                icon: undefined
-            });
-            if (searchOption.dataType === 'array') {
-                let menuOpts = [];
-                (_a = searchOption.options) === null || _a === void 0 ? void 0 : _a.forEach((selectInputOption) => {
-                    menuOpts.push({
-                        text: selectInputOption.label,
-                        value: selectInputOption.value,
-                        data: undefined,
-                        description: selectInputOption.description,
-                        icon: undefined
-                    });
-                });
-                this.menuOptionsDictionary[searchOption.field] = menuOpts;
-            }
-        });
-    }
-    selectedFieldChanged(field) {
-        this.selectedField = this.searchOptions.find((searchOption) => searchOption.field === field);
-        this.fieldValue = undefined;
-    }
-    selectedFieldValueChanged(fieldValue) {
-        this.fieldValue = fieldValue;
-    }
-    search() {
-        if (!this.selectedField || !this.selectedField.dataType) {
-            return;
-        }
-        // the filter is of type 'daterange'
-        if (this.selectedField.dataType === 'daterange') {
-            if (!this.selectedField.multiTerm) {
-                this.filters = this.filters.filter((f) => {
-                    return f.member !== QueryParameters.FILTER_FROM && f.member !== QueryParameters.FILTER_TO;
-                });
-            }
-            if (this.fieldValueDateFrom) {
-                const filterClauseFrom = new FilterClause(QueryParameters.FILTER_FROM, this.fieldValueDateFrom, Operators.GREATER_THAN_EQUAL.value, 'datetime', this.searchOptions);
-                this.filters.push(filterClauseFrom);
-            }
-            if (this.fieldValueDateTo) {
-                const filterClauseTo = new FilterClause(QueryParameters.FILTER_TO, this.fieldValueDateTo, Operators.LESS_THAN_EQUAL.value, 'datetime', this.searchOptions);
-                this.filters.push(filterClauseTo);
-            }
-        }
-        // the filter isn't of type 'daterange' (everything else)
-        else {
-            if (this.fieldValue === undefined) { // handle empty field value
-                return;
-            }
-            // create the filterClause
-            const filterClause = new FilterClause(this.selectedField.field, this.fieldValue, Operators.EQUALS.value, this.selectedField.dataType, this.searchOptions); // operator is always 'equals'...
-            if (!this.selectedField.multiTerm) { // multiTerm means that we can have multiple filter values of the SAME filter clause (eg "filter case types that are Phone OR Address")
-                this.filters = this.filters.filter((f) => {
-                    return f.member !== this.selectedField.field;
-                });
-            }
-            this.filters.push(filterClause);
-            this.fieldValue = undefined;
-        }
-        this.advancedSearchChanged.emit(this.filters);
-    }
-    removeFilter(index) {
-        if (this.filters && this.filters.length >= index) {
-            this.filters.splice(index, 1);
-            this.advancedSearchChanged.emit(this.filters);
-        }
-    }
-    clear() {
-        this.fieldValueDateFrom = undefined;
-        this.fieldValueDateTo = undefined;
-        this.selectedField = undefined;
-        this.fieldValue = undefined;
-        this.filters = [];
-        this.advancedSearchChanged.emit(this.filters);
-    }
-}
-AdvancedSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvancedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, ngImport: i0, template: "<div class=\"advanced-search-container\">\r\n    <div class=\"advanced-search-filter\">\r\n        <!--SEARCH FIELDS-->\r\n        <div class=\"advanced-search-filter-field-container\">\r\n            <label class=\"advanced-search-filter-field-label\"\r\n                   for=\"selectedField\">\r\n                \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n            </label>\r\n            <lib-drop-down-menu [options]=\"menuOptions\"\r\n                                (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n        </div>\r\n        <!--SEARCH FIELDS INPUT-->\r\n        <div *ngIf=\"selectedField\"\r\n             class=\"advanced-search-filter-value-container\">\r\n            <div *ngIf=\"selectedField.dataType === 'array'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n                                    [selected]=\"fieldValue\"\r\n                                    (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div *ngIf=\"selectedField.dataType === 'string'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <input (keyup.enter)=\"search()\"\r\n                       [(ngModel)]=\"fieldValue\"\r\n                       name=\"fieldValue\"\r\n                       type=\"text\"\r\n                       placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n                       maxlength=\"300\"\r\n                       class=\"advanced-search-filter-value-input\">\r\n            </div>\r\n            <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                <div>\r\n                    <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n                        \u0391\u03C0\u03CC:\r\n                    </span>\r\n                    <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n                                     [(ngModel)]=\"fieldValueDateFrom\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n                <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                    <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n                        \u0388\u03C9\u03C2:\r\n                    </span>\r\n                    <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n                                     [(ngModel)]=\"fieldValueDateTo\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedField\">\r\n            <!--DO SEARCH-->\r\n            <button type=\"button\"\r\n                    [ngClass]=\"{'opacity-50 cursor-not-allowed': fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined}\"\r\n                    [disabled]=\"fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined\"\r\n                    (click)=\"search()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n            </button>\r\n            <!--CLEAR-->\r\n            <button type=\"button\"\r\n                    (click)=\"clear()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n    <!--FILTER CHIPS-->\r\n    <!-- This example requires Tailwind CSS v2.0+ -->\r\n    <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n        <span *ngIf=\"filter && filter.member\"\r\n              class=\"advanced-search-chips\">\r\n            {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n            <button (click)=\"removeFilter(i)\"\r\n                    type=\"button\"\r\n                    class=\"advanced-search-chips-remove-filter\">\r\n                <span class=\"sr-only\">Remove large option</span>\r\n                <svg class=\"h-2 w-2\"\r\n                     stroke=\"currentColor\"\r\n                     fill=\"none\"\r\n                     viewBox=\"0 0 8 8\">\r\n                    <path stroke-linecap=\"round\"\r\n                          stroke-width=\"1.5\"\r\n                          d=\"M1 1l6 6m0-6L1 7\" />\r\n                </svg>\r\n            </button>\r\n        </span>\r\n    </ng-container>\r\n</div>", components: [{ type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder"], outputs: ["selectedChange", "selectedChanged"] }, { type: DatepickerComponent, selector: "lib-date-picker", inputs: ["readonly", "disabled", "inline", "display-format", "placeholder", "value", "minDate", "maxDate"], outputs: ["valueChange"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-advanced-search',
-                    templateUrl: './advanced-search.component.html'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { advancedSearchChanged: [{
-                type: Output
-            }], searchOptions: [{
-                type: Input,
-                args: ['search-options']
-            }], filters: [{
-                type: Input
-            }] } });
-
-class SkeletonLoaderComponent {
-    constructor() {
-        this.count = 5;
-        this.type = 'tiles'; // 'large-tile', 'table'
-    }
-    ngOnInit() {
-    }
-    counter(i) {
-        return new Array(i);
-    }
-}
-SkeletonLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkeletonLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type" }, ngImport: i0, template: "<!-- <h1>SKELETON LOADER!</h1> -->\r\n<ng-container *ngSwitch=\"type\">\r\n  <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchCase=\"'large-tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-1\" *ngSwitchCase=\"'table'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4\">\r\n        <div class=\"animate-pulse flex space-x-4\">\r\n          <div class=\"rounded-full bg-light-blue-400 h-12 w-12\">&nbsp;</div>\r\n          <div class=\"flex-1 space-y-4 py-1\">\r\n            <div class=\"h-4 bg-light-blue-400 rounded w-3/4\">&nbsp;</div>\r\n            <div class=\"space-y-2\">\r\n              <div class=\"h-4 bg-light-blue-400 rounded\">&nbsp;</div>\r\n              <div class=\"h-4 bg-light-blue-400 rounded w-5/6\">&nbsp;</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchDefault>\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n", directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'lib-skeleton-loader',
-                    templateUrl: './skeleton-loader.component.html'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { count: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }] } });
-
-class ListViewEmptyStateComponent {
-    constructor() {
-        this.title = 'Δεν βρέθηκαν εγγραφές.';
-        // 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: "12.2.16", ngImport: i0, type: ListViewEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListViewEmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0, template: "<div class=\"p-20\">\r\n  <div class=\"text-center p-2\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\r\n    </svg>\r\n    <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\r\n    <p class=\"mt-1 text-sm text-gray-500\">\r\n      {{subTitle}}\r\n    </p>\r\n    <div class=\"mt-6\" *ngIf=\"false\">\r\n      <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\r\n        <!-- Heroicon name: solid/plus -->\r\n        <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\r\n        </svg>\r\n        {{newItemLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewEmptyStateComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-list-view-empty-state',
-                    templateUrl: './list-view-empty-state.component.html'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
-                type: Input
-            }], subTitle: [{
-                type: Input,
-                args: ['sub-title']
-            }], newItemLabel: [{
-                type: Input,
-                args: ['new-item-label']
-            }] } });
-
-class ListViewComponent {
-    constructor() {
-        this.searchOptions = [];
-        this.filters = [];
-        // BUSY STATE
-        this.busy = false;
-        // PAGING - pass through for pager component
-        this.count = null;
-        this.page = 1;
-        this.view = ListViewType.Table;
-        this.sort = null;
-        // tslint:disable-next-line:no-input-rename
-        this.pageSize = 20;
-        // tslint:disable-next-line:no-input-rename
-        this.pageSizeOptions = [];
-        // SORTING - pass through for pager component
-        // tslint:disable-next-line:no-input-rename
-        this.sortOptions = [];
-        // tslint:disable-next-line:no-input-rename
-        this.sortdir = '-';
-        // tslint:disable-next-line:no-input-rename
-        this.tilesCount = 4;
-        // tslint:disable-next-line:no-input-rename
-        this.showPager = true;
-        // tslint:disable-next-line:no-input-rename
-        this.pagerPosition = PagerPosition.Top;
-        // 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;
-        this.pageChanged = new EventEmitter();
-        this.pageSizeChanged = new EventEmitter();
-        this.detailsOpened = new EventEmitter();
-        this.sortChanged = new EventEmitter();
-        this.sortdirChanged = new EventEmitter();
-        this.advancedSearchChanged = new EventEmitter();
-        this.multipleFullWidth = false;
-        this.expandIcon = Icons.Expand;
-        this.collapseIcon = Icons.Collapse;
-        this.tableViewSupported = false;
-        this.fullWidthTHClass = 'list-view-th-full';
-        this.fullWidthTDClass = 'list-view-td-full';
-        this.tilesViewSupported = false;
-        this.detailsSectionSupported = false;
-        this.loaderItems = [];
-        this.columns = [];
-        this.tilesDeckClass = 'cards-deck-4';
-        this.tileTemplate = null;
-        this.detailsTemplate = null;
-        for (let i = 0; i < 5; i++) {
-            this.loaderItems.push({});
-        }
-        if (this.pagerPosition) {
-            this.pagerPosition = this.pagerPosition;
-        }
-    }
-    // COLUMNS
-    set cols(refs) {
-        this.columns = refs === null || refs === void 0 ? void 0 : 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';
-    }
-    // tslint:disable-next-line:no-input-rename
-    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);
-    }
-    emitAdvancedSearchChanged($event) {
-        this.advancedSearchChanged.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: "12.2.16", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListViewComponent, selector: "lib-list-view", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters", busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged", advancedSearchChanged: "advancedSearchChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"px-2\">\r\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n                       [search-options]=\"searchOptions\"\r\n                       [filters]=\"filters\"\r\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\"></lib-advanced-search>\r\n\r\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\"\r\n        [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n    <div class=\"cards-deck-1\">\r\n      <lib-list-view-empty-state></lib-list-view-empty-state>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n     *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n  <lib-pager [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>", components: [{ type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options", "filters"], outputs: ["advancedSearchChanged"] }, { type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }, { type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-list-view',
-                    templateUrl: './list-view.component.html'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { searchOptions: [{
-                type: Input,
-                args: ['search-options']
-            }], filters: [{
-                type: Input
-            }], busy: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], count: [{
-                type: Input
-            }], page: [{
-                type: Input
-            }], view: [{
-                type: Input
-            }], sort: [{
-                type: Input
-            }], pageSize: [{
-                type: Input,
-                args: ['page-size']
-            }], pageSizeOptions: [{
-                type: Input,
-                args: ['page-size-options']
-            }], sortOptions: [{
-                type: Input,
-                args: ['sort-options']
-            }], sortdir: [{
-                type: Input,
-                args: ['sort-dir']
-            }], tilesCount: [{
-                type: Input,
-                args: ['tiles-count']
-            }], showPager: [{
-                type: Input,
-                args: ['show-pager']
-            }], pagerPosition: [{
-                type: Input,
-                args: ['pager-position']
-            }], detailsSectionPropertyCount: [{
-                type: Input,
-                args: ['details-section-property-count']
-            }], cols: [{
-                type: ContentChildren,
-                args: [ListColumnComponent, { read: ListColumnComponent }]
-            }], tiles: [{
-                type: ContentChild,
-                args: [ListTileComponent, { read: ListTileComponent }]
-            }], details: [{
-                type: ContentChild,
-                args: [ListDetailsSectionComponent, { read: ListDetailsSectionComponent }]
-            }], pageChanged: [{
-                type: Output
-            }], pageSizeChanged: [{
-                type: Output
-            }], detailsOpened: [{
-                type: Output
-            }], sortChanged: [{
-                type: Output
-            }], sortdirChanged: [{
-                type: Output
-            }], advancedSearchChanged: [{
-                type: Output
-            }] } });
-
-class CollapsiblePanelComponent {
-    constructor() {
-        this.title = null;
-        this.visible = false;
-    }
-    ngOnInit() {
-    }
-}
-CollapsiblePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CollapsiblePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CollapsiblePanelComponent, selector: "lib-collapsible-panel", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"collapsible-panel-container\">\r\n  <div class=\"collapsible-panel-container-shadow\">\r\n    <div class=\"collapsible-panel-container-inner\">\r\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\r\n        <div class=\"collapsible-panel-button-content-container\">\r\n          <span>{{ title }} </span>\r\n          <span class=\"ico-plus\"></span>\r\n        </div>\r\n      </button>\r\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CollapsiblePanelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-collapsible-panel',
-                    templateUrl: './collapsible-panel.component.html'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
-                type: Input
-            }] } });
-
-class KpiTileComponent {
-    constructor() {
-        this.title = undefined;
-        this.busy = false;
-        this.kpi = undefined;
-        this.hideBtn = false;
-        // 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: "12.2.16", ngImport: i0, type: KpiTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-KpiTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KpiTileComponent, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi", hideBtn: "hideBtn" }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\"\r\n     [ngClass]=\"{'card-deck-busy' : busy }\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container\">\r\n      <a href=\"#\"\r\n         class=\"kpi-tile-action\"\r\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n    </div>\r\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n    <div class=\"card-footer\">\r\n      <div class=\"text-xs\">\r\n        <a href=\"#\"\r\n           class=\"kpi-tile-action\"\r\n           [ngClass]=\"{'invisible': hideBtn}\"\r\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KpiTileComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-kpi-tile',
-                    templateUrl: './kpi-tile.component.html'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
-                type: Input
-            }], busy: [{
-                type: Input
-            }], kpi: [{
-                type: Input
-            }], hideBtn: [{
-                type: Input
-            }], tileAction: [{
-                type: Output,
-                args: ['tile-action']
-            }] } });
-
-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: "12.2.16", ngImport: i0, type: ToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ToasterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToasterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToasterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToasterComponent, selector: "lib-toaster", inputs: { toast: "toast", i: "i" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div aria-live=\"assertive\"\r\n     [ngClass]=\"closed ? 'toast-closed': 'toast z-50'\"\r\n     [ngStyle]=\"isMobile ? { 'margin-bottom.px': i * 85 } : {'margin-top.px': i * 85 }\">\r\n  <div class=\"toast-container\">\r\n    <div class=\"toast-pill\">\r\n      <div class=\"toast-context-padding\">\r\n        <div class=\"toast-context\"\r\n             [ngSwitch]=\"toast?.type\">\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'info'\">\r\n            <svg class=\"h-5 w-5 text-blue-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'success'\">\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'error'\">\r\n            <svg class=\"h-5 w-5 text-red-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'warning'\">\r\n            <svg class=\"h-5 w-5 text-yellow-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchDefault>\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n\r\n          <div class=\"ml-3 w-0 flex-1\">\r\n            <p class=\"toast-title\"\r\n               *ngIf=\"toast?.title\">\r\n              {{toast?.title}}\r\n            </p>\r\n            <p class=\"toast-body\">\r\n              {{toast?.body}}\r\n            </p>\r\n          </div>\r\n          <div class=\"toast-close-icon\">\r\n            <button class=\"toast-close-button\"\r\n                    (click)=\"closeToast(i)\">\r\n              <span class=\"sr-only\">Close</span>\r\n              <!-- Heroicon name: solid/x -->\r\n              <svg class=\"h-5 w-5\"\r\n                   xmlns=\"http://www.w3.org/2000/svg\"\r\n                   viewBox=\"0 0 20 20\"\r\n                   fill=\"currentColor\"\r\n                   aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\"\r\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                      clip-rule=\"evenodd\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToasterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-toaster',
-                    templateUrl: './toaster.component.html'
-                }]
-        }], 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: "12.2.16", ngImport: i0, type: ToasterContainerComponent, deps: [{ token: ToasterService }], target: i0.ɵɵFactoryTarget.Component });
-ToasterContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToasterContainerComponent, selector: "lib-toaster-container", ngImport: i0, template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\r\n", components: [{ type: ToasterComponent, selector: "lib-toaster", inputs: ["toast", "i"], outputs: ["remove"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToasterContainerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-toaster-container',
-                    templateUrl: './toaster-container.component.html'
-                }]
-        }], 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: "12.2.16", ngImport: i0, type: AvatarInitialsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AvatarInitialsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AvatarInitialsComponent, selector: "lib-avatar-initials", inputs: { name: "name", large: "large" }, ngImport: i0, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\r\n    <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\r\n</div>\r\n", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AvatarInitialsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-avatar-initials',
-                    templateUrl: './avatar-initials.component.html'
-                }]
-        }], 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: "12.2.16", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToggleComponent, selector: "lib-toggle", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => ToggleComponent),
-            multi: true
-        }
-    ], ngImport: i0, template: "<button type=\"button\"\r\n        [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\r\n        class=\"toggle-button\"\r\n        role=\"switch\"\r\n        aria-checked=\"false\"\r\n        aria-labelledby=\"isPrivate\"\r\n        (click)=\"changeValue()\"\r\n        (blur)=\"onBlur($event)\"\r\n        value=\"{{value}}\"\r\n        [disabled]=\"disabled\"\r\n        [title]=\"disabled ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\r\n    <span aria-hidden=\"true\"\r\n          [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\r\n          class=\"toggle-span\"></span>\r\n</button>", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToggleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-toggle',
-                    templateUrl: './toggle.component.html',
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ToggleComponent),
-                            multi: true
-                        }
-                    ]
-                }]
-        }], 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.animate = false;
-        this.sizeContainerStyle = 'side-pane-box-size';
-        this.overlayStyle = 'side-pane-overlay';
-        this.onComplete = new EventEmitter();
-    }
-    ngOnDestroy() {
-    }
-    ngOnInit() {
-    }
-    onSidePaneActivated(component) {
-        var _a;
-        this.document.body.classList.add('modal-active');
-        let sizeStyleSuffix = '';
-        const state = (_a = this.router.getCurrentNavigation()) === null || _a === void 0 ? void 0 : _a.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: "12.2.16", ngImport: i0, type: SidePaneComponent, deps: [{ token: i1$1.Router }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-SidePaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SidePaneComponent, selector: "lib-side-pane", inputs: { showPane: ["visible", "showPane"], animate: "animate" }, outputs: { onComplete: "onComplete" }, ngImport: i0, template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\r\n  <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\r\n  <div @myInsertRemoveTrigger [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\r\n    <div [class]=\"sizeContainerStyle\">\r\n      <div class=\"side-pane\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
-        trigger('myInsertRemoveTrigger', [
-            transition(':enter', [
-                style({ right: '-675px' }),
-                animate('300ms ease-in', style({ right: 0 })),
-            ]),
-            transition(':leave', [
-                style({ right: 0 }),
-                animate('300ms ease-out', style({ right: '-675px' }))
-            ])
-        ]),
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SidePaneComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-side-pane',
-                    templateUrl: './side-pane.component.html',
-                    animations: [
-                        trigger('myInsertRemoveTrigger', [
-                            transition(':enter', [
-                                style({ right: '-675px' }),
-                                animate('300ms ease-in', style({ right: 0 })),
-                            ]),
-                            transition(':leave', [
-                                style({ right: 0 }),
-                                animate('300ms ease-out', style({ right: '-675px' }))
-                            ])
-                        ]),
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; }, propDecorators: { showPane: [{
-                type: Input,
-                args: ['visible']
-            }], animate: [{
-                type: Input,
-                args: ['animate']
-            }], onComplete: [{
-                type: Output
-            }] } });
-
-class NavLinksListComponent {
-    constructor() {
-        // tslint:disable-next-line:no-input-rename
-        this.navLinkClass = 'nav-link';
-        // tslint:disable-next-line:no-input-rename
-        this.navLinkActiveClass = 'nav-link-active';
-        // tslint:disable-next-line:no-input-rename
-        this.containerClass = undefined;
-        // tslint:disable-next-line:no-input-rename
-        this.showIcons = false;
-    }
-    ngOnDestroy() {
-        var _a;
-        (_a = this.fragmentSub$) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-    }
-    ngOnInit() {
-        var _a;
-        this.fragmentSub$ = (_a = this.activeFragment) === null || _a === void 0 ? void 0 : _a.subscribe(fragment => this.fragmentValue = fragment);
-    }
-}
-NavLinksListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavLinksListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: { links: "links", activeFragment: ["active-fragment", "activeFragment"], navLinkClass: ["link-class", "navLinkClass"], navLinkActiveClass: ["link-active-class", "navLinkActiveClass"], containerClass: ["container-class", "containerClass"], showIcons: ["show-icons", "showIcons"] }, ngImport: i0, template: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n  <div class=\"nav-link-list-container-inner\">\r\n    <ng-container *ngFor=\"let link of links | async\">\r\n      <ng-container [ngSwitch]=\"link.type\">\r\n        <a *ngSwitchCase=\"'router'\"\r\n          href=\"#\"\r\n          [routerLink]=\"[link.path]\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'external'\"\r\n          [href]=\"link.path\"\r\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'fragment'\"\r\n          routerLink=\".\"\r\n          [fragment]=\"link.path\"\r\n          [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\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: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavLinksListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-nav-links-list',
-                    templateUrl: './nav-links-list.component.html'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { links: [{
-                type: Input
-            }], activeFragment: [{
-                type: Input,
-                args: ['active-fragment']
-            }], navLinkClass: [{
-                type: Input,
-                args: ['link-class']
-            }], navLinkActiveClass: [{
-                type: Input,
-                args: ['link-active-class']
-            }], containerClass: [{
-                type: Input,
-                args: ['container-class']
-            }], showIcons: [{
-                type: Input,
-                args: ['show-icons']
-            }] } });
-
-class ComboboxComponent {
-    constructor() {
-        this._debouncer = new Subject();
-        this._items = [];
-        this._defaultItemsFilter = (item) => {
-            const selectedItem = this.selectedItems.find(x => x == item);
-            return selectedItem == null || selectedItem == undefined;
-        };
-        this.id = 'combobox';
-        this.itemTemplate = null;
-        this.selectedItemsFilter = () => true;
-        this.selectedItemTemplate = null;
-        this.busy = false;
-        this.debounceMs = 1000;
-        this.onSearch = new EventEmitter();
-        this.onItemSelected = new EventEmitter();
-        this.showOptions = false;
-        this.selectedItems = [];
-    }
-    set items(items) {
-        if (!this.itemTemplate) {
-            this._items = items.filter(this._defaultItemsFilter);
-        }
-        else {
-            this._items = items.filter(this.selectedItemsFilter);
-        }
-    }
-    get items() {
-        if (!this.itemTemplate) {
-            return this._items.filter(this._defaultItemsFilter);
-        }
-        else {
-            return this._items.filter(this.selectedItemsFilter);
-        }
-    }
-    ngOnInit() {
-        this.emitSearchEvent();
-        this._debouncer
-            .pipe(debounceTime(this.debounceMs), distinctUntilChanged())
-            .subscribe((value) => this.emitSearchEvent(value));
-    }
-    onInputClick() {
-        this.showOptions = true;
-    }
-    onInputClickOutside() {
-        this.showOptions = false;
-    }
-    onInputKeyUp(event) {
-        this._debouncer.next(event.currentTarget.value);
-    }
-    onListItemSelected(item) {
-        this.onItemSelected.emit(item);
-        this.selectedItems.push(item);
-    }
-    removeSelectedItem(item) {
-        const index = this.selectedItems.indexOf(item);
-        if (index > -1) {
-            this.selectedItems.splice(index, 1);
-        }
-    }
-    emitSearchEvent(searchTerm = undefined) {
-        this.onSearch.emit(searchTerm);
-    }
-}
-ComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"relative mt-1\">\r\n    <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n        <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n            class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n            aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n    </form>\r\n    <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n        <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n        </svg>\r\n        <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n        </svg>\r\n    </div>\r\n    <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n        <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </li>\r\n    </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n    <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n    <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n    <div class=\"grid grid-cols-1\">\r\n        <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n            <div class=\"flex-1 min-w-0\">\r\n                <div class=\"focus:outline-none\">\r\n                    <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"ml-4 flex-shrink-0 flex\">\r\n                <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n                    <span class=\"sr-only\">Close</span>\r\n                    <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                            clip-rule=\"evenodd\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>", directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComboboxComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-combobox',
-                    templateUrl: './combobox.component.html'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { id: [{
-                type: Input
-            }], items: [{
-                type: Input,
-                args: ['items']
-            }], itemTemplate: [{
-                type: Input
-            }], selectedItemsFilter: [{
-                type: Input
-            }], selectedItemTemplate: [{
-                type: Input
-            }], busy: [{
-                type: Input
-            }], debounceMs: [{
-                type: Input
-            }], onSearch: [{
-                type: Output
-            }], onItemSelected: [{
-                type: Output
-            }] } });
-
-const APP_LANGUAGES = new InjectionToken('APP_LANGUAGES');
-const APP_LINKS = new InjectionToken('APP_LINKS');
-const APP_NOTIFICATIONS = new InjectionToken('APP_NOTIFICATIONS');
-const LIBSTEPPER_ACCESSOR = new InjectionToken('LibStepperAccessor');
-const LIBTABGROUP_ACCESSOR = new InjectionToken('LibTabGroupAccessor');
-const SHELL_CONFIG = new InjectionToken('SHELL_CONFIG');
-
-class LibTabComponent {
-    constructor(_tabGroup) {
-        this._tabGroup = _tabGroup;
-        this._isActive = false;
-    }
-    /** Indicates the index of the tab. */
-    get index() {
-        var _a, _b;
-        return ((_b = (_a = this._tabGroup) === null || _a === void 0 ? void 0 : _a.tabs) === null || _b === void 0 ? void 0 : _b.toArray().indexOf(this)) || undefined;
-    }
-    /** Indicates whether the tab is active. */
-    get isActive() {
-        return this._isActive;
-    }
-    /** Setter for LibTabComponent isActive property. */
-    set isActive(isActive) {
-        this._isActive = isActive;
-    }
-    ngOnInit() {
-        this.id = this.id || uuid.v4();
-    }
-}
-LibTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibTabComponent, deps: [{ token: LIBTABGROUP_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-LibTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LibTabComponent, selector: "lib-tab", inputs: { label: "label", id: "id" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
-        <ng-template>
-            <ng-content></ng-content>
-        </ng-template>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibTabComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-tab',
-                    template: `
-        <ng-template>
-            <ng-content></ng-content>
-        </ng-template>
-    `,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [LIBTABGROUP_ACCESSOR]
-                }] }]; }, propDecorators: { content: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }], label: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }] } });
-
-class LibTabGroupComponent {
-    constructor() {
-        /** The inner tabs of the group. */
-        this.tabs = undefined;
-        /** Emmited when a step change occurs. */
-        this.tabChanged = new EventEmitter();
-    }
-    /** The current tab. */
-    get currentTab() {
-        var _a;
-        return (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.find(x => x.isActive);
-    }
-    /** The index (starting from zero) of the current tab. */
-    get currentΤabIndex() {
-        var _a;
-        return ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.index) || undefined;
-    }
-    ngOnInit() { }
-    ngAfterContentInit() {
-        if (!this.tabs) {
-            return;
-        }
-    }
-    ngAfterContentChecked() {
-        if (this.tabs && this.tabs.length > 0) {
-            const anyActive = this.tabs.filter(x => x.isActive).length > 0;
-            if (!anyActive) {
-                this.tabs.get(0).isActive = true;
-            }
-        }
-    }
-    onTabChanged(selectedTab) {
-        this.tabs.forEach((tab) => tab.isActive = tab.id === selectedTab.id);
-        this.tabChanged.emit(selectedTab);
-    }
-    onTabSelectChanged(selectedTabIndex) {
-        var _a;
-        this.tabs.forEach((tab, index) => tab.isActive = index === selectedTabIndex);
-        this.tabChanged.emit((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.get(selectedTabIndex));
-    }
-}
-LibTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LibTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LibTabGroupComponent, selector: "lib-tab-group", outputs: { tabChanged: "tabChanged" }, providers: [
-        { provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
-    ], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"tab-group-select-hidden\">\r\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\r\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\r\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\r\n    </select>\r\n</div>\r\n<div class=\"tab-group-container-hidden\">\r\n    <div class=\"tab-group-container\">\r\n        <nav class=\"tab-group-container-nav\" aria-label=\"Tabs\">\r\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\r\n                {{ tab.label }}\r\n            </a>\r\n        </nav>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"currentTab?.content\">\r\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\r\n</div>", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibTabGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-tab-group',
-                    templateUrl: './lib-tab-group.component.html',
-                    providers: [
-                        { provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
-                    ]
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { tabs: [{
-                type: ContentChildren,
-                args: [LibTabComponent, { descendants: true }]
-            }], tabChanged: [{
-                type: Output
-            }] } });
-
-class LibStepInfoDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-LibStepInfoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibStepInfoDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-LibStepInfoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LibStepInfoDirective, selector: "[libStepInfo]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibStepInfoDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[libStepInfo]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
-class LibStepLabelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-LibStepLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibStepLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-LibStepLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LibStepLabelDirective, selector: "[libStepLabel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibStepLabelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[libStepLabel]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
-var StepState;
-(function (StepState) {
-    StepState["Active"] = "Active";
-    StepState["Completed"] = "Completed";
-    StepState["Upcoming"] = "Upcoming";
-})(StepState || (StepState = {}));
-;
-class LibStepComponent {
-    constructor(_stepper) {
-        this._stepper = _stepper;
-    }
-    /** Indicates the index of the step. */
-    get index() {
-        return this._stepper ? this._stepper.steps.toArray().indexOf(this) : -1;
-    }
-    /** Indicates whether this step is the last step. */
-    get isLast() {
-        return this._stepper ? this._stepper.steps.length - 1 === this.index : false;
-    }
-    /** Indicates whether you can navigate to the step or not. */
-    get isValid() {
-        if (!this.stepControl) {
-            return true;
-        }
-        return this.stepControl.valid;
-    }
-    /** Shows the current state of the step. */
-    get state() {
-        var _a;
-        const currentIndex = (_a = this._stepper) === null || _a === void 0 ? void 0 : _a.currentStepIndex;
-        if (currentIndex === this.index) {
-            return StepState.Active;
-        }
-        if (currentIndex > this.index) {
-            return StepState.Completed;
-        }
-        return StepState.Upcoming;
-    }
-}
-LibStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibStepComponent, deps: [{ token: LIBSTEPPER_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-LibStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LibStepComponent, selector: "lib-step", inputs: { class: "class", stepControl: "stepControl" }, queries: [{ propertyName: "stepLabel", first: true, predicate: LibStepLabelDirective, descendants: true }, { propertyName: "stepInfo", first: true, predicate: LibStepInfoDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
-        <ng-template>
-            <ng-content></ng-content>
-        </ng-template>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibStepComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-step',
-                    template: `
-        <ng-template>
-            <ng-content></ng-content>
-        </ng-template>
-    `,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [LIBSTEPPER_ACCESSOR]
-                }] }]; }, propDecorators: { content: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }], stepLabel: [{
-                type: ContentChild,
-                args: [LibStepLabelDirective]
-            }], stepInfo: [{
-                type: ContentChild,
-                args: [LibStepInfoDirective]
-            }], class: [{
-                type: Input
-            }], stepControl: [{
-                type: Input
-            }] } });
-
-var StepperType;
-(function (StepperType) {
-    StepperType["Bullets"] = "Bullets";
-    StepperType["BulletsAndText"] = "BulletsAndText";
-    StepperType["Circles"] = "Circles";
-    StepperType["CirclesWithText"] = "CirclesWithText";
-    StepperType["Panels"] = "Panels";
-    StepperType["PanelsWithBorder"] = "PanelsWithBorder";
-    StepperType["Progress"] = "Progress";
-    StepperType["Simple"] = "Simple";
-})(StepperType || (StepperType = {}));
-
-class LibStepperComponent {
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
-        // Private properties.
-        this._currentStepIndex = 0;
-        this._isCompleted = false;
-        /** Emmited when a step change occurs. */
-        this.stepChanged = new EventEmitter();
-        /** Emmited when the stepper navigates away from the final step. Only emits once. */
-        this.completed = new EventEmitter();
-        /** Indicates whether each step has to be validated before proceeding to the next. */
-        this.linear = false;
-        /** The type of the stepper. */
-        this.type = StepperType.Panels;
-        this.StepState = StepState;
-        this.StepperType = StepperType;
-    }
-    /** The current wizard step. */
-    get currentStep() {
-        var _a;
-        return (_a = this.steps) === null || _a === void 0 ? void 0 : _a.get(this._currentStepIndex);
-    }
-    /** The index (starting from zero) of the current wizard step. */
-    get currentStepIndex() {
-        return this._currentStepIndex;
-    }
-    /** Indicates whether stepper can go a step back. */
-    get canGoBack() {
-        return this._currentStepIndex > 0;
-    }
-    /** Indicates whether stepper can go a step forward. */
-    get canGoForward() {
-        var _a;
-        return this._currentStepIndex < ((_a = this.steps) === null || _a === void 0 ? void 0 : _a.length) - 1;
-    }
-    /** Indicates whether  */
-    get isCompleted() {
-        return this._isCompleted;
-    }
-    ngOnInit() { }
-    ngAfterViewChecked() {
-        this._changeDetectorRef.detectChanges();
-    }
-    /** Proceeds to the next step, if any. */
-    goToNextStep() {
-        var _a;
-        if (((_a = this.currentStep) === null || _a === void 0 ? void 0 : _a.isLast) && !this._isCompleted) {
-            this._isCompleted = true;
-            this.completed.emit();
-        }
-        if (!this.canGoForward) {
-            return;
-        }
-        this.updateCurrentStepIndex(this._currentStepIndex + 1);
-    }
-    /** Proceeds to the previous step, if any. */
-    goToPreviousStep() {
-        if (!this.canGoBack) {
-            return;
-        }
-        this.updateCurrentStepIndex(this._currentStepIndex - 1);
-    }
-    onSelectStep(selectedStep) {
-        this.updateCurrentStepIndex(selectedStep.index);
-    }
-    updateCurrentStepIndex(newIndex) {
-        const stepsArray = this.steps.toArray();
-        const currentStep = stepsArray[this.currentStepIndex];
-        const shouldStop = this.linear && ((!currentStep.isValid && newIndex >= this.currentStepIndex) || // If current step is invalid and want to go forward, then stop.
-            (currentStep.isValid && newIndex > this.currentStepIndex + 1 && stepsArray.slice(this.currentStepIndex + 1, newIndex).some(x => !x.isValid)) // If going forward (more than 1 steps), check if there are any invalid steps in between.
-        );
-        if (shouldStop) {
-            return;
-        }
-        this.stepChanged.emit({
-            selectedIndex: newIndex,
-            previouslySelectedIndex: this.currentStepIndex,
-            selectedStep: stepsArray[newIndex],
-            previouslySelectedStep: currentStep
-        });
-        this._currentStepIndex = newIndex;
-    }
-}
-LibStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-LibStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged", completed: "completed" }, providers: [
-        { provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
-    ], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\r\n    <!-- Bullets -->\r\n    <nav class=\"stepper-bullets-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\r\n        <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n        <ol role=\"list\" class=\"stepper-bullets-ol\">\r\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                <!-- Completed Step -->\r\n                <div class=\"stepper-bullets-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"stepper-bullets-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"stepper-bullets-active-step-level1\" aria-hidden=\"true\">\r\n                        <span class=\"stepper-bullets-active-step-level1\"></span>\r\n                    </span>\r\n                    <span class=\"stepper-bullets-active-step-bullet\" aria-hidden=\"true\"></span>\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div href=\"#\" class=\"stepper-bullets-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Bullets & Text -->\r\n    <div class=\"stepper-bullets-and-text-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n        <nav aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"stepper-bullets-and-text-ol\">\r\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                    <!-- Complete Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <span class=\"stepper-bullets-and-text-completed-step\">\r\n                            <span class=\"stepper-bullets-and-text-completed-step-level1\">\r\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                            <span class=\"stepper-bullets-and-text-completed-step-container\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"stepper-bullets-and-text-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                        <span class=\"stepper-bullets-and-text-active-step-level1\" aria-hidden=\"true\">\r\n                            <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\r\n                            <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\r\n                        </span>\r\n                        <span class=\"stepper-bullets-and-text-active-step-container\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"stepper-bullets-and-text-upcoming-step\">\r\n                            <div class=\"stepper-bullets-and-text-upcoming-step-level1\" aria-hidden=\"true\">\r\n                                <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\r\n                            </div>\r\n                            <p class=\"stepper-bullets-and-text-upcoming-step-container\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Circles -->\r\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\r\n        <ol class=\"flex items-center\" role=\"list\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\r\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\" 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\" clip-rule=\"evenodd\" />\r\n                        </svg>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\r\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\r\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Circles With Text -->\r\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n        <ol role=\"list\" class=\"overflow-hidden\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\r\n                <!-- Complete Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" 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\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\r\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div href=\"#\" class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\r\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n                <!-- Completed step -->\r\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                <path fill-rule=\"evenodd\" 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\" clip-rule=\"evenodd\" />\r\n                            </svg>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Active step -->\r\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\r\n                    </span>\r\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming step -->\r\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Arrow separator for lg screens and up -->\r\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\r\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels With Border -->\r\n    <div class=\"panels-with-border-container\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n        <nav class=\"panels-with-border-nav\" aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"panels-with-border-ol\">\r\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"panels-with-border-li\">\r\n                    <!-- Completed Step -->\r\n                    <div class=\"panels-with-border-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-completed-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-completed-step-level2\">\r\n                                <span class=\"panels-with-border-completed-step-level21\">\r\n                                    <span class=\"panels-with-border-completed-step-level211\">\r\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                            <path fill-rule=\"evenodd\" 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\" clip-rule=\"evenodd\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-completed-step-level22\">\r\n                                    <span class=\"panels-with-border-completed-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-completed-step-level222\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"panels-with-border-active-step\" *ngIf=\"step.state === StepState.Active\">\r\n                        <div aria-current=\"step\">\r\n                            <span class=\"panels-with-border-active-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-active-step-level2\">\r\n                                <span class=\"panels-with-border-active-step-level21\">\r\n                                    <span class=\"panels-with-border-active-step-level211\">\r\n                                        <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-active-step-level22\">\r\n                                    <span class=\"panels-with-border-active-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-active-step-level222\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"panels-with-border-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-upcoming-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-upcoming-step-level2\">\r\n                                <span class=\"panels-with-border-upcoming-step-level21\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level211\">\r\n                                        <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-upcoming-step-level22\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Progress -->\r\n    <div *ngSwitchCase=\"StepperType.Progress\">\r\n        <div class=\"mt-6\" aria-hidden=\"true\">\r\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\r\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\r\n            </div>\r\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\r\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\r\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Simple -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\r\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n</ng-container>\r\n<ng-container *ngFor=\"let step of steps\">\r\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n</ng-container>", 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibStepperComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-stepper',
-                    templateUrl: './lib-stepper.component.html',
-                    providers: [
-                        { provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { steps: [{
-                type: ContentChildren,
-                args: [LibStepComponent, { descendants: true }]
-            }], stepChanged: [{
-                type: Output
-            }], completed: [{
-                type: Output
-            }], linear: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }] } });
-
-class DynamicComponentHostDirective {
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-        this.hostName = '';
-    }
-}
-DynamicComponentHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicComponentHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-DynamicComponentHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: { hostName: "hostName" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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) {
-        var _a, _b, _c;
-        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 ((_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.componentRef) {
-            this.contentRef.componentRef.destroy();
-        }
-        if (this.vcr && ((_b = this.contentRef) === null || _b === void 0 ? void 0 : _b.viewRef)) {
-            this.vcr.remove(this.vcr.indexOf(this.contentRef.viewRef));
-        }
-        if ((_c = this.contentRef) === null || _c === void 0 ? void 0 : _c.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() {
-        var _a;
-        if ((_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.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) {
-        var _a;
-        const injector = Injector.create({
-            providers: this.providers,
-            parent: this.injector,
-        });
-        this.componentRef = this.componentFactory.create(injector, (_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.nodes);
-        this.applicationRef.attachView(this.componentRef.hostView);
-        this.instance = this.componentRef.instance;
-        Object.assign(this.componentRef.instance, options);
-    }
-    appendContentToContainer() {
-        var _a, _b;
-        if (this.container instanceof ElementRef) {
-            this.container.nativeElement.appendChild((_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.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((_b = this.componentRef) === null || _b === void 0 ? void 0 : _b.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: "12.2.16", ngImport: i0, type: ComponentLoaderFactory, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
-ComponentLoaderFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComponentLoaderFactory, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComponentLoaderFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }]; } });
-
-class UserProfileMenuComponent {
-    constructor(authService, router, links) {
-        this.authService = authService;
-        this.router = router;
-        this.links = links;
-        // tslint:disable-next-line:no-input-rename
-        this.showUserName = false;
-        this.userSub$ = null;
-        this.statusSub$ = null;
-        this.user = null;
-        this.avatarName = null;
-        this.userMenuExpanded = false;
-    }
-    ngOnInit() {
-        this.authService.loadUser().subscribe((user) => {
-            this.setCurrentUser(user);
-        }, error => {
-            console.error(error);
-        });
-        // Detect user changes and display / or not user info accordingly...
-        this.userSub$ = this.authService.user$.subscribe((user) => {
-            // console.log('ShellHeaderComponent user subscription');
-            this.setCurrentUser(user);
-        });
-    }
-    signin(event) {
-        if (event) {
-            event.preventDefault();
-        }
-        this.authService.signinRedirect();
-    }
-    setCurrentUser(user) {
-        var _a, _b;
-        this.user = user;
-        if (this.user && this.user.profile) {
-            this.avatarName = `${(_a = this.user.profile.given_name) === null || _a === void 0 ? void 0 : _a.charAt(0)}${(_b = this.user.profile.family_name) === null || _b === void 0 ? void 0 : _b.charAt(0)}`.toUpperCase();
-        }
-    }
-    // tslint:disable-next-line:typedef
-    onClickOutside($event) {
-        this.userMenuExpanded = false;
-    }
-}
-UserProfileMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UserProfileMenuComponent, deps: [{ token: AuthService }, { token: Router }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-UserProfileMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n  <div class=\"inline-flex\">\r\n    <!-- Username -->\r\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n        {{ user.profile.name }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [class.ml-2]=\"showUserName\">\r\n      <button type=\"button\" \r\n              *ngIf=\"user\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\"\r\n              (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n        <span class=\"sr-only\">Open user menu</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n        </span>\r\n      </button>\r\n\r\n      <button type=\"button\"\r\n              *ngIf=\"!user\"\r\n              (click)=\"signin($event)\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\">\r\n        <span class=\"sr-only\">sign in</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n        </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"userMenuExpanded ?\r\n    'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n    :\r\n    'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n         <lib-nav-links-list\r\n            [links]=\"links.profile\"\r\n            [link-class]=\"'nav-link-profile'\"\r\n            [link-active-class]=\"'nav-link-profile-active'\">\r\n         </lib-nav-links-list>\r\n  </div>\r\n\r\n</div>\r\n\r\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }], 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-user-profile-menu',
-                    templateUrl: './user-profile-menu.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
-                    type: Inject,
-                    args: [AuthService]
-                }] }, { type: i1$1.Router, decorators: [{
-                    type: Inject,
-                    args: [Router]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [APP_LINKS]
-                }] }]; }, propDecorators: { showUserName: [{
-                type: Input,
-                args: ['show-user-name']
-            }] } });
-
-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() {
-        var _a;
-        if (this.links && this.links['notifications']) {
-            this.links['notifications'].subscribe(notificationsLink => {
-                this.allNotificationsLink = notificationsLink;
-            });
-        }
-        if (this.notifications) {
-            this.notificationsSub$ = (_a = this.notifications) === null || _a === void 0 ? void 0 : _a.messages.subscribe(result => {
-                if (result.items) {
-                    this.newArrival = true;
-                    this.unreadCount = result.count;
-                    this.items = result.items;
-                    setTimeout(() => { this.newArrival = false; }, 1000);
-                }
-            });
-        }
-    }
-    doInboxAction() {
-        var _a;
-        if ((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.inboxAction) {
-            this.notifications.inboxAction();
-        }
-        else {
-            this.menuExpanded = !this.menuExpanded;
-            this.ngOnDestroy();
-            this.ngOnInit();
-        }
-        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: "12.2.16", ngImport: i0, type: NotificationsIndicatorComponent, deps: [{ token: APP_NOTIFICATIONS }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-NotificationsIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator", ngImport: i0, template: "<div class=\"relative\"\r\n(clickOutside)=\"onClickOutside($event)\">\r\n  <!-- Notifications Button -->\r\n  <button type=\"button\"\r\n          (click)=\"doInboxAction()\"\r\n          aria-expanded=\"false\"\r\n          aria-haspopup=\"true\">\r\n    <span class=\"sr-only\">View notifications</span>\r\n    <span class=\"avatar-container\">\r\n      <span class=\"avatar-text\">\r\n        <i class=\"ms-Icon hover:text-blue-400\"\r\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\r\n          [class.text-sky-400]=\"unreadCount > 0\"\r\n          [class.animate-notification]=\"newArrival\"\r\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\r\n        </i>\r\n      </span>\r\n      <span\r\n        *ngIf=\"unreadCount > 0\"\r\n        [class.animate-pulse]=\"newArrival\"\r\n        class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\r\n        {{ unreadCount }}\r\n      </span>\r\n    </span>\r\n  </button>\r\n\r\n  <!-- Notifications dropdown -->\r\n  <div *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\r\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\r\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\r\n        <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n      </ng-container>\r\n      <ng-template #messagesDropDown>\r\n        <ul class=\"pr-1.5\">\r\n          <ng-container *ngIf=\"items; else loading\">\r\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\r\n              <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let message of items; let i = index\">\r\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\r\n                <div class=\"flex justify-between\">\r\n                  <div class=\"flex-grow\">\r\n                    <a\r\n                      [routerLink]=\"message.path\"\r\n                      (click)=\"removeItem(i)\"\r\n                      class=\"notifications-nav-link grid\"\r\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\r\n                    >\r\n                      <div class=\"flex flex-col\">\r\n                        <div class=\"font-thin tracking-tighter\">\r\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\r\n                        </div>\r\n                        <div class=\"font-bold\">\r\n                          {{ message.data.text }}\r\n                        </div>\r\n                      </div>\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <ng-template #loading>\r\n            <div class=\"h-32 flex items-center justify-center\">\r\n              <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\r\n            </div>\r\n          </ng-template>\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"p-1 rounded-sm\">\r\n      <a [routerLink]=\"allNotificationsLink!.path\" (click)=\"onClickOutside($event)\">\r\n        <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{allNotificationsLink!.text}}</button>\r\n      </a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", 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: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "date": i1.DatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NotificationsIndicatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-notifications-indicator',
-                    templateUrl: './notifications-indicator.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [APP_NOTIFICATIONS]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [APP_LINKS]
-                }] }]; } });
-
-class LanguageSelectionComponent {
-    constructor(langsService) {
-        this.langsService = langsService;
-        this.menuExpanded = false;
-    }
-    ngOnInit() {
-    }
-    selectLang(option) {
-        var _a;
-        if ((_a = this.langsService) === null || _a === void 0 ? void 0 : _a.setSelected) {
-            this.langsService.setSelected(option.value);
-        }
-    }
-    onClickOutside($event) {
-        this.menuExpanded = false;
-    }
-}
-LanguageSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LanguageSelectionComponent, deps: [{ token: APP_LANGUAGES }], target: i0.ɵɵFactoryTarget.Component });
-LanguageSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LanguageSelectionComponent, selector: "lib-language-selection", ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button class=\"text-blue-300 hover:text-blue-400\" (click)=\"menuExpanded = !menuExpanded\">\r\n    <i class=\"text-xs mr-1 ms-Icon ms-Icon--Globe\"></i>\r\n    <span>{{langsService?.selected || langsService?.default}}</span>\r\n  </button>\r\n\r\n  <div\r\n    [class]=\"menuExpanded ? 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none':'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n    <div class=\"py-1\" role=\"none\">\r\n      <ng-container *ngFor=\"let lang of langsService?.options | async\">\r\n        <a (click)=\"selectLang(lang)\" *ngIf=\"lang.value != langsService?.selected\" class=\"nav-link-profile\" role=\"menuitem\" tabindex=\"-1\" id=\"menu-item-0\">\r\n          <i class=\"text-xs mr-1 ms-Icon ms-Icon--GlobeFavorite\"></i>\r\n          {{lang.description}}\r\n        </a>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LanguageSelectionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-language-selection',
-                    templateUrl: './language-selection.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [APP_LANGUAGES]
-                }] }]; } });
-
-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;
-        // tslint:disable-next-line:no-input-rename
-        this.showLangs = 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);
-        });
-    }
-    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) {
-        var _a, _b;
-        this.user = user;
-        if (this.user && this.user.profile) {
-            this.avatarName = `${(_a = this.user.profile.given_name) === null || _a === void 0 ? void 0 : _a.charAt(0)}${(_b = this.user.profile.family_name) === null || _b === void 0 ? void 0 : _b.charAt(0)}`.toUpperCase();
-        }
-    }
-}
-ShellHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border" }, ngImport: i0, template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div class=\"shell-header-border\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-link-container\">\r\n          <div class=\"shell-header-link-container-inner\">\r\n            <lib-nav-links-list\r\n              [links]=\"sectionLinks\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'nav-link'\"\r\n              [link-active-class]=\"'nav-link-active'\">\r\n            </lib-nav-links-list>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n\r\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n            <lib-nav-links-list\r\n              [links]=\"links.profileActions\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\"\r\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n            </lib-nav-links-list>\r\n\r\n\r\n            <!-- Profile dropdown -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\r\n\r\n            <!-- languages dropdown -->\r\n            <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n              <lib-language-selection></lib-language-selection>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <!--\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n        -->\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }, { type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }, { type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { type: LanguageSelectionComponent, selector: "lib-language-selection" }], directives: [{ type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellHeaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'lib-shell-header',
-                    templateUrl: './shell-header.component.html',
-                }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
-                    type: Inject,
-                    args: [AuthService]
-                }] }, { type: i1$1.Router, decorators: [{
-                    type: Inject,
-                    args: [Router]
-                }] }, { type: 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']
-            }], showLangs: [{
-                type: Input,
-                args: ['show-langs']
-            }], border: [{
-                type: Input
-            }] } });
-
-class ShellFooterComponent {
-    constructor(links) {
-        this.links = links;
-    }
-}
-ShellFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellFooterComponent, deps: [{ token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-ShellFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellFooterComponent, selector: "lib-shell-footer", ngImport: i0, template: "<footer class=\"shell-footer-component-container\">\r\n  <div class=\"shell-footer-paddings\">\r\n    <div class=\"shell-footer-component-container-inner\">\r\n      <div class=\"shell-footer-sections-container\">\r\n        <div class=\"shell-footer-section\">\r\n          <img class=\"shell-footer-logo-h\" src=\"assets/images/branding/indice.png\" alt=\"INDICE logo\" />\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"space-y-2\">\r\n              <ng-container *ngFor=\"let link of links.brand | async\">\r\n                <li>\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Legal</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <ng-container *ngFor=\"let link of links.legal | async\">\r\n                <li class=\"mb-2\">\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Follow us</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg  class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"/>\r\n                  </svg>\r\n                  <span> Twitter </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Instagram </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" >\r\n                    <path fill-rule=\"evenodd\" d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Facebook </span>\r\n                </a>\r\n              </li>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"shell-footer-copyright\">\r\n      <!--<nav class=\"flex flex-wrap justify-center space-x-6\">\r\n      <a href=\"#\" class=\"font-normal text-sm hover:text-gray-100 mb-2\">Cookie settings</a>\r\n    </nav>-->\r\n      <p class=\"text-sm text-center sm:text-right\">\r\n        \u00A9 2021 INDICE. All rights reserved.\r\n      </p>\r\n    </div>\r\n  </div>\r\n</footer>\r\n", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellFooterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-shell-footer',
-                    templateUrl: './shell-footer.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [APP_LINKS]
-                }] }]; } });
-
-class ShellStackedLayoutComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-ShellStackedLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellStackedLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ShellStackedLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\r\n    <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customHeaderComponent\">\r\n        <div appDynamicComponentHost =\"Header\"></div>\r\n        </ng-container>\r\n        <lib-shell-header *ngIf=\"!config?.customHeaderComponent\" [show-userName]=\"config?.showUserNameOnHeader\"\r\n        [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\r\n        </lib-shell-header>\r\n    </div>\r\n</div>\r\n\r\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n        <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\r\n    </div>\r\n</main>\r\n\r\n<div class=\"shell-footer-container\" *ngIf=\"config?.showFooter\">\r\n    <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customFooterComponent\">\r\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n        </ng-container>\r\n        <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n</div>", components: [{ type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "show-langs", "border"] }, { type: ShellFooterComponent, selector: "lib-shell-footer" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-shell-stacked-layout',
-                    templateUrl: './shell-stacked-layout.component.html'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
-                type: Input
-            }] } });
-
-class ShellSidebarComponent {
-    constructor(router, route, links) {
-        this.router = router;
-        this.route = route;
-        this.links = links;
-        // tslint:disable-next-line:no-input-rename
-        this.sectionLinksPath = 'main';
-        this.sectionLinks = of([]);
-        // tslint:disable-next-line:no-input-rename
-        this.shellConfig = undefined;
-        this.activeFragment = null;
-    }
-    ngOnInit() {
-        this.activeFragment = this.route.fragment.pipe(share());
-        this.sectionLinks = this.links[this.sectionLinksPath];
-    }
-}
-ShellSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellSidebarComponent, deps: [{ token: Router }, { token: ActivatedRoute }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-ShellSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"shell-sidebar-component-container\">\r\n <div class=\"shell-sidebar-component-links-container sidebar\">\r\n    <lib-nav-links-list\r\n      [show-icons]=\"true\"\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'sidebar nav-link group'\"\r\n      [link-active-class]=\"'sidebar nav-link-active group'\">\r\n    </lib-nav-links-list>\r\n  </div>\r\n</div>\r\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellSidebarComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-shell-sidebar',
-                    templateUrl: './shell-sidebar.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router, decorators: [{
-                    type: Inject,
-                    args: [Router]
-                }] }, { type: i1$1.ActivatedRoute, decorators: [{
-                    type: Inject,
-                    args: [ActivatedRoute]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [APP_LINKS]
-                }] }]; }, propDecorators: { sectionLinksPath: [{
-                type: Input,
-                args: ['section-links']
-            }], shellConfig: [{
-                type: Input,
-                args: ['config']
-            }] } });
-
-class ShellSidebarHeaderComponent extends ShellHeaderComponent {
-    constructor(authService, router, route, config, links) {
-        super(authService, router, route, config, links);
-        this.authService = authService;
-        this.router = router;
-        this.route = route;
-        this.config = config;
-        this.links = links;
-    }
-}
-ShellSidebarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellSidebarHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-ShellSidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0, template: "<div class=\"shell-header-paddings\">\r\n    <div class=\"shell-header-border\">\r\n        <div class=\"shell-header-menu-container\">\r\n            <div class=\"shell-header-md-visible\">\r\n                <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n                <!-- Profile dropdown -->\r\n                <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n                    <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n                </div>\r\n                <!-- Notifications dropdown -->\r\n                <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n                    <lib-notifications-indicator></lib-notifications-indicator>\r\n                </div>\r\n                <!-- languages dropdown -->\r\n                <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n                    <lib-language-selection></lib-language-selection>\r\n                </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n \r\n", components: [{ type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }, { type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { type: LanguageSelectionComponent, selector: "lib-language-selection" }], directives: [{ type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellSidebarHeaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-shell-sidebar-header',
-                    templateUrl: './shell-sidebar-header.component.html'
-                }]
-        }], 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]
-                }] }]; } });
-
-class ShellSidebarLayoutComponent {
-    constructor() {
-        this.showMobileSidebar = true;
-    }
-    ngOnInit() {
-    }
-    toggleMobileSidebar() {
-        this.showMobileSidebar = !this.showMobileSidebar;
-    }
-}
-ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config" }, ngImport: i0, template: "<div>\r\n    <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\r\n    <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\r\n      <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\r\n      <div class=\"sidebar-off-canvas-menu-backdrop\" \r\n          [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\r\n      </div>\r\n  \r\n      <div class=\"sidebar-off-canvas-menu-container-inner\" \r\n      [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\" \r\n      [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\r\n        <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\r\n        <div class=\"sidebar-off-canvas-layout-container\">\r\n          <!--Close button, show/hide based on off-canvas menu state.-->\r\n          <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n            <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n              <span class=\"sr-only\">Close sidebar</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n  \r\n          <div class=\"sidebar-off-canvas-app-logo-container\">\r\n            <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n\r\n          <lib-shell-sidebar></lib-shell-sidebar>\r\n         \r\n        </div>\r\n  \r\n        <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\r\n          <!-- Dummy element to force sidebar to shrink to fit close icon -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  \r\n    <!-- Static sidebar for desktop -->\r\n    <div class=\"sidebar-static-menu-outer-container\">\r\n    \r\n    <div class=\"sidebar-static-menu-container\" \r\n      [class.sidebar-static-menu-container-active]=\"showMobileSidebar\" \r\n      [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\r\n      <!-- Sidebar component, swap this element with another sidebar if you like -->\r\n      <div class=\"sidebar-static-menu-container-inner\">\r\n        <div class=\"sidebar-static-menu-app-logo-container\">\r\n          <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n        </div>\r\n        <lib-shell-sidebar></lib-shell-sidebar>\r\n      </div>\r\n    </div>\r\n    </div>\r\n\r\n    <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\r\n      <div class=\"sidebar-static-menu-toggle-button-container\">\r\n        <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n          <span class=\"sr-only\">Toggle sidebar</span>\r\n          <!-- Heroicon name: outline/menu-alt-2 -->\r\n          <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n          </svg>\r\n        </button>\r\n        \r\n        <!-- sidebar-static-menu-header-container -->\r\n        <div class=\"sidebar-static-menu-header-container\">\r\n          <div class=\"sidebar-static-menu-header-near-container\">\r\n            <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"!showMobileSidebar\">\r\n              <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n            </div>\r\n          </div>\r\n          <div class=\"sidebar-static-menu-header-far-container\">\r\n            <lib-shell-sidebar-header \r\n            [show-userName]=\"config?.showUserNameOnHeader\"\r\n            [show-alerts]=\"config?.showAlertsOnHeader\" \r\n            [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\r\n          </div>\r\n        </div>\r\n      </div>\r\n  \r\n      <div flex-1>\r\n        <main class=\"shell-content-container-fluid\">\r\n            <div class=\"shell-content-container-inner\">\r\n              <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\r\n              <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n            </div>\r\n          </main>\r\n      </div>\r\n    </div>\r\n  </div>", components: [{ type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }, { type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-shell-sidebar-layout',
-                    templateUrl: './shell-sidebar-layout.component.html'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
-                type: Input
-            }] } });
-
-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;
-        this.hideSidebar = 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) => {
-            var _a, _b, _c, _d, _e, _f;
-            // console.log('ShellLayoutComponent ActivationStart', e);
-            if ((_a = e) === null || _a === void 0 ? void 0 : _a.snapshot) {
-                // console.log('ShellLayoutComponent ActivationStart snapshot', (e as ActivationStart)?.snapshot);
-                if ((_c = (_b = e) === null || _b === void 0 ? void 0 : _b.snapshot) === null || _c === void 0 ? void 0 : _c.data) {
-                    // console.log('ShellLayoutComponent ActivationStart snapshot data', (e as ActivationStart)?.snapshot.data);
-                    if ((_e = (_d = e) === null || _d === void 0 ? void 0 : _d.snapshot) === null || _e === void 0 ? void 0 : _e.data.shell) {
-                        // console.log('ShellLayoutComponent ActivationStart snapshot data shell params',
-                        // (e as ActivationStart)?.snapshot.data.shell);
-                        this.activeConfig = (_f = e) === null || _f === void 0 ? void 0 : _f.snapshot.data.shell;
-                        // 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: "12.2.16", 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: "12.2.16", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\r\n\r\n  <!-- STACKED LAYOUT -->\r\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n  </div>\r\n\r\n  <!-- SIDEBAR LAYOUT -->\r\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\r\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>", components: [{ type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config"] }, { type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config"] }, { type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible", "animate"], outputs: ["onComplete"] }, { type: ToasterContainerComponent, selector: "lib-toaster-container" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellLayoutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'lib-shell-layout',
-                    templateUrl: './shell-layout.component.html',
-                }]
-        }], ctorParameters: function () { return [{ type: 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() {
-        var _a;
-        if ((_a = this.searchInput$) === null || _a === void 0 ? void 0 : _a.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) {
-        var _a;
-        this.onSearch.emit((_a = this.searchInput$) === null || _a === void 0 ? void 0 : _a.nativeElement.value);
-    }
-    handleClear(event) {
-        var _a;
-        console.log('handle clear!!!');
-        event.stopPropagation();
-        this.onSearch.emit((_a = event.target) === null || _a === void 0 ? void 0 : _a.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: "12.2.16", ngImport: i0, type: ViewLayoutComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-ViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: { header: ["show-header", "header"], fluid: "fluid", title: "title", icon: "icon", actions: "actions", busy: "busy", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], view: "view", metaItems: ["meta-items", "metaItems"] }, outputs: { onAction: "onAction", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\r\n\r\n  <div class=\"view-layout-title-container\">\r\n\r\n    <div class=\"view-layout-title-container-inner\">\r\n      <div class=\"flex items-center\">\r\n        <i *ngIf=\"icon\" [class]=\"icon + ' title-icon'\" aria-hidden=\"true\"></i>\r\n        <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title}}</h1>\r\n      </div>\r\n      <div *ngIf=\"metaItems && metaItems.length > 0\" class=\"meta-container\">\r\n        <ng-container *ngFor=\"let meta of metaItems\">\r\n          <div class=\"meta-item-container\">\r\n            <i *ngIf=\"meta.icon\" [class]=\"meta.icon + ' meta-icon'\" aria-hidden=\"true\"></i>\r\n            <span class=\"meta-text\">{{meta.text}}</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"flex items-center justify-end\">\r\n      <ng-container *ngFor=\"let action of actions\"  [ngSwitch]=\"action.type\">\r\n\r\n        <ng-container *ngSwitchCase=\"'switch-view'\">\r\n          <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"ml-1 disabled:opacity-50 btn-view-header\" (click)=\"switchViewActionClick(action)\">\r\n            <span class=\"inline-block relative\">\r\n              <i [class]=\"action.icon\"></i>\r\n              <span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\r\n            </span>\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container\">\r\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\r\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\r\n              </svg>-->\r\n            </div>\r\n            <input id=\"search\" #search class=\"search-input\" [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\" name=\"search\" (input)=\"searchActionType(search.value)\" (onsearch)=\"handleClear($event)\">\r\n          </div>\r\n          <button type=\"button\"  href=\"#\" class=\"btn-view-header rounded-l-none\" [title]=\"action.tooltip\" (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"  href=\"#\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n\r\n\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"  class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</header>\r\n\r\n<!-- component -->\r\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewLayoutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-view-layout',
-                    templateUrl: './view-layout.component.html'
-                }]
-        }], 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: "12.2.16", ngImport: i0, type: ModelViewLayoutComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
-ModelViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ModelViewLayoutComponent, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"] }, ngImport: i0, template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\">\r\n  <main class=\"model-view-container\">\r\n    <div class=\"model-view-container-inner\">\r\n      <aside class=\"model-view-aside\">\r\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n          <div class=\"model-view-aside-header-container\">\r\n            <div class=\"model-view-aside-header-container-inner\">\r\n              <ng-content></ng-content>\r\n            </div>\r\n            <!-- menu items -->\r\n            <div class=\"model-view-menu-container\">\r\n              <nav class=\"model-view-menu-nav\">\r\n                <div class=\"model-view-menu-item\">\r\n                  <ng-container *ngFor=\"let section of primary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       class=\"view-nav-link\">\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"model-view-menu-item-far\">\r\n                  <ng-container *ngFor=\"let section of secondary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLinkActiveOptions]=\"{ exact: true }\"\r\n                       [routerLink]=\"section.link\"\r\n                       class=\"view-nav-link\">\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </aside>\r\n      <div class=\"model-view-details-container\">\r\n        <router-outlet></router-outlet>\r\n      </div>\r\n    </div>\r\n  </main>\r\n", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ModelViewLayoutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'lib-model-view-layout',
-                    templateUrl: './model-view-layout.component.html'
-                }]
-        }], 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: "12.2.16", ngImport: i0, type: SideViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-SideViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SideViewLayoutComponent, selector: "lib-side-view-layout", inputs: { title: "title", showActions: "showActions", disabled: "disabled", returnPath: ["return-path", "returnPath"], okLabel: ["ok-label", "okLabel"], okShow: ["ok-show", "okShow"], closeOnOk: ["ok-close-dialog", "closeOnOk"], cancelLabel: ["cancel-label", "cancelLabel"], cancelShow: ["cancel-show", "cancelShow"], forceLocationBack: ["force-location-back", "forceLocationBack"] }, outputs: { cancel: "cancel", ok: "ok" }, ngImport: i0, template: "<div class=\"side-view-layout-size-box\">\r\n  <div class=\"side-view-layout-container\">\r\n    <div class=\"side-view-layout-container-inner\">\r\n      <div class=\"side-view-layout-header-margins\">\r\n        <div class=\"side-view-layout-header-container\">\r\n          <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\r\n            {{title}}\r\n          </h2>\r\n          <div class=\"side-view-layout-close-button-container\">\r\n            <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\r\n              <span class=\"sr-only\">Close panel</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"side-view-layout-close-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"side-view-layout-content-container\">\r\n        <!-- Replace with your content -->\r\n        <ng-content></ng-content>\r\n        <!-- /End replace -->\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\r\n      <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\r\n        {{cancelLabel}}\r\n      </button>\r\n      <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\r\n        {{okLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SideViewLayoutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-side-view-layout',
-                    templateUrl: './side-view-layout.component.html'
-                }]
-        }], 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() {
-        var _a;
-        if ((_a = this.searchInput$) === null || _a === void 0 ? void 0 : _a.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) {
-        var _a;
-        this.onSearch.emit((_a = this.searchInput$) === null || _a === void 0 ? void 0 : _a.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: "12.2.16", ngImport: i0, type: FormLayoutComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-FormLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormLayoutComponent, selector: "lib-form-layout", inputs: { title: "title", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], actions: "actions", subTitle: ["sub-title", "subTitle"] }, outputs: { onAction: "onAction", onSearch: "onSearch", onComplete: "onComplete" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<div class=\"form-layout-container\">\r\n  <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\r\n    <div class=\"form-header-inner\">\r\n      <h3 class=\"form-title\">\r\n        {{ title }}\r\n      </h3>\r\n      <p class=\"form-subtitle\">\r\n        {{ subTitle }}\r\n      </p>\r\n    </div>\r\n    <div class=\"form-header-actions\">\r\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container\">\r\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\r\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\r\n                          </svg>-->\r\n            </div>\r\n            <input id=\"search\"\r\n                   #search\r\n                   class=\"form-search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\">\r\n          </div>\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"btn-form-view-header-search\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"form-content-container\">\r\n    <div [ngClass]=\"{'form-content-container-inner': actions}\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\r\n    <router-outlet name=\"formRightPane\"\r\n                   (activate)=\"formPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"formPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n</div>\r\n", components: [{ type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible", "animate"], outputs: ["onComplete"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormLayoutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-form-layout',
-                    templateUrl: './form-layout.component.html'
-                }]
-        }], 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) => {
-            var _a;
-            if (user) {
-                this.router.navigateByUrl(((_a = user.state) === null || _a === void 0 ? void 0 : _a.url) || '/');
-            }
-        });
-    }
-}
-AuthCallbackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AuthCallbackComponent, deps: [{ token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-AuthCallbackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AuthCallbackComponent, selector: "lib-auth-callback", ngImport: i0, template: "<lib-view-layout [title]=\"status\" [busy]=\"true\"></lib-view-layout>", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AuthCallbackComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-auth-callback',
-                    templateUrl: './auth-callback.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
-                    type: Inject,
-                    args: [AuthService]
-                }] }, { type: i1$1.Router }]; } });
-
-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: "12.2.16", ngImport: i0, type: AuthRenewComponent, deps: [{ token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-AuthRenewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AuthRenewComponent, selector: "lib-auth-renew", ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: LoggedOutComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-LoggedOutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LoggedOutComponent, selector: "lib-logged-out", ngImport: i0, template: "<lib-view-layout title=\"\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03C0\u03BF\u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF \u03BC\u03B5 \u03B5\u03C0\u03B9\u03C4\u03C5\u03C7\u03AF\u03B1!\"></lib-view-layout>", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LoggedOutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'lib-logged-out',
-                    templateUrl: './logged-out.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
-                    type: Inject,
-                    args: [AuthService]
-                }] }]; } });
-
-class ErrorComponent {
-    constructor() {
-        this.error = 'Error!';
-    }
-    ngOnInit() {
-    }
-}
-ErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ErrorComponent, selector: "lib-error", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"500 - \u03C0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03C4\u03B7\u03BA\u03B5 \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">500</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03C3\u03C6\u03AC\u03BB\u03BC\u03B1, \u03BA\u03B1\u03C4\u03B9 \u03B4\u03B5\u03BD \u03C0\u03AE\u03B3\u03B5 \u03BA\u03B1\u03BB\u03AC...!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ErrorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-error',
-                    templateUrl: './error.component.html'
-                }]
-        }] });
-
-class PageNotFoundComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-PageNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PageNotFoundComponent, selector: "lib-page-not-found", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\r\n  <div class=\"text-gray-900\">\r\n    <div class=\"max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold sm:text-4xl\">\r\n        <span class=\"block\">404</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-800\">\u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5 \u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C0\u03BF\u03C5 \u03B6\u03B7\u03C4\u03AE\u03C3\u03B1\u03C4\u03B5!</p>\r\n      <a href=\"/\"\r\n         class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PageNotFoundComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-page-not-found',
-                    templateUrl: './page-not-found.component.html'
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class UnauthorizedComponent {
-    constructor() { }
-    ngOnInit() { }
-}
-UnauthorizedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UnauthorizedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UnauthorizedComponent, selector: "lib-unauthorized", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"401 - \u03B4\u03B5\u03BD \u03B5\u03C0\u03B9\u03C4\u03C1\u03AD\u03C0\u03B5\u03C4\u03B1\u03B9 \u03B7 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">401</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03B4\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03BA\u03B1\u03C4\u03AC\u03BB\u03BB\u03B7\u03BB\u03B1 \u03B4\u03B9\u03BA\u03B1\u03B9\u03CE\u03BC\u03B1\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7\u03C2!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n  </lib-view-layout>\r\n\r\n\r\n", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UnauthorizedComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-unauthorized',
-                    templateUrl: './unauthorized.component.html'
-                }]
-        }], 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: "12.2.16", ngImport: i0, type: AddressPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-AddressPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AddressPipe, name: "address", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: DurationFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-DurationFormatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DurationFormatPipe, name: "durationFormat", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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.filters = [];
-        this.searchOptions = [];
-        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') !== null && 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('dir') !== this.sortdir) {
-                this.sortdir = params.get('dir');
-            }
-            // initialize filters that may reside in the query string
-            this.filters = this.getFiltersFrom(params);
-        });
-        // just to sync params in query
-        this.setRouteParams(true);
-        this.load();
-    }
-    /**
-   * Get filters from a querystring
-   * @param queryParamMap
-   * @returns filters found from a paramMap
-   */
-    getFiltersFrom(queryParamMap) {
-        let filterResult = [];
-        if (queryParamMap.has(QueryParameters.FILTER) && queryParamMap.get(QueryParameters.FILTER).length > 0) {
-            let filterValue = queryParamMap.get(QueryParameters.FILTER);
-            const filterValues = filterValue === null || filterValue === void 0 ? void 0 : filterValue.split(","); // we may have multiple filters in filter query param
-            if (filterValues && filterValues.length > 0) {
-                // create the filterClauses derived from the query params
-                for (var index in filterValues) {
-                    let filterClause = FilterClause.parse(filterValues[index]);
-                    const parsed = new FilterClause(filterClause.member, filterClause.value, filterClause.operator, filterClause.dataType, this.searchOptions);
-                    if (parsed !== undefined) {
-                        filterResult.push(parsed);
-                    }
-                }
-            }
-        }
-        return filterResult;
-    }
-    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,
-                filter: this.filterClausesToString(this.filters)
-            }, queryParamsHandling: 'merge', skipLocationChange: locationChange
-        });
-    }
-    filterClausesToString(filters) {
-        return filters === null || filters === void 0 ? void 0 : filters.map((f) => {
-            if (f.dataType === 'datetime') {
-                f.value = (new Date(f.value)).toISOString();
-            }
-            return f.toString();
-        }).join(',');
-    }
-    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 === null || result === void 0 ? void 0 : result.items;
-            this.updateHeaderMeta();
-        }, err => {
-            this.count = 0;
-            this.items = null;
-            this.updateHeaderMeta();
-        });
-    }
-    updateHeaderMeta() {
-        var _a;
-        const count = (_a = this.metaItems) === null || _a === void 0 ? void 0 : _a.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();
-        }
-    }
-    advancedSearchChanged(filters) {
-        this.count = 0;
-        this.page = 1;
-        this.items = null;
-        this.filters = filters;
-        this.setRouteParams();
-        this.load();
-    }
-    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: "12.2.16", ngImport: i0, type: BaseListComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-BaseListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseListComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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(() => { var _a; return (_a = this.backdropLoader) === null || _a === void 0 ? void 0 : _a.hide(); }, this.animationsEnabled ? animationTime.backdrop : 0);
-    }
-    reflow(element) {
-        ((bs) => bs)(element.offsetHeight);
-    }
-}
-ModalBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ModalBackdropComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ModalBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ModalBackdropComponent, selector: "lib-modal-backdrop", host: { classAttribute: "modal-backdrop" }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: ModalOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ModalOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ModalOptions });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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) {
-        var _a;
-        if (!this.isShown) {
-            return;
-        }
-        if (event.keyCode === 27 || event.key === 'Escape' || event.key === 'Esc') {
-            event.preventDefault();
-        }
-        if (this.config.keyboard && this.config.id === ((_a = this.modalService) === null || _a === void 0 ? void 0 : _a.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(() => {
-            var _a;
-            this.isShown = false;
-            (_a = this.modalService) === null || _a === void 0 ? void 0 : _a.hide(this.config.id, result);
-            this.isModalHiding = false;
-        }, this.animationsEnabled ? animationTime.modal : 0);
-    }
-}
-ModalContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ModalContainerComponent, deps: [{ token: ModalOptions }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ModalContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ModalContainerComponent, selector: "lib-modal-container", host: { attributes: { "role": "dialog", "tabindex": "-1" }, listeners: { "mousedown": "onClickStarted($event)", "click": "onClickStop($event)", "window:popstate": "onPopState()", "window:keydown.esc": "onEsc($event)" }, properties: { "attr.aria-modal": "true", "attr.aria-labelledby": "config.ariaLabelledBy", "attr.aria-describedby": "config.ariaDescribedby" }, classAttribute: "modal" }, ngImport: i0, template: `
-    <div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
-      <div class="modal-content">
-        <ng-content></ng-content>
-      </div>
-    </div>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-Modal.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Modal });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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 = Object.assign(Object.assign({}, modalConfigDefaults), modalDefaultOption);
-        this.renderer = rendererFactory.createRenderer(null, null);
-    }
-    ngOnDestroy() {
-        this.loaders.forEach((loader) => { var _a; return (_a = loader.instance) === null || _a === void 0 ? void 0 : _a.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 = Object.assign(Object.assign({}, this.defaultConfig), config);
-        combinedConfig.id = (config === null || config === void 0 ? void 0 : 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) {
-        var _a;
-        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 = (_a = modalContainerRef.instance.config) === null || _a === void 0 ? void 0 : _a.id;
-            modal.hide = (res) => { var _a; return (_a = modalContainerRef.instance) === null || _a === void 0 ? void 0 : _a.hide(res); };
-        }
-        return modal;
-    }
-    hideModal(id, result) {
-        if (id != null) {
-            const indexToRemove = this.loaders.findIndex((loader) => { var _a; return ((_a = loader.instance) === null || _a === void 0 ? void 0 : _a.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) => { var _a; return ((_a = loader.instance) === null || _a === void 0 ? void 0 : _a.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: "12.2.16", ngImport: i0, type: ModalService, deps: [{ token: ComponentLoaderFactory }, { token: i0.RendererFactory2 }, { token: DOCUMENT }, { token: MODAL_CONFIG_DEFAULT_OVERRIDE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ModalService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: IndiceComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IndiceComponentsModule, declarations: [
-        // Directives
-        ClickOutsideDirective,
-        DynamicComponentHostDirective,
-        // Controls
-        DropDownMenuComponent,
-        PagerComponent,
-        ListViewComponent,
-        ListColumnComponent,
-        ListTileComponent,
-        ListDetailsSectionComponent,
-        ListViewEmptyStateComponent,
-        SkeletonLoaderComponent,
-        CollapsiblePanelComponent,
-        KpiTileComponent,
-        SidePaneComponent,
-        DatepickerComponent,
-        AvatarInitialsComponent,
-        ToggleComponent,
-        ComboboxComponent,
-        // 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,
-        LanguageSelectionComponent,
-        UserProfileMenuComponent,
-        ShellSidebarComponent,
-        // Tab Group Component
-        LibTabComponent,
-        LibTabGroupComponent,
-        // Stepper Component
-        LibStepperComponent,
-        LibStepComponent,
-        LibStepLabelDirective,
-        LibStepInfoDirective,
-        ShellSidebarHeaderComponent,
-        ShellSidebarLayoutComponent,
-        ShellStackedLayoutComponent,
-        AdvancedSearchComponent], imports: [CommonModule,
-        RouterModule,
-        IndiceAuthModule,
-        BrowserAnimationsModule,
-        FormsModule], exports: [AddressPipe,
-        AuthCallbackComponent,
-        AuthRenewComponent,
-        AvatarInitialsComponent,
-        ClickOutsideDirective,
-        CollapsiblePanelComponent,
-        ComboboxComponent,
-        DatepickerComponent,
-        DropDownMenuComponent,
-        DurationFormatPipe,
-        ErrorComponent,
-        FormLayoutComponent,
-        KpiTileComponent,
-        LibStepComponent,
-        LibStepInfoDirective,
-        LibStepLabelDirective,
-        LibStepperComponent,
-        LibTabComponent,
-        LibTabGroupComponent,
-        ListColumnComponent,
-        ListDetailsSectionComponent,
-        ListTileComponent,
-        ListViewComponent,
-        ListViewEmptyStateComponent,
-        LoggedOutComponent,
-        ModelViewLayoutComponent,
-        PageNotFoundComponent,
-        PagerComponent,
-        ShellFooterComponent,
-        ShellHeaderComponent,
-        ShellLayoutComponent,
-        SidePaneComponent,
-        SideViewLayoutComponent,
-        SkeletonLoaderComponent,
-        ToasterComponent,
-        ToasterContainerComponent,
-        ToggleComponent,
-        UnauthorizedComponent,
-        ViewLayoutComponent] });
-IndiceComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IndiceComponentsModule, imports: [[
-            CommonModule,
-            RouterModule,
-            IndiceAuthModule,
-            BrowserAnimationsModule,
-            FormsModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IndiceComponentsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        // Directives
-                        ClickOutsideDirective,
-                        DynamicComponentHostDirective,
-                        // Controls
-                        DropDownMenuComponent,
-                        PagerComponent,
-                        ListViewComponent,
-                        ListColumnComponent,
-                        ListTileComponent,
-                        ListDetailsSectionComponent,
-                        ListViewEmptyStateComponent,
-                        SkeletonLoaderComponent,
-                        CollapsiblePanelComponent,
-                        KpiTileComponent,
-                        SidePaneComponent,
-                        DatepickerComponent,
-                        AvatarInitialsComponent,
-                        ToggleComponent,
-                        ComboboxComponent,
-                        // 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,
-                        LanguageSelectionComponent,
-                        UserProfileMenuComponent,
-                        ShellSidebarComponent,
-                        // Tab Group Component
-                        LibTabComponent,
-                        LibTabGroupComponent,
-                        // Stepper Component
-                        LibStepperComponent,
-                        LibStepComponent,
-                        LibStepLabelDirective,
-                        LibStepInfoDirective,
-                        ShellSidebarHeaderComponent,
-                        ShellSidebarLayoutComponent,
-                        ShellStackedLayoutComponent,
-                        AdvancedSearchComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        IndiceAuthModule,
-                        BrowserAnimationsModule,
-                        FormsModule
-                    ],
-                    exports: [
-                        AddressPipe,
-                        AuthCallbackComponent,
-                        AuthRenewComponent,
-                        AvatarInitialsComponent,
-                        ClickOutsideDirective,
-                        CollapsiblePanelComponent,
-                        ComboboxComponent,
-                        DatepickerComponent,
-                        DropDownMenuComponent,
-                        DurationFormatPipe,
-                        ErrorComponent,
-                        FormLayoutComponent,
-                        KpiTileComponent,
-                        LibStepComponent,
-                        LibStepInfoDirective,
-                        LibStepLabelDirective,
-                        LibStepperComponent,
-                        LibTabComponent,
-                        LibTabGroupComponent,
-                        ListColumnComponent,
-                        ListDetailsSectionComponent,
-                        ListTileComponent,
-                        ListViewComponent,
-                        ListViewEmptyStateComponent,
-                        LoggedOutComponent,
-                        ModelViewLayoutComponent,
-                        PageNotFoundComponent,
-                        PagerComponent,
-                        ShellFooterComponent,
-                        ShellHeaderComponent,
-                        ShellLayoutComponent,
-                        SidePaneComponent,
-                        SideViewLayoutComponent,
-                        SkeletonLoaderComponent,
-                        ToasterComponent,
-                        ToasterContainerComponent,
-                        ToggleComponent,
-                        UnauthorizedComponent,
-                        ViewLayoutComponent
-                    ]
-                }]
-        }] });
-
-// Public API Surface of @indice/ng-components
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
-//# sourceMappingURL=indice-ng-components.js.map