npm - @indice/ng-components - Versions diffs - 0.3.12-beta.0 → 0.4.0-beta.0 - Mend

@indice/ng-components 0.3.12-beta.0 → 0.4.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (167) hide show

package/fesm2022/indice-ng-components.mjs CHANGED Viewed

@@ -1,10 +1,10 @@
 import * as i0 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, NO_ERRORS_SCHEMA } from '@angular/core';
+import { EventEmitter, PLATFORM_ID, Output, Input, Inject, Directive, Component, InjectionToken, Injectable, Optional, TemplateRef, ContentChild, LOCALE_ID, forwardRef, ViewChild, ContentChildren, DOCUMENT, ChangeDetectionStrategy, ViewEncapsulation, Injector, ElementRef, ViewChildren, Pipe, HostListener, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
-import { isPlatformBrowser, formatDate, getLocaleMonthNames, FormStyle, TranslationWidth, getLocaleDayNames, DOCUMENT, CommonModule } from '@angular/common';
+import { isPlatformBrowser, formatDate, getLocaleMonthNames, FormStyle, TranslationWidth, getLocaleDayNames, CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, Router, ActivatedRoute, NavigationStart, ActivationStart, RouterModule } from '@angular/router';
-import { Subject, BehaviorSubject, of, fromEvent } from 'rxjs';
+import { Subject, BehaviorSubject, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, 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';
@@ -171,12 +171,15 @@ class ClickOutsideDirective {
             window.removeEventListener('blur', this._onWindowBlur);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: { clickOutsideEnabled: "clickOutsideEnabled", attachOutsideOnClick: "attachOutsideOnClick", delayClickOutsideInit: "delayClickOutsideInit", emitOnBlur: "emitOnBlur", exclude: "exclude", excludeBeforeClick: "excludeBeforeClick", clickOutsideEvents: "clickOutsideEvents" }, outputs: { clickOutside: "clickOutside" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: ClickOutsideDirective, isStandalone: false, selector: "[clickOutside]", inputs: { clickOutsideEnabled: "clickOutsideEnabled", attachOutsideOnClick: "attachOutsideOnClick", delayClickOutsideInit: "delayClickOutsideInit", emitOnBlur: "emitOnBlur", exclude: "exclude", excludeBeforeClick: "excludeBeforeClick", clickOutsideEvents: "clickOutsideEvents" }, outputs: { clickOutside: "clickOutside" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[clickOutside]' }]
+            args: [{
+                    selector: '[clickOutside]',
+                    standalone: false
+                }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -242,12 +245,12 @@ class DropDownMenuComponent {
         this.selectedChange.emit(option.value);
         this.selectedChanged.emit(option.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DropDownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: { options: "options", selectedValue: ["selected", "selectedValue"], multiple: "multiple", placeholder: "placeholder", showIcons: ["show-icons", "showIcons"] }, outputs: { selectedChange: "selectedChange", selectedChanged: "selectedChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button type=\"button\" (click)=\"expanded = !expanded\" class=\"dropdown-button\" aria-haspopup=\"listbox\" aria-expanded=\"true\" aria-labelledby=\"listbox-label\">\r\n    <span class=\"dropdown-selected-text\">\r\n      <i *ngIf=\"selectedOption?.icon && showIcons\" [class]=\"selectedOption?.icon\" \r\n          [class.mr-2]=\"selectedOption?.icon\"></i>{{ selectedOption?.text || placeholder }}\r\n    </span>\r\n    <span class=\"dropdown-button-icon\">\r\n      <!-- Heroicon name: solid/selector -->\r\n      <svg class=\"dropdown-arrow\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n        <path fill-rule=\"evenodd\"\r\n          d=\"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z\"\r\n          clip-rule=\"evenodd\"/>\r\n      </svg>\r\n    </span>\r\n  </button>\r\n  <ul title=\"menu\" *ngIf=\"expanded && options && options.length > 0\" class=\"dropdown-ul\" tabindex=\"-1\" role=\"listbox\" aria-labelledby=\"listbox-label\">\r\n    <ng-container *ngFor=\"let option of options\">\r\n      <li [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\" (click)=\"selectOption(option)\" id=\"listbox-option-0\" role=\"option\">\r\n        <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\r\n          <i *ngIf=\"option.icon && showIcons\" [class]=\"option.icon\" [class.mr-2]=\"option.icon\"></i>{{ option.text }}\r\n        </span>\r\n        <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\r\n          <!-- Heroicon name: solid/check -->\r\n          <svg class=\"dropdown-li-selected-indicator\" 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      </li>\r\n    </ng-container>\r\n  </ul>\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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DropDownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DropDownMenuComponent, isStandalone: false, selector: "lib-drop-down-menu", inputs: { options: "options", selectedValue: ["selected", "selectedValue"], multiple: "multiple", placeholder: "placeholder", showIcons: ["show-icons", "showIcons"] }, outputs: { selectedChange: "selectedChange", selectedChanged: "selectedChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button type=\"button\" (click)=\"expanded = !expanded\" class=\"dropdown-button\" aria-haspopup=\"listbox\" aria-expanded=\"true\" aria-labelledby=\"listbox-label\">\r\n    <span class=\"dropdown-selected-text\">\r\n      <i *ngIf=\"selectedOption?.icon && showIcons\" [class]=\"selectedOption?.icon\" \r\n          [class.mr-2]=\"selectedOption?.icon\"></i>{{ selectedOption?.text || placeholder }}\r\n    </span>\r\n    <span class=\"dropdown-button-icon\">\r\n      <!-- Heroicon name: solid/selector -->\r\n      <svg class=\"dropdown-arrow\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n        <path fill-rule=\"evenodd\"\r\n          d=\"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z\"\r\n          clip-rule=\"evenodd\"/>\r\n      </svg>\r\n    </span>\r\n  </button>\r\n  <ul title=\"menu\" *ngIf=\"expanded && options && options.length > 0\" class=\"dropdown-ul\" tabindex=\"-1\" role=\"listbox\" aria-labelledby=\"listbox-label\">\r\n    <ng-container *ngFor=\"let option of options\">\r\n      <li [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\" (click)=\"selectOption(option)\" id=\"listbox-option-0\" role=\"option\">\r\n        <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\r\n          <i *ngIf=\"option.icon && showIcons\" [class]=\"option.icon\" [class.mr-2]=\"option.icon\"></i>{{ option.text }}\r\n        </span>\r\n        <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\r\n          <!-- Heroicon name: solid/check -->\r\n          <svg class=\"dropdown-li-selected-indicator\" 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      </li>\r\n    </ng-container>\r\n  </ul>\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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DropDownMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DropDownMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-drop-down-menu', template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button type=\"button\" (click)=\"expanded = !expanded\" class=\"dropdown-button\" aria-haspopup=\"listbox\" aria-expanded=\"true\" aria-labelledby=\"listbox-label\">\r\n    <span class=\"dropdown-selected-text\">\r\n      <i *ngIf=\"selectedOption?.icon && showIcons\" [class]=\"selectedOption?.icon\" \r\n          [class.mr-2]=\"selectedOption?.icon\"></i>{{ selectedOption?.text || placeholder }}\r\n    </span>\r\n    <span class=\"dropdown-button-icon\">\r\n      <!-- Heroicon name: solid/selector -->\r\n      <svg class=\"dropdown-arrow\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n        <path fill-rule=\"evenodd\"\r\n          d=\"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z\"\r\n          clip-rule=\"evenodd\"/>\r\n      </svg>\r\n    </span>\r\n  </button>\r\n  <ul title=\"menu\" *ngIf=\"expanded && options && options.length > 0\" class=\"dropdown-ul\" tabindex=\"-1\" role=\"listbox\" aria-labelledby=\"listbox-label\">\r\n    <ng-container *ngFor=\"let option of options\">\r\n      <li [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\" (click)=\"selectOption(option)\" id=\"listbox-option-0\" role=\"option\">\r\n        <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\r\n          <i *ngIf=\"option.icon && showIcons\" [class]=\"option.icon\" [class.mr-2]=\"option.icon\"></i>{{ option.text }}\r\n        </span>\r\n        <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\r\n          <!-- Heroicon name: solid/check -->\r\n          <svg class=\"dropdown-li-selected-indicator\" 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      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-drop-down-menu', standalone: false, template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button type=\"button\" (click)=\"expanded = !expanded\" class=\"dropdown-button\" aria-haspopup=\"listbox\" aria-expanded=\"true\" aria-labelledby=\"listbox-label\">\r\n    <span class=\"dropdown-selected-text\">\r\n      <i *ngIf=\"selectedOption?.icon && showIcons\" [class]=\"selectedOption?.icon\" \r\n          [class.mr-2]=\"selectedOption?.icon\"></i>{{ selectedOption?.text || placeholder }}\r\n    </span>\r\n    <span class=\"dropdown-button-icon\">\r\n      <!-- Heroicon name: solid/selector -->\r\n      <svg class=\"dropdown-arrow\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n        <path fill-rule=\"evenodd\"\r\n          d=\"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z\"\r\n          clip-rule=\"evenodd\"/>\r\n      </svg>\r\n    </span>\r\n  </button>\r\n  <ul title=\"menu\" *ngIf=\"expanded && options && options.length > 0\" class=\"dropdown-ul\" tabindex=\"-1\" role=\"listbox\" aria-labelledby=\"listbox-label\">\r\n    <ng-container *ngFor=\"let option of options\">\r\n      <li [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\" (click)=\"selectOption(option)\" id=\"listbox-option-0\" role=\"option\">\r\n        <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\r\n          <i *ngIf=\"option.icon && showIcons\" [class]=\"option.icon\" [class.mr-2]=\"option.icon\"></i>{{ option.text }}\r\n        </span>\r\n        <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\r\n          <!-- Heroicon name: solid/check -->\r\n          <svg class=\"dropdown-li-selected-indicator\" 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      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { options: [{
                 type: Input
             }], selectedValue: [{
@@ -530,12 +533,12 @@ class PagerComponent {
         }
         this.sortdirChanged.emit(sortdir);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: PagerComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: PagerComponent, selector: "lib-pager", inputs: { busy: "busy", count: "count", page: "page", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sort: "sort", sortdir: ["sort-dir", "sortdir"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pager-container\">\r\n  <div class=\"pager-container-near\">\r\n      <ng-content select=\"[pager-near-content]\"></ng-content>\r\n  </div>\r\n  <div class=\"pager-container-far\">\r\n    <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\r\n      <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\r\n      <button (click)=\"toggleSortdir()\" [disabled]=\"!sort || busy\" class=\"pager-icon-button\">\r\n        <span class=\"sr-only\">sort direction</span>\r\n        <span class=\"inline-block relative\">\r\n          <i [class]=\"sortdirIcon\"></i>\r\n        </span>\r\n      </button>\r\n    </div>\r\n    <div class=\"pager-pages-container\">\r\n      <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\r\n      <div class=\"mx-1\">\r\n        <button [disabled]=\"!canPreviousPage || busy\"  (click)=\"previousPage()\"\r\n                class=\"pager-arrow-button-left\">\r\n          <span class=\"sr-only\">Previous</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                [disabled]=\"!canNextPage || busy\"  (click)=\"nextPage()\"\r\n                class=\"pager-arrow-button-right\">\r\n          <span class=\"sr-only\">Next</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <lib-drop-down-menu *ngIf=\"false && (pages && pages.length > 0)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PagerComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: PagerComponent, isStandalone: false, selector: "lib-pager", inputs: { busy: "busy", count: "count", page: "page", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sort: "sort", sortdir: ["sort-dir", "sortdir"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pager-container\">\r\n  <div class=\"pager-container-near\">\r\n      <ng-content select=\"[pager-near-content]\"></ng-content>\r\n  </div>\r\n  <div class=\"pager-container-far\">\r\n    <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\r\n      <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\r\n      <button (click)=\"toggleSortdir()\" [disabled]=\"!sort || busy\" class=\"pager-icon-button\">\r\n        <span class=\"sr-only\">sort direction</span>\r\n        <span class=\"inline-block relative\">\r\n          <i [class]=\"sortdirIcon\"></i>\r\n        </span>\r\n      </button>\r\n    </div>\r\n    <div class=\"pager-pages-container\">\r\n      <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\r\n      <div class=\"mx-1\">\r\n        <button [disabled]=\"!canPreviousPage || busy\"  (click)=\"previousPage()\"\r\n                class=\"pager-arrow-button-left\">\r\n          <span class=\"sr-only\">Previous</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                [disabled]=\"!canNextPage || busy\"  (click)=\"nextPage()\"\r\n                class=\"pager-arrow-button-right\">\r\n          <span class=\"sr-only\">Next</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <lib-drop-down-menu *ngIf=\"false && (pages && pages.length > 0)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: PagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-pager', template: "<div class=\"pager-container\">\r\n  <div class=\"pager-container-near\">\r\n      <ng-content select=\"[pager-near-content]\"></ng-content>\r\n  </div>\r\n  <div class=\"pager-container-far\">\r\n    <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\r\n      <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\r\n      <button (click)=\"toggleSortdir()\" [disabled]=\"!sort || busy\" class=\"pager-icon-button\">\r\n        <span class=\"sr-only\">sort direction</span>\r\n        <span class=\"inline-block relative\">\r\n          <i [class]=\"sortdirIcon\"></i>\r\n        </span>\r\n      </button>\r\n    </div>\r\n    <div class=\"pager-pages-container\">\r\n      <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\r\n      <div class=\"mx-1\">\r\n        <button [disabled]=\"!canPreviousPage || busy\"  (click)=\"previousPage()\"\r\n                class=\"pager-arrow-button-left\">\r\n          <span class=\"sr-only\">Previous</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                [disabled]=\"!canNextPage || busy\"  (click)=\"nextPage()\"\r\n                class=\"pager-arrow-button-right\">\r\n          <span class=\"sr-only\">Next</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <lib-drop-down-menu *ngIf=\"false && (pages && pages.length > 0)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-pager', standalone: false, template: "<div class=\"pager-container\">\r\n  <div class=\"pager-container-near\">\r\n      <ng-content select=\"[pager-near-content]\"></ng-content>\r\n  </div>\r\n  <div class=\"pager-container-far\">\r\n    <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\r\n      <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\r\n      <button (click)=\"toggleSortdir()\" [disabled]=\"!sort || busy\" class=\"pager-icon-button\">\r\n        <span class=\"sr-only\">sort direction</span>\r\n        <span class=\"inline-block relative\">\r\n          <i [class]=\"sortdirIcon\"></i>\r\n        </span>\r\n      </button>\r\n    </div>\r\n    <div class=\"pager-pages-container\">\r\n      <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\r\n      <div class=\"mx-1\">\r\n        <button [disabled]=\"!canPreviousPage || busy\"  (click)=\"previousPage()\"\r\n                class=\"pager-arrow-button-left\">\r\n          <span class=\"sr-only\">Previous</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                [disabled]=\"!canNextPage || busy\"  (click)=\"nextPage()\"\r\n                class=\"pager-arrow-button-right\">\r\n          <span class=\"sr-only\">Next</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <lib-drop-down-menu *ngIf=\"false && (pages && pages.length > 0)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { busy: [{
                 type: Input
             }], count: [{
@@ -623,10 +626,10 @@ class UtilitiesService {
         }
         return url.split(/[?#]/)[0];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: UtilitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: UtilitiesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UtilitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UtilitiesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: UtilitiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UtilitiesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -646,7 +649,7 @@ class BreadcrumbService {
                 .events
                 .pipe(filter(event => event instanceof NavigationEnd), distinctUntilChanged())
                 .subscribe(_ => {
-                const breadcrumb = [...this._buildBreadcrumb()];
+                const breadcrumb = this._buildBreadcrumb();
                 this._breadcrumb$.next(breadcrumb);
             });
         }
@@ -704,7 +707,15 @@ class BreadcrumbService {
         });
     }
     _findRouteFromUrl(url) {
-        const urlSegments = url.split('/').filter((segment) => segment !== '');
+        let urlSegments = url.replace(/\(.+\)/, '') // remove any secondary outlet segments and focus on primary outlet that is the main route
+            .split('/') // split the URL into segments
+            .filter((segment) => segment !== '');
+        const outletRegex = new RegExp("\\(([^()]+)\\)");
+        var outletPart = url.match(outletRegex)?.[1];
+        //if (outletPart) {
+        //urlSegments = outletPart.replace(/.+:/, '').split('/') // split the URL into segments
+        //                        .filter((segment: string) => segment !== '');
+        //}
         const routerConfig = this._router.config;
         const flattenedRouterConfig = this._flattenRoutes(routerConfig);
         const filteredRouterConfig = flattenedRouterConfig.filter((route) => {
@@ -740,8 +751,7 @@ class BreadcrumbService {
         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]);
+                items = this._findParentRoutes(route, [new BreadcrumbItem(this._getRouteTitle(route), routeData._fullPath || route.path), ...items]);
             }
         }
         return [...items];
@@ -776,10 +786,10 @@ class BreadcrumbService {
         }
         return route.data.breadcrumb;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$1.Router }, { token: UtilitiesService }, { token: SHELL_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: BreadcrumbService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$1.Router }, { token: UtilitiesService }, { token: SHELL_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: BreadcrumbService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -810,12 +820,12 @@ class BreadcrumbComponent {
             this.breadcrumb = [...breadcrumb, new BreadcrumbItem('', '')];
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: BreadcrumbComponent, isStandalone: false, 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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", 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>" }]
+            args: [{ selector: 'lib-breadcrumb', standalone: false, 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: () => [{ type: BreadcrumbService }] });
 class ListColumnComponent {
@@ -825,12 +835,15 @@ class ListColumnComponent {
         this.fullWidth = false;
         this.template = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ListColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ListColumnComponent, selector: "lib-list-column", inputs: { title: "title", fullWidth: ["full-width", "fullWidth"] }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ListColumnComponent, isStandalone: false, selector: "lib-list-column", inputs: { title: "title", fullWidth: ["full-width", "fullWidth"] }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ListColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-list-column', template: '<ng-content></ng-content>' }]
+            args: [{
+                    selector: 'lib-list-column', template: '<ng-content></ng-content>',
+                    standalone: false
+                }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], fullWidth: [{
@@ -845,12 +858,15 @@ class ListTileComponent {
     constructor() {
         this.template = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ListTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ListTileComponent, selector: "lib-list-tile", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ListTileComponent, isStandalone: false, selector: "lib-list-tile", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ListTileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-list-tile', template: '<ng-content></ng-content>' }]
+            args: [{
+                    selector: 'lib-list-tile', template: '<ng-content></ng-content>',
+                    standalone: false
+                }]
         }], ctorParameters: () => [], propDecorators: { template: [{
                 type: ContentChild,
                 args: [TemplateRef]
@@ -860,12 +876,15 @@ class ListDetailsSectionComponent {
     constructor() {
         this.template = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ListDetailsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ListDetailsSectionComponent, selector: "lib-list-details-section", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListDetailsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ListDetailsSectionComponent, isStandalone: false, selector: "lib-list-details-section", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ListDetailsSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListDetailsSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-list-details-section', template: '<ng-content></ng-content>' }]
+            args: [{
+                    selector: 'lib-list-details-section', template: '<ng-content></ng-content>',
+                    standalone: false
+                }]
         }], ctorParameters: () => [], propDecorators: { template: [{
                 type: ContentChild,
                 args: [TemplateRef]
@@ -1228,8 +1247,8 @@ class DatepickerComponent {
         }
         return outOfRange;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DatepickerComponent, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: DatepickerComponent, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", inline: "inline", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { valueChange: "valueChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DatepickerComponent, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DatepickerComponent, isStandalone: false, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", inline: "inline", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatepickerComponent),
@@ -1237,7 +1256,7 @@ class DatepickerComponent {
             }
         ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div [class.relative]=\"!inline\">\r\n<div class=\"datepicker-container\" (clickOutside)=\"closeCalendar()\">\r\n  <input *ngIf=\"!inline\"\r\n         #dateInput\r\n         [readonly]=\"readonly\"\r\n         name=\"dateInput\"\r\n         (blur)=\"onBlur($event)\"\r\n         id=\"dateInput\"\r\n         title=\"dateInput\"\r\n         (focus)=\"showCalendar = false\"\r\n         [value]=\"value | date: displayFormat\"\r\n         class=\"datepicker-input\"\r\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n         [placeholder]=\"placeholder\">\r\n\r\n  <button type=\"button\"\r\n          *ngIf=\"!inline\"\r\n          class=\"datepicker-button\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"openCalendar()\"\r\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"showCalendar || inline\"\r\n       [class.absolute]=\"!inline\"\r\n       class=\"datepicker-background\"\r\n       style=\"height:18rem;min-width:16rem;\"\r\n       name=\"calendar\">\r\n    <div class=\"datepicker-btn-wrapper\">\r\n      <div>\r\n        <button type=\"button\"(click)=\"openYears()\">\r\n          <span class=\"datepicker-selected-month\">\r\n            {{monthNames[month]}}\r\n          </span>\r\n          <span class=\"datepicker-selected-year\">\r\n            {{year}}</span>\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\r\n        <button type=\"button\"\r\n                class=\"datepicker-nav-btn\"\r\n                (click)=\"previousMonth();\">\r\n          <svg fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 19l-7-7 7-7\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                class=\"datepicker-nav-btn\"\r\n                (click)=\"nextMonth()\">\r\n          <svg fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M9 5l7 7-7 7\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <ng-template #showYearsPickerTmpl>\r\n        <div>\r\n          <button type=\"button\"\r\n                  class=\"datepicker-nav-btn\"\r\n                  (click)=\"previousYear();\">\r\n            <svg fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M15 19l-7-7 7-7\" />\r\n            </svg>\r\n          </button>\r\n          <button type=\"button\"\r\n                  class=\"datepicker-nav-btn\"\r\n                  (click)=\"nextYear()\">\r\n            <svg fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 5l7 7-7 7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <div class=\"datepicker-wrapper\"\r\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\r\n      <div *ngFor=\"let day of dayNames\"\r\n           class=\"datepicker-day-name\"\r\n           style=\"width: 14.28%\">{{day}}</div>\r\n    </div>\r\n\r\n    <ng-template #showCalYearsTmpl>\r\n      <div class=\"datepicker-content-wrapper\">\r\n        <div *ngFor=\"let year of showCalendarYears\"\r\n             style=\"width: 18.28%\"\r\n             class=\"px-1 mb-1\">\r\n          <div (click)=\"selectYearValue(year)\"\r\n               class=\"datepicker-year\"\r\n               [class]=\"year.selected  ? 'selected' : 'not-selected'\">\r\n            {{year.year}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"datepicker-content-wrapper\" *ngIf=\"!showYears\">\r\n      <div *ngFor=\"let blankday of blankDays\" style=\"width: 14.28%\" class=\"datepicker-blank-days\">{{blankday}}</div>\r\n      <div *ngFor=\"let date of calendarDates;\" style=\"width: 14.28%\" class=\"px-1 mb-1\">\r\n        <div (click)=\"selectDateValue(date)\" class=\"datepicker-days\" [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\r\n          {{date.day}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-date-picker', providers: [
                         {
@@ -1245,7 +1264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                             useExisting: forwardRef(() => DatepickerComponent),
                             multi: true
                         }
-                    ], template: "<div [class.relative]=\"!inline\">\r\n<div class=\"datepicker-container\" (clickOutside)=\"closeCalendar()\">\r\n  <input *ngIf=\"!inline\"\r\n         #dateInput\r\n         [readonly]=\"readonly\"\r\n         name=\"dateInput\"\r\n         (blur)=\"onBlur($event)\"\r\n         id=\"dateInput\"\r\n         title=\"dateInput\"\r\n         (focus)=\"showCalendar = false\"\r\n         [value]=\"value | date: displayFormat\"\r\n         class=\"datepicker-input\"\r\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n         [placeholder]=\"placeholder\">\r\n\r\n  <button type=\"button\"\r\n          *ngIf=\"!inline\"\r\n          class=\"datepicker-button\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"openCalendar()\"\r\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"showCalendar || inline\"\r\n       [class.absolute]=\"!inline\"\r\n       class=\"datepicker-background\"\r\n       style=\"height:18rem;min-width:16rem;\"\r\n       name=\"calendar\">\r\n    <div class=\"datepicker-btn-wrapper\">\r\n      <div>\r\n        <button type=\"button\"(click)=\"openYears()\">\r\n          <span class=\"datepicker-selected-month\">\r\n            {{monthNames[month]}}\r\n          </span>\r\n          <span class=\"datepicker-selected-year\">\r\n            {{year}}</span>\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\r\n        <button type=\"button\"\r\n                class=\"datepicker-nav-btn\"\r\n                (click)=\"previousMonth();\">\r\n          <svg fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 19l-7-7 7-7\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                class=\"datepicker-nav-btn\"\r\n                (click)=\"nextMonth()\">\r\n          <svg fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M9 5l7 7-7 7\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <ng-template #showYearsPickerTmpl>\r\n        <div>\r\n          <button type=\"button\"\r\n                  class=\"datepicker-nav-btn\"\r\n                  (click)=\"previousYear();\">\r\n            <svg fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M15 19l-7-7 7-7\" />\r\n            </svg>\r\n          </button>\r\n          <button type=\"button\"\r\n                  class=\"datepicker-nav-btn\"\r\n                  (click)=\"nextYear()\">\r\n            <svg fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 5l7 7-7 7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <div class=\"datepicker-wrapper\"\r\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\r\n      <div *ngFor=\"let day of dayNames\"\r\n           class=\"datepicker-day-name\"\r\n           style=\"width: 14.28%\">{{day}}</div>\r\n    </div>\r\n\r\n    <ng-template #showCalYearsTmpl>\r\n      <div class=\"datepicker-content-wrapper\">\r\n        <div *ngFor=\"let year of showCalendarYears\"\r\n             style=\"width: 18.28%\"\r\n             class=\"px-1 mb-1\">\r\n          <div (click)=\"selectYearValue(year)\"\r\n               class=\"datepicker-year\"\r\n               [class]=\"year.selected  ? 'selected' : 'not-selected'\">\r\n            {{year.year}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"datepicker-content-wrapper\" *ngIf=\"!showYears\">\r\n      <div *ngFor=\"let blankday of blankDays\" style=\"width: 14.28%\" class=\"datepicker-blank-days\">{{blankday}}</div>\r\n      <div *ngFor=\"let date of calendarDates;\" style=\"width: 14.28%\" class=\"px-1 mb-1\">\r\n        <div (click)=\"selectDateValue(date)\" class=\"datepicker-days\" [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\r\n          {{date.day}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>" }]
+                    ], standalone: false, template: "<div [class.relative]=\"!inline\">\r\n<div class=\"datepicker-container\" (clickOutside)=\"closeCalendar()\">\r\n  <input *ngIf=\"!inline\"\r\n         #dateInput\r\n         [readonly]=\"readonly\"\r\n         name=\"dateInput\"\r\n         (blur)=\"onBlur($event)\"\r\n         id=\"dateInput\"\r\n         title=\"dateInput\"\r\n         (focus)=\"showCalendar = false\"\r\n         [value]=\"value | date: displayFormat\"\r\n         class=\"datepicker-input\"\r\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n         [placeholder]=\"placeholder\">\r\n\r\n  <button type=\"button\"\r\n          *ngIf=\"!inline\"\r\n          class=\"datepicker-button\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"openCalendar()\"\r\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"showCalendar || inline\"\r\n       [class.absolute]=\"!inline\"\r\n       class=\"datepicker-background\"\r\n       style=\"height:18rem;min-width:16rem;\"\r\n       name=\"calendar\">\r\n    <div class=\"datepicker-btn-wrapper\">\r\n      <div>\r\n        <button type=\"button\"(click)=\"openYears()\">\r\n          <span class=\"datepicker-selected-month\">\r\n            {{monthNames[month]}}\r\n          </span>\r\n          <span class=\"datepicker-selected-year\">\r\n            {{year}}</span>\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\r\n        <button type=\"button\"\r\n                class=\"datepicker-nav-btn\"\r\n                (click)=\"previousMonth();\">\r\n          <svg fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 19l-7-7 7-7\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                class=\"datepicker-nav-btn\"\r\n                (click)=\"nextMonth()\">\r\n          <svg fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M9 5l7 7-7 7\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <ng-template #showYearsPickerTmpl>\r\n        <div>\r\n          <button type=\"button\"\r\n                  class=\"datepicker-nav-btn\"\r\n                  (click)=\"previousYear();\">\r\n            <svg fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M15 19l-7-7 7-7\" />\r\n            </svg>\r\n          </button>\r\n          <button type=\"button\"\r\n                  class=\"datepicker-nav-btn\"\r\n                  (click)=\"nextYear()\">\r\n            <svg fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 5l7 7-7 7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <div class=\"datepicker-wrapper\"\r\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\r\n      <div *ngFor=\"let day of dayNames\"\r\n           class=\"datepicker-day-name\"\r\n           style=\"width: 14.28%\">{{day}}</div>\r\n    </div>\r\n\r\n    <ng-template #showCalYearsTmpl>\r\n      <div class=\"datepicker-content-wrapper\">\r\n        <div *ngFor=\"let year of showCalendarYears\"\r\n             style=\"width: 18.28%\"\r\n             class=\"px-1 mb-1\">\r\n          <div (click)=\"selectYearValue(year)\"\r\n               class=\"datepicker-year\"\r\n               [class]=\"year.selected  ? 'selected' : 'not-selected'\">\r\n            {{year.year}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"datepicker-content-wrapper\" *ngIf=\"!showYears\">\r\n      <div *ngFor=\"let blankday of blankDays\" style=\"width: 14.28%\" class=\"datepicker-blank-days\">{{blankday}}</div>\r\n      <div *ngFor=\"let date of calendarDates;\" style=\"width: 14.28%\" class=\"px-1 mb-1\">\r\n        <div (click)=\"selectDateValue(date)\" class=\"datepicker-days\" [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\r\n          {{date.day}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -1409,12 +1428,12 @@ class AdvancedSearchComponent {
         this.filters = [];
         this.advancedSearchChanged.emit(this.filters);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { operatorsDisabled: ["operators-disabled", "operatorsDisabled"], searchOptions: ["search-options", "searchOptions"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, usesOnChanges: true, 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 OPERATOR MENU-->\r\n      <div *ngIf=\"!operatorsDisabled && selectedField\"\r\n           class=\"advanced-search-filter-operator-container\">\r\n          <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\r\n              <label class=\"advanced-search-filter-operator-label\"\r\n                     for=\"selectedOperator\">\r\n                  &nbsp;\r\n              </label>\r\n              <lib-drop-down-menu [options]=\"operatorMenuOptions\"\r\n                                  [selected]=\"selectedOperator\"\r\n                                  (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\r\n          </div>\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': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\r\n                  [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\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  <!-- In order for our changes to be reflected everytime searchOptions change -->\r\n  <!-- We are looping searchOptions in order to display the proper name -->\r\n<ng-container *ngFor=\"let searchOption of searchOptions\">\r\n  <ng-container *ngFor=\"let filter of filters; let j = index\">\r\n    <span *ngIf=\"filter && filter.member && searchOption.field === filter.member\"\r\n          class=\"advanced-search-chips\"\r\n          [ngClass]=\"{'disabled': searchOption?.readonly ?? false}\">\r\n      {{ searchOption.name }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n      <button (click)=\"removeFilter(j)\"\r\n              [disabled]=\"searchOption?.readonly ?? false\"\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</ng-container>\r\n\r\n</div>\r\n", 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", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: AdvancedSearchComponent, isStandalone: false, selector: "lib-advanced-search", inputs: { operatorsDisabled: ["operators-disabled", "operatorsDisabled"], searchOptions: ["search-options", "searchOptions"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, usesOnChanges: true, 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 OPERATOR MENU-->\r\n      <div *ngIf=\"!operatorsDisabled && selectedField\"\r\n           class=\"advanced-search-filter-operator-container\">\r\n          <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\r\n              <label class=\"advanced-search-filter-operator-label\"\r\n                     for=\"selectedOperator\">\r\n                  &nbsp;\r\n              </label>\r\n              <lib-drop-down-menu [options]=\"operatorMenuOptions\"\r\n                                  [selected]=\"selectedOperator\"\r\n                                  (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\r\n          </div>\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': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\r\n                  [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\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  <!-- In order for our changes to be reflected everytime searchOptions change -->\r\n  <!-- We are looping searchOptions in order to display the proper name -->\r\n<ng-container *ngFor=\"let searchOption of searchOptions\">\r\n  <ng-container *ngFor=\"let filter of filters; let j = index\">\r\n    <span *ngIf=\"filter && filter.member && searchOption.field === filter.member\"\r\n          class=\"advanced-search-chips\"\r\n          [ngClass]=\"{'disabled': searchOption?.readonly ?? false}\">\r\n      {{ searchOption.name }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n      <button (click)=\"removeFilter(j)\"\r\n              [disabled]=\"searchOption?.readonly ?? false\"\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</ng-container>\r\n\r\n</div>\r\n", 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", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", 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 OPERATOR MENU-->\r\n      <div *ngIf=\"!operatorsDisabled && selectedField\"\r\n           class=\"advanced-search-filter-operator-container\">\r\n          <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\r\n              <label class=\"advanced-search-filter-operator-label\"\r\n                     for=\"selectedOperator\">\r\n                  &nbsp;\r\n              </label>\r\n              <lib-drop-down-menu [options]=\"operatorMenuOptions\"\r\n                                  [selected]=\"selectedOperator\"\r\n                                  (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\r\n          </div>\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': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\r\n                  [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\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  <!-- In order for our changes to be reflected everytime searchOptions change -->\r\n  <!-- We are looping searchOptions in order to display the proper name -->\r\n<ng-container *ngFor=\"let searchOption of searchOptions\">\r\n  <ng-container *ngFor=\"let filter of filters; let j = index\">\r\n    <span *ngIf=\"filter && filter.member && searchOption.field === filter.member\"\r\n          class=\"advanced-search-chips\"\r\n          [ngClass]=\"{'disabled': searchOption?.readonly ?? false}\">\r\n      {{ searchOption.name }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n      <button (click)=\"removeFilter(j)\"\r\n              [disabled]=\"searchOption?.readonly ?? false\"\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</ng-container>\r\n\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-advanced-search', standalone: false, 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 OPERATOR MENU-->\r\n      <div *ngIf=\"!operatorsDisabled && selectedField\"\r\n           class=\"advanced-search-filter-operator-container\">\r\n          <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\r\n              <label class=\"advanced-search-filter-operator-label\"\r\n                     for=\"selectedOperator\">\r\n                  &nbsp;\r\n              </label>\r\n              <lib-drop-down-menu [options]=\"operatorMenuOptions\"\r\n                                  [selected]=\"selectedOperator\"\r\n                                  (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\r\n          </div>\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': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\r\n                  [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\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  <!-- In order for our changes to be reflected everytime searchOptions change -->\r\n  <!-- We are looping searchOptions in order to display the proper name -->\r\n<ng-container *ngFor=\"let searchOption of searchOptions\">\r\n  <ng-container *ngFor=\"let filter of filters; let j = index\">\r\n    <span *ngIf=\"filter && filter.member && searchOption.field === filter.member\"\r\n          class=\"advanced-search-chips\"\r\n          [ngClass]=\"{'disabled': searchOption?.readonly ?? false}\">\r\n      {{ searchOption.name }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n      <button (click)=\"removeFilter(j)\"\r\n              [disabled]=\"searchOption?.readonly ?? false\"\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</ng-container>\r\n\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { advancedSearchChanged: [{
                 type: Output
             }], operatorsDisabled: [{
@@ -1437,12 +1456,12 @@ class ListViewEmptyStateComponent {
     }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ListViewEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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=\"py-20\">\r\n  <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</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ListViewEmptyStateComponent, isStandalone: false, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0, template: "<div class=\"py-20\">\r\n  <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</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ListViewEmptyStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewEmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-list-view-empty-state', template: "<div class=\"py-20\">\r\n  <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</div>" }]
+            args: [{ selector: 'lib-list-view-empty-state', standalone: false, template: "<div class=\"py-20\">\r\n  <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</div>" }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], subTitle: [{
@@ -1464,12 +1483,12 @@ class SkeletonLoaderComponent {
     counter(i) {
         return new Array(i);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type", deckClass: ["deck-class", "deckClass"] }, ngImport: i0, template: "<div [class]=\"deckClass\" *ngIf=\"type === 'tiles'\">\r\n  <div class=\"relative p-4 w-80 bg-white overflow-hidden shadow hover:shadow-md rounded-xl\"  *ngFor=\"let i of counter(count)\">\r\n    <div class=\"animate-pulse flex flex-col rounded-xl\">\r\n      <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n      \r\n      <div class=\"flex flex-col mt-5 rounded-xl\">\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 rounded-xl\">\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>\r\n  </div>\r\n</div>\r\n  \r\n<div class=\"cards-deck-1\"  *ngIf=\"type === 'table'\">\r\n  <div class=\"border border-light-blue-300 shadow rounded-lg p-4 max-w-sm w-full mx-auto mb-4\" *ngFor=\"let i of counter(count)\">\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</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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: SkeletonLoaderComponent, isStandalone: false, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type", deckClass: ["deck-class", "deckClass"] }, ngImport: i0, template: "<div [class]=\"deckClass\" *ngIf=\"type === 'tiles'\">\r\n  <div class=\"relative p-4 w-80 bg-white overflow-hidden shadow hover:shadow-md rounded-xl\"  *ngFor=\"let i of counter(count)\">\r\n    <div class=\"animate-pulse flex flex-col rounded-xl\">\r\n      <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n      \r\n      <div class=\"flex flex-col mt-5 rounded-xl\">\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 rounded-xl\">\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>\r\n  </div>\r\n</div>\r\n  \r\n<div class=\"cards-deck-1\"  *ngIf=\"type === 'table'\">\r\n  <div class=\"border border-light-blue-300 shadow rounded-lg p-4 max-w-sm w-full mx-auto mb-4\" *ngFor=\"let i of counter(count)\">\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</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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-skeleton-loader', template: "<div [class]=\"deckClass\" *ngIf=\"type === 'tiles'\">\r\n  <div class=\"relative p-4 w-80 bg-white overflow-hidden shadow hover:shadow-md rounded-xl\"  *ngFor=\"let i of counter(count)\">\r\n    <div class=\"animate-pulse flex flex-col rounded-xl\">\r\n      <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n      \r\n      <div class=\"flex flex-col mt-5 rounded-xl\">\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 rounded-xl\">\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>\r\n  </div>\r\n</div>\r\n  \r\n<div class=\"cards-deck-1\"  *ngIf=\"type === 'table'\">\r\n  <div class=\"border border-light-blue-300 shadow rounded-lg p-4 max-w-sm w-full mx-auto mb-4\" *ngFor=\"let i of counter(count)\">\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</div>" }]
+            args: [{ selector: 'lib-skeleton-loader', standalone: false, template: "<div [class]=\"deckClass\" *ngIf=\"type === 'tiles'\">\r\n  <div class=\"relative p-4 w-80 bg-white overflow-hidden shadow hover:shadow-md rounded-xl\"  *ngFor=\"let i of counter(count)\">\r\n    <div class=\"animate-pulse flex flex-col rounded-xl\">\r\n      <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n      \r\n      <div class=\"flex flex-col mt-5 rounded-xl\">\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 rounded-xl\">\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>\r\n  </div>\r\n</div>\r\n  \r\n<div class=\"cards-deck-1\"  *ngIf=\"type === 'table'\">\r\n  <div class=\"border border-light-blue-300 shadow rounded-lg p-4 max-w-sm w-full mx-auto mb-4\" *ngFor=\"let i of counter(count)\">\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</div>" }]
         }], ctorParameters: () => [], propDecorators: { count: [{
                 type: Input
             }], type: [{
@@ -1605,12 +1624,12 @@ class ListViewComponent {
                         : 'gallery-deck';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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"], operatorsDisabled: ["operators-disabled", "operatorsDisabled"], 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                       [operators-disabled]=\"operatorsDisabled\"\r\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n  </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             <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\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]=\"busy ? 'cards-deck-1' : tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [deck-class]=\"tilesDeckClass\" [count]=\"7\" [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\" [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\" role=\"list\" [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\" role=\"listitem\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [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 aria-label=\"details button\" class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\" [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            title=\"expand-collapse\"\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                            title=\"toggleDetails\"\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>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["operators-disabled", "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", "deck-class"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ListViewComponent, isStandalone: false, 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"], operatorsDisabled: ["operators-disabled", "operatorsDisabled"], 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                       [operators-disabled]=\"operatorsDisabled\"\r\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n  </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             <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\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]=\"busy ? 'cards-deck-1' : tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [deck-class]=\"tilesDeckClass\" [count]=\"7\" [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\" [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\" role=\"list\" [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\" role=\"listitem\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [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 aria-label=\"details button\" class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\" [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            title=\"expand-collapse\"\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                            title=\"toggleDetails\"\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>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["operators-disabled", "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", "deck-class"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
-            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                       [operators-disabled]=\"operatorsDisabled\"\r\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n  </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             <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\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]=\"busy ? 'cards-deck-1' : tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [deck-class]=\"tilesDeckClass\" [count]=\"7\" [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\" [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\" role=\"list\" [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\" role=\"listitem\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [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 aria-label=\"details button\" class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\" [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            title=\"expand-collapse\"\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                            title=\"toggleDetails\"\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>\r\n" }]
+            args: [{ selector: 'lib-list-view', standalone: false, template: "<div>\r\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n                       [search-options]=\"searchOptions\"\r\n                       [filters]=\"filters\"\r\n                       [operators-disabled]=\"operatorsDisabled\"\r\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n  </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             <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\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]=\"busy ? 'cards-deck-1' : tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [deck-class]=\"tilesDeckClass\" [count]=\"7\" [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\" [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\" role=\"list\" [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\" role=\"listitem\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [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 aria-label=\"details button\" class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\" [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            title=\"expand-collapse\"\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                            title=\"toggleDetails\"\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>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { searchOptions: [{
                 type: Input,
                 args: ['search-options']
@@ -1685,12 +1704,12 @@ class CollapsiblePanelComponent {
     }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: CollapsiblePanelComponent, selector: "lib-collapsible-panel", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"collapsible-panel-container\">\r\n  <div class=\"collapsible-panel-container-shadow\">\r\n    <div class=\"collapsible-panel-container-inner\">\r\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\r\n        <div class=\"collapsible-panel-button-content-container\">\r\n          <span>{{ title }} </span>\r\n          <span class=\"ico-plus\"></span>\r\n        </div>\r\n      </button>\r\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: CollapsiblePanelComponent, isStandalone: false, selector: "lib-collapsible-panel", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"collapsible-panel-container\">\r\n  <div class=\"collapsible-panel-container-shadow\">\r\n    <div class=\"collapsible-panel-container-inner\">\r\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\r\n        <div class=\"collapsible-panel-button-content-container\">\r\n          <span>{{ title }} </span>\r\n          <span class=\"ico-plus\"></span>\r\n        </div>\r\n      </button>\r\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CollapsiblePanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CollapsiblePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-collapsible-panel', template: "<div class=\"collapsible-panel-container\">\r\n  <div class=\"collapsible-panel-container-shadow\">\r\n    <div class=\"collapsible-panel-container-inner\">\r\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\r\n        <div class=\"collapsible-panel-button-content-container\">\r\n          <span>{{ title }} </span>\r\n          <span class=\"ico-plus\"></span>\r\n        </div>\r\n      </button>\r\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-collapsible-panel', standalone: false, template: "<div class=\"collapsible-panel-container\">\r\n  <div class=\"collapsible-panel-container-shadow\">\r\n    <div class=\"collapsible-panel-container-inner\">\r\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\r\n        <div class=\"collapsible-panel-button-content-container\">\r\n          <span>{{ title }} </span>\r\n          <span class=\"ico-plus\"></span>\r\n        </div>\r\n      </button>\r\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }] } });
@@ -1713,12 +1732,12 @@ class KpiTileComponent {
         this.tileAction.emit($event);
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: KpiTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: KpiTileComponent, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi", hideBtn: "hideBtn", actionText: ["action-text", "actionText"] }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\" [ngClass]=\"{'card-deck-busy' : busy }\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container\">\r\n      <a href=\"#\" class=\"kpi-tile-action\" (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n    </div>\r\n    <div class=\"grid grid-cols-2 grid-flow-row gap-2 items-center\">\r\n      <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n      <div class=\"text-xs\">\r\n        <a href=\"#\" class=\"kpi-tile-action\" [ngClass]=\"{'invisible': hideBtn}\" (click)=\"emitTileAction($event)\">{{actionText}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: KpiTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: KpiTileComponent, isStandalone: false, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi", hideBtn: "hideBtn", actionText: ["action-text", "actionText"] }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\" [ngClass]=\"{'card-deck-busy' : busy }\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container\">\r\n      <a href=\"#\" class=\"kpi-tile-action\" (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n    </div>\r\n    <div class=\"grid grid-cols-2 grid-flow-row gap-2 items-center\">\r\n      <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n      <div class=\"text-xs\">\r\n        <a href=\"#\" class=\"kpi-tile-action\" [ngClass]=\"{'invisible': hideBtn}\" (click)=\"emitTileAction($event)\">{{actionText}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: KpiTileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: KpiTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-kpi-tile', template: "<div class=\"card\" [ngClass]=\"{'card-deck-busy' : busy }\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container\">\r\n      <a href=\"#\" class=\"kpi-tile-action\" (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n    </div>\r\n    <div class=\"grid grid-cols-2 grid-flow-row gap-2 items-center\">\r\n      <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n      <div class=\"text-xs\">\r\n        <a href=\"#\" class=\"kpi-tile-action\" [ngClass]=\"{'invisible': hideBtn}\" (click)=\"emitTileAction($event)\">{{actionText}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>" }]
+            args: [{ selector: 'lib-kpi-tile', standalone: false, template: "<div class=\"card\" [ngClass]=\"{'card-deck-busy' : busy }\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container\">\r\n      <a href=\"#\" class=\"kpi-tile-action\" (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n    </div>\r\n    <div class=\"grid grid-cols-2 grid-flow-row gap-2 items-center\">\r\n      <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n      <div class=\"text-xs\">\r\n        <a href=\"#\" class=\"kpi-tile-action\" [ngClass]=\"{'invisible': hideBtn}\" (click)=\"emitTileAction($event)\">{{actionText}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], busy: [{
@@ -1746,10 +1765,10 @@ class ToasterService {
     show(type, title, body, delay) {
         this._subject.next({ type, title, body, delay });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToasterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToasterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1770,12 +1789,12 @@ class ToasterComponent {
         this.closed = true;
         setTimeout(() => this.remove.emit(index), 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ToasterComponent, selector: "lib-toaster", inputs: { toast: "toast", i: "i" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div aria-live=\"assertive\"\r\n     [ngClass]=\"closed ? 'toast-closed': 'toast z-50'\"\r\n     [ngStyle]=\"isMobile ? { 'margin-bottom.px': i * 85 } : {'margin-top.px': i * 85 }\">\r\n  <div class=\"toast-container\">\r\n    <div class=\"toast-pill\">\r\n      <div class=\"toast-context-padding\">\r\n        <div class=\"toast-context\"\r\n             [ngSwitch]=\"toast?.type\">\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'info'\">\r\n            <svg class=\"h-5 w-5 text-blue-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'success'\">\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'error'\">\r\n            <svg class=\"h-5 w-5 text-red-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'warning'\">\r\n            <svg class=\"h-5 w-5 text-yellow-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchDefault>\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n\r\n          <div class=\"ml-3 w-0 flex-1\">\r\n            <p class=\"toast-title\"\r\n               *ngIf=\"toast?.title\">\r\n              {{toast?.title}}\r\n            </p>\r\n            <p class=\"toast-body\">\r\n              {{toast?.body}}\r\n            </p>\r\n          </div>\r\n          <div class=\"toast-close-icon\">\r\n            <button class=\"toast-close-button\"\r\n                    (click)=\"closeToast(i)\">\r\n              <span class=\"sr-only\">Close</span>\r\n              <!-- Heroicon name: solid/x -->\r\n              <svg class=\"h-5 w-5\"\r\n                   xmlns=\"http://www.w3.org/2000/svg\"\r\n                   viewBox=\"0 0 20 20\"\r\n                   fill=\"currentColor\"\r\n                   aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\"\r\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                      clip-rule=\"evenodd\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToasterComponent, isStandalone: false, selector: "lib-toaster", inputs: { toast: "toast", i: "i" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div aria-live=\"assertive\"\r\n     [ngClass]=\"closed ? 'toast-closed': 'toast z-50'\"\r\n     [ngStyle]=\"isMobile ? { 'margin-bottom.px': i * 85 } : {'margin-top.px': i * 85 }\">\r\n  <div class=\"toast-container\">\r\n    <div class=\"toast-pill\">\r\n      <div class=\"toast-context-padding\">\r\n        <div class=\"toast-context\"\r\n             [ngSwitch]=\"toast?.type\">\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'info'\">\r\n            <svg class=\"h-5 w-5 text-blue-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'success'\">\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'error'\">\r\n            <svg class=\"h-5 w-5 text-red-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'warning'\">\r\n            <svg class=\"h-5 w-5 text-yellow-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchDefault>\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n\r\n          <div class=\"ml-3 w-0 flex-1\">\r\n            <p class=\"toast-title\"\r\n               *ngIf=\"toast?.title\">\r\n              {{toast?.title}}\r\n            </p>\r\n            <p class=\"toast-body\">\r\n              {{toast?.body}}\r\n            </p>\r\n          </div>\r\n          <div class=\"toast-close-icon\">\r\n            <button class=\"toast-close-button\"\r\n                    (click)=\"closeToast(i)\">\r\n              <span class=\"sr-only\">Close</span>\r\n              <!-- Heroicon name: solid/x -->\r\n              <svg class=\"h-5 w-5\"\r\n                   xmlns=\"http://www.w3.org/2000/svg\"\r\n                   viewBox=\"0 0 20 20\"\r\n                   fill=\"currentColor\"\r\n                   aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\"\r\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                      clip-rule=\"evenodd\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "17.3.6", ngImport: i0, type: ToasterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-toaster', template: "<div aria-live=\"assertive\"\r\n     [ngClass]=\"closed ? 'toast-closed': 'toast z-50'\"\r\n     [ngStyle]=\"isMobile ? { 'margin-bottom.px': i * 85 } : {'margin-top.px': i * 85 }\">\r\n  <div class=\"toast-container\">\r\n    <div class=\"toast-pill\">\r\n      <div class=\"toast-context-padding\">\r\n        <div class=\"toast-context\"\r\n             [ngSwitch]=\"toast?.type\">\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'info'\">\r\n            <svg class=\"h-5 w-5 text-blue-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'success'\">\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'error'\">\r\n            <svg class=\"h-5 w-5 text-red-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'warning'\">\r\n            <svg class=\"h-5 w-5 text-yellow-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchDefault>\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n\r\n          <div class=\"ml-3 w-0 flex-1\">\r\n            <p class=\"toast-title\"\r\n               *ngIf=\"toast?.title\">\r\n              {{toast?.title}}\r\n            </p>\r\n            <p class=\"toast-body\">\r\n              {{toast?.body}}\r\n            </p>\r\n          </div>\r\n          <div class=\"toast-close-icon\">\r\n            <button class=\"toast-close-button\"\r\n                    (click)=\"closeToast(i)\">\r\n              <span class=\"sr-only\">Close</span>\r\n              <!-- Heroicon name: solid/x -->\r\n              <svg class=\"h-5 w-5\"\r\n                   xmlns=\"http://www.w3.org/2000/svg\"\r\n                   viewBox=\"0 0 20 20\"\r\n                   fill=\"currentColor\"\r\n                   aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\"\r\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                      clip-rule=\"evenodd\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>" }]
+            args: [{ selector: 'lib-toaster', standalone: false, template: "<div aria-live=\"assertive\"\r\n     [ngClass]=\"closed ? 'toast-closed': 'toast z-50'\"\r\n     [ngStyle]=\"isMobile ? { 'margin-bottom.px': i * 85 } : {'margin-top.px': i * 85 }\">\r\n  <div class=\"toast-container\">\r\n    <div class=\"toast-pill\">\r\n      <div class=\"toast-context-padding\">\r\n        <div class=\"toast-context\"\r\n             [ngSwitch]=\"toast?.type\">\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'info'\">\r\n            <svg class=\"h-5 w-5 text-blue-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'success'\">\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'error'\">\r\n            <svg class=\"h-5 w-5 text-red-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'warning'\">\r\n            <svg class=\"h-5 w-5 text-yellow-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchDefault>\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n\r\n          <div class=\"ml-3 w-0 flex-1\">\r\n            <p class=\"toast-title\"\r\n               *ngIf=\"toast?.title\">\r\n              {{toast?.title}}\r\n            </p>\r\n            <p class=\"toast-body\">\r\n              {{toast?.body}}\r\n            </p>\r\n          </div>\r\n          <div class=\"toast-close-icon\">\r\n            <button class=\"toast-close-button\"\r\n                    (click)=\"closeToast(i)\">\r\n              <span class=\"sr-only\">Close</span>\r\n              <!-- Heroicon name: solid/x -->\r\n              <svg class=\"h-5 w-5\"\r\n                   xmlns=\"http://www.w3.org/2000/svg\"\r\n                   viewBox=\"0 0 20 20\"\r\n                   fill=\"currentColor\"\r\n                   aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\"\r\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                      clip-rule=\"evenodd\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { toast: [{
                 type: Input
             }], i: [{
@@ -1799,12 +1818,12 @@ class ToasterContainerComponent {
     remove(index) {
         this.toasts = this.toasts.slice(0, index).concat(this.toasts.slice(index + 1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToasterContainerComponent, deps: [{ token: ToasterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ToasterContainerComponent, selector: "lib-toaster-container", ngImport: i0, template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ToasterComponent, selector: "lib-toaster", inputs: ["toast", "i"], outputs: ["remove"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterContainerComponent, deps: [{ token: ToasterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToasterContainerComponent, isStandalone: false, selector: "lib-toaster-container", ngImport: i0, template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ToasterComponent, selector: "lib-toaster", inputs: ["toast", "i"], outputs: ["remove"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToasterContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-toaster-container', template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\r\n" }]
+            args: [{ selector: 'lib-toaster-container', standalone: false, template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\r\n" }]
         }], ctorParameters: () => [{ type: ToasterService }] });
 class AvatarInitialsComponent {
@@ -1840,12 +1859,12 @@ class AvatarInitialsComponent {
             this.initials = initials;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AvatarInitialsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: AvatarInitialsComponent, selector: "lib-avatar-initials", inputs: { name: "name", large: "large" }, ngImport: i0, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\r\n    <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AvatarInitialsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: AvatarInitialsComponent, isStandalone: false, selector: "lib-avatar-initials", inputs: { name: "name", large: "large" }, ngImport: i0, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\r\n    <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AvatarInitialsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AvatarInitialsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-avatar-initials', template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\r\n    <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-avatar-initials', standalone: false, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\r\n    <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { name: [{
                 type: Input
             }], large: [{
@@ -1886,8 +1905,8 @@ class ToggleComponent {
             this.onTouched$();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ToggleComponent, selector: "lib-toggle", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToggleComponent, isStandalone: false, selector: "lib-toggle", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ToggleComponent),
@@ -1895,7 +1914,7 @@ class ToggleComponent {
             }
         ], ngImport: i0, template: "<button type=\"button\"\r\n        [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\r\n        class=\"toggle-button\"\r\n        role=\"switch\"\r\n        aria-checked=\"false\"\r\n        aria-labelledby=\"isPrivate\"\r\n        (click)=\"changeValue()\"\r\n        (blur)=\"onBlur($event)\"\r\n        value=\"{{value}}\"\r\n        [disabled]=\"disabled\"\r\n        [title]=\"disabled ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\r\n    <span aria-hidden=\"true\"\r\n          [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\r\n          class=\"toggle-span\"></span>\r\n</button>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-toggle', providers: [
                         {
@@ -1903,7 +1922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                             useExisting: forwardRef(() => ToggleComponent),
                             multi: true
                         }
-                    ], template: "<button type=\"button\"\r\n        [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\r\n        class=\"toggle-button\"\r\n        role=\"switch\"\r\n        aria-checked=\"false\"\r\n        aria-labelledby=\"isPrivate\"\r\n        (click)=\"changeValue()\"\r\n        (blur)=\"onBlur($event)\"\r\n        value=\"{{value}}\"\r\n        [disabled]=\"disabled\"\r\n        [title]=\"disabled ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\r\n    <span aria-hidden=\"true\"\r\n          [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\r\n          class=\"toggle-span\"></span>\r\n</button>" }]
+                    ], standalone: false, template: "<button type=\"button\"\r\n        [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\r\n        class=\"toggle-button\"\r\n        role=\"switch\"\r\n        aria-checked=\"false\"\r\n        aria-labelledby=\"isPrivate\"\r\n        (click)=\"changeValue()\"\r\n        (blur)=\"onBlur($event)\"\r\n        value=\"{{value}}\"\r\n        [disabled]=\"disabled\"\r\n        [title]=\"disabled ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\r\n    <span aria-hidden=\"true\"\r\n          [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\r\n          class=\"toggle-span\"></span>\r\n</button>" }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -1989,12 +2008,12 @@ class SidePaneComponent {
         // prepei na allaxei auto!
         this.onComplete.emit(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SidePaneComponent, deps: [{ token: i1$1.Router }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SidePaneComponent, selector: "lib-side-pane", inputs: { showPane: ["visible", "showPane"], size: ["pane-size", "size"] }, outputs: { onComplete: "onComplete", onOpen: "onOpen", onClose: "onClose" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\r\n  <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\r\n  <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\r\n    <div [class]=\"sizeContainerStyle\">\r\n      <div class=\"side-pane\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SidePaneComponent, deps: [{ token: i1$1.Router }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: SidePaneComponent, isStandalone: false, selector: "lib-side-pane", inputs: { showPane: ["visible", "showPane"], size: ["pane-size", "size"] }, outputs: { onComplete: "onComplete", onOpen: "onOpen", onClose: "onClose" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\r\n  <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\r\n  <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\r\n    <div [class]=\"sizeContainerStyle\">\r\n      <div class=\"side-pane\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SidePaneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SidePaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-side-pane', template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\r\n  <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\r\n  <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\r\n    <div [class]=\"sizeContainerStyle\">\r\n      <div class=\"side-pane\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-side-pane', standalone: false, template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\r\n  <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\r\n  <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\r\n    <div [class]=\"sizeContainerStyle\">\r\n      <div class=\"side-pane\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -2031,12 +2050,12 @@ class NavLinksListComponent {
     ngOnInit() {
         this.fragmentSub$ = this.activeFragment?.subscribe(fragment => this.fragmentValue = fragment);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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        <div *ngSwitchCase=\"'sparator'\" class=\"h-2\"></div>\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          [queryParams]=\"link.queryParams\"\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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: NavLinksListComponent, isStandalone: false, 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        <div *ngSwitchCase=\"'sparator'\" class=\"h-2\"></div>\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          [queryParams]=\"link.queryParams\"\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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "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: "17.3.6", ngImport: i0, type: NavLinksListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", 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\" [class.icons-only]=\"!showText\">\r\n    <ng-container *ngFor=\"let link of links | async\">\r\n      <ng-container [ngSwitch]=\"link.type\">\r\n        <div *ngSwitchCase=\"'sparator'\" class=\"h-2\"></div>\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          [queryParams]=\"link.queryParams\"\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" }]
+            args: [{ selector: 'lib-nav-links-list', standalone: false, 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        <div *ngSwitchCase=\"'sparator'\" class=\"h-2\"></div>\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          [queryParams]=\"link.queryParams\"\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: () => [], propDecorators: { links: [{
                 type: Input
             }], activeFragment: [{
@@ -2140,12 +2159,12 @@ class ComboboxComponent {
     emitSearchEvent(searchTerm = undefined) {
         this.onSearch.emit(searchTerm);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", placeholder: "placeholder", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", noResultsTemplate: "noResultsTemplate", busy: "busy", multiple: "multiple", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\r\n    <form autocomplete=\"off\"\r\n          [id]=\"id + '-form'\">\r\n        <input [id]=\"id\"\r\n               title=\"combobox input\"\r\n               type=\"text\"\r\n               (click)=\"onInputClick()\"\r\n               (clickOutside)=\"onClickOutside()\"\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 && items.length > 0\"\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 class=\"combobox-results\"\r\n         *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\r\n        <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\r\n        </ng-container>\r\n    </div>\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 #defaultnoResultsTemplate\r\n             let-searchTerm>\r\n    <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\r\n</ng-template>\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)=\"removeItem(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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ComboboxComponent, isStandalone: false, selector: "lib-combobox", inputs: { id: "id", placeholder: "placeholder", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", noResultsTemplate: "noResultsTemplate", busy: "busy", multiple: "multiple", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\r\n    <form autocomplete=\"off\"\r\n          [id]=\"id + '-form'\">\r\n        <input [id]=\"id\"\r\n               title=\"combobox input\"\r\n               type=\"text\"\r\n               (click)=\"onInputClick()\"\r\n               (clickOutside)=\"onClickOutside()\"\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 && items.length > 0\"\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 class=\"combobox-results\"\r\n         *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\r\n        <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\r\n        </ng-container>\r\n    </div>\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 #defaultnoResultsTemplate\r\n             let-searchTerm>\r\n    <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\r\n</ng-template>\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)=\"removeItem(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: "17.3.6", ngImport: i0, type: ComboboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-combobox', template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\r\n    <form autocomplete=\"off\"\r\n          [id]=\"id + '-form'\">\r\n        <input [id]=\"id\"\r\n               title=\"combobox input\"\r\n               type=\"text\"\r\n               (click)=\"onInputClick()\"\r\n               (clickOutside)=\"onClickOutside()\"\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 && items.length > 0\"\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 class=\"combobox-results\"\r\n         *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\r\n        <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\r\n        </ng-container>\r\n    </div>\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 #defaultnoResultsTemplate\r\n             let-searchTerm>\r\n    <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\r\n</ng-template>\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)=\"removeItem(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>" }]
+            args: [{ selector: 'lib-combobox', standalone: false, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\r\n    <form autocomplete=\"off\"\r\n          [id]=\"id + '-form'\">\r\n        <input [id]=\"id\"\r\n               title=\"combobox input\"\r\n               type=\"text\"\r\n               (click)=\"onInputClick()\"\r\n               (clickOutside)=\"onClickOutside()\"\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 && items.length > 0\"\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 class=\"combobox-results\"\r\n         *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\r\n        <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\r\n        </ng-container>\r\n    </div>\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 #defaultnoResultsTemplate\r\n             let-searchTerm>\r\n    <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\r\n</ng-template>\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)=\"removeItem(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: () => [], propDecorators: { id: [{
                 type: Input
             }], placeholder: [{
@@ -2173,17 +2192,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                 type: Output
             }] } });
+class EnhancedComboboxComponent {
+    constructor() {
+        this._debouncer = new Subject();
+        this._items = [];
+        this.id = 'combobox';
+        this.itemTemplate = undefined;
+        this.selectedItemTemplate = undefined;
+        this.noResultsTemplate = undefined;
+        this.busy = false;
+        this.multiple = true;
+        this.debounceMs = 1000;
+        this.displayShowMoreOption = false;
+        this.equalityPredicate = (x, y) => x === y;
+        this.selectedItemsFilter = () => true;
+        this.onSearch = new EventEmitter();
+        this.onItemSelected = new EventEmitter();
+        this.onShowMore = new EventEmitter();
+        this.showResults = false;
+        this.selectedItems = [];
+        this.searchTerm = '';
+    }
+    set items(items) {
+        this._items = items;
+    }
+    get items() {
+        return this._items.filter(this.selectedItemsFilter);
+    }
+    ngOnInit() {
+        this.emitSearchEvent();
+        this._debouncer
+            .pipe(debounceTime$1(this.debounceMs), distinctUntilChanged$1())
+            .subscribe((value) => {
+            this.searchTerm = value;
+            this.emitSearchEvent(value);
+        });
+    }
+    onInputClick() {
+        this.showResults = true;
+    }
+    onClickOutside() {
+        this.showResults = false;
+    }
+    onInputKeyUp(event) {
+        this._debouncer.next(event.currentTarget.value);
+    }
+    onListItemSelected(item) {
+        this.onItemSelected.emit(item);
+        if (this.multiple) {
+            const index = this.selectedItems.findIndex(x => this.equalityPredicate(x, item));
+            if (index < 0) {
+                this.selectedItems.push(item);
+            }
+        }
+        else {
+            this.value = item;
+        }
+    }
+    removeItem(item) {
+        const index = this.selectedItems.findIndex(x => this.equalityPredicate(x, item));
+        if (index > -1) {
+            this.selectedItems.splice(index, 1);
+        }
+    }
+    emitSearchEvent(searchTerm = undefined) {
+        this.onSearch.emit(searchTerm);
+    }
+    emitShowMoreEvent(event) {
+        event.stopPropagation();
+        this.onShowMore.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EnhancedComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: EnhancedComboboxComponent, isStandalone: false, selector: "lib-enhanced-combobox", inputs: { id: "id", placeholder: "placeholder", itemTemplate: "itemTemplate", selectedItemTemplate: "selectedItemTemplate", noResultsTemplate: "noResultsTemplate", busy: "busy", multiple: "multiple", debounceMs: "debounceMs", displayShowMoreOption: "displayShowMoreOption", equalityPredicate: "equalityPredicate", selectedItemsFilter: "selectedItemsFilter", items: "items" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected", onShowMore: "onShowMore" }, ngImport: i0, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\r\n    <form autocomplete=\"off\"\r\n          [id]=\"id + '-form'\">\r\n        <input [id]=\"id\"\r\n               title=\"combobox input\"\r\n               type=\"text\"\r\n               (click)=\"onInputClick()\"\r\n               (clickOutside)=\"onClickOutside()\"\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 && items.length > 0\"\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        <li *ngIf=\"displayShowMoreOption\"\r\n            role=\"option\"\r\n            tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"showMoreItemTemplate\" />\r\n        </li>\r\n    </ul>\r\n    <div class=\"combobox-results\"\r\n         *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\r\n        <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\r\n        </ng-container>\r\n    </div>\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 #defaultnoResultsTemplate\r\n             let-searchTerm>\r\n    <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\r\n</ng-template>\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 #showMoreItemTemplate>\r\n    <span (click)=\"emitShowMoreEvent($event)\" class=\"btn btn-link text-blue-600 hover:bg-gray-100 flex justify-center relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">Show More</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)=\"removeItem(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: "20.3.1", ngImport: i0, type: EnhancedComboboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-enhanced-combobox', standalone: false, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\r\n    <form autocomplete=\"off\"\r\n          [id]=\"id + '-form'\">\r\n        <input [id]=\"id\"\r\n               title=\"combobox input\"\r\n               type=\"text\"\r\n               (click)=\"onInputClick()\"\r\n               (clickOutside)=\"onClickOutside()\"\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 && items.length > 0\"\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        <li *ngIf=\"displayShowMoreOption\"\r\n            role=\"option\"\r\n            tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"showMoreItemTemplate\" />\r\n        </li>\r\n    </ul>\r\n    <div class=\"combobox-results\"\r\n         *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\r\n        <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\r\n        </ng-container>\r\n    </div>\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 #defaultnoResultsTemplate\r\n             let-searchTerm>\r\n    <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\r\n</ng-template>\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 #showMoreItemTemplate>\r\n    <span (click)=\"emitShowMoreEvent($event)\" class=\"btn btn-link text-blue-600 hover:bg-gray-100 flex justify-center relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">Show More</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)=\"removeItem(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: () => [], propDecorators: { id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], selectedItemTemplate: [{
+                type: Input
+            }], noResultsTemplate: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], debounceMs: [{
+                type: Input
+            }], displayShowMoreOption: [{
+                type: Input
+            }], equalityPredicate: [{
+                type: Input
+            }], selectedItemsFilter: [{
+                type: Input
+            }], items: [{
+                type: Input,
+                args: ['items']
+            }], onSearch: [{
+                type: Output
+            }], onItemSelected: [{
+                type: Output
+            }], onShowMore: [{
+                type: Output
+            }] } });
 class LibTabLabelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LibTabLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: LibTabLabelDirective, selector: "[libTabLabel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibTabLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: LibTabLabelDirective, isStandalone: false, selector: "[libTabLabel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LibTabLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibTabLabelDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[libTabLabel]'
+                    selector: '[libTabLabel]',
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -2210,14 +2339,14 @@ class LibTabComponent {
     ngOnInit() {
         this.id = this.id || uuid.v4();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LibTabComponent, deps: [{ token: LIBTABGROUP_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibTabComponent, deps: [{ token: LIBTABGROUP_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LibTabComponent, isStandalone: false, 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>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LibTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibTabComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-tab',
@@ -2227,7 +2356,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
         </ng-template>
     `,
                     encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -2289,16 +2419,16 @@ class LibTabGroupComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LibTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: LibTabGroupComponent, selector: "lib-tab-group", outputs: { tabChanged: "tabChanged" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LibTabGroupComponent, isStandalone: false, 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\"\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: "17.3.6", ngImport: i0, type: LibTabGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", 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\"\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>" }]
+                    ], standalone: false, 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: () => [], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [LibTabComponent, { descendants: true }]
@@ -2310,13 +2440,14 @@ class LibStepInfoDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LibStepInfoDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: LibStepInfoDirective, selector: "[libStepInfo]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibStepInfoDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: LibStepInfoDirective, isStandalone: false, selector: "[libStepInfo]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LibStepInfoDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibStepInfoDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[libStepInfo]',
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -2324,13 +2455,14 @@ class LibStepLabelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LibStepLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: LibStepLabelDirective, selector: "[libStepLabel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibStepLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: LibStepLabelDirective, isStandalone: false, selector: "[libStepLabel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LibStepLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibStepLabelDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[libStepLabel]'
+                    selector: '[libStepLabel]',
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -2371,14 +2503,14 @@ class LibStepComponent {
         }
         return StepState.Upcoming;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LibStepComponent, deps: [{ token: LIBSTEPPER_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: LibStepComponent, selector: "lib-step", inputs: { class: "class", stepControl: "stepControl" }, queries: [{ propertyName: "stepLabel", first: true, predicate: LibStepLabelDirective, descendants: true }, { propertyName: "stepInfo", first: true, predicate: LibStepInfoDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibStepComponent, deps: [{ token: LIBSTEPPER_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LibStepComponent, isStandalone: false, selector: "lib-step", inputs: { class: "class", stepControl: "stepControl" }, queries: [{ propertyName: "stepLabel", first: true, predicate: LibStepLabelDirective, descendants: true }, { propertyName: "stepInfo", first: true, predicate: LibStepInfoDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
         <ng-template>
             <ng-content></ng-content>
         </ng-template>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LibStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibStepComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-step',
@@ -2388,7 +2520,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
         </ng-template>
     `,
                     encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -2501,16 +2634,16 @@ class LibStepperComponent {
         });
         this._currentStepIndex = newIndex;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LibStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged", completed: "completed" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LibStepperComponent, isStandalone: false, 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\"\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: "17.3.6", ngImport: i0, type: LibStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", 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\"\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>" }]
+                    ], standalone: false, 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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
                 type: ContentChildren,
                 args: [LibStepComponent, { descendants: true }]
@@ -2561,16 +2694,16 @@ class ToggleButtonComponent {
             this.onTouched$();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ToggleButtonComponent, selector: "lib-toggle-button", inputs: { value: "value", disabled: "disabled", icon: "icon", text: "text", textTrue: ["text-true", "textTrue"], textFalse: ["text-false", "textFalse"], description: "description", descriptionTrue: ["description-true", "descriptionTrue"], descriptionFalse: ["description-false", "descriptionFalse"] }, outputs: { valueChange: "valueChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToggleButtonComponent, isStandalone: false, selector: "lib-toggle-button", inputs: { value: "value", disabled: "disabled", icon: "icon", text: "text", textTrue: ["text-true", "textTrue"], textFalse: ["text-false", "textFalse"], description: "description", descriptionTrue: ["description-true", "descriptionTrue"], descriptionFalse: ["description-false", "descriptionFalse"] }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ToggleButtonComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<!-- Enabled: \"bg-indigo-600\", Not Enabled: \"bg-gray-200\" -->\n<div class=\"flex items-center\">\n<button type=\"button\"\n    (click)=\"changeValue()\"\n    [disabled]=\"disabled\"\n    class=\"toggle-button-button\" \n    [class.toggle-button-bg-false] = \"!value\"\n    [class.toggle-button-bg-true] = \"value\"\n    [class.toggle-button-button-disabled]=\"disabled\"\n    role=\"switch\" \n    aria-checked=\"false\">\n    <span class=\"sr-only\">{{value ? textTrue : textFalse}}</span>\n    <!-- Enabled: \"translate-x-5\", Not Enabled: \"translate-x-0\" -->\n    <span \n        class=\"toggle-button-icon-container\"\n        [class.toggle-button-icon-container-false] = \"!value\"\n        [class.toggle-button-icon-container-true] = \"value\">\n        <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\n        <span \n            [class.toggle-button-container-inner-true]=\"value\"\n            [class.toggle-button-container-inner-false]=\"!value\"\n            class=\"toggle-button-icon-container-inner\"\n            aria-hidden=\"true\">\n            <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"none\" viewBox=\"0 0 12 12\">\n                <path d=\"M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n        </span>\n        <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\n        <span \n            [class.toggle-button-container-inner-true]=\"!value\"\n            [class.toggle-button-container-inner-false]=\"value\"\n            class=\"toggle-button-icon-container-inner\"\n            aria-hidden=\"true\">\n            <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"currentColor\" viewBox=\"0 0 12 12\">\n                <path d=\"M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z\" />\n            </svg>\n        </span>\n    </span>\n</button>\n<span class=\"ml-3\" id=\"toggle-button-labels\">\n    <div class=\"toggle-button-text\">{{value ? textTrue : textFalse}}</div>\n    <div *ngIf=\"text\" class=\"toggle-button-text\">{{text}}</div>\n    <div *ngIf=\"description\" class=\"toggle-button-description\">{{description}}</div>\n    <div class=\"toggle-button-description\">{{value ? descriptionTrue : descriptionFalse}}</div>\n</span>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+        ], ngImport: i0, template: "<!-- Enabled: \"bg-indigo-600\", Not Enabled: \"bg-gray-200\" -->\r\n<div class=\"flex items-center\">\r\n<button type=\"button\"\r\n    (click)=\"changeValue()\"\r\n    [disabled]=\"disabled\"\r\n    class=\"toggle-button-button\" \r\n    [class.toggle-button-bg-false] = \"!value\"\r\n    [class.toggle-button-bg-true] = \"value\"\r\n    [class.toggle-button-button-disabled]=\"disabled\"\r\n    role=\"switch\" \r\n    aria-checked=\"false\">\r\n    <span class=\"sr-only\">{{value ? textTrue : textFalse}}</span>\r\n    <!-- Enabled: \"translate-x-5\", Not Enabled: \"translate-x-0\" -->\r\n    <span \r\n        class=\"toggle-button-icon-container\"\r\n        [class.toggle-button-icon-container-false] = \"!value\"\r\n        [class.toggle-button-icon-container-true] = \"value\">\r\n        <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\r\n        <span \r\n            [class.toggle-button-container-inner-true]=\"value\"\r\n            [class.toggle-button-container-inner-false]=\"!value\"\r\n            class=\"toggle-button-icon-container-inner\"\r\n            aria-hidden=\"true\">\r\n            <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"none\" viewBox=\"0 0 12 12\">\r\n                <path d=\"M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n        </span>\r\n        <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\r\n        <span \r\n            [class.toggle-button-container-inner-true]=\"!value\"\r\n            [class.toggle-button-container-inner-false]=\"value\"\r\n            class=\"toggle-button-icon-container-inner\"\r\n            aria-hidden=\"true\">\r\n            <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"currentColor\" viewBox=\"0 0 12 12\">\r\n                <path d=\"M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z\" />\r\n            </svg>\r\n        </span>\r\n    </span>\r\n</button>\r\n<span class=\"ml-3\" id=\"toggle-button-labels\">\r\n    <div class=\"toggle-button-text\">{{value ? textTrue : textFalse}}</div>\r\n    <div *ngIf=\"text\" class=\"toggle-button-text\">{{text}}</div>\r\n    <div *ngIf=\"description\" class=\"toggle-button-description\">{{description}}</div>\r\n    <div class=\"toggle-button-description\">{{value ? descriptionTrue : descriptionFalse}}</div>\r\n</span>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToggleButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-toggle-button', providers: [
                         {
@@ -2578,7 +2711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                             useExisting: forwardRef(() => ToggleButtonComponent),
                             multi: true
                         }
-                    ], template: "<!-- Enabled: \"bg-indigo-600\", Not Enabled: \"bg-gray-200\" -->\n<div class=\"flex items-center\">\n<button type=\"button\"\n    (click)=\"changeValue()\"\n    [disabled]=\"disabled\"\n    class=\"toggle-button-button\" \n    [class.toggle-button-bg-false] = \"!value\"\n    [class.toggle-button-bg-true] = \"value\"\n    [class.toggle-button-button-disabled]=\"disabled\"\n    role=\"switch\" \n    aria-checked=\"false\">\n    <span class=\"sr-only\">{{value ? textTrue : textFalse}}</span>\n    <!-- Enabled: \"translate-x-5\", Not Enabled: \"translate-x-0\" -->\n    <span \n        class=\"toggle-button-icon-container\"\n        [class.toggle-button-icon-container-false] = \"!value\"\n        [class.toggle-button-icon-container-true] = \"value\">\n        <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\n        <span \n            [class.toggle-button-container-inner-true]=\"value\"\n            [class.toggle-button-container-inner-false]=\"!value\"\n            class=\"toggle-button-icon-container-inner\"\n            aria-hidden=\"true\">\n            <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"none\" viewBox=\"0 0 12 12\">\n                <path d=\"M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n        </span>\n        <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\n        <span \n            [class.toggle-button-container-inner-true]=\"!value\"\n            [class.toggle-button-container-inner-false]=\"value\"\n            class=\"toggle-button-icon-container-inner\"\n            aria-hidden=\"true\">\n            <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"currentColor\" viewBox=\"0 0 12 12\">\n                <path d=\"M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z\" />\n            </svg>\n        </span>\n    </span>\n</button>\n<span class=\"ml-3\" id=\"toggle-button-labels\">\n    <div class=\"toggle-button-text\">{{value ? textTrue : textFalse}}</div>\n    <div *ngIf=\"text\" class=\"toggle-button-text\">{{text}}</div>\n    <div *ngIf=\"description\" class=\"toggle-button-description\">{{description}}</div>\n    <div class=\"toggle-button-description\">{{value ? descriptionTrue : descriptionFalse}}</div>\n</span>\n</div>" }]
+                    ], standalone: false, template: "<!-- Enabled: \"bg-indigo-600\", Not Enabled: \"bg-gray-200\" -->\r\n<div class=\"flex items-center\">\r\n<button type=\"button\"\r\n    (click)=\"changeValue()\"\r\n    [disabled]=\"disabled\"\r\n    class=\"toggle-button-button\" \r\n    [class.toggle-button-bg-false] = \"!value\"\r\n    [class.toggle-button-bg-true] = \"value\"\r\n    [class.toggle-button-button-disabled]=\"disabled\"\r\n    role=\"switch\" \r\n    aria-checked=\"false\">\r\n    <span class=\"sr-only\">{{value ? textTrue : textFalse}}</span>\r\n    <!-- Enabled: \"translate-x-5\", Not Enabled: \"translate-x-0\" -->\r\n    <span \r\n        class=\"toggle-button-icon-container\"\r\n        [class.toggle-button-icon-container-false] = \"!value\"\r\n        [class.toggle-button-icon-container-true] = \"value\">\r\n        <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\r\n        <span \r\n            [class.toggle-button-container-inner-true]=\"value\"\r\n            [class.toggle-button-container-inner-false]=\"!value\"\r\n            class=\"toggle-button-icon-container-inner\"\r\n            aria-hidden=\"true\">\r\n            <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"none\" viewBox=\"0 0 12 12\">\r\n                <path d=\"M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n        </span>\r\n        <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\r\n        <span \r\n            [class.toggle-button-container-inner-true]=\"!value\"\r\n            [class.toggle-button-container-inner-false]=\"value\"\r\n            class=\"toggle-button-icon-container-inner\"\r\n            aria-hidden=\"true\">\r\n            <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"currentColor\" viewBox=\"0 0 12 12\">\r\n                <path d=\"M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z\" />\r\n            </svg>\r\n        </span>\r\n    </span>\r\n</button>\r\n<span class=\"ml-3\" id=\"toggle-button-labels\">\r\n    <div class=\"toggle-button-text\">{{value ? textTrue : textFalse}}</div>\r\n    <div *ngIf=\"text\" class=\"toggle-button-text\">{{text}}</div>\r\n    <div *ngIf=\"description\" class=\"toggle-button-description\">{{description}}</div>\r\n    <div class=\"toggle-button-description\">{{value ? descriptionTrue : descriptionFalse}}</div>\r\n</span>\r\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -2619,12 +2752,12 @@ class ToggleButtonsListComponent {
         this.value = optionValue;
         this.valueChange.emit(optionValue);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToggleButtonsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ToggleButtonsListComponent, selector: "lib-toggle-buttons-list", inputs: { icon: "icon", options: "options", value: "value", compact: "compact" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative items-center inline-flex\">\n    <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n        <i [class]=\"icon\"></i>\n    </div>\n    <div class=\"toggle-buttons-list-drop-down-compact-container\" *ngIf=\"compact\">\n        <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n        </lib-drop-down-menu>\n    </div>\n    <div class=\"toggle-buttons-list\" *ngIf=\"!compact\">\n        <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n            <!-- [tooltip]=\"option.description\" -->\n            <button type=\"button\"\n                    [disabled]=\"option.value === value\"\n                    [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n                    class=\"toggle-buttons-list-button\"\n                    (click)=\"selectOption(option.value)\">\n            <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n                <i [class]=\"option.icon\"></i>\n            </div>\n            <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n            <span *ngIf=\"option.data && option.data.count\"\n                class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\n            </span>\n            </button>\n        </ng-template>\n    </div>\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: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleButtonsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToggleButtonsListComponent, isStandalone: false, selector: "lib-toggle-buttons-list", inputs: { icon: "icon", options: "options", value: "value", compact: "compact" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative items-center inline-flex\">\r\n    <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\r\n        <i [class]=\"icon\"></i>\r\n    </div>\r\n    <div class=\"toggle-buttons-list-drop-down-compact-container\" *ngIf=\"compact\">\r\n        <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\r\n        </lib-drop-down-menu>\r\n    </div>\r\n    <div class=\"toggle-buttons-list\" *ngIf=\"!compact\">\r\n        <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\r\n            <!-- [tooltip]=\"option.description\" -->\r\n            <button type=\"button\"\r\n                    [disabled]=\"option.value === value\"\r\n                    [class.toggle-buttons-list-button-selected]=\"option.value === value\"\r\n                    class=\"toggle-buttons-list-button\"\r\n                    (click)=\"selectOption(option.value)\">\r\n            <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\r\n                <i [class]=\"option.icon\"></i>\r\n            </div>\r\n            <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\r\n            <span *ngIf=\"option.data && option.data.count\"\r\n                class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\r\n            </span>\r\n            </button>\r\n        </ng-template>\r\n    </div>\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: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToggleButtonsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleButtonsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-toggle-buttons-list', template: "<div class=\"relative items-center inline-flex\">\n    <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n        <i [class]=\"icon\"></i>\n    </div>\n    <div class=\"toggle-buttons-list-drop-down-compact-container\" *ngIf=\"compact\">\n        <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n        </lib-drop-down-menu>\n    </div>\n    <div class=\"toggle-buttons-list\" *ngIf=\"!compact\">\n        <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n            <!-- [tooltip]=\"option.description\" -->\n            <button type=\"button\"\n                    [disabled]=\"option.value === value\"\n                    [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n                    class=\"toggle-buttons-list-button\"\n                    (click)=\"selectOption(option.value)\">\n            <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n                <i [class]=\"option.icon\"></i>\n            </div>\n            <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n            <span *ngIf=\"option.data && option.data.count\"\n                class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\n            </span>\n            </button>\n        </ng-template>\n    </div>\n</div>" }]
+            args: [{ selector: 'lib-toggle-buttons-list', standalone: false, template: "<div class=\"relative items-center inline-flex\">\r\n    <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\r\n        <i [class]=\"icon\"></i>\r\n    </div>\r\n    <div class=\"toggle-buttons-list-drop-down-compact-container\" *ngIf=\"compact\">\r\n        <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\r\n        </lib-drop-down-menu>\r\n    </div>\r\n    <div class=\"toggle-buttons-list\" *ngIf=\"!compact\">\r\n        <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\r\n            <!-- [tooltip]=\"option.description\" -->\r\n            <button type=\"button\"\r\n                    [disabled]=\"option.value === value\"\r\n                    [class.toggle-buttons-list-button-selected]=\"option.value === value\"\r\n                    class=\"toggle-buttons-list-button\"\r\n                    (click)=\"selectOption(option.value)\">\r\n            <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\r\n                <i [class]=\"option.icon\"></i>\r\n            </div>\r\n            <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\r\n            <span *ngIf=\"option.data && option.data.count\"\r\n                class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\r\n            </span>\r\n            </button>\r\n        </ng-template>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { icon: [{
                 type: Input
             }], options: [{
@@ -2641,12 +2774,15 @@ class ContentTileHeaderComponent {
     constructor() {
         this.template = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ContentTileHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ContentTileHeaderComponent, selector: "lib-content-tile-header", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ContentTileHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ContentTileHeaderComponent, isStandalone: false, selector: "lib-content-tile-header", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ContentTileHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ContentTileHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-content-tile-header', template: '<ng-content></ng-content>' }]
+            args: [{
+                    selector: 'lib-content-tile-header', template: '<ng-content></ng-content>',
+                    standalone: false
+                }]
         }], ctorParameters: () => [], propDecorators: { template: [{
                 type: ContentChild,
                 args: [TemplateRef]
@@ -2655,12 +2791,15 @@ class ContentTileItemComponent {
     constructor() {
         this.template = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ContentTileItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ContentTileItemComponent, selector: "lib-content-tile-item", inputs: { title: "title" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ContentTileItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ContentTileItemComponent, isStandalone: false, selector: "lib-content-tile-item", inputs: { title: "title" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ContentTileItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ContentTileItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-content-tile-item', template: '<ng-content></ng-content>' }]
+            args: [{
+                    selector: 'lib-content-tile-item', template: '<ng-content></ng-content>',
+                    standalone: false
+                }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], template: [{
@@ -2694,12 +2833,12 @@ class ContentTileComponent {
         this.tileAction.emit($event);
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ContentTileComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ContentTileComponent, selector: "lib-content-tile", inputs: { title: "title", busy: "busy", showAction: ["show-action", "showAction"], showFooter: ["show-footer", "showFooter"], actionText: ["action-text", "actionText"] }, outputs: { tileAction: "tile-action" }, queries: [{ propertyName: "header", first: true, predicate: ContentTileHeaderComponent, descendants: true }, { propertyName: "items", predicate: ContentTileItemComponent, read: ContentTileItemComponent }], ngImport: i0, template: "<div class=\"card bg-white\" [class.card-deck-busy]=\"busy\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container flex align-top\">\r\n      <button type=\"button\" *ngIf=\"!header\" class=\"kpi-tile-action text-left flex-1 uppercase\" \r\n              (click)=\"emitTileAction($event)\">{{(this.itemTemplates[selectedIndex].title ?? title) ?? '-'}}\r\n        </button>\r\n      <ng-container *ngIf=\"header && header.template\">\r\n        <div class=\"flex-1\">\r\n          <ng-template [ngTemplateOutlet]=\"header.template\"></ng-template>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"showAction\" class=\"float-right align-top\">\r\n        <button type=\"button\" class=\"kpi-tile-action text-xs uppercase\" (click)=\"emitTileAction($event)\">{{actionText}}</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"flex items-center\" *ngIf=\"itemTemplates\">\r\n      <ng-template [ngTemplateOutlet]=\"itemTemplates[selectedIndex].template\"></ng-template>\r\n    </div>\r\n    <div class=\"tile-card-footer opacity-25 hover:opacity-75\" *ngIf=\"itemTemplates && itemTemplates.length>1\">\r\n      <nav class=\"flex items-center justify-between px-4 sm:px-0\">\r\n        <div class=\"flex w-0 flex-1\"></div>\r\n        <div class=\"flex items-center justify-between px-2\">\r\n          <ng-container *ngFor=\"let item of itemTemplates; index as i\">\r\n            <button type=\"button\"\r\n                    title=\"details\"\r\n                    (click)=\"selectedIndex=i\"\r\n                    [disabled]=\"selectedIndex===i\"\r\n                    class=\"tile-card-item-btn\"\r\n                    [class.tile-card-item-btn-available]=\"selectedIndex!==i\"\r\n                    [class.tile-card-item-btn-selected]=\"selectedIndex===i\">\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"flex w-0 flex-1 justify-end\"></div>\r\n      </nav>\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ContentTileComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ContentTileComponent, isStandalone: false, selector: "lib-content-tile", inputs: { title: "title", busy: "busy", showAction: ["show-action", "showAction"], showFooter: ["show-footer", "showFooter"], actionText: ["action-text", "actionText"] }, outputs: { tileAction: "tile-action" }, queries: [{ propertyName: "header", first: true, predicate: ContentTileHeaderComponent, descendants: true }, { propertyName: "items", predicate: ContentTileItemComponent, read: ContentTileItemComponent }], ngImport: i0, template: "<div class=\"card bg-white\" [class.card-deck-busy]=\"busy\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container flex align-top\">\r\n      <button type=\"button\" *ngIf=\"!header\" class=\"kpi-tile-action text-left flex-1 uppercase\" \r\n              (click)=\"emitTileAction($event)\">{{(this.itemTemplates[selectedIndex].title ?? title) ?? '-'}}\r\n        </button>\r\n      <ng-container *ngIf=\"header && header.template\">\r\n        <div class=\"flex-1\">\r\n          <ng-template [ngTemplateOutlet]=\"header.template\"></ng-template>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"showAction\" class=\"float-right align-top\">\r\n        <button type=\"button\" class=\"kpi-tile-action text-xs uppercase\" (click)=\"emitTileAction($event)\">{{actionText}}</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"flex items-center\" *ngIf=\"itemTemplates\">\r\n      <ng-template [ngTemplateOutlet]=\"itemTemplates[selectedIndex].template\"></ng-template>\r\n    </div>\r\n    <div class=\"tile-card-footer opacity-25 hover:opacity-75\" *ngIf=\"itemTemplates && itemTemplates.length>1\">\r\n      <nav class=\"flex items-center justify-between px-4 sm:px-0\">\r\n        <div class=\"flex w-0 flex-1\"></div>\r\n        <div class=\"flex items-center justify-between px-2\">\r\n          <ng-container *ngFor=\"let item of itemTemplates; index as i\">\r\n            <button type=\"button\"\r\n                    title=\"details\"\r\n                    (click)=\"selectedIndex=i\"\r\n                    [disabled]=\"selectedIndex===i\"\r\n                    class=\"tile-card-item-btn\"\r\n                    [class.tile-card-item-btn-available]=\"selectedIndex!==i\"\r\n                    [class.tile-card-item-btn-selected]=\"selectedIndex===i\">\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"flex w-0 flex-1 justify-end\"></div>\r\n      </nav>\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ContentTileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ContentTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-content-tile', template: "<div class=\"card bg-white\" [class.card-deck-busy]=\"busy\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container flex align-top\">\r\n      <button type=\"button\" *ngIf=\"!header\" class=\"kpi-tile-action text-left flex-1 uppercase\" \r\n              (click)=\"emitTileAction($event)\">{{(this.itemTemplates[selectedIndex].title ?? title) ?? '-'}}\r\n        </button>\r\n      <ng-container *ngIf=\"header && header.template\">\r\n        <div class=\"flex-1\">\r\n          <ng-template [ngTemplateOutlet]=\"header.template\"></ng-template>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"showAction\" class=\"float-right align-top\">\r\n        <button type=\"button\" class=\"kpi-tile-action text-xs uppercase\" (click)=\"emitTileAction($event)\">{{actionText}}</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"flex items-center\" *ngIf=\"itemTemplates\">\r\n      <ng-template [ngTemplateOutlet]=\"itemTemplates[selectedIndex].template\"></ng-template>\r\n    </div>\r\n    <div class=\"tile-card-footer opacity-25 hover:opacity-75\" *ngIf=\"itemTemplates && itemTemplates.length>1\">\r\n      <nav class=\"flex items-center justify-between px-4 sm:px-0\">\r\n        <div class=\"flex w-0 flex-1\"></div>\r\n        <div class=\"flex items-center justify-between px-2\">\r\n          <ng-container *ngFor=\"let item of itemTemplates; index as i\">\r\n            <button type=\"button\"\r\n                    title=\"details\"\r\n                    (click)=\"selectedIndex=i\"\r\n                    [disabled]=\"selectedIndex===i\"\r\n                    class=\"tile-card-item-btn\"\r\n                    [class.tile-card-item-btn-available]=\"selectedIndex!==i\"\r\n                    [class.tile-card-item-btn-selected]=\"selectedIndex===i\">\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"flex w-0 flex-1 justify-end\"></div>\r\n      </nav>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-content-tile', standalone: false, template: "<div class=\"card bg-white\" [class.card-deck-busy]=\"busy\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container flex align-top\">\r\n      <button type=\"button\" *ngIf=\"!header\" class=\"kpi-tile-action text-left flex-1 uppercase\" \r\n              (click)=\"emitTileAction($event)\">{{(this.itemTemplates[selectedIndex].title ?? title) ?? '-'}}\r\n        </button>\r\n      <ng-container *ngIf=\"header && header.template\">\r\n        <div class=\"flex-1\">\r\n          <ng-template [ngTemplateOutlet]=\"header.template\"></ng-template>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"showAction\" class=\"float-right align-top\">\r\n        <button type=\"button\" class=\"kpi-tile-action text-xs uppercase\" (click)=\"emitTileAction($event)\">{{actionText}}</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"flex items-center\" *ngIf=\"itemTemplates\">\r\n      <ng-template [ngTemplateOutlet]=\"itemTemplates[selectedIndex].template\"></ng-template>\r\n    </div>\r\n    <div class=\"tile-card-footer opacity-25 hover:opacity-75\" *ngIf=\"itemTemplates && itemTemplates.length>1\">\r\n      <nav class=\"flex items-center justify-between px-4 sm:px-0\">\r\n        <div class=\"flex w-0 flex-1\"></div>\r\n        <div class=\"flex items-center justify-between px-2\">\r\n          <ng-container *ngFor=\"let item of itemTemplates; index as i\">\r\n            <button type=\"button\"\r\n                    title=\"details\"\r\n                    (click)=\"selectedIndex=i\"\r\n                    [disabled]=\"selectedIndex===i\"\r\n                    class=\"tile-card-item-btn\"\r\n                    [class.tile-card-item-btn-available]=\"selectedIndex!==i\"\r\n                    [class.tile-card-item-btn-selected]=\"selectedIndex===i\">\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"flex w-0 flex-1 justify-end\"></div>\r\n      </nav>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { title: [{
                 type: Input
             }], busy: [{
@@ -2750,12 +2889,12 @@ class StatsGridComponent {
         return !isNaN(Number(value));
         ;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: StatsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: StatsGridComponent, selector: "lib-stats-grid", inputs: { busy: "busy", count: "count", mode: "mode", labels: "labels", values: "values", colors: "colors" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!busy\">\n    <ul role=\"list\" class=\"grid gap-1\"\n        [class.grid-cols-4]=\"mode==='normal'\"\n        [class.grid-flow-col]=\"mode!=='normal'\">\n      <ng-container *ngFor=\"let value of values; index as i\">\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n          <div class=\"grid-cols-1 border-l-2 px-1\" [style]=\"'border-color:' + colors[i]\">\n            <div class=\"text-xs text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i]}}</div>\n          </div>\n        </li>\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" [style]=\"'border-color:' + colors[i]\">\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i]}}</div>\n            <div class=\"text-xs max-w-18 lg:w-auto truncate text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n  <div *ngIf=\"busy\">\n    <ul role=\"list\" class=\"grid gap-1\"\n        [class.grid-cols-4]=\"mode==='normal'\"\n        [class.grid-flow-col]=\"mode!=='normal'\">\n      <ng-container *ngFor=\"let value of values; index as i\">\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n          <div class=\"grid-cols-1 border-l-2 px-1\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n          </div>\n        </li>\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\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: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: StatsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: StatsGridComponent, isStandalone: false, selector: "lib-stats-grid", inputs: { busy: "busy", count: "count", mode: "mode", labels: "labels", values: "values", colors: "colors" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!busy\">\r\n    <ul role=\"list\" class=\"grid gap-1\"\r\n        [class.grid-cols-4]=\"mode==='normal'\"\r\n        [class.grid-flow-col]=\"mode!=='normal'\">\r\n      <ng-container *ngFor=\"let value of values; index as i\">\r\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\r\n          <div class=\"grid-cols-1 border-l-2 px-1\" [style]=\"'border-color:' + colors[i]\">\r\n            <div class=\"text-xs text-ellipsis overflow-hidden\">{{labels[i]}}</div>\r\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\r\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i]}}</div>\r\n          </div>\r\n        </li>\r\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\r\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" [style]=\"'border-color:' + colors[i]\">\r\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\r\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i]}}</div>\r\n            <div class=\"text-xs max-w-18 lg:w-auto truncate text-ellipsis overflow-hidden\">{{labels[i]}}</div>\r\n          </div>\r\n        </li>\r\n      </ng-container>\r\n    </ul>\r\n  </div>\r\n  <div *ngIf=\"busy\">\r\n    <ul role=\"list\" class=\"grid gap-1\"\r\n        [class.grid-cols-4]=\"mode==='normal'\"\r\n        [class.grid-flow-col]=\"mode!=='normal'\">\r\n      <ng-container *ngFor=\"let value of values; index as i\">\r\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\r\n          <div class=\"grid-cols-1 border-l-2 px-1\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\r\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\r\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\r\n          </div>\r\n        </li>\r\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\r\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\r\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\r\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\r\n          </div>\r\n        </li>\r\n      </ng-container>\r\n    </ul>\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: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: StatsGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: StatsGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-stats-grid', template: "<div *ngIf=\"!busy\">\n    <ul role=\"list\" class=\"grid gap-1\"\n        [class.grid-cols-4]=\"mode==='normal'\"\n        [class.grid-flow-col]=\"mode!=='normal'\">\n      <ng-container *ngFor=\"let value of values; index as i\">\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n          <div class=\"grid-cols-1 border-l-2 px-1\" [style]=\"'border-color:' + colors[i]\">\n            <div class=\"text-xs text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i]}}</div>\n          </div>\n        </li>\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" [style]=\"'border-color:' + colors[i]\">\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i]}}</div>\n            <div class=\"text-xs max-w-18 lg:w-auto truncate text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n  <div *ngIf=\"busy\">\n    <ul role=\"list\" class=\"grid gap-1\"\n        [class.grid-cols-4]=\"mode==='normal'\"\n        [class.grid-flow-col]=\"mode!=='normal'\">\n      <ng-container *ngFor=\"let value of values; index as i\">\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n          <div class=\"grid-cols-1 border-l-2 px-1\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n          </div>\n        </li>\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  </div>  " }]
+            args: [{ selector: 'lib-stats-grid', standalone: false, template: "<div *ngIf=\"!busy\">\r\n    <ul role=\"list\" class=\"grid gap-1\"\r\n        [class.grid-cols-4]=\"mode==='normal'\"\r\n        [class.grid-flow-col]=\"mode!=='normal'\">\r\n      <ng-container *ngFor=\"let value of values; index as i\">\r\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\r\n          <div class=\"grid-cols-1 border-l-2 px-1\" [style]=\"'border-color:' + colors[i]\">\r\n            <div class=\"text-xs text-ellipsis overflow-hidden\">{{labels[i]}}</div>\r\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\r\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i]}}</div>\r\n          </div>\r\n        </li>\r\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\r\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" [style]=\"'border-color:' + colors[i]\">\r\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\r\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i]}}</div>\r\n            <div class=\"text-xs max-w-18 lg:w-auto truncate text-ellipsis overflow-hidden\">{{labels[i]}}</div>\r\n          </div>\r\n        </li>\r\n      </ng-container>\r\n    </ul>\r\n  </div>\r\n  <div *ngIf=\"busy\">\r\n    <ul role=\"list\" class=\"grid gap-1\"\r\n        [class.grid-cols-4]=\"mode==='normal'\"\r\n        [class.grid-flow-col]=\"mode!=='normal'\">\r\n      <ng-container *ngFor=\"let value of values; index as i\">\r\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\r\n          <div class=\"grid-cols-1 border-l-2 px-1\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\r\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\r\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\r\n          </div>\r\n        </li>\r\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\r\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\r\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\r\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\r\n          </div>\r\n        </li>\r\n      </ng-container>\r\n    </ul>\r\n  </div>  " }]
         }], ctorParameters: () => [], propDecorators: { busy: [{
                 type: Input
             }], count: [{
@@ -2791,12 +2930,12 @@ class ProgressBarComponent {
             this.percentage = 0;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: { value: "value", valueText: ["value-text", "valueText"], total: "total", totalText: ["total-text", "totalText"], text: "text", busy: "busy" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"progress-bar-container\">\n    <div class=\"progress-bar-label\" *ngIf=\"!busy\">{{text}} {{valueText ?? value}}/{{totalText ?? total}}</div>\n    <div class=\"progress-bar-backdrop progress-bar-label w-2/3\" *ngIf=\"busy\"></div>\n    <div class=\"progress-bar-backdrop\">\n      <div class=\"progress-bar-inner\" [style]=\"'width:' + percentage + '%' \"></div>\n    </div>\n</div>\n  ", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ProgressBarComponent, isStandalone: false, selector: "lib-progress-bar", inputs: { value: "value", valueText: ["value-text", "valueText"], total: "total", totalText: ["total-text", "totalText"], text: "text", busy: "busy" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"progress-bar-container\">\r\n    <div class=\"progress-bar-label\" *ngIf=\"!busy\">{{text}} {{valueText ?? value}}/{{totalText ?? total}}</div>\r\n    <div class=\"progress-bar-backdrop progress-bar-label w-2/3\" *ngIf=\"busy\"></div>\r\n    <div class=\"progress-bar-backdrop\">\r\n      <div class=\"progress-bar-inner\" [style]=\"'width:' + percentage + '%' \"></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: "17.3.6", ngImport: i0, type: ProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-progress-bar', template: "<div class=\"progress-bar-container\">\n    <div class=\"progress-bar-label\" *ngIf=\"!busy\">{{text}} {{valueText ?? value}}/{{totalText ?? total}}</div>\n    <div class=\"progress-bar-backdrop progress-bar-label w-2/3\" *ngIf=\"busy\"></div>\n    <div class=\"progress-bar-backdrop\">\n      <div class=\"progress-bar-inner\" [style]=\"'width:' + percentage + '%' \"></div>\n    </div>\n</div>\n  " }]
+            args: [{ selector: 'lib-progress-bar', standalone: false, template: "<div class=\"progress-bar-container\">\r\n    <div class=\"progress-bar-label\" *ngIf=\"!busy\">{{text}} {{valueText ?? value}}/{{totalText ?? total}}</div>\r\n    <div class=\"progress-bar-backdrop progress-bar-label w-2/3\" *ngIf=\"busy\"></div>\r\n    <div class=\"progress-bar-backdrop\">\r\n      <div class=\"progress-bar-inner\" [style]=\"'width:' + percentage + '%' \"></div>\r\n    </div>\r\n</div>\r\n  " }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], valueText: [{
@@ -2818,12 +2957,15 @@ class DynamicComponentHostDirective {
         this.viewContainerRef = viewContainerRef;
         this.hostName = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DynamicComponentHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: { hostName: "hostName" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DynamicComponentHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DynamicComponentHostDirective, isStandalone: false, selector: "[appDynamicComponentHost]", inputs: { hostName: "hostName" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DynamicComponentHostDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DynamicComponentHostDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[appDynamicComponentHost]' }]
+            args: [{
+                    selector: '[appDynamicComponentHost]',
+                    standalone: false
+                }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { hostName: [{
                 type: Input
             }] } });
@@ -3047,10 +3189,10 @@ class ComponentLoaderFactory {
     createLoader(viewContainerRef) {
         return new ComponentLoader(viewContainerRef, this.componentFactoryResolver, this.applicationRef, this.injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ComponentLoaderFactory, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ComponentLoaderFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ComponentLoaderFactory, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ComponentLoaderFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ComponentLoaderFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ComponentLoaderFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }] });
@@ -3078,10 +3220,10 @@ class UserSettingsService {
         settings[key] = value;
         localStorage.setItem(UserSettingsService.SETTINGS_KEY, JSON.stringify(settings));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: UserSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: UserSettingsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UserSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UserSettingsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: UserSettingsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UserSettingsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3108,12 +3250,12 @@ class ShellSidebarComponent {
         this.activeFragment = this.route.fragment.pipe(share());
         this.sectionLinks = this.links[this.sectionLinksPath];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShellSidebarComponent, deps: [{ token: Router }, { token: ActivatedRoute }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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 [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>", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarComponent, deps: [{ token: Router }, { token: ActivatedRoute }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellSidebarComponent, isStandalone: false, 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 [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>", 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: "17.3.6", ngImport: i0, type: ShellSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", 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 [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>" }]
+            args: [{ selector: 'lib-shell-sidebar', standalone: false, 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 [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>" }]
         }], ctorParameters: () => [{ type: i1$1.Router, decorators: [{
                     type: Inject,
                     args: [Router]
@@ -3149,12 +3291,12 @@ class LanguageSelectionComponent {
     onClickOutside($event) {
         this.menuExpanded = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LanguageSelectionComponent, deps: [{ token: APP_LANGUAGES }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: LanguageSelectionComponent, selector: "lib-language-selection", ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button class=\"langs-button\" (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 ? 'langs-menu-expanded':'langs-menu-collapsed'\" 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LanguageSelectionComponent, deps: [{ token: APP_LANGUAGES }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LanguageSelectionComponent, isStandalone: false, selector: "lib-language-selection", ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button class=\"langs-button\" (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 ? 'langs-menu-expanded':'langs-menu-collapsed'\" 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: "17.3.6", ngImport: i0, type: LanguageSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LanguageSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-language-selection', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button class=\"langs-button\" (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 ? 'langs-menu-expanded':'langs-menu-collapsed'\" 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" }]
+            args: [{ selector: 'lib-language-selection', standalone: false, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button class=\"langs-button\" (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 ? 'langs-menu-expanded':'langs-menu-collapsed'\" 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: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_LANGUAGES]
@@ -3219,12 +3361,12 @@ class NotificationsIndicatorComponent {
     onClickOutside($event) {
         this.menuExpanded = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NotificationsIndicatorComponent, deps: [{ token: APP_NOTIFICATIONS }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator", ngImport: i0, template: "<div class=\"relative\"\r\n(clickOutside)=\"onClickOutside($event)\">\r\n  <!-- Notifications Button -->\r\n  <button type=\"button\"\r\n          (click)=\"doInboxAction()\"\r\n          aria-expanded=\"false\"\r\n          aria-haspopup=\"true\">\r\n    <span class=\"sr-only\">View notifications</span>\r\n    <span class=\"avatar-container\">\r\n      <span class=\"avatar-text\">\r\n        <i class=\"ms-Icon hover:text-blue-400\"\r\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\r\n          [class.text-sky-400]=\"unreadCount > 0\"\r\n          [class.animate-notification]=\"newArrival\"\r\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\r\n        </i>\r\n      </span>\r\n      <span\r\n        *ngIf=\"unreadCount > 0\"\r\n        [class.animate-pulse]=\"newArrival\"\r\n        class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\r\n        {{ unreadCount }}\r\n      </span>\r\n    </span>\r\n  </button>\r\n\r\n  <!-- Notifications dropdown -->\r\n  <div tabindex=\"1\" *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\r\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\r\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\r\n        <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n      </ng-container>\r\n      <ng-template #messagesDropDown>\r\n        <ul class=\"pr-1.5\">\r\n          <ng-container *ngIf=\"items; else loading\">\r\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\r\n              <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let message of items; let i = index\">\r\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\r\n                <div class=\"flex justify-between\">\r\n                  <div class=\"flex-grow\">\r\n                    <a\r\n                      [routerLink]=\"message.path\"\r\n                      (click)=\"removeItem(i)\"\r\n                      class=\"notifications-nav-link grid\"\r\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\r\n                    >\r\n                      <div class=\"flex flex-col\">\r\n                        <div class=\"font-thin tracking-tighter\">\r\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\r\n                        </div>\r\n                        <div class=\"font-bold\">\r\n                          {{ message.data.text }}\r\n                        </div>\r\n                      </div>\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <ng-template #loading>\r\n            <div class=\"h-32 flex items-center justify-center\">\r\n              <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\r\n            </div>\r\n          </ng-template>\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"p-1 rounded-lg\">\r\n      <a [routerLink]=\"allNotificationsLink!.path\" (click)=\"onClickOutside($event)\">\r\n        <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{allNotificationsLink!.text}}</button>\r\n      </a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", 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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NotificationsIndicatorComponent, deps: [{ token: APP_NOTIFICATIONS }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: NotificationsIndicatorComponent, isStandalone: false, selector: "lib-notifications-indicator", ngImport: i0, template: "<div class=\"relative\"\r\n(clickOutside)=\"onClickOutside($event)\">\r\n  <!-- Notifications Button -->\r\n  <button type=\"button\"\r\n          (click)=\"doInboxAction()\"\r\n          aria-expanded=\"false\"\r\n          aria-haspopup=\"true\">\r\n    <span class=\"sr-only\">View notifications</span>\r\n    <span class=\"avatar-container\">\r\n      <span class=\"avatar-text\">\r\n        <i class=\"ms-Icon hover:text-blue-400\"\r\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\r\n          [class.text-sky-400]=\"unreadCount > 0\"\r\n          [class.animate-notification]=\"newArrival\"\r\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\r\n        </i>\r\n      </span>\r\n      <span\r\n        *ngIf=\"unreadCount > 0\"\r\n        [class.animate-pulse]=\"newArrival\"\r\n        class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\r\n        {{ unreadCount }}\r\n      </span>\r\n    </span>\r\n  </button>\r\n\r\n  <!-- Notifications dropdown -->\r\n  <div tabindex=\"1\" *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\r\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\r\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\r\n        <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n      </ng-container>\r\n      <ng-template #messagesDropDown>\r\n        <ul class=\"pr-1.5\">\r\n          <ng-container *ngIf=\"items; else loading\">\r\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\r\n              <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let message of items; let i = index\">\r\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\r\n                <div class=\"flex justify-between\">\r\n                  <div class=\"flex-grow\">\r\n                    <a\r\n                      [routerLink]=\"message.path\"\r\n                      (click)=\"removeItem(i)\"\r\n                      class=\"notifications-nav-link grid\"\r\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\r\n                    >\r\n                      <div class=\"flex flex-col\">\r\n                        <div class=\"font-thin tracking-tighter\">\r\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\r\n                        </div>\r\n                        <div class=\"font-bold\">\r\n                          {{ message.data.text }}\r\n                        </div>\r\n                      </div>\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <ng-template #loading>\r\n            <div class=\"h-32 flex items-center justify-center\">\r\n              <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\r\n            </div>\r\n          </ng-template>\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"p-1 rounded-lg\">\r\n      <a [routerLink]=\"allNotificationsLink!.path\" (click)=\"onClickOutside($event)\">\r\n        <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{allNotificationsLink!.text}}</button>\r\n      </a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", 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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NotificationsIndicatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NotificationsIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-notifications-indicator', template: "<div class=\"relative\"\r\n(clickOutside)=\"onClickOutside($event)\">\r\n  <!-- Notifications Button -->\r\n  <button type=\"button\"\r\n          (click)=\"doInboxAction()\"\r\n          aria-expanded=\"false\"\r\n          aria-haspopup=\"true\">\r\n    <span class=\"sr-only\">View notifications</span>\r\n    <span class=\"avatar-container\">\r\n      <span class=\"avatar-text\">\r\n        <i class=\"ms-Icon hover:text-blue-400\"\r\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\r\n          [class.text-sky-400]=\"unreadCount > 0\"\r\n          [class.animate-notification]=\"newArrival\"\r\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\r\n        </i>\r\n      </span>\r\n      <span\r\n        *ngIf=\"unreadCount > 0\"\r\n        [class.animate-pulse]=\"newArrival\"\r\n        class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\r\n        {{ unreadCount }}\r\n      </span>\r\n    </span>\r\n  </button>\r\n\r\n  <!-- Notifications dropdown -->\r\n  <div tabindex=\"1\" *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\r\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\r\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\r\n        <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n      </ng-container>\r\n      <ng-template #messagesDropDown>\r\n        <ul class=\"pr-1.5\">\r\n          <ng-container *ngIf=\"items; else loading\">\r\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\r\n              <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let message of items; let i = index\">\r\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\r\n                <div class=\"flex justify-between\">\r\n                  <div class=\"flex-grow\">\r\n                    <a\r\n                      [routerLink]=\"message.path\"\r\n                      (click)=\"removeItem(i)\"\r\n                      class=\"notifications-nav-link grid\"\r\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\r\n                    >\r\n                      <div class=\"flex flex-col\">\r\n                        <div class=\"font-thin tracking-tighter\">\r\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\r\n                        </div>\r\n                        <div class=\"font-bold\">\r\n                          {{ message.data.text }}\r\n                        </div>\r\n                      </div>\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <ng-template #loading>\r\n            <div class=\"h-32 flex items-center justify-center\">\r\n              <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\r\n            </div>\r\n          </ng-template>\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"p-1 rounded-lg\">\r\n      <a [routerLink]=\"allNotificationsLink!.path\" (click)=\"onClickOutside($event)\">\r\n        <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{allNotificationsLink!.text}}</button>\r\n      </a>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-notifications-indicator', standalone: false, template: "<div class=\"relative\"\r\n(clickOutside)=\"onClickOutside($event)\">\r\n  <!-- Notifications Button -->\r\n  <button type=\"button\"\r\n          (click)=\"doInboxAction()\"\r\n          aria-expanded=\"false\"\r\n          aria-haspopup=\"true\">\r\n    <span class=\"sr-only\">View notifications</span>\r\n    <span class=\"avatar-container\">\r\n      <span class=\"avatar-text\">\r\n        <i class=\"ms-Icon hover:text-blue-400\"\r\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\r\n          [class.text-sky-400]=\"unreadCount > 0\"\r\n          [class.animate-notification]=\"newArrival\"\r\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\r\n        </i>\r\n      </span>\r\n      <span\r\n        *ngIf=\"unreadCount > 0\"\r\n        [class.animate-pulse]=\"newArrival\"\r\n        class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\r\n        {{ unreadCount }}\r\n      </span>\r\n    </span>\r\n  </button>\r\n\r\n  <!-- Notifications dropdown -->\r\n  <div tabindex=\"1\" *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\r\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\r\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\r\n        <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n      </ng-container>\r\n      <ng-template #messagesDropDown>\r\n        <ul class=\"pr-1.5\">\r\n          <ng-container *ngIf=\"items; else loading\">\r\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\r\n              <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let message of items; let i = index\">\r\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\r\n                <div class=\"flex justify-between\">\r\n                  <div class=\"flex-grow\">\r\n                    <a\r\n                      [routerLink]=\"message.path\"\r\n                      (click)=\"removeItem(i)\"\r\n                      class=\"notifications-nav-link grid\"\r\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\r\n                    >\r\n                      <div class=\"flex flex-col\">\r\n                        <div class=\"font-thin tracking-tighter\">\r\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\r\n                        </div>\r\n                        <div class=\"font-bold\">\r\n                          {{ message.data.text }}\r\n                        </div>\r\n                      </div>\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <ng-template #loading>\r\n            <div class=\"h-32 flex items-center justify-center\">\r\n              <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\r\n            </div>\r\n          </ng-template>\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"p-1 rounded-lg\">\r\n      <a [routerLink]=\"allNotificationsLink!.path\" (click)=\"onClickOutside($event)\">\r\n        <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{allNotificationsLink!.text}}</button>\r\n      </a>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_NOTIFICATIONS]
@@ -3275,12 +3417,12 @@ class UserProfileMenuComponent {
     onClickOutside($event) {
         this.userMenuExpanded = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: UserProfileMenuComponent, deps: [{ token: AuthService }, { token: Router }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"], showPicture: ["show-picture", "showPicture"] }, 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-authenticated\"\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 *ngIf=\"!showPicture\" class=\"avatar-text\">{{this.avatarName}}</span>\r\n          <img title=\"profile-image\" *ngIf=\"showPicture\" [userPicture]=\"user.profile.sub\" [displayName]=\"user.profile\" [size]=\"32\" />\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-lg 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-lg 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            (click)=\"onClickOutside($event)\"\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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UserProfileMenuComponent, deps: [{ token: AuthService }, { token: Router }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: UserProfileMenuComponent, isStandalone: false, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"], showPicture: ["show-picture", "showPicture"] }, 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-authenticated\"\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 *ngIf=\"!showPicture\" class=\"avatar-text\">{{this.avatarName}}</span>\r\n          <img title=\"profile-image\" *ngIf=\"showPicture\" [userPicture]=\"user.profile.sub\" [displayName]=\"user.profile\" [size]=\"32\" />\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-lg 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-lg 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            (click)=\"onClickOutside($event)\"\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: i2$1.ImgUserPictureDirective, selector: "img[userPicture]", inputs: ["userPicture", "size", "version", "displayName", "color"] }, { 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: "17.3.6", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", 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-authenticated\"\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 *ngIf=\"!showPicture\" class=\"avatar-text\">{{this.avatarName}}</span>\r\n          <img title=\"profile-image\" *ngIf=\"showPicture\" [userPicture]=\"user.profile.sub\" [displayName]=\"user.profile\" [size]=\"32\" />\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-lg 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-lg 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            (click)=\"onClickOutside($event)\"\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" }]
+            args: [{ selector: 'lib-user-profile-menu', standalone: false, 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-authenticated\"\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 *ngIf=\"!showPicture\" class=\"avatar-text\">{{this.avatarName}}</span>\r\n          <img title=\"profile-image\" *ngIf=\"showPicture\" [userPicture]=\"user.profile.sub\" [displayName]=\"user.profile\" [size]=\"32\" />\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-lg 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-lg 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            (click)=\"onClickOutside($event)\"\r\n            [links]=\"links.profile\"\r\n            [link-class]=\"'nav-link-profile'\"\r\n            [link-active-class]=\"'nav-link-profile-active'\">\r\n         </lib-nav-links-list>\r\n  </div>\r\n\r\n</div>\r\n\r\n" }]
         }], ctorParameters: () => [{ type: i2$1.AuthService, decorators: [{
                     type: Inject,
                     args: [AuthService]
@@ -3376,12 +3518,12 @@ class ShellHeaderComponent {
             this.avatarName = `${user.profile.given_name.charAt(0)}${user.profile.family_name.charAt(0)}`.toUpperCase();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShellHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showPictureOnHeader: ["show-picture", "showPictureOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border", busy: "busy" }, 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\" [class.busy]=\"busy\">\r\n        <div class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img alt=\"app logo\" 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\" [show-picture]=\"showPictureOnHeader\"></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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "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", "show-picture"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellHeaderComponent, isStandalone: false, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showPictureOnHeader: ["show-picture", "showPictureOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border", busy: "busy" }, 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\" [class.busy]=\"busy\">\r\n        <div class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img alt=\"app logo\" 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\" [show-picture]=\"showPictureOnHeader\"></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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "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", "show-picture"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShellHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", 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\" [class.busy]=\"busy\">\r\n        <div class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img alt=\"app logo\" 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\" [show-picture]=\"showPictureOnHeader\"></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" }]
+            args: [{ selector: 'lib-shell-header', standalone: false, template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div class=\"shell-header-border\">\r\n      <div class=\"shell-header-menu-container\" [class.busy]=\"busy\">\r\n        <div class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img alt=\"app logo\" 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\" [show-picture]=\"showPictureOnHeader\"></lib-user-profile-menu>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\r\n\r\n            <!-- languages dropdown -->\r\n            <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n              <lib-language-selection></lib-language-selection>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <!--\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n        -->\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n" }]
         }], ctorParameters: () => [{ type: i2$1.AuthService, decorators: [{
                     type: Inject,
                     args: [AuthService]
@@ -3430,12 +3572,12 @@ class ShellSidebarHeaderComponent extends ShellHeaderComponent {
         this.config = config;
         this.links = links;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShellSidebarHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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\" [show-picture]=\"showPictureOnHeader\"></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", "show-picture"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellSidebarHeaderComponent, isStandalone: false, 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\" [show-picture]=\"showPictureOnHeader\"></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", "show-picture"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShellSidebarHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", 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\" [show-picture]=\"showPictureOnHeader\"></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" }]
+            args: [{ selector: 'lib-shell-sidebar-header', standalone: false, 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\" [show-picture]=\"showPictureOnHeader\"></lib-user-profile-menu>\r\n                </div>\r\n                <!-- Notifications dropdown -->\r\n                <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n                    <lib-notifications-indicator></lib-notifications-indicator>\r\n                </div>\r\n                <!-- languages dropdown -->\r\n                <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n                    <lib-language-selection></lib-language-selection>\r\n                </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n \r\n" }]
         }], ctorParameters: () => [{ type: i2$1.AuthService, decorators: [{
                     type: Inject,
                     args: [AuthService]
@@ -3464,12 +3606,12 @@ class ShellSidebarLayoutComponent {
         this.showMobileSidebar = !this.showMobileSidebar;
         this._userSettings.set('MobileSideBar', this.showMobileSidebar);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [{ token: UserSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config", sidebarFooterTemplate: "sidebarFooterTemplate", busy: "busy" }, ngImport: i0, template: "<div>\r\n  <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" 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\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Close sidebar</span>\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        <div class=\"sidebar-off-canvas-app-logo-container\">\r\n          <img alt=\"image\" class=\"shell-sidebar-logo\"\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\" aria-hidden=\"true\"></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 alt=\"image\" *ngIf=\"!showMobileSidebar\" class=\"shell-sidebar-logo\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n          <button *ngIf=\"showMobileSidebar\"  type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Toggle sidebar</span>\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        </div>\r\n        <lib-shell-sidebar [sticky]=\"showMobileSidebar\"></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"flex flex-shrink-0 bg-gray-700 p-4\" *ngIf=\"!showMobileSidebar && sidebarFooterTemplate\">\r\n        <div class=\"group block flex-shrink-0\">\r\n          <div class=\"flex items-center\">\r\n            <div>\r\n              <p class=\"text-sm font-medium text-gray-400\">\r\n                <ng-container [ngTemplateOutlet]=\"sidebarFooterTemplate\"></ng-container>\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-expanded]=\"!showMobileSidebar\">\r\n    <div class=\"sidebar-static-menu-sticky-header-container\" [class.busy]=\"busy\" *ngIf=\"config?.showHeader\">\r\n      <button *ngIf=\"showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button-md\" (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\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      <button *ngIf=\"!showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\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      <div class=\"sidebar-static-menu-header-container\" [class.busy]=\"busy\">\r\n        <div class=\"sidebar-static-menu-header-near-container\" [class.busy]=\"busy\">\r\n          <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"showMobileSidebar\">\r\n            <img alt=\"image\" class=\"shell-sidebar-logo\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sidebar-static-menu-header-between-container\" [class.busy]=\"busy\"></div>\r\n        <div class=\"sidebar-static-menu-header-far-container\" [class.busy]=\"busy\">\r\n          <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\r\n                                    [show-alerts]=\"config?.showAlertsOnHeader\"\r\n                                    [show-langs]=\"config?.showLangsOnHeader\"\r\n                                    [busy]=\"busy\"\r\n                                    [show-picture]=\"config?.showPictureOnHeader\">\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\" [class.busy]=\"busy\">\r\n        <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\r\n        <div class=\"shell-content-container-inner\" [class.busy]=\"busy\">\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [{ token: UserSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellSidebarLayoutComponent, isStandalone: false, selector: "lib-shell-sidebar-layout", inputs: { config: "config", sidebarFooterTemplate: "sidebarFooterTemplate", busy: "busy" }, ngImport: i0, template: "<div>\r\n  <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" 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\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Close sidebar</span>\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        <div class=\"sidebar-off-canvas-app-logo-container\">\r\n          <img alt=\"image\" class=\"shell-sidebar-logo\"\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\" aria-hidden=\"true\"></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 alt=\"image\" *ngIf=\"!showMobileSidebar\" class=\"shell-sidebar-logo\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n          <button *ngIf=\"showMobileSidebar\"  type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Toggle sidebar</span>\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        </div>\r\n        <lib-shell-sidebar [sticky]=\"showMobileSidebar\"></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"flex flex-shrink-0 bg-gray-700 p-4\" *ngIf=\"!showMobileSidebar && sidebarFooterTemplate\">\r\n        <div class=\"group block flex-shrink-0\">\r\n          <div class=\"flex items-center\">\r\n            <div>\r\n              <p class=\"text-sm font-medium text-gray-400\">\r\n                <ng-container [ngTemplateOutlet]=\"sidebarFooterTemplate\"></ng-container>\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-expanded]=\"!showMobileSidebar\">\r\n    <div class=\"sidebar-static-menu-sticky-header-container\" [class.busy]=\"busy\" *ngIf=\"config?.showHeader\">\r\n      <button *ngIf=\"showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button-md\" (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\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      <button *ngIf=\"!showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\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      <div class=\"sidebar-static-menu-header-container\" [class.busy]=\"busy\">\r\n        <div class=\"sidebar-static-menu-header-near-container\" [class.busy]=\"busy\">\r\n          <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"showMobileSidebar\">\r\n            <img alt=\"image\" class=\"shell-sidebar-logo\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sidebar-static-menu-header-between-container\" [class.busy]=\"busy\"></div>\r\n        <div class=\"sidebar-static-menu-header-far-container\" [class.busy]=\"busy\">\r\n          <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\r\n                                    [show-alerts]=\"config?.showAlertsOnHeader\"\r\n                                    [show-langs]=\"config?.showLangsOnHeader\"\r\n                                    [busy]=\"busy\"\r\n                                    [show-picture]=\"config?.showPictureOnHeader\">\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\" [class.busy]=\"busy\">\r\n        <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\r\n        <div class=\"shell-content-container-inner\" [class.busy]=\"busy\">\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], 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: "17.3.6", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\r\n  <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" 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\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Close sidebar</span>\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        <div class=\"sidebar-off-canvas-app-logo-container\">\r\n          <img alt=\"image\" class=\"shell-sidebar-logo\"\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\" aria-hidden=\"true\"></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 alt=\"image\" *ngIf=\"!showMobileSidebar\" class=\"shell-sidebar-logo\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n          <button *ngIf=\"showMobileSidebar\"  type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Toggle sidebar</span>\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        </div>\r\n        <lib-shell-sidebar [sticky]=\"showMobileSidebar\"></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"flex flex-shrink-0 bg-gray-700 p-4\" *ngIf=\"!showMobileSidebar && sidebarFooterTemplate\">\r\n        <div class=\"group block flex-shrink-0\">\r\n          <div class=\"flex items-center\">\r\n            <div>\r\n              <p class=\"text-sm font-medium text-gray-400\">\r\n                <ng-container [ngTemplateOutlet]=\"sidebarFooterTemplate\"></ng-container>\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-expanded]=\"!showMobileSidebar\">\r\n    <div class=\"sidebar-static-menu-sticky-header-container\" [class.busy]=\"busy\" *ngIf=\"config?.showHeader\">\r\n      <button *ngIf=\"showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button-md\" (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\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      <button *ngIf=\"!showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\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      <div class=\"sidebar-static-menu-header-container\" [class.busy]=\"busy\">\r\n        <div class=\"sidebar-static-menu-header-near-container\" [class.busy]=\"busy\">\r\n          <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"showMobileSidebar\">\r\n            <img alt=\"image\" class=\"shell-sidebar-logo\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sidebar-static-menu-header-between-container\" [class.busy]=\"busy\"></div>\r\n        <div class=\"sidebar-static-menu-header-far-container\" [class.busy]=\"busy\">\r\n          <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\r\n                                    [show-alerts]=\"config?.showAlertsOnHeader\"\r\n                                    [show-langs]=\"config?.showLangsOnHeader\"\r\n                                    [busy]=\"busy\"\r\n                                    [show-picture]=\"config?.showPictureOnHeader\">\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\" [class.busy]=\"busy\">\r\n        <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\r\n        <div class=\"shell-content-container-inner\" [class.busy]=\"busy\">\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', standalone: false, template: "<div>\r\n  <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" 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\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Close sidebar</span>\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        <div class=\"sidebar-off-canvas-app-logo-container\">\r\n          <img alt=\"image\" class=\"shell-sidebar-logo\"\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\" aria-hidden=\"true\"></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 alt=\"image\" *ngIf=\"!showMobileSidebar\" class=\"shell-sidebar-logo\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n          <button *ngIf=\"showMobileSidebar\"  type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Toggle sidebar</span>\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        </div>\r\n        <lib-shell-sidebar [sticky]=\"showMobileSidebar\"></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"flex flex-shrink-0 bg-gray-700 p-4\" *ngIf=\"!showMobileSidebar && sidebarFooterTemplate\">\r\n        <div class=\"group block flex-shrink-0\">\r\n          <div class=\"flex items-center\">\r\n            <div>\r\n              <p class=\"text-sm font-medium text-gray-400\">\r\n                <ng-container [ngTemplateOutlet]=\"sidebarFooterTemplate\"></ng-container>\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-expanded]=\"!showMobileSidebar\">\r\n    <div class=\"sidebar-static-menu-sticky-header-container\" [class.busy]=\"busy\" *ngIf=\"config?.showHeader\">\r\n      <button *ngIf=\"showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button-md\" (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\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      <button *ngIf=\"!showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\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      <div class=\"sidebar-static-menu-header-container\" [class.busy]=\"busy\">\r\n        <div class=\"sidebar-static-menu-header-near-container\" [class.busy]=\"busy\">\r\n          <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"showMobileSidebar\">\r\n            <img alt=\"image\" class=\"shell-sidebar-logo\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sidebar-static-menu-header-between-container\" [class.busy]=\"busy\"></div>\r\n        <div class=\"sidebar-static-menu-header-far-container\" [class.busy]=\"busy\">\r\n          <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\r\n                                    [show-alerts]=\"config?.showAlertsOnHeader\"\r\n                                    [show-langs]=\"config?.showLangsOnHeader\"\r\n                                    [busy]=\"busy\"\r\n                                    [show-picture]=\"config?.showPictureOnHeader\">\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\" [class.busy]=\"busy\">\r\n        <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\r\n        <div class=\"shell-content-container-inner\" [class.busy]=\"busy\">\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: () => [{ type: UserSettingsService }], propDecorators: { config: [{
                 type: Input
             }], sidebarFooterTemplate: [{
@@ -3482,12 +3624,12 @@ class ShellFooterComponent {
     constructor(links) {
         this.links = links;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShellFooterComponent, deps: [{ token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ShellFooterComponent, selector: "lib-shell-footer", ngImport: i0, template: "<footer class=\"shell-footer-component-container\">\r\n  <div class=\"shell-footer-paddings\">\r\n    <div class=\"shell-footer-component-container-inner\">\r\n      <div class=\"shell-footer-sections-container\">\r\n        <div class=\"shell-footer-section\">\r\n          <img class=\"shell-footer-logo-h\" src=\"assets/images/branding/indice.png\" alt=\"INDICE logo\" />\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"space-y-2\">\r\n              <ng-container *ngFor=\"let link of links.brand | async\">\r\n                <li>\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Legal</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <ng-container *ngFor=\"let link of links.legal | async\">\r\n                <li class=\"mb-2\">\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Follow us</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg  class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"/>\r\n                  </svg>\r\n                  <span> Twitter </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Instagram </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" >\r\n                    <path fill-rule=\"evenodd\" d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Facebook </span>\r\n                </a>\r\n              </li>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"shell-footer-copyright\">\r\n      <!--<nav class=\"flex flex-wrap justify-center space-x-6\">\r\n      <a href=\"#\" class=\"font-normal text-sm hover:text-gray-100 mb-2\">Cookie settings</a>\r\n    </nav>-->\r\n      <p class=\"text-sm text-center sm:text-right\">\r\n        \u00A9 2021 INDICE. All rights reserved.\r\n      </p>\r\n    </div>\r\n  </div>\r\n</footer>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellFooterComponent, deps: [{ token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellFooterComponent, isStandalone: false, selector: "lib-shell-footer", ngImport: i0, template: "<footer class=\"shell-footer-component-container\">\r\n  <div class=\"shell-footer-paddings\">\r\n    <div class=\"shell-footer-component-container-inner\">\r\n      <div class=\"shell-footer-sections-container\">\r\n        <div class=\"shell-footer-section\">\r\n          <img class=\"shell-footer-logo-h\" src=\"assets/images/branding/indice.png\" alt=\"INDICE logo\" />\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"space-y-2\">\r\n              <ng-container *ngFor=\"let link of links.brand | async\">\r\n                <li>\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Legal</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <ng-container *ngFor=\"let link of links.legal | async\">\r\n                <li class=\"mb-2\">\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Follow us</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg  class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"/>\r\n                  </svg>\r\n                  <span> Twitter </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Instagram </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" >\r\n                    <path fill-rule=\"evenodd\" d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Facebook </span>\r\n                </a>\r\n              </li>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"shell-footer-copyright\">\r\n      <!--<nav class=\"flex flex-wrap justify-center space-x-6\">\r\n      <a href=\"#\" class=\"font-normal text-sm hover:text-gray-100 mb-2\">Cookie settings</a>\r\n    </nav>-->\r\n      <p class=\"text-sm text-center sm:text-right\">\r\n        \u00A9 2021 INDICE. All rights reserved.\r\n      </p>\r\n    </div>\r\n  </div>\r\n</footer>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShellFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-footer', template: "<footer class=\"shell-footer-component-container\">\r\n  <div class=\"shell-footer-paddings\">\r\n    <div class=\"shell-footer-component-container-inner\">\r\n      <div class=\"shell-footer-sections-container\">\r\n        <div class=\"shell-footer-section\">\r\n          <img class=\"shell-footer-logo-h\" src=\"assets/images/branding/indice.png\" alt=\"INDICE logo\" />\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"space-y-2\">\r\n              <ng-container *ngFor=\"let link of links.brand | async\">\r\n                <li>\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Legal</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <ng-container *ngFor=\"let link of links.legal | async\">\r\n                <li class=\"mb-2\">\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Follow us</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg  class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"/>\r\n                  </svg>\r\n                  <span> Twitter </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Instagram </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" >\r\n                    <path fill-rule=\"evenodd\" d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Facebook </span>\r\n                </a>\r\n              </li>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"shell-footer-copyright\">\r\n      <!--<nav class=\"flex flex-wrap justify-center space-x-6\">\r\n      <a href=\"#\" class=\"font-normal text-sm hover:text-gray-100 mb-2\">Cookie settings</a>\r\n    </nav>-->\r\n      <p class=\"text-sm text-center sm:text-right\">\r\n        \u00A9 2021 INDICE. All rights reserved.\r\n      </p>\r\n    </div>\r\n  </div>\r\n</footer>\r\n" }]
+            args: [{ selector: 'lib-shell-footer', standalone: false, template: "<footer class=\"shell-footer-component-container\">\r\n  <div class=\"shell-footer-paddings\">\r\n    <div class=\"shell-footer-component-container-inner\">\r\n      <div class=\"shell-footer-sections-container\">\r\n        <div class=\"shell-footer-section\">\r\n          <img class=\"shell-footer-logo-h\" src=\"assets/images/branding/indice.png\" alt=\"INDICE logo\" />\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"space-y-2\">\r\n              <ng-container *ngFor=\"let link of links.brand | async\">\r\n                <li>\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Legal</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <ng-container *ngFor=\"let link of links.legal | async\">\r\n                <li class=\"mb-2\">\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Follow us</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg  class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"/>\r\n                  </svg>\r\n                  <span> Twitter </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Instagram </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" >\r\n                    <path fill-rule=\"evenodd\" d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Facebook </span>\r\n                </a>\r\n              </li>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"shell-footer-copyright\">\r\n      <!--<nav class=\"flex flex-wrap justify-center space-x-6\">\r\n      <a href=\"#\" class=\"font-normal text-sm hover:text-gray-100 mb-2\">Cookie settings</a>\r\n    </nav>-->\r\n      <p class=\"text-sm text-center sm:text-right\">\r\n        \u00A9 2021 INDICE. All rights reserved.\r\n      </p>\r\n    </div>\r\n  </div>\r\n</footer>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_LINKS]
@@ -3498,12 +3640,12 @@ class ShellStackedLayoutComponent {
         this.busy = false;
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShellStackedLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: { config: "config", busy: "busy" }, 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                          [busy]=\"busy\"\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", inputs: ["name"], 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-picture", "show-alerts", "show-langs", "border", "busy"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellStackedLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellStackedLayoutComponent, isStandalone: false, selector: "lib-shell-stacked-layout", inputs: { config: "config", busy: "busy" }, 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                          [busy]=\"busy\"\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", inputs: ["name", "routerOutletData"], 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-picture", "show-alerts", "show-langs", "border", "busy"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
             type: Component,
-            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                          [busy]=\"busy\"\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>" }]
+            args: [{ selector: 'lib-shell-stacked-layout', standalone: false, 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                          [busy]=\"busy\"\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: () => [], propDecorators: { config: [{
                 type: Input
             }], busy: [{
@@ -3570,12 +3712,12 @@ class ShellLayoutComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: i1$1.Router }, { token: ComponentLoaderFactory }, { token: SHELL_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ShellLayoutComponent, selector: "lib-shell-layout", inputs: { busy: "busy", sidebarFooterTemplate: "sidebarFooterTemplate" }, 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)\" class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\" [busy]=\"busy\"></lib-shell-stacked-layout>\r\n  </div>\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\" [busy]=\"busy\"\r\n                              [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\r\n    </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", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config", "sidebarFooterTemplate", "busy"] }, { kind: "component", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config", "busy"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible", "pane-size"], outputs: ["onComplete", "onOpen", "onClose"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: i1$1.Router }, { token: ComponentLoaderFactory }, { token: SHELL_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellLayoutComponent, isStandalone: false, selector: "lib-shell-layout", inputs: { busy: "busy", sidebarFooterTemplate: "sidebarFooterTemplate" }, 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)\" class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\" [busy]=\"busy\"></lib-shell-stacked-layout>\r\n  </div>\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\" [busy]=\"busy\"\r\n                              [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\r\n    </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", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config", "sidebarFooterTemplate", "busy"] }, { kind: "component", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config", "busy"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible", "pane-size"], outputs: ["onComplete", "onOpen", "onClose"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShellLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellLayoutComponent, decorators: [{
             type: Component,
-            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)\" class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\" [busy]=\"busy\"></lib-shell-stacked-layout>\r\n  </div>\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\" [busy]=\"busy\"\r\n                              [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\r\n    </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>" }]
+            args: [{ selector: 'lib-shell-layout', standalone: false, template: "<div [class.hidden]=\"!loaded\" [class.block]=\"loaded\">\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\" [busy]=\"busy\"></lib-shell-stacked-layout>\r\n  </div>\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\" [busy]=\"busy\"\r\n                              [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\r\n    </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: () => [{ type: i1$1.Router }, { type: ComponentLoaderFactory }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SHELL_CONFIG]
@@ -3650,12 +3792,12 @@ class ViewLayoutComponent {
             this.router$.navigate([], { queryParams: { view: action.param }, queryParamsHandling: 'merge', skipLocationChange: false });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ViewLayoutComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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  <div class=\"view-layout-title-container\">\r\n    <div class=\"view-layout-title-container-inner\">\r\n      \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      \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\r\n    </div>\r\n    <div class=\"view-layout-title-container-far\">\r\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\r\n\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container mr-1\">\r\n            <input id=\"text\"\r\n                   #search\r\n                   title=\"search\"\r\n                   class=\"search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\"\r\n                   (onsearch)=\"handleClear($event)\">\r\n            <button type=\"button\"\r\n                    href=\"#\"\r\n                    class=\"search-button\"\r\n                    [title]=\"action.tooltip\"\r\n                    (click)=\"searchActionClick(action, search.value)\">\r\n              <i [class]=\"action.icon\"></i>\r\n            </button>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'switch-view'\">\r\n          <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"p-2 disabled:opacity-75 btn-view-header\" (click)=\"switchViewActionClick(action)\">\r\n            <span class=\"inline-block relative\">\r\n              <i [class]=\"action.icon\"></i><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=\"'router-link'\">\r\n          <button type=\"button\" href=\"#\" class=\"p-2 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\" [ngClass]=\"{'pr-1': action.text}\"></i>\r\n            {{ action.text }}\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\" class=\"p-2 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\" [ngClass]=\"{'pr-1': action.text}\"></i>\r\n            {{ action.text }}\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.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: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ViewLayoutComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ViewLayoutComponent, isStandalone: false, 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  <div class=\"view-layout-title-container\">\r\n    <div class=\"view-layout-title-container-inner\">\r\n      \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      \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\r\n    </div>\r\n    <div class=\"view-layout-title-container-far\">\r\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\r\n\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container mr-1\">\r\n            <input id=\"text\"\r\n                   #search\r\n                   title=\"search\"\r\n                   class=\"search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\"\r\n                   (onsearch)=\"handleClear($event)\">\r\n            <button type=\"button\"\r\n                    href=\"#\"\r\n                    class=\"search-button\"\r\n                    [title]=\"action.tooltip\"\r\n                    (click)=\"searchActionClick(action, search.value)\">\r\n              <i [class]=\"action.icon\"></i>\r\n            </button>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'switch-view'\">\r\n          <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"p-2 disabled:opacity-75 btn-view-header\" (click)=\"switchViewActionClick(action)\">\r\n            <span class=\"inline-block relative\">\r\n              <i [class]=\"action.icon\"></i><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=\"'router-link'\">\r\n          <button type=\"button\" href=\"#\" class=\"p-2 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\" [ngClass]=\"{'pr-1': action.text}\"></i>\r\n            {{ action.text }}\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\" class=\"p-2 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\" [ngClass]=\"{'pr-1': action.text}\"></i>\r\n            {{ action.text }}\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.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: 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: "17.3.6", ngImport: i0, type: ViewLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ViewLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-view-layout', template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\r\n  <div class=\"view-layout-title-container\">\r\n    <div class=\"view-layout-title-container-inner\">\r\n      \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      \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\r\n    </div>\r\n    <div class=\"view-layout-title-container-far\">\r\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\r\n\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container mr-1\">\r\n            <input id=\"text\"\r\n                   #search\r\n                   title=\"search\"\r\n                   class=\"search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\"\r\n                   (onsearch)=\"handleClear($event)\">\r\n            <button type=\"button\"\r\n                    href=\"#\"\r\n                    class=\"search-button\"\r\n                    [title]=\"action.tooltip\"\r\n                    (click)=\"searchActionClick(action, search.value)\">\r\n              <i [class]=\"action.icon\"></i>\r\n            </button>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'switch-view'\">\r\n          <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"p-2 disabled:opacity-75 btn-view-header\" (click)=\"switchViewActionClick(action)\">\r\n            <span class=\"inline-block relative\">\r\n              <i [class]=\"action.icon\"></i><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=\"'router-link'\">\r\n          <button type=\"button\" href=\"#\" class=\"p-2 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\" [ngClass]=\"{'pr-1': action.text}\"></i>\r\n            {{ action.text }}\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\" class=\"p-2 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\" [ngClass]=\"{'pr-1': action.text}\"></i>\r\n            {{ action.text }}\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>" }]
+            args: [{ selector: 'lib-view-layout', standalone: false, template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\r\n  <div class=\"view-layout-title-container\">\r\n    <div class=\"view-layout-title-container-inner\">\r\n      \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      \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\r\n    </div>\r\n    <div class=\"view-layout-title-container-far\">\r\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\r\n\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container mr-1\">\r\n            <input id=\"text\"\r\n                   #search\r\n                   title=\"search\"\r\n                   class=\"search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\"\r\n                   (onsearch)=\"handleClear($event)\">\r\n            <button type=\"button\"\r\n                    href=\"#\"\r\n                    class=\"search-button\"\r\n                    [title]=\"action.tooltip\"\r\n                    (click)=\"searchActionClick(action, search.value)\">\r\n              <i [class]=\"action.icon\"></i>\r\n            </button>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'switch-view'\">\r\n          <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"p-2 disabled:opacity-75 btn-view-header\" (click)=\"switchViewActionClick(action)\">\r\n            <span class=\"inline-block relative\">\r\n              <i [class]=\"action.icon\"></i><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=\"'router-link'\">\r\n          <button type=\"button\" href=\"#\" class=\"p-2 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\" [ngClass]=\"{'pr-1': action.text}\"></i>\r\n            {{ action.text }}\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\" class=\"p-2 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\" [ngClass]=\"{'pr-1': action.text}\"></i>\r\n            {{ action.text }}\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: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }], propDecorators: { searchInput$: [{
                 type: ViewChild,
                 args: ['search']
@@ -3756,12 +3898,12 @@ class ModelViewLayoutComponent {
     navigateLink(link) {
         this.router.navigate([link], { relativeTo: this.route });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ModelViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ModelViewLayoutComponent, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"], icon: "icon", busy: "busy", actions: "actions" }, ngImport: i0, template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\r\n  <main class=\"model-view-container\">\r\n    <div class=\"model-view-container-inner\">\r\n      <aside class=\"model-view-aside\">\r\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n          <div class=\"model-view-aside-header-container\">\r\n            <div class=\"model-view-aside-header-container-inner\">\r\n              <ng-content *ngIf=\"!busy\"></ng-content>\r\n\r\n              <ng-container *ngIf=\"busy\">\r\n                <div class=\"flex items-center p-5\">\r\n                  <div class=\"w-12 h-14 mr-4 rounded-lg bg-gray-200 animate-pulse\"></div>\r\n                  <div>\r\n                    <div class=\"h-6 w-48 bg-gray-200 rounded-lg animate-pulse\"></div>\r\n                    <div class=\"mt-1 h-4 w-40 bg-gray-200 rounded-lg animate-pulse\"></div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n\r\n            </div>\r\n            <!-- menu items -->\r\n            <div class=\"model-view-menu-container-mobile\">\r\n                <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div class=\"model-view-menu-container\">\r\n              <nav class=\"model-view-menu-nav\">\r\n                <div class=\"model-view-menu-item\">\r\n                  <ng-container *ngFor=\"let section of primary\">\r\n                    <div class=\"h-3\" *ngIf=\"section.type === 'separator'\">\r\n                      \r\n                    </div>\r\n                    <a *ngIf=\"section.type !== 'separator'\"\r\n                       href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"model-view-menu-item-far\">\r\n                  <ng-container *ngFor=\"let section of secondary\">\r\n                    <div class=\"h-3\" *ngIf=\"section.type === 'separator'\"></div>\r\n                    <a *ngIf=\"section.type !== 'separator'\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </aside>\r\n      <div class=\"model-view-details-container\">\r\n        <router-outlet></router-outlet>\r\n      </div>\r\n    </div>\r\n  </main>\r\n", 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$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }, { kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModelViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModelViewLayoutComponent, isStandalone: false, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"], icon: "icon", busy: "busy", actions: "actions" }, ngImport: i0, template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\r\n  <main class=\"model-view-container\">\r\n    <div class=\"model-view-container-inner\">\r\n      <aside class=\"model-view-aside\">\r\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n          <div class=\"model-view-aside-header-container\">\r\n            <div class=\"model-view-aside-header-container-inner\">\r\n              <ng-content *ngIf=\"!busy\"></ng-content>\r\n\r\n              <ng-container *ngIf=\"busy\">\r\n                <div class=\"flex items-center p-5\">\r\n                  <div class=\"w-12 h-14 mr-4 rounded-lg bg-gray-200 animate-pulse\"></div>\r\n                  <div>\r\n                    <div class=\"h-6 w-48 bg-gray-200 rounded-lg animate-pulse\"></div>\r\n                    <div class=\"mt-1 h-4 w-40 bg-gray-200 rounded-lg animate-pulse\"></div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n\r\n            </div>\r\n            <!-- menu items -->\r\n            <div class=\"model-view-menu-container-mobile\">\r\n                <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div class=\"model-view-menu-container\">\r\n              <nav class=\"model-view-menu-nav\">\r\n                <div class=\"model-view-menu-item\">\r\n                  <ng-container *ngFor=\"let section of primary\">\r\n                    <div class=\"h-3\" *ngIf=\"section.type === 'separator'\">\r\n                      \r\n                    </div>\r\n                    <a *ngIf=\"section.type !== 'separator'\"\r\n                       href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"model-view-menu-item-far\">\r\n                  <ng-container *ngFor=\"let section of secondary\">\r\n                    <div class=\"h-3\" *ngIf=\"section.type === 'separator'\"></div>\r\n                    <a *ngIf=\"section.type !== 'separator'\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </aside>\r\n      <div class=\"model-view-details-container\">\r\n        <router-outlet></router-outlet>\r\n      </div>\r\n    </div>\r\n  </main>\r\n", 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$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }, { kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ModelViewLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModelViewLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-model-view-layout', template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\r\n  <main class=\"model-view-container\">\r\n    <div class=\"model-view-container-inner\">\r\n      <aside class=\"model-view-aside\">\r\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n          <div class=\"model-view-aside-header-container\">\r\n            <div class=\"model-view-aside-header-container-inner\">\r\n              <ng-content *ngIf=\"!busy\"></ng-content>\r\n\r\n              <ng-container *ngIf=\"busy\">\r\n                <div class=\"flex items-center p-5\">\r\n                  <div class=\"w-12 h-14 mr-4 rounded-lg bg-gray-200 animate-pulse\"></div>\r\n                  <div>\r\n                    <div class=\"h-6 w-48 bg-gray-200 rounded-lg animate-pulse\"></div>\r\n                    <div class=\"mt-1 h-4 w-40 bg-gray-200 rounded-lg animate-pulse\"></div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n\r\n            </div>\r\n            <!-- menu items -->\r\n            <div class=\"model-view-menu-container-mobile\">\r\n                <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div class=\"model-view-menu-container\">\r\n              <nav class=\"model-view-menu-nav\">\r\n                <div class=\"model-view-menu-item\">\r\n                  <ng-container *ngFor=\"let section of primary\">\r\n                    <div class=\"h-3\" *ngIf=\"section.type === 'separator'\">\r\n                      \r\n                    </div>\r\n                    <a *ngIf=\"section.type !== 'separator'\"\r\n                       href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"model-view-menu-item-far\">\r\n                  <ng-container *ngFor=\"let section of secondary\">\r\n                    <div class=\"h-3\" *ngIf=\"section.type === 'separator'\"></div>\r\n                    <a *ngIf=\"section.type !== 'separator'\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </aside>\r\n      <div class=\"model-view-details-container\">\r\n        <router-outlet></router-outlet>\r\n      </div>\r\n    </div>\r\n  </main>\r\n" }]
+            args: [{ selector: 'lib-model-view-layout', standalone: false, template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\r\n  <main class=\"model-view-container\">\r\n    <div class=\"model-view-container-inner\">\r\n      <aside class=\"model-view-aside\">\r\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n          <div class=\"model-view-aside-header-container\">\r\n            <div class=\"model-view-aside-header-container-inner\">\r\n              <ng-content *ngIf=\"!busy\"></ng-content>\r\n\r\n              <ng-container *ngIf=\"busy\">\r\n                <div class=\"flex items-center p-5\">\r\n                  <div class=\"w-12 h-14 mr-4 rounded-lg bg-gray-200 animate-pulse\"></div>\r\n                  <div>\r\n                    <div class=\"h-6 w-48 bg-gray-200 rounded-lg animate-pulse\"></div>\r\n                    <div class=\"mt-1 h-4 w-40 bg-gray-200 rounded-lg animate-pulse\"></div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n\r\n            </div>\r\n            <!-- menu items -->\r\n            <div class=\"model-view-menu-container-mobile\">\r\n                <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div class=\"model-view-menu-container\">\r\n              <nav class=\"model-view-menu-nav\">\r\n                <div class=\"model-view-menu-item\">\r\n                  <ng-container *ngFor=\"let section of primary\">\r\n                    <div class=\"h-3\" *ngIf=\"section.type === 'separator'\">\r\n                      \r\n                    </div>\r\n                    <a *ngIf=\"section.type !== 'separator'\"\r\n                       href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"model-view-menu-item-far\">\r\n                  <ng-container *ngFor=\"let section of secondary\">\r\n                    <div class=\"h-3\" *ngIf=\"section.type === 'separator'\"></div>\r\n                    <a *ngIf=\"section.type !== 'separator'\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </aside>\r\n      <div class=\"model-view-details-container\">\r\n        <router-outlet></router-outlet>\r\n      </div>\r\n    </div>\r\n  </main>\r\n" }]
         }], ctorParameters: () => [{ type: i1.Location }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { title: [{
                 type: Input
             }], primary: [{
@@ -3841,12 +3983,12 @@ class SideViewLayoutComponent {
             this.closeSidePane();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SideViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SideViewLayoutComponent, selector: "lib-side-view-layout", inputs: { title: "title", showActions: "showActions", disabled: "disabled", returnPath: ["return-path", "returnPath"], okLabel: ["ok-label", "okLabel"], okShow: ["ok-show", "okShow"], closeOnOk: ["ok-close-dialog", "closeOnOk"], cancelLabel: ["cancel-label", "cancelLabel"], cancelShow: ["cancel-show", "cancelShow"], forceLocationBack: ["force-location-back", "forceLocationBack"], redirectOnClose: ["redirect-on-close", "redirectOnClose"] }, outputs: { cancel: "cancel", ok: "ok" }, ngImport: i0, template: "<div class=\"side-view-layout-size-box\">\r\n  <div class=\"side-view-layout-container\">\r\n    <div class=\"side-view-layout-container-inner\">\r\n      <div class=\"side-view-layout-header-margins\">\r\n        <div class=\"side-view-layout-header-container\">\r\n          <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\r\n            {{title}}\r\n          </h2>\r\n          <div class=\"side-view-layout-close-button-container\">\r\n            <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\r\n              <span class=\"sr-only\">Close panel</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"side-view-layout-close-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"side-view-layout-content-container\">\r\n        <!-- Replace with your content -->\r\n        <ng-content></ng-content>\r\n        <!-- /End replace -->\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\r\n      <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\r\n        {{cancelLabel}}\r\n      </button>\r\n      <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\r\n        {{okLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SideViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: SideViewLayoutComponent, isStandalone: false, selector: "lib-side-view-layout", inputs: { title: "title", showActions: "showActions", disabled: "disabled", returnPath: ["return-path", "returnPath"], okLabel: ["ok-label", "okLabel"], okShow: ["ok-show", "okShow"], closeOnOk: ["ok-close-dialog", "closeOnOk"], cancelLabel: ["cancel-label", "cancelLabel"], cancelShow: ["cancel-show", "cancelShow"], forceLocationBack: ["force-location-back", "forceLocationBack"], redirectOnClose: ["redirect-on-close", "redirectOnClose"] }, outputs: { cancel: "cancel", ok: "ok" }, ngImport: i0, template: "<div class=\"side-view-layout-size-box\">\r\n  <div class=\"side-view-layout-container\">\r\n    <div class=\"side-view-layout-container-inner\">\r\n      <div class=\"side-view-layout-header-margins\">\r\n        <div class=\"side-view-layout-header-container\">\r\n          <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\r\n            {{title}}\r\n          </h2>\r\n          <div class=\"side-view-layout-close-button-container\">\r\n            <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\r\n              <span class=\"sr-only\">Close panel</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"side-view-layout-close-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"side-view-layout-content-container\">\r\n        <!-- Replace with your content -->\r\n        <ng-content></ng-content>\r\n        <!-- /End replace -->\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\r\n      <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\r\n        {{cancelLabel}}\r\n      </button>\r\n      <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\r\n        {{okLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SideViewLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SideViewLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-side-view-layout', template: "<div class=\"side-view-layout-size-box\">\r\n  <div class=\"side-view-layout-container\">\r\n    <div class=\"side-view-layout-container-inner\">\r\n      <div class=\"side-view-layout-header-margins\">\r\n        <div class=\"side-view-layout-header-container\">\r\n          <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\r\n            {{title}}\r\n          </h2>\r\n          <div class=\"side-view-layout-close-button-container\">\r\n            <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\r\n              <span class=\"sr-only\">Close panel</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"side-view-layout-close-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"side-view-layout-content-container\">\r\n        <!-- Replace with your content -->\r\n        <ng-content></ng-content>\r\n        <!-- /End replace -->\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\r\n      <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\r\n        {{cancelLabel}}\r\n      </button>\r\n      <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\r\n        {{okLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n" }]
+            args: [{ selector: 'lib-side-view-layout', standalone: false, template: "<div class=\"side-view-layout-size-box\">\r\n  <div class=\"side-view-layout-container\">\r\n    <div class=\"side-view-layout-container-inner\">\r\n      <div class=\"side-view-layout-header-margins\">\r\n        <div class=\"side-view-layout-header-container\">\r\n          <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\r\n            {{title}}\r\n          </h2>\r\n          <div class=\"side-view-layout-close-button-container\">\r\n            <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\r\n              <span class=\"sr-only\">Close panel</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"side-view-layout-close-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"side-view-layout-content-container\">\r\n        <!-- Replace with your content -->\r\n        <ng-content></ng-content>\r\n        <!-- /End replace -->\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\r\n      <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\r\n        {{cancelLabel}}\r\n      </button>\r\n      <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\r\n        {{okLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n" }]
         }], ctorParameters: () => [{ type: i1.Location }, { type: i1$1.Router }], propDecorators: { title: [{
                 type: Input
             }], showActions: [{
@@ -3931,12 +4073,12 @@ class FormLayoutComponent {
             this.router$.navigate([action.link]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: FormLayoutComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: FormLayoutComponent, selector: "lib-form-layout", inputs: { title: "title", image: "image", icon: "icon", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], actions: "actions", subTitle: ["sub-title", "subTitle"] }, outputs: { onAction: "onAction", onSearch: "onSearch", onComplete: "onComplete" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<div class=\"form-layout-container\">\r\n  <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\r\n    <div class=\"flex\">\r\n      <div class=\"mr-4 flex-shrink-0\" *ngIf=\"image\">\r\n        <img alt=\"form tab image\" class=\"form-header-image\" [src]=\"image\">\r\n      </div>\r\n      <div class=\"mr-4 flex-shrink-0\" *ngIf=\"icon\">\r\n        <i [class]=\"icon\" class=\"form-header-icon\"></i>\r\n      </div>\r\n      <div class=\"form-header-inner\">\r\n        <h3 class=\"form-title\">{{ title }}</h3>\r\n        <p class=\"form-subtitle\">{{ subTitle }}</p>\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"form-header-actions\">\r\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\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\"\r\n                   #search\r\n                   class=\"form-search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\">\r\n          </div>\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"btn-form-view-header-search\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"form-content-container\">\r\n    <div [ngClass]=\"{'form-content-container-inner': actions}\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\r\n    <router-outlet name=\"formRightPane\"\r\n                   (activate)=\"formPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"formPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n</div>\r\n", 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: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible", "pane-size"], outputs: ["onComplete", "onOpen", "onClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FormLayoutComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: FormLayoutComponent, isStandalone: false, selector: "lib-form-layout", inputs: { title: "title", image: "image", icon: "icon", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], actions: "actions", subTitle: ["sub-title", "subTitle"] }, outputs: { onAction: "onAction", onSearch: "onSearch", onComplete: "onComplete" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<div class=\"form-layout-container\">\r\n  <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\r\n    <div class=\"flex\">\r\n      <div class=\"mr-4 flex-shrink-0\" *ngIf=\"image\">\r\n        <img alt=\"form tab image\" class=\"form-header-image\" [src]=\"image\">\r\n      </div>\r\n      <div class=\"mr-4 flex-shrink-0\" *ngIf=\"icon\">\r\n        <i [class]=\"icon\" class=\"form-header-icon\"></i>\r\n      </div>\r\n      <div class=\"form-header-inner\">\r\n        <h3 class=\"form-title\">{{ title }}</h3>\r\n        <p class=\"form-subtitle\">{{ subTitle }}</p>\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"form-header-actions\">\r\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\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\"\r\n                   #search\r\n                   class=\"form-search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\">\r\n          </div>\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"btn-form-view-header-search\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"form-content-container\">\r\n    <div [ngClass]=\"{'form-content-container-inner': actions}\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\r\n    <router-outlet name=\"formRightPane\"\r\n                   (activate)=\"formPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"formPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n</div>\r\n", 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: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible", "pane-size"], outputs: ["onComplete", "onOpen", "onClose"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: FormLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FormLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-layout', template: "<div class=\"form-layout-container\">\r\n  <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\r\n    <div class=\"flex\">\r\n      <div class=\"mr-4 flex-shrink-0\" *ngIf=\"image\">\r\n        <img alt=\"form tab image\" class=\"form-header-image\" [src]=\"image\">\r\n      </div>\r\n      <div class=\"mr-4 flex-shrink-0\" *ngIf=\"icon\">\r\n        <i [class]=\"icon\" class=\"form-header-icon\"></i>\r\n      </div>\r\n      <div class=\"form-header-inner\">\r\n        <h3 class=\"form-title\">{{ title }}</h3>\r\n        <p class=\"form-subtitle\">{{ subTitle }}</p>\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"form-header-actions\">\r\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\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\"\r\n                   #search\r\n                   class=\"form-search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\">\r\n          </div>\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"btn-form-view-header-search\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"form-content-container\">\r\n    <div [ngClass]=\"{'form-content-container-inner': actions}\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\r\n    <router-outlet name=\"formRightPane\"\r\n                   (activate)=\"formPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"formPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-form-layout', standalone: false, template: "<div class=\"form-layout-container\">\r\n  <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\r\n    <div class=\"flex\">\r\n      <div class=\"mr-4 flex-shrink-0\" *ngIf=\"image\">\r\n        <img alt=\"form tab image\" class=\"form-header-image\" [src]=\"image\">\r\n      </div>\r\n      <div class=\"mr-4 flex-shrink-0\" *ngIf=\"icon\">\r\n        <i [class]=\"icon\" class=\"form-header-icon\"></i>\r\n      </div>\r\n      <div class=\"form-header-inner\">\r\n        <h3 class=\"form-title\">{{ title }}</h3>\r\n        <p class=\"form-subtitle\">{{ subTitle }}</p>\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"form-header-actions\">\r\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\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\"\r\n                   #search\r\n                   class=\"form-search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\">\r\n          </div>\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"btn-form-view-header-search\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"form-content-container\">\r\n    <div [ngClass]=\"{'form-content-container-inner': actions}\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\r\n    <router-outlet name=\"formRightPane\"\r\n                   (activate)=\"formPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"formPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { searchInput$: [{
                 type: ViewChild,
                 args: ['search']
@@ -3975,12 +4117,12 @@ class AuthCallbackComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AuthCallbackComponent, deps: [{ token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: AuthCallbackComponent, selector: "lib-auth-callback", ngImport: i0, template: "<lib-view-layout [title]=\"status\" [busy]=\"true\"></lib-view-layout>", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AuthCallbackComponent, deps: [{ token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: AuthCallbackComponent, isStandalone: false, selector: "lib-auth-callback", ngImport: i0, template: "<lib-view-layout [title]=\"status\" [busy]=\"true\"></lib-view-layout>", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AuthCallbackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AuthCallbackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-auth-callback', template: "<lib-view-layout [title]=\"status\" [busy]=\"true\"></lib-view-layout>" }]
+            args: [{ selector: 'lib-auth-callback', standalone: false, template: "<lib-view-layout [title]=\"status\" [busy]=\"true\"></lib-view-layout>" }]
         }], ctorParameters: () => [{ type: i2$1.AuthService, decorators: [{
                     type: Inject,
                     args: [AuthService]
@@ -3998,14 +4140,15 @@ class AuthRenewComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AuthRenewComponent, deps: [{ token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: AuthRenewComponent, selector: "lib-auth-renew", ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AuthRenewComponent, deps: [{ token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: AuthRenewComponent, isStandalone: false, selector: "lib-auth-renew", ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AuthRenewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AuthRenewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-auth-renew',
-                    template: ''
+                    template: '',
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i2$1.AuthService, decorators: [{
                     type: Inject,
@@ -4024,12 +4167,12 @@ class LoggedOutComponent {
             this.finished = true;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LoggedOutComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: LoggedOutComponent, selector: "lib-logged-out", ngImport: i0, template: "<lib-view-layout title=\"\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03C0\u03BF\u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF \u03BC\u03B5 \u03B5\u03C0\u03B9\u03C4\u03C5\u03C7\u03AF\u03B1!\"></lib-view-layout>", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LoggedOutComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LoggedOutComponent, isStandalone: false, selector: "lib-logged-out", ngImport: i0, template: "<lib-view-layout title=\"\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03C0\u03BF\u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF \u03BC\u03B5 \u03B5\u03C0\u03B9\u03C4\u03C5\u03C7\u03AF\u03B1!\"></lib-view-layout>", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LoggedOutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LoggedOutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-logged-out', template: "<lib-view-layout title=\"\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03C0\u03BF\u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF \u03BC\u03B5 \u03B5\u03C0\u03B9\u03C4\u03C5\u03C7\u03AF\u03B1!\"></lib-view-layout>" }]
+            args: [{ selector: 'lib-logged-out', standalone: false, template: "<lib-view-layout title=\"\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03C0\u03BF\u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF \u03BC\u03B5 \u03B5\u03C0\u03B9\u03C4\u03C5\u03C7\u03AF\u03B1!\"></lib-view-layout>" }]
         }], ctorParameters: () => [{ type: i2$1.AuthService, decorators: [{
                     type: Inject,
                     args: [AuthService]
@@ -4041,35 +4184,35 @@ class ErrorComponent {
     }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ErrorComponent, selector: "lib-error", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"500 - \u03C0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03C4\u03B7\u03BA\u03B5 \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">500</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03C3\u03C6\u03AC\u03BB\u03BC\u03B1, \u03BA\u03B1\u03C4\u03B9 \u03B4\u03B5\u03BD \u03C0\u03AE\u03B3\u03B5 \u03BA\u03B1\u03BB\u03AC...!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ErrorComponent, isStandalone: false, selector: "lib-error", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"500 - \u03C0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03C4\u03B7\u03BA\u03B5 \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">500</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03C3\u03C6\u03AC\u03BB\u03BC\u03B1, \u03BA\u03B1\u03C4\u03B9 \u03B4\u03B5\u03BD \u03C0\u03AE\u03B3\u03B5 \u03BA\u03B1\u03BB\u03AC...!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-error', template: "<lib-view-layout [show-header]=\"false\" title=\"500 - \u03C0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03C4\u03B7\u03BA\u03B5 \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">500</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03C3\u03C6\u03AC\u03BB\u03BC\u03B1, \u03BA\u03B1\u03C4\u03B9 \u03B4\u03B5\u03BD \u03C0\u03AE\u03B3\u03B5 \u03BA\u03B1\u03BB\u03AC...!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n" }]
+            args: [{ selector: 'lib-error', standalone: false, template: "<lib-view-layout [show-header]=\"false\" title=\"500 - \u03C0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03C4\u03B7\u03BA\u03B5 \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">500</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03C3\u03C6\u03AC\u03BB\u03BC\u03B1, \u03BA\u03B1\u03C4\u03B9 \u03B4\u03B5\u03BD \u03C0\u03AE\u03B3\u03B5 \u03BA\u03B1\u03BB\u03AC...!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n" }]
         }] });
 class PageNotFoundComponent {
     constructor() { }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: PageNotFoundComponent, selector: "lib-page-not-found", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\r\n  <div class=\"text-gray-900\">\r\n    <div class=\"max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold sm:text-4xl\">\r\n        <span class=\"block\">404</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-800\">\u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5 \u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C0\u03BF\u03C5 \u03B6\u03B7\u03C4\u03AE\u03C3\u03B1\u03C4\u03B5!</p>\r\n      <a href=\"/\"\r\n         class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: PageNotFoundComponent, isStandalone: false, selector: "lib-page-not-found", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\r\n  <div class=\"text-gray-900\">\r\n    <div class=\"max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold sm:text-4xl\">\r\n        <span class=\"block\">404</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-800\">\u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5 \u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C0\u03BF\u03C5 \u03B6\u03B7\u03C4\u03AE\u03C3\u03B1\u03C4\u03B5!</p>\r\n      <a href=\"/\"\r\n         class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: PageNotFoundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PageNotFoundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-page-not-found', template: "<lib-view-layout [show-header]=\"false\" title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\r\n  <div class=\"text-gray-900\">\r\n    <div class=\"max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold sm:text-4xl\">\r\n        <span class=\"block\">404</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-800\">\u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5 \u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C0\u03BF\u03C5 \u03B6\u03B7\u03C4\u03AE\u03C3\u03B1\u03C4\u03B5!</p>\r\n      <a href=\"/\"\r\n         class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n" }]
+            args: [{ selector: 'lib-page-not-found', standalone: false, template: "<lib-view-layout [show-header]=\"false\" title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\r\n  <div class=\"text-gray-900\">\r\n    <div class=\"max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold sm:text-4xl\">\r\n        <span class=\"block\">404</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-800\">\u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5 \u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C0\u03BF\u03C5 \u03B6\u03B7\u03C4\u03AE\u03C3\u03B1\u03C4\u03B5!</p>\r\n      <a href=\"/\"\r\n         class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n" }]
         }], ctorParameters: () => [] });
 class UnauthorizedComponent {
     constructor() { }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: UnauthorizedComponent, selector: "lib-unauthorized", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"401 - \u03B4\u03B5\u03BD \u03B5\u03C0\u03B9\u03C4\u03C1\u03AD\u03C0\u03B5\u03C4\u03B1\u03B9 \u03B7 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">401</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03B4\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03BA\u03B1\u03C4\u03AC\u03BB\u03BB\u03B7\u03BB\u03B1 \u03B4\u03B9\u03BA\u03B1\u03B9\u03CE\u03BC\u03B1\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7\u03C2!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n  </lib-view-layout>\r\n\r\n\r\n", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: UnauthorizedComponent, isStandalone: false, selector: "lib-unauthorized", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"401 - \u03B4\u03B5\u03BD \u03B5\u03C0\u03B9\u03C4\u03C1\u03AD\u03C0\u03B5\u03C4\u03B1\u03B9 \u03B7 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">401</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03B4\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03BA\u03B1\u03C4\u03AC\u03BB\u03BB\u03B7\u03BB\u03B1 \u03B4\u03B9\u03BA\u03B1\u03B9\u03CE\u03BC\u03B1\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7\u03C2!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n  </lib-view-layout>\r\n\r\n\r\n", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: UnauthorizedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UnauthorizedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-unauthorized', template: "<lib-view-layout [show-header]=\"false\" title=\"401 - \u03B4\u03B5\u03BD \u03B5\u03C0\u03B9\u03C4\u03C1\u03AD\u03C0\u03B5\u03C4\u03B1\u03B9 \u03B7 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">401</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03B4\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03BA\u03B1\u03C4\u03AC\u03BB\u03BB\u03B7\u03BB\u03B1 \u03B4\u03B9\u03BA\u03B1\u03B9\u03CE\u03BC\u03B1\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7\u03C2!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n  </lib-view-layout>\r\n\r\n\r\n" }]
+            args: [{ selector: 'lib-unauthorized', standalone: false, template: "<lib-view-layout [show-header]=\"false\" title=\"401 - \u03B4\u03B5\u03BD \u03B5\u03C0\u03B9\u03C4\u03C1\u03AD\u03C0\u03B5\u03C4\u03B1\u03B9 \u03B7 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">401</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03B4\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03BA\u03B1\u03C4\u03AC\u03BB\u03BB\u03B7\u03BB\u03B1 \u03B4\u03B9\u03BA\u03B1\u03B9\u03CE\u03BC\u03B1\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7\u03C2!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n  </lib-view-layout>\r\n\r\n\r\n" }]
         }], ctorParameters: () => [] });
 class AddressPipe {
@@ -4080,14 +4223,15 @@ class AddressPipe {
         // tslint:disable-next-line:no-non-null-assertion
         return `${value.street || ''}${value.streetNumber ? ' ' + value.streetNumber : ''}${value.city ? ', ' + value.city : ''}${+value.postalCode ? ', ' + +value.postalCode : ''}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AddressPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: AddressPipe, name: "address", pure: false }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AddressPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: AddressPipe, isStandalone: false, name: "address", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AddressPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AddressPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'address',
-                    pure: false
+                    pure: false,
+                    standalone: false
                 }]
         }] });
@@ -4142,14 +4286,15 @@ class DurationFormatPipe {
         }
         return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DurationFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: DurationFormatPipe, name: "durationFormat", pure: false }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DurationFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: DurationFormatPipe, isStandalone: false, name: "durationFormat", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DurationFormatPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DurationFormatPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'durationFormat',
-                    pure: false
+                    pure: false,
+                    standalone: false
                 }]
         }] });
@@ -4183,14 +4328,15 @@ class ShortNumberPipe {
         }
         return (isNegative ? '-' : '') + abs + key;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShortNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: ShortNumberPipe, name: "shortNumber", pure: false }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShortNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: ShortNumberPipe, isStandalone: false, name: "shortNumber", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ShortNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShortNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'shortNumber',
-                    pure: false
+                    pure: false,
+                    standalone: false
                 }]
         }] });
@@ -4411,12 +4557,15 @@ class BaseListComponent {
         this.setRouteParams();
         this.load();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: BaseListComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: BaseListComponent, selector: "ng-component", inputs: { autoLoad: ["auto-load", "autoLoad"] }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BaseListComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: BaseListComponent, isStandalone: false, selector: "ng-component", inputs: { autoLoad: ["auto-load", "autoLoad"] }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: BaseListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BaseListComponent, decorators: [{
             type: Component,
-            args: [{ template: '' }]
+            args: [{
+                    template: '',
+                    standalone: false
+                }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }], propDecorators: { autoLoad: [{
                 type: Input,
                 args: ['auto-load']
@@ -4459,10 +4608,10 @@ class ModalBackdropComponent {
     reflow(element) {
         ((bs) => bs)(element.offsetHeight);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ModalBackdropComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ModalBackdropComponent, selector: "lib-modal-backdrop", host: { classAttribute: "modal-backdrop" }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalBackdropComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModalBackdropComponent, isStandalone: false, selector: "lib-modal-backdrop", host: { classAttribute: "modal-backdrop" }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ModalBackdropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalBackdropComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-modal-backdrop',
@@ -4471,6 +4620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                     host: {
                         class: cssClassNames.backdrop,
                     },
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
@@ -4483,10 +4633,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
  * @public
  */
 class ModalOptions {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ModalOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ModalOptions }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalOptions }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ModalOptions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalOptions, decorators: [{
             type: Injectable
         }] });
 /**
@@ -4586,8 +4736,8 @@ class ModalContainerComponent {
             this.isModalHiding = false;
         }, this.animationsEnabled ? animationTime.modal : 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ModalContainerComponent, deps: [{ token: ModalOptions }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ModalContainerComponent, selector: "lib-modal-container", host: { attributes: { "role": "dialog", "tabindex": "-1" }, listeners: { "mousedown": "onClickStarted($event)", "click": "onClickStop($event)", "window:popstate": "onPopState()", "window:keydown.esc": "onEsc($event)" }, properties: { "attr.aria-modal": "true", "attr.aria-labelledby": "config.ariaLabelledBy", "attr.aria-describedby": "config.ariaDescribedby" }, classAttribute: "modal" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalContainerComponent, deps: [{ token: ModalOptions }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModalContainerComponent, isStandalone: false, selector: "lib-modal-container", host: { attributes: { "role": "dialog", "tabindex": "-1" }, listeners: { "mousedown": "onClickStarted($event)", "click": "onClickStop($event)", "window:popstate": "onPopState()", "window:keydown.esc": "onEsc($event)" }, properties: { "attr.aria-modal": "true", "attr.aria-labelledby": "config.ariaLabelledBy", "attr.aria-describedby": "config.ariaDescribedby" }, classAttribute: "modal" }, ngImport: i0, template: `
     <div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
       <div class="modal-content">
         <ng-content></ng-content>
@@ -4595,7 +4745,7 @@ class ModalContainerComponent {
     </div>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ModalContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-modal-container',
@@ -4614,6 +4764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                         '[attr.aria-labelledby]': 'config.ariaLabelledBy',
                         '[attr.aria-describedby]': 'config.ariaDescribedby',
                     },
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: ModalOptions }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { onClickStarted: [{
                 type: HostListener,
@@ -4647,10 +4798,10 @@ class Modal {
          */
         this.setClass = () => void 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: Modal }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: Modal }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: Modal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: Modal, decorators: [{
             type: Injectable
         }] });
@@ -4848,10 +4999,10 @@ class ModalService {
             to.next(data);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ModalService, deps: [{ token: ComponentLoaderFactory }, { token: i0.RendererFactory2 }, { token: DOCUMENT }, { token: MODAL_CONFIG_DEFAULT_OVERRIDE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ModalService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalService, deps: [{ token: ComponentLoaderFactory }, { token: i0.RendererFactory2 }, { token: DOCUMENT }, { token: MODAL_CONFIG_DEFAULT_OVERRIDE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: ComponentLoaderFactory }, { type: i0.RendererFactory2 }, { type: undefined, decorators: [{
                     type: Inject,
@@ -4874,8 +5025,8 @@ class IndiceComponentsModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IndiceComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: IndiceComponentsModule, declarations: [AddressPipe,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IndiceComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: IndiceComponentsModule, declarations: [AddressPipe,
             AdvancedSearchComponent,
             AuthCallbackComponent,
             AuthRenewComponent,
@@ -4884,6 +5035,7 @@ class IndiceComponentsModule {
             ClickOutsideDirective,
             CollapsiblePanelComponent,
             ComboboxComponent,
+            EnhancedComboboxComponent,
             DatepickerComponent,
             DropDownMenuComponent,
             DurationFormatPipe,
@@ -4945,6 +5097,7 @@ class IndiceComponentsModule {
             ClickOutsideDirective,
             CollapsiblePanelComponent,
             ComboboxComponent,
+            EnhancedComboboxComponent,
             DatepickerComponent,
             DropDownMenuComponent,
             DurationFormatPipe,
@@ -4986,12 +5139,12 @@ class IndiceComponentsModule {
             ContentTileHeaderComponent,
             StatsGridComponent,
             ProgressBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IndiceComponentsModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IndiceComponentsModule, imports: [CommonModule,
             RouterModule,
             IndiceAuthModule,
             FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IndiceComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IndiceComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -5004,6 +5157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                         ClickOutsideDirective,
                         CollapsiblePanelComponent,
                         ComboboxComponent,
+                        EnhancedComboboxComponent,
                         DatepickerComponent,
                         DropDownMenuComponent,
                         DurationFormatPipe,
@@ -5071,6 +5225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                         ClickOutsideDirective,
                         CollapsiblePanelComponent,
                         ComboboxComponent,
+                        EnhancedComboboxComponent,
                         DatepickerComponent,
                         DropDownMenuComponent,
                         DurationFormatPipe,
@@ -5124,5 +5279,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AdvancedSearchComponent, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, ContentTileComponent, ContentTileHeaderComponent, ContentTileItemComponent, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FilterClause, 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, NavLinkSeparator, NavLinksListComponent, NotificationNavLink, OperatorOptions, Operators, PageNotFoundComponent, PagerComponent, PagerPosition, ProgressBarComponent, QueryParameters, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, ShortNumberPipe, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StatsGridComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleButtonComponent, ToggleButtonsListComponent, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
+export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AdvancedSearchComponent, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, ContentTileComponent, ContentTileHeaderComponent, ContentTileItemComponent, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, EnhancedComboboxComponent, ErrorComponent, ExternalNavLink, FilterClause, 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, NavLinkSeparator, NavLinksListComponent, NotificationNavLink, OperatorOptions, Operators, PageNotFoundComponent, PagerComponent, PagerPosition, ProgressBarComponent, QueryParameters, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, ShortNumberPipe, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StatsGridComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleButtonComponent, ToggleButtonsListComponent, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
 //# sourceMappingURL=indice-ng-components.mjs.map