@indice/ng-components 0.2.160-beta.0 → 0.2.160-beta.11

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

@@ -2,7 +2,7 @@
     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('uuid'), 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', 'uuid', '@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.uuid, global.i2));
-})(this, (function (exports, i0, i1, i1$1, forms, rxjs, operators, uuid, i2) { 'use strict';
+})(this, (function (exports, i0, i1, i1$1, i4, rxjs, operators, uuid, i2) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -25,6 +25,7 @@
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var uuid__namespace = /*#__PURE__*/_interopNamespace(uuid);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
 
@@ -1010,317 +1011,97 @@
                     args: [i0.TemplateRef]
                 }] } });
 
-    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.2.16", ngImport: i0__namespace, type: SkeletonLoaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkeletonLoaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.2.16", 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 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.2.16", ngImport: i0__namespace, type: ListViewEmptyStateComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ListViewEmptyStateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0__namespace, template: "<div class=\"p-20\">\r\n  <div class=\"text-center p-2\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\r\n    </svg>\r\n    <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\r\n    <p class=\"mt-1 text-sm text-gray-500\">\r\n      {{subTitle}}\r\n    </p>\r\n    <div class=\"mt-6\" *ngIf=\"false\">\r\n      <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\r\n        <!-- Heroicon name: solid/plus -->\r\n        <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\r\n        </svg>\r\n        {{newItemLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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 ListViewComponent = /** @class */ (function () {
-        function ListViewComponent() {
-            // BUSY STATE
-            this.busy = false;
-            // PAGING - pass through for pager component
-            this.count = null;
-            this.page = 1;
-            this.view = ListViewType.Table;
-            this.sort = null;
-            // tslint:disable-next-line:no-input-rename
-            this.pageSize = 20;
-            // tslint:disable-next-line:no-input-rename
-            this.pageSizeOptions = [];
-            // SORTING - pass through for pager component
-            // tslint:disable-next-line:no-input-rename
-            this.sortOptions = [];
-            // tslint:disable-next-line:no-input-rename
-            this.sortdir = '-';
-            // tslint:disable-next-line:no-input-rename
-            this.tilesCount = 4;
-            // tslint:disable-next-line:no-input-rename
-            this.showPager = true;
-            // tslint:disable-next-line:no-input-rename
-            this.pagerPosition = exports.PagerPosition.Top;
-            // DETAILS SECTION
-            // Check if details section and button should be displayed according to the count of the value given
-            // tslint:disable-next-line:no-input-rename
-            this.detailsSectionPropertyCount = null;
-            this.pageChanged = new i0.EventEmitter();
-            this.pageSizeChanged = new i0.EventEmitter();
-            this.detailsOpened = new i0.EventEmitter();
-            this.sortChanged = new i0.EventEmitter();
-            this.sortdirChanged = new i0.EventEmitter();
-            this.multipleFullWidth = false;
-            this.expandIcon = Icons.Expand;
-            this.collapseIcon = Icons.Collapse;
-            this.tableViewSupported = false;
-            this.fullWidthTHClass = 'list-view-th-full';
-            this.fullWidthTDClass = 'list-view-td-full';
-            this.tilesViewSupported = false;
-            this.detailsSectionSupported = false;
-            this.loaderItems = [];
-            this.columns = [];
-            this.tilesDeckClass = 'cards-deck-4';
-            this.tileTemplate = null;
-            this.detailsTemplate = null;
-            for (var i = 0; i < 5; i++) {
-                this.loaderItems.push({});
-            }
-            if (this.pagerPosition) {
-                this.pagerPosition = this.pagerPosition;
+    var Operators;
+    (function (Operators) {
+        Operators.EQUALS = { label: '=', value: 'eq', description: 'Ίσο με' };
+        Operators.NOT_EQUALS = { label: '≠', value: 'neq', description: 'Διάφορο του' };
+        Operators.GREATER_THAN = { label: '>', value: 'gt', description: 'Μεγαλύτερο από' };
+        Operators.LESS_THAN = { label: '<', value: 'lt', description: 'Μικρότερο από' };
+        Operators.GREATER_THAN_EQUAL = { label: '≥', value: 'gte', description: 'Μεγαλύτερο ή ίσο με' };
+        Operators.LESS_THAN_EQUAL = { label: '≤', value: 'lte', description: 'Μικρότερο ή ίσο με' };
+        Operators.CONTAINS = { label: '∋', value: 'contains', description: 'Περιέχει' };
+        Operators.IN = { label: '1..n', value: 'in', description: 'Μέσα σε' };
+    })(Operators || (Operators = {}));
+    var QueryParameters;
+    (function (QueryParameters) {
+        QueryParameters["VIEW"] = "view";
+        QueryParameters["PAGE_SIZE"] = "pagesize";
+        QueryParameters["PAGE"] = "page";
+        QueryParameters["SEARCH"] = "search";
+        QueryParameters["SORT_FIELD"] = "sort";
+        QueryParameters["SORT_DIRECTION"] = "dir";
+        QueryParameters["FILTER"] = "filter";
+        QueryParameters["FILTER_FROM"] = "from";
+        QueryParameters["FILTER_TO"] = "to";
+    })(QueryParameters || (QueryParameters = {}));
+    var FilterClause = /** @class */ (function () {
+        function FilterClause(member, value, operator, dataType, searchOptions) {
+            var _this = this;
+            var _a;
+            this.member = member;
+            this.value = value;
+            this.operator = operator || Operators.EQUALS.value;
+            this.dataType = dataType === undefined ? 'string' : dataType;
+            // uiName
+            if (this.dataType === 'datetime') { // special treatment for dates
+                this.uiName = this.member === QueryParameters.FILTER_FROM ? 'Από' : 'Έως';
             }
-        }
-        Object.defineProperty(ListViewComponent.prototype, "cols", {
-            // COLUMNS
-            set: function (refs) {
-                this.columns = refs === null || refs === void 0 ? void 0 : refs.toArray();
-                if (this.columns && this.columns.length > 0) {
-                    this.tableViewSupported = true;
+            else {
+                this.uiName = this.member;
+                var fo_1 = {};
+                if (searchOptions && searchOptions.length > 0) {
+                    fo_1 = searchOptions.find(function (f) {
+                        return f.field === _this.member;
+                    });
                 }
-                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", {
-            // tslint:disable-next-line:no-input-rename
-            set: function (ref) {
-                this.tileTemplate = ref;
-                if (this.tileTemplate) {
-                    this.tilesViewSupported = true;
+                if (fo_1) {
+                    this.uiName = fo_1.name;
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ListViewComponent.prototype, "details", {
-            set: function (ref) {
-                this.detailsTemplate = ref;
-                if (this.detailsTemplate) {
-                    this.detailsSectionSupported = true;
+            }
+            // uiOperator
+            this.uiOperator = this.dataType === 'datetime' ? '' : Operators.EQUALS.label; // that's fine (for now)...
+            // uiValue
+            this.uiValue = this.value;
+            if ((this.dataType === 'datetime')) {
+                this.uiValue = i1.formatDate(new Date(this.value), 'dd/MM/yyyy', 'en-US');
+            }
+            var fo;
+            if (searchOptions && searchOptions.length > 0) {
+                fo = searchOptions.find(function (f) {
+                    return f.field === _this.member;
+                });
+            }
+            if (fo && fo.options) { // special treatment for arrays, if there is an options property then it is an array
+                this.dataType = 'array';
+                this.uiValue = (_a = fo.options.find(function (option) {
+                    return option.value === _this.value;
+                })) === null || _a === void 0 ? void 0 : _a.label;
+            }
+        }
+        FilterClause.parse = function (text) {
+            var pattern = /^\s*([A-Za-z_][A-Za-z0-9_\.]+)::(eq|neq|gt|lt|gte|lte|contains|in)::(\((string|integer|number|boolean|datetime)\))?(.+)\s*$/gi;
+            if (text != null) {
+                var matches = pattern.exec(text);
+                if (matches != null) {
+                    var path = matches[1];
+                    var op = matches[2];
+                    var dt = matches[4];
+                    var v = matches[5];
+                    return new FilterClause(path, v, op, dt);
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ListViewComponent.prototype.ngOnChanges = function (changes) {
-            var tilesCountChange = changes['tiles-count'] || changes.tilesCount;
-            if (tilesCountChange) {
-                this.setTilesDeckClass(tilesCountChange.currentValue);
             }
+            return undefined;
         };
-        // 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';
+        FilterClause.prototype.toString = function () {
+            if (this.dataType !== 'string' && this.dataType !== 'array') {
+                return this.member + "::" + this.operator + "::(" + this.dataType + ")" + this.value;
             }
             else {
-                this.tilesDeckClass =
-                    this.view !== ListViewType.Gallery
-                        ? 'cards-deck-3'
-                        : this.items && this.items.length > 0
-                            ? 'gallery-deck-3'
-                            : 'gallery-deck';
+                return this.member + "::" + this.operator + "::" + this.value;
             }
         };
-        return ListViewComponent;
-    }());
-    ListViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListViewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ListViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListViewComponent, selector: "lib-list-view", inputs: { busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged" }, 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 && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\" [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                    <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n    <div class=\"cards-deck-1\">\r\n      <lib-list-view-empty-state></lib-list-view-empty-state>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"pt-2 px-2\">\r\n\r\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>\r\n", components: [{ type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }, { type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }], directives: [{ type: i1__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.2.16", 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
-                }], count: [{
-                    type: i0.Input
-                }], page: [{
-                    type: i0.Input
-                }], view: [{
-                    type: i0.Input
-                }], sort: [{
-                    type: i0.Input
-                }], pageSize: [{
-                    type: i0.Input,
-                    args: ['page-size']
-                }], pageSizeOptions: [{
-                    type: i0.Input,
-                    args: ['page-size-options']
-                }], sortOptions: [{
-                    type: i0.Input,
-                    args: ['sort-options']
-                }], sortdir: [{
-                    type: i0.Input,
-                    args: ['sort-dir']
-                }], tilesCount: [{
-                    type: i0.Input,
-                    args: ['tiles-count']
-                }], showPager: [{
-                    type: i0.Input,
-                    args: ['show-pager']
-                }], pagerPosition: [{
-                    type: i0.Input,
-                    args: ['pager-position']
-                }], detailsSectionPropertyCount: [{
-                    type: i0.Input,
-                    args: ['details-section-property-count']
-                }], cols: [{
-                    type: i0.ContentChildren,
-                    args: [ListColumnComponent, { read: ListColumnComponent }]
-                }], tiles: [{
-                    type: i0.ContentChild,
-                    args: [ListTileComponent, { read: ListTileComponent }]
-                }], details: [{
-                    type: i0.ContentChild,
-                    args: [ListDetailsSectionComponent, { read: ListDetailsSectionComponent }]
-                }], pageChanged: [{
-                    type: i0.Output
-                }], pageSizeChanged: [{
-                    type: i0.Output
-                }], detailsOpened: [{
-                    type: i0.Output
-                }], sortChanged: [{
-                    type: i0.Output
-                }], sortdirChanged: [{
-                    type: i0.Output
-                }] } });
-
-    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.2.16", ngImport: i0__namespace, type: CollapsiblePanelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CollapsiblePanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.2.16", 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.2.16", ngImport: i0__namespace, type: KpiTileComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    KpiTileComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.2.16", 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']
-                }] } });
+        return FilterClause;
+    }());
 
     // freaksly simple date picker : https://tailwind-elements.com/docs/standard/forms/datepicker/
     var DatepickerComponent = /** @class */ (function () {
@@ -1471,154 +1252,591 @@
                 this.onTouched$();
             }
         };
-        DatepickerComponent.prototype.compareDates = function (date1, day, year) {
-            var _a;
-            if (!date1) {
-                return false;
+        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) !== '' && !this.inline) {
+                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();
+        };
+        DatepickerComponent.prototype.outOfRangeDate = function (date) {
+            var outOfRange = false;
+            if (this.minDate || this.maxDate) {
+                var d = new Date(this.year, this.month, date.day);
+                var dateInMillis = d.getTime();
+                if (this.minDate) {
+                    var minDate = this.minDate.getTime();
+                    if (dateInMillis < minDate && this.minDate.toDateString() !== d.toDateString()) {
+                        outOfRange = true;
+                    }
+                }
+                if (this.maxDate) {
+                    var maxDate = this.maxDate.getTime();
+                    if (dateInMillis > maxDate && this.maxDate.toDateString() !== d.toDateString()) {
+                        outOfRange = true;
+                    }
+                }
+            }
+            return outOfRange;
+        };
+        return DatepickerComponent;
+    }());
+    DatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DatepickerComponent, deps: [{ token: i0.LOCALE_ID }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DatepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatepickerComponent, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", inline: "inline", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: i4.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=\"flex\"\r\n     [ngClass]=\"{'relative': !inline}\"\r\n     (clickOutside)=\"closeCalendar()\">\r\n\r\n  <input type=\"text\"\r\n         *ngIf=\"!inline\"\r\n         #dateInput\r\n         [readonly]=\"readonly\"\r\n         name=\"dateInput\"\r\n         (blur)=\"onBlur($event)\"\r\n         id=\"dateInput\"\r\n         (focus)=\"showCalendar = false\"\r\n         [value]=\"value | date: displayFormat\"\r\n         class=\"detapicker-input\"\r\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n         [placeholder]=\"disabled ? '' : placeholder\">\r\n\r\n  <button type=\"button\"\r\n          *ngIf=\"!inline\"\r\n          class=\"datepicker-button\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"openCalendar()\"\r\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n  </button>\r\n\r\n  <div *ngIf=\"showCalendar || inline\"\r\n       [ngClass]=\"{'absolute': !inline}\"\r\n       class=\"datepicker-background\"\r\n       style=\"height:18rem;min-width:16rem;\"\r\n       name=\"calendar\">\r\n    <div class=\"datepicker-btn-wrapper\">\r\n      <div>\r\n        <button type=\"button\"\r\n                (click)=\"openYears()\">\r\n          <span class=\"datepicker-selected-month\">\r\n            {{monthNames[month]}}\r\n          </span>\r\n          <span class=\"datepicker-selected-year\">\r\n            {{year}}</span>\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\r\n        <button type=\"button\"\r\n                class=\"datepicker-nav-btn\"\r\n                (click)=\"previousMonth();\">\r\n          <svg fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 19l-7-7 7-7\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                class=\"datepicker-nav-btn\"\r\n                (click)=\"nextMonth()\">\r\n          <svg fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M9 5l7 7-7 7\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <ng-template #showYearsPickerTmpl>\r\n        <div>\r\n          <button type=\"button\"\r\n                  class=\"datepicker-nav-btn\"\r\n                  (click)=\"previousYear();\">\r\n            <svg fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M15 19l-7-7 7-7\" />\r\n            </svg>\r\n          </button>\r\n          <button type=\"button\"\r\n                  class=\"datepicker-nav-btn\"\r\n                  (click)=\"nextYear()\">\r\n            <svg fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 5l7 7-7 7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <div class=\"datepicker-wrapper\"\r\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\r\n      <div *ngFor=\"let day of dayNames\"\r\n           class=\"datepicker-day-name\"\r\n           style=\"width: 14.28%\">{{day}}</div>\r\n    </div>\r\n\r\n    <ng-template #showCalYearsTmpl>\r\n      <div class=\"datepicker-content-wrapper\">\r\n        <div *ngFor=\"let year of showCalendarYears\"\r\n             style=\"width: 18.28%\"\r\n             class=\"px-1 mb-1\">\r\n          <div (click)=\"selectYearValue(year)\"\r\n               class=\"datepicker-year\"\r\n               [class]=\"year.selected  ? 'selected' : 'not-selected'\">\r\n            {{year.year}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"datepicker-content-wrapper\"\r\n         *ngIf=\"!showYears\">\r\n      <div *ngFor=\"let blankday of blankDays\"\r\n           style=\"width: 14.28%\"\r\n           class=\"datepicker-blank-days\">{{blankday}}</div>\r\n      <div *ngFor=\"let date of calendarDates;\"\r\n           style=\"width: 14.28%\"\r\n           class=\"px-1 mb-1\">\r\n        <div (click)=\"selectDateValue(date)\"\r\n             class=\"datepicker-days\"\r\n             [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\r\n          {{date.day}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>", directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], pipes: { "date": i1__namespace.DatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DatepickerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-date-picker',
+                        templateUrl: './date-picker.component.html',
+                        providers: [
+                            {
+                                provide: i4.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return DatepickerComponent; }),
+                                multi: true
+                            }
+                        ]
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.LOCALE_ID]
+                        }] }];
+        }, propDecorators: { readonly: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], inline: [{
+                    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']
+                }], minDate: [{
+                    type: i0.Input
+                }], maxDate: [{
+                    type: i0.Input
+                }] } });
+
+    var AdvancedSearchComponent = /** @class */ (function () {
+        function AdvancedSearchComponent() {
+            this.advancedSearchChanged = new i0.EventEmitter();
+            this.searchOptions = [];
+            this.filters = [];
+            this.menuOptions = [];
+            this.menuOptionsDictionary = {};
+        }
+        AdvancedSearchComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.searchOptions.forEach(function (searchOption) {
+                var _a;
+                _this.menuOptions.push({
+                    text: searchOption.name,
+                    value: searchOption.field,
+                    data: searchOption.dataType,
+                    description: searchOption.placeholder,
+                    icon: undefined
+                });
+                if (searchOption.dataType === 'array') {
+                    var menuOpts_1 = [];
+                    (_a = searchOption.options) === null || _a === void 0 ? void 0 : _a.forEach(function (selectInputOption) {
+                        menuOpts_1.push({
+                            text: selectInputOption.label,
+                            value: selectInputOption.value,
+                            data: undefined,
+                            description: selectInputOption.description,
+                            icon: undefined
+                        });
+                    });
+                    _this.menuOptionsDictionary[searchOption.field] = menuOpts_1;
+                }
+            });
+        };
+        AdvancedSearchComponent.prototype.selectedFieldChanged = function (field) {
+            this.selectedField = this.searchOptions.find(function (searchOption) { return searchOption.field === field; });
+            this.fieldValue = undefined;
+        };
+        AdvancedSearchComponent.prototype.selectedFieldValueChanged = function (fieldValue) {
+            this.fieldValue = fieldValue;
+        };
+        AdvancedSearchComponent.prototype.search = function () {
+            var _this = this;
+            if (!this.selectedField || !this.selectedField.dataType) {
+                return;
+            }
+            // the filter is of type 'daterange'
+            if (this.selectedField.dataType === 'daterange') {
+                if (!this.selectedField.multiTerm) {
+                    this.filters = this.filters.filter(function (f) {
+                        return f.member !== QueryParameters.FILTER_FROM && f.member !== QueryParameters.FILTER_TO;
+                    });
+                }
+                if (this.fieldValueDateFrom) {
+                    var filterClauseFrom = new FilterClause(QueryParameters.FILTER_FROM, this.fieldValueDateFrom, Operators.GREATER_THAN_EQUAL.value, 'datetime', this.searchOptions);
+                    this.filters.push(filterClauseFrom);
+                }
+                if (this.fieldValueDateTo) {
+                    var filterClauseTo = new FilterClause(QueryParameters.FILTER_TO, this.fieldValueDateTo, Operators.LESS_THAN_EQUAL.value, 'datetime', this.searchOptions);
+                    this.filters.push(filterClauseTo);
+                }
+            }
+            // the filter isn't of type 'daterange' (everything else)
+            else {
+                if (this.fieldValue === undefined) { // handle empty field value
+                    return;
+                }
+                // create the filterClause
+                var filterClause = new FilterClause(this.selectedField.field, this.fieldValue, Operators.EQUALS.value, this.selectedField.dataType, this.searchOptions); // operator is always 'equals'...
+                if (!this.selectedField.multiTerm) { // multiTerm means that we can have multiple filter values of the SAME filter clause (eg "filter case types that are Phone OR Address")
+                    this.filters = this.filters.filter(function (f) {
+                        return f.member !== _this.selectedField.field;
+                    });
+                }
+                this.filters.push(filterClause);
+                this.fieldValue = undefined;
+            }
+            this.advancedSearchChanged.emit(this.filters);
+        };
+        AdvancedSearchComponent.prototype.removeFilter = function (index) {
+            if (this.filters && this.filters.length >= index) {
+                this.filters.splice(index, 1);
+                this.advancedSearchChanged.emit(this.filters);
             }
-            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;
+        AdvancedSearchComponent.prototype.clear = function () {
+            this.fieldValueDateFrom = undefined;
+            this.fieldValueDateTo = undefined;
+            this.selectedField = undefined;
+            this.fieldValue = undefined;
+            this.filters = [];
+            this.advancedSearchChanged.emit(this.filters);
         };
-        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);
-            });
+        return AdvancedSearchComponent;
+    }());
+    AdvancedSearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AdvancedSearchComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AdvancedSearchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, ngImport: i0__namespace, template: "<div class=\"advanced-search-container\">\r\n    <div class=\"advanced-search-filter\">\r\n        <!--SEARCH FIELDS-->\r\n        <div class=\"advanced-search-filter-field-container\">\r\n            <label class=\"advanced-search-filter-field-label\"\r\n                   for=\"selectedField\">\r\n                \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n            </label>\r\n            <lib-drop-down-menu [options]=\"menuOptions\"\r\n                                (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n        </div>\r\n        <!--SEARCH FIELDS INPUT-->\r\n        <div *ngIf=\"selectedField\"\r\n             class=\"advanced-search-filter-value-container\">\r\n            <div *ngIf=\"selectedField.dataType === 'array'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n                                    [selected]=\"fieldValue\"\r\n                                    (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div *ngIf=\"selectedField.dataType === 'string'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <input (keyup.enter)=\"search()\"\r\n                       [(ngModel)]=\"fieldValue\"\r\n                       name=\"fieldValue\"\r\n                       type=\"text\"\r\n                       placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n                       maxlength=\"300\"\r\n                       class=\"advanced-search-filter-value-input\">\r\n            </div>\r\n            <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                <div>\r\n                    <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n                        \u0391\u03C0\u03CC:\r\n                    </span>\r\n                    <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n                                     [(ngModel)]=\"fieldValueDateFrom\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n                <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                    <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n                        \u0388\u03C9\u03C2:\r\n                    </span>\r\n                    <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n                                     [(ngModel)]=\"fieldValueDateTo\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedField\">\r\n            <!--DO SEARCH-->\r\n            <button type=\"button\"\r\n                    [ngClass]=\"{'opacity-50 cursor-not-allowed': fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined}\"\r\n                    [disabled]=\"fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined\"\r\n                    (click)=\"search()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n            </button>\r\n            <!--CLEAR-->\r\n            <button type=\"button\"\r\n                    (click)=\"clear()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n    <!--FILTER CHIPS-->\r\n    <!-- This example requires Tailwind CSS v2.0+ -->\r\n    <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n        <span *ngIf=\"filter && filter.member\"\r\n              class=\"advanced-search-chips\">\r\n            {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n            <button (click)=\"removeFilter(i)\"\r\n                    type=\"button\"\r\n                    class=\"advanced-search-chips-remove-filter\">\r\n                <span class=\"sr-only\">Remove large option</span>\r\n                <svg class=\"h-2 w-2\"\r\n                     stroke=\"currentColor\"\r\n                     fill=\"none\"\r\n                     viewBox=\"0 0 8 8\">\r\n                    <path stroke-linecap=\"round\"\r\n                          stroke-width=\"1.5\"\r\n                          d=\"M1 1l6 6m0-6L1 7\" />\r\n                </svg>\r\n            </button>\r\n        </span>\r\n    </ng-container>\r\n</div>", components: [{ type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder"], outputs: ["selectedChange", "selectedChanged"] }, { type: DatepickerComponent, selector: "lib-date-picker", inputs: ["readonly", "disabled", "inline", "display-format", "placeholder", "value", "minDate", "maxDate"], outputs: ["valueChange"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AdvancedSearchComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-advanced-search',
+                        templateUrl: './advanced-search.component.html'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { advancedSearchChanged: [{
+                    type: i0.Output
+                }], searchOptions: [{
+                    type: i0.Input,
+                    args: ['search-options']
+                }], filters: [{
+                    type: i0.Input
+                }] } });
+
+    var SkeletonLoaderComponent = /** @class */ (function () {
+        function SkeletonLoaderComponent() {
+            this.count = 5;
+            this.type = 'tiles'; // 'large-tile', 'table'
+        }
+        SkeletonLoaderComponent.prototype.ngOnInit = function () {
         };
-        DatepickerComponent.prototype.paginate = function (array, page_number) {
-            return array.slice((page_number - 1) * this.yearsPerPage, page_number * this.yearsPerPage);
+        SkeletonLoaderComponent.prototype.counter = function (i) {
+            return new Array(i);
         };
-        DatepickerComponent.prototype.getDateFromInput = function () {
-            var _a, _b;
-            if (((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.nativeElement.value) !== '' && !this.inline) {
-                var dateParts = (_b = this.dateInput) === null || _b === void 0 ? void 0 : _b.nativeElement.value.split("/");
-                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);
+        return SkeletonLoaderComponent;
+    }());
+    SkeletonLoaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkeletonLoaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkeletonLoaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.2.16", 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 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.2.16", ngImport: i0__namespace, type: ListViewEmptyStateComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ListViewEmptyStateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0__namespace, template: "<div class=\"p-20\">\r\n  <div class=\"text-center p-2\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\r\n    </svg>\r\n    <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\r\n    <p class=\"mt-1 text-sm text-gray-500\">\r\n      {{subTitle}}\r\n    </p>\r\n    <div class=\"mt-6\" *ngIf=\"false\">\r\n      <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\r\n        <!-- Heroicon name: solid/plus -->\r\n        <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\r\n        </svg>\r\n        {{newItemLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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 ListViewComponent = /** @class */ (function () {
+        function ListViewComponent() {
+            this.searchOptions = [];
+            this.filters = [];
+            // BUSY STATE
+            this.busy = false;
+            // PAGING - pass through for pager component
+            this.count = null;
+            this.page = 1;
+            this.view = ListViewType.Table;
+            this.sort = null;
+            // tslint:disable-next-line:no-input-rename
+            this.pageSize = 20;
+            // tslint:disable-next-line:no-input-rename
+            this.pageSizeOptions = [];
+            // SORTING - pass through for pager component
+            // tslint:disable-next-line:no-input-rename
+            this.sortOptions = [];
+            // tslint:disable-next-line:no-input-rename
+            this.sortdir = '-';
+            // tslint:disable-next-line:no-input-rename
+            this.tilesCount = 4;
+            // tslint:disable-next-line:no-input-rename
+            this.showPager = true;
+            // tslint:disable-next-line:no-input-rename
+            this.pagerPosition = exports.PagerPosition.Top;
+            // DETAILS SECTION
+            // Check if details section and button should be displayed according to the count of the value given
+            // tslint:disable-next-line:no-input-rename
+            this.detailsSectionPropertyCount = null;
+            this.pageChanged = new i0.EventEmitter();
+            this.pageSizeChanged = new i0.EventEmitter();
+            this.detailsOpened = new i0.EventEmitter();
+            this.sortChanged = new i0.EventEmitter();
+            this.sortdirChanged = new i0.EventEmitter();
+            this.advancedSearchChanged = new i0.EventEmitter();
+            this.multipleFullWidth = false;
+            this.expandIcon = Icons.Expand;
+            this.collapseIcon = Icons.Collapse;
+            this.tableViewSupported = false;
+            this.fullWidthTHClass = 'list-view-th-full';
+            this.fullWidthTDClass = 'list-view-td-full';
+            this.tilesViewSupported = false;
+            this.detailsSectionSupported = false;
+            this.loaderItems = [];
+            this.columns = [];
+            this.tilesDeckClass = 'cards-deck-4';
+            this.tileTemplate = null;
+            this.detailsTemplate = null;
+            for (var i = 0; i < 5; i++) {
+                this.loaderItems.push({});
+            }
+            if (this.pagerPosition) {
+                this.pagerPosition = this.pagerPosition;
+            }
+        }
+        Object.defineProperty(ListViewComponent.prototype, "cols", {
+            // COLUMNS
+            set: function (refs) {
+                this.columns = refs === null || refs === void 0 ? void 0 : refs.toArray();
+                if (this.columns && this.columns.length > 0) {
+                    this.tableViewSupported = true;
                 }
-                if (this.onChange$) {
-                    this.onChange$(this.value);
+                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", {
+            // tslint:disable-next-line:no-input-rename
+            set: function (ref) {
+                this.tileTemplate = ref;
+                if (this.tileTemplate) {
+                    this.tilesViewSupported = true;
                 }
-                this.updateDays();
-                if (this.onTouched$) {
-                    this.onTouched$();
+            },
+            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);
             }
-            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();
+        // events
+        ListViewComponent.prototype.emitPageChanged = function ($event) {
+            this.pageChanged.emit($event);
         };
-        DatepickerComponent.prototype.openCalendar = function () {
-            this.showCalendar = !this.showCalendar;
-            this.calcDays();
+        ListViewComponent.prototype.emitPageSizeChanged = function ($event) {
+            this.pageSizeChanged.emit($event);
         };
-        DatepickerComponent.prototype.closeCalendar = function () {
-            this.showCalendar = false;
-            this.getDateFromInput();
+        ListViewComponent.prototype.emitSortChanged = function ($event) {
+            this.sortChanged.emit($event);
         };
-        DatepickerComponent.prototype.outOfRangeDate = function (date) {
-            var outOfRange = false;
-            if (this.minDate || this.maxDate) {
-                var d = new Date(this.year, this.month, date.day);
-                var dateInMillis = d.getTime();
-                if (this.minDate) {
-                    var minDate = this.minDate.getTime();
-                    if (dateInMillis < minDate && this.minDate.toDateString() !== d.toDateString()) {
-                        outOfRange = true;
-                    }
-                }
-                if (this.maxDate) {
-                    var maxDate = this.maxDate.getTime();
-                    if (dateInMillis > maxDate && this.maxDate.toDateString() !== d.toDateString()) {
-                        outOfRange = true;
-                    }
-                }
+        ListViewComponent.prototype.emitSortdirChanged = function ($event) {
+            this.sortdirChanged.emit($event);
+        };
+        ListViewComponent.prototype.emitAdvancedSearchChanged = function ($event) {
+            this.advancedSearchChanged.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 outOfRange;
         };
-        return DatepickerComponent;
+        return ListViewComponent;
     }());
-    DatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DatepickerComponent, deps: [{ token: i0.LOCALE_ID }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DatepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatepickerComponent, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", inline: "inline", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { valueChange: "valueChange" }, providers: [
-            {
-                provide: 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=\"flex\"\r\n     [ngClass]=\"{'relative': !inline}\"\r\n     (clickOutside)=\"closeCalendar()\">\r\n\r\n  <input type=\"text\"\r\n         *ngIf=\"!inline\"\r\n         #dateInput\r\n         [readonly]=\"readonly\"\r\n         name=\"dateInput\"\r\n         (blur)=\"onBlur($event)\"\r\n         id=\"dateInput\"\r\n         (focus)=\"showCalendar = false\"\r\n         [value]=\"value | date: displayFormat\"\r\n         class=\"detapicker-input\"\r\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n         [placeholder]=\"disabled ? '' : placeholder\">\r\n\r\n  <button type=\"button\"\r\n          *ngIf=\"!inline\"\r\n          class=\"datepicker-button\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"openCalendar()\"\r\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n  </button>\r\n\r\n  <div *ngIf=\"showCalendar || inline\"\r\n       [ngClass]=\"{'absolute': !inline}\"\r\n       class=\"datepicker-background\"\r\n       style=\"height:18rem;min-width:16rem;\"\r\n       name=\"calendar\">\r\n    <div class=\"datepicker-btn-wrapper\">\r\n      <div>\r\n        <button type=\"button\"\r\n                (click)=\"openYears()\">\r\n          <span class=\"datepicker-selected-month\">\r\n            {{monthNames[month]}}\r\n          </span>\r\n          <span class=\"datepicker-selected-year\">\r\n            {{year}}</span>\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\r\n        <button type=\"button\"\r\n                class=\"datepicker-nav-btn\"\r\n                (click)=\"previousMonth();\">\r\n          <svg fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 19l-7-7 7-7\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                class=\"datepicker-nav-btn\"\r\n                (click)=\"nextMonth()\">\r\n          <svg fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M9 5l7 7-7 7\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <ng-template #showYearsPickerTmpl>\r\n        <div>\r\n          <button type=\"button\"\r\n                  class=\"datepicker-nav-btn\"\r\n                  (click)=\"previousYear();\">\r\n            <svg fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M15 19l-7-7 7-7\" />\r\n            </svg>\r\n          </button>\r\n          <button type=\"button\"\r\n                  class=\"datepicker-nav-btn\"\r\n                  (click)=\"nextYear()\">\r\n            <svg fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 5l7 7-7 7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <div class=\"datepicker-wrapper\"\r\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\r\n      <div *ngFor=\"let day of dayNames\"\r\n           class=\"datepicker-day-name\"\r\n           style=\"width: 14.28%\">{{day}}</div>\r\n    </div>\r\n\r\n    <ng-template #showCalYearsTmpl>\r\n      <div class=\"datepicker-content-wrapper\">\r\n        <div *ngFor=\"let year of showCalendarYears\"\r\n             style=\"width: 18.28%\"\r\n             class=\"px-1 mb-1\">\r\n          <div (click)=\"selectYearValue(year)\"\r\n               class=\"datepicker-year\"\r\n               [class]=\"year.selected  ? 'selected' : 'not-selected'\">\r\n            {{year.year}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"datepicker-content-wrapper\"\r\n         *ngIf=\"!showYears\">\r\n      <div *ngFor=\"let blankday of blankDays\"\r\n           style=\"width: 14.28%\"\r\n           class=\"datepicker-blank-days\">{{blankday}}</div>\r\n      <div *ngFor=\"let date of calendarDates;\"\r\n           style=\"width: 14.28%\"\r\n           class=\"px-1 mb-1\">\r\n        <div (click)=\"selectDateValue(date)\"\r\n             class=\"datepicker-days\"\r\n             [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\r\n          {{date.day}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>", directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], pipes: { "date": i1__namespace.DatePipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DatepickerComponent, decorators: [{
+    ListViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListViewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ListViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListViewComponent, selector: "lib-list-view", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters", busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged", advancedSearchChanged: "advancedSearchChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"px-2\">\r\n\r\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n                       [search-options]=\"searchOptions\"\r\n                       [filters]=\"filters\"\r\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\"></lib-advanced-search>\r\n\r\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\"\r\n        [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n    <div class=\"cards-deck-1\">\r\n      <lib-list-view-empty-state></lib-list-view-empty-state>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"pt-2 px-2\">\r\n\r\n  <lib-pager *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>", components: [{ type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options", "filters"], outputs: ["advancedSearchChanged"] }, { type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }, { type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }], directives: [{ type: i1__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.2.16", ngImport: i0__namespace, type: ListViewComponent, 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
-                            }
-                        ]
+                        selector: 'lib-list-view',
+                        templateUrl: './list-view.component.html'
                     }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i0.LOCALE_ID]
-                        }] }];
-        }, propDecorators: { readonly: [{
+            }], ctorParameters: function () { return []; }, propDecorators: { searchOptions: [{
+                    type: i0.Input,
+                    args: ['search-options']
+                }], filters: [{
                     type: i0.Input
-                }], disabled: [{
+                }], busy: [{
                     type: i0.Input
-                }], inline: [{
+                }], items: [{
                     type: i0.Input
-                }], displayFormat: [{
-                    type: i0.Input,
-                    args: ['display-format']
-                }], placeholder: [{
+                }], count: [{
                     type: i0.Input
-                }], value: [{
+                }], page: [{
                     type: i0.Input
-                }], valueChange: [{
+                }], view: [{
+                    type: i0.Input
+                }], sort: [{
+                    type: i0.Input
+                }], pageSize: [{
+                    type: i0.Input,
+                    args: ['page-size']
+                }], pageSizeOptions: [{
+                    type: i0.Input,
+                    args: ['page-size-options']
+                }], sortOptions: [{
+                    type: i0.Input,
+                    args: ['sort-options']
+                }], sortdir: [{
+                    type: i0.Input,
+                    args: ['sort-dir']
+                }], tilesCount: [{
+                    type: i0.Input,
+                    args: ['tiles-count']
+                }], showPager: [{
+                    type: i0.Input,
+                    args: ['show-pager']
+                }], pagerPosition: [{
+                    type: i0.Input,
+                    args: ['pager-position']
+                }], detailsSectionPropertyCount: [{
+                    type: i0.Input,
+                    args: ['details-section-property-count']
+                }], cols: [{
+                    type: i0.ContentChildren,
+                    args: [ListColumnComponent, { read: ListColumnComponent }]
+                }], tiles: [{
+                    type: i0.ContentChild,
+                    args: [ListTileComponent, { read: ListTileComponent }]
+                }], details: [{
+                    type: i0.ContentChild,
+                    args: [ListDetailsSectionComponent, { read: ListDetailsSectionComponent }]
+                }], pageChanged: [{
                     type: i0.Output
-                }], dateInput: [{
-                    type: i0.ViewChild,
-                    args: ['dateInput']
-                }], minDate: [{
+                }], pageSizeChanged: [{
+                    type: i0.Output
+                }], detailsOpened: [{
+                    type: i0.Output
+                }], sortChanged: [{
+                    type: i0.Output
+                }], sortdirChanged: [{
+                    type: i0.Output
+                }], advancedSearchChanged: [{
+                    type: i0.Output
+                }] } });
+
+    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.2.16", ngImport: i0__namespace, type: CollapsiblePanelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CollapsiblePanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.2.16", 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
-                }], maxDate: [{
+                }] } });
+
+    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.2.16", ngImport: i0__namespace, type: KpiTileComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    KpiTileComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.2.16", 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']
                 }] } });
 
     var ToasterService = /** @class */ (function () {
@@ -1790,7 +2008,7 @@
     ToggleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ToggleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
     ToggleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToggleComponent, selector: "lib-toggle", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
             {
-                provide: forms.NG_VALUE_ACCESSOR,
+                provide: i4.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return ToggleComponent; }),
                 multi: true
             }
