@indice/ng-components 0.2.167-beta.2 → 0.2.167-beta.20

package/fesm2015/indice-ng-components.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component, TemplateRef, ContentChild, LOCALE_ID, forwardRef, ViewChild, ContentChildren, Injectable, InjectionToken, ViewEncapsulation, ChangeDetectionStrategy, Optional, Injector, ElementRef, ViewChildren, Pipe, HostListener, NgModule } from '@angular/core';
+import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component, InjectionToken, Injectable, Optional, TemplateRef, ContentChild, LOCALE_ID, forwardRef, ViewChild, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Injector, ElementRef, ViewChildren, Pipe, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, formatDate, getLocaleMonthNames, FormStyle, TranslationWidth, getLocaleDayNames, DOCUMENT, CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/router';
-import { Router, ActivatedRoute, NavigationStart, ActivationStart, RouterModule } from '@angular/router';
+import { NavigationEnd, Router, ActivatedRoute, NavigationStart, ActivationStart, RouterModule } from '@angular/router';
+import { Subject, BehaviorSubject, of, fromEvent } from 'rxjs';
+import { filter, distinctUntilChanged, debounceTime, share, map } from 'rxjs/operators';
 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$1 from '@indice/ng-auth';
 import { AuthService, IndiceAuthModule } from '@indice/ng-auth';
@@ -267,7 +267,7 @@ class Icons {
 Icons.Dashboard = `ms-Icon ms-Icon--HomeGroup `;
 Icons.Locations = `ms-Icon ms-Icon--MapPin `;
 Icons.ChargePoints = `ms-Icon ms-Icon--ChatBot `;
-Icons.Transations = `ms-Icon ms-Icon--PaymentCard `;
+Icons.Transations = `ms-Icon ms-Icon--LightningBolt `;
 Icons.Badges = `ms-Icon ms-Icon--IDBadge `;
 Icons.Information = `ms-Icon ms-Icon--Info`;
 Icons.Refresh = `ms-Icon ms-Icon--Refresh`;
@@ -293,7 +293,9 @@ Icons.SortAsc = 'ms-Icon ms-Icon--Ascending';
 Icons.SortDesc = 'ms-Icon ms-Icon--Descending';
 Icons.Details = ' ms-Icon ms-Icon--AccountActivity';
 Icons.Messages = ' ms-Icon ms-Icon--Message';
-Icons.MessagesUnread = ' ms-Icon ms-Icon--MessageFill';
+Icons.MessagesUnread = ' ms-Icon ms-Icon--MessageFill';
+Icons.External = ' ms-Icon ms-Icon--FileSymlink';
+Icons.Statistics = ' ms-Icon ms-Icon--BIDashboard';
 
 class NavLink {
     constructor(text, path, exact = false, external = false, icon, data) {
@@ -308,7 +310,7 @@ class NavLink {
 }
 class ExternalNavLink extends NavLink {
     constructor(text, path, openInNewTab, icon) {
-        super(text, path, true, openInNewTab, icon);
+        super(text, path, true, openInNewTab, icon !== null && icon !== void 0 ? icon : Icons.External);
         this.type = 'external';
     }
 }
@@ -383,14 +385,15 @@ var ShellLayoutType;
 })(ShellLayoutType || (ShellLayoutType = {}));
 class DefaultShellConfig {
     constructor() {
-        this.layout = ShellLayoutType.Stacked;
         this.appLogo = 'https://tailwindui.com/img/logos/workflow-mark.svg?color=white';
         this.appLogoAlt = 'your app name here';
-        this.showHeader = true;
-        this.showUserNameOnHeader = false;
+        this.breadcrumb = false;
+        this.fluid = false;
+        this.layout = ShellLayoutType.Stacked;
         this.showAlertsOnHeader = false;
         this.showFooter = true;
-        this.fluid = false;
+        this.showHeader = true;
+        this.showUserNameOnHeader = false;
     }
 }
 var SCREEN_SIZE;
@@ -547,6 +550,270 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Output
             }] } });
 
+class BreadcrumbItem {
+    constructor(title, url) {
+        this.title = title;
+        this.url = url;
+        this.level = 0;
+    }
+    get urlSegments() {
+        var _a;
+        if (this.url) {
+            return (_a = this.url) === null || _a === void 0 ? void 0 : _a.split('/').filter(x => x !== '');
+        }
+        return undefined;
+    }
+}
+
+const APP_LANGUAGES = new InjectionToken('APP_LANGUAGES');
+const APP_LINKS = new InjectionToken('APP_LINKS');
+const APP_NOTIFICATIONS = new InjectionToken('APP_NOTIFICATIONS');
+const LIBSTEPPER_ACCESSOR = new InjectionToken('LibStepperAccessor');
+const LIBTABGROUP_ACCESSOR = new InjectionToken('LibTabGroupAccessor');
+const SHELL_CONFIG = new InjectionToken('SHELL_CONFIG');
+
+class UtilitiesService {
+    constructor() { }
+    get validationErrors() {
+        const messages = [];
+        const errors = this.problemDetails && this.problemDetails.errors;
+        for (const property in errors) {
+            if (property) {
+                const propertyMessages = errors[property];
+                propertyMessages.forEach((message) => {
+                    messages.push(message);
+                });
+            }
+            else {
+                Object.values(errors || {}).forEach(message => {
+                    message.forEach(x => {
+                        messages.push(x);
+                    });
+                });
+            }
+        }
+        return messages;
+    }
+    getValidationProblemDetails(problemDetails) {
+        this.problemDetails = problemDetails;
+        if (this.validationErrors.length === 0 && this.problemDetails.title) {
+            return new Array(1).fill(this.problemDetails.title);
+        }
+        return this.validationErrors;
+    }
+    getPathFromUrl(url) {
+        if (!url) {
+            return undefined;
+        }
+        return url.split(/[?#]/)[0];
+    }
+}
+UtilitiesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UtilitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+UtilitiesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UtilitiesService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UtilitiesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class BreadcrumbService {
+    constructor(_router, _utilities, _shellConfig) {
+        this._router = _router;
+        this._utilities = _utilities;
+        this._shellConfig = _shellConfig;
+        this._breadcrumb$ = new Subject();
+        this.breadcrumb = this._breadcrumb$.asObservable();
+        if (_shellConfig === null || _shellConfig === void 0 ? void 0 : _shellConfig.breadcrumb) {
+            this._defaultHome = this._getDefaultHomeItem();
+            this._router
+                .events
+                .pipe(filter(event => event instanceof NavigationEnd), distinctUntilChanged())
+                .subscribe(_ => {
+                const breadcrumb = [...this._buildBreadcrumb()];
+                this._breadcrumb$.next(breadcrumb);
+            });
+        }
+    }
+    _getDefaultHomeItem() {
+        var _a, _b;
+        const routerConfig = this._router.config;
+        const declaredHomeRoutes = routerConfig.filter((route) => { var _a, _b; return ((_b = (_a = route.data) === null || _a === void 0 ? void 0 : _a.breadcrumb) === null || _b === void 0 ? void 0 : _b.isHome) === true; });
+        if (declaredHomeRoutes.length > 1) {
+            throw new Error('You can declare only one route as home.');
+        }
+        let homeRoute;
+        if (declaredHomeRoutes.length === 1) {
+            homeRoute = declaredHomeRoutes[0];
+        }
+        else {
+            homeRoute = routerConfig.find((route) => route.path === '');
+            if (!homeRoute) {
+                return undefined;
+            }
+            const redirectionUrl = homeRoute.redirectTo;
+            if (!((_b = (_a = homeRoute === null || homeRoute === void 0 ? void 0 : homeRoute.data) === null || _a === void 0 ? void 0 : _a.breadcrumb) === null || _b === void 0 ? void 0 : _b.title) && redirectionUrl) {
+                homeRoute = routerConfig.find((route) => route.path === redirectionUrl);
+                if (!homeRoute) {
+                    return undefined;
+                }
+            }
+        }
+        return new BreadcrumbItem(this._getRouteTitle(homeRoute), homeRoute.path || '');
+    }
+    _getRouteTitle(route) {
+        var _a, _b, _c;
+        return ((_b = (_a = route === null || route === void 0 ? void 0 : route.data) === null || _a === void 0 ? void 0 : _a.breadcrumb) === null || _b === void 0 ? void 0 : _b.title) || ((_c = route.component) === null || _c === void 0 ? void 0 : _c.name.replace('Component', ''));
+    }
+    _buildBreadcrumb() {
+        var _a;
+        const breadcrumb = [];
+        if (this._defaultHome) {
+            breadcrumb.push(this._defaultHome);
+        }
+        const url = this._router.url;
+        const path = this._utilities.getPathFromUrl(url) || '';
+        const activeRoute = this._findRouteFromUrl(path);
+        const parentRoutes = this._findParentRoutes(activeRoute);
+        breadcrumb.push(...parentRoutes);
+        if (activeRoute && (activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.path) !== ((_a = this._defaultHome) === null || _a === void 0 ? void 0 : _a.url)) {
+            const routeData = this._getBreadcrumbRouteData(activeRoute);
+            breadcrumb.push(new BreadcrumbItem(this._getRouteTitle(activeRoute), (routeData._fullPath || activeRoute.path || '')));
+        }
+        return breadcrumb.map((route) => {
+            var _a;
+            const routeSegments = ((_a = route.url) === null || _a === void 0 ? void 0 : _a.split('/')) || [];
+            routeSegments.forEach((segment, index) => {
+                var _a;
+                if (segment.startsWith(':')) {
+                    route.url = (_a = route.url) === null || _a === void 0 ? void 0 : _a.replace(segment, url.split('/')[index + 1]);
+                }
+            });
+            return route;
+        });
+    }
+    _findRouteFromUrl(url) {
+        const urlSegments = url.split('/').filter((segment) => segment !== '');
+        const routerConfig = this._router.config;
+        const flattenedRouterConfig = this._flattenRoutes(routerConfig);
+        const filteredRouterConfig = flattenedRouterConfig.filter((route) => {
+            var _a;
+            const routeData = this._getBreadcrumbRouteData(route);
+            return ((_a = (routeData._fullPath || route.path)) === null || _a === void 0 ? void 0 : _a.split('/').length) === urlSegments.length;
+        });
+        const route = filteredRouterConfig.find((route) => {
+            var _a;
+            const routeData = this._getBreadcrumbRouteData(route);
+            const routeSegments = ((_a = (routeData._fullPath || route.path)) === null || _a === void 0 ? void 0 : _a.split('/')) || [];
+            let segmentsMatched = false;
+            for (let i = 0; i < routeSegments.length; i++) {
+                const currentSegment = routeSegments[i];
+                const isDynamicSegment = currentSegment.startsWith(':');
+                if (!isDynamicSegment) {
+                    segmentsMatched = currentSegment === urlSegments[i];
+                }
+            }
+            return segmentsMatched ? route : undefined;
+        });
+        return route;
+    }
+    _findParentRoutes(activeRoute, items = []) {
+        var _a;
+        if (!activeRoute) {
+            return [];
+        }
+        const routeData = this._getBreadcrumbRouteData(activeRoute);
+        let urlSegments = ((_a = (routeData._fullPath || activeRoute.path)) === null || _a === void 0 ? void 0 : _a.split('/').filter((segment) => segment !== '')) || [];
+        if ((urlSegments === null || urlSegments === void 0 ? void 0 : urlSegments.length) <= 1) {
+            return [...items];
+        }
+        const previousUrl = urlSegments.slice(0, -1).join('/');
+        const route = this._findRouteFromUrl(previousUrl);
+        if (route) {
+            const routeData = this._getBreadcrumbRouteData(route);
+            if (routeData._level > 0 || (!route.children || route.children.length === 0)) {
+                items.push(new BreadcrumbItem(this._getRouteTitle(route), routeData._fullPath || route.path));
+                this._findParentRoutes(route, [...items]);
+            }
+        }
+        return [...items];
+    }
+    _flattenRoutes(routes, level) {
+        let children = [];
+        level = level || 0;
+        return routes.map((route) => {
+            const routeData = this._getBreadcrumbRouteData(route);
+            routeData._level = level;
+            if (route.children && route.children.length) {
+                route.children.forEach((child) => {
+                    var _a;
+                    const childRouteData = this._getBreadcrumbRouteData(child);
+                    const routePath = routeData._fullPath || route.path || '';
+                    const childPath = ((_a = child.path) === null || _a === void 0 ? void 0 : _a.endsWith('/')) ? child.path.slice(0, -1) : child.path;
+                    childRouteData._fullPath = (childPath === null || childPath === void 0 ? void 0 : childPath.indexOf(routePath)) === -1 ? `${routePath}/${childPath}` : childPath;
+                });
+                children = [...children, ...route.children];
+            }
+            return route;
+        }).concat(children.length ? this._flattenRoutes(children, level + 1) : children);
+    }
+    _getBreadcrumbRouteData(route) {
+        var _a;
+        if (!route) {
+            throw new Error('No route was found');
+        }
+        if (!((_a = route.data) === null || _a === void 0 ? void 0 : _a.breadcrumb)) {
+            if (!route.data) {
+                route.data = {};
+            }
+            route.data.breadcrumb = new BreadcrumbRouteData(0, false, undefined);
+        }
+        return route.data.breadcrumb;
+    }
+}
+BreadcrumbService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$1.Router }, { token: UtilitiesService }, { token: SHELL_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+BreadcrumbService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BreadcrumbService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BreadcrumbService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.Router }, { type: UtilitiesService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [SHELL_CONFIG]
+                    }] }];
+    } });
+class BreadcrumbRouteData {
+    constructor(_level, isHome, _fullPath) {
+        this._level = _level;
+        this.isHome = isHome;
+        this._fullPath = _fullPath;
+    }
+}
+
+class BreadcrumbComponent {
+    constructor(_breadcrumbService) {
+        this._breadcrumbService = _breadcrumbService;
+        this.breadcrumb = [];
+    }
+    ngOnInit() {
+        this._breadcrumbService
+            .breadcrumb
+            .subscribe((breadcrumb) => {
+            this.breadcrumb = [...breadcrumb, new BreadcrumbItem('', '')];
+        });
+    }
+}
+BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: BreadcrumbComponent, selector: "lib-breadcrumb", ngImport: i0, template: "<nav class=\"bg-white border-b border-gray-200 flex\"\r\n     aria-label=\"Breadcrumb\">\r\n  <ol role=\"list\"\r\n      class=\"w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8\">\r\n    <li class=\"flex\"\r\n        *ngFor=\"let item of breadcrumb; let i = index\">\r\n      <div class=\"flex items-center\">\r\n        <ng-container *ngTemplateOutlet=\"i === 0 ? homeTemplate : linkTemplate; context: { value: item }\"></ng-container>\r\n      </div>\r\n    </li>\r\n  </ol>\r\n</nav>\r\n<ng-template let-value=\"value\"\r\n             #homeTemplate>\r\n  <a [routerLink]=\"value.urlSegments\"\r\n     [title]=\"value.title\"\r\n     class=\"text-gray-400 hover:text-gray-500\">\r\n    <svg class=\"flex-shrink-0 h-5 w-5\"\r\n         xmlns=\"http://www.w3.org/2000/svg\"\r\n         viewBox=\"0 0 20 20\"\r\n         fill=\"currentColor\"\r\n         aria-hidden=\"true\">\r\n      <path d=\"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z\" />\r\n    </svg>\r\n    <span class=\"sr-only\">{{ value.title }}</span>\r\n  </a>\r\n</ng-template>\r\n<ng-template let-value=\"value\"\r\n             #linkTemplate>\r\n  <svg class=\"flex-shrink-0 w-6 h-full text-gray-200\"\r\n       viewBox=\"0 0 24 44\"\r\n       preserveAspectRatio=\"none\"\r\n       fill=\"currentColor\"\r\n       xmlns=\"http://www.w3.org/2000/svg\"\r\n       aria-hidden=\"true\">\r\n    <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\r\n  </svg>\r\n  <a [routerLink]=\"value.urlSegments\"\r\n     class=\"ml-4 text-sm font-medium text-gray-500 hover:text-gray-700\">\r\n    {{ value.title }}\r\n  </a>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-breadcrumb', template: "<nav class=\"bg-white border-b border-gray-200 flex\"\r\n     aria-label=\"Breadcrumb\">\r\n  <ol role=\"list\"\r\n      class=\"w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8\">\r\n    <li class=\"flex\"\r\n        *ngFor=\"let item of breadcrumb; let i = index\">\r\n      <div class=\"flex items-center\">\r\n        <ng-container *ngTemplateOutlet=\"i === 0 ? homeTemplate : linkTemplate; context: { value: item }\"></ng-container>\r\n      </div>\r\n    </li>\r\n  </ol>\r\n</nav>\r\n<ng-template let-value=\"value\"\r\n             #homeTemplate>\r\n  <a [routerLink]=\"value.urlSegments\"\r\n     [title]=\"value.title\"\r\n     class=\"text-gray-400 hover:text-gray-500\">\r\n    <svg class=\"flex-shrink-0 h-5 w-5\"\r\n         xmlns=\"http://www.w3.org/2000/svg\"\r\n         viewBox=\"0 0 20 20\"\r\n         fill=\"currentColor\"\r\n         aria-hidden=\"true\">\r\n      <path d=\"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z\" />\r\n    </svg>\r\n    <span class=\"sr-only\">{{ value.title }}</span>\r\n  </a>\r\n</ng-template>\r\n<ng-template let-value=\"value\"\r\n             #linkTemplate>\r\n  <svg class=\"flex-shrink-0 w-6 h-full text-gray-200\"\r\n       viewBox=\"0 0 24 44\"\r\n       preserveAspectRatio=\"none\"\r\n       fill=\"currentColor\"\r\n       xmlns=\"http://www.w3.org/2000/svg\"\r\n       aria-hidden=\"true\">\r\n    <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\r\n  </svg>\r\n  <a [routerLink]=\"value.urlSegments\"\r\n     class=\"ml-4 text-sm font-medium text-gray-500 hover:text-gray-700\">\r\n    {{ value.title }}\r\n  </a>\r\n</ng-template>" }]
+        }], ctorParameters: function () { return [{ type: BreadcrumbService }]; } });
+
 class ListTileComponent {
     constructor() {
         this.template = null;
@@ -600,54 +867,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 args: [TemplateRef]
             }] } });
 
