@indice/ng-components 0.2.160-beta.5 → 0.2.160-beta.9

package/fesm2020/indice-ng-components.mjs

@@ -1,14 +1,15 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component, TemplateRef, ContentChild, ContentChildren, LOCALE_ID, forwardRef, ViewChild, Injectable, InjectionToken, ViewEncapsulation, ChangeDetectionStrategy, Optional, Injector, ElementRef, ViewChildren, Pipe, HostListener, NgModule } from '@angular/core';
+import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component, TemplateRef, ContentChild, LOCALE_ID, forwardRef, ViewChild, ContentChildren, Injectable, InjectionToken, ViewEncapsulation, ChangeDetectionStrategy, Optional, Injector, ElementRef, ViewChildren, Pipe, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
-import { isPlatformBrowser, getLocaleMonthNames, FormStyle, TranslationWidth, getLocaleDayNames, DOCUMENT, CommonModule } from '@angular/common';
+import { isPlatformBrowser, formatDate, getLocaleMonthNames, FormStyle, TranslationWidth, getLocaleDayNames, DOCUMENT, CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/router';
 import { Router, ActivatedRoute, NavigationStart, ActivationStart, RouterModule } from '@angular/router';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { BehaviorSubject, Subject, of, fromEvent } from 'rxjs';
 import { filter, debounceTime, distinctUntilChanged, share, map } from 'rxjs/operators';
 import * as uuid from 'uuid';
-import * as i2 from '@indice/ng-auth';
+import * as i2$1 from '@indice/ng-auth';
 import { AuthService, IndiceAuthModule } from '@indice/ng-auth';
 
 //
@@ -645,236 +646,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Input
             }] } });
 