@@ -1802,7 +2020,7 @@
                         templateUrl: './toggle.component.html',
                         providers: [
                             {
-                                provide: forms.NG_VALUE_ACCESSOR,
+                                provide: i4.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return ToggleComponent; }),
                                 multi: true
                             }
@@ -1900,12 +2118,19 @@
             // tslint:disable-next-line:no-input-rename
             this.showIcons = false;
         }
+        NavLinksListComponent.prototype.ngOnDestroy = function () {
+            var _a;
+            (_a = this.fragmentSub$) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        };
         NavLinksListComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a;
+            this.fragmentSub$ = (_a = this.activeFragment) === null || _a === void 0 ? void 0 : _a.subscribe(function (fragment) { return _this.fragmentValue = fragment; });
         };
         return NavLinksListComponent;
     }());
     NavLinksListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NavLinksListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NavLinksListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: { links: "links", activeFragment: ["active-fragment", "activeFragment"], navLinkClass: ["link-class", "navLinkClass"], navLinkActiveClass: ["link-active-class", "navLinkActiveClass"], containerClass: ["container-class", "containerClass"], showIcons: ["show-icons", "showIcons"] }, ngImport: i0__namespace, template: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n  <div class=\"nav-link-list-container-inner\">\r\n    <ng-container *ngFor=\"let link of links | async\">\r\n      <ng-container [ngSwitch]=\"link.type\">\r\n        <a *ngSwitchCase=\"'router'\"\r\n          href=\"#\"\r\n          [routerLink]=\"[link.path]\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'external'\"\r\n          [href]=\"link.path\"\r\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'fragment'\"\r\n          routerLink=\".\"\r\n          [fragment]=\"link.path\"\r\n          [class.active]=\"(activeFragment | async) === link.path\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i1__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$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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1__namespace.AsyncPipe } });