-class ListViewEmptyStateComponent {
-    constructor() {
-        this.title = 'Δεν βρέθηκαν εγγραφές.';
-        // tslint:disable-next-line:no-input-rename
-        this.subTitle = 'Παρακαλώ αλλάξτε τα κριτήρια αναζήτησης σας ή ξεκινήστε προσθέτοντας μια νέα εγγραφή';
-        // tslint:disable-next-line:no-input-rename
-        this.newItemLabel = 'Νέα εγγραφή';
-    }
-    ngOnInit() {
-    }
-}
-ListViewEmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListViewEmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0, template: "<div class=\"p-20\">\r\n  <div class=\"text-center p-2\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\r\n    </svg>\r\n    <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\r\n    <p class=\"mt-1 text-sm text-gray-500\">\r\n      {{subTitle}}\r\n    </p>\r\n    <div class=\"mt-6\" *ngIf=\"false\">\r\n      <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\r\n        <!-- Heroicon name: solid/plus -->\r\n        <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\r\n        </svg>\r\n        {{newItemLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", 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: ListViewEmptyStateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-list-view-empty-state', template: "<div class=\"p-20\">\r\n  <div class=\"text-center p-2\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\r\n    </svg>\r\n    <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\r\n    <p class=\"mt-1 text-sm text-gray-500\">\r\n      {{subTitle}}\r\n    </p>\r\n    <div class=\"mt-6\" *ngIf=\"false\">\r\n      <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\r\n        <!-- Heroicon name: solid/plus -->\r\n        <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\r\n        </svg>\r\n        {{newItemLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
-                type: Input
-            }], subTitle: [{
-                type: Input,
-                args: ['sub-title']
-            }], newItemLabel: [{
-                type: Input,
-                args: ['new-item-label']
-            }] } });
-
-class SkeletonLoaderComponent {
-    constructor() {
-        this.count = 5;
-        this.type = 'tiles'; // 'large-tile', 'table'
-    }
-    ngOnInit() {
-    }
-    counter(i) {
-        return new Array(i);
-    }
-}
-SkeletonLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkeletonLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type" }, ngImport: i0, template: "<!-- <h1>SKELETON LOADER!</h1> -->\r\n<ng-container *ngSwitch=\"type\">\r\n  <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchCase=\"'large-tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-1\" *ngSwitchCase=\"'table'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4\">\r\n        <div class=\"animate-pulse flex space-x-4\">\r\n          <div class=\"rounded-full bg-light-blue-400 h-12 w-12\">&nbsp;</div>\r\n          <div class=\"flex-1 space-y-4 py-1\">\r\n            <div class=\"h-4 bg-light-blue-400 rounded w-3/4\">&nbsp;</div>\r\n            <div class=\"space-y-2\">\r\n              <div class=\"h-4 bg-light-blue-400 rounded\">&nbsp;</div>\r\n              <div class=\"h-4 bg-light-blue-400 rounded w-5/6\">&nbsp;</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchDefault>\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-skeleton-loader', template: "<!-- <h1>SKELETON LOADER!</h1> -->\r\n<ng-container *ngSwitch=\"type\">\r\n  <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchCase=\"'large-tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-1\" *ngSwitchCase=\"'table'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4\">\r\n        <div class=\"animate-pulse flex space-x-4\">\r\n          <div class=\"rounded-full bg-light-blue-400 h-12 w-12\">&nbsp;</div>\r\n          <div class=\"flex-1 space-y-4 py-1\">\r\n            <div class=\"h-4 bg-light-blue-400 rounded w-3/4\">&nbsp;</div>\r\n            <div class=\"space-y-2\">\r\n              <div class=\"h-4 bg-light-blue-400 rounded\">&nbsp;</div>\r\n              <div class=\"h-4 bg-light-blue-400 rounded w-5/6\">&nbsp;</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchDefault>\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { count: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }] } });
-
 var Operators;
 (function (Operators) {
     Operators.EQUALS = { label: '=', value: 'eq', description: 'Ίσο με' };
@@ -1124,7 +1343,7 @@ class AdvancedSearchComponent {
     }
 }
 AdvancedSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvancedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, ngImport: i0, template: "<div class=\"advanced-search-container\">\r\n    <div class=\"advanced-search-filter\">\r\n        <!--SEARCH FIELDS-->\r\n        <div class=\"advanced-search-filter-field-container\">\r\n            <label class=\"advanced-search-filter-field-label\"\r\n                   for=\"selectedField\">\r\n                \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n            </label>\r\n            <lib-drop-down-menu [options]=\"menuOptions\"\r\n                                (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n        </div>\r\n        <!--SEARCH FIELDS INPUT-->\r\n        <div *ngIf=\"selectedField\"\r\n             class=\"advanced-search-filter-value-container\">\r\n            <div *ngIf=\"selectedField.dataType === 'array'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n                                    [selected]=\"fieldValue\"\r\n                                    (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div *ngIf=\"selectedField.dataType === 'string'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <input (keyup.enter)=\"search()\"\r\n                       [(ngModel)]=\"fieldValue\"\r\n                       name=\"fieldValue\"\r\n                       type=\"text\"\r\n                       placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n                       maxlength=\"300\"\r\n                       class=\"advanced-search-filter-value-input\">\r\n            </div>\r\n            <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                <div>\r\n                    <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n                        \u0391\u03C0\u03CC:\r\n                    </span>\r\n                    <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n                                     [(ngModel)]=\"fieldValueDateFrom\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n                <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                    <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n                        \u0388\u03C9\u03C2:\r\n                    </span>\r\n                    <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n                                     [(ngModel)]=\"fieldValueDateTo\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedField\">\r\n            <!--DO SEARCH-->\r\n            <button type=\"button\"\r\n                    [ngClass]=\"{'opacity-50 cursor-not-allowed': fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined}\"\r\n                    [disabled]=\"fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined\"\r\n                    (click)=\"search()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n            </button>\r\n            <!--CLEAR-->\r\n            <button type=\"button\"\r\n                    (click)=\"clear()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n    <!--FILTER CHIPS-->\r\n    <!-- This example requires Tailwind CSS v2.0+ -->\r\n    <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n        <span *ngIf=\"filter && filter.member\"\r\n              class=\"advanced-search-chips\">\r\n            {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n            <button (click)=\"removeFilter(i)\"\r\n                    type=\"button\"\r\n                    class=\"advanced-search-chips-remove-filter\">\r\n                <span class=\"sr-only\">Remove large option</span>\r\n                <svg class=\"h-2 w-2\"\r\n                     stroke=\"currentColor\"\r\n                     fill=\"none\"\r\n                     viewBox=\"0 0 8 8\">\r\n                    <path stroke-linecap=\"round\"\r\n                          stroke-width=\"1.5\"\r\n                          d=\"M1 1l6 6m0-6L1 7\" />\r\n                </svg>\r\n            </button>\r\n        </span>\r\n    </ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder"], outputs: ["selectedChange", "selectedChanged"] }, { kind: "component", type: DatepickerComponent, selector: "lib-date-picker", inputs: ["readonly", "disabled", "inline", "display-format", "placeholder", "value", "minDate", "maxDate"], outputs: ["valueChange"] }] });
+AdvancedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, ngImport: i0, template: "<div class=\"advanced-search-container\">\r\n    <div class=\"advanced-search-filter\">\r\n        <!--SEARCH FIELDS-->\r\n        <div class=\"advanced-search-filter-field-container\">\r\n            <label class=\"advanced-search-filter-field-label\"\r\n                   for=\"selectedField\">\r\n                \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n            </label>\r\n            <lib-drop-down-menu [options]=\"menuOptions\"\r\n                                (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n        </div>\r\n        <!--SEARCH FIELDS INPUT-->\r\n        <div *ngIf=\"selectedField\"\r\n             class=\"advanced-search-filter-value-container\">\r\n            <div *ngIf=\"selectedField.dataType === 'array'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n                                    [selected]=\"fieldValue\"\r\n                                    (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div *ngIf=\"selectedField.dataType === 'string'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <input (keyup.enter)=\"search()\"\r\n                       [(ngModel)]=\"fieldValue\"\r\n                       name=\"fieldValue\"\r\n                       type=\"text\"\r\n                       placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n                       maxlength=\"300\"\r\n                       class=\"advanced-search-filter-value-input\">\r\n            </div>\r\n            <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                <div>\r\n                    <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n                        \u0391\u03C0\u03CC:\r\n                    </span>\r\n                    <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n                                     [(ngModel)]=\"fieldValueDateFrom\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n                <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                    <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n                        \u0388\u03C9\u03C2:\r\n                    </span>\r\n                    <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n                                     [(ngModel)]=\"fieldValueDateTo\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedField\">\r\n            <!--DO SEARCH-->\r\n            <button type=\"button\"\r\n                    [ngClass]=\"{'opacity-50 cursor-not-allowed': fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined}\"\r\n                    [disabled]=\"fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined\"\r\n                    (click)=\"search()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n            </button>\r\n            <!--CLEAR-->\r\n            <button type=\"button\"\r\n                    (click)=\"clear()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n    <!--FILTER CHIPS-->\r\n    <!-- This example requires Tailwind CSS v2.0+ -->\r\n    <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n        <span *ngIf=\"filter && filter.member\"\r\n              class=\"advanced-search-chips\">\r\n            {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n            <button (click)=\"removeFilter(i)\"\r\n                    type=\"button\"\r\n                    class=\"advanced-search-chips-remove-filter\">\r\n                <span class=\"sr-only\">Remove large option</span>\r\n                <svg class=\"h-2 w-2\"\r\n                     stroke=\"currentColor\"\r\n                     fill=\"none\"\r\n                     viewBox=\"0 0 8 8\">\r\n                    <path stroke-linecap=\"round\"\r\n                          stroke-width=\"1.5\"\r\n                          d=\"M1 1l6 6m0-6L1 7\" />\r\n                </svg>\r\n            </button>\r\n        </span>\r\n    </ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatepickerComponent, selector: "lib-date-picker", inputs: ["readonly", "disabled", "inline", "display-format", "placeholder", "value", "minDate", "maxDate"], outputs: ["valueChange"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder"], outputs: ["selectedChange", "selectedChanged"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-advanced-search', template: "<div class=\"advanced-search-container\">\r\n    <div class=\"advanced-search-filter\">\r\n        <!--SEARCH FIELDS-->\r\n        <div class=\"advanced-search-filter-field-container\">\r\n            <label class=\"advanced-search-filter-field-label\"\r\n                   for=\"selectedField\">\r\n                \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n            </label>\r\n            <lib-drop-down-menu [options]=\"menuOptions\"\r\n                                (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n        </div>\r\n        <!--SEARCH FIELDS INPUT-->\r\n        <div *ngIf=\"selectedField\"\r\n             class=\"advanced-search-filter-value-container\">\r\n            <div *ngIf=\"selectedField.dataType === 'array'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n                                    [selected]=\"fieldValue\"\r\n                                    (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div *ngIf=\"selectedField.dataType === 'string'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <input (keyup.enter)=\"search()\"\r\n                       [(ngModel)]=\"fieldValue\"\r\n                       name=\"fieldValue\"\r\n                       type=\"text\"\r\n                       placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n                       maxlength=\"300\"\r\n                       class=\"advanced-search-filter-value-input\">\r\n            </div>\r\n            <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                <div>\r\n                    <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n                        \u0391\u03C0\u03CC:\r\n                    </span>\r\n                    <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n                                     [(ngModel)]=\"fieldValueDateFrom\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n                <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                    <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n                        \u0388\u03C9\u03C2:\r\n                    </span>\r\n                    <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n                                     [(ngModel)]=\"fieldValueDateTo\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedField\">\r\n            <!--DO SEARCH-->\r\n            <button type=\"button\"\r\n                    [ngClass]=\"{'opacity-50 cursor-not-allowed': fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined}\"\r\n                    [disabled]=\"fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined\"\r\n                    (click)=\"search()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n            </button>\r\n            <!--CLEAR-->\r\n            <button type=\"button\"\r\n                    (click)=\"clear()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n    <!--FILTER CHIPS-->\r\n    <!-- This example requires Tailwind CSS v2.0+ -->\r\n    <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n        <span *ngIf=\"filter && filter.member\"\r\n              class=\"advanced-search-chips\">\r\n            {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n            <button (click)=\"removeFilter(i)\"\r\n                    type=\"button\"\r\n                    class=\"advanced-search-chips-remove-filter\">\r\n                <span class=\"sr-only\">Remove large option</span>\r\n                <svg class=\"h-2 w-2\"\r\n                     stroke=\"currentColor\"\r\n                     fill=\"none\"\r\n                     viewBox=\"0 0 8 8\">\r\n                    <path stroke-linecap=\"round\"\r\n                          stroke-width=\"1.5\"\r\n                          d=\"M1 1l6 6m0-6L1 7\" />\r\n                </svg>\r\n            </button>\r\n        </span>\r\n    </ng-container>\r\n</div>" }]
@@ -1137,6 +1356,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Input
             }] } });
 
