@indice/ng-components 0.2.115 → 0.2.116

package/bundles/indice-ng-components.umd.js

@@ -0,0 +1,3725 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@indice/ng-auth')) :
+    typeof define === 'function' && define.amd ? define('@indice/ng-components', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/forms', 'rxjs', 'rxjs/operators', '@indice/ng-auth'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.indice = global.indice || {}, global.indice["ng-components"] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.forms, global.rxjs, global.rxjs.operators, global.i2));
+})(this, (function (exports, i0, i1, i1$1, forms, rxjs, operators, i2) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+
+    // tslint:disable-next-line:directive-selector
+    var ClickOutsideDirective = /** @class */ (function () {
+        function ClickOutsideDirective(
+        // 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 i0.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);
+        }
+        ClickOutsideDirective.prototype.ngOnInit = function () {
+            if (!i1.isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            this._init();
+        };
+        ClickOutsideDirective.prototype.ngOnDestroy = function () {
+            if (!i1.isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            this._removeClickOutsideListener();
+            this._removeAttachOutsideOnClickListener();
+            this._removeWindowBlurListener();
+        };
+        ClickOutsideDirective.prototype.ngOnChanges = function (changes) {
+            if (!i1.isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            // tslint:disable-next-line:no-string-literal
+            if (changes['attachOutsideOnClick'] || changes['exclude'] || changes['emitOnBlur']) {
+                this._init();
+            }
+        };
+        ClickOutsideDirective.prototype._init = function () {
+            if (this.clickOutsideEvents !== '') {
+                this._events = this.clickOutsideEvents.split(',').map(function (e) { return e.trim(); });
+            }
+            this._excludeCheck();
+            if (this.attachOutsideOnClick) {
+                this._initAttachOutsideOnClickListener();
+            }
+            else {
+                this._initOnClickBody();
+            }
+            if (this.emitOnBlur) {
+                this._initWindowBlurListener();
+            }
+        };
+        ClickOutsideDirective.prototype._initOnClickBody = function () {
+            if (this.delayClickOutsideInit) {
+                setTimeout(this._initClickOutsideListener.bind(this));
+            }
+            else {
+                this._initClickOutsideListener();
+            }
+        };
+        ClickOutsideDirective.prototype._excludeCheck = function () {
+            if (this.exclude) {
+                try {
+                    var 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);
+                }
+            }
+        };
+        ClickOutsideDirective.prototype._onClickBody = function (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
+         */
+        ClickOutsideDirective.prototype._onWindowBlur = function (ev) {
+            var _this = this;
+            setTimeout(function () {
+                if (!document.hidden) {
+                    _this._emit(ev);
+                }
+            });
+        };
+        ClickOutsideDirective.prototype._emit = function (ev) {
+            var _this = this;
+            if (!this.clickOutsideEnabled) {
+                return;
+            }
+            this._ngZone.run(function () { return _this.clickOutside.emit(ev); });
+        };
+        ClickOutsideDirective.prototype._shouldExclude = function (target) {
+            var e_1, _a;
+            try {
+                // tslint:disable-next-line:prefer-const
+                for (var _b = __values(this._nodesExcluded), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var excludedNode = _c.value;
+                    if (excludedNode.contains(target)) {
+                        return true;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return false;
+        };
+        ClickOutsideDirective.prototype._initClickOutsideListener = function () {
+            var _this = this;
+            this._ngZone.runOutsideAngular(function () {
+                _this._events.forEach(function (e) { return document.addEventListener(e, _this._onClickBody); });
+            });
+        };
+        ClickOutsideDirective.prototype._removeClickOutsideListener = function () {
+            var _this = this;
+            this._ngZone.runOutsideAngular(function () {
+                _this._events.forEach(function (e) { return document.removeEventListener(e, _this._onClickBody); });
+            });
+        };
+        ClickOutsideDirective.prototype._initAttachOutsideOnClickListener = function () {
+            var _this = this;
+            this._ngZone.runOutsideAngular(function () {
+                _this._events.forEach(function (e) { return _this._el.nativeElement.addEventListener(e, _this._initOnClickBody); });
+            });
+        };
+        ClickOutsideDirective.prototype._removeAttachOutsideOnClickListener = function () {
+            var _this = this;
+            this._ngZone.runOutsideAngular(function () {
+                _this._events.forEach(function (e) { return _this._el.nativeElement.removeEventListener(e, _this._initOnClickBody); });
+            });
+        };
+        ClickOutsideDirective.prototype._initWindowBlurListener = function () {
+            var _this = this;
+            this._ngZone.runOutsideAngular(function () {
+                window.addEventListener('blur', _this._onWindowBlur);
+            });
+        };
+        ClickOutsideDirective.prototype._removeWindowBlurListener = function () {
+            var _this = this;
+            this._ngZone.runOutsideAngular(function () {
+                window.removeEventListener('blur', _this._onWindowBlur);
+            });
+        };
+        return ClickOutsideDirective;
+    }());
+    ClickOutsideDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ClickOutsideDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: i0.PLATFORM_ID }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ClickOutsideDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.1", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: { clickOutsideEnabled: "clickOutsideEnabled", attachOutsideOnClick: "attachOutsideOnClick", delayClickOutsideInit: "delayClickOutsideInit", emitOnBlur: "emitOnBlur", exclude: "exclude", excludeBeforeClick: "excludeBeforeClick", clickOutsideEvents: "clickOutsideEvents" }, outputs: { clickOutside: "clickOutside" }, usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ClickOutsideDirective, decorators: [{
+                type: i0.Directive,
+                args: [{ selector: '[clickOutside]' }]
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.PLATFORM_ID]
+                        }] }];
+        }, propDecorators: { clickOutsideEnabled: [{
+                    type: i0.Input
+                }], attachOutsideOnClick: [{
+                    type: i0.Input
+                }], delayClickOutsideInit: [{
+                    type: i0.Input
+                }], emitOnBlur: [{
+                    type: i0.Input
+                }], exclude: [{
+                    type: i0.Input
+                }], excludeBeforeClick: [{
+                    type: i0.Input
+                }], clickOutsideEvents: [{
+                    type: i0.Input
+                }], clickOutside: [{
+                    type: i0.Output
+                }] } });
+
+    var DropDownMenuComponent = /** @class */ (function () {
+        function DropDownMenuComponent() {
+            this.options = [];
+            // tslint:disable-next-line:no-input-rename
+            this.selectedValue = null;
+            this.multiple = false;
+            this.placeholder = 'Παρακαλώ επιλέξτε...';
+            this.selectedOption$ = null;
+            this.selectedChange = new i0.EventEmitter();
+            this.selectedChanged = new i0.EventEmitter();
+            this.expanded$ = false;
+        }
+        Object.defineProperty(DropDownMenuComponent.prototype, "selectedOption", {
+            get: function () {
+                return this.selectedOption$;
+            },
+            set: function (option) {
+                this.selectedOption$ = option;
+                this.selectedValue = option ? option.value : null;
+                this.expanded = false;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropDownMenuComponent.prototype, "expanded", {
+            get: function () {
+                return this.expanded$;
+            },
+            set: function (value) {
+                this.expanded$ = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DropDownMenuComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            if (this.options && this.options.length > 0 && this.selectedValue !== null && this.selectedValue !== undefined) {
+                this.selectedOption$ = this.options.filter(function (o) { return o.value === _this.selectedValue; })[0];
+            }
+        };
+        DropDownMenuComponent.prototype.ngOnInit = function () { };
+        DropDownMenuComponent.prototype.isSelected = function (option) {
+            return option != null && this.selectedValue != null && option.value === this.selectedValue;
+        };
+        DropDownMenuComponent.prototype.onClickOutside = function ($event) {
+            this.expanded = false;
+        };
+        DropDownMenuComponent.prototype.selectOption = function (option) {
+            this.selectedOption = option;
+            this.selectedChange.emit(option.value);
+            this.selectedChanged.emit(option.value);
+        };
+        return DropDownMenuComponent;
+    }());
+    DropDownMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: DropDownMenuComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DropDownMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: { options: "options", selectedValue: ["selected", "selectedValue"], multiple: "multiple", placeholder: "placeholder" }, outputs: { selectedChange: "selectedChange", selectedChanged: "selectedChanged" }, usesOnChanges: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: DropDownMenuComponent, decorators: [{
+                type: i0.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: i0.Input
+                }], selectedValue: [{
+                    type: i0.Input,
+                    args: ['selected']
+                }], multiple: [{
+                    type: i0.Input
+                }], placeholder: [{
+                    type: i0.Input
+                }], selectedChange: [{
+                    type: i0.Output
+                }], selectedChanged: [{
+                    type: i0.Output
+                }] } });
+
+    var Icons = /** @class */ (function () {
+        function Icons() {
+        }
+        return 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';
+
+    var NavLink = /** @class */ (function () {
+        function NavLink(text, path, exact, external, icon) {
+            if (exact === void 0) { exact = false; }
+            if (external === void 0) { external = false; }
+            this.text = text;
+            this.path = path;
+            this.exact = exact;
+            this.external = external;
+            this.icon = icon;
+        }
+        return NavLink;
+    }());
+    var ExternalNavLink = /** @class */ (function (_super) {
+        __extends(ExternalNavLink, _super);
+        function ExternalNavLink(text, path, openInNewTab, icon) {
+            return _super.call(this, text, path, true, openInNewTab, icon) || this;
+        }
+        return ExternalNavLink;
+    }(NavLink));
+    var FragmentNavLink = /** @class */ (function (_super) {
+        __extends(FragmentNavLink, _super);
+        function FragmentNavLink(text, path, icon) {
+            return _super.call(this, text, path, true, true, icon) || this;
+        }
+        return FragmentNavLink;
+    }(NavLink));
+    var ViewAction = /** @class */ (function () {
+        function ViewAction(type, key, param, icon, tooltip) {
+            this.type = type;
+            this.key = key;
+            this.param = param;
+            this.icon = icon;
+            this.tooltip = tooltip;
+        }
+        return ViewAction;
+    }());
+    var ListViewType = /** @class */ (function () {
+        function ListViewType() {
+        }
+        return ListViewType;
+    }());
+    ListViewType.Tiles = 'tiles';
+    ListViewType.Table = 'table';
+    ListViewType.Map = 'map';
+    ListViewType.Gallery = 'gallery';
+    var RouterViewAction = /** @class */ (function (_super) {
+        __extends(RouterViewAction, _super);
+        function RouterViewAction(icon, link, outlet, tooltip) {
+            var _this = _super.call(this, 'router-link', null, null, icon, tooltip) || this;
+            _this.outlet = null;
+            _this.link = null;
+            _this.outlet = outlet;
+            _this.link = link;
+            return _this;
+        }
+        return RouterViewAction;
+    }(ViewAction));
+    var SwitchViewAction = /** @class */ (function (_super) {
+        __extends(SwitchViewAction, _super);
+        function SwitchViewAction(view, icon, tooltip) {
+            return _super.call(this, 'switch-view', null, view, icon, tooltip) || this;
+        }
+        return SwitchViewAction;
+    }(ViewAction));
+    var HeaderMetaItem = /** @class */ (function () {
+        function HeaderMetaItem() {
+            this.key = null;
+            this.icon = null;
+            this.text = null;
+        }
+        return HeaderMetaItem;
+    }());
+    var MenuOption = /** @class */ (function () {
+        function MenuOption(text, value, description, data, icon) {
+            this.text = text;
+            this.value = value;
+            this.description = description;
+            this.data = data;
+            this.icon = icon;
+        }
+        return MenuOption;
+    }());
+    var DefaultShellConfig = /** @class */ (function () {
+        function DefaultShellConfig() {
+            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.showFooter = true;
+            this.fluid = false;
+        }
+        return DefaultShellConfig;
+    }());
+    exports.SCREEN_SIZE = void 0;
+    (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";
+    })(exports.SCREEN_SIZE || (exports.SCREEN_SIZE = {}));
+    exports.ToastType = void 0;
+    (function (ToastType) {
+        ToastType["Info"] = "info";
+        ToastType["Success"] = "success";
+        ToastType["Error"] = "error";
+        ToastType["Warning"] = "warning";
+    })(exports.ToastType || (exports.ToastType = {}));
+    var NULL_TOAST = { title: '_____NULL_____' };
+    exports.SidePaneSize = void 0;
+    (function (SidePaneSize) {
+        SidePaneSize["Default"] = "";
+        SidePaneSize["Small25"] = "25%";
+        SidePaneSize["Medium50"] = "50%";
+        SidePaneSize["Large75"] = "75%";
+    })(exports.SidePaneSize || (exports.SidePaneSize = {}));
+    exports.SidePaneOverlayType = void 0;
+    (function (SidePaneOverlayType) {
+        SidePaneOverlayType["Default"] = "";
+        SidePaneOverlayType["None"] = "-opacity-0";
+        SidePaneOverlayType["Light"] = "";
+        SidePaneOverlayType["Dark"] = "-opacity-50";
+    })(exports.SidePaneOverlayType || (exports.SidePaneOverlayType = {}));
+
+    var PagerComponent = /** @class */ (function () {
+        function PagerComponent(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 i0.EventEmitter();
+            this.pageSizeChanged = new i0.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 i0.EventEmitter();
+            this.sortdirChanged = new i0.EventEmitter();
+            this.sortdirIcon = Icons.SortDesc;
+        }
+        PagerComponent.prototype.ngOnChanges = function (changes) {
+            this.calcPages();
+        };
+        PagerComponent.prototype.ngOnInit = function () {
+        };
+        PagerComponent.prototype.calcPages = function () {
+            this.pages = [];
+            if (this.count && this.count > 0) {
+                var pageCount = this.count / this.pageSize;
+                for (var 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;
+        };
+        PagerComponent.prototype.nextPage = function () {
+            var next = this.page + 1;
+            this.gotoPage(next);
+        };
+        PagerComponent.prototype.previousPage = function () {
+            var previous = this.page - 1;
+            this.gotoPage(previous);
+        };
+        PagerComponent.prototype.gotoPage = function (page) {
+            this.page = page;
+            this.pageChanged.emit(page);
+            this.calcPages();
+        };
+        PagerComponent.prototype.pageSizeOptionChanged = function (pageSize) {
+            this.pageSizeChanged.emit(pageSize);
+            this.calcPages();
+        };
+        PagerComponent.prototype.pageOptionChanged = function (page) {
+            this.pageChanged.emit(page);
+            this.calcPages();
+        };
+        PagerComponent.prototype.sortOptionChanged = function (sort) {
+            this.sortChanged.emit(sort);
+        };
+        PagerComponent.prototype.toggleSortdir = function () {
+            var sortdir = 'desc';
+            if (this.sortdir === 'desc') {
+                sortdir = 'asc';
+                this.sortdirIcon = Icons.SortAsc;
+            }
+            else {
+                sortdir = 'desc';
+                this.sortdirIcon = Icons.SortDesc;
+            }
+            this.sortdirChanged.emit(sortdir);
+        };
+        return PagerComponent;
+    }());
+    PagerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: PagerComponent, deps: [{ token: i1__namespace$1.Router }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PagerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: PagerComponent, selector: "lib-pager", inputs: { busy: "busy", count: "count", page: "page", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sort: "sort", sortdir: ["sort-dir", "sortdir"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"pager-container\">\r\n  <div class=\"pager-container-inner\">\r\n    <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\r\n      <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\r\n      <button (click)=\"toggleSortdir()\" [disabled]=\"!sort || busy\" class=\"pager-icon-button\">\r\n        <span class=\"sr-only\">sort direction</span>\r\n        <span class=\"inline-block relative\">\r\n          <i [class]=\"sortdirIcon\"></i>\r\n        </span>\r\n      </button>\r\n    </div>\r\n    <div class=\"pager-pages-container\">\r\n      <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\r\n      <div class=\"mx-2\"  *ngIf=\"count !== null && count > pageSize\">\r\n        <button [disabled]=\"!canPreviousPage || busy\"  (click)=\"previousPage()\"\r\n                class=\"pager-arrow-button-left\">\r\n          <span class=\"sr-only\">Previous</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n        <button [disabled]=\"!canNextPage || busy\"  (click)=\"nextPage()\"\r\n                class=\"pager-arrow-button-right\">\r\n          <span class=\"sr-only\">Next</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <lib-drop-down-menu *ngIf=\"(pages && pages.length > 0) && (count !== null && count > pageSize)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder"], outputs: ["selectedChange", "selectedChanged"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: PagerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-pager',
+                        templateUrl: './pager.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.Router }]; }, propDecorators: { busy: [{
+                    type: i0.Input
+                }], count: [{
+                    type: i0.Input
+                }], page: [{
+                    type: i0.Input
+                }], pageSize: [{
+                    type: i0.Input,
+                    args: ['page-size']
+                }], pageSizeOptions: [{
+                    type: i0.Input,
+                    args: ['page-size-options']
+                }], pageChanged: [{
+                    type: i0.Output
+                }], pageSizeChanged: [{
+                    type: i0.Output
+                }], sortOptions: [{
+                    type: i0.Input,
+                    args: ['sort-options']
+                }], sort: [{
+                    type: i0.Input,
+                    args: ['sort']
+                }], sortdir: [{
+                    type: i0.Input,
+                    args: ['sort-dir']
+                }], sortChanged: [{
+                    type: i0.Output
+                }], sortdirChanged: [{
+                    type: i0.Output
+                }] } });
+
+    var ListTileComponent = /** @class */ (function () {
+        function ListTileComponent() {
+            this.template = null;
+        }
+        return ListTileComponent;
+    }());
+    ListTileComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ListTileComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ListTileComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ListTileComponent, selector: "lib-list-tile", queries: [{ propertyName: "template", first: true, predicate: i0.TemplateRef, descendants: true }], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ListTileComponent, decorators: [{
+                type: i0.Component,
+                args: [{ selector: 'lib-list-tile', template: '<ng-content></ng-content>' }]
+            }], ctorParameters: function () { return []; }, propDecorators: { template: [{
+                    type: i0.ContentChild,
+                    args: [i0.TemplateRef]
+                }] } });
+
+    var ListColumnComponent = /** @class */ (function () {
+        function ListColumnComponent() {
+            this.title = null;
+            // tslint:disable-next-line:no-input-rename
+            this.fullWidth = false;
+            this.template = null;
+        }
+        return ListColumnComponent;
+    }());
+    ListColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ListColumnComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ListColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ListColumnComponent, selector: "lib-list-column", inputs: { title: "title", fullWidth: ["full-width", "fullWidth"] }, queries: [{ propertyName: "template", first: true, predicate: i0.TemplateRef, descendants: true }], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ListColumnComponent, decorators: [{
+                type: i0.Component,
+                args: [{ selector: 'lib-list-column', template: '<ng-content></ng-content>' }]
+            }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                    type: i0.Input
+                }], fullWidth: [{
+                    type: i0.Input,
+                    args: ['full-width']
+                }], template: [{
+                    type: i0.ContentChild,
+                    args: [i0.TemplateRef]
+                }] } });
+
+    var ListDetailsSectionComponent = /** @class */ (function () {
+        function ListDetailsSectionComponent() {
+            this.template = null;
+        }
+        return ListDetailsSectionComponent;
+    }());
+    ListDetailsSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ListDetailsSectionComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ListDetailsSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ListDetailsSectionComponent, selector: "lib-list-details-section", queries: [{ propertyName: "template", first: true, predicate: i0.TemplateRef, descendants: true }], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ListDetailsSectionComponent, decorators: [{
+                type: i0.Component,
+                args: [{ selector: 'lib-list-details-section', template: '<ng-content></ng-content>' }]
+            }], ctorParameters: function () { return []; }, propDecorators: { template: [{
+                    type: i0.ContentChild,
+                    args: [i0.TemplateRef]
+                }] } });
+
+    var ListViewEmptyStateComponent = /** @class */ (function () {
+        function ListViewEmptyStateComponent() {
+            this.title = 'Δεν βρέθηκαν εγγραφές.';
+            // tslint:disable-next-line:no-input-rename
+            this.subTitle = 'Παρακαλώ αλλάξτε τα κριτήρια αναζήτησης σας ή ξεκινήστε προσθέτοντας μια νέα εγγραφή';
+            // tslint:disable-next-line:no-input-rename
+            this.newItemLabel = 'Νέα εγγραφή';
+        }
+        ListViewEmptyStateComponent.prototype.ngOnInit = function () {
+        };
+        return ListViewEmptyStateComponent;
+    }());
+    ListViewEmptyStateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ListViewEmptyStateComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ListViewEmptyStateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0__namespace, template: "<div class=\"p-20\">\n  <div class=\"text-center p-2\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\n    </svg>\n    <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\n    <p class=\"mt-1 text-sm text-gray-500\">\n      {{subTitle}}\n    </p>\n    <div class=\"mt-6\" *ngIf=\"false\">\n      <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\n        <!-- Heroicon name: solid/plus -->\n        <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n        </svg>\n        {{newItemLabel}}\n      </button>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ListViewEmptyStateComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-list-view-empty-state',
+                        templateUrl: './list-view-empty-state.component.html'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                    type: i0.Input
+                }], subTitle: [{
+                    type: i0.Input,
+                    args: ['sub-title']
+                }], newItemLabel: [{
+                    type: i0.Input,
+                    args: ['new-item-label']
+                }] } });
+
+    var SkeletonLoaderComponent = /** @class */ (function () {
+        function SkeletonLoaderComponent() {
+            this.count = 5;
+            this.type = 'tiles'; // 'large-tile', 'table'
+        }
+        SkeletonLoaderComponent.prototype.ngOnInit = function () {
+        };
+        SkeletonLoaderComponent.prototype.counter = function (i) {
+            return new Array(i);
+        };
+        return SkeletonLoaderComponent;
+    }());
+    SkeletonLoaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: SkeletonLoaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkeletonLoaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type" }, ngImport: i0__namespace, 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__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: SkeletonLoaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // tslint:disable-next-line:component-selector
+                        selector: 'lib-skeleton-loader',
+                        templateUrl: './skeleton-loader.component.html'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { count: [{
+                    type: i0.Input
+                }], type: [{
+                    type: i0.Input
+                }] } });
+
+    var ListViewComponent = /** @class */ (function () {
+        function ListViewComponent() {
+            // BUSY STATE
+            this.busy = false;
+            this.expandIcon = Icons.Expand;
+            this.collapseIcon = Icons.Collapse;
+            // tslint:disable-next-line:no-input-rename
+            this.showPager = true;
+            // PAGING - pass through for pager component
+            this.count = null;
+            this.page = 1;
+            // tslint:disable-next-line:no-input-rename
+            this.pageSize = 20;
+            // tslint:disable-next-line:no-input-rename
+            this.pageSizeOptions = [];
+            this.pageChanged = new i0.EventEmitter();
+            this.pageSizeChanged = new i0.EventEmitter();
+            this.detailsOpened = new i0.EventEmitter();
+            this.tableViewSupported = false;
+            this.multipleFullWidth = false;
+            this.fullWidthTHClass = 'list-view-th-full';
+            this.fullWidthTDClass = 'list-view-td-full';
+            this.tilesViewSupported = false;
+            this.detailsSectionSupported = false;
+            this.loaderItems = [];
+            // DETAILS SECTION
+            // Check if details section and button should be displayed according to the count of the value given
+            // tslint:disable-next-line:no-input-rename
+            this.detailsSectionPropertyCount = null;
+            // SORTING - pass through for pager component
+            // tslint:disable-next-line:no-input-rename
+            this.sortOptions = [];
+            this.sort = null;
+            // tslint:disable-next-line:no-input-rename
+            this.sortdir = '-';
+            this.sortChanged = new i0.EventEmitter();
+            this.sortdirChanged = new i0.EventEmitter();
+            this.view = ListViewType.Table;
+            // COLUMNS
+            this.columns = [];
+            this.tilesDeckClass = 'cards-deck-4';
+            // tslint:disable-next-line:no-input-rename
+            this.tilesCount = 4;
+            this.tileTemplate = null;
+            this.detailsTemplate = null;
+            for (var i = 0; i < 5; i++) {
+                this.loaderItems.push({});
+            }
+        }
+        Object.defineProperty(ListViewComponent.prototype, "cols", {
+            set: function (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(function (c) { return 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';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ListViewComponent.prototype, "tiles", {
+            set: function (ref) {
+                this.tileTemplate = ref;
+                if (this.tileTemplate) {
+                    this.tilesViewSupported = true;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ListViewComponent.prototype, "details", {
+            set: function (ref) {
+                this.detailsTemplate = ref;
+                if (this.detailsTemplate) {
+                    this.detailsSectionSupported = true;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ListViewComponent.prototype.ngOnChanges = function (changes) {
+            var tilesCountChange = changes['tiles-count'] || changes.tilesCount;
+            if (tilesCountChange) {
+                this.setTilesDeckClass(tilesCountChange.currentValue);
+            }
+        };
+        // events
+        ListViewComponent.prototype.emitPageChanged = function ($event) {
+            this.pageChanged.emit($event);
+        };
+        ListViewComponent.prototype.emitPageSizeChanged = function ($event) {
+            this.pageSizeChanged.emit($event);
+        };
+        ListViewComponent.prototype.emitSortChanged = function ($event) {
+            this.sortChanged.emit($event);
+        };
+        ListViewComponent.prototype.emitSortdirChanged = function ($event) {
+            this.sortdirChanged.emit($event);
+        };
+        ListViewComponent.prototype.toggleDetails = function (item) {
+            item.detailsExpanded = !item.detailsExpanded;
+            this.detailsOpened.emit({ item: item, open: item.detailsExpanded });
+        };
+        // helpers
+        ListViewComponent.prototype.setTilesDeckClass = function (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';
+            }
+        };
+        return ListViewComponent;
+    }());
+    ListViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ListViewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ListViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ListViewComponent, selector: "lib-list-view", inputs: { busy: "busy", items: "items", showPager: ["show-pager", "showPager"], count: "count", page: "page", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"], sortOptions: ["sort-options", "sortOptions"], sort: "sort", sortdir: ["sort-dir", "sortdir"], view: "view", tilesCount: ["tiles-count", "tilesCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"px-2\">\r\n\r\n  <lib-pager *ngIf=\"showPager\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n  <div class=\"cards-deck-1\">\r\n    <lib-list-view-empty-state></lib-list-view-empty-state>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\" [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                    <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n", components: [{ type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ListViewComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-list-view',
+                        templateUrl: './list-view.component.html'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { busy: [{
+                    type: i0.Input
+                }], items: [{
+                    type: i0.Input
+                }], showPager: [{
+                    type: i0.Input,
+                    args: ['show-pager']
+                }], count: [{
+                    type: i0.Input
+                }], page: [{
+                    type: i0.Input
+                }], pageSize: [{
+                    type: i0.Input,
+                    args: ['page-size']
+                }], pageSizeOptions: [{
+                    type: i0.Input,
+                    args: ['page-size-options']
+                }], pageChanged: [{
+                    type: i0.Output
+                }], pageSizeChanged: [{
+                    type: i0.Output
+                }], detailsOpened: [{
+                    type: i0.Output
+                }], detailsSectionPropertyCount: [{
+                    type: i0.Input,
+                    args: ['details-section-property-count']
+                }], sortOptions: [{
+                    type: i0.Input,
+                    args: ['sort-options']
+                }], sort: [{
+                    type: i0.Input
+                }], sortdir: [{
+                    type: i0.Input,
+                    args: ['sort-dir']
+                }], sortChanged: [{
+                    type: i0.Output
+                }], sortdirChanged: [{
+                    type: i0.Output
+                }], view: [{
+                    type: i0.Input
+                }], cols: [{
+                    type: i0.ContentChildren,
+                    args: [ListColumnComponent, { read: ListColumnComponent }]
+                }], tilesCount: [{
+                    type: i0.Input,
+                    args: ['tiles-count']
+                }], tiles: [{
+                    type: i0.ContentChild,
+                    args: [ListTileComponent, { read: ListTileComponent }]
+                }], details: [{
+                    type: i0.ContentChild,
+                    args: [ListDetailsSectionComponent, { read: ListDetailsSectionComponent }]
+                }] } });
+
+    var CollapsiblePanelComponent = /** @class */ (function () {
+        function CollapsiblePanelComponent() {
+            this.title = null;
+            this.visible = false;
+        }
+        CollapsiblePanelComponent.prototype.ngOnInit = function () {
+        };
+        return CollapsiblePanelComponent;
+    }());
+    CollapsiblePanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: CollapsiblePanelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CollapsiblePanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: CollapsiblePanelComponent, selector: "lib-collapsible-panel", inputs: { title: "title" }, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: CollapsiblePanelComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-collapsible-panel',
+                        templateUrl: './collapsible-panel.component.html'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                    type: i0.Input
+                }] } });
+
+    var KpiTileComponent = /** @class */ (function () {
+        function KpiTileComponent() {
+            this.title = undefined;
+            this.busy = false;
+            this.kpi = undefined;
+            // tslint:disable-next-line:no-output-rename
+            this.tileAction = new i0.EventEmitter();
+        }
+        KpiTileComponent.prototype.ngOnInit = function () {
+        };
+        KpiTileComponent.prototype.emitTileAction = function ($event) {
+            $event.preventDefault();
+            $event.stopPropagation();
+            this.tileAction.emit($event);
+            return false;
+        };
+        return KpiTileComponent;
+    }());
+    KpiTileComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: KpiTileComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    KpiTileComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: KpiTileComponent, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi" }, outputs: { tileAction: "tile-action" }, ngImport: i0__namespace, template: "<div class=\"card\"\r\n     [ngClass]=\"{'card-deck-busy' : busy }\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container\">\r\n      <a href=\"#\"\r\n         class=\"kpi-tile-action\"\r\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n    </div>\r\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n    <div class=\"card-footer\">\r\n      <div class=\"text-xs\">\r\n        <a href=\"#\"\r\n           class=\"kpi-tile-action\"\r\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: KpiTileComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-kpi-tile',
+                        templateUrl: './kpi-tile.component.html'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                    type: i0.Input
+                }], busy: [{
+                    type: i0.Input
+                }], kpi: [{
+                    type: i0.Input
+                }], tileAction: [{
+                    type: i0.Output,
+                    args: ['tile-action']
+                }] } });
+
+    // freaksly simple date picker : https://tailwind-elements.com/docs/standard/forms/datepicker/
+    var DatepickerComponent = /** @class */ (function () {
+        function DatepickerComponent() {
+            this.readonly = false;
+            this.disabled = false;
+            this.displayFormat = 'dd/MM/yyyy';
+            this.placeholder = '';
+            this.value = null;
+            this.valueChange = new i0.EventEmitter();
+            this.showCalendar = false;
+            this.showYears = false;
+            this.monthNames = [
+                'Ιανουάριος',
+                'Φεβρουάριος',
+                'Μάρτιος',
+                'Απρίλιος',
+                'Μάϊος',
+                'Ιούνιος',
+                'Ιούλιος',
+                'Αύγουστος',
+                'Σεπτέμβριος',
+                'Οκτώβριος',
+                'Νοεμβριος',
+                'Δεκέμβριος',
+            ];
+            this.dayNames = ['Κυρ', 'Δευ', 'Τρι', 'Τετ', 'Πεμ', 'Παρ', 'Σαβ'];
+            this.month = -1;
+            this.year = -1;
+            this.calendarDates = [];
+            this.calendarYears = [];
+            this.showCalendarYears = [];
+            this.blankDays = [];
+            this.calendarYearPage = 1;
+            this.yearsPerPage = 30;
+            this.onChange$ = undefined;
+            this.onTouched$ = undefined;
+        }
+        DatepickerComponent.prototype.ngOnInit = function () {
+            var _a, _b;
+            var 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 }];
+            var yearsArray = [];
+            for (var 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();
+        };
+        DatepickerComponent.prototype.writeValue = function (obj) {
+            if (obj) {
+                this.value = new Date(obj);
+                this.month = this.value.getMonth();
+                this.year = this.value.getFullYear();
+            }
+        };
+        DatepickerComponent.prototype.registerOnChange = function (fn) {
+            this.onChange$ = fn;
+        };
+        DatepickerComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched$ = fn;
+        };
+        DatepickerComponent.prototype.onBlur = function (event) {
+            if (this.onTouched$) {
+                this.onTouched$();
+            }
+            this.getDateFromInput();
+        };
+        DatepickerComponent.prototype.selectDateValue = function (date) {
+            // This should be in UTC
+            var selectedDate = new Date(this.year, this.month, date.day, 3, 0, 0, 0);
+            this.value = selectedDate;
+            this.valueChange.emit(this.value);
+            if (this.onChange$) {
+                this.onChange$(this.value);
+            }
+            this.updateDays();
+            if (this.onTouched$) {
+                this.onTouched$();
+            }
+            this.showCalendar = false;
+        };
+        DatepickerComponent.prototype.selectYearValue = function (year) {
+            var _a, _b, _c;
+            // This should be in UTC
+            var selectedDate = new Date(year.year, (_a = this.month) !== null && _a !== void 0 ? _a : 1, (_c = (_b = this.calendarDates) === null || _b === void 0 ? void 0 : _b.find(function (x) { return x.selected == true; }).day) !== null && _c !== void 0 ? _c : 1, 3, 0, 0, 0);
+            this.year = year.year;
+            this.value = selectedDate;
+            this.valueChange.emit(this.value);
+            if (this.onChange$) {
+                this.onChange$(this.value);
+            }
+            this.updateDays();
+            if (this.onTouched$) {
+                this.onTouched$();
+            }
+            this.showYears = false;
+            this.showCalendar = true;
+            this.calcDays();
+        };
+        DatepickerComponent.prototype.previousMonth = function () {
+            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$();
+            }
+        };
+        DatepickerComponent.prototype.nextMonth = function () {
+            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$();
+            }
+        };
+        DatepickerComponent.prototype.previousYear = function () {
+            this.showCalendarYears = this.paginate(this.calendarYears, this.calendarYearPage > 1 ? --this.calendarYearPage : 1);
+            this.calcDays();
+            if (this.onTouched$) {
+                this.onTouched$();
+            }
+        };
+        DatepickerComponent.prototype.nextYear = function () {
+            this.showCalendarYears = this.paginate(this.calendarYears, this.calendarYearPage <= this.calendarYears.length / this.yearsPerPage
+                ? ++this.calendarYearPage
+                : this.calendarYearPage);
+            this.calcDays();
+            if (this.onTouched$) {
+                this.onTouched$();
+            }
+        };
+        DatepickerComponent.prototype.compareDates = function (date1, day, year) {
+            var _a;
+            if (!date1) {
+                return false;
+            }
+            var 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();
+        };
+        ;
+        DatepickerComponent.prototype.calcDays = function () {
+            var _a;
+            var daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
+            // find where to start calendar day of week
+            var dayOfWeek = new Date(this.year, this.month).getDay();
+            var 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();
+            }
+            var daysArray = [];
+            var 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) });
+            }
+            var yearsArray = [];
+            for (var i_1 = 1950; i_1 <= today.getFullYear() + 2; i_1++) {
+                yearsArray.push({ year: i_1, today: this.compareDates(today, null, i_1), selected: i_1 == this.year });
+            }
+            this.calendarYears = yearsArray;
+            this.blankDays = blankdaysArray;
+            this.calendarDates = daysArray;
+        };
+        DatepickerComponent.prototype.updateDays = function () {
+            var _this = this;
+            var today = new Date();
+            this.calendarDates.forEach(function (d) {
+                d.today = _this.compareDates(today, d, _this.year);
+                d.selected = _this.compareDates(_this.value, d, _this.year);
+            });
+        };
+        DatepickerComponent.prototype.paginate = function (array, page_number) {
+            return array.slice((page_number - 1) * this.yearsPerPage, page_number * this.yearsPerPage);
+        };
+        DatepickerComponent.prototype.getDateFromInput = function () {
+            var _a, _b;
+            if (((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.nativeElement.value) !== '') {
+                var dateParts = (_b = this.dateInput) === null || _b === void 0 ? void 0 : _b.nativeElement.value.split("/");
+                var 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;
+        };
+        DatepickerComponent.prototype.openYears = function () {
+            this.showYears = !this.showYears;
+            this.calendarYearPage = Math.ceil(this.calendarYears.map(function (x) { return x.year; }).indexOf(this.year) / this.yearsPerPage);
+            this.showCalendarYears = this.paginate(this.calendarYears, this.calendarYearPage !== 0 ? this.calendarYearPage : 1);
+            this.calcDays();
+        };
+        DatepickerComponent.prototype.openCalendar = function () {
+            this.showCalendar = !this.showCalendar;
+            this.calcDays();
+        };
+        DatepickerComponent.prototype.closeCalendar = function () {
+            this.showCalendar = false;
+            this.getDateFromInput();
+        };
+        return DatepickerComponent;
+    }());
+    DatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: DatepickerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DatepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: DatepickerComponent, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: forms.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return DatepickerComponent; }),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"relative flex\"\r\n     (clickOutside)=\"closeCalendar()\">\r\n\r\n  <input type=\"text\"\r\n         #dateInput\r\n         [readonly]=\"readonly\"\r\n         name=\"dateInput\"\r\n         (blur)=\"onBlur($event)\"\r\n         id=\"dateInput\"\r\n         (focus)=\"showCalendar = false\"\r\n         [value]=\"value | date: displayFormat\"\r\n         class=\"w-full focus:ring-0 focus:outline-none rounded-none sm:text-sm border-gray-300  focus:border-0\"\r\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n         [placeholder]=\"disabled ? '' : placeholder\">\r\n\r\n  <button type=\"button\"\r\n          class=\"relative inline-flex items-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-r-sm text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"openCalendar()\"\r\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n  </button>\r\n\r\n  <div *ngIf=\"showCalendar\"\r\n       class=\"bg-gray-100 mt-10 rounded-sm shadow-md p-4 absolute left-0 z-50 w-full\"\r\n       style=\"height:18rem;min-width:16rem;\"\r\n       name=\"calendar\">\r\n    <div class=\"flex justify-between items-center mb-2\">\r\n      <div>\r\n        <button type=\"button\"\r\n                (click)=\"openYears()\">\r\n          <span class=\"text-lg font-bold text-gray-800\">\r\n            {{monthNames[month]}}\r\n          </span>\r\n          <span class=\"ml-1 text-lg text-gray-600 font-normal\">\r\n            {{year}}</span>\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\r\n        <button type=\"button\"\r\n                class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n                (click)=\"previousMonth();\">\r\n          <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 19l-7-7 7-7\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n                (click)=\"nextMonth()\">\r\n          <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M9 5l7 7-7 7\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <ng-template #showYearsPickerTmpl>\r\n        <div>\r\n          <button type=\"button\"\r\n                  class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25 w-1/2\"\r\n                  (click)=\"previousYear();\">\r\n            <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M15 19l-7-7 7-7\" />\r\n            </svg>\r\n          </button>\r\n          <button type=\"button\"\r\n                  class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25 w-1/2\"\r\n                  (click)=\"nextYear()\">\r\n            <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 5l7 7-7 7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <div class=\"flex flex-wrap mb-3 -mx-1\"\r\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\r\n      <div *ngFor=\"let day of dayNames\"\r\n           class=\"text-gray-800 font-medium text-center text-sm uppercase\"\r\n           style=\"width: 14.28%\">{{day}}</div>\r\n    </div>\r\n\r\n    <ng-template #showCalYearsTmpl>\r\n      <div class=\"flex flex-wrap -mx-1 items-center\">\r\n        <div *ngFor=\"let year of showCalendarYears\"\r\n             style=\"width: 18.28%\"\r\n             class=\"px-1 mb-1\">\r\n          <div (click)=\"selectYearValue(year)\"\r\n               class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n               [class]=\"year.selected  ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{year.year}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-wrap -mx-1 items-center\"\r\n         *ngIf=\"!showYears\">\r\n      <div *ngFor=\"let blankday of blankDays\"\r\n           style=\"width: 14.28%\"\r\n           class=\"text-center border p-1 border-transparent text-sm opacity-50\">{{blankday}}</div>\r\n      <div *ngFor=\"let date of calendarDates\"\r\n           style=\"width: 14.28%\"\r\n           class=\"px-1 mb-1\">\r\n        <div (click)=\"selectDateValue(date)\"\r\n             class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n             [class]=\"date.selected  ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{date.day}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>", directives: [{ type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1__namespace.DatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: DatepickerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-date-picker',
+                        templateUrl: './date-picker.component.html',
+                        providers: [
+                            {
+                                provide: forms.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return DatepickerComponent; }),
+                                multi: true
+                            }
+                        ]
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], displayFormat: [{
+                    type: i0.Input,
+                    args: ['display-format']
+                }], placeholder: [{
+                    type: i0.Input
+                }], value: [{
+                    type: i0.Input
+                }], valueChange: [{
+                    type: i0.Output
+                }], dateInput: [{
+                    type: i0.ViewChild,
+                    args: ['dateInput']
+                }] } });
+
+    var ToasterService = /** @class */ (function () {
+        function ToasterService() {
+            this.subject = new rxjs.BehaviorSubject(NULL_TOAST);
+            this.toast$ = this.subject.asObservable()
+                .pipe(operators.filter(function (toast) { return toast !== null && toast.title !== NULL_TOAST.title; }));
+        }
+        ToasterService.prototype.show = function (type, title, body, delay) {
+            this.subject.next({ type: type, title: title, body: body, delay: delay });
+        };
+        return ToasterService;
+    }());
+    ToasterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ToasterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ToasterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ToasterService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ToasterService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root'
+                    }]
+            }], ctorParameters: function () { return []; } });
+
+    var ToasterComponent = /** @class */ (function () {
+        function ToasterComponent() {
+            this.i = 0;
+            this.remove = new i0.EventEmitter();
+            this.isMobile = false;
+            this.closed = false;
+        }
+        ToasterComponent.prototype.ngOnInit = function () {
+            window.screen.width > 640 ? this.isMobile = false : this.isMobile = true;
+        };
+        ToasterComponent.prototype.closeToast = function (index) {
+            var _this = this;
+            this.closed = true;
+            setTimeout(function () { return _this.remove.emit(index); }, 100);
+        };
+        return ToasterComponent;
+    }());
+    ToasterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ToasterComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ToasterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ToasterComponent, selector: "lib-toaster", inputs: { toast: "toast", i: "i" }, outputs: { remove: "remove" }, ngImport: i0__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ToasterComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-toaster',
+                        templateUrl: './toaster.component.html'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { toast: [{
+                    type: i0.Input
+                }], i: [{
+                    type: i0.Input
+                }], remove: [{
+                    type: i0.Output
+                }] } });
+
+    var ToasterContainerComponent = /** @class */ (function () {
+        function ToasterContainerComponent(toaster) {
+            this.toaster = toaster;
+            this.toasts = [];
+        }
+        ToasterContainerComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.toaster.toast$
+                .subscribe(function (toast) {
+                _this.toasts = __spreadArray([toast], __read(_this.toasts));
+                setTimeout(function () { return _this.toasts.pop(); }, toast.delay || 6000);
+            });
+        };
+        ToasterContainerComponent.prototype.remove = function (index) {
+            this.toasts = this.toasts.slice(0, index).concat(this.toasts.slice(index + 1));
+        };
+        return ToasterContainerComponent;
+    }());
+    ToasterContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ToasterContainerComponent, deps: [{ token: ToasterService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ToasterContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ToasterContainerComponent, selector: "lib-toaster-container", ngImport: i0__namespace, 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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ToasterContainerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-toaster-container',
+                        templateUrl: './toaster-container.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: ToasterService }]; } });
+
+    var AvatarInitialsComponent = /** @class */ (function () {
+        function AvatarInitialsComponent() {
+            this.large = false;
+            this.colors = [
+                '#EB7181',
+                '#468547',
+                '#FFD558',
+                '#3670B2', // blue
+            ];
+        }
+        AvatarInitialsComponent.prototype.ngOnInit = function () {
+            this.createInititals();
+            var 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];
+        };
+        AvatarInitialsComponent.prototype.createInititals = function () {
+            if (this.name) {
+                var initials = '';
+                for (var 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;
+            }
+        };
+        return AvatarInitialsComponent;
+    }());
+    AvatarInitialsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: AvatarInitialsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AvatarInitialsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: AvatarInitialsComponent, selector: "lib-avatar-initials", inputs: { name: "name", large: "large" }, ngImport: i0__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: AvatarInitialsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-avatar-initials',
+                        templateUrl: './avatar-initials.component.html'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { name: [{
+                    type: i0.Input
+                }], large: [{
+                    type: i0.Input
+                }] } });
+
+    var ToggleComponent = /** @class */ (function () {
+        function ToggleComponent() {
+            this.valueChange = new i0.EventEmitter();
+            this.onChange$ = undefined;
+            this.onTouched$ = undefined;
+        }
+        ToggleComponent.prototype.writeValue = function (obj) {
+            if (obj) {
+                this.value = obj || false;
+            }
+        };
+        ToggleComponent.prototype.registerOnChange = function (fn) {
+            this.onChange$ = fn;
+        };
+        ToggleComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched$ = fn;
+        };
+        ToggleComponent.prototype.onBlur = function (event) {
+            if (this.onTouched$) {
+                this.onTouched$();
+            }
+        };
+        ToggleComponent.prototype.ngOnInit = function () {
+        };
+        ToggleComponent.prototype.changeValue = function () {
+            this.value = !this.value;
+            this.valueChange.emit(this.value);
+            if (this.onChange$) {
+                this.onChange$(this.value);
+            }
+            if (this.onTouched$) {
+                this.onTouched$();
+            }
+        };
+        return ToggleComponent;
+    }());
+    ToggleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ToggleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ToggleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ToggleComponent, selector: "lib-toggle", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: forms.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return ToggleComponent; }),
+                multi: true
+            }
+        ], ngImport: i0__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ToggleComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-toggle',
+                        templateUrl: './toggle.component.html',
+                        providers: [
+                            {
+                                provide: forms.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return ToggleComponent; }),
+                                multi: true
+                            }
+                        ]
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], valueChange: [{
+                    type: i0.Output
+                }] } });
+
+    var SidePaneComponent = /** @class */ (function () {
+        function SidePaneComponent(router, document) {
+            this.router = router;
+            this.document = document;
+            // tslint:disable-next-line:no-input-rename
+            this.showPane = false;
+            this.sizeContainerStyle = 'side-pane-box-size';
+            this.overlayStyle = 'side-pane-overlay';
+            this.onComplete = new i0.EventEmitter();
+        }
+        SidePaneComponent.prototype.ngOnDestroy = function () {
+        };
+        SidePaneComponent.prototype.ngOnInit = function () {
+        };
+        SidePaneComponent.prototype.onSidePaneActivated = function (component) {
+            var _a;
+            this.document.body.classList.add('modal-active');
+            var sizeStyleSuffix = '';
+            var state = (_a = this.router.getCurrentNavigation()) === null || _a === void 0 ? void 0 : _a.extras.state;
+            if (state) {
+                if (state.paneSize) {
+                    if (state.paneSize === exports.SidePaneSize.Small25) {
+                        sizeStyleSuffix = '-25';
+                    }
+                    else if (state.paneSize === exports.SidePaneSize.Medium50) {
+                        sizeStyleSuffix = '-50';
+                    }
+                    else if (state.paneSize === exports.SidePaneSize.Large75) {
+                        sizeStyleSuffix = '-75';
+                    }
+                }
+                if (state.paneOverlay) {
+                    if (state.paneOverlay === exports.SidePaneOverlayType.None) {
+                        this.overlayStyle = 'side-pane-overlay-opacity-0';
+                    }
+                    else if (state.paneOverlay === exports.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;
+        };
+        SidePaneComponent.prototype.onSidePaneDeactivated = function ($event) {
+            this.document.body.classList.remove('modal-active');
+            this.showPane = false;
+            this.onComplete.emit(true);
+        };
+        return SidePaneComponent;
+    }());
+    SidePaneComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: SidePaneComponent, deps: [{ token: i1__namespace$1.Router }, { token: i1.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SidePaneComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: SidePaneComponent, selector: "lib-side-pane", inputs: { showPane: ["visible", "showPane"] }, outputs: { onComplete: "onComplete" }, ngImport: i0__namespace, template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\r\n  <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\r\n  <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\r\n    <div [class]=\"sizeContainerStyle\">\r\n      <div class=\"side-pane\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: SidePaneComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-side-pane',
+                        templateUrl: './side-pane.component.html'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i1__namespace$1.Router }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.DOCUMENT]
+                        }] }];
+        }, propDecorators: { showPane: [{
+                    type: i0.Input,
+                    args: ['visible']
+                }], onComplete: [{
+                    type: i0.Output
+                }] } });
+
+    var APP_LINKS = new i0.InjectionToken('APP_LINKS');
+    var SHELL_CONFIG = new i0.InjectionToken('SHELL_CONFIG');
+
+    var DynamicComponentHostDirective = /** @class */ (function () {
+        function DynamicComponentHostDirective(viewContainerRef) {
+            this.viewContainerRef = viewContainerRef;
+            this.hostName = '';
+        }
+        return DynamicComponentHostDirective;
+    }());
+    DynamicComponentHostDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: DynamicComponentHostDirective, deps: [{ token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    DynamicComponentHostDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.1", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: { hostName: "hostName" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: DynamicComponentHostDirective, decorators: [{
+                type: i0.Directive,
+                args: [{ selector: '[appDynamicComponentHost]' }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }]; }, propDecorators: { hostName: [{
+                    type: i0.Input
+                }] } });
+
+    /**
+     * Holds information about the dynamic content.
+     * @remarks
+     * `ComponentRef` is undefined in the case content is of `TemplateRef` type.
+     */
+    var ContentRef = /** @class */ (function () {
+        function ContentRef(nodes, viewRef, componentRef) {
+            this.nodes = nodes;
+            this.viewRef = viewRef;
+            this.componentRef = componentRef;
+        }
+        return ContentRef;
+    }());
+
+    /**
+     * 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
+     */
+    var ComponentLoader = /** @class */ (function () {
+        function ComponentLoader(vcr, cfr, applicationRef, injector) {
+            this.vcr = vcr;
+            this.cfr = cfr;
+            this.applicationRef = applicationRef;
+            this.injector = injector;
+            /**
+             * Before content is shown event.
+             */
+            this.onBeforeShow = new rxjs.Subject();
+            /**
+             * After show content event.
+             * @returns The id of newly created component ref.
+             */
+            this.onShown = new rxjs.Subject();
+            /**
+             * Before content is hidden event.
+             * @returns The instance of attached component;
+             */
+            this.onBeforeHide = new rxjs.Subject();
+            /**
+             * After content is hidden event.
+             * @returns The id of destroyed component ref.
+             */
+            this.onHidden = new rxjs.Subject();
+            this.providers = [];
+            this.containerDefaultSelector = 'body';
+        }
+        /**
+         * Attaches component.
+         * @param componentType - The type component to attach.
+         * @returns Current instance of {@link ComponentLoader}
+         */
+        ComponentLoader.prototype.attach = function (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}
+         */
+        ComponentLoader.prototype.to = function (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}
+         */
+        ComponentLoader.prototype.provide = function (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.
+         */
+        ComponentLoader.prototype.show = function (options) {
+            if (options === void 0) { 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}
+         */
+        ComponentLoader.prototype.hide = function (id, result) {
+            var _a, _b, _c;
+            if (!this.componentRef) {
+                throw Error('No attached component found to hide');
+            }
+            this.onBeforeHide.next(this.componentRef.instance);
+            var 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: id, result: result } : null);
+            return this;
+        };
+        ComponentLoader.prototype.getInnerComponent = function () {
+            return this.innerComponent;
+        };
+        ComponentLoader.prototype.markComponentsForCheck = function () {
+            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();
+        };
+        ComponentLoader.prototype.createComponentAndAttachToView = function (options) {
+            var _a;
+            var injector = i0.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);
+        };
+        ComponentLoader.prototype.appendContentToContainer = function () {
+            var _a, _b;
+            if (this.container instanceof i0.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') {
+                var 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);
+            }
+        };
+        ComponentLoader.prototype.getContentRef = function (content, context, initialState) {
+            //TemplateRef case
+            if (content instanceof i0.TemplateRef) {
+                if (this.vcr) {
+                    var viewRef_1 = this.vcr.createEmbeddedView(content, context);
+                    viewRef_1.markForCheck();
+                    return new ContentRef([viewRef_1.rootNodes], viewRef_1);
+                }
+                var viewRef = content.createEmbeddedView({});
+                this.applicationRef.attachView(viewRef);
+                return new ContentRef([viewRef.rootNodes], viewRef);
+            }
+            //Component case
+            if (typeof content === 'function') {
+                var contentCf = this.cfr.resolveComponentFactory(content);
+                var injector = i0.Injector.create({
+                    providers: this.providers,
+                    parent: this.injector,
+                });
+                var 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');
+        };
+        return ComponentLoader;
+    }());
+
+    /**
+     * Use to create instances of {@link ComponentLoader}.
+     *
+     * @public
+     */
+    var ComponentLoaderFactory = /** @class */ (function () {
+        function ComponentLoaderFactory(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
+         */
+        ComponentLoaderFactory.prototype.createLoader = function (viewContainerRef) {
+            return new ComponentLoader(viewContainerRef, this.componentFactoryResolver, this.applicationRef, this.injector);
+        };
+        return ComponentLoaderFactory;
+    }());
+    ComponentLoaderFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ComponentLoaderFactory, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.Injector }, { token: i0__namespace.ApplicationRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ComponentLoaderFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ComponentLoaderFactory, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ComponentLoaderFactory, decorators: [{
+                type: i0.Injectable,
+                args: [{ providedIn: 'root' }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.Injector }, { type: i0__namespace.ApplicationRef }]; } });
+
+    var ShellHeaderComponent = /** @class */ (function () {
+        function ShellHeaderComponent(authService, router, config, links) {
+            this.authService = authService;
+            this.router = router;
+            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;
+            this.border = true;
+            this.sectionLinks = rxjs.of([]);
+            this.mobileMenuExpanded = false;
+            this.userMenuExpanded = false;
+            this.routerSub$ = null;
+            this.userSub$ = null;
+            this.statusSub$ = null;
+            this.user = null;
+            this.avatarName = null;
+            this.routeSubject = this.router.events.pipe(operators.filter(function (event) { return event instanceof i1$1.NavigationStart; }));
+        }
+        ShellHeaderComponent.prototype.ngOnDestroy = function () {
+            console.log(this.showUserNameOnHeader);
+            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();
+            }
+        };
+        ShellHeaderComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.sectionLinks = this.links[this.sectionLinksPath];
+            this.routerSub$ = this.routeSubject.subscribe(function (event) {
+                _this.mobileMenuExpanded = false;
+                _this.userMenuExpanded = false;
+            });
+            this.authService.loadUser().subscribe(function (user) {
+                console.log(user);
+                _this.setCurrentUser(user);
+            }, function (error) {
+                console.error(error);
+            });
+            // Detect user changes and display / or not user info accordingly...
+            this.userSub$ = this.authService.user$.subscribe(function (user) {
+                // console.log('ShellHeaderComponent user subscription');
+                _this.setCurrentUser(user);
+            });
+        };
+        // tslint:disable-next-line:typedef
+        ShellHeaderComponent.prototype.onClickOutside = function ($event) {
+            this.userMenuExpanded = false;
+        };
+        ShellHeaderComponent.prototype.signin = function (event) {
+            if (event) {
+                event.preventDefault();
+            }
+            this.authService.signinRedirect();
+        };
+        ShellHeaderComponent.prototype.setCurrentUser = function (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();
+                // console.log('load user', this.avatarName);
+            }
+        };
+        return ShellHeaderComponent;
+    }());
+    ShellHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellHeaderComponent, deps: [{ token: i2.AuthService }, { token: i1$1.Router }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ShellHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], border: "border" }, ngImport: i0__namespace, template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div [class]=\"border ? 'shell-header-border' : ''\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div class=\"shell-header-links-no-grow-container\">\r\n          <div>\r\n            <a href=\"#\"\r\n               [routerLink]=\"['/']\"><img class=\"app-logo\" [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          <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n            <a href=\"#\"\r\n               [routerLink]=\"[link.path]\"\r\n               [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n               [routerLinkActive]=\"['nav-link-active']\"\r\n               [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n               class=\"nav-link\">\r\n              {{ link.text }}\r\n            </a>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n          <div class=\"shell-header-links-no-grow-container\">\r\n\r\n            <ng-container *ngFor=\"let link of links.profileActions | async\">\r\n              <a class=\"shell-header-menu-rounded-button\"\r\n                 (clickOutside)=\"onClickOutside($event)\"\r\n                 [attr.href]=\"link.path\"\r\n                 [attr.target]=\"link.external ? '_blank' : '_self'\">\r\n                <span class=\"sr-only\">{{ link.text }}</span>\r\n                <i *ngIf=\"link.icon\"\r\n                   [class]=\"link.icon\"></i>\r\n              </a>\r\n            </ng-container>\r\n\r\n            <!-- Profile dropdown -->\r\n            <div class=\"ml-2 relative\"\r\n                 (clickOutside)=\"onClickOutside($event)\"\r\n                 *ngIf=\"profileMenuVisible\">\r\n              <div [ngClass]=\"{'shell-header-profile': showUserNameOnHeader}\">\r\n                <div *ngIf=\"user && showUserNameOnHeader\"\r\n                     class=\"shell-header-profile-userName\">\r\n                  {{ user.profile.name }}\r\n                </div>\r\n                <button type=\"button\"\r\n                        *ngIf=\"user\"\r\n                        (click)=\"userMenuExpanded = !userMenuExpanded\"\r\n                        class=\"shell-header-profile-dropdown-button\"\r\n                        id=\"user-menu\"\r\n                        aria-expanded=\"false\"\r\n                        aria-haspopup=\"true\">\r\n                  <span class=\"sr-only\">Open user menu</span>\r\n                  <span class=\"avatar-container\">\r\n                    <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n                  </span>\r\n                </button>\r\n\r\n                <button type=\"button\"\r\n                        *ngIf=\"!user\"\r\n                        (click)=\"signin(null)\"\r\n                        class=\"shell-header-profile-dropdown-button\"\r\n                        id=\"user-menu\"\r\n                        aria-expanded=\"false\"\r\n                        aria-haspopup=\"true\">\r\n                  <span class=\"sr-only\">sign in</span>\r\n                  <span class=\"avatar-container\">\r\n                    <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n                  </span>\r\n                </button>\r\n\r\n                <div *ngIf=\"userMenuExpanded\"\r\n                     [ngClass]=\"showUserNameOnHeader ? 'shell-header-profile-dropdown-with-username' : 'shell-header-profile-dropdown'\"\r\n                     role=\"menu\"\r\n                     aria-orientation=\"vertical\"\r\n                     aria-labelledby=\"user-menu\">\r\n                  <!-- <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\" role=\"menuitem\">\u0391\u03C0\u03BF\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7</a> -->\r\n                  <ng-container *ngFor=\"let link of links.profile | async\">\r\n                    <!-- <a *ngIf=\"link.external\" [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-profile\">\r\n                      {{ link.text }}\r\n                    </a> -->\r\n                    <a [routerLink]=\"link.path\" [routerLinkActive]=\"['nav-link-profile-active']\"\r\n                       [routerLinkActiveOptions]=\"{ exact: link.exact }\" class=\"nav-link-profile\">\r\n                      {{ link.text }}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg class=\"block h-6 w-6\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg class=\"hidden h-6 w-6\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\"\r\n       *ngIf=\"mobileMenuExpanded\"\r\n       id=\"mobile-menu\">\r\n    <div class=\"mobile-menu-link-container\">\r\n      <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n        <a *ngIf=\"link.external\"  [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-mobile\">\r\n          {{ link.text }}\r\n        </a>\r\n        <a *ngIf=\"!link.external\"  [routerLink]=\"link.path\" [routerLinkActive]=\"['nav-link-mobile-active']\" [routerLinkActiveOptions]=\"{ exact: link.exact }\" class=\"nav-link-mobile\">\r\n          {{ link.text }}\r\n          </a>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!user\">\r\n        <a href=\"#\" (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      </ng-container>\r\n    </div>\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        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <!-- Heroicon name: outline/bell -->\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <div class=\"mobile-menu-link-container\">\r\n        <ng-container *ngFor=\"let link of links.profile | async\">\r\n          <a *ngIf=\"link.external\" [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-mobile\">\r\n            {{ link.text }}\r\n          </a>\r\n          <a [routerLink]=\"link.path\"\r\n             [routerLinkActive]=\"['nav-link-mobile-active']\"\r\n             [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n             class=\"nav-link-mobile\">\r\n            {{ link.text }}\r\n          </a>\r\n        </ng-container>\r\n        <!-- <a href=\"#\" class=\"block px-3 py-2 rounded-sm text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700\">\u0391\u03C0\u03BF\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7</a> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n</nav>\r\n", directives: [{ type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1__namespace.AsyncPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellHeaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // tslint:disable-next-line:component-selector
+                        selector: 'lib-shell-header',
+                        templateUrl: './shell-header.component.html',
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i2__namespace.AuthService, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.AuthService]
+                        }] }, { type: i1__namespace$1.Router, decorators: [{
+                            type: i0.Inject,
+                            args: [i1$1.Router]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [SHELL_CONFIG]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [APP_LINKS]
+                        }] }];
+        }, propDecorators: { sectionLinksPath: [{
+                    type: i0.Input,
+                    args: ['section-links']
+                }], profileMenuVisible: [{
+                    type: i0.Input,
+                    args: ['profile-menu']
+                }], showUserNameOnHeader: [{
+                    type: i0.Input,
+                    args: ['show-userName']
+                }], border: [{
+                    type: i0.Input
+                }] } });
+
+    var ShellFooterComponent = /** @class */ (function () {
+        function ShellFooterComponent(links) {
+            this.links = links;
+        }
+        return ShellFooterComponent;
+    }());
+    ShellFooterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellFooterComponent, deps: [{ token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ShellFooterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellFooterComponent, selector: "lib-shell-footer", ngImport: i0__namespace, 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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1__namespace.AsyncPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellFooterComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-shell-footer',
+                        templateUrl: './shell-footer.component.html'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [APP_LINKS]
+                        }] }];
+        } });
+
+    var ShellLayoutComponent = /** @class */ (function () {
+        function ShellLayoutComponent(document, router, location, config, componentLoaderFactory) {
+            this.document = document;
+            this.router = router;
+            this.location = location;
+            this.config = config;
+            this.componentLoaderFactory = componentLoaderFactory;
+            this.dynamicComponentHosts = null;
+            this.showRightPaneSM = false;
+            this.routerSub$ = null;
+            this.activeConfig = new DefaultShellConfig();
+            this.loaded = false;
+            if (!config) {
+                config = new DefaultShellConfig();
+            }
+            this.activeConfig = config;
+        }
+        ShellLayoutComponent.prototype.ngAfterViewChecked = function () {
+            var _this = this;
+            setTimeout(function () { _this.loaded = true; }, 200);
+        };
+        ShellLayoutComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.routerSub$ = this.router.events.pipe(operators.filter(function (event) { return event instanceof i1$1.ActivationStart; })).subscribe(function (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);
+                        }
+                    }
+                }
+            });
+        };
+        ShellLayoutComponent.prototype.ngAfterViewInit = function () {
+            this.initCustomComponents();
+        };
+        ShellLayoutComponent.prototype.initCustomComponents = function () {
+            if (this.dynamicComponentHosts && this.dynamicComponentHosts.length > 0) {
+                this.loadCustomComponent(this.dynamicComponentHosts.find(function (_) { return _.hostName === 'Header'; }));
+                // since you're not using it...
+                // this.loadCustomComponent(this.dynamicComponentHosts.find(_ => _.hostName === 'Footer'));
+            }
+        };
+        ShellLayoutComponent.prototype.ngOnDestroy = function () {
+            if (this.routerSub$) {
+                this.routerSub$.unsubscribe();
+            }
+        };
+        ShellLayoutComponent.prototype.loadCustomComponent = function (host) {
+            if (host) {
+                var viewContainerRef = host.viewContainerRef;
+                if (viewContainerRef && this.activeConfig.customHeaderComponent) {
+                    var clf = this.componentLoaderFactory.createLoader(viewContainerRef);
+                    var headerCompRef = clf.attach(this.activeConfig.customHeaderComponent).to(viewContainerRef.element).show();
+                }
+            }
+        };
+        return ShellLayoutComponent;
+    }());
+    ShellLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellLayoutComponent, deps: [{ token: i1.DOCUMENT }, { token: i1__namespace$1.Router }, { token: i1__namespace.Location }, { token: SHELL_CONFIG }, { token: ComponentLoaderFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ShellLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0__namespace, template: "<div *ngIf=\"loaded\" [style.display]=\"!loaded ? 'none':'block'\" class=\"shell-container active-side-pane\">\r\n  <div class=\"shell-header-container\" *ngIf=\"activeConfig.showHeader\">\r\n      <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n\r\n      <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\r\n        <div appDynamicComponentHost =\"Header\"></div>\r\n      </ng-container>\r\n\r\n      <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\" [show-userName]=\"activeConfig.showUserNameOnHeader\"></lib-shell-header>\r\n    </div>\r\n  </div>\r\n\r\n  <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n      <router-outlet></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <div class=\"shell-footer-container\" *ngIf=\"activeConfig.showFooter\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customFooterComponent\">\r\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n      </ng-container>\r\n      <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>\r\n", components: [{ type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "border"] }, { type: ShellFooterComponent, selector: "lib-shell-footer" }, { type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { type: ToasterContainerComponent, selector: "lib-toaster-container" }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { type: i1__namespace$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellLayoutComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // tslint:disable-next-line:component-selector
+                        selector: 'lib-shell-layout',
+                        templateUrl: './shell-layout.component.html',
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.DOCUMENT]
+                        }] }, { type: i1__namespace$1.Router }, { type: i1__namespace.Location }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [SHELL_CONFIG]
+                        }] }, { type: ComponentLoaderFactory }];
+        }, propDecorators: { dynamicComponentHosts: [{
+                    type: i0.ViewChildren,
+                    args: [DynamicComponentHostDirective]
+                }] } });
+
+    var ViewLayoutComponent = /** @class */ (function () {
+        function ViewLayoutComponent(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 i0.EventEmitter();
+            // tslint:disable-next-line:no-output-on-prefix
+            this.onSearch = new i0.EventEmitter();
+        }
+        ViewLayoutComponent.prototype.ngOnInit = function () {
+            var _a;
+            if ((_a = this.searchInput$) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+                rxjs.fromEvent(this.searchInput$.nativeElement, 'keyup').pipe(operators.map(function (event) {
+                    return event.target.value; // Get input value.
+                }), operators.filter(function (inputValue) { return inputValue.length >= 3 || inputValue.length === 0; }), 
+                // If character length greater than minimumSearchCharacters setting.
+                operators.debounceTime(1000), // Time in milliseconds between key events.
+                operators.distinctUntilChanged() // If previous query is different from current.
+                ).subscribe();
+            }
+        };
+        ViewLayoutComponent.prototype.emitActionClick = function (action) {
+            this.onAction.emit(action);
+        };
+        ViewLayoutComponent.prototype.routerLinkActionClick = function (action) {
+            // console.log('routerLinkActionClick', action);
+            if (action.outlet) {
+                this.router$.navigate(['', { outlets: { rightpane: action.link } }]);
+            }
+            else {
+                this.router$.navigate([action.link]);
+            }
+        };
+        ViewLayoutComponent.prototype.searchActionClick = function (action, text) {
+            this.onSearch.emit(text);
+        };
+        ViewLayoutComponent.prototype.searchActionType = function (text) {
+            var _a;
+            this.onSearch.emit((_a = this.searchInput$) === null || _a === void 0 ? void 0 : _a.nativeElement.value);
+        };
+        ViewLayoutComponent.prototype.handleClear = function (event) {
+            var _a;
+            console.log('handle clear!!!');
+            event.stopPropagation();
+            this.onSearch.emit((_a = event.target) === null || _a === void 0 ? void 0 : _a.value);
+        };
+        ViewLayoutComponent.prototype.switchViewActionClick = function (action) {
+            // console.log('switchViewActionClick', action);
+            this.view = action.param;
+            if (action && action.param) {
+                this.router$.navigate([], { queryParams: { view: action.param }, queryParamsHandling: 'merge', skipLocationChange: false });
+            }
+        };
+        return ViewLayoutComponent;
+    }());
+    ViewLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ViewLayoutComponent, deps: [{ token: i1__namespace$1.ActivatedRoute }, { token: i1__namespace$1.Router }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ViewLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: { header: ["show-header", "header"], fluid: "fluid", title: "title", icon: "icon", actions: "actions", busy: "busy", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], view: "view", metaItems: ["meta-items", "metaItems"] }, outputs: { onAction: "onAction", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0__namespace, template: "<header *ngIf=\"header\"\r\n        class=\"view-layout-paddings\">\r\n\r\n  <div class=\"view-layout-title-container-sm md:view-layout-title-container\">\r\n    <div class=\"view-layout-title-container-inner\">\r\n      <i *ngIf=\"icon\"\r\n         [class]=\"icon + ' title-icon'\"\r\n         aria-hidden=\"true\"></i>\r\n      <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">\r\n        {{title}}\r\n      </h1>\r\n    </div>\r\n    <div *ngIf=\"metaItems && metaItems.length > 0\"\r\n         class=\"meta-container\">\r\n      <ng-container *ngFor=\"let meta of metaItems\">\r\n        <div class=\"meta-container-inner\">\r\n          <i *ngIf=\"meta.icon\"\r\n             [class]=\"meta.icon + ' meta-icon'\"\r\n             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\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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ViewLayoutComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-view-layout',
+                        templateUrl: './view-layout.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.ActivatedRoute }, { type: i1__namespace$1.Router }]; }, propDecorators: { searchInput$: [{
+                    type: i0.ViewChild,
+                    args: ['search']
+                }], header: [{
+                    type: i0.Input,
+                    args: ['show-header']
+                }], fluid: [{
+                    type: i0.Input
+                }], title: [{
+                    type: i0.Input
+                }], icon: [{
+                    type: i0.Input
+                }], actions: [{
+                    type: i0.Input
+                }], busy: [{
+                    type: i0.Input
+                }], searchPlaceholder: [{
+                    type: i0.Input,
+                    args: ['search-placeholder']
+                }], view: [{
+                    type: i0.Input
+                }], metaItems: [{
+                    type: i0.Input,
+                    args: ['meta-items']
+                }], onAction: [{
+                    type: i0.Output
+                }], onSearch: [{
+                    type: i0.Output
+                }] } });
+
+    var ModelViewLayoutComponent = /** @class */ (function () {
+        function ModelViewLayoutComponent(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 αποτελέσματα' }
+            ];
+        }
+        ModelViewLayoutComponent.prototype.ngOnInit = function () {
+        };
+        ModelViewLayoutComponent.prototype.onSidePaneActivated = function ($event) {
+            //console.log('onSidePaneActivated', $event);
+            this.showRightPaneSM = true;
+        };
+        ModelViewLayoutComponent.prototype.onSidePaneDeactivated = function ($event) {
+            //console.log('onSidePaneActivated', $event);
+            this.showRightPaneSM = false;
+        };
+        ModelViewLayoutComponent.prototype.closeSidePane = function () {
+            this.location.back();
+        };
+        return ModelViewLayoutComponent;
+    }());
+    ModelViewLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ModelViewLayoutComponent, deps: [{ token: i1__namespace.Location }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ModelViewLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ModelViewLayoutComponent, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"] }, ngImport: i0__namespace, 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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1__namespace$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i1__namespace$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ModelViewLayoutComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // tslint:disable-next-line:component-selector
+                        selector: 'lib-model-view-layout',
+                        templateUrl: './model-view-layout.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.Location }]; }, propDecorators: { title: [{
+                    type: i0.Input
+                }], primary: [{
+                    type: i0.Input,
+                    args: ['primary-links']
+                }], secondary: [{
+                    type: i0.Input,
+                    args: ['secondary-links']
+                }], metaItems: [{
+                    type: i0.Input,
+                    args: ['meta-items']
+                }] } });
+
+    var SideViewLayoutComponent = /** @class */ (function () {
+        function SideViewLayoutComponent(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 i0.EventEmitter();
+            this.ok = new i0.EventEmitter();
+        }
+        SideViewLayoutComponent.prototype.ngOnInit = function () {
+        };
+        SideViewLayoutComponent.prototype.closeSidePane = function () {
+            var _this = this;
+            if (this.returnPath) {
+                this.router.navigateByUrl('/', { skipLocationChange: true }).then(function () { return _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();
+                }
+            }
+        };
+        SideViewLayoutComponent.prototype.emitClose = function () {
+            this.cancel.emit(false);
+            this.closeSidePane();
+        };
+        SideViewLayoutComponent.prototype.emitCancel = function () {
+            this.cancel.emit(false);
+            this.closeSidePane();
+        };
+        SideViewLayoutComponent.prototype.emitOK = function () {
+            this.ok.emit(true);
+            if (this.closeOnOk) {
+                this.closeSidePane();
+            }
+        };
+        return SideViewLayoutComponent;
+    }());
+    SideViewLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: SideViewLayoutComponent, deps: [{ token: i1__namespace.Location }, { token: i1__namespace$1.Router }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SideViewLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: SideViewLayoutComponent, selector: "lib-side-view-layout", inputs: { title: "title", showActions: "showActions", disabled: "disabled", returnPath: ["return-path", "returnPath"], okLabel: ["ok-label", "okLabel"], okShow: ["ok-show", "okShow"], closeOnOk: ["ok-close-dialog", "closeOnOk"], cancelLabel: ["cancel-label", "cancelLabel"], cancelShow: ["cancel-show", "cancelShow"], forceLocationBack: ["force-location-back", "forceLocationBack"] }, outputs: { cancel: "cancel", ok: "ok" }, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: SideViewLayoutComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-side-view-layout',
+                        templateUrl: './side-view-layout.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.Location }, { type: i1__namespace$1.Router }]; }, propDecorators: { title: [{
+                    type: i0.Input
+                }], showActions: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], returnPath: [{
+                    type: i0.Input,
+                    args: ['return-path']
+                }], okLabel: [{
+                    type: i0.Input,
+                    args: ['ok-label']
+                }], okShow: [{
+                    type: i0.Input,
+                    args: ['ok-show']
+                }], closeOnOk: [{
+                    type: i0.Input,
+                    args: ['ok-close-dialog']
+                }], cancelLabel: [{
+                    type: i0.Input,
+                    args: ['cancel-label']
+                }], cancelShow: [{
+                    type: i0.Input,
+                    args: ['cancel-show']
+                }], forceLocationBack: [{
+                    type: i0.Input,
+                    args: ['force-location-back']
+                }], cancel: [{
+                    type: i0.Output
+                }], ok: [{
+                    type: i0.Output
+                }] } });
+
+    var FormLayoutComponent = /** @class */ (function () {
+        function FormLayoutComponent(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 i0.EventEmitter();
+            // tslint:disable-next-line:no-output-on-prefix
+            this.onSearch = new i0.EventEmitter();
+            this.onComplete = new i0.EventEmitter();
+        }
+        FormLayoutComponent.prototype.ngOnInit = function () {
+            var _a;
+            if ((_a = this.searchInput$) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+                rxjs.fromEvent(this.searchInput$.nativeElement, 'keyup').pipe(operators.map(function (event) {
+                    return event.target.value; // Get input value.
+                }), operators.filter(function (inputValue) { return inputValue.length >= 3 || inputValue.length === 0; }), 
+                // If character length greater than minimumSearchCharacters setting.
+                operators.debounceTime(1000), // Time in milliseconds between key events.
+                operators.distinctUntilChanged() // If previous query is different from current.
+                ).subscribe();
+            }
+        };
+        FormLayoutComponent.prototype.onSidePaneDeactivated = function ($event) {
+            this.onComplete.emit(true);
+        };
+        FormLayoutComponent.prototype.emitActionClick = function (action) {
+            this.onAction.emit(action);
+        };
+        FormLayoutComponent.prototype.searchActionClick = function (action, text) {
+            this.onSearch.emit(text);
+        };
+        FormLayoutComponent.prototype.searchActionType = function (text) {
+            var _a;
+            this.onSearch.emit((_a = this.searchInput$) === null || _a === void 0 ? void 0 : _a.nativeElement.value);
+        };
+        FormLayoutComponent.prototype.routerLinkActionClick = function (action, relative) {
+            if (relative === void 0) { relative = false; }
+            if (action.outlet) {
+                this.router$.navigate(['', { outlets: { formRightPane: action.link } }]);
+            }
+            else {
+                this.router$.navigate([action.link]);
+            }
+        };
+        return FormLayoutComponent;
+    }());
+    FormLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: FormLayoutComponent, deps: [{ token: i1__namespace$1.Router }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FormLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: FormLayoutComponent, selector: "lib-form-layout", inputs: { title: "title", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], actions: "actions", subTitle: ["sub-title", "subTitle"] }, outputs: { onAction: "onAction", onSearch: "onSearch", onComplete: "onComplete" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0__namespace, 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\"\r\n                    [ngSwitch]=\"action.type\">\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\"\r\n                 class=\"sr-only\">Search</label>\r\n          <div class=\"search-container\">\r\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\r\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\r\n                          </svg>-->\r\n            </div>\r\n            <input id=\"search\"\r\n                   #search\r\n                   class=\"form-search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\">\r\n          </div>\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"btn-form-view-header-search\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"form-content-container\">\r\n    <div [ngClass]=\"{'form-content-container-inner': actions}\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\r\n    <router-outlet name=\"formRightPane\"\r\n                   (activate)=\"formPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"formPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n</div>\r\n", components: [{ type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: FormLayoutComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-form-layout',
+                        templateUrl: './form-layout.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.Router }]; }, propDecorators: { searchInput$: [{
+                    type: i0.ViewChild,
+                    args: ['search']
+                }], title: [{
+                    type: i0.Input
+                }], searchPlaceholder: [{
+                    type: i0.Input,
+                    args: ['search-placeholder']
+                }], actions: [{
+                    type: i0.Input
+                }], subTitle: [{
+                    type: i0.Input,
+                    args: ['sub-title']
+                }], onAction: [{
+                    type: i0.Output
+                }], onSearch: [{
+                    type: i0.Output
+                }], onComplete: [{
+                    type: i0.Output
+                }] } });
+
+    var AuthCallbackComponent = /** @class */ (function () {
+        function AuthCallbackComponent(authService, router) {
+            this.authService = authService;
+            this.router = router;
+            this.status = 'παρακαλώ περιμένετε...';
+        }
+        AuthCallbackComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.authService.signinRedirectCallback().subscribe(function (user) {
+                var _a;
+                if (user) {
+                    _this.router.navigateByUrl(((_a = user.state) === null || _a === void 0 ? void 0 : _a.url) || '/');
+                }
+            });
+        };
+        return AuthCallbackComponent;
+    }());
+    AuthCallbackComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: AuthCallbackComponent, deps: [{ token: i2.AuthService }, { token: i1__namespace$1.Router }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AuthCallbackComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: AuthCallbackComponent, selector: "lib-auth-callback", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: AuthCallbackComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-auth-callback',
+                        templateUrl: './auth-callback.component.html'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i2__namespace.AuthService, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.AuthService]
+                        }] }, { type: i1__namespace$1.Router }];
+        } });
+
+    var AuthRenewComponent = /** @class */ (function () {
+        function AuthRenewComponent(authService, router) {
+            this.authService = authService;
+            this.router = router;
+        }
+        AuthRenewComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.authService.signinSilentCallback().subscribe(function (user) {
+                if (!user) {
+                    _this.router.navigate(['/unauthorized']);
+                }
+            });
+        };
+        return AuthRenewComponent;
+    }());
+    AuthRenewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: AuthRenewComponent, deps: [{ token: i2.AuthService }, { token: i1__namespace$1.Router }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AuthRenewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: AuthRenewComponent, selector: "lib-auth-renew", ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: AuthRenewComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-auth-renew',
+                        template: ''
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i2__namespace.AuthService, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.AuthService]
+                        }] }, { type: i1__namespace$1.Router }];
+        } });
+
+    var LoggedOutComponent = /** @class */ (function () {
+        function LoggedOutComponent(authService) {
+            this.authService = authService;
+            this.status = 'working on it, please give me a sec...';
+            this.finished = false;
+        }
+        LoggedOutComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.authService.removeUser().subscribe(function () {
+                _this.status = 'Thank you!';
+                _this.finished = true;
+            });
+        };
+        return LoggedOutComponent;
+    }());
+    LoggedOutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: LoggedOutComponent, deps: [{ token: i2.AuthService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LoggedOutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: LoggedOutComponent, selector: "lib-logged-out", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: LoggedOutComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // tslint:disable-next-line:component-selector
+                        selector: 'lib-logged-out',
+                        templateUrl: './logged-out.component.html'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i2__namespace.AuthService, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.AuthService]
+                        }] }];
+        } });
+
+    var ErrorComponent = /** @class */ (function () {
+        function ErrorComponent() {
+            this.error = 'Error!';
+        }
+        ErrorComponent.prototype.ngOnInit = function () {
+        };
+        return ErrorComponent;
+    }());
+    ErrorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ErrorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ErrorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ErrorComponent, selector: "lib-error", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ErrorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-error',
+                        templateUrl: './error.component.html'
+                    }]
+            }] });
+
+    var PageNotFoundComponent = /** @class */ (function () {
+        function PageNotFoundComponent() {
+        }
+        PageNotFoundComponent.prototype.ngOnInit = function () {
+        };
+        return PageNotFoundComponent;
+    }());
+    PageNotFoundComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: PageNotFoundComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PageNotFoundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: PageNotFoundComponent, selector: "lib-page-not-found", ngImport: i0__namespace, template: "<lib-view-layout [show-header]=\"false\"\r\n                 title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">404</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5 \u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C0\u03BF\u03C5 \u03B6\u03B7\u03C4\u03AE\u03C3\u03B1\u03C4\u03B5!</p>\r\n      <a href=\"/\"\r\n         class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: PageNotFoundComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-page-not-found',
+                        templateUrl: './page-not-found.component.html'
+                    }]
+            }], ctorParameters: function () { return []; } });
+
+    var UnauthorizedComponent = /** @class */ (function () {
+        function UnauthorizedComponent() {
+        }
+        UnauthorizedComponent.prototype.ngOnInit = function () { };
+        return UnauthorizedComponent;
+    }());
+    UnauthorizedComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: UnauthorizedComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    UnauthorizedComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: UnauthorizedComponent, selector: "lib-unauthorized", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: UnauthorizedComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-unauthorized',
+                        templateUrl: './unauthorized.component.html'
+                    }]
+            }], ctorParameters: function () { return []; } });
+
+    var AddressPipe = /** @class */ (function () {
+        function AddressPipe() {
+        }
+        AddressPipe.prototype.transform = function (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 : '');
+        };
+        return AddressPipe;
+    }());
+    AddressPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: AddressPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    AddressPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: AddressPipe, name: "address", pure: false });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: AddressPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'address',
+                        pure: false
+                    }]
+            }] });
+
+    var DurationFormatPipe = /** @class */ (function () {
+        function DurationFormatPipe() {
+        }
+        DurationFormatPipe.prototype.transform = function (value, arg1, arg2) {
+            var days;
+            var seconds;
+            var minutes;
+            var 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;
+            }
+        };
+        DurationFormatPipe.prototype.format = function (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;
+        };
+        return DurationFormatPipe;
+    }());
+    DurationFormatPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: DurationFormatPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    DurationFormatPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: DurationFormatPipe, name: "durationFormat", pure: false });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: DurationFormatPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'durationFormat',
+                        pure: false
+                    }]
+            }] });
+
+    var BaseListComponent = /** @class */ (function () {
+        function BaseListComponent(route$, router$) {
+            this.route$ = route$;
+            this.router$ = router$;
+            this.items = null;
+            this.view = ListViewType.Tiles;
+            this.title = null;
+            this.actions = [];
+            this.loaderItems = [1, 2, 3, 4, 5];
+            this.page = 1;
+            this.pageSize = 20;
+            this.count = 0;
+            this.sort = '';
+            this.sortdir = '-';
+            this.search = '';
+            this.sortOptions = [];
+            this.metaItems = [];
+        }
+        BaseListComponent.prototype.ngOnDestroy = function () {
+            if (this.routeSub$) {
+                this.routeSub$.unsubscribe();
+            }
+        };
+        BaseListComponent.prototype.getViewActions = function () {
+            var 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 rxjs.of(actions);
+        };
+        BaseListComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.getViewActions().subscribe(function (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(function (params) {
+                if (params.keys.length === 0) {
+                    return;
+                }
+                // changing the view mode does not require reloading...
+                _this.view = params.get('view') || ListViewType.Tiles;
+                // console.log('route changes ', this.view);
+                // if (params.get('search') !== this.search) {
+                //   this.searchChanged(params.get('search'));
+                // }
+                // const page = +(params.get('page') || 1);
+                // if (page !== this.page) {
+                //   this.page = page;
+                // }
+                // const size = +(params.get('pagesize') || 20);
+                // if (this.pageSize !== size) {
+                //   this.pageSize = size;
+                // }
+                // if (params.get('search') !== this.search) {
+                //   this.search = params.get('search');
+                // }
+                // if (params.get('sort') !== this.sort) {
+                //   this.sort = params.get('sort');
+                // }
+                // if (params.get('sortdir') !== this.sortdir) {
+                //   this.sortdir = params.get('sortdir');
+                // }
+            });
+            // just to sync params in query
+            this.setRouteParams(true);
+            this.load();
+        };
+        BaseListComponent.prototype.setRouteParams = function (locationChange) {
+            if (locationChange === void 0) { locationChange = false; }
+            this.router$.navigate([], {
+                relativeTo: this.route$, queryParams: {
+                    view: this.view,
+                    page: this.page,
+                    pagesize: this.pageSize,
+                    search: this.search,
+                    sort: this.sort,
+                    dir: this.sortdir
+                }, queryParamsHandling: 'merge', skipLocationChange: locationChange
+            });
+        };
+        BaseListComponent.prototype.actionHandler = function ($event) {
+            // console.log('BaseListComponent actionHandler', $event);
+            if ($event.key === 'refresh') {
+                this.refresh();
+            }
+        };
+        BaseListComponent.prototype.load = function () {
+            var _this = this;
+            // console.log('BaseListComponent LOAD');
+            this.count = 0;
+            this.items = null;
+            this.loadItems().subscribe(function (result) {
+                _this.count = result ? result.count : 0;
+                _this.items = result === null || result === void 0 ? void 0 : result.items;
+                _this.updateHeaderMeta();
+            }, function (err) {
+                _this.count = 0;
+                _this.items = null;
+                _this.updateHeaderMeta();
+            });
+        };
+        BaseListComponent.prototype.updateHeaderMeta = function () {
+            var _a;
+            var count = (_a = this.metaItems) === null || _a === void 0 ? void 0 : _a.filter(function (m) { return m.key === 'count'; })[0];
+            if (count) {
+                this.count === 1 ? count.text = this.count + " \u03B1\u03C0\u03BF\u03C4\u03AD\u03BB\u03B5\u03C3\u03BC\u03B1" : count.text = this.count + " \u03B1\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1";
+            }
+        };
+        BaseListComponent.prototype.clear = function () {
+            this.count = 0;
+            this.page = 1;
+            this.items = null;
+            this.search = null;
+            this.setRouteParams();
+            this.load();
+        };
+        BaseListComponent.prototype.refresh = function () {
+            this.count = 0;
+            this.page = 1;
+            this.items = null;
+            this.setRouteParams();
+            this.load();
+        };
+        BaseListComponent.prototype.pageChanged = function (page) {
+            if (this.page !== page) {
+                this.page = page;
+                this.setRouteParams();
+                this.load();
+            }
+        };
+        BaseListComponent.prototype.pageSizeChanged = function (pageSize) {
+            if (this.pageSize !== pageSize) {
+                this.pageSize = pageSize;
+                this.page = 1;
+                this.setRouteParams();
+                this.refresh();
+            }
+        };
+        BaseListComponent.prototype.sortChanged = function (sort) {
+            // console.log('base-list sortChanged', sort);
+            if (this.sort !== sort) {
+                this.page = 1;
+                this.sort = sort;
+                this.setRouteParams();
+                this.refresh();
+            }
+        };
+        BaseListComponent.prototype.sortdirChanged = function (sortdir) {
+            if (this.sortdir !== sortdir) {
+                this.page = 1;
+                this.sortdir = sortdir;
+                this.setRouteParams();
+                this.refresh();
+            }
+        };
+        BaseListComponent.prototype.searchChanged = function (searchText) {
+            this.count = 0;
+            this.page = 1;
+            this.items = null;
+            this.search = searchText;
+            this.setRouteParams();
+            this.load();
+        };
+        return BaseListComponent;
+    }());
+    BaseListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: BaseListComponent, deps: [{ token: i1__namespace$1.ActivatedRoute }, { token: i1__namespace$1.Router }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BaseListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: BaseListComponent, selector: "ng-component", ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: BaseListComponent, decorators: [{
+                type: i0.Component,
+                args: [{ template: '' }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.ActivatedRoute }, { type: i1__namespace$1.Router }]; } });
+
+    var cssClassNames = {
+        backdrop: 'modal-backdrop',
+        show: 'show',
+        fade: 'fade',
+        modalOpen: 'modal-open'
+    };
+    var animationTime = {
+        backdrop: 150,
+        modal: 300,
+    };
+
+    /**
+     * Background layer for modals.
+     * Override class name to theme it.
+     * @see {@link cssClassNames}
+     * @internal
+     */
+    var ModalBackdropComponent = /** @class */ (function () {
+        function ModalBackdropComponent(element, renderer) {
+            this.element = element;
+            this.renderer = renderer;
+            this.animationsEnabled = false;
+        }
+        ModalBackdropComponent.prototype.ngOnInit = function () {
+            if (this.animationsEnabled) {
+                this.renderer.addClass(this.element.nativeElement, cssClassNames.fade);
+                this.reflow(this.element.nativeElement);
+            }
+            this.renderer.addClass(this.element.nativeElement, cssClassNames.show);
+        };
+        ModalBackdropComponent.prototype.hide = function () {
+            var _this = this;
+            this.renderer.removeClass(this.element.nativeElement, cssClassNames.show);
+            setTimeout(function () { var _a; return (_a = _this.backdropLoader) === null || _a === void 0 ? void 0 : _a.hide(); }, this.animationsEnabled ? animationTime.backdrop : 0);
+        };
+        ModalBackdropComponent.prototype.reflow = function (element) {
+            (function (bs) { return bs; })(element.offsetHeight);
+        };
+        return ModalBackdropComponent;
+    }());
+    ModalBackdropComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ModalBackdropComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ModalBackdropComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ModalBackdropComponent, selector: "lib-modal-backdrop", host: { classAttribute: "modal-backdrop" }, ngImport: i0__namespace, template: '', isInline: true, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ModalBackdropComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-modal-backdrop',
+                        encapsulation: i0.ViewEncapsulation.None,
+                        template: '',
+                        host: {
+                            class: cssClassNames.backdrop,
+                        },
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.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
+     */
+    var ModalOptions = /** @class */ (function () {
+        function ModalOptions() {
+        }
+        return ModalOptions;
+    }());
+    ModalOptions.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ModalOptions, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ModalOptions.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ModalOptions });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ModalOptions, decorators: [{
+                type: i0.Injectable
+            }] });
+    /**
+     * Default option values.
+     */
+    var modalConfigDefaults = {
+        backdrop: true,
+        keyboard: true,
+        show: false,
+        ignoreBackdropClick: false,
+        class: '',
+        animated: true,
+        initialState: {},
+        closeInterceptor: void 0,
+    };
+    /**
+     * Use this injection token to set global options.
+     */
+    var MODAL_CONFIG_DEFAULT_OVERRIDE = new i0.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
+     */
+    var ModalContainerComponent = /** @class */ (function () {
+        function ModalContainerComponent(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);
+        }
+        ModalContainerComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this.animationsEnabled) {
+                this.renderer.addClass(this._element.nativeElement, cssClassNames.fade);
+            }
+            this.renderer.setStyle(this._element.nativeElement, 'display', 'block');
+            setTimeout(function () {
+                _this.isShown = true;
+                _this.renderer.addClass(_this._element.nativeElement, cssClassNames.show);
+            }, this.animationsEnabled ? animationTime.backdrop : 0);
+            if (this._element.nativeElement) {
+                this._element.nativeElement.focus();
+            }
+        };
+        ModalContainerComponent.prototype.onClickStarted = function (event) {
+            this.clickStartedInContent = event.target !== this._element.nativeElement;
+        };
+        ModalContainerComponent.prototype.onClickStop = function (event) {
+            var clickedInBackdrop = event.target === this._element.nativeElement && !this.clickStartedInContent;
+            if (this.config.ignoreBackdropClick || this.config.backdrop === 'static' || !clickedInBackdrop) {
+                this.clickStartedInContent = false;
+                return;
+            }
+            this.hide();
+        };
+        ModalContainerComponent.prototype.onPopState = function () {
+            this.hide();
+        };
+        ModalContainerComponent.prototype.onEsc = function (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();
+            }
+        };
+        ModalContainerComponent.prototype.ngOnDestroy = function () {
+            if (this.isShown) {
+                this._hide();
+            }
+        };
+        ModalContainerComponent.prototype.hide = function (result) {
+            var _this = this;
+            if (this.isModalHiding || !this.isShown) {
+                return;
+            }
+            if (this.config.closeInterceptor) {
+                this.config.closeInterceptor().then(function () { return _this._hide(); }, function () { return undefined; });
+                return;
+            }
+            this._hide(result);
+        };
+        ModalContainerComponent.prototype._hide = function (result) {
+            var _this = this;
+            this.isModalHiding = true;
+            this.renderer.removeClass(this._element.nativeElement, cssClassNames.show);
+            setTimeout(function () {
+                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);
+        };
+        return ModalContainerComponent;
+    }());
+    ModalContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ModalContainerComponent, deps: [{ token: ModalOptions }, { token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ModalContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ModalContainerComponent, selector: "lib-modal-container", host: { attributes: { "role": "dialog", "tabindex": "-1" }, listeners: { "mousedown": "onClickStarted($event)", "click": "onClickStop($event)", "window:popstate": "onPopState()", "window:keydown.esc": "onEsc($event)" }, properties: { "attr.aria-modal": "true", "attr.aria-labelledby": "config.ariaLabelledBy", "attr.aria-describedby": "config.ariaDescribedby" }, classAttribute: "modal" }, ngImport: i0__namespace, template: "\n    <div [class]=\"'modal-dialog' + (config.class ? ' ' + config.class : '')\" role=\"document\" focusTrap>\n      <div class=\"modal-content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ModalContainerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-modal-container',
+                        template: "\n    <div [class]=\"'modal-dialog' + (config.class ? ' ' + config.class : '')\" role=\"document\" focusTrap>\n      <div class=\"modal-content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
+                        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__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { onClickStarted: [{
+                    type: i0.HostListener,
+                    args: ['mousedown', ['$event']]
+                }], onClickStop: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }], onPopState: [{
+                    type: i0.HostListener,
+                    args: ['window:popstate']
+                }], onEsc: [{
+                    type: i0.HostListener,
+                    args: ['window:keydown.esc', ['$event']]
+                }] } });
+
+    /**
+     * Modal class.
+     * @remarks
+     * This is returned from {@link ModalService.show}.
+     * @public
+     */
+    var Modal = /** @class */ (function () {
+        function Modal() {
+            /**
+             * Hides the modal
+             * @param result - A result to the observers.
+             */
+            this.hide = function () { return void 0; };
+            /**
+             * Sets new class to modal window.
+             */
+            this.setClass = function () { return void 0; };
+        }
+        return Modal;
+    }());
+    Modal.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: Modal, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    Modal.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: Modal });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: Modal, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    /**
+     * A service for using modals.
+     *
+     * @public
+     */
+    var ModalService = /** @class */ (function () {
+        function ModalService(clf, rendererFactory, document, modalDefaultOption) {
+            this.clf = clf;
+            this.document = document;
+            this.onBeforeShow = new rxjs.Subject();
+            this.onShown = new rxjs.Subject();
+            this.onBeforeHide = new rxjs.Subject();
+            this.onHidden = new rxjs.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);
+        }
+        ModalService.prototype.ngOnDestroy = function () {
+            this.loaders.forEach(function (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}
+         */
+        ModalService.prototype.show = function (content, config) {
+            this.modalsCount++;
+            var 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.
+         */
+        ModalService.prototype.hide = function (id, result) {
+            var _this = this;
+            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(function () {
+                _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);
+        };
+        ModalService.prototype.getActiveModal = function () {
+            return this.loaders[this.modalsCount - 1].instance;
+        };
+        ModalService.prototype.showModal = function (content, combinedConfig) {
+            var _a;
+            var modalLoader = this.loaders[this.loaders.length - 1];
+            if (combinedConfig && combinedConfig.providers) {
+                combinedConfig.providers.forEach(function (provider) { return modalLoader.provide(provider); });
+            }
+            var modal = new Modal();
+            var modalContainerRef = modalLoader
+                .provide({ provide: ModalOptions, useValue: combinedConfig })
+                .provide({ provide: Modal, useValue: modal })
+                .attach(ModalContainerComponent)
+                .to('body');
+            modal.setClass = function (newClass) {
+                if (modalContainerRef.instance) {
+                    modalContainerRef.instance.config.class = newClass;
+                }
+            };
+            modal.onBeforeHide = new rxjs.Subject();
+            modal.onHidden = new rxjs.Subject();
+            this.copyEvent(modalLoader.onBeforeHide, modal.onBeforeHide);
+            this.copyEvent(modalLoader.onHidden, modal.onHidden);
+            modalContainerRef.show({
+                content: 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 = function (res) { var _a; return (_a = modalContainerRef.instance) === null || _a === void 0 ? void 0 : _a.hide(res); };
+            }
+            return modal;
+        };
+        ModalService.prototype.hideModal = function (id, result) {
+            if (id != null) {
+                var indexToRemove = this.loaders.findIndex(function (loader) { var _a; return ((_a = loader.instance) === null || _a === void 0 ? void 0 : _a.config.id) === id; });
+                var modalLoader = this.loaders[indexToRemove];
+                if (modalLoader) {
+                    modalLoader.hide(id, result);
+                }
+            }
+            else {
+                this.loaders.forEach(function (loader) {
+                    if (loader.instance) {
+                        loader.hide(loader.instance.config.id);
+                    }
+                });
+            }
+        };
+        ModalService.prototype.showBackdrop = function (combinedConfig) {
+            var isBackdropEnabled = combinedConfig.backdrop === true || combinedConfig.backdrop === 'static';
+            var 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;
+            }
+        };
+        ModalService.prototype.hideBackdrop = function () {
+            if (!this.backdropRef) {
+                return;
+            }
+            this.backdropRef.instance.hide();
+            this.backdropRef = void 0;
+        };
+        ModalService.prototype.removeLoaders = function (id) {
+            if (id != null) {
+                var indexToRemove = this.loaders.findIndex(function (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(function (loader, i) {
+                        if (loader.instance) {
+                            loader.instance.level = i + 1;
+                        }
+                    });
+                }
+            }
+            else {
+                this.loaders.splice(0, this.loaders.length);
+            }
+        };
+        ModalService.prototype.addBodyPadding = function () {
+            if (this.modalsCount === 1) {
+                var width = this.getScrollbarWidth();
+                if (this.isScrollBarPresent(width)) {
+                    this.initialPadding = this.document.body.style.paddingRight;
+                    var actualPadding = parseFloat(window.getComputedStyle(this.document.body).paddingRight);
+                    this.document.body.style.paddingRight = actualPadding + width + "px";
+                }
+            }
+        };
+        ModalService.prototype.revertScrollbar = function () {
+            this.document.body.style.paddingRight = this.initialPadding;
+        };
+        ModalService.prototype.getScrollbarWidth = function () {
+            var measurer = this.document.createElement('div');
+            measurer.className = 'modal-scrollbar-measure';
+            var body = this.document.body;
+            body.appendChild(measurer);
+            var width = measurer.getBoundingClientRect().width - measurer.clientWidth;
+            body.removeChild(measurer);
+            return width;
+        };
+        ModalService.prototype.isScrollBarPresent = function (scrollbarWidth) {
+            var rect = this.document.body.getBoundingClientRect();
+            var bodyToViewportGap = window.innerWidth - (rect.left + rect.right);
+            var uncertainty = 0.1 * scrollbarWidth;
+            return bodyToViewportGap >= scrollbarWidth - uncertainty;
+        };
+        ModalService.prototype.createLoaders = function () {
+            var 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);
+        };
+        ModalService.prototype.copyEvent = function (from, to) {
+            from.subscribe(function (data) {
+                to.next(data);
+            });
+        };
+        return ModalService;
+    }());
+    ModalService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ModalService, deps: [{ token: ComponentLoaderFactory }, { token: i0__namespace.RendererFactory2 }, { token: i1.DOCUMENT }, { token: MODAL_CONFIG_DEFAULT_OVERRIDE, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ModalService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ModalService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ModalService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () {
+            return [{ type: ComponentLoaderFactory }, { type: i0__namespace.RendererFactory2 }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.DOCUMENT]
+                        }] }, { type: ModalOptions, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Inject,
+                            args: [MODAL_CONFIG_DEFAULT_OVERRIDE]
+                        }] }];
+        } });
+
+    var IndiceComponentsModule = /** @class */ (function () {
+        function IndiceComponentsModule() {
+        }
+        // tslint:disable-next-line:typedef
+        IndiceComponentsModule.forRoot = function () {
+            return {
+                ngModule: IndiceComponentsModule,
+                providers: [ToasterService]
+            };
+        };
+        return IndiceComponentsModule;
+    }());
+    IndiceComponentsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: IndiceComponentsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    IndiceComponentsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: IndiceComponentsModule, declarations: [
+            // diectives
+            ClickOutsideDirective,
+            DynamicComponentHostDirective,
+            // controls
+            DropDownMenuComponent,
+            PagerComponent,
+            ListViewComponent,
+            ListColumnComponent,
+            ListTileComponent,
+            ListDetailsSectionComponent,
+            ListViewEmptyStateComponent,
+            SkeletonLoaderComponent,
+            CollapsiblePanelComponent,
+            KpiTileComponent,
+            SidePaneComponent,
+            DatepickerComponent,
+            AvatarInitialsComponent,
+            ToggleComponent,
+            // Toaster
+            ToasterContainerComponent,
+            ToasterComponent,
+            // shell layout
+            ShellLayoutComponent,
+            ShellHeaderComponent,
+            ShellFooterComponent,
+            // view layouts
+            ViewLayoutComponent,
+            SideViewLayoutComponent,
+            ModelViewLayoutComponent,
+            FormLayoutComponent,
+            // pages (common)
+            AuthCallbackComponent,
+            AuthRenewComponent,
+            LoggedOutComponent,
+            ErrorComponent,
+            PageNotFoundComponent,
+            UnauthorizedComponent,
+            // pipes
+            AddressPipe,
+            DurationFormatPipe
+        ], imports: [i1.CommonModule,
+            i1$1.RouterModule,
+            i2.IndiceAuthModule], exports: [ClickOutsideDirective,
+            DropDownMenuComponent,
+            PagerComponent,
+            ListViewComponent,
+            ListColumnComponent,
+            ListTileComponent,
+            ListDetailsSectionComponent,
+            ListViewEmptyStateComponent,
+            KpiTileComponent,
+            SkeletonLoaderComponent,
+            ShellLayoutComponent,
+            ShellHeaderComponent,
+            ShellFooterComponent,
+            ViewLayoutComponent,
+            SideViewLayoutComponent,
+            ModelViewLayoutComponent,
+            FormLayoutComponent,
+            AuthCallbackComponent,
+            AuthRenewComponent,
+            LoggedOutComponent,
+            ErrorComponent,
+            PageNotFoundComponent,
+            UnauthorizedComponent,
+            AddressPipe,
+            DurationFormatPipe,
+            CollapsiblePanelComponent,
+            SidePaneComponent,
+            DatepickerComponent,
+            ToasterContainerComponent,
+            ToasterComponent,
+            AvatarInitialsComponent,
+            ToggleComponent] });
+    IndiceComponentsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: IndiceComponentsModule, imports: [[
+                i1.CommonModule,
+                i1$1.RouterModule,
+                i2.IndiceAuthModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: IndiceComponentsModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            // diectives
+                            ClickOutsideDirective,
+                            DynamicComponentHostDirective,
+                            // controls
+                            DropDownMenuComponent,
+                            PagerComponent,
+                            ListViewComponent,
+                            ListColumnComponent,
+                            ListTileComponent,
+                            ListDetailsSectionComponent,
+                            ListViewEmptyStateComponent,
+                            SkeletonLoaderComponent,
+                            CollapsiblePanelComponent,
+                            KpiTileComponent,
+                            SidePaneComponent,
+                            DatepickerComponent,
+                            AvatarInitialsComponent,
+                            ToggleComponent,
+                            // Toaster
+                            ToasterContainerComponent,
+                            ToasterComponent,
+                            // shell layout
+                            ShellLayoutComponent,
+                            ShellHeaderComponent,
+                            ShellFooterComponent,
+                            // view layouts
+                            ViewLayoutComponent,
+                            SideViewLayoutComponent,
+                            ModelViewLayoutComponent,
+                            FormLayoutComponent,
+                            // pages (common)
+                            AuthCallbackComponent,
+                            AuthRenewComponent,
+                            LoggedOutComponent,
+                            ErrorComponent,
+                            PageNotFoundComponent,
+                            UnauthorizedComponent,
+                            // pipes
+                            AddressPipe,
+                            DurationFormatPipe
+                        ],
+                        imports: [
+                            i1.CommonModule,
+                            i1$1.RouterModule,
+                            i2.IndiceAuthModule
+                        ],
+                        exports: [
+                            ClickOutsideDirective,
+                            DropDownMenuComponent,
+                            PagerComponent,
+                            ListViewComponent,
+                            ListColumnComponent,
+                            ListTileComponent,
+                            ListDetailsSectionComponent,
+                            ListViewEmptyStateComponent,
+                            KpiTileComponent,
+                            SkeletonLoaderComponent,
+                            ShellLayoutComponent,
+                            ShellHeaderComponent,
+                            ShellFooterComponent,
+                            ViewLayoutComponent,
+                            SideViewLayoutComponent,
+                            ModelViewLayoutComponent,
+                            FormLayoutComponent,
+                            AuthCallbackComponent,
+                            AuthRenewComponent,
+                            LoggedOutComponent,
+                            ErrorComponent,
+                            PageNotFoundComponent,
+                            UnauthorizedComponent,
+                            AddressPipe,
+                            DurationFormatPipe,
+                            CollapsiblePanelComponent,
+                            SidePaneComponent,
+                            DatepickerComponent,
+                            ToasterContainerComponent,
+                            ToasterComponent,
+                            AvatarInitialsComponent,
+                            ToggleComponent
+                        ]
+                    }]
+            }] });
+
+    // Public API Surface of @indice/ng-components
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.APP_LINKS = APP_LINKS;
+    exports.AddressPipe = AddressPipe;
+    exports.AuthCallbackComponent = AuthCallbackComponent;
+    exports.AuthRenewComponent = AuthRenewComponent;
+    exports.AvatarInitialsComponent = AvatarInitialsComponent;
+    exports.BaseListComponent = BaseListComponent;
+    exports.ClickOutsideDirective = ClickOutsideDirective;
+    exports.CollapsiblePanelComponent = CollapsiblePanelComponent;
+    exports.ComponentLoaderFactory = ComponentLoaderFactory;
+    exports.DatepickerComponent = DatepickerComponent;
+    exports.DefaultShellConfig = DefaultShellConfig;
+    exports.DropDownMenuComponent = DropDownMenuComponent;
+    exports.DurationFormatPipe = DurationFormatPipe;
+    exports.ErrorComponent = ErrorComponent;
+    exports.ExternalNavLink = ExternalNavLink;
+    exports.FormLayoutComponent = FormLayoutComponent;
+    exports.FragmentNavLink = FragmentNavLink;
+    exports.HeaderMetaItem = HeaderMetaItem;
+    exports.Icons = Icons;
+    exports.IndiceComponentsModule = IndiceComponentsModule;
+    exports.KpiTileComponent = KpiTileComponent;
+    exports.ListColumnComponent = ListColumnComponent;
+    exports.ListDetailsSectionComponent = ListDetailsSectionComponent;
+    exports.ListTileComponent = ListTileComponent;
+    exports.ListViewComponent = ListViewComponent;
+    exports.ListViewEmptyStateComponent = ListViewEmptyStateComponent;
+    exports.ListViewType = ListViewType;
+    exports.LoggedOutComponent = LoggedOutComponent;
+    exports.MODAL_CONFIG_DEFAULT_OVERRIDE = MODAL_CONFIG_DEFAULT_OVERRIDE;
+    exports.MenuOption = MenuOption;
+    exports.Modal = Modal;
+    exports.ModalOptions = ModalOptions;
+    exports.ModalService = ModalService;
+    exports.ModelViewLayoutComponent = ModelViewLayoutComponent;
+    exports.NULL_TOAST = NULL_TOAST;
+    exports.NavLink = NavLink;
+    exports.PageNotFoundComponent = PageNotFoundComponent;
+    exports.PagerComponent = PagerComponent;
+    exports.RouterViewAction = RouterViewAction;
+    exports.SHELL_CONFIG = SHELL_CONFIG;
+    exports.ShellFooterComponent = ShellFooterComponent;
+    exports.ShellHeaderComponent = ShellHeaderComponent;
+    exports.ShellLayoutComponent = ShellLayoutComponent;
+    exports.SidePaneComponent = SidePaneComponent;
+    exports.SideViewLayoutComponent = SideViewLayoutComponent;
+    exports.SkeletonLoaderComponent = SkeletonLoaderComponent;
+    exports.SwitchViewAction = SwitchViewAction;
+    exports.ToasterComponent = ToasterComponent;
+    exports.ToasterContainerComponent = ToasterContainerComponent;
+    exports.ToasterService = ToasterService;
+    exports.ToggleComponent = ToggleComponent;
+    exports.UnauthorizedComponent = UnauthorizedComponent;
+    exports.ViewAction = ViewAction;
+    exports.ViewLayoutComponent = ViewLayoutComponent;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=indice-ng-components.umd.js.map