+    NavLinksListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: { links: "links", activeFragment: ["active-fragment", "activeFragment"], navLinkClass: ["link-class", "navLinkClass"], navLinkActiveClass: ["link-active-class", "navLinkActiveClass"], containerClass: ["container-class", "containerClass"], showIcons: ["show-icons", "showIcons"] }, ngImport: i0__namespace, template: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n  <div class=\"nav-link-list-container-inner\">\r\n    <ng-container *ngFor=\"let link of links | async\">\r\n      <ng-container [ngSwitch]=\"link.type\">\r\n        <a *ngSwitchCase=\"'router'\"\r\n          href=\"#\"\r\n          [routerLink]=\"[link.path]\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'external'\"\r\n          [href]=\"link.path\"\r\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'fragment'\"\r\n          routerLink=\".\"\r\n          [fragment]=\"link.path\"\r\n          [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i1__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$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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NavLinksListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2004,7 +2229,7 @@
         return ComboboxComponent;
     }());
     ComboboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ComboboxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ComboboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0__namespace, template: "<div class=\"relative mt-1\">\r\n    <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n        <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n            class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n            aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n    </form>\r\n    <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n        <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n        </svg>\r\n        <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n        </svg>\r\n    </div>\r\n    <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n        <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </li>\r\n    </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n    <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n    <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n    <div class=\"grid grid-cols-1\">\r\n        <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n            <div class=\"flex-1 min-w-0\">\r\n                <div class=\"focus:outline-none\">\r\n                    <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"ml-4 flex-shrink-0 flex\">\r\n                <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n                    <span class=\"sr-only\">Close</span>\r\n                    <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                            clip-rule=\"evenodd\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>", directives: [{ type: 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"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    ComboboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0__namespace, template: "<div class=\"relative mt-1\">\r\n    <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n        <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n            class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n            aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n    </form>\r\n    <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n        <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n        </svg>\r\n        <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n        </svg>\r\n    </div>\r\n    <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n        <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </li>\r\n    </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n    <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n    <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n    <div class=\"grid grid-cols-1\">\r\n        <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n            <div class=\"flex-1 min-w-0\">\r\n                <div class=\"focus:outline-none\">\r\n                    <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"ml-4 flex-shrink-0 flex\">\r\n                <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n                    <span class=\"sr-only\">Close</span>\r\n                    <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                            clip-rule=\"evenodd\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>", directives: [{ type: i4__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ComboboxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2149,7 +2374,7 @@
     LibTabGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LibTabGroupComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
     LibTabGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LibTabGroupComponent, selector: "lib-tab-group", outputs: { tabChanged: "tabChanged" }, providers: [
             { provide: LIBTABGROUP_ACCESSOR, useExisting: i0.forwardRef(function () { return LibTabGroupComponent; }) }
-        ], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0__namespace, template: "<div class=\"tab-group-select-hidden\">\r\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\r\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\r\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\r\n    </select>\r\n</div>\r\n<div class=\"tab-group-container-hidden\">\r\n    <div class=\"tab-group-container\">\r\n        <nav class=\"tab-group-container-nav\" aria-label=\"Tabs\">\r\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\r\n                {{ tab.label }}\r\n            </a>\r\n        </nav>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"currentTab?.content\">\r\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\r\n</div>", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+        ], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0__namespace, template: "<div class=\"tab-group-select-hidden\">\r\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\r\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\r\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\r\n    </select>\r\n</div>\r\n<div class=\"tab-group-container-hidden\">\r\n    <div class=\"tab-group-container\">\r\n        <nav class=\"tab-group-container-nav\" aria-label=\"Tabs\">\r\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\r\n                {{ tab.label }}\r\n            </a>\r\n        </nav>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"currentTab?.content\">\r\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\r\n</div>", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LibTabGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2210,8 +2435,7 @@
         Object.defineProperty(LibStepComponent.prototype, "index", {
             /** Indicates the index of the step. */
             get: function () {
-                var _a;
-                return (_a = this._stepper) === null || _a === void 0 ? void 0 : _a.steps.toArray().indexOf(this);
+                return this._stepper ? this._stepper.steps.toArray().indexOf(this) : -1;
             },
             enumerable: false,
             configurable: true
@@ -2219,8 +2443,7 @@
         Object.defineProperty(LibStepComponent.prototype, "isLast", {
             /** Indicates whether this step is the last step. */
             get: function () {
-                var _a;
-                return ((_a = this._stepper) === null || _a === void 0 ? void 0 : _a.steps.length) - 1 === this.index;
+                return this._stepper ? this._stepper.steps.length - 1 === this.index : false;
             },
             enumerable: false,
             configurable: true
@@ -2299,11 +2522,15 @@
     })(exports.StepperType || (exports.StepperType = {}));
 
     var LibStepperComponent = /** @class */ (function () {
-        function LibStepperComponent() {
+        function LibStepperComponent(_changeDetectorRef) {
+            this._changeDetectorRef = _changeDetectorRef;
             // Private properties.
             this._currentStepIndex = 0;
+            this._isCompleted = false;
             /** Emmited when a step change occurs. */
             this.stepChanged = new i0.EventEmitter();
+            /** Emmited when the stepper navigates away from the final step. Only emits once. */
+            this.completed = new i0.EventEmitter();
             /** Indicates whether each step has to be validated before proceeding to the next. */
             this.linear = false;
             /** The type of the stepper. */
@@ -2328,19 +2555,50 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(LibStepperComponent.prototype, "canGoBack", {
+            /** Indicates whether stepper can go a step back. */
+            get: function () {
+                return this._currentStepIndex > 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(LibStepperComponent.prototype, "canGoForward", {
+            /** Indicates whether stepper can go a step forward. */
+            get: function () {
+                var _a;
+                return this._currentStepIndex < ((_a = this.steps) === null || _a === void 0 ? void 0 : _a.length) - 1;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(LibStepperComponent.prototype, "isCompleted", {
+            /** Indicates whether  */
+            get: function () {
+                return this._isCompleted;
+            },
+            enumerable: false,
+            configurable: true
+        });
         LibStepperComponent.prototype.ngOnInit = function () { };
+        LibStepperComponent.prototype.ngAfterViewChecked = function () {
+            this._changeDetectorRef.detectChanges();
+        };
         /** Proceeds to the next step, if any. */
         LibStepperComponent.prototype.goToNextStep = function () {
-            // Cannot go forward.
-            if (this._currentStepIndex === this.steps.length - 1) {
+            var _a;
+            if (((_a = this.currentStep) === null || _a === void 0 ? void 0 : _a.isLast) && !this._isCompleted) {
+                this._isCompleted = true;
+                this.completed.emit();
+            }
+            if (!this.canGoForward) {
                 return;
             }
             this.updateCurrentStepIndex(this._currentStepIndex + 1);
         };
         /** Proceeds to the previous step, if any. */
         LibStepperComponent.prototype.goToPreviousStep = function () {
-            // Cannot go back.
-            if (this._currentStepIndex === 0) {
+            if (!this.canGoBack) {
                 return;
             }
             this.updateCurrentStepIndex(this._currentStepIndex - 1);
@@ -2367,10 +2625,10 @@
         };
         return LibStepperComponent;
     }());
-    LibStepperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LibStepperComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    LibStepperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged" }, providers: [
+    LibStepperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LibStepperComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LibStepperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged", completed: "completed" }, providers: [
             { provide: LIBSTEPPER_ACCESSOR, useExisting: i0.forwardRef(function () { return LibStepperComponent; }) }
-        ], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0__namespace, template: "<ng-container [ngSwitch]=\"type\">\r\n    <!-- Bullets -->\r\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\r\n        <p class=\"text-sm font-medium\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n        <ol role=\"list\" class=\"ml-8 flex items-center space-x-5\">\r\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                <!-- Completed Step -->\r\n                <div class=\"block w-2.5 h-2.5 bg-blue-600 rounded-full hover:bg-blue-900\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"relative flex items-center justify-center\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"absolute w-5 h-5 p-px flex\" aria-hidden=\"true\">\r\n                        <span class=\"w-full h-full rounded-full bg-blue-200\"></span>\r\n                    </span>\r\n                    <span class=\"relative block w-2.5 h-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div href=\"#\" class=\"block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Bullets & Text -->\r\n    <div class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n        <nav aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"space-y-6\">\r\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                    <!-- Complete Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <span class=\"flex items-start\">\r\n                            <span class=\"flex-shrink-0 relative h-5 w-5 flex items-center justify-center\">\r\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                            <span class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"flex items-start\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                        <span class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\r\n                            <span class=\"absolute h-4 w-4 rounded-full bg-blue-200\"></span>\r\n                            <span class=\"relative block w-2 h-2 bg-blue-600 rounded-full\"></span>\r\n                        </span>\r\n                        <span class=\"ml-3 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"flex items-start\">\r\n                            <div class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\r\n                                <div class=\"h-2 w-2 bg-gray-300 rounded-full group-hover:bg-gray-400\"></div>\r\n                            </div>\r\n                            <p class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Circles -->\r\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\r\n        <ol class=\"flex items-center\" role=\"list\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\r\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                        </svg>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\r\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\r\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Circles With Text -->\r\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n        <ol role=\"list\" class=\"overflow-hidden\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\r\n                <!-- Complete Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\r\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div href=\"#\" class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\r\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n                <!-- Completed step -->\r\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                            </svg>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Active step -->\r\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\r\n                    </span>\r\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming step -->\r\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Arrow separator for lg screens and up -->\r\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\r\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels With Border -->\r\n    <div class=\"border-t border-b border-gray-200\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n        <nav class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\" aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"rounded-md overflow-hidden flex border-l border-r border-gray-200 lg:rounded-none\">\r\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative overflow-hidden lg:flex-1 cursor-pointer\">\r\n                    <!-- Completed Step -->\r\n                    <div class=\"border border-gray-200 overflow-hidden border-b-0 rounded-t-md lg:border-0\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <div class=\"group\">\r\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\r\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium\">\r\n                                <span class=\"flex-shrink-0\">\r\n                                    <span class=\"w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full\">\r\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\r\n                                    <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"border border-gray-200 overflow-hidden lg:border-0\" *ngIf=\"step.state === StepState.Active\">\r\n                        <div aria-current=\"step\">\r\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-blue-600 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\r\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\r\n                                <span class=\"flex-shrink-0\">\r\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n                                        <span class=\"text-blue-600\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\r\n                                    <span class=\"text-xs font-semibold text-blue-600 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"border border-gray-200 overflow-hidden border-t-0 rounded-b-md lg:border-0\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"group\">\r\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\r\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\r\n                                <span class=\"flex-shrink-0\">\r\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full\">\r\n                                        <span class=\"text-gray-500\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\r\n                                    <span class=\"text-xs font-semibold text-gray-500 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Progress -->\r\n    <div *ngSwitchCase=\"StepperType.Progress\">\r\n        <div class=\"mt-6\" aria-hidden=\"true\">\r\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\r\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\r\n            </div>\r\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\r\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\r\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Simple -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\r\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n</ng-container>\r\n<ng-container *ngFor=\"let step of steps\">\r\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n</ng-container>", directives: [{ type: i1__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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+        ], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0__namespace, template: "<ng-container [ngSwitch]=\"type\">\r\n    <!-- Bullets -->\r\n    <nav class=\"stepper-bullets-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\r\n        <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n        <ol role=\"list\" class=\"stepper-bullets-ol\">\r\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                <!-- Completed Step -->\r\n                <div class=\"stepper-bullets-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"stepper-bullets-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"stepper-bullets-active-step-level1\" aria-hidden=\"true\">\r\n                        <span class=\"stepper-bullets-active-step-level1\"></span>\r\n                    </span>\r\n                    <span class=\"stepper-bullets-active-step-bullet\" aria-hidden=\"true\"></span>\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div href=\"#\" class=\"stepper-bullets-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Bullets & Text -->\r\n    <div class=\"stepper-bullets-and-text-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n        <nav aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"stepper-bullets-and-text-ol\">\r\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                    <!-- Complete Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <span class=\"stepper-bullets-and-text-completed-step\">\r\n                            <span class=\"stepper-bullets-and-text-completed-step-level1\">\r\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                            <span class=\"stepper-bullets-and-text-completed-step-container\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"stepper-bullets-and-text-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                        <span class=\"stepper-bullets-and-text-active-step-level1\" aria-hidden=\"true\">\r\n                            <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\r\n                            <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\r\n                        </span>\r\n                        <span class=\"stepper-bullets-and-text-active-step-container\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"stepper-bullets-and-text-upcoming-step\">\r\n                            <div class=\"stepper-bullets-and-text-upcoming-step-level1\" aria-hidden=\"true\">\r\n                                <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\r\n                            </div>\r\n                            <p class=\"stepper-bullets-and-text-upcoming-step-container\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Circles -->\r\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\r\n        <ol class=\"flex items-center\" role=\"list\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\r\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                        </svg>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\r\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\r\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Circles With Text -->\r\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n        <ol role=\"list\" class=\"overflow-hidden\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\r\n                <!-- Complete Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\r\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div href=\"#\" class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\r\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n                <!-- Completed step -->\r\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                            </svg>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Active step -->\r\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\r\n                    </span>\r\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming step -->\r\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Arrow separator for lg screens and up -->\r\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\r\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels With Border -->\r\n    <div class=\"panels-with-border-container\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n        <nav class=\"panels-with-border-nav\" aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"panels-with-border-ol\">\r\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"panels-with-border-li\">\r\n                    <!-- Completed Step -->\r\n                    <div class=\"panels-with-border-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-completed-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-completed-step-level2\">\r\n                                <span class=\"panels-with-border-completed-step-level21\">\r\n                                    <span class=\"panels-with-border-completed-step-level211\">\r\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-completed-step-level22\">\r\n                                    <span class=\"panels-with-border-completed-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-completed-step-level222\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"panels-with-border-active-step\" *ngIf=\"step.state === StepState.Active\">\r\n                        <div aria-current=\"step\">\r\n                            <span class=\"panels-with-border-active-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-active-step-level2\">\r\n                                <span class=\"panels-with-border-active-step-level21\">\r\n                                    <span class=\"panels-with-border-active-step-level211\">\r\n                                        <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-active-step-level22\">\r\n                                    <span class=\"panels-with-border-active-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-active-step-level222\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"panels-with-border-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-upcoming-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-upcoming-step-level2\">\r\n                                <span class=\"panels-with-border-upcoming-step-level21\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level211\">\r\n                                        <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-upcoming-step-level22\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Progress -->\r\n    <div *ngSwitchCase=\"StepperType.Progress\">\r\n        <div class=\"mt-6\" aria-hidden=\"true\">\r\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\r\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\r\n            </div>\r\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\r\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\r\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Simple -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\r\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n</ng-container>\r\n<ng-container *ngFor=\"let step of steps\">\r\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n</ng-container>", directives: [{ type: i1__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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LibStepperComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2380,11 +2638,13 @@
                             { provide: LIBSTEPPER_ACCESSOR, useExisting: i0.forwardRef(function () { return LibStepperComponent; }) }
                         ]
                     }]
-            }], ctorParameters: function () { return []; }, propDecorators: { steps: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { steps: [{
                     type: i0.ContentChildren,
                     args: [LibStepComponent, { descendants: true }]
                 }], stepChanged: [{
                     type: i0.Output
+                }], completed: [{
+                    type: i0.Output
                 }], linear: [{
                     type: i0.Input
                 }], type: [{
@@ -2688,7 +2948,7 @@
         return UserProfileMenuComponent;
     }());
     UserProfileMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: UserProfileMenuComponent, deps: [{ token: i2.AuthService }, { token: i1$1.Router }, { token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    UserProfileMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0__namespace, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\" (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n\r\n  <div class=\"inline-flex\">\r\n    <!-- Username -->\r\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n        {{ user.profile.name }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [class.ml-2]=\"showUserName\">\r\n      <button type=\"button\" *ngIf=\"user\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\">\r\n        <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    </div>\r\n  </div>\r\n\r\n  <div [class]=\"userMenuExpanded ?\r\n    'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n    :\r\n    'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n         <lib-nav-links-list\r\n            [links]=\"links.profile\"\r\n            [link-class]=\"'nav-link-profile'\"\r\n            [link-active-class]=\"'nav-link-profile-active'\">\r\n         </lib-nav-links-list>\r\n  </div>\r\n\r\n</div>\r\n\r\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }], directives: [{ type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    UserProfileMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0__namespace, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n  <div class=\"inline-flex\">\r\n    <!-- Username -->\r\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n        {{ user.profile.name }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [class.ml-2]=\"showUserName\">\r\n      <button type=\"button\" \r\n              *ngIf=\"user\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\"\r\n              (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n        <span class=\"sr-only\">Open user menu</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n        </span>\r\n      </button>\r\n\r\n      <button type=\"button\"\r\n              *ngIf=\"!user\"\r\n              (click)=\"signin($event)\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\">\r\n        <span class=\"sr-only\">sign in</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n        </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"userMenuExpanded ?\r\n    'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n    :\r\n    'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n         <lib-nav-links-list\r\n            [links]=\"links.profile\"\r\n            [link-class]=\"'nav-link-profile'\"\r\n            [link-active-class]=\"'nav-link-profile-active'\">\r\n         </lib-nav-links-list>\r\n  </div>\r\n\r\n</div>\r\n\r\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }], directives: [{ type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: UserProfileMenuComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2728,20 +2988,26 @@
         };
         NotificationsIndicatorComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.links['notifications'].subscribe(function (notificationsLink) {
-                _this.allNotificationsLink = notificationsLink;
-            });
-            this.notificationsSub$ = this.notifications.messages.subscribe(function (result) {
-                if (result.items) {
-                    _this.newArrival = true;
-                    _this.unreadCount = result.count;
-                    _this.items = result.items;
-                    setTimeout(function () { _this.newArrival = false; }, 1000);
-                }
-            });
+            var _a;
+            if (this.links && this.links['notifications']) {
+                this.links['notifications'].subscribe(function (notificationsLink) {
+                    _this.allNotificationsLink = notificationsLink;
+                });
+            }
+            if (this.notifications) {
+                this.notificationsSub$ = (_a = this.notifications) === null || _a === void 0 ? void 0 : _a.messages.subscribe(function (result) {
+                    if (result.items) {
+                        _this.newArrival = true;
+                        _this.unreadCount = result.count;
+                        _this.items = result.items;
+                        setTimeout(function () { _this.newArrival = false; }, 1000);
+                    }
+                });
+            }
         };
         NotificationsIndicatorComponent.prototype.doInboxAction = function () {
-            if (this.notifications.inboxAction) {
+            var _a;
+            if ((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.inboxAction) {
                 this.notifications.inboxAction();
             }
             else {
@@ -2834,7 +3100,7 @@
             // tslint:disable-next-line:no-input-rename
             this.showAlerts = false;
             // tslint:disable-next-line:no-input-rename
-            this.shellLayout = exports.ShellLayoutType.Stacked;
+            this.showLangs = false;
             this.border = true;
             this.sectionLinks = rxjs.of([]);
             this.mobileMenuExpanded = false;
@@ -2898,7 +3164,7 @@
         return ShellHeaderComponent;
     }());
     ShellHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellHeaderComponent, deps: [{ token: i2.AuthService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ShellHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"], shellLayout: ["shell-layout", "shellLayout"], 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 *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-link-container\">\r\n          <div class=\"shell-header-link-container-inner\">\r\n            <lib-nav-links-list\r\n              [links]=\"sectionLinks\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'nav-link'\"\r\n              [link-active-class]=\"'nav-link-active'\">\r\n            </lib-nav-links-list>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n\r\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n            <lib-nav-links-list\r\n              [links]=\"links.profileActions\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\"\r\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n            </lib-nav-links-list>\r\n\r\n\r\n            <!-- Profile dropdown -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-2\">\r\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-2\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\r\n\r\n            <!-- languages dropdown -->\r\n            <div *ngIf=\"config.showLangsOnHeader\" class=\"ml-2\">\r\n              <lib-language-selection></lib-language-selection>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\" *ngIf=\"shellLayout === 'Stacked'\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <!--\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n        -->\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }, { type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }, { type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { type: LanguageSelectionComponent, selector: "lib-language-selection" }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] });
+    ShellHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border" }, ngImport: i0__namespace, template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div class=\"shell-header-border\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-link-container\">\r\n          <div class=\"shell-header-link-container-inner\">\r\n            <lib-nav-links-list\r\n              [links]=\"sectionLinks\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'nav-link'\"\r\n              [link-active-class]=\"'nav-link-active'\">\r\n            </lib-nav-links-list>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n\r\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n            <lib-nav-links-list\r\n              [links]=\"links.profileActions\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\"\r\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n            </lib-nav-links-list>\r\n\r\n\r\n            <!-- Profile dropdown -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\r\n\r\n            <!-- languages dropdown -->\r\n            <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n              <lib-language-selection></lib-language-selection>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <!--\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n        -->\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }, { type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }, { type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { type: LanguageSelectionComponent, selector: "lib-language-selection" }], directives: [{ type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2935,9 +3201,9 @@
                 }], showAlerts: [{
                     type: i0.Input,
                     args: ['show-alerts']
-                }], shellLayout: [{
+                }], showLangs: [{
                     type: i0.Input,
-                    args: ['shell-layout']
+                    args: ['show-langs']
                 }], border: [{
                     type: i0.Input
                 }] } });
@@ -2963,6 +3229,25 @@
                         }] }];
         } });
 
+    var ShellStackedLayoutComponent = /** @class */ (function () {
+        function ShellStackedLayoutComponent() {
+        }
+        ShellStackedLayoutComponent.prototype.ngOnInit = function () {
+        };
+        return ShellStackedLayoutComponent;
+    }());
+    ShellStackedLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellStackedLayoutComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ShellStackedLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: { config: "config" }, ngImport: i0__namespace, template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\r\n    <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customHeaderComponent\">\r\n        <div appDynamicComponentHost =\"Header\"></div>\r\n        </ng-container>\r\n        <lib-shell-header *ngIf=\"!config?.customHeaderComponent\" [show-userName]=\"config?.showUserNameOnHeader\"\r\n        [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\r\n        </lib-shell-header>\r\n    </div>\r\n</div>\r\n\r\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n        <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\r\n    </div>\r\n</main>\r\n\r\n<div class=\"shell-footer-container\" *ngIf=\"config?.showFooter\">\r\n    <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customFooterComponent\">\r\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n        </ng-container>\r\n        <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n</div>", components: [{ type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "show-langs", "border"] }, { type: ShellFooterComponent, selector: "lib-shell-footer" }], directives: [{ type: i1__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.2.16", ngImport: i0__namespace, type: ShellStackedLayoutComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-shell-stacked-layout',
+                        templateUrl: './shell-stacked-layout.component.html'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                    type: i0.Input
+                }] } });
+
     var ShellSidebarComponent = /** @class */ (function () {
         function ShellSidebarComponent(router, route, links) {
             this.router = router;
@@ -2982,7 +3267,7 @@
         return ShellSidebarComponent;
     }());
     ShellSidebarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellSidebarComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ShellSidebarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0__namespace, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"flex w-full flex-col h-full min-h-0 bg-gray-800\">\r\n  <div class=\"flex items-center h-16 flex-shrink-0 px-4 bg-gray-900\">\r\n    <!-- <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\" alt=\"Workflow\"> -->\r\n    <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"shellConfig?.appLogo\" [alt]=\"shellConfig?.appLogoAlt\" /></a>\r\n  </div>\r\n  <div class=\"pt-4 px-2 sidebar\">\r\n    <lib-nav-links-list\r\n      [show-icons]=\"true\"\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'sidebar nav-link group'\"\r\n      [link-active-class]=\"'sidebar nav-link-active group'\">\r\n    </lib-nav-links-list>\r\n  </div>\r\n</div>\r\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }], directives: [{ type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }] });
+    ShellSidebarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0__namespace, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"shell-sidebar-component-container\">\r\n <div class=\"shell-sidebar-component-links-container sidebar\">\r\n    <lib-nav-links-list\r\n      [show-icons]=\"true\"\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'sidebar nav-link group'\"\r\n      [link-active-class]=\"'sidebar nav-link-active group'\">\r\n    </lib-nav-links-list>\r\n  </div>\r\n</div>\r\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellSidebarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3008,6 +3293,69 @@
                     args: ['config']
                 }] } });
 