+class ListViewEmptyStateComponent {
+    constructor() {
+        this.title = 'Δεν βρέθηκαν εγγραφές.';
+        // tslint:disable-next-line:no-input-rename
+        this.subTitle = 'Παρακαλώ αλλάξτε τα κριτήρια αναζήτησης σας ή ξεκινήστε προσθέτοντας μια νέα εγγραφή';
+        // tslint:disable-next-line:no-input-rename
+        this.newItemLabel = 'Νέα εγγραφή';
+    }
+    ngOnInit() {
+    }
+}
+ListViewEmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListViewEmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0, template: "<div class=\"p-20\">\r\n  <div class=\"text-center p-2\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\r\n    </svg>\r\n    <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\r\n    <p class=\"mt-1 text-sm text-gray-500\">\r\n      {{subTitle}}\r\n    </p>\r\n    <div class=\"mt-6\" *ngIf=\"false\">\r\n      <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\r\n        <!-- Heroicon name: solid/plus -->\r\n        <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\r\n        </svg>\r\n        {{newItemLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", 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: ListViewEmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-view-empty-state', template: "<div class=\"p-20\">\r\n  <div class=\"text-center p-2\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\r\n    </svg>\r\n    <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\r\n    <p class=\"mt-1 text-sm text-gray-500\">\r\n      {{subTitle}}\r\n    </p>\r\n    <div class=\"mt-6\" *ngIf=\"false\">\r\n      <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\r\n        <!-- Heroicon name: solid/plus -->\r\n        <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\r\n        </svg>\r\n        {{newItemLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], subTitle: [{
+                type: Input,
+                args: ['sub-title']
+            }], newItemLabel: [{
+                type: Input,
+                args: ['new-item-label']
+            }] } });
+
+class SkeletonLoaderComponent {
+    constructor() {
+        this.count = 5;
+        this.type = 'tiles'; // 'large-tile', 'table'
+    }
+    ngOnInit() {
+    }
+    counter(i) {
+        return new Array(i);
+    }
+}
+SkeletonLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkeletonLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type" }, ngImport: i0, template: "<!-- <h1>SKELETON LOADER!</h1> -->\r\n<ng-container *ngSwitch=\"type\">\r\n  <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchCase=\"'large-tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-1\" *ngSwitchCase=\"'table'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4\">\r\n        <div class=\"animate-pulse flex space-x-4\">\r\n          <div class=\"rounded-full bg-light-blue-400 h-12 w-12\">&nbsp;</div>\r\n          <div class=\"flex-1 space-y-4 py-1\">\r\n            <div class=\"h-4 bg-light-blue-400 rounded w-3/4\">&nbsp;</div>\r\n            <div class=\"space-y-2\">\r\n              <div class=\"h-4 bg-light-blue-400 rounded\">&nbsp;</div>\r\n              <div class=\"h-4 bg-light-blue-400 rounded w-5/6\">&nbsp;</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchDefault>\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-skeleton-loader', template: "<!-- <h1>SKELETON LOADER!</h1> -->\r\n<ng-container *ngSwitch=\"type\">\r\n  <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchCase=\"'large-tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-1\" *ngSwitchCase=\"'table'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4\">\r\n        <div class=\"animate-pulse flex space-x-4\">\r\n          <div class=\"rounded-full bg-light-blue-400 h-12 w-12\">&nbsp;</div>\r\n          <div class=\"flex-1 space-y-4 py-1\">\r\n            <div class=\"h-4 bg-light-blue-400 rounded w-3/4\">&nbsp;</div>\r\n            <div class=\"space-y-2\">\r\n              <div class=\"h-4 bg-light-blue-400 rounded\">&nbsp;</div>\r\n              <div class=\"h-4 bg-light-blue-400 rounded w-5/6\">&nbsp;</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchDefault>\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { count: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
 class ListViewComponent {
     constructor() {
         this.searchOptions = [];
@@ -1263,10 +1530,10 @@ class ListViewComponent {
     }
 }
 ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListViewComponent, selector: "lib-list-view", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters", busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged", advancedSearchChanged: "advancedSearchChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"px-2\">\r\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n                       [search-options]=\"searchOptions\"\r\n                       [filters]=\"filters\"\r\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\"></lib-advanced-search>\r\n\r\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\"\r\n        [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n    <div class=\"cards-deck-1\">\r\n      <lib-list-view-empty-state></lib-list-view-empty-state>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n     *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n  <lib-pager [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>", 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"] }] });
+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>\r\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n                       [search-options]=\"searchOptions\"\r\n                       [filters]=\"filters\"\r\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\"></lib-advanced-search>\r\n\r\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\"\r\n        [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n    <div class=\"cards-deck-1\">\r\n      <lib-list-view-empty-state></lib-list-view-empty-state>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n     *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n  <lib-pager [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>", 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: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options", "filters"], outputs: ["advancedSearchChanged"] }, { kind: "component", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { 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: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-list-view', template: "<div class=\"px-2\">\r\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n                       [search-options]=\"searchOptions\"\r\n                       [filters]=\"filters\"\r\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\"></lib-advanced-search>\r\n\r\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\"\r\n        [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n    <div class=\"cards-deck-1\">\r\n      <lib-list-view-empty-state></lib-list-view-empty-state>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n     *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n  <lib-pager [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>" }]
+            args: [{ selector: 'lib-list-view', template: "<div>\r\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n                       [search-options]=\"searchOptions\"\r\n                       [filters]=\"filters\"\r\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\"></lib-advanced-search>\r\n\r\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\"\r\n        [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n    <div class=\"cards-deck-1\">\r\n      <lib-list-view-empty-state></lib-list-view-empty-state>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n     *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n  <lib-pager [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { searchOptions: [{
                 type: Input,
                 args: ['search-options']
@@ -1386,12 +1653,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
 
 class ToasterService {
     constructor() {
-        this.subject = new BehaviorSubject(NULL_TOAST);
-        this.toast$ = this.subject.asObservable()
-            .pipe(filter(toast => toast !== null && toast.title !== NULL_TOAST.title));
+        this._subject = new BehaviorSubject(NULL_TOAST);
+        this.toast$ = this
+            ._subject
+            .asObservable()
+            .pipe(filter((toast) => toast !== null && toast.title !== NULL_TOAST.title));
     }
     show(type, title, body, delay) {
-        this.subject.next({ type, title, body, delay });
+        this._subject.next({ type, title, body, delay });
     }
 }
 ToasterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1638,6 +1907,8 @@ class NavLinksListComponent {
         this.containerClass = undefined;
         // tslint:disable-next-line:no-input-rename
         this.showIcons = false;
+        this.showText = true;
+        this.largeIcons = false;
     }
     ngOnDestroy() {
         var _a;
@@ -1649,10 +1920,10 @@ class NavLinksListComponent {
     }
 }
 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: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n  <div class=\"nav-link-list-container-inner\">\r\n    <ng-container *ngFor=\"let link of links | async\">\r\n      <ng-container [ngSwitch]=\"link.type\">\r\n        <a *ngSwitchCase=\"'router'\"\r\n          href=\"#\"\r\n          [routerLink]=\"[link.path]\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'external'\"\r\n          [href]=\"link.path\"\r\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'fragment'\"\r\n          routerLink=\".\"\r\n          [fragment]=\"link.path\"\r\n          [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", 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"], showText: ["show-text", "showText"], largeIcons: ["large-icons", "largeIcons"] }, ngImport: i0, template: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n  <div class=\"nav-link-list-container-inner\" [class.icons-only]=\"!showText\">\r\n    <ng-container *ngFor=\"let link of links | async\">\r\n      <ng-container [ngSwitch]=\"link.type\">\r\n        <a *ngSwitchCase=\"'router'\"\r\n          href=\"#\"\r\n          [routerLink]=\"[link.path]\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n          [class]=\"navLinkClass\"\r\n          [class.min-nav-link-text-width]=\"showText\">\r\n          <div class=\"inline-flex items-center\">\r\n            <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\r\n            <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\r\n          </div>\r\n        </a>\r\n        <a *ngSwitchCase=\"'external'\"\r\n          [href]=\"link.path\"\r\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n          [class]=\"navLinkClass\"\r\n          [class.min-nav-link-text-width]=\"showText\">\r\n          <div class=\"inline-flex items-center\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\r\n          <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\r\n        </div>\r\n        </a>\r\n        <a *ngSwitchCase=\"'fragment'\"\r\n          routerLink=\".\"\r\n          [fragment]=\"link.path\"\r\n          [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\"\r\n          [class.min-nav-link-text-width]=\"showText\">\r\n          <div class=\"inline-flex items-center\">\r\n            <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\r\n            <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\r\n          </div>\r\n        </a>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n  <div class=\"nav-link-list-container-inner\">\r\n    <ng-container *ngFor=\"let link of links | async\">\r\n      <ng-container [ngSwitch]=\"link.type\">\r\n        <a *ngSwitchCase=\"'router'\"\r\n          href=\"#\"\r\n          [routerLink]=\"[link.path]\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'external'\"\r\n          [href]=\"link.path\"\r\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'fragment'\"\r\n          routerLink=\".\"\r\n          [fragment]=\"link.path\"\r\n          [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-nav-links-list', template: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n  <div class=\"nav-link-list-container-inner\" [class.icons-only]=\"!showText\">\r\n    <ng-container *ngFor=\"let link of links | async\">\r\n      <ng-container [ngSwitch]=\"link.type\">\r\n        <a *ngSwitchCase=\"'router'\"\r\n          href=\"#\"\r\n          [routerLink]=\"[link.path]\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n          [class]=\"navLinkClass\"\r\n          [class.min-nav-link-text-width]=\"showText\">\r\n          <div class=\"inline-flex items-center\">\r\n            <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\r\n            <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\r\n          </div>\r\n        </a>\r\n        <a *ngSwitchCase=\"'external'\"\r\n          [href]=\"link.path\"\r\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n          [class]=\"navLinkClass\"\r\n          [class.min-nav-link-text-width]=\"showText\">\r\n          <div class=\"inline-flex items-center\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\r\n          <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\r\n        </div>\r\n        </a>\r\n        <a *ngSwitchCase=\"'fragment'\"\r\n          routerLink=\".\"\r\n          [fragment]=\"link.path\"\r\n          [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\"\r\n          [class.min-nav-link-text-width]=\"showText\">\r\n          <div class=\"inline-flex items-center\">\r\n            <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\r\n            <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\r\n          </div>\r\n        </a>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { links: [{
                 type: Input
             }], activeFragment: [{
@@ -1670,6 +1941,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
             }], showIcons: [{
                 type: Input,
                 args: ['show-icons']
+            }], showText: [{
+                type: Input,
+                args: ['show-text']
+            }], largeIcons: [{
+                type: Input,
+                args: ['large-icons']
             }] } });
 
 class ComboboxComponent {
@@ -1681,14 +1958,15 @@ class ComboboxComponent {
             return selectedItem == null || selectedItem == undefined;
         };
         this.id = 'combobox';
-        this.itemTemplate = null;
+        this.itemTemplate = undefined;
         this.selectedItemsFilter = () => true;
-        this.selectedItemTemplate = null;
+        this.selectedItemTemplate = undefined;
         this.busy = false;
+        this.multiple = true;
         this.debounceMs = 1000;
         this.onSearch = new EventEmitter();
         this.onItemSelected = new EventEmitter();
-        this.showOptions = false;
+        this.showResults = false;
         this.selectedItems = [];
     }
     set items(items) {
@@ -1708,23 +1986,32 @@ class ComboboxComponent {
         }
     }
     ngOnInit() {
+        if (this.itemTemplate && !this.multiple) {
+            this.multiple = true;
+            console.warn('You cannot have a custom item template with single selection.');
+        }
         this.emitSearchEvent();
         this._debouncer
             .pipe(debounceTime(this.debounceMs), distinctUntilChanged())
             .subscribe((value) => this.emitSearchEvent(value));
     }
     onInputClick() {
-        this.showOptions = true;
+        this.showResults = true;
     }
     onInputClickOutside() {
-        this.showOptions = false;
+        this.showResults = false;
     }
     onInputKeyUp(event) {
         this._debouncer.next(event.currentTarget.value);
     }
     onListItemSelected(item) {
         this.onItemSelected.emit(item);
-        this.selectedItems.push(item);
+        if (this.multiple) {
+            this.selectedItems.push(item);
+        }
+        else {
+            this.value = item;
+        }
     }
     removeSelectedItem(item) {
         const index = this.selectedItems.indexOf(item);
@@ -1737,12 +2024,14 @@ class ComboboxComponent {
     }
 }
 ComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"relative mt-1\">\r\n    <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n        <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n            class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n            aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n    </form>\r\n    <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n        <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n        </svg>\r\n        <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n        </svg>\r\n    </div>\r\n    <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n        <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </li>\r\n    </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n    <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n    <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n    <div class=\"grid grid-cols-1\">\r\n        <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n            <div class=\"flex-1 min-w-0\">\r\n                <div class=\"focus:outline-none\">\r\n                    <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"ml-4 flex-shrink-0 flex\">\r\n                <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n                    <span class=\"sr-only\">Close</span>\r\n                    <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                            clip-rule=\"evenodd\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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"] }] });
+ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", placeholder: "placeholder", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", multiple: "multiple", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"combobox-wrapper\">\r\n    <form autocomplete=\"off\"\r\n          [id]=\"id + '-form'\">\r\n        <input [id]=\"id\"\r\n               type=\"text\"\r\n               (click)=\"onInputClick()\"\r\n               (clickOutside)=\"onInputClickOutside()\"\r\n               (keyup)=\"onInputKeyUp($event)\"\r\n               class=\"combobox-input\"\r\n               role=\"combobox\"\r\n               aria-controls=\"options\"\r\n               aria-expanded=\"false\"\r\n               autocomplete=\"off\"\r\n               list=\"autocomplete\"\r\n               [value]=\"value || ''\"\r\n               [placeholder]=\"placeholder || ''\">\r\n    </form>\r\n    <div class=\"combobox-icons\">\r\n        <svg *ngIf=\"!busy\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             class=\"h-6 w-6 text-gray-400\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke=\"currentColor\"\r\n             stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n        </svg>\r\n        <svg *ngIf=\"busy\"\r\n             class=\"animate-spin h-6 w-6 text-gray-400\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\"\r\n                    cx=\"12\"\r\n                    cy=\"12\"\r\n                    r=\"10\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"4\">\r\n            </circle>\r\n            <path class=\"opacity-75\"\r\n                  fill=\"currentColor\"\r\n                  d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n        </svg>\r\n    </div>\r\n    <ul [id]=\"id + '-results'\"\r\n        *ngIf=\"showResults\"\r\n        class=\"combobox-results\"\r\n        role=\"listbox\">\r\n        <li *ngFor=\"let item of items; let i = index;\"\r\n            [id]=\"'option-'+ i\"\r\n            (click)=\"onListItemSelected(item)\"\r\n            role=\"option\"\r\n            tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n            </ng-container>\r\n        </li>\r\n    </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\"\r\n    role=\"list\"\r\n    class=\"grid grid-cols-1\">\r\n    <li *ngFor=\"let item of selectedItems; let i = index;\"\r\n        class=\"mt-3\">\r\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n        </ng-container>\r\n    </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate\r\n             let-item>\r\n    <span class=\"combobox-default-item-template\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate\r\n             let-item>\r\n    <div class=\"grid grid-cols-1\">\r\n        <div class=\"combobox-selected-item-wrapper\">\r\n            <div class=\"flex-1 min-w-0\">\r\n                <div class=\"focus:outline-none\">\r\n                    <span class=\"absolute\"\r\n                          aria-hidden=\"true\">\r\n                    </span>\r\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"ml-4 flex-shrink-0 flex\">\r\n                <button type=\"button\"\r\n                        (click)=\"removeSelectedItem(item)\"\r\n                        class=\"combobox-selected-item-remove-btn\">\r\n                    <span class=\"sr-only\">Close</span>\r\n                    <svg class=\"h-5 w-5\"\r\n                         xmlns=\"http://www.w3.org/2000/svg\"\r\n                         viewBox=\"0 0 20 20\"\r\n                         fill=\"currentColor\"\r\n                         aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                              d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                              clip-rule=\"evenodd\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-combobox', template: "<div class=\"relative mt-1\">\r\n    <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n        <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n            class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n            aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n    </form>\r\n    <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n        <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n        </svg>\r\n        <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n        </svg>\r\n    </div>\r\n    <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n        <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </li>\r\n    </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n    <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n    <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n    <div class=\"grid grid-cols-1\">\r\n        <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n            <div class=\"flex-1 min-w-0\">\r\n                <div class=\"focus:outline-none\">\r\n                    <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"ml-4 flex-shrink-0 flex\">\r\n                <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n                    <span class=\"sr-only\">Close</span>\r\n                    <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                            clip-rule=\"evenodd\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>" }]
+            args: [{ selector: 'lib-combobox', template: "<div class=\"combobox-wrapper\">\r\n    <form autocomplete=\"off\"\r\n          [id]=\"id + '-form'\">\r\n        <input [id]=\"id\"\r\n               type=\"text\"\r\n               (click)=\"onInputClick()\"\r\n               (clickOutside)=\"onInputClickOutside()\"\r\n               (keyup)=\"onInputKeyUp($event)\"\r\n               class=\"combobox-input\"\r\n               role=\"combobox\"\r\n               aria-controls=\"options\"\r\n               aria-expanded=\"false\"\r\n               autocomplete=\"off\"\r\n               list=\"autocomplete\"\r\n               [value]=\"value || ''\"\r\n               [placeholder]=\"placeholder || ''\">\r\n    </form>\r\n    <div class=\"combobox-icons\">\r\n        <svg *ngIf=\"!busy\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             class=\"h-6 w-6 text-gray-400\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke=\"currentColor\"\r\n             stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n        </svg>\r\n        <svg *ngIf=\"busy\"\r\n             class=\"animate-spin h-6 w-6 text-gray-400\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\"\r\n                    cx=\"12\"\r\n                    cy=\"12\"\r\n                    r=\"10\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"4\">\r\n            </circle>\r\n            <path class=\"opacity-75\"\r\n                  fill=\"currentColor\"\r\n                  d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n        </svg>\r\n    </div>\r\n    <ul [id]=\"id + '-results'\"\r\n        *ngIf=\"showResults\"\r\n        class=\"combobox-results\"\r\n        role=\"listbox\">\r\n        <li *ngFor=\"let item of items; let i = index;\"\r\n            [id]=\"'option-'+ i\"\r\n            (click)=\"onListItemSelected(item)\"\r\n            role=\"option\"\r\n            tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n            </ng-container>\r\n        </li>\r\n    </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\"\r\n    role=\"list\"\r\n    class=\"grid grid-cols-1\">\r\n    <li *ngFor=\"let item of selectedItems; let i = index;\"\r\n        class=\"mt-3\">\r\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n        </ng-container>\r\n    </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate\r\n             let-item>\r\n    <span class=\"combobox-default-item-template\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate\r\n             let-item>\r\n    <div class=\"grid grid-cols-1\">\r\n        <div class=\"combobox-selected-item-wrapper\">\r\n            <div class=\"flex-1 min-w-0\">\r\n                <div class=\"focus:outline-none\">\r\n                    <span class=\"absolute\"\r\n                          aria-hidden=\"true\">\r\n                    </span>\r\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"ml-4 flex-shrink-0 flex\">\r\n                <button type=\"button\"\r\n                        (click)=\"removeSelectedItem(item)\"\r\n                        class=\"combobox-selected-item-remove-btn\">\r\n                    <span class=\"sr-only\">Close</span>\r\n                    <svg class=\"h-5 w-5\"\r\n                         xmlns=\"http://www.w3.org/2000/svg\"\r\n                         viewBox=\"0 0 20 20\"\r\n                         fill=\"currentColor\"\r\n                         aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                              d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                              clip-rule=\"evenodd\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { id: [{
                 type: Input
+            }], placeholder: [{
+                type: Input
             }], items: [{
                 type: Input,
                 args: ['items']
@@ -1754,6 +2043,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Input
             }], busy: [{
                 type: Input
+            }], multiple: [{
+                type: Input
             }], debounceMs: [{
                 type: Input
             }], onSearch: [{
@@ -1762,22 +2053,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Output
             }] } });
 
-const APP_LANGUAGES = new InjectionToken('APP_LANGUAGES');
-const APP_LINKS = new InjectionToken('APP_LINKS');
-const APP_NOTIFICATIONS = new InjectionToken('APP_NOTIFICATIONS');
-const LIBSTEPPER_ACCESSOR = new InjectionToken('LibStepperAccessor');
-const LIBTABGROUP_ACCESSOR = new InjectionToken('LibTabGroupAccessor');
-const SHELL_CONFIG = new InjectionToken('SHELL_CONFIG');
+class LibTabLabelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+LibTabLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+LibTabLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: LibTabLabelDirective, selector: "[libTabLabel]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[libTabLabel]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 class LibTabComponent {
     constructor(_tabGroup) {
         this._tabGroup = _tabGroup;
         this._isActive = false;
+        /** The content provided for the tab. */
+        this.content = null;
     }
     /** Indicates the index of the tab. */
     get index() {
         var _a, _b;
-        return ((_b = (_a = this._tabGroup) === null || _a === void 0 ? void 0 : _a.tabs) === null || _b === void 0 ? void 0 : _b.toArray().indexOf(this)) || undefined;
+        const index = (_b = (_a = this._tabGroup) === null || _a === void 0 ? void 0 : _a.tabs.toArray()) === null || _b === void 0 ? void 0 : _b.indexOf(this);
+        return index;
     }
     /** Indicates whether the tab is active. */
     get isActive() {
@@ -1792,7 +2093,7 @@ class LibTabComponent {
     }
 }
 LibTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabComponent, deps: [{ token: LIBTABGROUP_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-LibTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibTabComponent, selector: "lib-tab", inputs: { label: "label", id: "id" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
+LibTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibTabComponent, selector: "lib-tab", inputs: { id: "id", labelText: "labelText" }, queries: [{ propertyName: "label", first: true, predicate: LibTabLabelDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
         <ng-template>
             <ng-content></ng-content>
         </ng-template>
@@ -1820,9 +2121,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: ViewChild,
                 args: [TemplateRef, { static: true }]
             }], label: [{
-                type: Input
+                type: ContentChild,
+                args: [LibTabLabelDirective]
             }], id: [{
                 type: Input
+            }], labelText: [{
+                type: Input
             }] } });
 
 class LibTabGroupComponent {
@@ -1843,6 +2147,22 @@ class LibTabGroupComponent {
         return ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.index) || undefined;
     }
     ngOnInit() { }