-class ListViewComponent {
-    constructor() {
-        // BUSY STATE
-        this.busy = false;
-        // PAGING - pass through for pager component
-        this.count = null;
-        this.page = 1;
-        this.view = ListViewType.Table;
-        this.sort = null;
-        // tslint:disable-next-line:no-input-rename
-        this.pageSize = 20;
-        // tslint:disable-next-line:no-input-rename
-        this.pageSizeOptions = [];
-        // SORTING - pass through for pager component
-        // tslint:disable-next-line:no-input-rename
-        this.sortOptions = [];
-        // tslint:disable-next-line:no-input-rename
-        this.sortdir = '-';
-        // tslint:disable-next-line:no-input-rename
-        this.tilesCount = 4;
-        // tslint:disable-next-line:no-input-rename
-        this.showPager = true;
-        // tslint:disable-next-line:no-input-rename
-        this.pagerPosition = PagerPosition.Top;
-        // DETAILS SECTION
-        // Check if details section and button should be displayed according to the count of the value given
-        // tslint:disable-next-line:no-input-rename
-        this.detailsSectionPropertyCount = null;
-        this.pageChanged = new EventEmitter();
-        this.pageSizeChanged = new EventEmitter();
-        this.detailsOpened = new EventEmitter();
-        this.sortChanged = new EventEmitter();
-        this.sortdirChanged = new EventEmitter();
-        this.multipleFullWidth = false;
-        this.expandIcon = Icons.Expand;
-        this.collapseIcon = Icons.Collapse;
-        this.tableViewSupported = false;
-        this.fullWidthTHClass = 'list-view-th-full';
-        this.fullWidthTDClass = 'list-view-td-full';
-        this.tilesViewSupported = false;
-        this.detailsSectionSupported = false;
-        this.loaderItems = [];
-        this.columns = [];
-        this.tilesDeckClass = 'cards-deck-4';
-        this.tileTemplate = null;
-        this.detailsTemplate = null;
-        for (let i = 0; i < 5; i++) {
-            this.loaderItems.push({});
-        }
-        if (this.pagerPosition) {
-            this.pagerPosition = this.pagerPosition;
-        }
-    }
-    // COLUMNS
-    set cols(refs) {
-        this.columns = refs?.toArray();
-        if (this.columns && this.columns.length > 0) {
-            this.tableViewSupported = true;
+var Operators;
+(function (Operators) {
+    Operators.EQUALS = { label: '=', value: 'eq', description: 'Ίσο με' };
+    Operators.NOT_EQUALS = { label: '≠', value: 'neq', description: 'Διάφορο του' };
+    Operators.GREATER_THAN = { label: '>', value: 'gt', description: 'Μεγαλύτερο από' };
+    Operators.LESS_THAN = { label: '<', value: 'lt', description: 'Μικρότερο από' };
+    Operators.GREATER_THAN_EQUAL = { label: '≥', value: 'gte', description: 'Μεγαλύτερο ή ίσο με' };
+    Operators.LESS_THAN_EQUAL = { label: '≤', value: 'lte', description: 'Μικρότερο ή ίσο με' };
+    Operators.CONTAINS = { label: '∋', value: 'contains', description: 'Περιέχει' };
+    Operators.IN = { label: '1..n', value: 'in', description: 'Μέσα σε' };
+})(Operators || (Operators = {}));
+var QueryParameters;
+(function (QueryParameters) {
+    QueryParameters["VIEW"] = "view";
+    QueryParameters["PAGE_SIZE"] = "pagesize";
+    QueryParameters["PAGE"] = "page";
+    QueryParameters["SEARCH"] = "search";
+    QueryParameters["SORT_FIELD"] = "sort";
+    QueryParameters["SORT_DIRECTION"] = "dir";
+    QueryParameters["FILTER"] = "filter";
+    QueryParameters["FILTER_FROM"] = "from";
+    QueryParameters["FILTER_TO"] = "to";
+})(QueryParameters || (QueryParameters = {}));
+class FilterClause {
+    constructor(member, value, operator, dataType, searchOptions) {
+        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 ? 'Από' : 'Έως';
         }
-        this.multipleFullWidth = this.columns.filter(c => c.fullWidth).length > 1;
-        this.fullWidthTHClass = this.multipleFullWidth ? 'list-view-th-half' : 'list-view-th-full';
-        this.fullWidthTDClass = this.multipleFullWidth ? 'list-view-td-half' : 'list-view-td-full';
-    }
-    // tslint:disable-next-line:no-input-rename
-    set tiles(ref) {
-        this.tileTemplate = ref;
-        if (this.tileTemplate) {
-            this.tilesViewSupported = true;
+        else {
+            this.uiName = this.member;
+            let fo = {};
+            if (searchOptions && searchOptions.length > 0) {
+                fo = searchOptions.find((f) => {
+                    return f.field === this.member;
+                });
+            }
+            if (fo) {
+                this.uiName = fo.name;
+            }
         }
-    }
-    set details(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 = formatDate(new Date(this.value), 'dd/MM/yyyy', 'en-US');
+        }
+        let fo;
+        if (searchOptions && searchOptions.length > 0) {
+            fo = searchOptions.find((f) => {
+                return f.field === this.member;
+            });
         }
-    }
-    ngOnChanges(changes) {
-        const tilesCountChange = changes['tiles-count'] || changes.tilesCount;
-        if (tilesCountChange) {
-            this.setTilesDeckClass(tilesCountChange.currentValue);
+        if (fo && fo.options) { // special treatment for arrays, if there is an options property then it is an array
+            this.dataType = 'array';
+            this.uiValue = fo.options.find((option) => {
+                return option.value === this.value;
+            })?.label;
+        }
+    }
+    static parse(text) {
+        const pattern = /^\s*([A-Za-z_][A-Za-z0-9_\.]+)::(eq|neq|gt|lt|gte|lte|contains|in)::(\((string|integer|number|boolean|datetime)\))?(.+)\s*$/gi;
+        if (text != null) {
+            const matches = pattern.exec(text);
+            if (matches != null) {
+                const path = matches[1];
+                const op = matches[2];
+                const dt = matches[4];
+                const v = matches[5];
+                return new FilterClause(path, v, op, dt);
+            }
         }
+        return undefined;
     }
-    // events
-    emitPageChanged($event) {
-        this.pageChanged.emit($event);
-    }
-    emitPageSizeChanged($event) {
-        this.pageSizeChanged.emit($event);
-    }
-    emitSortChanged($event) {
-        this.sortChanged.emit($event);
-    }
-    emitSortdirChanged($event) {
-        this.sortdirChanged.emit($event);
-    }
-    toggleDetails(item) {
-        item.detailsExpanded = !item.detailsExpanded;
-        this.detailsOpened.emit({ item, open: item.detailsExpanded });
-    }
-    // helpers
-    setTilesDeckClass(tiles) {
-        if (tiles >= 1 && tiles <= 4) {
-            this.tilesDeckClass =
-                this.view !== ListViewType.Gallery
-                    ? `cards-deck-${tiles}`
-                    : this.items && this.items.length > 0
-                        ? `gallery-deck-${tiles}`
-                        : 'gallery-deck';
+    toString() {
+        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}`;
         }
     }
-}
-ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListViewComponent, selector: "lib-list-view", inputs: { busy: "busy", items: "items", 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, 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=\"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>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { kind: "component", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-list-view', 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=\"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>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { busy: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], count: [{
-                type: Input
-            }], page: [{
-                type: Input
-            }], view: [{
-                type: Input
-            }], sort: [{
-                type: Input
-            }], pageSize: [{
-                type: Input,
-                args: ['page-size']
-            }], pageSizeOptions: [{
-                type: Input,
-                args: ['page-size-options']
-            }], sortOptions: [{
-                type: Input,
-                args: ['sort-options']
-            }], sortdir: [{
-                type: Input,
-                args: ['sort-dir']
-            }], tilesCount: [{
-                type: Input,
-                args: ['tiles-count']
-            }], showPager: [{
-                type: Input,
-                args: ['show-pager']
-            }], pagerPosition: [{
-                type: Input,
-                args: ['pager-position']
-            }], detailsSectionPropertyCount: [{
-                type: Input,
-                args: ['details-section-property-count']
-            }], cols: [{
-                type: ContentChildren,
-                args: [ListColumnComponent, { read: ListColumnComponent }]
-            }], tiles: [{
-                type: ContentChild,
-                args: [ListTileComponent, { read: ListTileComponent }]
-            }], details: [{
-                type: ContentChild,
-                args: [ListDetailsSectionComponent, { read: ListDetailsSectionComponent }]
-            }], pageChanged: [{
-                type: Output
-            }], pageSizeChanged: [{
-                type: Output
-            }], detailsOpened: [{
-                type: Output
-            }], sortChanged: [{
-                type: Output
-            }], sortdirChanged: [{
-                type: Output
-            }] } });
-
-class CollapsiblePanelComponent {
-    constructor() {
-        this.title = null;
-        this.visible = false;
-    }
-    ngOnInit() {
-    }
-}
-CollapsiblePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CollapsiblePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: CollapsiblePanelComponent, selector: "lib-collapsible-panel", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"collapsible-panel-container\">\r\n  <div class=\"collapsible-panel-container-shadow\">\r\n    <div class=\"collapsible-panel-container-inner\">\r\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\r\n        <div class=\"collapsible-panel-button-content-container\">\r\n          <span>{{ title }} </span>\r\n          <span class=\"ico-plus\"></span>\r\n        </div>\r\n      </button>\r\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CollapsiblePanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-collapsible-panel', template: "<div class=\"collapsible-panel-container\">\r\n  <div class=\"collapsible-panel-container-shadow\">\r\n    <div class=\"collapsible-panel-container-inner\">\r\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\r\n        <div class=\"collapsible-panel-button-content-container\">\r\n          <span>{{ title }} </span>\r\n          <span class=\"ico-plus\"></span>\r\n        </div>\r\n      </button>\r\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
-                type: Input
-            }] } });
-
-class KpiTileComponent {
-    constructor() {
-        this.title = undefined;
-        this.busy = false;
-        this.kpi = undefined;
-        // tslint:disable-next-line:no-output-rename
-        this.tileAction = new EventEmitter();
-    }
-    ngOnInit() {
-    }
-    emitTileAction($event) {
-        $event.preventDefault();
-        $event.stopPropagation();
-        this.tileAction.emit($event);
-        return false;
-    }
-}
-KpiTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: KpiTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-KpiTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: KpiTileComponent, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi" }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\"\r\n     [ngClass]=\"{'card-deck-busy' : busy }\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container\">\r\n      <a href=\"#\"\r\n         class=\"kpi-tile-action\"\r\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n    </div>\r\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n    <div class=\"card-footer\">\r\n      <div class=\"text-xs\">\r\n        <a href=\"#\"\r\n           class=\"kpi-tile-action\"\r\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: KpiTileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-kpi-tile', template: "<div class=\"card\"\r\n     [ngClass]=\"{'card-deck-busy' : busy }\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container\">\r\n      <a href=\"#\"\r\n         class=\"kpi-tile-action\"\r\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n    </div>\r\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n    <div class=\"card-footer\">\r\n      <div class=\"text-xs\">\r\n        <a href=\"#\"\r\n           class=\"kpi-tile-action\"\r\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
-                type: Input
-            }], busy: [{
-                type: Input
-            }], kpi: [{
-                type: Input
-            }], tileAction: [{
-                type: Output,
-                args: ['tile-action']
-            }] } });
+}
 
 // freaksly simple date picker : https://tailwind-elements.com/docs/standard/forms/datepicker/
 class DatepickerComponent {
@@ -1162,6 +1021,355 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Input
             }] } });
 
+class AdvancedSearchComponent {
+    constructor() {
+        this.advancedSearchChanged = new EventEmitter();
+        this.searchOptions = [];
+        this.filters = [];
+        this.menuOptions = [];
+        this.menuOptionsDictionary = {};
+    }
+    ngOnInit() {
+        this.searchOptions.forEach((searchOption) => {
+            this.menuOptions.push({
+                text: searchOption.name,
+                value: searchOption.field,
+                data: searchOption.dataType,
+                description: searchOption.placeholder,
+                icon: undefined
+            });
+            if (searchOption.dataType === 'array') {
+                let menuOpts = [];
+                searchOption.options?.forEach((selectInputOption) => {
+                    menuOpts.push({
+                        text: selectInputOption.label,
+                        value: selectInputOption.value,
+                        data: undefined,
+                        description: selectInputOption.description,
+                        icon: undefined
+                    });
+                });
+                this.menuOptionsDictionary[searchOption.field] = menuOpts;
+            }
+        });
+    }
+    selectedFieldChanged(field) {
+        this.selectedField = this.searchOptions.find((searchOption) => searchOption.field === field);
+        this.fieldValue = undefined;
+    }
+    selectedFieldValueChanged(fieldValue) {
+        this.fieldValue = fieldValue;
+    }
+    search() {
+        if (!this.selectedField || !this.selectedField.dataType) {
+            return;
+        }
+        // the filter is of type 'daterange'
+        if (this.selectedField.dataType === 'daterange') {
+            if (!this.selectedField.multiTerm) {
+                this.filters = this.filters.filter((f) => {
+                    return f.member !== QueryParameters.FILTER_FROM && f.member !== QueryParameters.FILTER_TO;
+                });
+            }
+            if (this.fieldValueDateFrom) {
+                const filterClauseFrom = new FilterClause(QueryParameters.FILTER_FROM, this.fieldValueDateFrom, Operators.GREATER_THAN_EQUAL.value, 'datetime', this.searchOptions);
+                this.filters.push(filterClauseFrom);
+            }
+            if (this.fieldValueDateTo) {
+                const filterClauseTo = new FilterClause(QueryParameters.FILTER_TO, this.fieldValueDateTo, Operators.LESS_THAN_EQUAL.value, 'datetime', this.searchOptions);
+                this.filters.push(filterClauseTo);
+            }
+        }
+        // the filter isn't of type 'daterange' (everything else)
+        else {
+            if (this.fieldValue === undefined) { // handle empty field value
+                return;
+            }
+            // create the filterClause
+            const filterClause = new FilterClause(this.selectedField.field, this.fieldValue, Operators.EQUALS.value, this.selectedField.dataType, this.searchOptions); // operator is always 'equals'...
+            if (!this.selectedField.multiTerm) { // multiTerm means that we can have multiple filter values of the SAME filter clause (eg "filter case types that are Phone OR Address")
+                this.filters = this.filters.filter((f) => {
+                    return f.member !== this.selectedField.field;
+                });
+            }
+            this.filters.push(filterClause);
+            this.fieldValue = undefined;
+        }
+        this.advancedSearchChanged.emit(this.filters);
+    }
+    removeFilter(index) {
+        if (this.filters && this.filters.length >= index) {
+            this.filters.splice(index, 1);
+            this.advancedSearchChanged.emit(this.filters);
+        }
+    }
+    clear() {
+        this.fieldValueDateFrom = undefined;
+        this.fieldValueDateTo = undefined;
+        this.selectedField = undefined;
+        this.fieldValue = undefined;
+        this.filters = [];
+        this.advancedSearchChanged.emit(this.filters);
+    }
+}
+AdvancedSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AdvancedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, ngImport: i0, template: "<div class=\"advanced-search-container\">\r\n    <div class=\"advanced-search-filter\">\r\n        <!--SEARCH FIELDS-->\r\n        <div class=\"advanced-search-filter-field-container\">\r\n            <label class=\"advanced-search-filter-field-label\"\r\n                   for=\"selectedField\">\r\n                \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n            </label>\r\n            <lib-drop-down-menu [options]=\"menuOptions\"\r\n                                (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n        </div>\r\n        <!--SEARCH FIELDS INPUT-->\r\n        <div *ngIf=\"selectedField\"\r\n             class=\"advanced-search-filter-value-container\">\r\n            <div *ngIf=\"selectedField.dataType === 'array'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n                                    [selected]=\"fieldValue\"\r\n                                    (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div *ngIf=\"selectedField.dataType === 'string'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <input (keyup.enter)=\"search()\"\r\n                       [(ngModel)]=\"fieldValue\"\r\n                       name=\"fieldValue\"\r\n                       type=\"text\"\r\n                       placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n                       maxlength=\"300\"\r\n                       class=\"advanced-search-filter-value-input\">\r\n            </div>\r\n            <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                <div>\r\n                    <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n                        \u0391\u03C0\u03CC:\r\n                    </span>\r\n                    <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n                                     [(ngModel)]=\"fieldValueDateFrom\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n                <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                    <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n                        \u0388\u03C9\u03C2:\r\n                    </span>\r\n                    <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n                                     [(ngModel)]=\"fieldValueDateTo\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedField\">\r\n            <!--DO SEARCH-->\r\n            <button type=\"button\"\r\n                    [ngClass]=\"{'opacity-50 cursor-not-allowed': fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined}\"\r\n                    [disabled]=\"fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined\"\r\n                    (click)=\"search()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n            </button>\r\n            <!--CLEAR-->\r\n            <button type=\"button\"\r\n                    (click)=\"clear()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n    <!--FILTER CHIPS-->\r\n    <!-- This example requires Tailwind CSS v2.0+ -->\r\n    <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n        <span *ngIf=\"filter && filter.member\"\r\n              class=\"advanced-search-chips\">\r\n            {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n            <button (click)=\"removeFilter(i)\"\r\n                    type=\"button\"\r\n                    class=\"advanced-search-chips-remove-filter\">\r\n                <span class=\"sr-only\">Remove large option</span>\r\n                <svg class=\"h-2 w-2\"\r\n                     stroke=\"currentColor\"\r\n                     fill=\"none\"\r\n                     viewBox=\"0 0 8 8\">\r\n                    <path stroke-linecap=\"round\"\r\n                          stroke-width=\"1.5\"\r\n                          d=\"M1 1l6 6m0-6L1 7\" />\r\n                </svg>\r\n            </button>\r\n        </span>\r\n    </ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder"], outputs: ["selectedChange", "selectedChanged"] }, { kind: "component", type: DatepickerComponent, selector: "lib-date-picker", inputs: ["readonly", "disabled", "inline", "display-format", "placeholder", "value", "minDate", "maxDate"], outputs: ["valueChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-advanced-search', 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>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { advancedSearchChanged: [{
+                type: Output
+            }], searchOptions: [{
+                type: Input,
+                args: ['search-options']
+            }], filters: [{
+                type: Input
+            }] } });
+
+class ListViewComponent {
+    constructor() {
+        this.searchOptions = [];
+        this.filters = [];
+        // BUSY STATE
+        this.busy = false;
+        // PAGING - pass through for pager component
+        this.count = null;
+        this.page = 1;
+        this.view = ListViewType.Table;
+        this.sort = null;
+        // tslint:disable-next-line:no-input-rename
+        this.pageSize = 20;
+        // tslint:disable-next-line:no-input-rename
+        this.pageSizeOptions = [];
+        // SORTING - pass through for pager component
+        // tslint:disable-next-line:no-input-rename
+        this.sortOptions = [];
+        // tslint:disable-next-line:no-input-rename
+        this.sortdir = '-';
+        // tslint:disable-next-line:no-input-rename
+        this.tilesCount = 4;
+        // tslint:disable-next-line:no-input-rename
+        this.showPager = true;
+        // tslint:disable-next-line:no-input-rename
+        this.pagerPosition = PagerPosition.Top;
+        // DETAILS SECTION
+        // Check if details section and button should be displayed according to the count of the value given
+        // tslint:disable-next-line:no-input-rename
+        this.detailsSectionPropertyCount = null;
+        this.pageChanged = new EventEmitter();
+        this.pageSizeChanged = new EventEmitter();
+        this.detailsOpened = new EventEmitter();
+        this.sortChanged = new EventEmitter();
+        this.sortdirChanged = new EventEmitter();
+        this.advancedSearchChanged = new EventEmitter();
+        this.multipleFullWidth = false;
+        this.expandIcon = Icons.Expand;
+        this.collapseIcon = Icons.Collapse;
+        this.tableViewSupported = false;
+        this.fullWidthTHClass = 'list-view-th-full';
+        this.fullWidthTDClass = 'list-view-td-full';
+        this.tilesViewSupported = false;
+        this.detailsSectionSupported = false;
+        this.loaderItems = [];
+        this.columns = [];
+        this.tilesDeckClass = 'cards-deck-4';
+        this.tileTemplate = null;
+        this.detailsTemplate = null;
+        for (let i = 0; i < 5; i++) {
+            this.loaderItems.push({});
+        }
+        if (this.pagerPosition) {
+            this.pagerPosition = this.pagerPosition;
+        }
+    }
+    // COLUMNS
+    set cols(refs) {
+        this.columns = refs?.toArray();
+        if (this.columns && this.columns.length > 0) {
+            this.tableViewSupported = true;
+        }
+        this.multipleFullWidth = this.columns.filter(c => c.fullWidth).length > 1;
+        this.fullWidthTHClass = this.multipleFullWidth ? 'list-view-th-half' : 'list-view-th-full';
+        this.fullWidthTDClass = this.multipleFullWidth ? 'list-view-td-half' : 'list-view-td-full';
+    }
+    // tslint:disable-next-line:no-input-rename
+    set tiles(ref) {
+        this.tileTemplate = ref;
+        if (this.tileTemplate) {
+            this.tilesViewSupported = true;
+        }
+    }
+    set details(ref) {
+        this.detailsTemplate = ref;
+        if (this.detailsTemplate) {
+            this.detailsSectionSupported = true;
+        }
+    }
+    ngOnChanges(changes) {
+        const tilesCountChange = changes['tiles-count'] || changes.tilesCount;
+        if (tilesCountChange) {
+            this.setTilesDeckClass(tilesCountChange.currentValue);
+        }
+    }
+    // events
+    emitPageChanged($event) {
+        this.pageChanged.emit($event);
+    }
+    emitPageSizeChanged($event) {
+        this.pageSizeChanged.emit($event);
+    }
+    emitSortChanged($event) {
+        this.sortChanged.emit($event);
+    }
+    emitSortdirChanged($event) {
+        this.sortdirChanged.emit($event);
+    }
+    emitAdvancedSearchChanged($event) {
+        this.advancedSearchChanged.emit($event);
+    }
+    toggleDetails(item) {
+        item.detailsExpanded = !item.detailsExpanded;
+        this.detailsOpened.emit({ item, open: item.detailsExpanded });
+    }
+    // helpers
+    setTilesDeckClass(tiles) {
+        if (tiles >= 1 && tiles <= 4) {
+            this.tilesDeckClass =
+                this.view !== ListViewType.Gallery
+                    ? `cards-deck-${tiles}`
+                    : this.items && this.items.length > 0
+                        ? `gallery-deck-${tiles}`
+                        : 'gallery-deck';
+        }
+        else {
+            this.tilesDeckClass =
+                this.view !== ListViewType.Gallery
+                    ? 'cards-deck-3'
+                    : this.items && this.items.length > 0
+                        ? 'gallery-deck-3'
+                        : 'gallery-deck';
+        }
+    }
+}
+ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListViewComponent, selector: "lib-list-view", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters", busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged", advancedSearchChanged: "advancedSearchChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"px-2\">\r\n\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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { kind: "component", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options", "filters"], outputs: ["advancedSearchChanged"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-view', 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>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { searchOptions: [{
+                type: Input,
+                args: ['search-options']
+            }], filters: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], count: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], pageSize: [{
+                type: Input,
+                args: ['page-size']
+            }], pageSizeOptions: [{
+                type: Input,
+                args: ['page-size-options']
+            }], sortOptions: [{
+                type: Input,
+                args: ['sort-options']
+            }], sortdir: [{
+                type: Input,
+                args: ['sort-dir']
+            }], tilesCount: [{
+                type: Input,
+                args: ['tiles-count']
+            }], showPager: [{
+                type: Input,
+                args: ['show-pager']
+            }], pagerPosition: [{
+                type: Input,
+                args: ['pager-position']
+            }], detailsSectionPropertyCount: [{
+                type: Input,
+                args: ['details-section-property-count']
+            }], cols: [{
+                type: ContentChildren,
+                args: [ListColumnComponent, { read: ListColumnComponent }]
+            }], tiles: [{
+                type: ContentChild,
+                args: [ListTileComponent, { read: ListTileComponent }]
+            }], details: [{
+                type: ContentChild,
+                args: [ListDetailsSectionComponent, { read: ListDetailsSectionComponent }]
+            }], pageChanged: [{
+                type: Output
+            }], pageSizeChanged: [{
+                type: Output
+            }], detailsOpened: [{
+                type: Output
+            }], sortChanged: [{
+                type: Output
+            }], sortdirChanged: [{
+                type: Output
+            }], advancedSearchChanged: [{
+                type: Output
+            }] } });
+
+class CollapsiblePanelComponent {
+    constructor() {
+        this.title = null;
+        this.visible = false;
+    }
+    ngOnInit() {
+    }
+}
+CollapsiblePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CollapsiblePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: CollapsiblePanelComponent, selector: "lib-collapsible-panel", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"collapsible-panel-container\">\r\n  <div class=\"collapsible-panel-container-shadow\">\r\n    <div class=\"collapsible-panel-container-inner\">\r\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\r\n        <div class=\"collapsible-panel-button-content-container\">\r\n          <span>{{ title }} </span>\r\n          <span class=\"ico-plus\"></span>\r\n        </div>\r\n      </button>\r\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CollapsiblePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-collapsible-panel', template: "<div class=\"collapsible-panel-container\">\r\n  <div class=\"collapsible-panel-container-shadow\">\r\n    <div class=\"collapsible-panel-container-inner\">\r\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\r\n        <div class=\"collapsible-panel-button-content-container\">\r\n          <span>{{ title }} </span>\r\n          <span class=\"ico-plus\"></span>\r\n        </div>\r\n      </button>\r\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }] } });
+
+class KpiTileComponent {
+    constructor() {
+        this.title = undefined;
+        this.busy = false;
+        this.kpi = undefined;
+        // tslint:disable-next-line:no-output-rename
+        this.tileAction = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    emitTileAction($event) {
+        $event.preventDefault();
+        $event.stopPropagation();
+        this.tileAction.emit($event);
+        return false;
+    }
+}
+KpiTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: KpiTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KpiTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: KpiTileComponent, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi" }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\"\r\n     [ngClass]=\"{'card-deck-busy' : busy }\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container\">\r\n      <a href=\"#\"\r\n         class=\"kpi-tile-action\"\r\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n    </div>\r\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n    <div class=\"card-footer\">\r\n      <div class=\"text-xs\">\r\n        <a href=\"#\"\r\n           class=\"kpi-tile-action\"\r\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: KpiTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-kpi-tile', template: "<div class=\"card\"\r\n     [ngClass]=\"{'card-deck-busy' : busy }\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container\">\r\n      <a href=\"#\"\r\n         class=\"kpi-tile-action\"\r\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n    </div>\r\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n    <div class=\"card-footer\">\r\n      <div class=\"text-xs\">\r\n        <a href=\"#\"\r\n           class=\"kpi-tile-action\"\r\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], kpi: [{
+                type: Input
+            }], tileAction: [{
+                type: Output,
+                args: ['tile-action']
+            }] } });
+
 class ToasterService {
     constructor() {
         this.subject = new BehaviorSubject(NULL_TOAST);
@@ -1510,7 +1718,7 @@ class ComboboxComponent {
     }
 }
 ComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"relative mt-1\">\r\n    <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n        <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n            class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n            aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n    </form>\r\n    <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n        <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n        </svg>\r\n        <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n        </svg>\r\n    </div>\r\n    <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n        <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </li>\r\n    </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n    <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n    <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n    <div class=\"grid grid-cols-1\">\r\n        <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n            <div class=\"flex-1 min-w-0\">\r\n                <div class=\"focus:outline-none\">\r\n                    <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"ml-4 flex-shrink-0 flex\">\r\n                <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n                    <span class=\"sr-only\">Close</span>\r\n                    <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                            clip-rule=\"evenodd\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] });
+ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"relative mt-1\">\r\n    <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n        <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n            class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n            aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n    </form>\r\n    <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n        <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n        </svg>\r\n        <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n        </svg>\r\n    </div>\r\n    <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n        <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </li>\r\n    </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n    <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n    <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n    <div class=\"grid grid-cols-1\">\r\n        <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n            <div class=\"flex-1 min-w-0\">\r\n                <div class=\"focus:outline-none\">\r\n                    <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"ml-4 flex-shrink-0 flex\">\r\n                <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n                    <span class=\"sr-only\">Close</span>\r\n                    <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                            clip-rule=\"evenodd\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-combobox', template: "<div class=\"relative mt-1\">\r\n    <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n        <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n            class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n            aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n    </form>\r\n    <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n        <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n        </svg>\r\n        <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n        </svg>\r\n    </div>\r\n    <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n        <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </li>\r\n    </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n    <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n    <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n    <div class=\"grid grid-cols-1\">\r\n        <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n            <div class=\"flex-1 min-w-0\">\r\n                <div class=\"focus:outline-none\">\r\n                    <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"ml-4 flex-shrink-0 flex\">\r\n                <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n                    <span class=\"sr-only\">Close</span>\r\n                    <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                            clip-rule=\"evenodd\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>" }]
@@ -1636,7 +1844,7 @@ class LibTabGroupComponent {
 LibTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 LibTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibTabGroupComponent, selector: "lib-tab-group", outputs: { tabChanged: "tabChanged" }, providers: [
         { provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
-    ], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"tab-group-select-hidden\">\r\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\r\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\r\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\r\n    </select>\r\n</div>\r\n<div class=\"tab-group-container-hidden\">\r\n    <div class=\"tab-group-container\">\r\n        <nav class=\"tab-group-container-nav\" aria-label=\"Tabs\">\r\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\r\n                {{ tab.label }}\r\n            </a>\r\n        </nav>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"currentTab?.content\">\r\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    ], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"tab-group-select-hidden\">\r\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\r\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\r\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\r\n    </select>\r\n</div>\r\n<div class=\"tab-group-container-hidden\">\r\n    <div class=\"tab-group-container\">\r\n        <nav class=\"tab-group-container-nav\" aria-label=\"Tabs\">\r\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\r\n                {{ tab.label }}\r\n            </a>\r\n        </nav>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"currentTab?.content\">\r\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-tab-group', providers: [
@@ -2292,7 +2500,7 @@ UserProfileMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-user-profile-menu', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\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" }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$1.AuthService, decorators: [{
                     type: Inject,
                     args: [AuthService]
                 }] }, { type: i1$1.Router, decorators: [{
@@ -2387,7 +2595,7 @@ ShellHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-shell-header', 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" }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$1.AuthService, decorators: [{
                     type: Inject,
                     args: [AuthService]
                 }] }, { type: i1$1.Router, decorators: [{
@@ -2432,11 +2640,11 @@ class ShellSidebarHeaderComponent extends ShellHeaderComponent {
     }
 }
 ShellSidebarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-ShellSidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0, template: "<div class=\"shell-header-paddings\">\n    <div class=\"shell-header-border\">\n        <div class=\"shell-header-menu-container\">\n            <div class=\"shell-header-md-visible\">\n                <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n                <!-- Profile dropdown -->\n                <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n                    <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\n                </div>\n                <!-- Notifications dropdown -->\n                <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n                    <lib-notifications-indicator></lib-notifications-indicator>\n                </div>\n                <!-- languages dropdown -->\n                <div *ngIf=\"showLangs\" class=\"ml-4\">\n                    <lib-language-selection></lib-language-selection>\n                </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }] });
+ShellSidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0, template: "<div class=\"shell-header-paddings\">\r\n    <div class=\"shell-header-border\">\r\n        <div class=\"shell-header-menu-container\">\r\n            <div class=\"shell-header-md-visible\">\r\n                <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n                <!-- Profile dropdown -->\r\n                <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n                    <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n                </div>\r\n                <!-- Notifications dropdown -->\r\n                <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n                    <lib-notifications-indicator></lib-notifications-indicator>\r\n                </div>\r\n                <!-- languages dropdown -->\r\n                <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n                    <lib-language-selection></lib-language-selection>\r\n                </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n \r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-sidebar-header', template: "<div class=\"shell-header-paddings\">\n    <div class=\"shell-header-border\">\n        <div class=\"shell-header-menu-container\">\n            <div class=\"shell-header-md-visible\">\n                <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n                <!-- Profile dropdown -->\n                <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n                    <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\n                </div>\n                <!-- Notifications dropdown -->\n                <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n                    <lib-notifications-indicator></lib-notifications-indicator>\n                </div>\n                <!-- languages dropdown -->\n                <div *ngIf=\"showLangs\" class=\"ml-4\">\n                    <lib-language-selection></lib-language-selection>\n                </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n" }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
+            args: [{ selector: 'lib-shell-sidebar-header', 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" }]
+        }], ctorParameters: function () { return [{ type: i2$1.AuthService, decorators: [{
                     type: Inject,
                     args: [AuthService]
                 }] }, { type: i1$1.Router, decorators: [{
@@ -2464,10 +2672,10 @@ class ShellSidebarLayoutComponent {
     }
 }
 ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config" }, ngImport: i0, template: "<div>\n    <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\n    <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\n      <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\n      <div class=\"sidebar-off-canvas-menu-backdrop\" \n          [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\n      </div>\n  \n      <div class=\"sidebar-off-canvas-menu-container-inner\" \n      [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\" \n      [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\n        <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\n        <div class=\"sidebar-off-canvas-layout-container\">\n          <!--Close button, show/hide based on off-canvas menu state.-->\n          <div class=\"sidebar-off-canvas-toggle-button-container\">\n            <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n              <span class=\"sr-only\">Close sidebar</span>\n              <!-- Heroicon name: outline/x -->\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\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n  \n          <div class=\"sidebar-off-canvas-app-logo-container\">\n            <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n          </div>\n\n          <lib-shell-sidebar></lib-shell-sidebar>\n         \n        </div>\n  \n        <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\n          <!-- Dummy element to force sidebar to shrink to fit close icon -->\n        </div>\n      </div>\n    </div>\n  \n    <!-- Static sidebar for desktop -->\n    <div class=\"sidebar-static-menu-outer-container\">\n    \n    <div class=\"sidebar-static-menu-container\" \n      [class.sidebar-static-menu-container-active]=\"showMobileSidebar\" \n      [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\n      <!-- Sidebar component, swap this element with another sidebar if you like -->\n      <div class=\"sidebar-static-menu-container-inner\">\n        <div class=\"sidebar-static-menu-app-logo-container\">\n          <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n        </div>\n        <lib-shell-sidebar></lib-shell-sidebar>\n      </div>\n    </div>\n    </div>\n\n    <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\n      <div class=\"sidebar-static-menu-toggle-button-container\">\n        <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n          <span class=\"sr-only\">Toggle sidebar</span>\n          <!-- Heroicon name: outline/menu-alt-2 -->\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\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\n          </svg>\n        </button>\n        \n        <!-- sidebar-static-menu-header-container -->\n        <div class=\"sidebar-static-menu-header-container\">\n          <div class=\"sidebar-static-menu-header-near-container\">\n            \n          </div>\n          <div class=\"sidebar-static-menu-header-far-container\">\n            <lib-shell-sidebar-header \n            [show-userName]=\"config?.showUserNameOnHeader\"\n            [show-alerts]=\"config?.showAlertsOnHeader\" \n            [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\n          </div>\n        </div>\n      </div>\n  \n      <div flex-1>\n        <main class=\"shell-content-container-fluid\">\n            <div class=\"shell-content-container-inner\">\n              <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\n              <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\n            </div>\n          </main>\n      </div>\n    </div>\n  </div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }, { kind: "component", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }] });
+ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config" }, ngImport: i0, template: "<div>\r\n    <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\r\n    <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\r\n      <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\r\n      <div class=\"sidebar-off-canvas-menu-backdrop\" \r\n          [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\r\n      </div>\r\n  \r\n      <div class=\"sidebar-off-canvas-menu-container-inner\" \r\n      [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\" \r\n      [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\r\n        <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\r\n        <div class=\"sidebar-off-canvas-layout-container\">\r\n          <!--Close button, show/hide based on off-canvas menu state.-->\r\n          <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n            <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n              <span class=\"sr-only\">Close sidebar</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n  \r\n          <div class=\"sidebar-off-canvas-app-logo-container\">\r\n            <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n\r\n          <lib-shell-sidebar></lib-shell-sidebar>\r\n         \r\n        </div>\r\n  \r\n        <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\r\n          <!-- Dummy element to force sidebar to shrink to fit close icon -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  \r\n    <!-- Static sidebar for desktop -->\r\n    <div class=\"sidebar-static-menu-outer-container\">\r\n    \r\n    <div class=\"sidebar-static-menu-container\" \r\n      [class.sidebar-static-menu-container-active]=\"showMobileSidebar\" \r\n      [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\r\n      <!-- Sidebar component, swap this element with another sidebar if you like -->\r\n      <div class=\"sidebar-static-menu-container-inner\">\r\n        <div class=\"sidebar-static-menu-app-logo-container\">\r\n          <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n        </div>\r\n        <lib-shell-sidebar></lib-shell-sidebar>\r\n      </div>\r\n    </div>\r\n    </div>\r\n\r\n    <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\r\n      <div class=\"sidebar-static-menu-toggle-button-container\">\r\n        <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n          <span class=\"sr-only\">Toggle sidebar</span>\r\n          <!-- Heroicon name: outline/menu-alt-2 -->\r\n          <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n          </svg>\r\n        </button>\r\n        \r\n        <!-- sidebar-static-menu-header-container -->\r\n        <div class=\"sidebar-static-menu-header-container\">\r\n          <div class=\"sidebar-static-menu-header-near-container\">\r\n            <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"!showMobileSidebar\">\r\n              <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n            </div>\r\n          </div>\r\n          <div class=\"sidebar-static-menu-header-far-container\">\r\n            <lib-shell-sidebar-header \r\n            [show-userName]=\"config?.showUserNameOnHeader\"\r\n            [show-alerts]=\"config?.showAlertsOnHeader\" \r\n            [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\r\n          </div>\r\n        </div>\r\n      </div>\r\n  \r\n      <div flex-1>\r\n        <main class=\"shell-content-container-fluid\">\r\n            <div class=\"shell-content-container-inner\">\r\n              <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\r\n              <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n            </div>\r\n          </main>\r\n      </div>\r\n    </div>\r\n  </div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }, { kind: "component", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\n    <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\n    <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\n      <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\n      <div class=\"sidebar-off-canvas-menu-backdrop\" \n          [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\n      </div>\n  \n      <div class=\"sidebar-off-canvas-menu-container-inner\" \n      [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\" \n      [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\n        <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\n        <div class=\"sidebar-off-canvas-layout-container\">\n          <!--Close button, show/hide based on off-canvas menu state.-->\n          <div class=\"sidebar-off-canvas-toggle-button-container\">\n            <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n              <span class=\"sr-only\">Close sidebar</span>\n              <!-- Heroicon name: outline/x -->\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\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n  \n          <div class=\"sidebar-off-canvas-app-logo-container\">\n            <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n          </div>\n\n          <lib-shell-sidebar></lib-shell-sidebar>\n         \n        </div>\n  \n        <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\n          <!-- Dummy element to force sidebar to shrink to fit close icon -->\n        </div>\n      </div>\n    </div>\n  \n    <!-- Static sidebar for desktop -->\n    <div class=\"sidebar-static-menu-outer-container\">\n    \n    <div class=\"sidebar-static-menu-container\" \n      [class.sidebar-static-menu-container-active]=\"showMobileSidebar\" \n      [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\n      <!-- Sidebar component, swap this element with another sidebar if you like -->\n      <div class=\"sidebar-static-menu-container-inner\">\n        <div class=\"sidebar-static-menu-app-logo-container\">\n          <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n        </div>\n        <lib-shell-sidebar></lib-shell-sidebar>\n      </div>\n    </div>\n    </div>\n\n    <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\n      <div class=\"sidebar-static-menu-toggle-button-container\">\n        <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n          <span class=\"sr-only\">Toggle sidebar</span>\n          <!-- Heroicon name: outline/menu-alt-2 -->\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\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\n          </svg>\n        </button>\n        \n        <!-- sidebar-static-menu-header-container -->\n        <div class=\"sidebar-static-menu-header-container\">\n          <div class=\"sidebar-static-menu-header-near-container\">\n            \n          </div>\n          <div class=\"sidebar-static-menu-header-far-container\">\n            <lib-shell-sidebar-header \n            [show-userName]=\"config?.showUserNameOnHeader\"\n            [show-alerts]=\"config?.showAlertsOnHeader\" \n            [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\n          </div>\n        </div>\n      </div>\n  \n      <div flex-1>\n        <main class=\"shell-content-container-fluid\">\n            <div class=\"shell-content-container-inner\">\n              <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\n              <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\n            </div>\n          </main>\n      </div>\n    </div>\n  </div>" }]
+            args: [{ selector: 'lib-shell-sidebar-layout', 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>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }] } });
@@ -2493,10 +2701,10 @@ class ShellStackedLayoutComponent {
     }
 }
 ShellStackedLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ShellStackedLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\n    <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\n        <ng-container *ngIf=\"config?.customHeaderComponent\">\n        <div appDynamicComponentHost =\"Header\"></div>\n        </ng-container>\n        <lib-shell-header *ngIf=\"!config?.customHeaderComponent\" [show-userName]=\"config?.showUserNameOnHeader\"\n        [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\n        </lib-shell-header>\n    </div>\n</div>\n\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\n    <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\n        <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\n    </div>\n</main>\n\n<div class=\"shell-footer-container\" *ngIf=\"config?.showFooter\">\n    <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\n        <ng-container *ngIf=\"config?.customFooterComponent\">\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\n        </ng-container>\n        <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { kind: "component", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "show-langs", "border"] }, { kind: "component", type: ShellFooterComponent, selector: "lib-shell-footer" }] });
+ShellStackedLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\r\n    <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customHeaderComponent\">\r\n        <div appDynamicComponentHost =\"Header\"></div>\r\n        </ng-container>\r\n        <lib-shell-header *ngIf=\"!config?.customHeaderComponent\" [show-userName]=\"config?.showUserNameOnHeader\"\r\n        [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\r\n        </lib-shell-header>\r\n    </div>\r\n</div>\r\n\r\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n        <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\r\n    </div>\r\n</main>\r\n\r\n<div class=\"shell-footer-container\" *ngIf=\"config?.showFooter\">\r\n    <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customFooterComponent\">\r\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n        </ng-container>\r\n        <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { kind: "component", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "show-langs", "border"] }, { kind: "component", type: ShellFooterComponent, selector: "lib-shell-footer" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-stacked-layout', template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\n    <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\n        <ng-container *ngIf=\"config?.customHeaderComponent\">\n        <div appDynamicComponentHost =\"Header\"></div>\n        </ng-container>\n        <lib-shell-header *ngIf=\"!config?.customHeaderComponent\" [show-userName]=\"config?.showUserNameOnHeader\"\n        [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\n        </lib-shell-header>\n    </div>\n</div>\n\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\n    <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\n        <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\n    </div>\n</main>\n\n<div class=\"shell-footer-container\" *ngIf=\"config?.showFooter\">\n    <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\n        <ng-container *ngIf=\"config?.customFooterComponent\">\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\n        </ng-container>\n        <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\n    </div>\n</div>" }]
+            args: [{ selector: 'lib-shell-stacked-layout', 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>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }] } });
@@ -2915,7 +3123,7 @@ AuthCallbackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AuthCallbackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-auth-callback', template: "<lib-view-layout [title]=\"status\" [busy]=\"true\"></lib-view-layout>" }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$1.AuthService, decorators: [{
                     type: Inject,
                     args: [AuthService]
                 }] }, { type: i1$1.Router }]; } });
@@ -2941,7 +3149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                     selector: 'lib-auth-renew',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$1.AuthService, decorators: [{
                     type: Inject,
                     args: [AuthService]
                 }] }, { type: i1$1.Router }]; } });
@@ -2964,7 +3172,7 @@ LoggedOutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LoggedOutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-logged-out', template: "<lib-view-layout title=\"\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03C0\u03BF\u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF \u03BC\u03B5 \u03B5\u03C0\u03B9\u03C4\u03C5\u03C7\u03AF\u03B1!\"></lib-view-layout>" }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$1.AuthService, decorators: [{
                     type: Inject,
                     args: [AuthService]
                 }] }]; } });
@@ -3102,6 +3310,8 @@ class BaseListComponent {
         this.sort = '';
         this.sortdir = '';
         this.search = '';
+        this.filters = [];
+        this.searchOptions = [];
         this.sortOptions = [];
         this.metaItems = [];
     }
@@ -3156,13 +3366,37 @@ class BaseListComponent {
             if (params.get('dir') !== this.sortdir) {
                 this.sortdir = params.get('dir');
             }
+            // initialize filters that may reside in the query string
+            this.filters = this.getFiltersFrom(params);
         });
         // just to sync params in query
         this.setRouteParams(true);
         this.load();
     }
+    /**
+   * Get filters from a querystring
+   * @param queryParamMap
+   * @returns filters found from a paramMap
+   */
+    getFiltersFrom(queryParamMap) {
+        let filterResult = [];
+        if (queryParamMap.has(QueryParameters.FILTER) && queryParamMap.get(QueryParameters.FILTER).length > 0) {
+            let filterValue = queryParamMap.get(QueryParameters.FILTER);
+            const filterValues = filterValue?.split(","); // we may have multiple filters in filter query param
+            if (filterValues && filterValues.length > 0) {
+                // create the filterClauses derived from the query params
+                for (var index in filterValues) {
+                    let filterClause = FilterClause.parse(filterValues[index]);
+                    const parsed = new FilterClause(filterClause.member, filterClause.value, filterClause.operator, filterClause.dataType, this.searchOptions);
+                    if (parsed !== undefined) {
+                        filterResult.push(parsed);
+                    }
+                }
+            }
+        }
+        return filterResult;
+    }
     setRouteParams(locationChange = false) {
-        console.log(this.sortdir);
         this.router$.navigate([], {
             relativeTo: this.route$, queryParams: {
                 view: this.view,
@@ -3170,10 +3404,19 @@ class BaseListComponent {
                 pagesize: this.pageSize,
                 search: this.search,
                 sort: this.sort,
-                dir: this.sortdir
+                dir: this.sortdir,
+                filter: this.filterClausesToString(this.filters)
             }, queryParamsHandling: 'merge', skipLocationChange: locationChange
         });
     }
+    filterClausesToString(filters) {
+        return filters?.map((f) => {
+            if (f.dataType === 'datetime') {
+                f.value = (new Date(f.value)).toISOString();
+            }
+            return f.toString();
+        }).join(',');
+    }
     actionHandler($event) {
         // console.log('BaseListComponent actionHandler', $event);
         if ($event.key === 'refresh') {
@@ -3247,6 +3490,14 @@ class BaseListComponent {
             this.refresh();
         }
     }
+    advancedSearchChanged(filters) {
+        this.count = 0;
+        this.page = 1;
+        this.items = null;
+        this.filters = filters;
+        this.setRouteParams();
+        this.load();
+    }
     searchChanged(searchText) {
         this.count = 0;
         this.page = 1;
@@ -3770,9 +4021,11 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         LibStepInfoDirective,
         ShellSidebarHeaderComponent,
         ShellSidebarLayoutComponent,
-        ShellStackedLayoutComponent], imports: [CommonModule,
+        ShellStackedLayoutComponent,
+        AdvancedSearchComponent], imports: [CommonModule,
         RouterModule,
-        IndiceAuthModule], exports: [AddressPipe,
+        IndiceAuthModule,
+        FormsModule], exports: [AddressPipe,
         AuthCallbackComponent,
         AuthRenewComponent,
         AvatarInitialsComponent,
@@ -3813,7 +4066,8 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ViewLayoutComponent] });
 IndiceComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IndiceComponentsModule, imports: [CommonModule,
         RouterModule,
-        IndiceAuthModule] });
+        IndiceAuthModule,
+        FormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IndiceComponentsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -3874,12 +4128,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                         LibStepInfoDirective,
                         ShellSidebarHeaderComponent,
                         ShellSidebarLayoutComponent,
-                        ShellStackedLayoutComponent
+                        ShellStackedLayoutComponent,
+                        AdvancedSearchComponent
                     ],
                     imports: [
                         CommonModule,
                         RouterModule,
-                        IndiceAuthModule
+                        IndiceAuthModule,
+                        FormsModule
                     ],
                     exports: [
                         AddressPipe,