+    var ShellSidebarHeaderComponent = /** @class */ (function (_super) {
+        __extends(ShellSidebarHeaderComponent, _super);
+        function ShellSidebarHeaderComponent(authService, router, route, config, links) {
+            var _this = _super.call(this, authService, router, route, config, links) || this;
+            _this.authService = authService;
+            _this.router = router;
+            _this.route = route;
+            _this.config = config;
+            _this.links = links;
+            return _this;
+        }
+        return ShellSidebarHeaderComponent;
+    }(ShellHeaderComponent));
+    ShellSidebarHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellSidebarHeaderComponent, deps: [{ token: i2.AuthService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ShellSidebarHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"shell-header-paddings\">\r\n    <div class=\"shell-header-border\">\r\n        <div class=\"shell-header-menu-container\">\r\n            <div class=\"shell-header-md-visible\">\r\n                <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n                <!-- Profile dropdown -->\r\n                <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n                    <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n                </div>\r\n                <!-- Notifications dropdown -->\r\n                <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n                    <lib-notifications-indicator></lib-notifications-indicator>\r\n                </div>\r\n                <!-- languages dropdown -->\r\n                <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n                    <lib-language-selection></lib-language-selection>\r\n                </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n \r\n", components: [{ type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }, { type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { type: LanguageSelectionComponent, selector: "lib-language-selection" }], directives: [{ type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellSidebarHeaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-shell-sidebar-header',
+                        templateUrl: './shell-sidebar-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: i1__namespace$1.ActivatedRoute, decorators: [{
+                            type: i0.Inject,
+                            args: [i1$1.ActivatedRoute]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [SHELL_CONFIG]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [APP_LINKS]
+                        }] }];
+        } });
+
+    var ShellSidebarLayoutComponent = /** @class */ (function () {
+        function ShellSidebarLayoutComponent() {
+            this.showMobileSidebar = true;
+        }
+        ShellSidebarLayoutComponent.prototype.ngOnInit = function () {
+        };
+        ShellSidebarLayoutComponent.prototype.toggleMobileSidebar = function () {
+            this.showMobileSidebar = !this.showMobileSidebar;
+        };
+        return ShellSidebarLayoutComponent;
+    }());
+    ShellSidebarLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellSidebarLayoutComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ShellSidebarLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config" }, ngImport: i0__namespace, template: "<div>\r\n    <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\r\n    <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\r\n      <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\r\n      <div class=\"sidebar-off-canvas-menu-backdrop\" \r\n          [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\r\n      </div>\r\n  \r\n      <div class=\"sidebar-off-canvas-menu-container-inner\" \r\n      [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\" \r\n      [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\r\n        <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\r\n        <div class=\"sidebar-off-canvas-layout-container\">\r\n          <!--Close button, show/hide based on off-canvas menu state.-->\r\n          <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n            <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n              <span class=\"sr-only\">Close sidebar</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n  \r\n          <div class=\"sidebar-off-canvas-app-logo-container\">\r\n            <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n\r\n          <lib-shell-sidebar></lib-shell-sidebar>\r\n         \r\n        </div>\r\n  \r\n        <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\r\n          <!-- Dummy element to force sidebar to shrink to fit close icon -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  \r\n    <!-- Static sidebar for desktop -->\r\n    <div class=\"sidebar-static-menu-outer-container\">\r\n    \r\n    <div class=\"sidebar-static-menu-container\" \r\n      [class.sidebar-static-menu-container-active]=\"showMobileSidebar\" \r\n      [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\r\n      <!-- Sidebar component, swap this element with another sidebar if you like -->\r\n      <div class=\"sidebar-static-menu-container-inner\">\r\n        <div class=\"sidebar-static-menu-app-logo-container\">\r\n          <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n        </div>\r\n        <lib-shell-sidebar></lib-shell-sidebar>\r\n      </div>\r\n    </div>\r\n    </div>\r\n\r\n    <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\r\n      <div class=\"sidebar-static-menu-toggle-button-container\">\r\n        <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n          <span class=\"sr-only\">Toggle sidebar</span>\r\n          <!-- Heroicon name: outline/menu-alt-2 -->\r\n          <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n          </svg>\r\n        </button>\r\n        \r\n        <!-- sidebar-static-menu-header-container -->\r\n        <div class=\"sidebar-static-menu-header-container\">\r\n          <div class=\"sidebar-static-menu-header-near-container\">\r\n            <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"!showMobileSidebar\">\r\n              <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n            </div>\r\n          </div>\r\n          <div class=\"sidebar-static-menu-header-far-container\">\r\n            <lib-shell-sidebar-header \r\n            [show-userName]=\"config?.showUserNameOnHeader\"\r\n            [show-alerts]=\"config?.showAlertsOnHeader\" \r\n            [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\r\n          </div>\r\n        </div>\r\n      </div>\r\n  \r\n      <div flex-1>\r\n        <main class=\"shell-content-container-fluid\">\r\n            <div class=\"shell-content-container-inner\">\r\n              <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\r\n              <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n            </div>\r\n          </main>\r\n      </div>\r\n    </div>\r\n  </div>", components: [{ type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }, { type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellSidebarLayoutComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-shell-sidebar-layout',
+                        templateUrl: './shell-sidebar-layout.component.html'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                    type: i0.Input
+                }] } });
+
     var ShellLayoutComponent = /** @class */ (function () {
         function ShellLayoutComponent(document, router, location, config, componentLoaderFactory) {
             this.document = document;
@@ -3083,7 +3431,7 @@
         return ShellLayoutComponent;
     }());
     ShellLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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.2.16", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0__namespace, template: "<div *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\" [style.display]=\"!loaded ? 'none':'block'\" class=\"shell-container active-side-pane\">\r\n\r\n  <div class=\"shell-header-container\" *ngIf=\"activeConfig.showHeader\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\r\n        <div appDynamicComponentHost =\"Header\"></div>\r\n      </ng-container>\r\n      <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\" [show-userName]=\"activeConfig.showUserNameOnHeader\"\r\n        [show-alerts]=\"activeConfig.showAlertsOnHeader\">\r\n      </lib-shell-header>\r\n    </div>\r\n  </div>\r\n\r\n  <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n      <router-outlet *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\"></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <div class=\"shell-footer-container\" *ngIf=\"activeConfig.showFooter\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customFooterComponent\">\r\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n      </ng-container>\r\n      <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n</div>\r\n\r\n<!-- SIDEBAR LAYOUT -->\r\n\r\n<div *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\" [style.display]=\"!loaded ? 'none':'block'\" class=\"sidebar shell-container active-side-pane\">\r\n\r\n  <!-- Static sidebar for desktop -->\r\n  <div class=\"hidden w-0 sm:w-64 flex-col inset-y-0 bg-gray-800\" [class.hidden]=\"hideSidebar\" [class.fixed]=\"!hideSidebar\">\r\n    <lib-shell-sidebar [config]=\"activeConfig\" ></lib-shell-sidebar>\r\n  </div>\r\n\r\n  <div class=\"flex flex-col\" [class.pl-64]=\"!hideSidebar\">\r\n    <div class=\"sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-800\">\r\n\r\n      <button type=\"button\" class=\"hidden sm:block px-4 border-0 text-white focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\r\n        <span class=\"sr-only\">Open sidebar</span>\r\n        <!-- Heroicon name: outline/menu-alt-2 -->\r\n        <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <button type=\"button\" class=\"block sm:hidden px-4 border-0 text-gray-200 focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\r\n        <span class=\"sr-only\">Open sidebar</span>\r\n        <!-- Heroicon name: outline/menu-alt-2 --> 111\r\n        <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <div class=\"flex-1\">\r\n        <div class=\"shell-header-container\">\r\n            <lib-shell-header [shell-layout]=\"activeConfig.layout\"  [show-userName]=\"activeConfig.showUserNameOnHeader\" [show-alerts]=\"activeConfig.showAlertsOnHeader\"></lib-shell-header>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <main class=\"shell-content-container-sidebar\">\r\n      <div class=\"shell-content-container-inner\">\r\n        <router-outlet *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\"></router-outlet>\r\n      </div>\r\n    </main>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>\r\n", components: [{ type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "shell-layout", "border"] }, { type: ShellFooterComponent, selector: "lib-shell-footer" }, { type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { type: ToasterContainerComponent, selector: "lib-toaster-container" }, { type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }], 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"] }] });
+    ShellLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0__namespace, template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\r\n\r\n  <!-- STACKED LAYOUT -->\r\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n  </div>\r\n\r\n  <!-- SIDEBAR LAYOUT -->\r\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\r\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>", components: [{ type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config"] }, { type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config"] }, { type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { type: ToasterContainerComponent, selector: "lib-toaster-container" }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellLayoutComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3448,7 +3796,6 @@
             this.authService.signinRedirectCallback().subscribe(function (user) {
                 var _a;
                 if (user) {
-                    debugger;
                     _this.router.navigateByUrl(((_a = user.state) === null || _a === void 0 ? void 0 : _a.url) || '/');
                 }
             });
@@ -3684,6 +4031,8 @@
             this.sort = '';
             this.sortdir = '';
             this.search = '';
+            this.filters = [];
+            this.searchOptions = [];
             this.sortOptions = [];
             this.metaItems = [];
         }