+    onTabChanged(selectedTab) {
+        var _a;
+        if (selectedTab.isActive) {
+            return;
+        }
+        (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => tab.isActive = tab.id === selectedTab.id);
+        this.tabChanged.emit(selectedTab);
+    }
+    onTabSelectChanged(selectedTabIndex) {
+        var _a, _b;
+        if (selectedTabIndex === this.currentΤabIndex) {
+            return;
+        }
+        (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab, index) => tab.isActive = index === selectedTabIndex);
+        this.tabChanged.emit((_b = this.tabs) === null || _b === void 0 ? void 0 : _b.get(selectedTabIndex));
+    }
     ngAfterContentInit() {
         if (!this.tabs) {
             return;
@@ -1856,25 +2176,16 @@ class LibTabGroupComponent {
             }
         }
     }
-    onTabChanged(selectedTab) {
-        this.tabs.forEach((tab) => tab.isActive = tab.id === selectedTab.id);
-        this.tabChanged.emit(selectedTab);
-    }
-    onTabSelectChanged(selectedTabIndex) {
-        var _a;
-        this.tabs.forEach((tab, index) => tab.isActive = index === selectedTabIndex);
-        this.tabChanged.emit((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.get(selectedTabIndex));
-    }
 }
 LibTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 LibTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibTabGroupComponent, selector: "lib-tab-group", outputs: { tabChanged: "tabChanged" }, providers: [
         { provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
-    ], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"tab-group-select-hidden\">\r\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\r\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\r\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\r\n    </select>\r\n</div>\r\n<div class=\"tab-group-container-hidden\">\r\n    <div class=\"tab-group-container\">\r\n        <nav class=\"tab-group-container-nav\" aria-label=\"Tabs\">\r\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\r\n                {{ tab.label }}\r\n            </a>\r\n        </nav>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"currentTab?.content\">\r\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+    ], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"tab-group-select-hidden\">\r\n    <label for=\"tabs\"\r\n           class=\"sr-only\">\r\n        Select a tab\r\n    </label>\r\n    <select id=\"tabs\"\r\n            name=\"tabs\"\r\n            (change)=\"onTabSelectChanged(+tabsSelect.value)\"\r\n            class=\"tab-group-select\"\r\n            #tabsSelect>\r\n        <option [value]=\"i\"\r\n                *ngFor=\"let tab of tabs; let i = index\">\r\n            {{ tab.labelText }}\r\n        </option>\r\n    </select>\r\n</div>\r\n<div class=\"tab-group-container-hidden\">\r\n    <div class=\"tab-group-container\">\r\n        <nav class=\"tab-group-container-nav\"\r\n             aria-label=\"Tabs\">\r\n            <a *ngFor=\"let tab of tabs\"\r\n               href=\"javascript:void(0)\"\r\n               [class.tab]=\"!tab.isActive\"\r\n               [class.tab-active]=\"tab.isActive\"\r\n               (click)=\"onTabChanged(tab)\">\r\n                <ng-container *ngTemplateOutlet=\"tab.label ? tab.label.template: defaultTabLabel; context:{ $implicit: tab }\"></ng-container>\r\n            </a>\r\n        </nav>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"currentTab?.content\">\r\n    <ng-container [ngTemplateOutlet]=\"currentTab?.content || emptyTemplate\"></ng-container>\r\n</div>\r\n<ng-template let-tab\r\n             #defaultTabLabel>\r\n    {{ tab.labelText || 'tab-' + (tab.index + 1) }}\r\n</ng-template>\r\n<ng-template #emptyTemplate></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.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: [
                         { provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
-                    ], template: "<div class=\"tab-group-select-hidden\">\r\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\r\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\r\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\r\n    </select>\r\n</div>\r\n<div class=\"tab-group-container-hidden\">\r\n    <div class=\"tab-group-container\">\r\n        <nav class=\"tab-group-container-nav\" aria-label=\"Tabs\">\r\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\r\n                {{ tab.label }}\r\n            </a>\r\n        </nav>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"currentTab?.content\">\r\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\r\n</div>" }]
+                    ], template: "<div class=\"tab-group-select-hidden\">\r\n    <label for=\"tabs\"\r\n           class=\"sr-only\">\r\n        Select a tab\r\n    </label>\r\n    <select id=\"tabs\"\r\n            name=\"tabs\"\r\n            (change)=\"onTabSelectChanged(+tabsSelect.value)\"\r\n            class=\"tab-group-select\"\r\n            #tabsSelect>\r\n        <option [value]=\"i\"\r\n                *ngFor=\"let tab of tabs; let i = index\">\r\n            {{ tab.labelText }}\r\n        </option>\r\n    </select>\r\n</div>\r\n<div class=\"tab-group-container-hidden\">\r\n    <div class=\"tab-group-container\">\r\n        <nav class=\"tab-group-container-nav\"\r\n             aria-label=\"Tabs\">\r\n            <a *ngFor=\"let tab of tabs\"\r\n               href=\"javascript:void(0)\"\r\n               [class.tab]=\"!tab.isActive\"\r\n               [class.tab-active]=\"tab.isActive\"\r\n               (click)=\"onTabChanged(tab)\">\r\n                <ng-container *ngTemplateOutlet=\"tab.label ? tab.label.template: defaultTabLabel; context:{ $implicit: tab }\"></ng-container>\r\n            </a>\r\n        </nav>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"currentTab?.content\">\r\n    <ng-container [ngTemplateOutlet]=\"currentTab?.content || emptyTemplate\"></ng-container>\r\n</div>\r\n<ng-template let-tab\r\n             #defaultTabLabel>\r\n    {{ tab.labelText || 'tab-' + (tab.index + 1) }}\r\n</ng-template>\r\n<ng-template #emptyTemplate></ng-template>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [LibTabComponent, { descendants: true }]
@@ -1906,7 +2217,7 @@ LibStepLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0",
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepLabelDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[libStepLabel]',
+                    selector: '[libStepLabel]'
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
@@ -2087,12 +2398,12 @@ class LibStepperComponent {
 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\">\r\n    <!-- Bullets -->\r\n    <nav class=\"stepper-bullets-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\r\n        <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n        <ol role=\"list\" class=\"stepper-bullets-ol\">\r\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                <!-- Completed Step -->\r\n                <div class=\"stepper-bullets-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"stepper-bullets-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"stepper-bullets-active-step-level1\" aria-hidden=\"true\">\r\n                        <span class=\"stepper-bullets-active-step-level1\"></span>\r\n                    </span>\r\n                    <span class=\"stepper-bullets-active-step-bullet\" aria-hidden=\"true\"></span>\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div href=\"#\" class=\"stepper-bullets-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Bullets & Text -->\r\n    <div class=\"stepper-bullets-and-text-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n        <nav aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"stepper-bullets-and-text-ol\">\r\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                    <!-- Complete Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <span class=\"stepper-bullets-and-text-completed-step\">\r\n                            <span class=\"stepper-bullets-and-text-completed-step-level1\">\r\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                            <span class=\"stepper-bullets-and-text-completed-step-container\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"stepper-bullets-and-text-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                        <span class=\"stepper-bullets-and-text-active-step-level1\" aria-hidden=\"true\">\r\n                            <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\r\n                            <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\r\n                        </span>\r\n                        <span class=\"stepper-bullets-and-text-active-step-container\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"stepper-bullets-and-text-upcoming-step\">\r\n                            <div class=\"stepper-bullets-and-text-upcoming-step-level1\" aria-hidden=\"true\">\r\n                                <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\r\n                            </div>\r\n                            <p class=\"stepper-bullets-and-text-upcoming-step-container\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Circles -->\r\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\r\n        <ol class=\"flex items-center\" role=\"list\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\r\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                        </svg>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\r\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\r\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Circles With Text -->\r\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n        <ol role=\"list\" class=\"overflow-hidden\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\r\n                <!-- Complete Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\r\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div href=\"#\" class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\r\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n                <!-- Completed step -->\r\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                            </svg>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Active step -->\r\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\r\n                    </span>\r\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming step -->\r\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Arrow separator for lg screens and up -->\r\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\r\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels With Border -->\r\n    <div class=\"panels-with-border-container\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n        <nav class=\"panels-with-border-nav\" aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"panels-with-border-ol\">\r\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"panels-with-border-li\">\r\n                    <!-- Completed Step -->\r\n                    <div class=\"panels-with-border-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-completed-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-completed-step-level2\">\r\n                                <span class=\"panels-with-border-completed-step-level21\">\r\n                                    <span class=\"panels-with-border-completed-step-level211\">\r\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-completed-step-level22\">\r\n                                    <span class=\"panels-with-border-completed-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-completed-step-level222\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"panels-with-border-active-step\" *ngIf=\"step.state === StepState.Active\">\r\n                        <div aria-current=\"step\">\r\n                            <span class=\"panels-with-border-active-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-active-step-level2\">\r\n                                <span class=\"panels-with-border-active-step-level21\">\r\n                                    <span class=\"panels-with-border-active-step-level211\">\r\n                                        <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-active-step-level22\">\r\n                                    <span class=\"panels-with-border-active-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-active-step-level222\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"panels-with-border-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-upcoming-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-upcoming-step-level2\">\r\n                                <span class=\"panels-with-border-upcoming-step-level21\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level211\">\r\n                                        <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-upcoming-step-level22\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Progress -->\r\n    <div *ngSwitchCase=\"StepperType.Progress\">\r\n        <div class=\"mt-6\" aria-hidden=\"true\">\r\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\r\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\r\n            </div>\r\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\r\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\r\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Simple -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\r\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n</ng-container>\r\n<ng-container *ngFor=\"let step of steps\">\r\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n</ng-container>", 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\">\r\n    <!-- Bullets -->\r\n    <nav class=\"stepper-bullets-container\"\r\n         aria-label=\"Progress\"\r\n         *ngSwitchCase=\"StepperType.Bullets\">\r\n        <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n        <ol role=\"list\"\r\n            class=\"stepper-bullets-ol\">\r\n            <li class=\"cursor-pointer\"\r\n                *ngFor=\"let step of steps\"\r\n                (click)=\"onSelectStep(step)\">\r\n                <!-- Completed Step -->\r\n                <div class=\"stepper-bullets-completed-step\"\r\n                     *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"stepper-bullets-active-step\"\r\n                     aria-current=\"step\"\r\n                     *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"stepper-bullets-active-step-level1\"\r\n                          aria-hidden=\"true\">\r\n                        <span class=\"stepper-bullets-active-step-level1\"></span>\r\n                    </span>\r\n                    <span class=\"stepper-bullets-active-step-bullet\"\r\n                          aria-hidden=\"true\">\r\n                    </span>\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div href=\"#\"\r\n                     class=\"stepper-bullets-upcoming-step\"\r\n                     *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Bullets & Text -->\r\n    <div class=\"stepper-bullets-and-text-container\"\r\n         aria-label=\"Progress\"\r\n         *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n        <nav aria-label=\"Progress\">\r\n            <ol role=\"list\"\r\n                class=\"stepper-bullets-and-text-ol\">\r\n                <li class=\"cursor-pointer\"\r\n                    *ngFor=\"let step of steps\"\r\n                    (click)=\"onSelectStep(step)\">\r\n                    <!-- Complete Step -->\r\n                    <div class=\"group\"\r\n                         *ngIf=\"step.state === StepState.Completed\">\r\n                        <span class=\"stepper-bullets-and-text-completed-step\">\r\n                            <span class=\"stepper-bullets-and-text-completed-step-level1\">\r\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\"\r\n                                     xmlns=\"http://www.w3.org/2000/svg\"\r\n                                     viewBox=\"0 0 20 20\"\r\n                                     fill=\"currentColor\"\r\n                                     aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\"\r\n                                          d=\"M10 18a8 8 0 100-16 8 8 0 000 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\"\r\n                                          clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                            <span class=\"stepper-bullets-and-text-completed-step-container\"\r\n                                  *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"stepper-bullets-and-text-active-step\"\r\n                         aria-current=\"step\"\r\n                         *ngIf=\"step.state === StepState.Active\">\r\n                        <span class=\"stepper-bullets-and-text-active-step-level1\"\r\n                              aria-hidden=\"true\">\r\n                            <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\r\n                            <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\r\n                        </span>\r\n                        <span class=\"stepper-bullets-and-text-active-step-container\"\r\n                              *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"group\"\r\n                         *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"stepper-bullets-and-text-upcoming-step\">\r\n                            <div class=\"stepper-bullets-and-text-upcoming-step-level1\"\r\n                                 aria-hidden=\"true\">\r\n                                <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\r\n                            </div>\r\n                            <p class=\"stepper-bullets-and-text-upcoming-step-container\"\r\n                               *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Circles -->\r\n    <nav class=\"flex justify-center\"\r\n         aria-label=\"Progress\"\r\n         *ngSwitchCase=\"StepperType.Circles\">\r\n        <ol class=\"flex items-center\"\r\n            role=\"list\">\r\n            <li *ngFor=\"let step of steps\"\r\n                (click)=\"onSelectStep(step)\"\r\n                class=\"relative pr-8 sm:pr-20 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"absolute inset-0 flex items-center\"\r\n                         aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\r\n                        <svg class=\"w-5 h-5 text-white\"\r\n                             xmlns=\"http://www.w3.org/2000/svg\"\r\n                             viewBox=\"0 0 20 20\"\r\n                             fill=\"currentColor\"\r\n                             aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\"\r\n                                  d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n                                  clip-rule=\"evenodd\" />\r\n                        </svg>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"absolute inset-0 flex items-center\"\r\n                         aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\"\r\n                         aria-current=\"step\">\r\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"\r\n                              aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"absolute inset-0 flex items-center\"\r\n                         aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\r\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"\r\n                              aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Circles With Text -->\r\n    <nav class=\"flex items-center justify-center\"\r\n         aria-label=\"Progress\"\r\n         *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n        <ol role=\"list\"\r\n            class=\"overflow-hidden\">\r\n            <li *ngFor=\"let step of steps\"\r\n                (click)=\"onSelectStep(step)\"\r\n                class=\"relative pb-10 cursor-pointer\">\r\n                <!-- Complete Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\"\r\n                         aria-hidden=\"true\"\r\n                         *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                                <svg class=\"w-5 h-5 text-white\"\r\n                                     xmlns=\"http://www.w3.org/2000/svg\"\r\n                                     viewBox=\"0 0 20 20\"\r\n                                     fill=\"currentColor\"\r\n                                     aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\"\r\n                                          d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n                                          clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\"\r\n                                  *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\"\r\n                                  *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\"\r\n                         aria-hidden=\"true\"\r\n                         *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\"\r\n                         aria-current=\"step\">\r\n                        <span class=\"h-9 flex items-center\"\r\n                              aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\r\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\"\r\n                                  *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\"\r\n                                  *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\"\r\n                         aria-hidden=\"true\"\r\n                         *ngIf=\"!step.isLast\"></div>\r\n                    <div href=\"#\"\r\n                         class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\"\r\n                              aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\"\r\n                                  *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\"\r\n                                  *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels -->\r\n    <nav aria-label=\"Progress\"\r\n         *ngSwitchCase=\"StepperType.Panels\">\r\n        <ol role=\"list\"\r\n            class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\r\n            <li *ngFor=\"let step of steps\"\r\n                (click)=\"onSelectStep(step)\"\r\n                class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n                <!-- Completed step -->\r\n                <div class=\"group flex items-center w-full\"\r\n                     *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                            <svg class=\"w-6 h-6 text-white\"\r\n                                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                                 viewBox=\"0 0 20 20\"\r\n                                 fill=\"currentColor\"\r\n                                 aria-hidden=\"true\">\r\n                                <path fill-rule=\"evenodd\"\r\n                                      d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n                                      clip-rule=\"evenodd\" />\r\n                            </svg>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\"\r\n                              *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Active step -->\r\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\"\r\n                     *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\r\n                    </span>\r\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\"\r\n                          *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming step -->\r\n                <div class=\"group flex items-center\"\r\n                     *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\"\r\n                              *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Arrow separator for lg screens and up -->\r\n                <div *ngIf=\"!step.isLast\"\r\n                     class=\"hidden md:block absolute top-0 right-0 h-full w-5\"\r\n                     aria-hidden=\"true\">\r\n                    <svg class=\"h-full w-full text-gray-300\"\r\n                         viewBox=\"0 0 22 80\"\r\n                         fill=\"none\"\r\n                         preserveAspectRatio=\"none\">\r\n                        <path d=\"M0 -2L20 40L0 82\"\r\n                              vector-effect=\"non-scaling-stroke\"\r\n                              stroke=\"currentcolor\"\r\n                              stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels With Border -->\r\n    <div class=\"panels-with-border-container\"\r\n         *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n        <nav class=\"panels-with-border-nav\"\r\n             aria-label=\"Progress\">\r\n            <ol role=\"list\"\r\n                class=\"panels-with-border-ol\">\r\n                <li *ngFor=\"let step of steps\"\r\n                    (click)=\"onSelectStep(step)\"\r\n                    class=\"panels-with-border-li\">\r\n                    <!-- Completed Step -->\r\n                    <div class=\"panels-with-border-completed-step\"\r\n                         *ngIf=\"step.state === StepState.Completed\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-completed-step-level1\"\r\n                                  aria-hidden=\"true\">\r\n                            </span>\r\n                            <span class=\"panels-with-border-completed-step-level2\">\r\n                                <span class=\"panels-with-border-completed-step-level21\">\r\n                                    <span class=\"panels-with-border-completed-step-level211\">\r\n                                        <svg class=\"w-6 h-6 text-white\"\r\n                                             xmlns=\"http://www.w3.org/2000/svg\"\r\n                                             viewBox=\"0 0 20 20\"\r\n                                             fill=\"currentColor\"\r\n                                             aria-hidden=\"true\">\r\n                                            <path fill-rule=\"evenodd\"\r\n                                                  d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n                                                  clip-rule=\"evenodd\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-completed-step-level22\">\r\n                                    <span class=\"panels-with-border-completed-step-level221\"\r\n                                          *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-completed-step-level222\"\r\n                                          *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"panels-with-border-active-step\"\r\n                         *ngIf=\"step.state === StepState.Active\">\r\n                        <div aria-current=\"step\">\r\n                            <span class=\"panels-with-border-active-step-level1\"\r\n                                  aria-hidden=\"true\">\r\n                            </span>\r\n                            <span class=\"panels-with-border-active-step-level2\">\r\n                                <span class=\"panels-with-border-active-step-level21\">\r\n                                    <span class=\"panels-with-border-active-step-level211\">\r\n                                        <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-active-step-level22\">\r\n                                    <span class=\"panels-with-border-active-step-level221\"\r\n                                          *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-active-step-level222\"\r\n                                          *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\"\r\n                             aria-hidden=\"true\"\r\n                             *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\"\r\n                                 viewBox=\"0 0 12 82\"\r\n                                 fill=\"none\"\r\n                                 preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\"\r\n                                      stroke=\"currentcolor\"\r\n                                      vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"panels-with-border-upcoming-step\"\r\n                         *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-upcoming-step-level1\"\r\n                                  aria-hidden=\"true\">\r\n                            </span>\r\n                            <span class=\"panels-with-border-upcoming-step-level2\">\r\n                                <span class=\"panels-with-border-upcoming-step-level21\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level211\">\r\n                                        <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-upcoming-step-level22\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level221\"\r\n                                          *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"text-sm font-medium text-gray-500\"\r\n                                          *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\"\r\n                             aria-hidden=\"true\"\r\n                             *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\"\r\n                                 viewBox=\"0 0 12 82\"\r\n                                 fill=\"none\"\r\n                                 preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\"\r\n                                      stroke=\"currentcolor\"\r\n                                      vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Progress -->\r\n    <div *ngSwitchCase=\"StepperType.Progress\">\r\n        <div class=\"mt-6\"\r\n             aria-hidden=\"true\">\r\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\r\n                <div class=\"h-2 bg-blue-600 rounded-full\"\r\n                     [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\">\r\n                </div>\r\n            </div>\r\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\r\n                <div *ngFor=\"let step of steps\"\r\n                     (click)=\"onSelectStep(step)\"\r\n                     class=\"text-blue-600 cursor-pointer\">\r\n                    <ng-container *ngIf=\"step.stepLabel\"\r\n                                  [ngTemplateOutlet]=\"step.stepLabel.template\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Simple -->\r\n    <nav aria-label=\"Progress\"\r\n         *ngSwitchCase=\"StepperType.Simple\">\r\n        <ol role=\"list\"\r\n            class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n            <li *ngFor=\"let step of steps\"\r\n                (click)=\"onSelectStep(step)\"\r\n                class=\"md:flex-1 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\r\n                     *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\"\r\n                          *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\r\n                     aria-current=\"step\"\r\n                     *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\"\r\n                          *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\r\n                     *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\"\r\n                          *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n</ng-container>\r\n<ng-container *ngFor=\"let step of steps\">\r\n    <ng-container *ngIf=\"step.state === StepState.Active\"\r\n                  [ngTemplateOutlet]=\"step.content\">\r\n    </ng-container>\r\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\">\r\n    <!-- Bullets -->\r\n    <nav class=\"stepper-bullets-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\r\n        <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n        <ol role=\"list\" class=\"stepper-bullets-ol\">\r\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                <!-- Completed Step -->\r\n                <div class=\"stepper-bullets-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"stepper-bullets-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"stepper-bullets-active-step-level1\" aria-hidden=\"true\">\r\n                        <span class=\"stepper-bullets-active-step-level1\"></span>\r\n                    </span>\r\n                    <span class=\"stepper-bullets-active-step-bullet\" aria-hidden=\"true\"></span>\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div href=\"#\" class=\"stepper-bullets-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Bullets & Text -->\r\n    <div class=\"stepper-bullets-and-text-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n        <nav aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"stepper-bullets-and-text-ol\">\r\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                    <!-- Complete Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <span class=\"stepper-bullets-and-text-completed-step\">\r\n                            <span class=\"stepper-bullets-and-text-completed-step-level1\">\r\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                            <span class=\"stepper-bullets-and-text-completed-step-container\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"stepper-bullets-and-text-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                        <span class=\"stepper-bullets-and-text-active-step-level1\" aria-hidden=\"true\">\r\n                            <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\r\n                            <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\r\n                        </span>\r\n                        <span class=\"stepper-bullets-and-text-active-step-container\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"stepper-bullets-and-text-upcoming-step\">\r\n                            <div class=\"stepper-bullets-and-text-upcoming-step-level1\" aria-hidden=\"true\">\r\n                                <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\r\n                            </div>\r\n                            <p class=\"stepper-bullets-and-text-upcoming-step-container\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Circles -->\r\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\r\n        <ol class=\"flex items-center\" role=\"list\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\r\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                        </svg>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\r\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\r\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Circles With Text -->\r\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n        <ol role=\"list\" class=\"overflow-hidden\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\r\n                <!-- Complete Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\r\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div href=\"#\" class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\r\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n                <!-- Completed step -->\r\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                            </svg>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Active step -->\r\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\r\n                    </span>\r\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming step -->\r\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Arrow separator for lg screens and up -->\r\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\r\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels With Border -->\r\n    <div class=\"panels-with-border-container\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n        <nav class=\"panels-with-border-nav\" aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"panels-with-border-ol\">\r\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"panels-with-border-li\">\r\n                    <!-- Completed Step -->\r\n                    <div class=\"panels-with-border-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-completed-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-completed-step-level2\">\r\n                                <span class=\"panels-with-border-completed-step-level21\">\r\n                                    <span class=\"panels-with-border-completed-step-level211\">\r\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-completed-step-level22\">\r\n                                    <span class=\"panels-with-border-completed-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-completed-step-level222\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"panels-with-border-active-step\" *ngIf=\"step.state === StepState.Active\">\r\n                        <div aria-current=\"step\">\r\n                            <span class=\"panels-with-border-active-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-active-step-level2\">\r\n                                <span class=\"panels-with-border-active-step-level21\">\r\n                                    <span class=\"panels-with-border-active-step-level211\">\r\n                                        <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-active-step-level22\">\r\n                                    <span class=\"panels-with-border-active-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-active-step-level222\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"panels-with-border-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-upcoming-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-upcoming-step-level2\">\r\n                                <span class=\"panels-with-border-upcoming-step-level21\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level211\">\r\n                                        <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-upcoming-step-level22\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Progress -->\r\n    <div *ngSwitchCase=\"StepperType.Progress\">\r\n        <div class=\"mt-6\" aria-hidden=\"true\">\r\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\r\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\r\n            </div>\r\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\r\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\r\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Simple -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\r\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n</ng-container>\r\n<ng-container *ngFor=\"let step of steps\">\r\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n</ng-container>" }]
