@indice/ng-components 0.2.161 → 0.2.162

package/fesm2015/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, NavigationStart, ActivatedRoute, ActivationStart, RouterModule } from '@angular/router';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Router, ActivatedRoute, NavigationStart, ActivationStart, RouterModule } from '@angular/router';
+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';
 
 //
@@ -647,236 +648,95 @@ 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 === null || refs === void 0 ? void 0 : 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) {
+        var _a;
+        this.member = member;
+        this.value = value;
+        this.operator = operator || Operators.EQUALS.value;
+        this.dataType = dataType === undefined ? 'string' : dataType;
+        // uiName
+        if (this.dataType === 'datetime') { // special treatment for dates
+            this.uiName = this.member === QueryParameters.FILTER_FROM ? 'Από' : 'Έως';
         }
-        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 = (_a = fo.options.find((option) => {
+                return option.value === this.value;
+            })) === null || _a === void 0 ? void 0 : _a.label;
+        }
+    }
+    static parse(text) {
+        const pattern = /^\s*([A-Za-z_][A-Za-z0-9_\.]+)::(eq|neq|gt|lt|gte|lte|contains|in)::(\((string|integer|number|boolean|datetime)\))?(.+)\s*$/gi;
+        if (text != null) {
+            const matches = pattern.exec(text);
+            if (matches != null) {
+                const path = matches[1];
+                const op = matches[2];
+                const dt = matches[4];
+                const v = matches[5];
+                return new FilterClause(path, v, op, dt);
+            }
         }
+        return undefined;
     }