@@ -3739,14 +4088,38 @@
                 if (params.get('dir') !== _this.sortdir) {
                     _this.sortdir = params.get('dir');
                 }
+                // initialize filters that may reside in the query string
+                _this.filters = _this.getFiltersFrom(params);
             });
             // just to sync params in query
             this.setRouteParams(true);
             this.load();
         };
+        /**
+       * Get filters from a querystring
+       * @param queryParamMap
+       * @returns filters found from a paramMap
+       */
+        BaseListComponent.prototype.getFiltersFrom = function (queryParamMap) {
+            var filterResult = [];
+            if (queryParamMap.has(QueryParameters.FILTER) && queryParamMap.get(QueryParameters.FILTER).length > 0) {
+                var filterValue = queryParamMap.get(QueryParameters.FILTER);
+                var filterValues = filterValue === null || filterValue === void 0 ? void 0 : filterValue.split(","); // we may have multiple filters in filter query param
+                if (filterValues && filterValues.length > 0) {
+                    // create the filterClauses derived from the query params
+                    for (var index in filterValues) {
+                        var filterClause = FilterClause.parse(filterValues[index]);
+                        var parsed = new FilterClause(filterClause.member, filterClause.value, filterClause.operator, filterClause.dataType, this.searchOptions);
+                        if (parsed !== undefined) {
+                            filterResult.push(parsed);
+                        }
+                    }
+                }
+            }
+            return filterResult;
+        };
         BaseListComponent.prototype.setRouteParams = function (locationChange) {
             if (locationChange === void 0) { locationChange = false; }
-            console.log(this.sortdir);
             this.router$.navigate([], {
                 relativeTo: this.route$, queryParams: {
                     view: this.view,
@@ -3754,10 +4127,19 @@
                     pagesize: this.pageSize,
                     search: this.search,
                     sort: this.sort,
-                    dir: this.sortdir
+                    dir: this.sortdir,
+                    filter: this.filterClausesToString(this.filters)
                 }, queryParamsHandling: 'merge', skipLocationChange: locationChange
             });
         };