+                    ], template: "<ng-container [ngSwitch]=\"type\">\r\n    <!-- Bullets -->\r\n    <nav class=\"stepper-bullets-container\"\r\n         aria-label=\"Progress\"\r\n         *ngSwitchCase=\"StepperType.Bullets\">\r\n        <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n        <ol role=\"list\"\r\n            class=\"stepper-bullets-ol\">\r\n            <li class=\"cursor-pointer\"\r\n                *ngFor=\"let step of steps\"\r\n                (click)=\"onSelectStep(step)\">\r\n                <!-- Completed Step -->\r\n                <div class=\"stepper-bullets-completed-step\"\r\n                     *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"stepper-bullets-active-step\"\r\n                     aria-current=\"step\"\r\n                     *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"stepper-bullets-active-step-level1\"\r\n                          aria-hidden=\"true\">\r\n                        <span class=\"stepper-bullets-active-step-level1\"></span>\r\n                    </span>\r\n                    <span class=\"stepper-bullets-active-step-bullet\"\r\n                          aria-hidden=\"true\">\r\n                    </span>\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div href=\"#\"\r\n                     class=\"stepper-bullets-upcoming-step\"\r\n                     *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Bullets & Text -->\r\n    <div class=\"stepper-bullets-and-text-container\"\r\n         aria-label=\"Progress\"\r\n         *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n        <nav aria-label=\"Progress\">\r\n            <ol role=\"list\"\r\n                class=\"stepper-bullets-and-text-ol\">\r\n                <li class=\"cursor-pointer\"\r\n                    *ngFor=\"let step of steps\"\r\n                    (click)=\"onSelectStep(step)\">\r\n                    <!-- Complete Step -->\r\n                    <div class=\"group\"\r\n                         *ngIf=\"step.state === StepState.Completed\">\r\n                        <span class=\"stepper-bullets-and-text-completed-step\">\r\n                            <span class=\"stepper-bullets-and-text-completed-step-level1\">\r\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\"\r\n                                     xmlns=\"http://www.w3.org/2000/svg\"\r\n                                     viewBox=\"0 0 20 20\"\r\n                                     fill=\"currentColor\"\r\n                                     aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\"\r\n                                          d=\"M10 18a8 8 0 100-16 8 8 0 000 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\"\r\n                                          clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                            <span class=\"stepper-bullets-and-text-completed-step-container\"\r\n                                  *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"stepper-bullets-and-text-active-step\"\r\n                         aria-current=\"step\"\r\n                         *ngIf=\"step.state === StepState.Active\">\r\n                        <span class=\"stepper-bullets-and-text-active-step-level1\"\r\n                              aria-hidden=\"true\">\r\n                            <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\r\n                            <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\r\n                        </span>\r\n                        <span class=\"stepper-bullets-and-text-active-step-container\"\r\n                              *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"group\"\r\n                         *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"stepper-bullets-and-text-upcoming-step\">\r\n                            <div class=\"stepper-bullets-and-text-upcoming-step-level1\"\r\n                                 aria-hidden=\"true\">\r\n                                <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\r\n                            </div>\r\n                            <p class=\"stepper-bullets-and-text-upcoming-step-container\"\r\n                               *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Circles -->\r\n    <nav class=\"flex justify-center\"\r\n         aria-label=\"Progress\"\r\n         *ngSwitchCase=\"StepperType.Circles\">\r\n        <ol class=\"flex items-center\"\r\n            role=\"list\">\r\n            <li *ngFor=\"let step of steps\"\r\n                (click)=\"onSelectStep(step)\"\r\n                class=\"relative pr-8 sm:pr-20 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"absolute inset-0 flex items-center\"\r\n                         aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\r\n                        <svg class=\"w-5 h-5 text-white\"\r\n                             xmlns=\"http://www.w3.org/2000/svg\"\r\n                             viewBox=\"0 0 20 20\"\r\n                             fill=\"currentColor\"\r\n                             aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\"\r\n                                  d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n                                  clip-rule=\"evenodd\" />\r\n                        </svg>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"absolute inset-0 flex items-center\"\r\n                         aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\"\r\n                         aria-current=\"step\">\r\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"\r\n                              aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"absolute inset-0 flex items-center\"\r\n                         aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\r\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"\r\n                              aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Circles With Text -->\r\n    <nav class=\"flex items-center justify-center\"\r\n         aria-label=\"Progress\"\r\n         *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n        <ol role=\"list\"\r\n            class=\"overflow-hidden\">\r\n            <li *ngFor=\"let step of steps\"\r\n                (click)=\"onSelectStep(step)\"\r\n                class=\"relative pb-10 cursor-pointer\">\r\n                <!-- Complete Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\"\r\n                         aria-hidden=\"true\"\r\n                         *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                                <svg class=\"w-5 h-5 text-white\"\r\n                                     xmlns=\"http://www.w3.org/2000/svg\"\r\n                                     viewBox=\"0 0 20 20\"\r\n                                     fill=\"currentColor\"\r\n                                     aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\"\r\n                                          d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n                                          clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\"\r\n                                  *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\"\r\n                                  *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\"\r\n                         aria-hidden=\"true\"\r\n                         *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\"\r\n                         aria-current=\"step\">\r\n                        <span class=\"h-9 flex items-center\"\r\n                              aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\r\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\"\r\n                                  *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\"\r\n                                  *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\"\r\n                         aria-hidden=\"true\"\r\n                         *ngIf=\"!step.isLast\"></div>\r\n                    <div href=\"#\"\r\n                         class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\"\r\n                              aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\"\r\n                                  *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\"\r\n                                  *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels -->\r\n    <nav aria-label=\"Progress\"\r\n         *ngSwitchCase=\"StepperType.Panels\">\r\n        <ol role=\"list\"\r\n            class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\r\n            <li *ngFor=\"let step of steps\"\r\n                (click)=\"onSelectStep(step)\"\r\n                class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n                <!-- Completed step -->\r\n                <div class=\"group flex items-center w-full\"\r\n                     *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                            <svg class=\"w-6 h-6 text-white\"\r\n                                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                                 viewBox=\"0 0 20 20\"\r\n                                 fill=\"currentColor\"\r\n                                 aria-hidden=\"true\">\r\n                                <path fill-rule=\"evenodd\"\r\n                                      d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n                                      clip-rule=\"evenodd\" />\r\n                            </svg>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\"\r\n                              *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Active step -->\r\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\"\r\n                     *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\r\n                    </span>\r\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\"\r\n                          *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming step -->\r\n                <div class=\"group flex items-center\"\r\n                     *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\"\r\n                              *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Arrow separator for lg screens and up -->\r\n                <div *ngIf=\"!step.isLast\"\r\n                     class=\"hidden md:block absolute top-0 right-0 h-full w-5\"\r\n                     aria-hidden=\"true\">\r\n                    <svg class=\"h-full w-full text-gray-300\"\r\n                         viewBox=\"0 0 22 80\"\r\n                         fill=\"none\"\r\n                         preserveAspectRatio=\"none\">\r\n                        <path d=\"M0 -2L20 40L0 82\"\r\n                              vector-effect=\"non-scaling-stroke\"\r\n                              stroke=\"currentcolor\"\r\n                              stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels With Border -->\r\n    <div class=\"panels-with-border-container\"\r\n         *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n        <nav class=\"panels-with-border-nav\"\r\n             aria-label=\"Progress\">\r\n            <ol role=\"list\"\r\n                class=\"panels-with-border-ol\">\r\n                <li *ngFor=\"let step of steps\"\r\n                    (click)=\"onSelectStep(step)\"\r\n                    class=\"panels-with-border-li\">\r\n                    <!-- Completed Step -->\r\n                    <div class=\"panels-with-border-completed-step\"\r\n                         *ngIf=\"step.state === StepState.Completed\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-completed-step-level1\"\r\n                                  aria-hidden=\"true\">\r\n                            </span>\r\n                            <span class=\"panels-with-border-completed-step-level2\">\r\n                                <span class=\"panels-with-border-completed-step-level21\">\r\n                                    <span class=\"panels-with-border-completed-step-level211\">\r\n                                        <svg class=\"w-6 h-6 text-white\"\r\n                                             xmlns=\"http://www.w3.org/2000/svg\"\r\n                                             viewBox=\"0 0 20 20\"\r\n                                             fill=\"currentColor\"\r\n                                             aria-hidden=\"true\">\r\n                                            <path fill-rule=\"evenodd\"\r\n                                                  d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n                                                  clip-rule=\"evenodd\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-completed-step-level22\">\r\n                                    <span class=\"panels-with-border-completed-step-level221\"\r\n                                          *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-completed-step-level222\"\r\n                                          *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"panels-with-border-active-step\"\r\n                         *ngIf=\"step.state === StepState.Active\">\r\n                        <div aria-current=\"step\">\r\n                            <span class=\"panels-with-border-active-step-level1\"\r\n                                  aria-hidden=\"true\">\r\n                            </span>\r\n                            <span class=\"panels-with-border-active-step-level2\">\r\n                                <span class=\"panels-with-border-active-step-level21\">\r\n                                    <span class=\"panels-with-border-active-step-level211\">\r\n                                        <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-active-step-level22\">\r\n                                    <span class=\"panels-with-border-active-step-level221\"\r\n                                          *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-active-step-level222\"\r\n                                          *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\"\r\n                             aria-hidden=\"true\"\r\n                             *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\"\r\n                                 viewBox=\"0 0 12 82\"\r\n                                 fill=\"none\"\r\n                                 preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\"\r\n                                      stroke=\"currentcolor\"\r\n                                      vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"panels-with-border-upcoming-step\"\r\n                         *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-upcoming-step-level1\"\r\n                                  aria-hidden=\"true\">\r\n                            </span>\r\n                            <span class=\"panels-with-border-upcoming-step-level2\">\r\n                                <span class=\"panels-with-border-upcoming-step-level21\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level211\">\r\n                                        <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-upcoming-step-level22\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level221\"\r\n                                          *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"text-sm font-medium text-gray-500\"\r\n                                          *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\"\r\n                             aria-hidden=\"true\"\r\n                             *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\"\r\n                                 viewBox=\"0 0 12 82\"\r\n                                 fill=\"none\"\r\n                                 preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\"\r\n                                      stroke=\"currentcolor\"\r\n                                      vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Progress -->\r\n    <div *ngSwitchCase=\"StepperType.Progress\">\r\n        <div class=\"mt-6\"\r\n             aria-hidden=\"true\">\r\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\r\n                <div class=\"h-2 bg-blue-600 rounded-full\"\r\n                     [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\">\r\n                </div>\r\n            </div>\r\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\r\n                <div *ngFor=\"let step of steps\"\r\n                     (click)=\"onSelectStep(step)\"\r\n                     class=\"text-blue-600 cursor-pointer\">\r\n                    <ng-container *ngIf=\"step.stepLabel\"\r\n                                  [ngTemplateOutlet]=\"step.stepLabel.template\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Simple -->\r\n    <nav aria-label=\"Progress\"\r\n         *ngSwitchCase=\"StepperType.Simple\">\r\n        <ol role=\"list\"\r\n            class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n            <li *ngFor=\"let step of steps\"\r\n                (click)=\"onSelectStep(step)\"\r\n                class=\"md:flex-1 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\r\n                     *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\"\r\n                          *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\r\n                     aria-current=\"step\"\r\n                     *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\"\r\n                          *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\r\n                     *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\"\r\n                          *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n</ng-container>\r\n<ng-container *ngFor=\"let step of steps\">\r\n    <ng-container *ngIf=\"step.state === StepState.Active\"\r\n                  [ngTemplateOutlet]=\"step.content\">\r\n    </ng-container>\r\n</ng-container>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { steps: [{
                 type: ContentChildren,
                 args: [LibStepComponent, { descendants: true }]