-    // 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\">\n\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\n             [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n  </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n  <ng-container *ngSwitchCase=\"'tiles'\">\n    <div [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n\n    </div>\n  </ng-container>\n\n\n  <!-- *ngSwitchCase=\"'gallery'\" -->\n  <ng-container *ngSwitchCase=\"'gallery'\">\n    <ul role=\"list\" [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </ng-container>\n\n  <!-- *ngSwitchCase=\"'table'\" -->\n  <ng-container *ngSwitchDefault>\n\n    <div class=\"list-view-container\">\n      <div class=\"list-view-container-inner\">\n        <table class=\"list-view-table\">\n          <thead class=\"list-view-thead\">\n            <tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <th class=\"list-view-th-details\"></th>\n              </ng-container>\n              <ng-container *ngFor=\"let col of columns\">\n                <th scope=\"col\"\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\n                  {{col.title}}\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button disabled\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                    <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n          <tbody class=\"list-view-tbody\" *ngIf=\"!busy\">\n            <ng-container *ngFor=\"let item of items;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button (click)=\"toggleDetails(item)\"\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\n    <div class=\"cards-deck-1\">\n      <lib-list-view-empty-state></lib-list-view-empty-state>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n\n<div class=\"pt-2 px-2\">\n\n  <lib-pager *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\"\n             [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n  </lib-pager>\n</div>\n", 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\">\n\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\n             [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n  </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n  <ng-container *ngSwitchCase=\"'tiles'\">\n    <div [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n\n    </div>\n  </ng-container>\n\n\n  <!-- *ngSwitchCase=\"'gallery'\" -->\n  <ng-container *ngSwitchCase=\"'gallery'\">\n    <ul role=\"list\" [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </ng-container>\n\n  <!-- *ngSwitchCase=\"'table'\" -->\n  <ng-container *ngSwitchDefault>\n\n    <div class=\"list-view-container\">\n      <div class=\"list-view-container-inner\">\n        <table class=\"list-view-table\">\n          <thead class=\"list-view-thead\">\n            <tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <th class=\"list-view-th-details\"></th>\n              </ng-container>\n              <ng-container *ngFor=\"let col of columns\">\n                <th scope=\"col\"\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\n                  {{col.title}}\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button disabled\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                    <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n          <tbody class=\"list-view-tbody\" *ngIf=\"!busy\">\n            <ng-container *ngFor=\"let item of items;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button (click)=\"toggleDetails(item)\"\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\n    <div class=\"cards-deck-1\">\n      <lib-list-view-empty-state></lib-list-view-empty-state>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n\n<div class=\"pt-2 px-2\">\n\n  <lib-pager *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\"\n             [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n  </lib-pager>\n</div>\n" }]
-        }], 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\">\n  <div class=\"collapsible-panel-container-shadow\">\n    <div class=\"collapsible-panel-container-inner\">\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\n        <div class=\"collapsible-panel-button-content-container\">\n          <span>{{ title }} </span>\n          <span class=\"ico-plus\"></span>\n        </div>\n      </button>\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", 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\">\n  <div class=\"collapsible-panel-container-shadow\">\n    <div class=\"collapsible-panel-container-inner\">\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\n        <div class=\"collapsible-panel-button-content-container\">\n          <span>{{ title }} </span>\n          <span class=\"ico-plus\"></span>\n        </div>\n      </button>\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
-                type: Input
-            }] } });
-
-class KpiTileComponent {
-    constructor() {
-        this.title = undefined;
-        this.busy = false;
-        this.kpi = undefined;
-        // tslint:disable-next-line:no-output-rename
-        this.tileAction = new EventEmitter();
-    }
-    ngOnInit() {
-    }
-    emitTileAction($event) {
-        $event.preventDefault();
-        $event.stopPropagation();
-        this.tileAction.emit($event);
-        return false;
-    }
-}
-KpiTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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\"\n     [ngClass]=\"{'card-deck-busy' : busy }\">\n  <div class=\"card-body\">\n    <div class=\"kpi-tile-title-container\">\n      <a href=\"#\"\n         class=\"kpi-tile-action\"\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\n    </div>\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\n    <div class=\"card-footer\">\n      <div class=\"text-xs\">\n        <a href=\"#\"\n           class=\"kpi-tile-action\"\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\n      </div>\n    </div>\n  </div>\n</div>", 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\"\n     [ngClass]=\"{'card-deck-busy' : busy }\">\n  <div class=\"card-body\">\n    <div class=\"kpi-tile-title-container\">\n      <a href=\"#\"\n         class=\"kpi-tile-action\"\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\n    </div>\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\n    <div class=\"card-footer\">\n      <div class=\"text-xs\">\n        <a href=\"#\"\n           class=\"kpi-tile-action\"\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\n      </div>\n    </div>\n  </div>\n</div>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
-                type: Input
-            }], busy: [{
-                type: Input
-            }], kpi: [{
-                type: Input
-            }], tileAction: [{
-                type: Output,
-                args: ['tile-action']
-            }] } });
+}
 
 // freaksly simple date picker : https://tailwind-elements.com/docs/standard/forms/datepicker/
 class DatepickerComponent {
@@ -1096,79 +956,429 @@ class DatepickerComponent {
         this.showCalendarYears = this.paginate(this.calendarYears, this.calendarYearPage !== 0 ? this.calendarYearPage : 1);
         this.calcDays();
     }
-    openCalendar() {
-        this.showCalendar = !this.showCalendar;
-        this.calcDays();
+    openCalendar() {
+        this.showCalendar = !this.showCalendar;
+        this.calcDays();
+    }
+    closeCalendar() {
+        this.showCalendar = false;
+        this.getDateFromInput();
+    }
+    outOfRangeDate(date) {
+        let outOfRange = false;
+        if (this.minDate || this.maxDate) {
+            const d = new Date(this.year, this.month, date.day);
+            const dateInMillis = d.getTime();
+            if (this.minDate) {
+                let minDate = this.minDate.getTime();
+                if (dateInMillis < minDate && this.minDate.toDateString() !== d.toDateString()) {
+                    outOfRange = true;
+                }
+            }
+            if (this.maxDate) {
+                let maxDate = this.maxDate.getTime();
+                if (dateInMillis > maxDate && this.maxDate.toDateString() !== d.toDateString()) {
+                    outOfRange = true;
+                }
+            }
+        }
+        return outOfRange;
+    }
+}
+DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DatepickerComponent, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
+DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DatepickerComponent, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", inline: "inline", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { valueChange: "valueChange" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => DatepickerComponent),
+            multi: true
+        }
+    ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"flex\"\n     [ngClass]=\"{'relative': !inline}\"\n     (clickOutside)=\"closeCalendar()\">\n\n  <input type=\"text\"\n         *ngIf=\"!inline\"\n         #dateInput\n         [readonly]=\"readonly\"\n         name=\"dateInput\"\n         (blur)=\"onBlur($event)\"\n         id=\"dateInput\"\n         (focus)=\"showCalendar = false\"\n         [value]=\"value | date: displayFormat\"\n         class=\"detapicker-input\"\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\n         [placeholder]=\"disabled ? '' : placeholder\">\n\n  <button type=\"button\"\n          *ngIf=\"!inline\"\n          class=\"datepicker-button\"\n          [disabled]=\"disabled\"\n          (click)=\"openCalendar()\"\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n  </button>\n\n  <div *ngIf=\"showCalendar || inline\"\n       [ngClass]=\"{'absolute': !inline}\"\n       class=\"datepicker-background\"\n       style=\"height:18rem;min-width:16rem;\"\n       name=\"calendar\">\n    <div class=\"datepicker-btn-wrapper\">\n      <div>\n        <button type=\"button\"\n                (click)=\"openYears()\">\n          <span class=\"datepicker-selected-month\">\n            {{monthNames[month]}}\n          </span>\n          <span class=\"datepicker-selected-year\">\n            {{year}}</span>\n        </button>\n      </div>\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\n        <button type=\"button\"\n                class=\"datepicker-nav-btn\"\n                (click)=\"previousMonth();\">\n          <svg fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 19l-7-7 7-7\" />\n          </svg>\n        </button>\n        <button type=\"button\"\n                class=\"datepicker-nav-btn\"\n                (click)=\"nextMonth()\">\n          <svg fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 5l7 7-7 7\" />\n          </svg>\n        </button>\n      </div>\n      <ng-template #showYearsPickerTmpl>\n        <div>\n          <button type=\"button\"\n                  class=\"datepicker-nav-btn\"\n                  (click)=\"previousYear();\">\n            <svg fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M15 19l-7-7 7-7\" />\n            </svg>\n          </button>\n          <button type=\"button\"\n                  class=\"datepicker-nav-btn\"\n                  (click)=\"nextYear()\">\n            <svg fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"datepicker-wrapper\"\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\n      <div *ngFor=\"let day of dayNames\"\n           class=\"datepicker-day-name\"\n           style=\"width: 14.28%\">{{day}}</div>\n    </div>\n\n    <ng-template #showCalYearsTmpl>\n      <div class=\"datepicker-content-wrapper\">\n        <div *ngFor=\"let year of showCalendarYears\"\n             style=\"width: 18.28%\"\n             class=\"px-1 mb-1\">\n          <div (click)=\"selectYearValue(year)\"\n               class=\"datepicker-year\"\n               [class]=\"year.selected  ? 'selected' : 'not-selected'\">\n            {{year.year}}</div>\n        </div>\n      </div>\n    </ng-template>\n\n    <div class=\"datepicker-content-wrapper\"\n         *ngIf=\"!showYears\">\n      <div *ngFor=\"let blankday of blankDays\"\n           style=\"width: 14.28%\"\n           class=\"datepicker-blank-days\">{{blankday}}</div>\n      <div *ngFor=\"let date of calendarDates;\"\n           style=\"width: 14.28%\"\n           class=\"px-1 mb-1\">\n        <div (click)=\"selectDateValue(date)\"\n             class=\"datepicker-days\"\n             [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\n          {{date.day}}</div>\n      </div>\n    </div>\n  </div>\n\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: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-date-picker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatepickerComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"flex\"\n     [ngClass]=\"{'relative': !inline}\"\n     (clickOutside)=\"closeCalendar()\">\n\n  <input type=\"text\"\n         *ngIf=\"!inline\"\n         #dateInput\n         [readonly]=\"readonly\"\n         name=\"dateInput\"\n         (blur)=\"onBlur($event)\"\n         id=\"dateInput\"\n         (focus)=\"showCalendar = false\"\n         [value]=\"value | date: displayFormat\"\n         class=\"detapicker-input\"\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\n         [placeholder]=\"disabled ? '' : placeholder\">\n\n  <button type=\"button\"\n          *ngIf=\"!inline\"\n          class=\"datepicker-button\"\n          [disabled]=\"disabled\"\n          (click)=\"openCalendar()\"\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n  </button>\n\n  <div *ngIf=\"showCalendar || inline\"\n       [ngClass]=\"{'absolute': !inline}\"\n       class=\"datepicker-background\"\n       style=\"height:18rem;min-width:16rem;\"\n       name=\"calendar\">\n    <div class=\"datepicker-btn-wrapper\">\n      <div>\n        <button type=\"button\"\n                (click)=\"openYears()\">\n          <span class=\"datepicker-selected-month\">\n            {{monthNames[month]}}\n          </span>\n          <span class=\"datepicker-selected-year\">\n            {{year}}</span>\n        </button>\n      </div>\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\n        <button type=\"button\"\n                class=\"datepicker-nav-btn\"\n                (click)=\"previousMonth();\">\n          <svg fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 19l-7-7 7-7\" />\n          </svg>\n        </button>\n        <button type=\"button\"\n                class=\"datepicker-nav-btn\"\n                (click)=\"nextMonth()\">\n          <svg fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 5l7 7-7 7\" />\n          </svg>\n        </button>\n      </div>\n      <ng-template #showYearsPickerTmpl>\n        <div>\n          <button type=\"button\"\n                  class=\"datepicker-nav-btn\"\n                  (click)=\"previousYear();\">\n            <svg fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M15 19l-7-7 7-7\" />\n            </svg>\n          </button>\n          <button type=\"button\"\n                  class=\"datepicker-nav-btn\"\n                  (click)=\"nextYear()\">\n            <svg fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"datepicker-wrapper\"\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\n      <div *ngFor=\"let day of dayNames\"\n           class=\"datepicker-day-name\"\n           style=\"width: 14.28%\">{{day}}</div>\n    </div>\n\n    <ng-template #showCalYearsTmpl>\n      <div class=\"datepicker-content-wrapper\">\n        <div *ngFor=\"let year of showCalendarYears\"\n             style=\"width: 18.28%\"\n             class=\"px-1 mb-1\">\n          <div (click)=\"selectYearValue(year)\"\n               class=\"datepicker-year\"\n               [class]=\"year.selected  ? 'selected' : 'not-selected'\">\n            {{year.year}}</div>\n        </div>\n      </div>\n    </ng-template>\n\n    <div class=\"datepicker-content-wrapper\"\n         *ngIf=\"!showYears\">\n      <div *ngFor=\"let blankday of blankDays\"\n           style=\"width: 14.28%\"\n           class=\"datepicker-blank-days\">{{blankday}}</div>\n      <div *ngFor=\"let date of calendarDates;\"\n           style=\"width: 14.28%\"\n           class=\"px-1 mb-1\">\n        <div (click)=\"selectDateValue(date)\"\n             class=\"datepicker-days\"\n             [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\n          {{date.day}}</div>\n      </div>\n    </div>\n  </div>\n\n</div>" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [LOCALE_ID]
+                    }] }];
+    }, propDecorators: { readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }], displayFormat: [{
+                type: Input,
+                args: ['display-format']
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], dateInput: [{
+                type: ViewChild,
+                args: ['dateInput']
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }] } });
+
+class AdvancedSearchComponent {
+    constructor() {
+        this.advancedSearchChanged = new EventEmitter();
+        this.searchOptions = [];
+        this.filters = [];
+        this.menuOptions = [];
+        this.menuOptionsDictionary = {};
+    }
+    ngOnInit() {
+        this.searchOptions.forEach((searchOption) => {
+            var _a;
+            this.menuOptions.push({
+                text: searchOption.name,
+                value: searchOption.field,
+                data: searchOption.dataType,
+                description: searchOption.placeholder,
+                icon: undefined
+            });
+            if (searchOption.dataType === 'array') {
+                let menuOpts = [];
+                (_a = searchOption.options) === null || _a === void 0 ? void 0 : _a.forEach((selectInputOption) => {
+                    menuOpts.push({
+                        text: selectInputOption.label,
+                        value: selectInputOption.value,
+                        data: undefined,
+                        description: selectInputOption.description,
+                        icon: undefined
+                    });
+                });
+                this.menuOptionsDictionary[searchOption.field] = menuOpts;
+            }
+        });
+    }
+    selectedFieldChanged(field) {
+        this.selectedField = this.searchOptions.find((searchOption) => searchOption.field === field);
+        this.fieldValue = undefined;
+    }
+    selectedFieldValueChanged(fieldValue) {
+        this.fieldValue = fieldValue;
+    }
+    search() {
+        if (!this.selectedField || !this.selectedField.dataType) {
+            return;
+        }
+        // the filter is of type 'daterange'
+        if (this.selectedField.dataType === 'daterange') {
+            if (!this.selectedField.multiTerm) {
+                this.filters = this.filters.filter((f) => {
+                    return f.member !== QueryParameters.FILTER_FROM && f.member !== QueryParameters.FILTER_TO;
+                });
+            }
+            if (this.fieldValueDateFrom) {
+                const filterClauseFrom = new FilterClause(QueryParameters.FILTER_FROM, this.fieldValueDateFrom, Operators.GREATER_THAN_EQUAL.value, 'datetime', this.searchOptions);
+                this.filters.push(filterClauseFrom);
+            }
+            if (this.fieldValueDateTo) {
+                const filterClauseTo = new FilterClause(QueryParameters.FILTER_TO, this.fieldValueDateTo, Operators.LESS_THAN_EQUAL.value, 'datetime', this.searchOptions);
+                this.filters.push(filterClauseTo);
+            }
+        }
+        // the filter isn't of type 'daterange' (everything else)
+        else {
+            if (this.fieldValue === undefined) { // handle empty field value
+                return;
+            }
+            // create the filterClause
+            const filterClause = new FilterClause(this.selectedField.field, this.fieldValue, Operators.EQUALS.value, this.selectedField.dataType, this.searchOptions); // operator is always 'equals'...
+            if (!this.selectedField.multiTerm) { // multiTerm means that we can have multiple filter values of the SAME filter clause (eg "filter case types that are Phone OR Address")
+                this.filters = this.filters.filter((f) => {
+                    return f.member !== this.selectedField.field;
+                });
+            }
+            this.filters.push(filterClause);
+            this.fieldValue = undefined;
+        }
+        this.advancedSearchChanged.emit(this.filters);
+    }
+    removeFilter(index) {
+        if (this.filters && this.filters.length >= index) {
+            this.filters.splice(index, 1);
+            this.advancedSearchChanged.emit(this.filters);
+        }
+    }
+    clear() {
+        this.fieldValueDateFrom = undefined;
+        this.fieldValueDateTo = undefined;
+        this.selectedField = undefined;
+        this.fieldValue = undefined;
+        this.filters = [];
+        this.advancedSearchChanged.emit(this.filters);
+    }
+}
+AdvancedSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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\">\n    <div class=\"advanced-search-filter\">\n        <!--SEARCH FIELDS-->\n        <div class=\"advanced-search-filter-field-container\">\n            <label class=\"advanced-search-filter-field-label\"\n                   for=\"selectedField\">\n                \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\n            </label>\n            <lib-drop-down-menu [options]=\"menuOptions\"\n                                (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\n        </div>\n        <!--SEARCH FIELDS INPUT-->\n        <div *ngIf=\"selectedField\"\n             class=\"advanced-search-filter-value-container\">\n            <div *ngIf=\"selectedField.dataType === 'array'\">\n                <label class=\"advanced-search-filter-value-label\"\n                       for=\"fieldValue\">\n                    &nbsp;\n                </label>\n                <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\n                                    [selected]=\"fieldValue\"\n                                    (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\n            </div>\n            <div *ngIf=\"selectedField.dataType === 'string'\">\n                <label class=\"advanced-search-filter-value-label\"\n                       for=\"fieldValue\">\n                    &nbsp;\n                </label>\n                <input (keyup.enter)=\"search()\"\n                       [(ngModel)]=\"fieldValue\"\n                       name=\"fieldValue\"\n                       type=\"text\"\n                       placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\n                       maxlength=\"300\"\n                       class=\"advanced-search-filter-value-input\">\n            </div>\n            <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\n                <div>\n                    <span class=\"advanced-search-filter-value-input-daterange-from\">\n                        \u0391\u03C0\u03CC:\n                    </span>\n                    <lib-date-picker [maxDate]=\"fieldValueDateTo\"\n                                     [(ngModel)]=\"fieldValueDateFrom\"\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n                </div>\n                <div *ngIf=\"selectedField.dataType === 'daterange'\">\n                    <span class=\"advanced-search-filter-value-input-daterange-to\">\n                        \u0388\u03C9\u03C2:\n                    </span>\n                    <lib-date-picker [minDate]=\"fieldValueDateFrom\"\n                                     [(ngModel)]=\"fieldValueDateTo\"\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n                </div>\n            </ng-container>\n        </div>\n        <ng-container *ngIf=\"selectedField\">\n            <!--DO SEARCH-->\n            <button type=\"button\"\n                    [ngClass]=\"{'opacity-50 cursor-not-allowed': fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined}\"\n                    [disabled]=\"fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined\"\n                    (click)=\"search()\">\n                <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\n            </button>\n            <!--CLEAR-->\n            <button type=\"button\"\n                    (click)=\"clear()\">\n                <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\n            </button>\n        </ng-container>\n    </div>\n    <!--FILTER CHIPS-->\n    <!-- This example requires Tailwind CSS v2.0+ -->\n    <ng-container *ngFor=\"let filter of filters; let i = index\">\n        <span *ngIf=\"filter && filter.member\"\n              class=\"advanced-search-chips\">\n            {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\n            <button (click)=\"removeFilter(i)\"\n                    type=\"button\"\n                    class=\"advanced-search-chips-remove-filter\">\n                <span class=\"sr-only\">Remove large option</span>\n                <svg class=\"h-2 w-2\"\n                     stroke=\"currentColor\"\n                     fill=\"none\"\n                     viewBox=\"0 0 8 8\">\n                    <path stroke-linecap=\"round\"\n                          stroke-width=\"1.5\"\n                          d=\"M1 1l6 6m0-6L1 7\" />\n                </svg>\n            </button>\n        </span>\n    </ng-container>\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\">\n    <div class=\"advanced-search-filter\">\n        <!--SEARCH FIELDS-->\n        <div class=\"advanced-search-filter-field-container\">\n            <label class=\"advanced-search-filter-field-label\"\n                   for=\"selectedField\">\n                \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\n            </label>\n            <lib-drop-down-menu [options]=\"menuOptions\"\n                                (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\n        </div>\n        <!--SEARCH FIELDS INPUT-->\n        <div *ngIf=\"selectedField\"\n             class=\"advanced-search-filter-value-container\">\n            <div *ngIf=\"selectedField.dataType === 'array'\">\n                <label class=\"advanced-search-filter-value-label\"\n                       for=\"fieldValue\">\n                    &nbsp;\n                </label>\n                <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\n                                    [selected]=\"fieldValue\"\n                                    (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\n            </div>\n            <div *ngIf=\"selectedField.dataType === 'string'\">\n                <label class=\"advanced-search-filter-value-label\"\n                       for=\"fieldValue\">\n                    &nbsp;\n                </label>\n                <input (keyup.enter)=\"search()\"\n                       [(ngModel)]=\"fieldValue\"\n                       name=\"fieldValue\"\n                       type=\"text\"\n                       placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\n                       maxlength=\"300\"\n                       class=\"advanced-search-filter-value-input\">\n            </div>\n            <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\n                <div>\n                    <span class=\"advanced-search-filter-value-input-daterange-from\">\n                        \u0391\u03C0\u03CC:\n                    </span>\n                    <lib-date-picker [maxDate]=\"fieldValueDateTo\"\n                                     [(ngModel)]=\"fieldValueDateFrom\"\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n                </div>\n                <div *ngIf=\"selectedField.dataType === 'daterange'\">\n                    <span class=\"advanced-search-filter-value-input-daterange-to\">\n                        \u0388\u03C9\u03C2:\n                    </span>\n                    <lib-date-picker [minDate]=\"fieldValueDateFrom\"\n                                     [(ngModel)]=\"fieldValueDateTo\"\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n                </div>\n            </ng-container>\n        </div>\n        <ng-container *ngIf=\"selectedField\">\n            <!--DO SEARCH-->\n            <button type=\"button\"\n                    [ngClass]=\"{'opacity-50 cursor-not-allowed': fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined}\"\n                    [disabled]=\"fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined\"\n                    (click)=\"search()\">\n                <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\n            </button>\n            <!--CLEAR-->\n            <button type=\"button\"\n                    (click)=\"clear()\">\n                <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\n            </button>\n        </ng-container>\n    </div>\n    <!--FILTER CHIPS-->\n    <!-- This example requires Tailwind CSS v2.0+ -->\n    <ng-container *ngFor=\"let filter of filters; let i = index\">\n        <span *ngIf=\"filter && filter.member\"\n              class=\"advanced-search-chips\">\n            {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\n            <button (click)=\"removeFilter(i)\"\n                    type=\"button\"\n                    class=\"advanced-search-chips-remove-filter\">\n                <span class=\"sr-only\">Remove large option</span>\n                <svg class=\"h-2 w-2\"\n                     stroke=\"currentColor\"\n                     fill=\"none\"\n                     viewBox=\"0 0 8 8\">\n                    <path stroke-linecap=\"round\"\n                          stroke-width=\"1.5\"\n                          d=\"M1 1l6 6m0-6L1 7\" />\n                </svg>\n            </button>\n        </span>\n    </ng-container>\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 === null || refs === void 0 ? void 0 : refs.toArray();
+        if (this.columns && this.columns.length > 0) {
+            this.tableViewSupported = true;
+        }
+        this.multipleFullWidth = this.columns.filter(c => c.fullWidth).length > 1;
+        this.fullWidthTHClass = this.multipleFullWidth ? 'list-view-th-half' : 'list-view-th-full';
+        this.fullWidthTDClass = this.multipleFullWidth ? 'list-view-td-half' : 'list-view-td-full';
+    }
+    // tslint:disable-next-line:no-input-rename
+    set tiles(ref) {
+        this.tileTemplate = ref;
+        if (this.tileTemplate) {
+            this.tilesViewSupported = true;
+        }
+    }
+    set details(ref) {
+        this.detailsTemplate = ref;
+        if (this.detailsTemplate) {
+            this.detailsSectionSupported = true;
+        }
+    }
+    ngOnChanges(changes) {
+        const tilesCountChange = changes['tiles-count'] || changes.tilesCount;
+        if (tilesCountChange) {
+            this.setTilesDeckClass(tilesCountChange.currentValue);
+        }
+    }
+    // events
+    emitPageChanged($event) {
+        this.pageChanged.emit($event);
+    }
+    emitPageSizeChanged($event) {
+        this.pageSizeChanged.emit($event);
+    }
+    emitSortChanged($event) {
+        this.sortChanged.emit($event);
+    }
+    emitSortdirChanged($event) {
+        this.sortdirChanged.emit($event);
+    }
+    emitAdvancedSearchChanged($event) {
+        this.advancedSearchChanged.emit($event);
+    }
+    toggleDetails(item) {
+        item.detailsExpanded = !item.detailsExpanded;
+        this.detailsOpened.emit({ item, open: item.detailsExpanded });
+    }
+    // helpers
+    setTilesDeckClass(tiles) {
+        if (tiles >= 1 && tiles <= 4) {
+            this.tilesDeckClass =
+                this.view !== ListViewType.Gallery
+                    ? `cards-deck-${tiles}`
+                    : this.items && this.items.length > 0
+                        ? `gallery-deck-${tiles}`
+                        : 'gallery-deck';
+        }
+        else {
+            this.tilesDeckClass =
+                this.view !== ListViewType.Gallery
+                    ? 'cards-deck-3'
+                    : this.items && this.items.length > 0
+                        ? 'gallery-deck-3'
+                        : 'gallery-deck';
+        }
+    }
+}
+ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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\">\n\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\n                       [search-options]=\"searchOptions\"\n                       [filters]=\"filters\"\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\"></lib-advanced-search>\n\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\n             [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n  </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n  <ng-container *ngSwitchCase=\"'tiles'\">\n    <div [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\"\n                           [count]=\"5\"\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n\n    </div>\n  </ng-container>\n\n\n  <!-- *ngSwitchCase=\"'gallery'\" -->\n  <ng-container *ngSwitchCase=\"'gallery'\">\n    <ul role=\"list\"\n        [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\"\n                           [count]=\"5\"\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </ng-container>\n\n  <!-- *ngSwitchCase=\"'table'\" -->\n  <ng-container *ngSwitchDefault>\n\n    <div class=\"list-view-container\">\n      <div class=\"list-view-container-inner\">\n        <table class=\"list-view-table\">\n          <thead class=\"list-view-thead\">\n            <tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <th class=\"list-view-th-details\"></th>\n              </ng-container>\n              <ng-container *ngFor=\"let col of columns\">\n                <th scope=\"col\"\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\n                  {{col.title}}\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody class=\"list-view-tbody\"\n                 *ngIf=\"busy\">\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button disabled\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                  <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n          <tbody class=\"list-view-tbody\"\n                 *ngIf=\"!busy\">\n            <ng-container *ngFor=\"let item of items;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button (click)=\"toggleDetails(item)\"\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\n    <div class=\"cards-deck-1\">\n      <lib-list-view-empty-state></lib-list-view-empty-state>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n\n<div class=\"px-2\">\n  <lib-pager *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\"\n             class=\"pt-2\"\n             [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n  </lib-pager>\n</div>", 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\">\n\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\n                       [search-options]=\"searchOptions\"\n                       [filters]=\"filters\"\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\"></lib-advanced-search>\n\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\n             [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n  </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n  <ng-container *ngSwitchCase=\"'tiles'\">\n    <div [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\"\n                           [count]=\"5\"\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n\n    </div>\n  </ng-container>\n\n\n  <!-- *ngSwitchCase=\"'gallery'\" -->\n  <ng-container *ngSwitchCase=\"'gallery'\">\n    <ul role=\"list\"\n        [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\"\n                           [count]=\"5\"\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </ng-container>\n\n  <!-- *ngSwitchCase=\"'table'\" -->\n  <ng-container *ngSwitchDefault>\n\n    <div class=\"list-view-container\">\n      <div class=\"list-view-container-inner\">\n        <table class=\"list-view-table\">\n          <thead class=\"list-view-thead\">\n            <tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <th class=\"list-view-th-details\"></th>\n              </ng-container>\n              <ng-container *ngFor=\"let col of columns\">\n                <th scope=\"col\"\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\n                  {{col.title}}\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody class=\"list-view-tbody\"\n                 *ngIf=\"busy\">\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button disabled\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                  <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n          <tbody class=\"list-view-tbody\"\n                 *ngIf=\"!busy\">\n            <ng-container *ngFor=\"let item of items;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button (click)=\"toggleDetails(item)\"\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\n    <div class=\"cards-deck-1\">\n      <lib-list-view-empty-state></lib-list-view-empty-state>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n\n<div class=\"px-2\">\n  <lib-pager *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\"\n             class=\"pt-2\"\n             [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n  </lib-pager>\n</div>" }]
+        }], 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() {
     }