+        BaseListComponent.prototype.filterClausesToString = function (filters) {
+            return filters === null || filters === void 0 ? void 0 : filters.map(function (f) {
+                if (f.dataType === 'datetime') {
+                    f.value = (new Date(f.value)).toISOString();
+                }
+                return f.toString();
+            }).join(',');
+        };
         BaseListComponent.prototype.actionHandler = function ($event) {
             // console.log('BaseListComponent actionHandler', $event);
             if ($event.key === 'refresh') {
@@ -3833,6 +4215,14 @@
                 this.refresh();
             }
         };
+        BaseListComponent.prototype.advancedSearchChanged = function (filters) {
+            this.count = 0;
+            this.page = 1;
+            this.items = null;
+            this.filters = filters;
+            this.setRouteParams();
+            this.load();
+        };
         BaseListComponent.prototype.searchChanged = function (searchText) {
             this.count = 0;
             this.page = 1;
@@ -4362,10 +4752,15 @@
             LibStepperComponent,
             LibStepComponent,
             LibStepLabelDirective,
-            LibStepInfoDirective
+            LibStepInfoDirective,
+            ShellSidebarHeaderComponent,
+            ShellSidebarLayoutComponent,
+            ShellStackedLayoutComponent,
+            AdvancedSearchComponent
         ], imports: [i1.CommonModule,
             i1$1.RouterModule,
-            i2.IndiceAuthModule], exports: [AddressPipe,
+            i2.IndiceAuthModule,
+            i4.FormsModule], exports: [AddressPipe,
             AuthCallbackComponent,
             AuthRenewComponent,
             AvatarInitialsComponent,
@@ -4407,7 +4802,8 @@
     IndiceComponentsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IndiceComponentsModule, imports: [[
                 i1.CommonModule,
                 i1$1.RouterModule,
-                i2.IndiceAuthModule
+                i2.IndiceAuthModule,
+                i4.FormsModule
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IndiceComponentsModule, decorators: [{
                 type: i0.NgModule,
@@ -4466,12 +4862,17 @@
                             LibStepperComponent,
                             LibStepComponent,
                             LibStepLabelDirective,
-                            LibStepInfoDirective
+                            LibStepInfoDirective,
+                            ShellSidebarHeaderComponent,
+                            ShellSidebarLayoutComponent,
+                            ShellStackedLayoutComponent,
+                            AdvancedSearchComponent
                         ],
                         imports: [
                             i1.CommonModule,
                             i1$1.RouterModule,
-                            i2.IndiceAuthModule
+                            i2.IndiceAuthModule,
+                            i4.FormsModule
                         ],
                         exports: [
                             AddressPipe,
@@ -4579,6 +4980,8 @@
     exports.ShellFooterComponent = ShellFooterComponent;
     exports.ShellHeaderComponent = ShellHeaderComponent;
     exports.ShellLayoutComponent = ShellLayoutComponent;
+    exports.ShellSidebarComponent = ShellSidebarComponent;
+    exports.ShellSidebarHeaderComponent = ShellSidebarHeaderComponent;
     exports.SidePaneComponent = SidePaneComponent;
     exports.SideViewLayoutComponent = SideViewLayoutComponent;
     exports.SkeletonLoaderComponent = SkeletonLoaderComponent;