@@ -2362,18 +2673,24 @@ class ShellSidebarComponent {
         this.sectionLinks = of([]);
         // tslint:disable-next-line:no-input-rename
         this.shellConfig = undefined;
+        this.sticky = false;
         this.activeFragment = null;
     }
+    get activeNavLinkClass() {
+        const linkClasses = 'sidebar ' + (this.sticky ? 'nav-link-active-b' : 'nav-link-active-l') + ' group';
+        console.log('activeNavLinkClass getter ', linkClasses);
+        return linkClasses;
+    }
     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 -->\r\n<div class=\"shell-sidebar-component-container\">\r\n <div class=\"shell-sidebar-component-links-container sidebar\">\r\n    <lib-nav-links-list\r\n      [show-icons]=\"true\"\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'sidebar nav-link group'\"\r\n      [link-active-class]=\"'sidebar nav-link-active group'\">\r\n    </lib-nav-links-list>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
+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"], sticky: "sticky" }, ngImport: i0, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"shell-sidebar-component-container\">\r\n <div class=\"shell-sidebar-component-links-container sidebar\">\r\n    <lib-nav-links-list\r\n      [show-icons]=\"true\"\r\n      [show-text]=\"!sticky\"\r\n      [large-icons]=\"sticky\"\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'sidebar nav-link group'\"\r\n      [link-active-class]=\"'sidebar nav-link-active-b group'\">\r\n    </lib-nav-links-list>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons", "show-text", "large-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 -->\r\n<div class=\"shell-sidebar-component-container\">\r\n <div class=\"shell-sidebar-component-links-container sidebar\">\r\n    <lib-nav-links-list\r\n      [show-icons]=\"true\"\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'sidebar nav-link group'\"\r\n      [link-active-class]=\"'sidebar nav-link-active group'\">\r\n    </lib-nav-links-list>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-shell-sidebar', template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"shell-sidebar-component-container\">\r\n <div class=\"shell-sidebar-component-links-container sidebar\">\r\n    <lib-nav-links-list\r\n      [show-icons]=\"true\"\r\n      [show-text]=\"!sticky\"\r\n      [large-icons]=\"sticky\"\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'sidebar nav-link group'\"\r\n      [link-active-class]=\"'sidebar nav-link-active-b group'\">\r\n    </lib-nav-links-list>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: i1$1.Router, decorators: [{
                         type: Inject,
@@ -2391,8 +2708,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
             }], shellConfig: [{
                 type: Input,
                 args: ['config']
+            }], sticky: [{
+                type: Input,
+                args: ['sticky']
             }] } });
 
+class LanguageSelectionComponent {
+    constructor(langsService) {
+        this.langsService = langsService;
+        this.menuExpanded = false;
+    }
+    ngOnInit() {
+    }
+    selectLang(option) {
+        var _a;
+        if ((_a = this.langsService) === null || _a === void 0 ? void 0 : _a.setSelected) {
+            this.langsService.setSelected(option.value);
+        }
+    }
+    onClickOutside($event) {
+        this.menuExpanded = false;
+    }
+}
+LanguageSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LanguageSelectionComponent, deps: [{ token: APP_LANGUAGES }], target: i0.ɵɵFactoryTarget.Component });
+LanguageSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LanguageSelectionComponent, selector: "lib-language-selection", ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button class=\"text-blue-300 hover:text-blue-400\" (click)=\"menuExpanded = !menuExpanded\">\r\n    <i class=\"text-xs mr-1 ms-Icon ms-Icon--Globe\"></i>\r\n    <ng-container *ngFor=\"let lang of langsService?.options | async\">\r\n      <span *ngIf=\"lang.value === langsService?.selected\">{{lang.text}}</span>\r\n    </ng-container>\r\n  </button>\r\n\r\n  <div\r\n    [class]=\"menuExpanded ? 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none':'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n    <div class=\"py-1\" role=\"none\">\r\n      <ng-container *ngFor=\"let lang of langsService?.options | async\">\r\n        <a (click)=\"selectLang(lang)\" *ngIf=\"lang.value != langsService?.selected\" class=\"nav-link-profile\" role=\"menuitem\" tabindex=\"-1\" id=\"menu-item-0\">\r\n          <i class=\"text-xs mr-1 ms-Icon ms-Icon--GlobeFavorite\"></i>\r\n          {{lang.description}}\r\n        </a>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", 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: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LanguageSelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-language-selection', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button class=\"text-blue-300 hover:text-blue-400\" (click)=\"menuExpanded = !menuExpanded\">\r\n    <i class=\"text-xs mr-1 ms-Icon ms-Icon--Globe\"></i>\r\n    <ng-container *ngFor=\"let lang of langsService?.options | async\">\r\n      <span *ngIf=\"lang.value === langsService?.selected\">{{lang.text}}</span>\r\n    </ng-container>\r\n  </button>\r\n\r\n  <div\r\n    [class]=\"menuExpanded ? 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none':'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n    <div class=\"py-1\" role=\"none\">\r\n      <ng-container *ngFor=\"let lang of langsService?.options | async\">\r\n        <a (click)=\"selectLang(lang)\" *ngIf=\"lang.value != langsService?.selected\" class=\"nav-link-profile\" role=\"menuitem\" tabindex=\"-1\" id=\"menu-item-0\">\r\n          <i class=\"text-xs mr-1 ms-Icon ms-Icon--GlobeFavorite\"></i>\r\n          {{lang.description}}\r\n        </a>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [APP_LANGUAGES]
+                    }] }];
+    } });
+
 class NotificationsIndicatorComponent {
     constructor(notifications, links) {
         this.notifications = notifications;
@@ -2470,35 +2819,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                     }] }];
     } });
 
-class LanguageSelectionComponent {
-    constructor(langsService) {
-        this.langsService = langsService;
-        this.menuExpanded = false;
-    }
-    ngOnInit() {
-    }
-    selectLang(option) {
-        var _a;
-        if ((_a = this.langsService) === null || _a === void 0 ? void 0 : _a.setSelected) {
-            this.langsService.setSelected(option.value);
-        }
-    }
-    onClickOutside($event) {
-        this.menuExpanded = false;
-    }
-}
-LanguageSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LanguageSelectionComponent, deps: [{ token: APP_LANGUAGES }], target: i0.ɵɵFactoryTarget.Component });
-LanguageSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LanguageSelectionComponent, selector: "lib-language-selection", ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button class=\"text-blue-300 hover:text-blue-400\" (click)=\"menuExpanded = !menuExpanded\">\r\n    <i class=\"text-xs mr-1 ms-Icon ms-Icon--Globe\"></i>\r\n    <ng-container *ngFor=\"let lang of langsService?.options | async\">\r\n      <span *ngIf=\"lang.value === langsService?.selected\">{{lang.text || langsService?.default}}</span>\r\n    </ng-container>\r\n  </button>\r\n\r\n  <div\r\n    [class]=\"menuExpanded ? 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none':'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n    <div class=\"py-1\" role=\"none\">\r\n      <ng-container *ngFor=\"let lang of langsService?.options | async\">\r\n        <a (click)=\"selectLang(lang)\" *ngIf=\"lang.value != langsService?.selected\" class=\"nav-link-profile\" role=\"menuitem\" tabindex=\"-1\" id=\"menu-item-0\">\r\n          <i class=\"text-xs mr-1 ms-Icon ms-Icon--GlobeFavorite\"></i>\r\n          {{lang.description}}\r\n        </a>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", 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: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LanguageSelectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-language-selection', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button class=\"text-blue-300 hover:text-blue-400\" (click)=\"menuExpanded = !menuExpanded\">\r\n    <i class=\"text-xs mr-1 ms-Icon ms-Icon--Globe\"></i>\r\n    <ng-container *ngFor=\"let lang of langsService?.options | async\">\r\n      <span *ngIf=\"lang.value === langsService?.selected\">{{lang.text || langsService?.default}}</span>\r\n    </ng-container>\r\n  </button>\r\n\r\n  <div\r\n    [class]=\"menuExpanded ? 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none':'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n    <div class=\"py-1\" role=\"none\">\r\n      <ng-container *ngFor=\"let lang of langsService?.options | async\">\r\n        <a (click)=\"selectLang(lang)\" *ngIf=\"lang.value != langsService?.selected\" class=\"nav-link-profile\" role=\"menuitem\" tabindex=\"-1\" id=\"menu-item-0\">\r\n          <i class=\"text-xs mr-1 ms-Icon ms-Icon--GlobeFavorite\"></i>\r\n          {{lang.description}}\r\n        </a>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [APP_LANGUAGES]
-                    }] }];
-    } });
-
 class UserProfileMenuComponent {
     constructor(authService, router, links) {
         this.authService = authService;
@@ -2543,7 +2863,7 @@ 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)\">\r\n\r\n  <div class=\"inline-flex\">\r\n    <!-- Username -->\r\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n        {{ user.profile.name }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [class.ml-2]=\"showUserName\">\r\n      <button type=\"button\" \r\n              *ngIf=\"user\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\"\r\n              (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n        <span class=\"sr-only\">Open user menu</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n        </span>\r\n      </button>\r\n\r\n      <button type=\"button\"\r\n              *ngIf=\"!user\"\r\n              (click)=\"signin($event)\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\">\r\n        <span class=\"sr-only\">sign in</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n        </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"userMenuExpanded ?\r\n    'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n    :\r\n    'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n         <lib-nav-links-list\r\n            [links]=\"links.profile\"\r\n            [link-class]=\"'nav-link-profile'\"\r\n            [link-active-class]=\"'nav-link-profile-active'\">\r\n         </lib-nav-links-list>\r\n  </div>\r\n\r\n</div>\r\n\r\n", 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)\">\r\n\r\n  <div class=\"inline-flex\">\r\n    <!-- Username -->\r\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n        {{ user.profile.name }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [class.ml-2]=\"showUserName\">\r\n      <button type=\"button\" \r\n              *ngIf=\"user\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\"\r\n              (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n        <span class=\"sr-only\">Open user menu</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n        </span>\r\n      </button>\r\n\r\n      <button type=\"button\"\r\n              *ngIf=\"!user\"\r\n              (click)=\"signin($event)\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\">\r\n        <span class=\"sr-only\">sign in</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n        </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"userMenuExpanded ?\r\n    'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n    :\r\n    'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n         <lib-nav-links-list\r\n            [links]=\"links.profile\"\r\n            [link-class]=\"'nav-link-profile'\"\r\n            [link-active-class]=\"'nav-link-profile-active'\">\r\n         </lib-nav-links-list>\r\n  </div>\r\n\r\n</div>\r\n\r\n", 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", "show-text", "large-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)\">\r\n\r\n  <div class=\"inline-flex\">\r\n    <!-- Username -->\r\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n        {{ user.profile.name }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [class.ml-2]=\"showUserName\">\r\n      <button type=\"button\" \r\n              *ngIf=\"user\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\"\r\n              (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n        <span class=\"sr-only\">Open user menu</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n        </span>\r\n      </button>\r\n\r\n      <button type=\"button\"\r\n              *ngIf=\"!user\"\r\n              (click)=\"signin($event)\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\">\r\n        <span class=\"sr-only\">sign in</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n        </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"userMenuExpanded ?\r\n    'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n    :\r\n    'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n         <lib-nav-links-list\r\n            [links]=\"links.profile\"\r\n            [link-class]=\"'nav-link-profile'\"\r\n            [link-active-class]=\"'nav-link-profile-active'\">\r\n         </lib-nav-links-list>\r\n  </div>\r\n\r\n</div>\r\n\r\n" }]
@@ -2641,7 +2961,7 @@ 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"], showLangs: ["show-langs", "showLangs"], border: "border" }, ngImport: i0, template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div class=\"shell-header-border\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-link-container\">\r\n          <div class=\"shell-header-link-container-inner\">\r\n            <lib-nav-links-list\r\n              [links]=\"sectionLinks\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'nav-link'\"\r\n              [link-active-class]=\"'nav-link-active'\">\r\n            </lib-nav-links-list>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n\r\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n            <lib-nav-links-list\r\n              [links]=\"links.profileActions\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\"\r\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n            </lib-nav-links-list>\r\n\r\n\r\n            <!-- Profile dropdown -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\r\n\r\n            <!-- languages dropdown -->\r\n            <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n              <lib-language-selection></lib-language-selection>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <!--\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n        -->\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n", 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>\r\n  <div class=\"shell-header-paddings\">\r\n    <div class=\"shell-header-border\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-link-container\">\r\n          <div class=\"shell-header-link-container-inner\">\r\n            <lib-nav-links-list\r\n              [links]=\"sectionLinks\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'nav-link'\"\r\n              [link-active-class]=\"'nav-link-active'\">\r\n            </lib-nav-links-list>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n\r\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n            <lib-nav-links-list\r\n              [links]=\"links.profileActions\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\"\r\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n            </lib-nav-links-list>\r\n\r\n\r\n            <!-- Profile dropdown -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\r\n\r\n            <!-- languages dropdown -->\r\n            <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n              <lib-language-selection></lib-language-selection>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <!--\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n        -->\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n", 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: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons", "show-text", "large-icons"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { 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>\r\n  <div class=\"shell-header-paddings\">\r\n    <div class=\"shell-header-border\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-link-container\">\r\n          <div class=\"shell-header-link-container-inner\">\r\n            <lib-nav-links-list\r\n              [links]=\"sectionLinks\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'nav-link'\"\r\n              [link-active-class]=\"'nav-link-active'\">\r\n            </lib-nav-links-list>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n\r\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n            <lib-nav-links-list\r\n              [links]=\"links.profileActions\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\"\r\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n            </lib-nav-links-list>\r\n\r\n\r\n            <!-- Profile dropdown -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\r\n\r\n            <!-- languages dropdown -->\r\n            <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n              <lib-language-selection></lib-language-selection>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <!--\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n        -->\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n" }]
@@ -2692,7 +3012,7 @@ class ShellSidebarHeaderComponent extends ShellHeaderComponent {
     }
 }
 ShellSidebarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-ShellSidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0, template: "<div class=\"shell-header-paddings\">\r\n    <div class=\"shell-header-border\">\r\n        <div class=\"shell-header-menu-container\">\r\n            <div class=\"shell-header-md-visible\">\r\n                <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n                <!-- Profile dropdown -->\r\n                <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n                    <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n                </div>\r\n                <!-- Notifications dropdown -->\r\n                <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n                    <lib-notifications-indicator></lib-notifications-indicator>\r\n                </div>\r\n                <!-- languages dropdown -->\r\n                <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n                    <lib-language-selection></lib-language-selection>\r\n                </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n \r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }] });
+ShellSidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0, template: "<div class=\"shell-header-paddings\">\r\n    <div class=\"shell-header-border\">\r\n        <div class=\"shell-header-menu-container\">\r\n            <div class=\"shell-header-md-visible\">\r\n                <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n                <!-- Profile dropdown -->\r\n                <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n                    <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n                </div>\r\n                <!-- Notifications dropdown -->\r\n                <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n                    <lib-notifications-indicator></lib-notifications-indicator>\r\n                </div>\r\n                <!-- languages dropdown -->\r\n                <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n                    <lib-language-selection></lib-language-selection>\r\n                </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n \r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { 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\">\r\n    <div class=\"shell-header-border\">\r\n        <div class=\"shell-header-menu-container\">\r\n            <div class=\"shell-header-md-visible\">\r\n                <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n                <!-- Profile dropdown -->\r\n                <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n                    <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n                </div>\r\n                <!-- Notifications dropdown -->\r\n                <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n                    <lib-notifications-indicator></lib-notifications-indicator>\r\n                </div>\r\n                <!-- languages dropdown -->\r\n                <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n                    <lib-language-selection></lib-language-selection>\r\n                </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n \r\n" }]
@@ -2717,7 +3037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
 
 class ShellSidebarLayoutComponent {
     constructor() {
-        this.showMobileSidebar = true;
+        this.showMobileSidebar = false;
     }
     ngOnInit() {
     }
@@ -2726,10 +3046,10 @@ class ShellSidebarLayoutComponent {
     }
 }
 ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config" }, ngImport: i0, template: "<div>\r\n    <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\r\n    <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\r\n      <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\r\n      <div class=\"sidebar-off-canvas-menu-backdrop\" \r\n          [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\r\n      </div>\r\n  \r\n      <div class=\"sidebar-off-canvas-menu-container-inner\" \r\n      [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\" \r\n      [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\r\n        <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\r\n        <div class=\"sidebar-off-canvas-layout-container\">\r\n          <!--Close button, show/hide based on off-canvas menu state.-->\r\n          <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n            <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n              <span class=\"sr-only\">Close sidebar</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n  \r\n          <div class=\"sidebar-off-canvas-app-logo-container\">\r\n            <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n\r\n          <lib-shell-sidebar></lib-shell-sidebar>\r\n         \r\n        </div>\r\n  \r\n        <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\r\n          <!-- Dummy element to force sidebar to shrink to fit close icon -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  \r\n    <!-- Static sidebar for desktop -->\r\n    <div class=\"sidebar-static-menu-outer-container\">\r\n    \r\n    <div class=\"sidebar-static-menu-container\" \r\n      [class.sidebar-static-menu-container-active]=\"showMobileSidebar\" \r\n      [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\r\n      <!-- Sidebar component, swap this element with another sidebar if you like -->\r\n      <div class=\"sidebar-static-menu-container-inner\">\r\n        <div class=\"sidebar-static-menu-app-logo-container\">\r\n          <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n        </div>\r\n        <lib-shell-sidebar></lib-shell-sidebar>\r\n      </div>\r\n    </div>\r\n    </div>\r\n\r\n    <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\r\n      \r\n      <div class=\"sidebar-static-menu-sticky-header-container\" *ngIf=\"config?.showHeader\">\r\n        <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n          <span class=\"sr-only\">Toggle sidebar</span>\r\n          <!-- Heroicon name: outline/menu-alt-2 -->\r\n          <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n          </svg>\r\n        </button>\r\n        \r\n        <!-- sidebar-static-menu-header-container -->\r\n        <div class=\"sidebar-static-menu-header-container\">\r\n          <div class=\"sidebar-static-menu-header-near-container\">\r\n            <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"!showMobileSidebar\">\r\n              <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n            </div>\r\n          </div>\r\n          <div class=\"sidebar-static-menu-header-far-container\">\r\n            <lib-shell-sidebar-header \r\n            [show-userName]=\"config?.showUserNameOnHeader\"\r\n            [show-alerts]=\"config?.showAlertsOnHeader\" \r\n            [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\r\n          </div>\r\n        </div>\r\n      </div>\r\n  \r\n      <div flex-1>\r\n        <main class=\"shell-content-container-fluid\">\r\n            <div class=\"shell-content-container-inner\">\r\n              <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\r\n              <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n            </div>\r\n          </main>\r\n      </div>\r\n    </div>\r\n  </div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }, { kind: "component", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }] });
+ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config" }, ngImport: i0, template: "<div>\r\n  <div class=\"sidebar-off-canvas-menu-container\"\r\n       role=\"dialog\"\r\n       aria-modal=\"true\">\r\n    <div class=\"sidebar-off-canvas-menu-backdrop\"\r\n         [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\r\n    </div>\r\n    <div class=\"sidebar-off-canvas-menu-container-inner\"\r\n         [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\"\r\n         [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\r\n      <div class=\"sidebar-off-canvas-layout-container\">\r\n        <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n          <button type=\"button\"\r\n                  class=\"sidebar-off-canvas-toggle-button\"\r\n                  (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n            <span class=\"sr-only\">Close sidebar</span>\r\n            <!-- Heroicon name: outline/x -->\r\n            <svg class=\"h-6 w-6 text-white\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke-width=\"2\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>          \r\n        </div>\r\n        <div class=\"sidebar-off-canvas-app-logo-container\">\r\n          <img class=\"h-8 w-auto\"\r\n               [src]=\"config?.appLogo\"\r\n               [alt]=\"config?.appLogoAlt\">\r\n        </div>\r\n        <lib-shell-sidebar></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"sidebar-dummy-element\"\r\n           aria-hidden=\"true\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-outer-container\">\r\n    <div class=\"sidebar-static-menu-container\"\r\n         [class.sidebar-static-menu-container-active]=\"showMobileSidebar\"\r\n         [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\r\n      <div class=\"sidebar-static-menu-container-inner\">\r\n        <div class=\"sidebar-static-menu-app-logo-container\">\r\n          <img *ngIf=\"showMobileSidebar\" class=\"h-8 w-auto\"\r\n               [src]=\"config?.appLogo\"\r\n               [alt]=\"config?.appLogoAlt\">\r\n          <button \r\n              *ngIf=\"!showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button\"\r\n              (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n              <span class=\"sr-only\">Toggle sidebar</span>\r\n              <svg class=\"h-6 w-6\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                  fill=\"none\"\r\n                  viewBox=\"0 0 24 24\"\r\n                  stroke-width=\"2\"\r\n                  stroke=\"currentColor\"\r\n                  aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                      d=\"M4 6h16M4 12h16M4 18h7\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          <lib-shell-sidebar [sticky]=\"!showMobileSidebar\"></lib-shell-sidebar>\r\n        </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-wrapper\"\r\n       [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\r\n    <div class=\"sidebar-static-menu-sticky-header-container\"\r\n         *ngIf=\"config?.showHeader\">\r\n      <button *ngIf=\"!showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button sm:hidden\"\r\n              (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\r\n        <svg class=\"h-6 w-6\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke-width=\"2\"\r\n             stroke=\"currentColor\"\r\n             aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n      <button *ngIf=\"showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button\"\r\n              (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\r\n        <svg class=\"h-6 w-6\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke-width=\"2\"\r\n             stroke=\"currentColor\"\r\n             aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n      <div class=\"sidebar-static-menu-header-container\">\r\n        <div class=\"sidebar-static-menu-header-near-container\">\r\n          <div class=\"sidebar-static-menu-header-app-logo-container\"\r\n               *ngIf=\"!showMobileSidebar\">\r\n            <img class=\"h-8 w-auto\"\r\n                 [src]=\"config?.appLogo\"\r\n                 [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sidebar-static-menu-header-far-container\">\r\n          <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\r\n                                    [show-alerts]=\"config?.showAlertsOnHeader\"\r\n                                    [show-langs]=\"config?.showLangsOnHeader\">\r\n          </lib-shell-sidebar-header>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div flex-1>\r\n      <main class=\"shell-content-container-fluid\">\r\n        <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\r\n        <div class=\"shell-content-container-inner\">\r\n          <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n        </div>\r\n      </main>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: BreadcrumbComponent, selector: "lib-breadcrumb" }, { kind: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config", "sticky"] }, { 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>\r\n    <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\r\n    <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\r\n      <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\r\n      <div class=\"sidebar-off-canvas-menu-backdrop\" \r\n          [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\r\n      </div>\r\n  \r\n      <div class=\"sidebar-off-canvas-menu-container-inner\" \r\n      [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\" \r\n      [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\r\n        <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\r\n        <div class=\"sidebar-off-canvas-layout-container\">\r\n          <!--Close button, show/hide based on off-canvas menu state.-->\r\n          <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n            <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n              <span class=\"sr-only\">Close sidebar</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n  \r\n          <div class=\"sidebar-off-canvas-app-logo-container\">\r\n            <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n\r\n          <lib-shell-sidebar></lib-shell-sidebar>\r\n         \r\n        </div>\r\n  \r\n        <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\r\n          <!-- Dummy element to force sidebar to shrink to fit close icon -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  \r\n    <!-- Static sidebar for desktop -->\r\n    <div class=\"sidebar-static-menu-outer-container\">\r\n    \r\n    <div class=\"sidebar-static-menu-container\" \r\n      [class.sidebar-static-menu-container-active]=\"showMobileSidebar\" \r\n      [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\r\n      <!-- Sidebar component, swap this element with another sidebar if you like -->\r\n      <div class=\"sidebar-static-menu-container-inner\">\r\n        <div class=\"sidebar-static-menu-app-logo-container\">\r\n          <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n        </div>\r\n        <lib-shell-sidebar></lib-shell-sidebar>\r\n      </div>\r\n    </div>\r\n    </div>\r\n\r\n    <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\r\n      \r\n      <div class=\"sidebar-static-menu-sticky-header-container\" *ngIf=\"config?.showHeader\">\r\n        <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n          <span class=\"sr-only\">Toggle sidebar</span>\r\n          <!-- Heroicon name: outline/menu-alt-2 -->\r\n          <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n          </svg>\r\n        </button>\r\n        \r\n        <!-- sidebar-static-menu-header-container -->\r\n        <div class=\"sidebar-static-menu-header-container\">\r\n          <div class=\"sidebar-static-menu-header-near-container\">\r\n            <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"!showMobileSidebar\">\r\n              <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n            </div>\r\n          </div>\r\n          <div class=\"sidebar-static-menu-header-far-container\">\r\n            <lib-shell-sidebar-header \r\n            [show-userName]=\"config?.showUserNameOnHeader\"\r\n            [show-alerts]=\"config?.showAlertsOnHeader\" \r\n            [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\r\n          </div>\r\n        </div>\r\n      </div>\r\n  \r\n      <div flex-1>\r\n        <main class=\"shell-content-container-fluid\">\r\n            <div class=\"shell-content-container-inner\">\r\n              <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\r\n              <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n            </div>\r\n          </main>\r\n      </div>\r\n    </div>\r\n  </div>" }]
+            args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\r\n  <div class=\"sidebar-off-canvas-menu-container\"\r\n       role=\"dialog\"\r\n       aria-modal=\"true\">\r\n    <div class=\"sidebar-off-canvas-menu-backdrop\"\r\n         [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\r\n    </div>\r\n    <div class=\"sidebar-off-canvas-menu-container-inner\"\r\n         [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\"\r\n         [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\r\n      <div class=\"sidebar-off-canvas-layout-container\">\r\n        <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n          <button type=\"button\"\r\n                  class=\"sidebar-off-canvas-toggle-button\"\r\n                  (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n            <span class=\"sr-only\">Close sidebar</span>\r\n            <!-- Heroicon name: outline/x -->\r\n            <svg class=\"h-6 w-6 text-white\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke-width=\"2\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>          \r\n        </div>\r\n        <div class=\"sidebar-off-canvas-app-logo-container\">\r\n          <img class=\"h-8 w-auto\"\r\n               [src]=\"config?.appLogo\"\r\n               [alt]=\"config?.appLogoAlt\">\r\n        </div>\r\n        <lib-shell-sidebar></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"sidebar-dummy-element\"\r\n           aria-hidden=\"true\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-outer-container\">\r\n    <div class=\"sidebar-static-menu-container\"\r\n         [class.sidebar-static-menu-container-active]=\"showMobileSidebar\"\r\n         [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\r\n      <div class=\"sidebar-static-menu-container-inner\">\r\n        <div class=\"sidebar-static-menu-app-logo-container\">\r\n          <img *ngIf=\"showMobileSidebar\" class=\"h-8 w-auto\"\r\n               [src]=\"config?.appLogo\"\r\n               [alt]=\"config?.appLogoAlt\">\r\n          <button \r\n              *ngIf=\"!showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button\"\r\n              (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n              <span class=\"sr-only\">Toggle sidebar</span>\r\n              <svg class=\"h-6 w-6\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                  fill=\"none\"\r\n                  viewBox=\"0 0 24 24\"\r\n                  stroke-width=\"2\"\r\n                  stroke=\"currentColor\"\r\n                  aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                      d=\"M4 6h16M4 12h16M4 18h7\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          <lib-shell-sidebar [sticky]=\"!showMobileSidebar\"></lib-shell-sidebar>\r\n        </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-wrapper\"\r\n       [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\r\n    <div class=\"sidebar-static-menu-sticky-header-container\"\r\n         *ngIf=\"config?.showHeader\">\r\n      <button *ngIf=\"!showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button sm:hidden\"\r\n              (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\r\n        <svg class=\"h-6 w-6\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke-width=\"2\"\r\n             stroke=\"currentColor\"\r\n             aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n      <button *ngIf=\"showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button\"\r\n              (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\r\n        <svg class=\"h-6 w-6\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke-width=\"2\"\r\n             stroke=\"currentColor\"\r\n             aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n      <div class=\"sidebar-static-menu-header-container\">\r\n        <div class=\"sidebar-static-menu-header-near-container\">\r\n          <div class=\"sidebar-static-menu-header-app-logo-container\"\r\n               *ngIf=\"!showMobileSidebar\">\r\n            <img class=\"h-8 w-auto\"\r\n                 [src]=\"config?.appLogo\"\r\n                 [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sidebar-static-menu-header-far-container\">\r\n          <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\r\n                                    [show-alerts]=\"config?.showAlertsOnHeader\"\r\n                                    [show-langs]=\"config?.showLangsOnHeader\">\r\n          </lib-shell-sidebar-header>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div flex-1>\r\n      <main class=\"shell-content-container-fluid\">\r\n        <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\r\n        <div class=\"shell-content-container-inner\">\r\n          <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n        </div>\r\n      </main>\r\n    </div>\r\n  </div>\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }] } });
@@ -2753,14 +3073,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
 
 class ShellStackedLayoutComponent {
     constructor() { }
-    ngOnInit() {
-    }
+    ngOnInit() { }
 }
 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\">\r\n    <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customHeaderComponent\">\r\n        <div appDynamicComponentHost =\"Header\"></div>\r\n        </ng-container>\r\n        <lib-shell-header *ngIf=\"!config?.customHeaderComponent\" [show-userName]=\"config?.showUserNameOnHeader\"\r\n        [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\r\n        </lib-shell-header>\r\n    </div>\r\n</div>\r\n\r\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n        <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\r\n    </div>\r\n</main>\r\n\r\n<div class=\"shell-footer-container\" *ngIf=\"config?.showFooter\">\r\n    <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customFooterComponent\">\r\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n        </ng-container>\r\n        <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { kind: "component", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "show-langs", "border"] }, { kind: "component", type: ShellFooterComponent, selector: "lib-shell-footer" }] });