-    closeCalendar() {
-        this.showCalendar = false;
-        this.getDateFromInput();
+}
+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\">\n  <div class=\"collapsible-panel-container-shadow\">\n    <div class=\"collapsible-panel-container-inner\">\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\n        <div class=\"collapsible-panel-button-content-container\">\n          <span>{{ title }} </span>\n          <span class=\"ico-plus\"></span>\n        </div>\n      </button>\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", 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\">\n  <div class=\"collapsible-panel-container-shadow\">\n    <div class=\"collapsible-panel-container-inner\">\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\n        <div class=\"collapsible-panel-button-content-container\">\n          <span>{{ title }} </span>\n          <span class=\"ico-plus\"></span>\n        </div>\n      </button>\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }] } });
+
+class KpiTileComponent {
+    constructor() {
+        this.title = undefined;
+        this.busy = false;
+        this.kpi = undefined;
+        // tslint:disable-next-line:no-output-rename
+        this.tileAction = new EventEmitter();
     }
-    outOfRangeDate(date) {
-        let outOfRange = false;
-        if (this.minDate || this.maxDate) {
-            const d = new Date(this.year, this.month, date.day);
-            const dateInMillis = d.getTime();
-            if (this.minDate) {
-                let minDate = this.minDate.getTime();
-                if (dateInMillis < minDate && this.minDate.toDateString() !== d.toDateString()) {
-                    outOfRange = true;
-                }
-            }
-            if (this.maxDate) {
-                let maxDate = this.maxDate.getTime();
-                if (dateInMillis > maxDate && this.maxDate.toDateString() !== d.toDateString()) {
-                    outOfRange = true;
-                }
-            }
-        }
-        return outOfRange;
+    ngOnInit() {
+    }
+    emitTileAction($event) {
+        $event.preventDefault();
+        $event.stopPropagation();
+        this.tileAction.emit($event);
+        return false;
     }
 }
-DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DatepickerComponent, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
-DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DatepickerComponent, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", inline: "inline", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { valueChange: "valueChange" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => DatepickerComponent),
-            multi: true
-        }
-    ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"flex\"\n     [ngClass]=\"{'relative': !inline}\"\n     (clickOutside)=\"closeCalendar()\">\n\n  <input type=\"text\"\n         *ngIf=\"!inline\"\n         #dateInput\n         [readonly]=\"readonly\"\n         name=\"dateInput\"\n         (blur)=\"onBlur($event)\"\n         id=\"dateInput\"\n         (focus)=\"showCalendar = false\"\n         [value]=\"value | date: displayFormat\"\n         class=\"detapicker-input\"\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\n         [placeholder]=\"disabled ? '' : placeholder\">\n\n  <button type=\"button\"\n          *ngIf=\"!inline\"\n          class=\"datepicker-button\"\n          [disabled]=\"disabled\"\n          (click)=\"openCalendar()\"\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n  </button>\n\n  <div *ngIf=\"showCalendar || inline\"\n       [ngClass]=\"{'absolute': !inline}\"\n       class=\"datepicker-background\"\n       style=\"height:18rem;min-width:16rem;\"\n       name=\"calendar\">\n    <div class=\"datepicker-btn-wrapper\">\n      <div>\n        <button type=\"button\"\n                (click)=\"openYears()\">\n          <span class=\"datepicker-selected-month\">\n            {{monthNames[month]}}\n          </span>\n          <span class=\"datepicker-selected-year\">\n            {{year}}</span>\n        </button>\n      </div>\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\n        <button type=\"button\"\n                class=\"datepicker-nav-btn\"\n                (click)=\"previousMonth();\">\n          <svg fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 19l-7-7 7-7\" />\n          </svg>\n        </button>\n        <button type=\"button\"\n                class=\"datepicker-nav-btn\"\n                (click)=\"nextMonth()\">\n          <svg fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 5l7 7-7 7\" />\n          </svg>\n        </button>\n      </div>\n      <ng-template #showYearsPickerTmpl>\n        <div>\n          <button type=\"button\"\n                  class=\"datepicker-nav-btn\"\n                  (click)=\"previousYear();\">\n            <svg fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M15 19l-7-7 7-7\" />\n            </svg>\n          </button>\n          <button type=\"button\"\n                  class=\"datepicker-nav-btn\"\n                  (click)=\"nextYear()\">\n            <svg fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"datepicker-wrapper\"\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\n      <div *ngFor=\"let day of dayNames\"\n           class=\"datepicker-day-name\"\n           style=\"width: 14.28%\">{{day}}</div>\n    </div>\n\n    <ng-template #showCalYearsTmpl>\n      <div class=\"datepicker-content-wrapper\">\n        <div *ngFor=\"let year of showCalendarYears\"\n             style=\"width: 18.28%\"\n             class=\"px-1 mb-1\">\n          <div (click)=\"selectYearValue(year)\"\n               class=\"datepicker-year\"\n               [class]=\"year.selected  ? 'selected' : 'not-selected'\">\n            {{year.year}}</div>\n        </div>\n      </div>\n    </ng-template>\n\n    <div class=\"datepicker-content-wrapper\"\n         *ngIf=\"!showYears\">\n      <div *ngFor=\"let blankday of blankDays\"\n           style=\"width: 14.28%\"\n           class=\"datepicker-blank-days\">{{blankday}}</div>\n      <div *ngFor=\"let date of calendarDates;\"\n           style=\"width: 14.28%\"\n           class=\"px-1 mb-1\">\n        <div (click)=\"selectDateValue(date)\"\n             class=\"datepicker-days\"\n             [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\n          {{date.day}}</div>\n      </div>\n    </div>\n  </div>\n\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: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DatepickerComponent, decorators: [{
+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\"\n     [ngClass]=\"{'card-deck-busy' : busy }\">\n  <div class=\"card-body\">\n    <div class=\"kpi-tile-title-container\">\n      <a href=\"#\"\n         class=\"kpi-tile-action\"\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\n    </div>\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\n    <div class=\"card-footer\">\n      <div class=\"text-xs\">\n        <a href=\"#\"\n           class=\"kpi-tile-action\"\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\n      </div>\n    </div>\n  </div>\n</div>", 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-date-picker', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DatepickerComponent),
-                            multi: true
-                        }
-                    ], template: "<div class=\"flex\"\n     [ngClass]=\"{'relative': !inline}\"\n     (clickOutside)=\"closeCalendar()\">\n\n  <input type=\"text\"\n         *ngIf=\"!inline\"\n         #dateInput\n         [readonly]=\"readonly\"\n         name=\"dateInput\"\n         (blur)=\"onBlur($event)\"\n         id=\"dateInput\"\n         (focus)=\"showCalendar = false\"\n         [value]=\"value | date: displayFormat\"\n         class=\"detapicker-input\"\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\n         [placeholder]=\"disabled ? '' : placeholder\">\n\n  <button type=\"button\"\n          *ngIf=\"!inline\"\n          class=\"datepicker-button\"\n          [disabled]=\"disabled\"\n          (click)=\"openCalendar()\"\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n  </button>\n\n  <div *ngIf=\"showCalendar || inline\"\n       [ngClass]=\"{'absolute': !inline}\"\n       class=\"datepicker-background\"\n       style=\"height:18rem;min-width:16rem;\"\n       name=\"calendar\">\n    <div class=\"datepicker-btn-wrapper\">\n      <div>\n        <button type=\"button\"\n                (click)=\"openYears()\">\n          <span class=\"datepicker-selected-month\">\n            {{monthNames[month]}}\n          </span>\n          <span class=\"datepicker-selected-year\">\n            {{year}}</span>\n        </button>\n      </div>\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\n        <button type=\"button\"\n                class=\"datepicker-nav-btn\"\n                (click)=\"previousMonth();\">\n          <svg fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 19l-7-7 7-7\" />\n          </svg>\n        </button>\n        <button type=\"button\"\n                class=\"datepicker-nav-btn\"\n                (click)=\"nextMonth()\">\n          <svg fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 5l7 7-7 7\" />\n          </svg>\n        </button>\n      </div>\n      <ng-template #showYearsPickerTmpl>\n        <div>\n          <button type=\"button\"\n                  class=\"datepicker-nav-btn\"\n                  (click)=\"previousYear();\">\n            <svg fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M15 19l-7-7 7-7\" />\n            </svg>\n          </button>\n          <button type=\"button\"\n                  class=\"datepicker-nav-btn\"\n                  (click)=\"nextYear()\">\n            <svg fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"datepicker-wrapper\"\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\n      <div *ngFor=\"let day of dayNames\"\n           class=\"datepicker-day-name\"\n           style=\"width: 14.28%\">{{day}}</div>\n    </div>\n\n    <ng-template #showCalYearsTmpl>\n      <div class=\"datepicker-content-wrapper\">\n        <div *ngFor=\"let year of showCalendarYears\"\n             style=\"width: 18.28%\"\n             class=\"px-1 mb-1\">\n          <div (click)=\"selectYearValue(year)\"\n               class=\"datepicker-year\"\n               [class]=\"year.selected  ? 'selected' : 'not-selected'\">\n            {{year.year}}</div>\n        </div>\n      </div>\n    </ng-template>\n\n    <div class=\"datepicker-content-wrapper\"\n         *ngIf=\"!showYears\">\n      <div *ngFor=\"let blankday of blankDays\"\n           style=\"width: 14.28%\"\n           class=\"datepicker-blank-days\">{{blankday}}</div>\n      <div *ngFor=\"let date of calendarDates;\"\n           style=\"width: 14.28%\"\n           class=\"px-1 mb-1\">\n        <div (click)=\"selectDateValue(date)\"\n             class=\"datepicker-days\"\n             [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\n          {{date.day}}</div>\n      </div>\n    </div>\n  </div>\n\n</div>" }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [LOCALE_ID]
-                    }] }];
-    }, propDecorators: { readonly: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], inline: [{
-                type: Input
-            }], displayFormat: [{
-                type: Input,
-                args: ['display-format']
-            }], placeholder: [{
-                type: Input
-            }], value: [{
+            args: [{ selector: 'lib-kpi-tile', template: "<div class=\"card\"\n     [ngClass]=\"{'card-deck-busy' : busy }\">\n  <div class=\"card-body\">\n    <div class=\"kpi-tile-title-container\">\n      <a href=\"#\"\n         class=\"kpi-tile-action\"\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\n    </div>\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\n    <div class=\"card-footer\">\n      <div class=\"text-xs\">\n        <a href=\"#\"\n           class=\"kpi-tile-action\"\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\n      </div>\n    </div>\n  </div>\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
-            }], dateInput: [{
-                type: ViewChild,
-                args: ['dateInput']
-            }], minDate: [{
+            }], busy: [{
                 type: Input
-            }], maxDate: [{
+            }], kpi: [{
                 type: Input
+            }], tileAction: [{
+                type: Output,
+                args: ['tile-action']
             }] } });
 
 class ToasterService {
@@ -1426,14 +1636,20 @@ class NavLinksListComponent {
         // tslint:disable-next-line:no-input-rename
         this.showIcons = false;
     }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.fragmentSub$) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
     ngOnInit() {
+        var _a;
+        this.fragmentSub$ = (_a = this.activeFragment) === null || _a === void 0 ? void 0 : _a.subscribe(fragment => this.fragmentValue = fragment);
     }
 }
 NavLinksListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavLinksListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: { links: "links", activeFragment: ["active-fragment", "activeFragment"], navLinkClass: ["link-class", "navLinkClass"], navLinkActiveClass: ["link-active-class", "navLinkActiveClass"], containerClass: ["container-class", "containerClass"], showIcons: ["show-icons", "showIcons"] }, ngImport: i0, template: "\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\n  <div class=\"nav-link-list-container-inner\">\n    <ng-container *ngFor=\"let link of links | async\">\n      <ng-container [ngSwitch]=\"link.type\">\n        <a *ngSwitchCase=\"'router'\"\n          href=\"#\"\n          [routerLink]=\"[link.path]\"\n          [routerLinkActive]=\"navLinkActiveClass\"\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\n        </a>\n        <a *ngSwitchCase=\"'external'\"\n          [href]=\"link.path\"\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n        </a>\n        <a *ngSwitchCase=\"'fragment'\"\n          routerLink=\".\"\n          [fragment]=\"link.path\"\n          [class.active]=\"(activeFragment | async) === link.path\"\n          [routerLinkActive]=\"navLinkActiveClass\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n        </a>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+NavLinksListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: { links: "links", activeFragment: ["active-fragment", "activeFragment"], navLinkClass: ["link-class", "navLinkClass"], navLinkActiveClass: ["link-active-class", "navLinkActiveClass"], containerClass: ["container-class", "containerClass"], showIcons: ["show-icons", "showIcons"] }, ngImport: i0, template: "\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\n  <div class=\"nav-link-list-container-inner\">\n    <ng-container *ngFor=\"let link of links | async\">\n      <ng-container [ngSwitch]=\"link.type\">\n        <a *ngSwitchCase=\"'router'\"\n          href=\"#\"\n          [routerLink]=\"[link.path]\"\n          [routerLinkActive]=\"navLinkActiveClass\"\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\n        </a>\n        <a *ngSwitchCase=\"'external'\"\n          [href]=\"link.path\"\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n        </a>\n        <a *ngSwitchCase=\"'fragment'\"\n          routerLink=\".\"\n          [fragment]=\"link.path\"\n          [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n        </a>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavLinksListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-nav-links-list', template: "\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\n  <div class=\"nav-link-list-container-inner\">\n    <ng-container *ngFor=\"let link of links | async\">\n      <ng-container [ngSwitch]=\"link.type\">\n        <a *ngSwitchCase=\"'router'\"\n          href=\"#\"\n          [routerLink]=\"[link.path]\"\n          [routerLinkActive]=\"navLinkActiveClass\"\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\n        </a>\n        <a *ngSwitchCase=\"'external'\"\n          [href]=\"link.path\"\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n        </a>\n        <a *ngSwitchCase=\"'fragment'\"\n          routerLink=\".\"\n          [fragment]=\"link.path\"\n          [class.active]=\"(activeFragment | async) === link.path\"\n          [routerLinkActive]=\"navLinkActiveClass\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n        </a>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'lib-nav-links-list', template: "\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\n  <div class=\"nav-link-list-container-inner\">\n    <ng-container *ngFor=\"let link of links | async\">\n      <ng-container [ngSwitch]=\"link.type\">\n        <a *ngSwitchCase=\"'router'\"\n          href=\"#\"\n          [routerLink]=\"[link.path]\"\n          [routerLinkActive]=\"navLinkActiveClass\"\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\n        </a>\n        <a *ngSwitchCase=\"'external'\"\n          [href]=\"link.path\"\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n        </a>\n        <a *ngSwitchCase=\"'fragment'\"\n          routerLink=\".\"\n          [fragment]=\"link.path\"\n          [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n        </a>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { links: [{
                 type: Input
             }], activeFragment: [{
@@ -1518,7 +1734,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\">\n    <form autocomplete=\"off\" [id]=\"id + '-form'\">\n        <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\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\"\n            aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\n    </form>\n    <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\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\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n        </svg>\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\">\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\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>\n        </svg>\n    </div>\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\">\n        <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </li>\n    </ul>\n</div>\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\n    <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n    </li>\n</ul>\n<ng-template #defaultItemTemplate let-item>\n    <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\n</ng-template>\n<ng-template #defaultSelectedItemTemplate let-item>\n    <div class=\"grid grid-cols-1\">\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\">\n            <div class=\"flex-1 min-w-0\">\n                <div class=\"focus:outline-none\">\n                    <span class=\"absolute\" aria-hidden=\"true\"></span>\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\n                </div>\n            </div>\n            <div class=\"ml-4 flex-shrink-0 flex\">\n                <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\n                    <span class=\"sr-only\">Close</span>\n                    <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                        <path fill-rule=\"evenodd\"\n                            d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                            clip-rule=\"evenodd\" />\n                    </svg>\n                </button>\n            </div>\n        </div>\n    </div>\n</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\">\n    <form autocomplete=\"off\" [id]=\"id + '-form'\">\n        <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\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\"\n            aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\n    </form>\n    <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\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\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n        </svg>\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\">\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\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>\n        </svg>\n    </div>\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\">\n        <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </li>\n    </ul>\n</div>\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\n    <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n    </li>\n</ul>\n<ng-template #defaultItemTemplate let-item>\n    <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\n</ng-template>\n<ng-template #defaultSelectedItemTemplate let-item>\n    <div class=\"grid grid-cols-1\">\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\">\n            <div class=\"flex-1 min-w-0\">\n                <div class=\"focus:outline-none\">\n                    <span class=\"absolute\" aria-hidden=\"true\"></span>\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\n                </div>\n            </div>\n            <div class=\"ml-4 flex-shrink-0 flex\">\n                <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\n                    <span class=\"sr-only\">Close</span>\n                    <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                        <path fill-rule=\"evenodd\"\n                            d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                            clip-rule=\"evenodd\" />\n                    </svg>\n                </button>\n            </div>\n        </div>\n    </div>\n</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\">\n    <form autocomplete=\"off\" [id]=\"id + '-form'\">\n        <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\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\"\n            aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\n    </form>\n    <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\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\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n        </svg>\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\">\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\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>\n        </svg>\n    </div>\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\">\n        <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </li>\n    </ul>\n</div>\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\n    <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n    </li>\n</ul>\n<ng-template #defaultItemTemplate let-item>\n    <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\n</ng-template>\n<ng-template #defaultSelectedItemTemplate let-item>\n    <div class=\"grid grid-cols-1\">\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\">\n            <div class=\"flex-1 min-w-0\">\n                <div class=\"focus:outline-none\">\n                    <span class=\"absolute\" aria-hidden=\"true\"></span>\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\n                </div>\n            </div>\n            <div class=\"ml-4 flex-shrink-0 flex\">\n                <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\n                    <span class=\"sr-only\">Close</span>\n                    <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                        <path fill-rule=\"evenodd\"\n                            d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                            clip-rule=\"evenodd\" />\n                    </svg>\n                </button>\n            </div>\n        </div>\n    </div>\n</ng-template>" }]
@@ -1650,7 +1866,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\">\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\n    </select>\n</div>\n<div class=\"tab-group-container-hidden\">\n    <div class=\"tab-group-container\">\n        <nav class=\"tab-group-container-nav\" aria-label=\"Tabs\">\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\n                {{ tab.label }}\n            </a>\n        </nav>\n    </div>\n</div>\n<div *ngIf=\"currentTab?.content\">\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\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\">\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\n    </select>\n</div>\n<div class=\"tab-group-container-hidden\">\n    <div class=\"tab-group-container\">\n        <nav class=\"tab-group-container-nav\" aria-label=\"Tabs\">\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\n                {{ tab.label }}\n            </a>\n        </nav>\n    </div>\n</div>\n<div *ngIf=\"currentTab?.content\">\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\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: [
@@ -1704,13 +1920,11 @@ class LibStepComponent {
     }
     /** Indicates the index of the step. */
     get index() {
-        var _a;
-        return (_a = this._stepper) === null || _a === void 0 ? void 0 : _a.steps.toArray().indexOf(this);
+        return this._stepper ? this._stepper.steps.toArray().indexOf(this) : -1;
     }
     /** Indicates whether this step is the last step. */
     get isLast() {
-        var _a;
-        return ((_a = this._stepper) === null || _a === void 0 ? void 0 : _a.steps.length) - 1 === this.index;
+        return this._stepper ? this._stepper.steps.length - 1 === this.index : false;
     }
     /** Indicates whether you can navigate to the step or not. */
     get isValid() {
@@ -1785,11 +1999,15 @@ var StepperType;
 })(StepperType || (StepperType = {}));
 
 class LibStepperComponent {
-    constructor() {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
         // Private properties.
         this._currentStepIndex = 0;
+        this._isCompleted = false;
         /** Emmited when a step change occurs. */
         this.stepChanged = new EventEmitter();
+        /** Emmited when the stepper navigates away from the final step. Only emits once. */
+        this.completed = new EventEmitter();
         /** Indicates whether each step has to be validated before proceeding to the next. */
         this.linear = false;
         /** The type of the stepper. */
@@ -1806,19 +2024,38 @@ class LibStepperComponent {
     get currentStepIndex() {
         return this._currentStepIndex;
     }
+    /** Indicates whether stepper can go a step back. */
+    get canGoBack() {
+        return this._currentStepIndex > 0;
+    }
+    /** Indicates whether stepper can go a step forward. */
+    get canGoForward() {
+        var _a;
+        return this._currentStepIndex < ((_a = this.steps) === null || _a === void 0 ? void 0 : _a.length) - 1;
+    }
+    /** Indicates whether  */
+    get isCompleted() {
+        return this._isCompleted;
+    }
     ngOnInit() { }
+    ngAfterViewChecked() {
+        this._changeDetectorRef.detectChanges();
+    }
     /** Proceeds to the next step, if any. */
     goToNextStep() {
-        // Cannot go forward.
-        if (this._currentStepIndex === this.steps.length - 1) {
+        var _a;
+        if (((_a = this.currentStep) === null || _a === void 0 ? void 0 : _a.isLast) && !this._isCompleted) {
+            this._isCompleted = true;
+            this.completed.emit();
+        }
+        if (!this.canGoForward) {
             return;
         }
         this.updateCurrentStepIndex(this._currentStepIndex + 1);
     }
     /** Proceeds to the previous step, if any. */
     goToPreviousStep() {
-        // Cannot go back.
-        if (this._currentStepIndex === 0) {
+        if (!this.canGoBack) {
             return;
         }
         this.updateCurrentStepIndex(this._currentStepIndex - 1);
@@ -1844,20 +2081,22 @@ class LibStepperComponent {
         this._currentStepIndex = newIndex;
     }
 }
-LibStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LibStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged" }, providers: [
+LibStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+LibStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged", completed: "completed" }, providers: [
         { provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
-    ], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n    <!-- Bullets -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\n        <p class=\"text-sm font-medium\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n        <ol role=\"list\" class=\"ml-8 flex items-center space-x-5\">\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                <!-- Completed Step -->\n                <div class=\"block w-2.5 h-2.5 bg-blue-600 rounded-full hover:bg-blue-900\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"relative flex items-center justify-center\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"absolute w-5 h-5 p-px flex\" aria-hidden=\"true\">\n                        <span class=\"w-full h-full rounded-full bg-blue-200\"></span>\n                    </span>\n                    <span class=\"relative block w-2.5 h-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Upcoming Step -->\n                <div href=\"#\" class=\"block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Bullets & Text -->\n    <div class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\n        <nav aria-label=\"Progress\">\n            <ol role=\"list\" class=\"space-y-6\">\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                    <!-- Complete Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\n                        <span class=\"flex items-start\">\n                            <span class=\"flex-shrink-0 relative h-5 w-5 flex items-center justify-center\">\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                            <span class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"flex items-start\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                        <span class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                            <span class=\"absolute h-4 w-4 rounded-full bg-blue-200\"></span>\n                            <span class=\"relative block w-2 h-2 bg-blue-600 rounded-full\"></span>\n                        </span>\n                        <span class=\"ml-3 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"flex items-start\">\n                            <div class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                                <div class=\"h-2 w-2 bg-gray-300 rounded-full group-hover:bg-gray-400\"></div>\n                            </div>\n                            <p class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </p>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Circles -->\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\n        <ol class=\"flex items-center\" role=\"list\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\n                <!-- Completed Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                        </svg>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Circles With Text -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\n        <ol role=\"list\" class=\"overflow-hidden\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\n                <!-- Complete Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div href=\"#\" class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\n                <!-- Completed step -->\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                            </svg>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Active step -->\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\n                    </span>\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming step -->\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Arrow separator for lg screens and up -->\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels With Border -->\n    <div class=\"border-t border-b border-gray-200\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n        <nav class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\" aria-label=\"Progress\">\n            <ol role=\"list\" class=\"rounded-md overflow-hidden flex border-l border-r border-gray-200 lg:rounded-none\">\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative overflow-hidden lg:flex-1 cursor-pointer\">\n                    <!-- Completed Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-b-0 rounded-t-md lg:border-0\" *ngIf=\"step.state === StepState.Completed\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full\">\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"border border-gray-200 overflow-hidden lg:border-0\" *ngIf=\"step.state === StepState.Active\">\n                        <div aria-current=\"step\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-blue-600 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                                        <span class=\"text-blue-600\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-blue-600 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-t-0 rounded-b-md lg:border-0\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full\">\n                                        <span class=\"text-gray-500\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-gray-500 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Progress -->\n    <div *ngSwitchCase=\"StepperType.Progress\">\n        <div class=\"mt-6\" aria-hidden=\"true\">\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\n            </div>\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <!-- Simple -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\n                <!-- Completed Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n</ng-container>\n<ng-container *ngFor=\"let step of steps\">\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\n</ng-container>", 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"] }] });
+    ], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n    <!-- Bullets -->\n    <nav class=\"stepper-bullets-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\n        <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n        <ol role=\"list\" class=\"stepper-bullets-ol\">\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                <!-- Completed Step -->\n                <div class=\"stepper-bullets-completed-step\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"stepper-bullets-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"stepper-bullets-active-step-level1\" aria-hidden=\"true\">\n                        <span class=\"stepper-bullets-active-step-level1\"></span>\n                    </span>\n                    <span class=\"stepper-bullets-active-step-bullet\" aria-hidden=\"true\"></span>\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Upcoming Step -->\n                <div href=\"#\" class=\"stepper-bullets-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Bullets & Text -->\n    <div class=\"stepper-bullets-and-text-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\n        <nav aria-label=\"Progress\">\n            <ol role=\"list\" class=\"stepper-bullets-and-text-ol\">\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                    <!-- Complete Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\n                        <span class=\"stepper-bullets-and-text-completed-step\">\n                            <span class=\"stepper-bullets-and-text-completed-step-level1\">\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                            <span class=\"stepper-bullets-and-text-completed-step-container\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"stepper-bullets-and-text-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                        <span class=\"stepper-bullets-and-text-active-step-level1\" aria-hidden=\"true\">\n                            <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\n                            <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\n                        </span>\n                        <span class=\"stepper-bullets-and-text-active-step-container\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"stepper-bullets-and-text-upcoming-step\">\n                            <div class=\"stepper-bullets-and-text-upcoming-step-level1\" aria-hidden=\"true\">\n                                <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\n                            </div>\n                            <p class=\"stepper-bullets-and-text-upcoming-step-container\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </p>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Circles -->\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\n        <ol class=\"flex items-center\" role=\"list\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\n                <!-- Completed Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                        </svg>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Circles With Text -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\n        <ol role=\"list\" class=\"overflow-hidden\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\n                <!-- Complete Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div href=\"#\" class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\n                <!-- Completed step -->\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                            </svg>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Active step -->\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\n                    </span>\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming step -->\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Arrow separator for lg screens and up -->\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels With Border -->\n    <div class=\"panels-with-border-container\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n        <nav class=\"panels-with-border-nav\" aria-label=\"Progress\">\n            <ol role=\"list\" class=\"panels-with-border-ol\">\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"panels-with-border-li\">\n                    <!-- Completed Step -->\n                    <div class=\"panels-with-border-completed-step\" *ngIf=\"step.state === StepState.Completed\">\n                        <div class=\"group\">\n                            <span class=\"panels-with-border-completed-step-level1\" aria-hidden=\"true\"></span>\n                            <span class=\"panels-with-border-completed-step-level2\">\n                                <span class=\"panels-with-border-completed-step-level21\">\n                                    <span class=\"panels-with-border-completed-step-level211\">\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </span>\n                                <span class=\"panels-with-border-completed-step-level22\">\n                                    <span class=\"panels-with-border-completed-step-level221\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"panels-with-border-completed-step-level222\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"panels-with-border-active-step\" *ngIf=\"step.state === StepState.Active\">\n                        <div aria-current=\"step\">\n                            <span class=\"panels-with-border-active-step-level1\" aria-hidden=\"true\"></span>\n                            <span class=\"panels-with-border-active-step-level2\">\n                                <span class=\"panels-with-border-active-step-level21\">\n                                    <span class=\"panels-with-border-active-step-level211\">\n                                        <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"panels-with-border-active-step-level22\">\n                                    <span class=\"panels-with-border-active-step-level221\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"panels-with-border-active-step-level222\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"panels-with-border-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"group\">\n                            <span class=\"panels-with-border-upcoming-step-level1\" aria-hidden=\"true\"></span>\n                            <span class=\"panels-with-border-upcoming-step-level2\">\n                                <span class=\"panels-with-border-upcoming-step-level21\">\n                                    <span class=\"panels-with-border-upcoming-step-level211\">\n                                        <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"panels-with-border-upcoming-step-level22\">\n                                    <span class=\"panels-with-border-upcoming-step-level221\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Progress -->\n    <div *ngSwitchCase=\"StepperType.Progress\">\n        <div class=\"mt-6\" aria-hidden=\"true\">\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\n            </div>\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <!-- Simple -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\n                <!-- Completed Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n</ng-container>\n<ng-container *ngFor=\"let step of steps\">\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\n</ng-container>", 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-stepper', providers: [
                         { provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
-                    ], template: "<ng-container [ngSwitch]=\"type\">\n    <!-- Bullets -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\n        <p class=\"text-sm font-medium\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n        <ol role=\"list\" class=\"ml-8 flex items-center space-x-5\">\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                <!-- Completed Step -->\n                <div class=\"block w-2.5 h-2.5 bg-blue-600 rounded-full hover:bg-blue-900\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"relative flex items-center justify-center\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"absolute w-5 h-5 p-px flex\" aria-hidden=\"true\">\n                        <span class=\"w-full h-full rounded-full bg-blue-200\"></span>\n                    </span>\n                    <span class=\"relative block w-2.5 h-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Upcoming Step -->\n                <div href=\"#\" class=\"block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Bullets & Text -->\n    <div class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\n        <nav aria-label=\"Progress\">\n            <ol role=\"list\" class=\"space-y-6\">\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                    <!-- Complete Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\n                        <span class=\"flex items-start\">\n                            <span class=\"flex-shrink-0 relative h-5 w-5 flex items-center justify-center\">\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                            <span class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"flex items-start\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                        <span class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                            <span class=\"absolute h-4 w-4 rounded-full bg-blue-200\"></span>\n                            <span class=\"relative block w-2 h-2 bg-blue-600 rounded-full\"></span>\n                        </span>\n                        <span class=\"ml-3 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"flex items-start\">\n                            <div class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                                <div class=\"h-2 w-2 bg-gray-300 rounded-full group-hover:bg-gray-400\"></div>\n                            </div>\n                            <p class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </p>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Circles -->\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\n        <ol class=\"flex items-center\" role=\"list\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\n                <!-- Completed Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                        </svg>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Circles With Text -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\n        <ol role=\"list\" class=\"overflow-hidden\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\n                <!-- Complete Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div href=\"#\" class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\n                <!-- Completed step -->\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                            </svg>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Active step -->\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\n                    </span>\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming step -->\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Arrow separator for lg screens and up -->\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels With Border -->\n    <div class=\"border-t border-b border-gray-200\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n        <nav class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\" aria-label=\"Progress\">\n            <ol role=\"list\" class=\"rounded-md overflow-hidden flex border-l border-r border-gray-200 lg:rounded-none\">\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative overflow-hidden lg:flex-1 cursor-pointer\">\n                    <!-- Completed Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-b-0 rounded-t-md lg:border-0\" *ngIf=\"step.state === StepState.Completed\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full\">\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"border border-gray-200 overflow-hidden lg:border-0\" *ngIf=\"step.state === StepState.Active\">\n                        <div aria-current=\"step\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-blue-600 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                                        <span class=\"text-blue-600\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-blue-600 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-t-0 rounded-b-md lg:border-0\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full\">\n                                        <span class=\"text-gray-500\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-gray-500 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Progress -->\n    <div *ngSwitchCase=\"StepperType.Progress\">\n        <div class=\"mt-6\" aria-hidden=\"true\">\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\n            </div>\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <!-- Simple -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\n                <!-- Completed Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n</ng-container>\n<ng-container *ngFor=\"let step of steps\">\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\n</ng-container>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { steps: [{
+                    ], template: "<ng-container [ngSwitch]=\"type\">\n    <!-- Bullets -->\n    <nav class=\"stepper-bullets-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\n        <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n        <ol role=\"list\" class=\"stepper-bullets-ol\">\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                <!-- Completed Step -->\n                <div class=\"stepper-bullets-completed-step\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"stepper-bullets-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"stepper-bullets-active-step-level1\" aria-hidden=\"true\">\n                        <span class=\"stepper-bullets-active-step-level1\"></span>\n                    </span>\n                    <span class=\"stepper-bullets-active-step-bullet\" aria-hidden=\"true\"></span>\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Upcoming Step -->\n                <div href=\"#\" class=\"stepper-bullets-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Bullets & Text -->\n    <div class=\"stepper-bullets-and-text-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\n        <nav aria-label=\"Progress\">\n            <ol role=\"list\" class=\"stepper-bullets-and-text-ol\">\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                    <!-- Complete Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\n                        <span class=\"stepper-bullets-and-text-completed-step\">\n                            <span class=\"stepper-bullets-and-text-completed-step-level1\">\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                            <span class=\"stepper-bullets-and-text-completed-step-container\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"stepper-bullets-and-text-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                        <span class=\"stepper-bullets-and-text-active-step-level1\" aria-hidden=\"true\">\n                            <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\n                            <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\n                        </span>\n                        <span class=\"stepper-bullets-and-text-active-step-container\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"stepper-bullets-and-text-upcoming-step\">\n                            <div class=\"stepper-bullets-and-text-upcoming-step-level1\" aria-hidden=\"true\">\n                                <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\n                            </div>\n                            <p class=\"stepper-bullets-and-text-upcoming-step-container\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </p>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Circles -->\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\n        <ol class=\"flex items-center\" role=\"list\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\n                <!-- Completed Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                        </svg>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Circles With Text -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\n        <ol role=\"list\" class=\"overflow-hidden\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\n                <!-- Complete Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div href=\"#\" class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\n                <!-- Completed step -->\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                            </svg>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Active step -->\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\n                    </span>\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming step -->\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Arrow separator for lg screens and up -->\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels With Border -->\n    <div class=\"panels-with-border-container\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n        <nav class=\"panels-with-border-nav\" aria-label=\"Progress\">\n            <ol role=\"list\" class=\"panels-with-border-ol\">\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"panels-with-border-li\">\n                    <!-- Completed Step -->\n                    <div class=\"panels-with-border-completed-step\" *ngIf=\"step.state === StepState.Completed\">\n                        <div class=\"group\">\n                            <span class=\"panels-with-border-completed-step-level1\" aria-hidden=\"true\"></span>\n                            <span class=\"panels-with-border-completed-step-level2\">\n                                <span class=\"panels-with-border-completed-step-level21\">\n                                    <span class=\"panels-with-border-completed-step-level211\">\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </span>\n                                <span class=\"panels-with-border-completed-step-level22\">\n                                    <span class=\"panels-with-border-completed-step-level221\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"panels-with-border-completed-step-level222\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"panels-with-border-active-step\" *ngIf=\"step.state === StepState.Active\">\n                        <div aria-current=\"step\">\n                            <span class=\"panels-with-border-active-step-level1\" aria-hidden=\"true\"></span>\n                            <span class=\"panels-with-border-active-step-level2\">\n                                <span class=\"panels-with-border-active-step-level21\">\n                                    <span class=\"panels-with-border-active-step-level211\">\n                                        <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"panels-with-border-active-step-level22\">\n                                    <span class=\"panels-with-border-active-step-level221\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"panels-with-border-active-step-level222\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"panels-with-border-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"group\">\n                            <span class=\"panels-with-border-upcoming-step-level1\" aria-hidden=\"true\"></span>\n                            <span class=\"panels-with-border-upcoming-step-level2\">\n                                <span class=\"panels-with-border-upcoming-step-level21\">\n                                    <span class=\"panels-with-border-upcoming-step-level211\">\n                                        <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"panels-with-border-upcoming-step-level22\">\n                                    <span class=\"panels-with-border-upcoming-step-level221\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Progress -->\n    <div *ngSwitchCase=\"StepperType.Progress\">\n        <div class=\"mt-6\" aria-hidden=\"true\">\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\n            </div>\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <!-- Simple -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\n                <!-- Completed Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n</ng-container>\n<ng-container *ngFor=\"let step of steps\">\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\n</ng-container>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { steps: [{
                 type: ContentChildren,
                 args: [LibStepComponent, { descendants: true }]
             }], stepChanged: [{
                 type: Output
+            }], completed: [{
+                type: Output
             }], linear: [{
                 type: Input
             }], type: [{
@@ -2110,6 +2349,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }]; } });
 
+class ShellSidebarComponent {
+    constructor(router, route, links) {
+        this.router = router;
+        this.route = route;
+        this.links = links;
+        // tslint:disable-next-line:no-input-rename
+        this.sectionLinksPath = 'main';
+        this.sectionLinks = of([]);
+        // tslint:disable-next-line:no-input-rename
+        this.shellConfig = undefined;
+        this.activeFragment = null;
+    }
+    ngOnInit() {
+        this.activeFragment = this.route.fragment.pipe(share());
+        this.sectionLinks = this.links[this.sectionLinksPath];
+    }
+}
+ShellSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, deps: [{ token: Router }, { token: ActivatedRoute }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
+ShellSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\n<div class=\"shell-sidebar-component-container\">\n <div class=\"shell-sidebar-component-links-container sidebar\">\n    <lib-nav-links-list\n      [show-icons]=\"true\"\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'sidebar nav-link group'\"\n      [link-active-class]=\"'sidebar nav-link-active group'\">\n    </lib-nav-links-list>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-shell-sidebar', template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\n<div class=\"shell-sidebar-component-container\">\n <div class=\"shell-sidebar-component-links-container sidebar\">\n    <lib-nav-links-list\n      [show-icons]=\"true\"\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'sidebar nav-link group'\"\n      [link-active-class]=\"'sidebar nav-link-active group'\">\n    </lib-nav-links-list>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.Router, decorators: [{
+                        type: Inject,
+                        args: [Router]
+                    }] }, { type: i1$1.ActivatedRoute, decorators: [{
+                        type: Inject,
+                        args: [ActivatedRoute]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [APP_LINKS]
+                    }] }];
+    }, propDecorators: { sectionLinksPath: [{
+                type: Input,
+                args: ['section-links']
+            }], shellConfig: [{
+                type: Input,
+                args: ['config']
+            }] } });
+
 class NotificationsIndicatorComponent {
     constructor(notifications, links) {
         this.notifications = notifications;
@@ -2126,20 +2406,26 @@ class NotificationsIndicatorComponent {
         }
     }
     ngOnInit() {
-        this.links['notifications'].subscribe(notificationsLink => {
-            this.allNotificationsLink = notificationsLink;
-        });
-        this.notificationsSub$ = this.notifications.messages.subscribe(result => {
-            if (result.items) {
-                this.newArrival = true;
-                this.unreadCount = result.count;
-                this.items = result.items;
-                setTimeout(() => { this.newArrival = false; }, 1000);
-            }
-        });
+        var _a;
+        if (this.links && this.links['notifications']) {
+            this.links['notifications'].subscribe(notificationsLink => {
+                this.allNotificationsLink = notificationsLink;
+            });
+        }
+        if (this.notifications) {
+            this.notificationsSub$ = (_a = this.notifications) === null || _a === void 0 ? void 0 : _a.messages.subscribe(result => {
+                if (result.items) {
+                    this.newArrival = true;
+                    this.unreadCount = result.count;
+                    this.items = result.items;
+                    setTimeout(() => { this.newArrival = false; }, 1000);
+                }
+            });
+        }
     }
     doInboxAction() {
-        if (this.notifications.inboxAction) {
+        var _a;
+        if ((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.inboxAction) {
             this.notifications.inboxAction();
         }
         else {
@@ -2252,12 +2538,12 @@ class UserProfileMenuComponent {
     }
 }
 UserProfileMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UserProfileMenuComponent, deps: [{ token: AuthService }, { token: Router }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-UserProfileMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\" (click)=\"userMenuExpanded = !userMenuExpanded\">\n\n  <div class=\"inline-flex\">\n    <!-- Username -->\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\n        {{ user.profile.name }}\n      </div>\n    </div>\n\n    <div [class.ml-2]=\"showUserName\">\n      <button type=\"button\" *ngIf=\"user\"\n              class=\"shell-header-profile-dropdown-button\"\n              id=\"user-menu\"\n              aria-expanded=\"false\"\n              aria-haspopup=\"true\">\n        <span class=\"sr-only\">Open user menu</span>\n        <span class=\"avatar-container\">\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\n        </span>\n      </button>\n\n      <button type=\"button\"\n              *ngIf=\"!user\"\n              (click)=\"signin(null)\"\n              class=\"shell-header-profile-dropdown-button\"\n              id=\"user-menu\"\n              aria-expanded=\"false\"\n              aria-haspopup=\"true\">\n        <span class=\"sr-only\">sign in</span>\n        <span class=\"avatar-container\">\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\n        </span>\n      </button>\n    </div>\n  </div>\n\n  <div [class]=\"userMenuExpanded ?\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'\n    :\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'\"\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\n         <lib-nav-links-list\n            [links]=\"links.profile\"\n            [link-class]=\"'nav-link-profile'\"\n            [link-active-class]=\"'nav-link-profile-active'\">\n         </lib-nav-links-list>\n  </div>\n\n</div>\n\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
+UserProfileMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\n\n  <div class=\"inline-flex\">\n    <!-- Username -->\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\n        {{ user.profile.name }}\n      </div>\n    </div>\n\n    <div [class.ml-2]=\"showUserName\">\n      <button type=\"button\" \n              *ngIf=\"user\"\n              class=\"shell-header-profile-dropdown-button\"\n              id=\"user-menu\"\n              aria-expanded=\"false\"\n              aria-haspopup=\"true\"\n              (click)=\"userMenuExpanded = !userMenuExpanded\">\n        <span class=\"sr-only\">Open user menu</span>\n        <span class=\"avatar-container\">\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\n        </span>\n      </button>\n\n      <button type=\"button\"\n              *ngIf=\"!user\"\n              (click)=\"signin($event)\"\n              class=\"shell-header-profile-dropdown-button\"\n              id=\"user-menu\"\n              aria-expanded=\"false\"\n              aria-haspopup=\"true\">\n        <span class=\"sr-only\">sign in</span>\n        <span class=\"avatar-container\">\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\n        </span>\n      </button>\n    </div>\n  </div>\n\n  <div [class]=\"userMenuExpanded ?\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'\n    :\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'\"\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\n         <lib-nav-links-list\n            [links]=\"links.profile\"\n            [link-class]=\"'nav-link-profile'\"\n            [link-active-class]=\"'nav-link-profile-active'\">\n         </lib-nav-links-list>\n  </div>\n\n</div>\n\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user-profile-menu', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\" (click)=\"userMenuExpanded = !userMenuExpanded\">\n\n  <div class=\"inline-flex\">\n    <!-- Username -->\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\n        {{ user.profile.name }}\n      </div>\n    </div>\n\n    <div [class.ml-2]=\"showUserName\">\n      <button type=\"button\" *ngIf=\"user\"\n              class=\"shell-header-profile-dropdown-button\"\n              id=\"user-menu\"\n              aria-expanded=\"false\"\n              aria-haspopup=\"true\">\n        <span class=\"sr-only\">Open user menu</span>\n        <span class=\"avatar-container\">\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\n        </span>\n      </button>\n\n      <button type=\"button\"\n              *ngIf=\"!user\"\n              (click)=\"signin(null)\"\n              class=\"shell-header-profile-dropdown-button\"\n              id=\"user-menu\"\n              aria-expanded=\"false\"\n              aria-haspopup=\"true\">\n        <span class=\"sr-only\">sign in</span>\n        <span class=\"avatar-container\">\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\n        </span>\n      </button>\n    </div>\n  </div>\n\n  <div [class]=\"userMenuExpanded ?\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'\n    :\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'\"\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\n         <lib-nav-links-list\n            [links]=\"links.profile\"\n            [link-class]=\"'nav-link-profile'\"\n            [link-active-class]=\"'nav-link-profile-active'\">\n         </lib-nav-links-list>\n  </div>\n\n</div>\n\n" }]
+            args: [{ selector: 'lib-user-profile-menu', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\n\n  <div class=\"inline-flex\">\n    <!-- Username -->\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\n        {{ user.profile.name }}\n      </div>\n    </div>\n\n    <div [class.ml-2]=\"showUserName\">\n      <button type=\"button\" \n              *ngIf=\"user\"\n              class=\"shell-header-profile-dropdown-button\"\n              id=\"user-menu\"\n              aria-expanded=\"false\"\n              aria-haspopup=\"true\"\n              (click)=\"userMenuExpanded = !userMenuExpanded\">\n        <span class=\"sr-only\">Open user menu</span>\n        <span class=\"avatar-container\">\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\n        </span>\n      </button>\n\n      <button type=\"button\"\n              *ngIf=\"!user\"\n              (click)=\"signin($event)\"\n              class=\"shell-header-profile-dropdown-button\"\n              id=\"user-menu\"\n              aria-expanded=\"false\"\n              aria-haspopup=\"true\">\n        <span class=\"sr-only\">sign in</span>\n        <span class=\"avatar-container\">\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\n        </span>\n      </button>\n    </div>\n  </div>\n\n  <div [class]=\"userMenuExpanded ?\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'\n    :\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'\"\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\n         <lib-nav-links-list\n            [links]=\"links.profile\"\n            [link-class]=\"'nav-link-profile'\"\n            [link-active-class]=\"'nav-link-profile-active'\">\n         </lib-nav-links-list>\n  </div>\n\n</div>\n\n" }]
         }], ctorParameters: function () {
-        return [{ type: i2.AuthService, decorators: [{
+        return [{ type: i2$1.AuthService, decorators: [{
                         type: Inject,
                         args: [AuthService]
                     }] }, { type: i1$1.Router, decorators: [{
@@ -2288,7 +2574,7 @@ class ShellHeaderComponent {
         // tslint:disable-next-line:no-input-rename
         this.showAlerts = false;
         // tslint:disable-next-line:no-input-rename
-        this.shellLayout = ShellLayoutType.Stacked;
+        this.showLangs = false;
         this.border = true;
         this.sectionLinks = of([]);
         this.mobileMenuExpanded = false;
@@ -2350,12 +2636,12 @@ class ShellHeaderComponent {
     }
 }
 ShellHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-ShellHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"], shellLayout: ["shell-layout", "shellLayout"], border: "border" }, ngImport: i0, template: "<nav>\n  <div class=\"shell-header-paddings\">\n    <div [class]=\"border ? 'shell-header-border' : ''\">\n      <div class=\"shell-header-menu-container\">\n        <div *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-logo-container\">\n          <div>\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\n          </div>\n        </div>\n\n        <div *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-link-container\">\n          <div class=\"shell-header-link-container-inner\">\n            <lib-nav-links-list\n              [links]=\"sectionLinks\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'nav-link'\"\n              [link-active-class]=\"'nav-link-active'\">\n            </lib-nav-links-list>\n          </div>\n        </div>\n\n        <div class=\"shell-header-md-visible\">\n\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n\n            <lib-nav-links-list\n              [links]=\"links.profileActions\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'shell-header-menu-rounded-button'\"\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\n            </lib-nav-links-list>\n\n\n            <!-- Profile dropdown -->\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-2\">\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\n            </div>\n\n            <!-- Notifications dropdown -->\n            <div *ngIf=\"showAlerts && user\" class=\"ml-2\">\n              <lib-notifications-indicator></lib-notifications-indicator>\n            </div>\n\n            <!-- languages dropdown -->\n            <div *ngIf=\"config.showLangsOnHeader\" class=\"ml-2\">\n              <lib-language-selection></lib-language-selection>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mobile-menu-button-container\" *ngIf=\"shellLayout === 'Stacked'\">\n          <!-- Mobile menu button -->\n          <button type=\"button\"\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\n                  class=\"mobile-menu-button\"\n                  aria-controls=\"mobile-menu\"\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\n            <span class=\"sr-only\">Open main menu</span>\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\n            </svg>\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n  <!-- Mobile menu, show/hide based on menu state. -->\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\n    <lib-nav-links-list\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'nav-link-mobile'\"\n      [link-active-class]=\"'nav-link-mobile-active'\"\n      [container-class]=\"'mobile-menu-link-container'\">\n    </lib-nav-links-list>\n\n    <div *ngIf=\"!user\">\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\n      </a>\n    </div>\n\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\n      <div class=\"mobile-menu-user-info-container-inner\">\n        <div class=\"flex-shrink-0\">\n          <span class=\"mobile-menu-avatar-container\">\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\n          </span>\n        </div>\n        <div class=\"ml-3\">\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\n        </div>\n        <!--\n        <button class=\"mobile-menu-rounded-button\">\n          <span class=\"sr-only\">View notifications</span>\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\n               xmlns=\"http://www.w3.org/2000/svg\"\n               fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\"\n               aria-hidden=\"true\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\n          </svg>\n        </button>\n        -->\n      </div>\n    </div>\n\n    <lib-nav-links-list\n          [links]=\"links.profile\"\n          [active-fragment]=\"activeFragment\"\n          [link-class]=\"'nav-link-mobile'\"\n          [link-active-class]=\"'nav-link-mobile-active'\"\n          [container-class]=\"'mobile-menu-link-container'\">\n      </lib-nav-links-list>\n  </div>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }, { 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"] }] });
+ShellHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border" }, ngImport: i0, template: "<nav>\n  <div class=\"shell-header-paddings\">\n    <div class=\"shell-header-border\">\n      <div class=\"shell-header-menu-container\">\n        <div class=\"shell-header-logo-container\">\n          <div>\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\n          </div>\n        </div>\n\n        <div class=\"shell-header-link-container\">\n          <div class=\"shell-header-link-container-inner\">\n            <lib-nav-links-list\n              [links]=\"sectionLinks\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'nav-link'\"\n              [link-active-class]=\"'nav-link-active'\">\n            </lib-nav-links-list>\n          </div>\n        </div>\n\n        <div class=\"shell-header-md-visible\">\n\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n\n            <lib-nav-links-list\n              [links]=\"links.profileActions\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'shell-header-menu-rounded-button'\"\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\n            </lib-nav-links-list>\n\n\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\n            <!-- Notifications dropdown -->\n            <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n              <lib-notifications-indicator></lib-notifications-indicator>\n            </div>\n\n            <!-- languages dropdown -->\n            <div *ngIf=\"showLangs\" class=\"ml-4\">\n              <lib-language-selection></lib-language-selection>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mobile-menu-button-container\">\n          <!-- Mobile menu button -->\n          <button type=\"button\"\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\n                  class=\"mobile-menu-button\"\n                  aria-controls=\"mobile-menu\"\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\n            <span class=\"sr-only\">Open main menu</span>\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\n            </svg>\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Mobile menu, show/hide based on menu state. -->\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\n    <lib-nav-links-list\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'nav-link-mobile'\"\n      [link-active-class]=\"'nav-link-mobile-active'\"\n      [container-class]=\"'mobile-menu-link-container'\">\n    </lib-nav-links-list>\n\n    <div *ngIf=\"!user\">\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\n      </a>\n    </div>\n\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\n      <div class=\"mobile-menu-user-info-container-inner\">\n        <div class=\"flex-shrink-0\">\n          <span class=\"mobile-menu-avatar-container\">\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\n          </span>\n        </div>\n        <div class=\"ml-3\">\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\n        </div>\n        <!--\n        <button class=\"mobile-menu-rounded-button\">\n          <span class=\"sr-only\">View notifications</span>\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\n               xmlns=\"http://www.w3.org/2000/svg\"\n               fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\"\n               aria-hidden=\"true\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\n          </svg>\n        </button>\n        -->\n      </div>\n    </div>\n\n    <lib-nav-links-list\n          [links]=\"links.profile\"\n          [active-fragment]=\"activeFragment\"\n          [link-class]=\"'nav-link-mobile'\"\n          [link-active-class]=\"'nav-link-mobile-active'\"\n          [container-class]=\"'mobile-menu-link-container'\">\n      </lib-nav-links-list>\n  </div>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }, { 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: ShellHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-header', template: "<nav>\n  <div class=\"shell-header-paddings\">\n    <div [class]=\"border ? 'shell-header-border' : ''\">\n      <div class=\"shell-header-menu-container\">\n        <div *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-logo-container\">\n          <div>\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\n          </div>\n        </div>\n\n        <div *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-link-container\">\n          <div class=\"shell-header-link-container-inner\">\n            <lib-nav-links-list\n              [links]=\"sectionLinks\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'nav-link'\"\n              [link-active-class]=\"'nav-link-active'\">\n            </lib-nav-links-list>\n          </div>\n        </div>\n\n        <div class=\"shell-header-md-visible\">\n\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n\n            <lib-nav-links-list\n              [links]=\"links.profileActions\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'shell-header-menu-rounded-button'\"\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\n            </lib-nav-links-list>\n\n\n            <!-- Profile dropdown -->\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-2\">\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\n            </div>\n\n            <!-- Notifications dropdown -->\n            <div *ngIf=\"showAlerts && user\" class=\"ml-2\">\n              <lib-notifications-indicator></lib-notifications-indicator>\n            </div>\n\n            <!-- languages dropdown -->\n            <div *ngIf=\"config.showLangsOnHeader\" class=\"ml-2\">\n              <lib-language-selection></lib-language-selection>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mobile-menu-button-container\" *ngIf=\"shellLayout === 'Stacked'\">\n          <!-- Mobile menu button -->\n          <button type=\"button\"\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\n                  class=\"mobile-menu-button\"\n                  aria-controls=\"mobile-menu\"\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\n            <span class=\"sr-only\">Open main menu</span>\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\n            </svg>\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n  <!-- Mobile menu, show/hide based on menu state. -->\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\n    <lib-nav-links-list\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'nav-link-mobile'\"\n      [link-active-class]=\"'nav-link-mobile-active'\"\n      [container-class]=\"'mobile-menu-link-container'\">\n    </lib-nav-links-list>\n\n    <div *ngIf=\"!user\">\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\n      </a>\n    </div>\n\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\n      <div class=\"mobile-menu-user-info-container-inner\">\n        <div class=\"flex-shrink-0\">\n          <span class=\"mobile-menu-avatar-container\">\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\n          </span>\n        </div>\n        <div class=\"ml-3\">\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\n        </div>\n        <!--\n        <button class=\"mobile-menu-rounded-button\">\n          <span class=\"sr-only\">View notifications</span>\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\n               xmlns=\"http://www.w3.org/2000/svg\"\n               fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\"\n               aria-hidden=\"true\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\n          </svg>\n        </button>\n        -->\n      </div>\n    </div>\n\n    <lib-nav-links-list\n          [links]=\"links.profile\"\n          [active-fragment]=\"activeFragment\"\n          [link-class]=\"'nav-link-mobile'\"\n          [link-active-class]=\"'nav-link-mobile-active'\"\n          [container-class]=\"'mobile-menu-link-container'\">\n      </lib-nav-links-list>\n  </div>\n</nav>\n" }]
+            args: [{ selector: 'lib-shell-header', template: "<nav>\n  <div class=\"shell-header-paddings\">\n    <div class=\"shell-header-border\">\n      <div class=\"shell-header-menu-container\">\n        <div class=\"shell-header-logo-container\">\n          <div>\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\n          </div>\n        </div>\n\n        <div class=\"shell-header-link-container\">\n          <div class=\"shell-header-link-container-inner\">\n            <lib-nav-links-list\n              [links]=\"sectionLinks\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'nav-link'\"\n              [link-active-class]=\"'nav-link-active'\">\n            </lib-nav-links-list>\n          </div>\n        </div>\n\n        <div class=\"shell-header-md-visible\">\n\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n\n            <lib-nav-links-list\n              [links]=\"links.profileActions\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'shell-header-menu-rounded-button'\"\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\n            </lib-nav-links-list>\n\n\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\n            <!-- Notifications dropdown -->\n            <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n              <lib-notifications-indicator></lib-notifications-indicator>\n            </div>\n\n            <!-- languages dropdown -->\n            <div *ngIf=\"showLangs\" class=\"ml-4\">\n              <lib-language-selection></lib-language-selection>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mobile-menu-button-container\">\n          <!-- Mobile menu button -->\n          <button type=\"button\"\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\n                  class=\"mobile-menu-button\"\n                  aria-controls=\"mobile-menu\"\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\n            <span class=\"sr-only\">Open main menu</span>\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\n            </svg>\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Mobile menu, show/hide based on menu state. -->\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\n    <lib-nav-links-list\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'nav-link-mobile'\"\n      [link-active-class]=\"'nav-link-mobile-active'\"\n      [container-class]=\"'mobile-menu-link-container'\">\n    </lib-nav-links-list>\n\n    <div *ngIf=\"!user\">\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\n      </a>\n    </div>\n\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\n      <div class=\"mobile-menu-user-info-container-inner\">\n        <div class=\"flex-shrink-0\">\n          <span class=\"mobile-menu-avatar-container\">\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\n          </span>\n        </div>\n        <div class=\"ml-3\">\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\n        </div>\n        <!--\n        <button class=\"mobile-menu-rounded-button\">\n          <span class=\"sr-only\">View notifications</span>\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\n               xmlns=\"http://www.w3.org/2000/svg\"\n               fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\"\n               aria-hidden=\"true\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\n          </svg>\n        </button>\n        -->\n      </div>\n    </div>\n\n    <lib-nav-links-list\n          [links]=\"links.profile\"\n          [active-fragment]=\"activeFragment\"\n          [link-class]=\"'nav-link-mobile'\"\n          [link-active-class]=\"'nav-link-mobile-active'\"\n          [container-class]=\"'mobile-menu-link-container'\">\n      </lib-nav-links-list>\n  </div>\n</nav>\n" }]
         }], ctorParameters: function () {
-        return [{ type: i2.AuthService, decorators: [{
+        return [{ type: i2$1.AuthService, decorators: [{
                         type: Inject,
                         args: [AuthService]
                     }] }, { type: i1$1.Router, decorators: [{
@@ -2383,13 +2669,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
             }], showAlerts: [{
                 type: Input,
                 args: ['show-alerts']
-            }], shellLayout: [{
+            }], showLangs: [{
                 type: Input,
-                args: ['shell-layout']
+                args: ['show-langs']
             }], border: [{
                 type: Input
             }] } });
 
+class ShellSidebarHeaderComponent extends ShellHeaderComponent {
+    constructor(authService, router, route, config, links) {
+        super(authService, router, route, config, links);
+        this.authService = authService;
+        this.router = router;
+        this.route = route;
+        this.config = config;
+        this.links = links;
+    }
+}
+ShellSidebarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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"] }] });
+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$1.AuthService, decorators: [{
+                        type: Inject,
+                        args: [AuthService]
+                    }] }, { type: i1$1.Router, decorators: [{
+                        type: Inject,
+                        args: [Router]
+                    }] }, { type: i1$1.ActivatedRoute, decorators: [{
+                        type: Inject,
+                        args: [ActivatedRoute]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SHELL_CONFIG]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [APP_LINKS]
+                    }] }];
+    } });
+
+class ShellSidebarLayoutComponent {
+    constructor() {
+        this.showMobileSidebar = true;
+    }
+    ngOnInit() {
+    }
+    toggleMobileSidebar() {
+        this.showMobileSidebar = !this.showMobileSidebar;
+    }
+}
+ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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            <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"!showMobileSidebar\">\n              <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n            </div>\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" }] });
+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            <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"!showMobileSidebar\">\n              <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n            </div>\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>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
 class ShellFooterComponent {
     constructor(links) {
         this.links = links;
@@ -2407,45 +2746,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                     }] }];
     } });
 