+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\"\r\n     *ngIf=\"config?.showHeader\">\r\n    <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customHeaderComponent\">\r\n            <div appDynamicComponentHost=\"Header\"></div>\r\n        </ng-container>\r\n        <lib-shell-header *ngIf=\"!config?.customHeaderComponent\"\r\n                          [show-userName]=\"config?.showUserNameOnHeader\"\r\n                          [show-alerts]=\"config?.showAlertsOnHeader\"\r\n                          [show-langs]=\"config?.showLangsOnHeader\">\r\n        </lib-shell-header>\r\n    </div>\r\n</div>\r\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n        <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\r\n    </div>\r\n</main>\r\n<div class=\"shell-footer-container\"\r\n     *ngIf=\"config?.showFooter\">\r\n    <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customFooterComponent\">\r\n            <div appDynamicComponentHost\r\n                 hostName=\"Footer\"></div>\r\n        </ng-container>\r\n        <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { kind: "component", type: ShellFooterComponent, selector: "lib-shell-footer" }, { kind: "component", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "show-langs", "border"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-stacked-layout', template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\r\n    <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customHeaderComponent\">\r\n        <div appDynamicComponentHost =\"Header\"></div>\r\n        </ng-container>\r\n        <lib-shell-header *ngIf=\"!config?.customHeaderComponent\" [show-userName]=\"config?.showUserNameOnHeader\"\r\n        [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\r\n        </lib-shell-header>\r\n    </div>\r\n</div>\r\n\r\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n        <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\r\n    </div>\r\n</main>\r\n\r\n<div class=\"shell-footer-container\" *ngIf=\"config?.showFooter\">\r\n    <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customFooterComponent\">\r\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n        </ng-container>\r\n        <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'lib-shell-stacked-layout', template: "<div class=\"shell-header-container\"\r\n     *ngIf=\"config?.showHeader\">\r\n    <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customHeaderComponent\">\r\n            <div appDynamicComponentHost=\"Header\"></div>\r\n        </ng-container>\r\n        <lib-shell-header *ngIf=\"!config?.customHeaderComponent\"\r\n                          [show-userName]=\"config?.showUserNameOnHeader\"\r\n                          [show-alerts]=\"config?.showAlertsOnHeader\"\r\n                          [show-langs]=\"config?.showLangsOnHeader\">\r\n        </lib-shell-header>\r\n    </div>\r\n</div>\r\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n        <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\r\n    </div>\r\n</main>\r\n<div class=\"shell-footer-container\"\r\n     *ngIf=\"config?.showFooter\">\r\n    <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n        <ng-container *ngIf=\"config?.customFooterComponent\">\r\n            <div appDynamicComponentHost\r\n                 hostName=\"Footer\"></div>\r\n        </ng-container>\r\n        <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }] } });
@@ -2837,10 +3156,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 [class.none]=\"!loaded\" [class.block]=\"loaded\">\r\n\r\n  <!-- STACKED LAYOUT -->\r\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n  </div>\r\n\r\n  <!-- SIDEBAR LAYOUT -->\r\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\r\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>", 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"] }] });
+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.hidden]=\"!loaded\" [class.block]=\"loaded\">\r\n  <!-- STACKED LAYOUT -->\r\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\"\r\n       class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n  </div>\r\n  <!-- SIDEBAR LAYOUT -->\r\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\"\r\n       class=\"sidebar shell-container active-side-pane\">\r\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\r\n  </div>\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\"\r\n                   (activate)=\"rightPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"rightPane.onSidePaneDeactivated($event)\">\r\n    </router-outlet>\r\n  </lib-side-pane>\r\n  <lib-toaster-container></lib-toaster-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config"] }, { kind: "component", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-layout', template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\r\n\r\n  <!-- STACKED LAYOUT -->\r\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n  </div>\r\n\r\n  <!-- SIDEBAR LAYOUT -->\r\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\r\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>" }]
+            args: [{ selector: 'lib-shell-layout', template: "<div [class.hidden]=\"!loaded\" [class.block]=\"loaded\">\r\n  <!-- STACKED LAYOUT -->\r\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\"\r\n       class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n  </div>\r\n  <!-- SIDEBAR LAYOUT -->\r\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\"\r\n       class=\"sidebar shell-container active-side-pane\">\r\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\r\n  </div>\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\"\r\n                   (activate)=\"rightPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"rightPane.onSidePaneDeactivated($event)\">\r\n    </router-outlet>\r\n  </lib-side-pane>\r\n  <lib-toaster-container></lib-toaster-container>\r\n</div>" }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -2921,10 +3240,10 @@ class ViewLayoutComponent {
     }
 }
 ViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ViewLayoutComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-ViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: { header: ["show-header", "header"], fluid: "fluid", title: "title", icon: "icon", actions: "actions", busy: "busy", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], view: "view", metaItems: ["meta-items", "metaItems"] }, outputs: { onAction: "onAction", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\r\n\r\n  <div class=\"view-layout-title-container\">\r\n\r\n    <div class=\"view-layout-title-container-inner\">\r\n      <div class=\"flex items-center\">\r\n        <i *ngIf=\"icon\" [class]=\"icon + ' title-icon'\" aria-hidden=\"true\"></i>\r\n        <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title}}</h1>\r\n      </div>\r\n      <div *ngIf=\"metaItems && metaItems.length > 0\" class=\"meta-container\">\r\n        <ng-container *ngFor=\"let meta of metaItems\">\r\n          <div class=\"meta-item-container\">\r\n            <i *ngIf=\"meta.icon\" [class]=\"meta.icon + ' meta-icon'\" aria-hidden=\"true\"></i>\r\n            <span class=\"meta-text\">{{meta.text}}</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"flex items-center justify-end\">\r\n      <ng-container *ngFor=\"let action of actions\"  [ngSwitch]=\"action.type\">\r\n\r\n        <ng-container *ngSwitchCase=\"'switch-view'\">\r\n          <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"ml-1 disabled:opacity-50 btn-view-header\" (click)=\"switchViewActionClick(action)\">\r\n            <span class=\"inline-block relative\">\r\n              <i [class]=\"action.icon\"></i>\r\n              <span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\r\n            </span>\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container\">\r\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\r\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\r\n              </svg>-->\r\n            </div>\r\n            <input id=\"search\" #search class=\"search-input\" [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\" name=\"search\" (input)=\"searchActionType(search.value)\" (onsearch)=\"handleClear($event)\">\r\n          </div>\r\n          <button type=\"button\"  href=\"#\" class=\"btn-view-header rounded-l-none\" [title]=\"action.tooltip\" (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"  href=\"#\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n\r\n\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"  class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</header>\r\n\r\n<!-- component -->\r\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", 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.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+ViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: { header: ["show-header", "header"], fluid: "fluid", title: "title", icon: "icon", actions: "actions", busy: "busy", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], view: "view", metaItems: ["meta-items", "metaItems"] }, outputs: { onAction: "onAction", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<header *ngIf=\"header\"\r\n        class=\"view-layout-paddings\">\r\n  <div class=\"view-layout-title-container\">\r\n    <div class=\"view-layout-title-container-inner\">\r\n      <div class=\"flex items-center\">\r\n        <i *ngIf=\"icon\"\r\n           [class]=\"icon + ' title-icon'\"\r\n           aria-hidden=\"true\"></i>\r\n        <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title}}</h1>\r\n      </div>\r\n      <div *ngIf=\"metaItems && metaItems.length > 0\"\r\n           class=\"meta-container\">\r\n        <ng-container *ngFor=\"let meta of metaItems\">\r\n          <div class=\"meta-item-container\">\r\n            <i *ngIf=\"meta.icon\"\r\n               [class]=\"meta.icon + ' meta-icon'\"\r\n               aria-hidden=\"true\">\r\n            </i>\r\n            <span class=\"meta-text\">{{meta.text}}</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"flex items-center justify-end\">\r\n      <ng-container *ngFor=\"let action of actions\"\r\n                    [ngSwitch]=\"action.type\">\r\n        <ng-container *ngSwitchCase=\"'switch-view'\">\r\n          <button [disabled]=\"view === action.param\"\r\n                  type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"ml-1 disabled:opacity-50 btn-view-header\"\r\n                  (click)=\"switchViewActionClick(action)\">\r\n            <span class=\"inline-block relative\">\r\n              <i [class]=\"action.icon\"></i>\r\n              <span *ngIf=\"view === action.param\"\r\n                    class=\"selected-view-indicator\">\r\n              </span>\r\n            </span>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\"\r\n                 class=\"sr-only\">\r\n            Search\r\n          </label>\r\n          <div class=\"search-container\">\r\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\"></div>\r\n            <input id=\"search\"\r\n                   #search\r\n                   class=\"search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\"\r\n                   (onsearch)=\"handleClear($event)\">\r\n          </div>\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"btn-view-header rounded-l-none\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"ml-1 btn-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"\r\n                  class=\"ml-1 btn-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</header>\r\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\r\n  <ng-content></ng-content>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ViewLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-view-layout', template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\r\n\r\n  <div class=\"view-layout-title-container\">\r\n\r\n    <div class=\"view-layout-title-container-inner\">\r\n      <div class=\"flex items-center\">\r\n        <i *ngIf=\"icon\" [class]=\"icon + ' title-icon'\" aria-hidden=\"true\"></i>\r\n        <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title}}</h1>\r\n      </div>\r\n      <div *ngIf=\"metaItems && metaItems.length > 0\" class=\"meta-container\">\r\n        <ng-container *ngFor=\"let meta of metaItems\">\r\n          <div class=\"meta-item-container\">\r\n            <i *ngIf=\"meta.icon\" [class]=\"meta.icon + ' meta-icon'\" aria-hidden=\"true\"></i>\r\n            <span class=\"meta-text\">{{meta.text}}</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"flex items-center justify-end\">\r\n      <ng-container *ngFor=\"let action of actions\"  [ngSwitch]=\"action.type\">\r\n\r\n        <ng-container *ngSwitchCase=\"'switch-view'\">\r\n          <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"ml-1 disabled:opacity-50 btn-view-header\" (click)=\"switchViewActionClick(action)\">\r\n            <span class=\"inline-block relative\">\r\n              <i [class]=\"action.icon\"></i>\r\n              <span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\r\n            </span>\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container\">\r\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\r\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\r\n              </svg>-->\r\n            </div>\r\n            <input id=\"search\" #search class=\"search-input\" [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\" name=\"search\" (input)=\"searchActionType(search.value)\" (onsearch)=\"handleClear($event)\">\r\n          </div>\r\n          <button type=\"button\"  href=\"#\" class=\"btn-view-header rounded-l-none\" [title]=\"action.tooltip\" (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"  href=\"#\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n\r\n\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"  class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</header>\r\n\r\n<!-- component -->\r\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-view-layout', template: "<header *ngIf=\"header\"\r\n        class=\"view-layout-paddings\">\r\n  <div class=\"view-layout-title-container\">\r\n    <div class=\"view-layout-title-container-inner\">\r\n      <div class=\"flex items-center\">\r\n        <i *ngIf=\"icon\"\r\n           [class]=\"icon + ' title-icon'\"\r\n           aria-hidden=\"true\"></i>\r\n        <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title}}</h1>\r\n      </div>\r\n      <div *ngIf=\"metaItems && metaItems.length > 0\"\r\n           class=\"meta-container\">\r\n        <ng-container *ngFor=\"let meta of metaItems\">\r\n          <div class=\"meta-item-container\">\r\n            <i *ngIf=\"meta.icon\"\r\n               [class]=\"meta.icon + ' meta-icon'\"\r\n               aria-hidden=\"true\">\r\n            </i>\r\n            <span class=\"meta-text\">{{meta.text}}</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"flex items-center justify-end\">\r\n      <ng-container *ngFor=\"let action of actions\"\r\n                    [ngSwitch]=\"action.type\">\r\n        <ng-container *ngSwitchCase=\"'switch-view'\">\r\n          <button [disabled]=\"view === action.param\"\r\n                  type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"ml-1 disabled:opacity-50 btn-view-header\"\r\n                  (click)=\"switchViewActionClick(action)\">\r\n            <span class=\"inline-block relative\">\r\n              <i [class]=\"action.icon\"></i>\r\n              <span *ngIf=\"view === action.param\"\r\n                    class=\"selected-view-indicator\">\r\n              </span>\r\n            </span>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\"\r\n                 class=\"sr-only\">\r\n            Search\r\n          </label>\r\n          <div class=\"search-container\">\r\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\"></div>\r\n            <input id=\"search\"\r\n                   #search\r\n                   class=\"search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\"\r\n                   (onsearch)=\"handleClear($event)\">\r\n          </div>\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"btn-view-header rounded-l-none\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"ml-1 btn-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"\r\n                  class=\"ml-1 btn-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</header>\r\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\r\n  <ng-content></ng-content>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }]; }, propDecorators: { searchInput$: [{
                 type: ViewChild,
                 args: ['search']
@@ -4032,81 +4351,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
     } });
 
 class IndiceComponentsModule {
-    // tslint:disable-next-line:typedef
     static forRoot() {
         return {
             ngModule: IndiceComponentsModule,
-            providers: [ToasterService]
+            providers: [
+                BreadcrumbService,
+                ToasterService
+            ]
         };
     }
 }
 IndiceComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IndiceComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: IndiceComponentsModule, declarations: [
-        // Directives
+IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: IndiceComponentsModule, declarations: [AddressPipe,
+        AdvancedSearchComponent,
+        AuthCallbackComponent,
+        AuthRenewComponent,
+        AvatarInitialsComponent,
+        BreadcrumbComponent,
         ClickOutsideDirective,
-        DynamicComponentHostDirective,
-        // Controls
+        CollapsiblePanelComponent,
+        ComboboxComponent,
+        DatepickerComponent,
         DropDownMenuComponent,
-        PagerComponent,
-        ListViewComponent,
+        DurationFormatPipe,
+        DynamicComponentHostDirective,
+        ErrorComponent,
+        FormLayoutComponent,
+        KpiTileComponent,
+        LanguageSelectionComponent,
+        LibStepComponent,
+        LibStepInfoDirective,
+        LibStepLabelDirective,
+        LibStepperComponent,
+        LibTabComponent,
+        LibTabGroupComponent,
+        LibTabLabelDirective,
         ListColumnComponent,
-        ListTileComponent,
         ListDetailsSectionComponent,
+        ListTileComponent,
+        ListViewComponent,
         ListViewEmptyStateComponent,
-        SkeletonLoaderComponent,
-        CollapsiblePanelComponent,
-        KpiTileComponent,
-        SidePaneComponent,
-        DatepickerComponent,
-        AvatarInitialsComponent,
-        ToggleComponent,
-        ComboboxComponent,
-        // Toaster
-        ToasterContainerComponent,
-        ToasterComponent,
-        // Shell Layout
-        ShellLayoutComponent,
-        ShellHeaderComponent,
-        ShellFooterComponent,
-        // View Layouts
-        ViewLayoutComponent,
-        SideViewLayoutComponent,
-        ModelViewLayoutComponent,
-        FormLayoutComponent,
-        // Pages (common)
-        AuthCallbackComponent,
-        AuthRenewComponent,
         LoggedOutComponent,
-        ErrorComponent,
-        PageNotFoundComponent,
-        UnauthorizedComponent,
-        // Pipes
-        AddressPipe,
-        DurationFormatPipe,
+        ModelViewLayoutComponent,
         NavLinksListComponent,
         NotificationsIndicatorComponent,
-        LanguageSelectionComponent,
-        UserProfileMenuComponent,
+        PageNotFoundComponent,
+        PagerComponent,
+        ShellFooterComponent,
+        ShellHeaderComponent,
+        ShellLayoutComponent,
         ShellSidebarComponent,
-        // Tab Group Component
-        LibTabComponent,
-        LibTabGroupComponent,
-        // Stepper Component
-        LibStepperComponent,
-        LibStepComponent,
-        LibStepLabelDirective,
-        LibStepInfoDirective,
         ShellSidebarHeaderComponent,
         ShellSidebarLayoutComponent,
         ShellStackedLayoutComponent,
-        AdvancedSearchComponent
-    ], imports: [CommonModule,
+        SidePaneComponent,
+        SideViewLayoutComponent,
+        SkeletonLoaderComponent,
+        ToasterComponent,
+        ToasterContainerComponent,
+        ToggleComponent,
+        UnauthorizedComponent,
+        UserProfileMenuComponent,
+        ViewLayoutComponent], imports: [CommonModule,
         RouterModule,
         IndiceAuthModule,
         FormsModule], exports: [AddressPipe,
         AuthCallbackComponent,
         AuthRenewComponent,
         AvatarInitialsComponent,
+        BreadcrumbComponent,
         ClickOutsideDirective,
         CollapsiblePanelComponent,
         ComboboxComponent,
@@ -4122,6 +4435,7 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         LibStepperComponent,
         LibTabComponent,
         LibTabGroupComponent,
+        LibTabLabelDirective,
         ListColumnComponent,
         ListDetailsSectionComponent,
         ListTileComponent,
@@ -4150,64 +4464,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
             type: NgModule,
             args: [{
                     declarations: [
-                        // Directives
+                        AddressPipe,
+                        AdvancedSearchComponent,
+                        AuthCallbackComponent,
+                        AuthRenewComponent,
+                        AvatarInitialsComponent,
+                        BreadcrumbComponent,
                         ClickOutsideDirective,
-                        DynamicComponentHostDirective,
-                        // Controls
+                        CollapsiblePanelComponent,
+                        ComboboxComponent,
+                        DatepickerComponent,
                         DropDownMenuComponent,
-                        PagerComponent,
-                        ListViewComponent,
+                        DurationFormatPipe,
+                        DynamicComponentHostDirective,
+                        ErrorComponent,
+                        FormLayoutComponent,
+                        KpiTileComponent,
+                        LanguageSelectionComponent,
+                        LibStepComponent,
+                        LibStepInfoDirective,
+                        LibStepLabelDirective,
+                        LibStepperComponent,
+                        LibTabComponent,
+                        LibTabGroupComponent,
+                        LibTabLabelDirective,
                         ListColumnComponent,
-                        ListTileComponent,
                         ListDetailsSectionComponent,
+                        ListTileComponent,
+                        ListViewComponent,
                         ListViewEmptyStateComponent,
-                        SkeletonLoaderComponent,
-                        CollapsiblePanelComponent,
-                        KpiTileComponent,
-                        SidePaneComponent,
-                        DatepickerComponent,
-                        AvatarInitialsComponent,
-                        ToggleComponent,
-                        ComboboxComponent,
-                        // Toaster
-                        ToasterContainerComponent,
-                        ToasterComponent,
-                        // Shell Layout
-                        ShellLayoutComponent,
-                        ShellHeaderComponent,
-                        ShellFooterComponent,
-                        // View Layouts
-                        ViewLayoutComponent,
-                        SideViewLayoutComponent,
-                        ModelViewLayoutComponent,
-                        FormLayoutComponent,
-                        // Pages (common)
-                        AuthCallbackComponent,
-                        AuthRenewComponent,
                         LoggedOutComponent,
-                        ErrorComponent,
-                        PageNotFoundComponent,
-                        UnauthorizedComponent,
-                        // Pipes
-                        AddressPipe,
-                        DurationFormatPipe,
+                        ModelViewLayoutComponent,
                         NavLinksListComponent,
                         NotificationsIndicatorComponent,
-                        LanguageSelectionComponent,
-                        UserProfileMenuComponent,
+                        PageNotFoundComponent,
+                        PagerComponent,
+                        ShellFooterComponent,
+                        ShellHeaderComponent,
+                        ShellLayoutComponent,
                         ShellSidebarComponent,
-                        // Tab Group Component
-                        LibTabComponent,
-                        LibTabGroupComponent,
-                        // Stepper Component
-                        LibStepperComponent,
-                        LibStepComponent,
-                        LibStepLabelDirective,
-                        LibStepInfoDirective,
                         ShellSidebarHeaderComponent,
                         ShellSidebarLayoutComponent,
                         ShellStackedLayoutComponent,
-                        AdvancedSearchComponent
+                        SidePaneComponent,
+                        SideViewLayoutComponent,
+                        SkeletonLoaderComponent,
+                        ToasterComponent,
+                        ToasterContainerComponent,
+                        ToggleComponent,
+                        UnauthorizedComponent,
+                        UserProfileMenuComponent,
+                        ViewLayoutComponent
                     ],
                     imports: [
                         CommonModule,
@@ -4220,6 +4527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                         AuthCallbackComponent,
                         AuthRenewComponent,
                         AvatarInitialsComponent,
+                        BreadcrumbComponent,
                         ClickOutsideDirective,
                         CollapsiblePanelComponent,
                         ComboboxComponent,
@@ -4235,6 +4543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                         LibStepperComponent,
                         LibTabComponent,
                         LibTabGroupComponent,
+                        LibTabLabelDirective,
                         ListColumnComponent,
                         ListDetailsSectionComponent,
                         ListTileComponent,
@@ -4265,5 +4574,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, ShellSidebarComponent, ShellSidebarHeaderComponent, 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, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, 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, LibTabLabelDirective, 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