-class ShellSidebarComponent {
-    constructor(router, route, links) {
-        this.router = router;
-        this.route = route;
-        this.links = links;
-        // tslint:disable-next-line:no-input-rename
-        this.sectionLinksPath = 'main';
-        this.sectionLinks = of([]);
-        // tslint:disable-next-line:no-input-rename
-        this.shellConfig = undefined;
-        this.activeFragment = null;
-    }
+class ShellStackedLayoutComponent {
+    constructor() { }
     ngOnInit() {
-        this.activeFragment = this.route.fragment.pipe(share());
-        this.sectionLinks = this.links[this.sectionLinksPath];
     }
 }
-ShellSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, deps: [{ token: Router }, { token: ActivatedRoute }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-ShellSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\n<div class=\"flex w-full flex-col h-full min-h-0 bg-gray-800\">\n  <div class=\"flex items-center h-16 flex-shrink-0 px-4 bg-gray-900\">\n    <!-- <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\" alt=\"Workflow\"> -->\n    <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"shellConfig?.appLogo\" [alt]=\"shellConfig?.appLogoAlt\" /></a>\n  </div>\n  <div class=\"pt-4 px-2 sidebar\">\n    <lib-nav-links-list\n      [show-icons]=\"true\"\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'sidebar nav-link group'\"\n      [link-active-class]=\"'sidebar nav-link-active group'\">\n    </lib-nav-links-list>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, decorators: [{
+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" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-sidebar', template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\n<div class=\"flex w-full flex-col h-full min-h-0 bg-gray-800\">\n  <div class=\"flex items-center h-16 flex-shrink-0 px-4 bg-gray-900\">\n    <!-- <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\" alt=\"Workflow\"> -->\n    <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"shellConfig?.appLogo\" [alt]=\"shellConfig?.appLogoAlt\" /></a>\n  </div>\n  <div class=\"pt-4 px-2 sidebar\">\n    <lib-nav-links-list\n      [show-icons]=\"true\"\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'sidebar nav-link group'\"\n      [link-active-class]=\"'sidebar nav-link-active group'\">\n    </lib-nav-links-list>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () {
-        return [{ type: i1$1.Router, decorators: [{
-                        type: Inject,
-                        args: [Router]
-                    }] }, { type: i1$1.ActivatedRoute, decorators: [{
-                        type: Inject,
-                        args: [ActivatedRoute]
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [APP_LINKS]
-                    }] }];
-    }, propDecorators: { sectionLinksPath: [{
-                type: Input,
-                args: ['section-links']
-            }], shellConfig: [{
-                type: Input,
-                args: ['config']
+            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>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
             }] } });
 
 class ShellLayoutComponent {
@@ -2520,10 +2832,10 @@ class ShellLayoutComponent {
     }
 }
 ShellLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: DOCUMENT }, { token: i1$1.Router }, { token: i1.Location }, { token: SHELL_CONFIG }, { token: ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Component });
-ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\" [style.display]=\"!loaded ? 'none':'block'\" class=\"shell-container active-side-pane\">\n\n  <div class=\"shell-header-container\" *ngIf=\"activeConfig.showHeader\">\n    <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\n      <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\n        <div appDynamicComponentHost =\"Header\"></div>\n      </ng-container>\n      <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\" [show-userName]=\"activeConfig.showUserNameOnHeader\"\n        [show-alerts]=\"activeConfig.showAlertsOnHeader\">\n      </lib-shell-header>\n    </div>\n  </div>\n\n  <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\n    <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\n      <router-outlet *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\"></router-outlet>\n    </div>\n  </main>\n\n  <div class=\"shell-footer-container\" *ngIf=\"activeConfig.showFooter\">\n    <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\n      <ng-container *ngIf=\"activeConfig.customFooterComponent\">\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\n      </ng-container>\n      <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\n    </div>\n  </div>\n\n  <lib-side-pane #rightPane>\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\n  </lib-side-pane>\n\n  <lib-toaster-container></lib-toaster-container>\n</div>\n\n<!-- SIDEBAR LAYOUT -->\n\n<div *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\" [style.display]=\"!loaded ? 'none':'block'\" class=\"sidebar shell-container active-side-pane\">\n\n  <!-- Static sidebar for desktop -->\n  <div class=\"hidden w-0 sm:w-64 flex-col inset-y-0 bg-gray-800\" [class.hidden]=\"hideSidebar\" [class.fixed]=\"!hideSidebar\">\n    <lib-shell-sidebar [config]=\"activeConfig\" ></lib-shell-sidebar>\n  </div>\n\n  <div class=\"flex flex-col\" [class.pl-64]=\"!hideSidebar\">\n    <div class=\"sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-800\">\n\n      <button type=\"button\" class=\"hidden sm:block px-4 border-0 text-white focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\n        <span class=\"sr-only\">Open 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      <button type=\"button\" class=\"block sm:hidden px-4 border-0 text-gray-200 focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\n        <span class=\"sr-only\">Open sidebar</span>\n        <!-- Heroicon name: outline/menu-alt-2 --> 111\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      <div class=\"flex-1\">\n        <div class=\"shell-header-container\">\n            <lib-shell-header [shell-layout]=\"activeConfig.layout\"  [show-userName]=\"activeConfig.showUserNameOnHeader\" [show-alerts]=\"activeConfig.showAlertsOnHeader\"></lib-shell-header>\n        </div>\n      </div>\n    </div>\n\n    <main class=\"shell-content-container-sidebar\">\n      <div class=\"shell-content-container-inner\">\n        <router-outlet *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\"></router-outlet>\n      </div>\n    </main>\n  </div>\n\n  <lib-side-pane #rightPane>\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\n  </lib-side-pane>\n\n  <lib-toaster-container></lib-toaster-container>\n\n</div>\n", 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: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }, { kind: "component", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "shell-layout", "border"] }, { kind: "component", type: ShellFooterComponent, selector: "lib-shell-footer" }, { kind: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }] });
+ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\n\n  <!-- STACKED LAYOUT -->\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\n  </div>\n\n  <!-- SIDEBAR LAYOUT -->\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\n  </div>\n\n  <lib-side-pane #rightPane>\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\n  </lib-side-pane>\n\n  <lib-toaster-container></lib-toaster-container>\n\n</div>", 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: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }, { kind: "component", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config"] }, { kind: "component", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-layout', template: "<div *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\" [style.display]=\"!loaded ? 'none':'block'\" class=\"shell-container active-side-pane\">\n\n  <div class=\"shell-header-container\" *ngIf=\"activeConfig.showHeader\">\n    <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\n      <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\n        <div appDynamicComponentHost =\"Header\"></div>\n      </ng-container>\n      <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\" [show-userName]=\"activeConfig.showUserNameOnHeader\"\n        [show-alerts]=\"activeConfig.showAlertsOnHeader\">\n      </lib-shell-header>\n    </div>\n  </div>\n\n  <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\n    <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\n      <router-outlet *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\"></router-outlet>\n    </div>\n  </main>\n\n  <div class=\"shell-footer-container\" *ngIf=\"activeConfig.showFooter\">\n    <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\n      <ng-container *ngIf=\"activeConfig.customFooterComponent\">\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\n      </ng-container>\n      <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\n    </div>\n  </div>\n\n  <lib-side-pane #rightPane>\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\n  </lib-side-pane>\n\n  <lib-toaster-container></lib-toaster-container>\n</div>\n\n<!-- SIDEBAR LAYOUT -->\n\n<div *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\" [style.display]=\"!loaded ? 'none':'block'\" class=\"sidebar shell-container active-side-pane\">\n\n  <!-- Static sidebar for desktop -->\n  <div class=\"hidden w-0 sm:w-64 flex-col inset-y-0 bg-gray-800\" [class.hidden]=\"hideSidebar\" [class.fixed]=\"!hideSidebar\">\n    <lib-shell-sidebar [config]=\"activeConfig\" ></lib-shell-sidebar>\n  </div>\n\n  <div class=\"flex flex-col\" [class.pl-64]=\"!hideSidebar\">\n    <div class=\"sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-800\">\n\n      <button type=\"button\" class=\"hidden sm:block px-4 border-0 text-white focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\n        <span class=\"sr-only\">Open 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      <button type=\"button\" class=\"block sm:hidden px-4 border-0 text-gray-200 focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\n        <span class=\"sr-only\">Open sidebar</span>\n        <!-- Heroicon name: outline/menu-alt-2 --> 111\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      <div class=\"flex-1\">\n        <div class=\"shell-header-container\">\n            <lib-shell-header [shell-layout]=\"activeConfig.layout\"  [show-userName]=\"activeConfig.showUserNameOnHeader\" [show-alerts]=\"activeConfig.showAlertsOnHeader\"></lib-shell-header>\n        </div>\n      </div>\n    </div>\n\n    <main class=\"shell-content-container-sidebar\">\n      <div class=\"shell-content-container-inner\">\n        <router-outlet *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\"></router-outlet>\n      </div>\n    </main>\n  </div>\n\n  <lib-side-pane #rightPane>\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\n  </lib-side-pane>\n\n  <lib-toaster-container></lib-toaster-container>\n\n</div>\n" }]
+            args: [{ selector: 'lib-shell-layout', template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\n\n  <!-- STACKED LAYOUT -->\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\n  </div>\n\n  <!-- SIDEBAR LAYOUT -->\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\n  </div>\n\n  <lib-side-pane #rightPane>\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\n  </lib-side-pane>\n\n  <lib-toaster-container></lib-toaster-container>\n\n</div>" }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -2861,7 +3173,6 @@ class AuthCallbackComponent {
         this.authService.signinRedirectCallback().subscribe((user) => {
             var _a;
             if (user) {
-                debugger;
                 this.router.navigateByUrl(((_a = user.state) === null || _a === void 0 ? void 0 : _a.url) || '/');
             }
         });
@@ -2873,7 +3184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
             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: [{
+        return [{ type: i2$1.AuthService, decorators: [{
                         type: Inject,
                         args: [AuthService]
                     }] }, { type: i1$1.Router }];
@@ -2901,7 +3212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                     template: ''
                 }]
         }], ctorParameters: function () {
-        return [{ type: i2.AuthService, decorators: [{
+        return [{ type: i2$1.AuthService, decorators: [{
                         type: Inject,
                         args: [AuthService]
                     }] }, { type: i1$1.Router }];
@@ -2926,7 +3237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
             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: [{
+        return [{ type: i2$1.AuthService, decorators: [{
                         type: Inject,
                         args: [AuthService]
                     }] }];
@@ -3065,6 +3376,8 @@ class BaseListComponent {
         this.sort = '';
         this.sortdir = '';
         this.search = '';
+        this.filters = [];
+        this.searchOptions = [];
         this.sortOptions = [];
         this.metaItems = [];
     }
@@ -3119,13 +3432,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 === null || filterValue === void 0 ? void 0 : filterValue.split(","); // we may have multiple filters in filter query param
+            if (filterValues && filterValues.length > 0) {
+                // create the filterClauses derived from the query params
+                for (var index in filterValues) {
+                    let filterClause = FilterClause.parse(filterValues[index]);
+                    const parsed = new FilterClause(filterClause.member, filterClause.value, filterClause.operator, filterClause.dataType, this.searchOptions);
+                    if (parsed !== undefined) {
+                        filterResult.push(parsed);
+                    }
+                }
+            }
+        }
+        return filterResult;
+    }
     setRouteParams(locationChange = false) {
-        console.log(this.sortdir);
         this.router$.navigate([], {
             relativeTo: this.route$, queryParams: {
                 view: this.view,
@@ -3133,10 +3470,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 === null || filters === void 0 ? void 0 : filters.map((f) => {
+            if (f.dataType === 'datetime') {
+                f.value = (new Date(f.value)).toISOString();
+            }
+            return f.toString();
+        }).join(',');
+    }
     actionHandler($event) {
         // console.log('BaseListComponent actionHandler', $event);
         if ($event.key === 'refresh') {
@@ -3211,6 +3557,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;
@@ -3736,10 +4090,15 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         LibStepperComponent,
         LibStepComponent,
         LibStepLabelDirective,
-        LibStepInfoDirective
+        LibStepInfoDirective,
+        ShellSidebarHeaderComponent,
+        ShellSidebarLayoutComponent,
+        ShellStackedLayoutComponent,
+        AdvancedSearchComponent
     ], imports: [CommonModule,
         RouterModule,
-        IndiceAuthModule], exports: [AddressPipe,
+        IndiceAuthModule,
+        FormsModule], exports: [AddressPipe,
         AuthCallbackComponent,
         AuthRenewComponent,
         AvatarInitialsComponent,
@@ -3780,7 +4139,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: [{
@@ -3838,12 +4198,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                         LibStepperComponent,
                         LibStepComponent,
                         LibStepLabelDirective,
-                        LibStepInfoDirective
+                        LibStepInfoDirective,
+                        ShellSidebarHeaderComponent,
+                        ShellSidebarLayoutComponent,
+                        ShellStackedLayoutComponent,
+                        AdvancedSearchComponent
                     ],
                     imports: [
                         CommonModule,
                         RouterModule,
-                        IndiceAuthModule
+                        IndiceAuthModule,
+                        FormsModule
                     ],
                     exports: [
                         AddressPipe,
@@ -3895,5 +4260,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
+export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
 //# sourceMappingURL=indice-ng-components.mjs.map