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

package/fesm2020/indice-ng-components.mjs

@@ -3,7 +3,7 @@ import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component,
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, getLocaleMonthNames, FormStyle, TranslationWidth, getLocaleDayNames, DOCUMENT, CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/router';
-import { Router, NavigationStart, ActivatedRoute, ActivationStart, RouterModule } from '@angular/router';
+import { Router, ActivatedRoute, NavigationStart, ActivationStart, RouterModule } from '@angular/router';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BehaviorSubject, Subject, of, fromEvent } from 'rxjs';
 import { filter, debounceTime, distinctUntilChanged, share, map } from 'rxjs/operators';
@@ -1414,14 +1414,18 @@ class NavLinksListComponent {
         // tslint:disable-next-line:no-input-rename
         this.showIcons = false;
     }
+    ngOnDestroy() {
+        this.fragmentSub$?.unsubscribe();
+    }
     ngOnInit() {
+        this.fragmentSub$ = this.activeFragment?.subscribe(fragment => this.fragmentValue = fragment);
     }
 }
 NavLinksListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavLinksListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: { links: "links", activeFragment: ["active-fragment", "activeFragment"], navLinkClass: ["link-class", "navLinkClass"], navLinkActiveClass: ["link-active-class", "navLinkActiveClass"], containerClass: ["container-class", "containerClass"], showIcons: ["show-icons", "showIcons"] }, ngImport: i0, template: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n  <div class=\"nav-link-list-container-inner\">\r\n    <ng-container *ngFor=\"let link of links | async\">\r\n      <ng-container [ngSwitch]=\"link.type\">\r\n        <a *ngSwitchCase=\"'router'\"\r\n          href=\"#\"\r\n          [routerLink]=\"[link.path]\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'external'\"\r\n          [href]=\"link.path\"\r\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'fragment'\"\r\n          routerLink=\".\"\r\n          [fragment]=\"link.path\"\r\n          [class.active]=\"(activeFragment | async) === link.path\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+NavLinksListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: { links: "links", activeFragment: ["active-fragment", "activeFragment"], navLinkClass: ["link-class", "navLinkClass"], navLinkActiveClass: ["link-active-class", "navLinkActiveClass"], containerClass: ["container-class", "containerClass"], showIcons: ["show-icons", "showIcons"] }, ngImport: i0, template: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n  <div class=\"nav-link-list-container-inner\">\r\n    <ng-container *ngFor=\"let link of links | async\">\r\n      <ng-container [ngSwitch]=\"link.type\">\r\n        <a *ngSwitchCase=\"'router'\"\r\n          href=\"#\"\r\n          [routerLink]=\"[link.path]\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'external'\"\r\n          [href]=\"link.path\"\r\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'fragment'\"\r\n          routerLink=\".\"\r\n          [fragment]=\"link.path\"\r\n          [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavLinksListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-nav-links-list', template: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n  <div class=\"nav-link-list-container-inner\">\r\n    <ng-container *ngFor=\"let link of links | async\">\r\n      <ng-container [ngSwitch]=\"link.type\">\r\n        <a *ngSwitchCase=\"'router'\"\r\n          href=\"#\"\r\n          [routerLink]=\"[link.path]\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'external'\"\r\n          [href]=\"link.path\"\r\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'fragment'\"\r\n          routerLink=\".\"\r\n          [fragment]=\"link.path\"\r\n          [class.active]=\"(activeFragment | async) === link.path\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-nav-links-list', template: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n  <div class=\"nav-link-list-container-inner\">\r\n    <ng-container *ngFor=\"let link of links | async\">\r\n      <ng-container [ngSwitch]=\"link.type\">\r\n        <a *ngSwitchCase=\"'router'\"\r\n          href=\"#\"\r\n          [routerLink]=\"[link.path]\"\r\n          [routerLinkActive]=\"navLinkActiveClass\"\r\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'external'\"\r\n          [href]=\"link.path\"\r\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n          [class]=\"navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n        <a *ngSwitchCase=\"'fragment'\"\r\n          routerLink=\".\"\r\n          [fragment]=\"link.path\"\r\n          [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\">\r\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n        </a>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { links: [{
                 type: Input
             }], activeFragment: [{
@@ -1686,11 +1690,11 @@ class LibStepComponent {
     }
     /** Indicates the index of the step. */
     get index() {
-        return this._stepper?.steps.toArray().indexOf(this);
+        return this._stepper ? this._stepper.steps.toArray().indexOf(this) : -1;
     }
     /** Indicates whether this step is the last step. */
     get isLast() {
-        return this._stepper?.steps.length - 1 === this.index;
+        return this._stepper ? this._stepper.steps.length - 1 === this.index : false;
     }
     /** Indicates whether you can navigate to the step or not. */
     get isValid() {
@@ -1762,11 +1766,15 @@ var StepperType;
 })(StepperType || (StepperType = {}));
 
 class LibStepperComponent {
-    constructor() {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
         // Private properties.
         this._currentStepIndex = 0;
+        this._isCompleted = false;
         /** Emmited when a step change occurs. */
         this.stepChanged = new EventEmitter();
+        /** Emmited when the stepper navigates away from the final step. Only emits once. */
+        this.completed = new EventEmitter();
         /** Indicates whether each step has to be validated before proceeding to the next. */
         this.linear = false;
         /** The type of the stepper. */
@@ -1782,19 +1790,36 @@ class LibStepperComponent {
     get currentStepIndex() {
         return this._currentStepIndex;
     }
+    /** Indicates whether stepper can go a step back. */
+    get canGoBack() {
+        return this._currentStepIndex > 0;
+    }
+    /** Indicates whether stepper can go a step forward. */
+    get canGoForward() {
+        return this._currentStepIndex < this.steps?.length - 1;
+    }
+    /** Indicates whether  */
+    get isCompleted() {
+        return this._isCompleted;
+    }
     ngOnInit() { }
+    ngAfterViewChecked() {
+        this._changeDetectorRef.detectChanges();
+    }
     /** Proceeds to the next step, if any. */
     goToNextStep() {
-        // Cannot go forward.
-        if (this._currentStepIndex === this.steps.length - 1) {
+        if (this.currentStep?.isLast && !this._isCompleted) {
+            this._isCompleted = true;
+            this.completed.emit();
+        }
+        if (!this.canGoForward) {
             return;
         }
         this.updateCurrentStepIndex(this._currentStepIndex + 1);
     }
     /** Proceeds to the previous step, if any. */
     goToPreviousStep() {
-        // Cannot go back.
-        if (this._currentStepIndex === 0) {
+        if (!this.canGoBack) {
             return;
         }
         this.updateCurrentStepIndex(this._currentStepIndex - 1);
@@ -1820,8 +1845,8 @@ class LibStepperComponent {
         this._currentStepIndex = newIndex;
     }
 }
-LibStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LibStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged" }, providers: [
+LibStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+LibStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged", completed: "completed" }, providers: [
         { provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
     ], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\r\n    <!-- Bullets -->\r\n    <nav class=\"stepper-bullets-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\r\n        <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n        <ol role=\"list\" class=\"stepper-bullets-ol\">\r\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                <!-- Completed Step -->\r\n                <div class=\"stepper-bullets-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"stepper-bullets-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"stepper-bullets-active-step-level1\" aria-hidden=\"true\">\r\n                        <span class=\"stepper-bullets-active-step-level1\"></span>\r\n                    </span>\r\n                    <span class=\"stepper-bullets-active-step-bullet\" aria-hidden=\"true\"></span>\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div href=\"#\" class=\"stepper-bullets-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Bullets & Text -->\r\n    <div class=\"stepper-bullets-and-text-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n        <nav aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"stepper-bullets-and-text-ol\">\r\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                    <!-- Complete Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <span class=\"stepper-bullets-and-text-completed-step\">\r\n                            <span class=\"stepper-bullets-and-text-completed-step-level1\">\r\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                            <span class=\"stepper-bullets-and-text-completed-step-container\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"stepper-bullets-and-text-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                        <span class=\"stepper-bullets-and-text-active-step-level1\" aria-hidden=\"true\">\r\n                            <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\r\n                            <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\r\n                        </span>\r\n                        <span class=\"stepper-bullets-and-text-active-step-container\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"stepper-bullets-and-text-upcoming-step\">\r\n                            <div class=\"stepper-bullets-and-text-upcoming-step-level1\" aria-hidden=\"true\">\r\n                                <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\r\n                            </div>\r\n                            <p class=\"stepper-bullets-and-text-upcoming-step-container\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Circles -->\r\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\r\n        <ol class=\"flex items-center\" role=\"list\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\r\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                        </svg>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\r\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\r\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Circles With Text -->\r\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n        <ol role=\"list\" class=\"overflow-hidden\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\r\n                <!-- Complete Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\r\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div href=\"#\" class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\r\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n                <!-- Completed step -->\r\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                            </svg>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Active step -->\r\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\r\n                    </span>\r\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming step -->\r\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Arrow separator for lg screens and up -->\r\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\r\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels With Border -->\r\n    <div class=\"panels-with-border-container\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n        <nav class=\"panels-with-border-nav\" aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"panels-with-border-ol\">\r\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"panels-with-border-li\">\r\n                    <!-- Completed Step -->\r\n                    <div class=\"panels-with-border-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-completed-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-completed-step-level2\">\r\n                                <span class=\"panels-with-border-completed-step-level21\">\r\n                                    <span class=\"panels-with-border-completed-step-level211\">\r\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-completed-step-level22\">\r\n                                    <span class=\"panels-with-border-completed-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-completed-step-level222\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"panels-with-border-active-step\" *ngIf=\"step.state === StepState.Active\">\r\n                        <div aria-current=\"step\">\r\n                            <span class=\"panels-with-border-active-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-active-step-level2\">\r\n                                <span class=\"panels-with-border-active-step-level21\">\r\n                                    <span class=\"panels-with-border-active-step-level211\">\r\n                                        <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-active-step-level22\">\r\n                                    <span class=\"panels-with-border-active-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-active-step-level222\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"panels-with-border-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-upcoming-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-upcoming-step-level2\">\r\n                                <span class=\"panels-with-border-upcoming-step-level21\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level211\">\r\n                                        <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-upcoming-step-level22\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Progress -->\r\n    <div *ngSwitchCase=\"StepperType.Progress\">\r\n        <div class=\"mt-6\" aria-hidden=\"true\">\r\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\r\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\r\n            </div>\r\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\r\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\r\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Simple -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\r\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n</ng-container>\r\n<ng-container *ngFor=\"let step of steps\">\r\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, decorators: [{
@@ -1829,11 +1854,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
             args: [{ selector: 'lib-stepper', providers: [
                         { provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
                     ], template: "<ng-container [ngSwitch]=\"type\">\r\n    <!-- Bullets -->\r\n    <nav class=\"stepper-bullets-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\r\n        <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n        <ol role=\"list\" class=\"stepper-bullets-ol\">\r\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                <!-- Completed Step -->\r\n                <div class=\"stepper-bullets-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"stepper-bullets-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"stepper-bullets-active-step-level1\" aria-hidden=\"true\">\r\n                        <span class=\"stepper-bullets-active-step-level1\"></span>\r\n                    </span>\r\n                    <span class=\"stepper-bullets-active-step-bullet\" aria-hidden=\"true\"></span>\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div href=\"#\" class=\"stepper-bullets-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Bullets & Text -->\r\n    <div class=\"stepper-bullets-and-text-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n        <nav aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"stepper-bullets-and-text-ol\">\r\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n                    <!-- Complete Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <span class=\"stepper-bullets-and-text-completed-step\">\r\n                            <span class=\"stepper-bullets-and-text-completed-step-level1\">\r\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                            <span class=\"stepper-bullets-and-text-completed-step-container\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"stepper-bullets-and-text-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                        <span class=\"stepper-bullets-and-text-active-step-level1\" aria-hidden=\"true\">\r\n                            <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\r\n                            <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\r\n                        </span>\r\n                        <span class=\"stepper-bullets-and-text-active-step-container\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"stepper-bullets-and-text-upcoming-step\">\r\n                            <div class=\"stepper-bullets-and-text-upcoming-step-level1\" aria-hidden=\"true\">\r\n                                <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\r\n                            </div>\r\n                            <p class=\"stepper-bullets-and-text-upcoming-step-container\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Circles -->\r\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\r\n        <ol class=\"flex items-center\" role=\"list\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\r\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                        </svg>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\r\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n                    </div>\r\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\r\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Circles With Text -->\r\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n        <ol role=\"list\" class=\"overflow-hidden\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\r\n                <!-- Complete Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                                </svg>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Active Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Active\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\r\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Upcoming Step -->\r\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n                    <div href=\"#\" class=\"relative flex items-start group\">\r\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\r\n                            </span>\r\n                        </span>\r\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\r\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                            </span>\r\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                            </span>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\r\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n                <!-- Completed step -->\r\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                            </svg>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Active step -->\r\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\r\n                    </span>\r\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming step -->\r\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\r\n                        </span>\r\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\r\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n                <!-- Arrow separator for lg screens and up -->\r\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\r\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n    <!-- Panels With Border -->\r\n    <div class=\"panels-with-border-container\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n        <nav class=\"panels-with-border-nav\" aria-label=\"Progress\">\r\n            <ol role=\"list\" class=\"panels-with-border-ol\">\r\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"panels-with-border-li\">\r\n                    <!-- Completed Step -->\r\n                    <div class=\"panels-with-border-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-completed-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-completed-step-level2\">\r\n                                <span class=\"panels-with-border-completed-step-level21\">\r\n                                    <span class=\"panels-with-border-completed-step-level211\">\r\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-completed-step-level22\">\r\n                                    <span class=\"panels-with-border-completed-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-completed-step-level222\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Active Step -->\r\n                    <div class=\"panels-with-border-active-step\" *ngIf=\"step.state === StepState.Active\">\r\n                        <div aria-current=\"step\">\r\n                            <span class=\"panels-with-border-active-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-active-step-level2\">\r\n                                <span class=\"panels-with-border-active-step-level21\">\r\n                                    <span class=\"panels-with-border-active-step-level211\">\r\n                                        <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-active-step-level22\">\r\n                                    <span class=\"panels-with-border-active-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"panels-with-border-active-step-level222\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Upcoming Step -->\r\n                    <div class=\"panels-with-border-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                        <div class=\"group\">\r\n                            <span class=\"panels-with-border-upcoming-step-level1\" aria-hidden=\"true\"></span>\r\n                            <span class=\"panels-with-border-upcoming-step-level2\">\r\n                                <span class=\"panels-with-border-upcoming-step-level21\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level211\">\r\n                                        <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\r\n                                    </span>\r\n                                </span>\r\n                                <span class=\"panels-with-border-upcoming-step-level22\">\r\n                                    <span class=\"panels-with-border-upcoming-step-level221\" *ngIf=\"step.stepLabel\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                                    </span>\r\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\r\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n                                    </span>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <!-- Separator -->\r\n                        <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n                            </svg>\r\n                        </div>\r\n                    </div>\r\n                </li>\r\n            </ol>\r\n        </nav>\r\n    </div>\r\n    <!-- Progress -->\r\n    <div *ngSwitchCase=\"StepperType.Progress\">\r\n        <div class=\"mt-6\" aria-hidden=\"true\">\r\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\r\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\r\n            </div>\r\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\r\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\r\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Simple -->\r\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\r\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\r\n                <!-- Completed Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Active Step -->\r\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n                <!-- Upcoming Step -->\r\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\r\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\r\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n        </ol>\r\n    </nav>\r\n</ng-container>\r\n<ng-container *ngFor=\"let step of steps\">\r\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n</ng-container>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { steps: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { steps: [{
                 type: ContentChildren,
                 args: [LibStepComponent, { descendants: true }]
             }], stepChanged: [{
                 type: Output
+            }], completed: [{
+                type: Output
             }], linear: [{
                 type: Input
             }], type: [{
@@ -2082,6 +2109,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }]; } });
 
+class ShellSidebarComponent {
+    constructor(router, route, links) {
+        this.router = router;
+        this.route = route;
+        this.links = links;
+        // tslint:disable-next-line:no-input-rename
+        this.sectionLinksPath = 'main';
+        this.sectionLinks = of([]);
+        // tslint:disable-next-line:no-input-rename
+        this.shellConfig = undefined;
+        this.activeFragment = null;
+    }
+    ngOnInit() {
+        this.activeFragment = this.route.fragment.pipe(share());
+        this.sectionLinks = this.links[this.sectionLinksPath];
+    }
+}
+ShellSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, deps: [{ token: Router }, { token: ActivatedRoute }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
+ShellSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"shell-sidebar-component-container\">\r\n <div class=\"shell-sidebar-component-links-container sidebar\">\r\n    <lib-nav-links-list\r\n      [show-icons]=\"true\"\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'sidebar nav-link group'\"\r\n      [link-active-class]=\"'sidebar nav-link-active group'\">\r\n    </lib-nav-links-list>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-shell-sidebar', template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"shell-sidebar-component-container\">\r\n <div class=\"shell-sidebar-component-links-container sidebar\">\r\n    <lib-nav-links-list\r\n      [show-icons]=\"true\"\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'sidebar nav-link group'\"\r\n      [link-active-class]=\"'sidebar nav-link-active group'\">\r\n    </lib-nav-links-list>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router, decorators: [{
+                    type: Inject,
+                    args: [Router]
+                }] }, { type: i1$1.ActivatedRoute, decorators: [{
+                    type: Inject,
+                    args: [ActivatedRoute]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_LINKS]
+                }] }]; }, propDecorators: { sectionLinksPath: [{
+                type: Input,
+                args: ['section-links']
+            }], shellConfig: [{
+                type: Input,
+                args: ['config']
+            }] } });
+
 class NotificationsIndicatorComponent {
     constructor(notifications, links) {
         this.notifications = notifications;
@@ -2098,20 +2164,24 @@ class NotificationsIndicatorComponent {
         }
     }
     ngOnInit() {
-        this.links['notifications'].subscribe(notificationsLink => {
-            this.allNotificationsLink = notificationsLink;
-        });
-        this.notificationsSub$ = this.notifications.messages.subscribe(result => {
-            if (result.items) {
-                this.newArrival = true;
-                this.unreadCount = result.count;
-                this.items = result.items;
-                setTimeout(() => { this.newArrival = false; }, 1000);
-            }
-        });
+        if (this.links && this.links['notifications']) {
+            this.links['notifications'].subscribe(notificationsLink => {
+                this.allNotificationsLink = notificationsLink;
+            });
+        }
+        if (this.notifications) {
+            this.notificationsSub$ = this.notifications?.messages.subscribe(result => {
+                if (result.items) {
+                    this.newArrival = true;
+                    this.unreadCount = result.count;
+                    this.items = result.items;
+                    setTimeout(() => { this.newArrival = false; }, 1000);
+                }
+            });
+        }
     }
     doInboxAction() {
-        if (this.notifications.inboxAction) {
+        if (this.notifications?.inboxAction) {
             this.notifications.inboxAction();
         }
         else {
@@ -2218,10 +2288,10 @@ class UserProfileMenuComponent {
     }
 }
 UserProfileMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UserProfileMenuComponent, deps: [{ token: AuthService }, { token: Router }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-UserProfileMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\" (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n\r\n  <div class=\"inline-flex\">\r\n    <!-- Username -->\r\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n        {{ user.profile.name }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [class.ml-2]=\"showUserName\">\r\n      <button type=\"button\" *ngIf=\"user\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\">\r\n        <span class=\"sr-only\">Open user menu</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n        </span>\r\n      </button>\r\n\r\n      <button type=\"button\"\r\n              *ngIf=\"!user\"\r\n              (click)=\"signin(null)\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\">\r\n        <span class=\"sr-only\">sign in</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n        </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"userMenuExpanded ?\r\n    'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n    :\r\n    'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n         <lib-nav-links-list\r\n            [links]=\"links.profile\"\r\n            [link-class]=\"'nav-link-profile'\"\r\n            [link-active-class]=\"'nav-link-profile-active'\">\r\n         </lib-nav-links-list>\r\n  </div>\r\n\r\n</div>\r\n\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
+UserProfileMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n  <div class=\"inline-flex\">\r\n    <!-- Username -->\r\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n        {{ user.profile.name }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [class.ml-2]=\"showUserName\">\r\n      <button type=\"button\" \r\n              *ngIf=\"user\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\"\r\n              (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n        <span class=\"sr-only\">Open user menu</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n        </span>\r\n      </button>\r\n\r\n      <button type=\"button\"\r\n              *ngIf=\"!user\"\r\n              (click)=\"signin($event)\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\">\r\n        <span class=\"sr-only\">sign in</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n        </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"userMenuExpanded ?\r\n    'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n    :\r\n    'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n         <lib-nav-links-list\r\n            [links]=\"links.profile\"\r\n            [link-class]=\"'nav-link-profile'\"\r\n            [link-active-class]=\"'nav-link-profile-active'\">\r\n         </lib-nav-links-list>\r\n  </div>\r\n\r\n</div>\r\n\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user-profile-menu', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\" (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n\r\n  <div class=\"inline-flex\">\r\n    <!-- Username -->\r\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n        {{ user.profile.name }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [class.ml-2]=\"showUserName\">\r\n      <button type=\"button\" *ngIf=\"user\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\">\r\n        <span class=\"sr-only\">Open user menu</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n        </span>\r\n      </button>\r\n\r\n      <button type=\"button\"\r\n              *ngIf=\"!user\"\r\n              (click)=\"signin(null)\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\">\r\n        <span class=\"sr-only\">sign in</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n        </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"userMenuExpanded ?\r\n    'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n    :\r\n    'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n         <lib-nav-links-list\r\n            [links]=\"links.profile\"\r\n            [link-class]=\"'nav-link-profile'\"\r\n            [link-active-class]=\"'nav-link-profile-active'\">\r\n         </lib-nav-links-list>\r\n  </div>\r\n\r\n</div>\r\n\r\n" }]
+            args: [{ selector: 'lib-user-profile-menu', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n  <div class=\"inline-flex\">\r\n    <!-- Username -->\r\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n        {{ user.profile.name }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [class.ml-2]=\"showUserName\">\r\n      <button type=\"button\" \r\n              *ngIf=\"user\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\"\r\n              (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n        <span class=\"sr-only\">Open user menu</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n        </span>\r\n      </button>\r\n\r\n      <button type=\"button\"\r\n              *ngIf=\"!user\"\r\n              (click)=\"signin($event)\"\r\n              class=\"shell-header-profile-dropdown-button\"\r\n              id=\"user-menu\"\r\n              aria-expanded=\"false\"\r\n              aria-haspopup=\"true\">\r\n        <span class=\"sr-only\">sign in</span>\r\n        <span class=\"avatar-container\">\r\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n        </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"userMenuExpanded ?\r\n    'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n    :\r\n    'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n         <lib-nav-links-list\r\n            [links]=\"links.profile\"\r\n            [link-class]=\"'nav-link-profile'\"\r\n            [link-active-class]=\"'nav-link-profile-active'\">\r\n         </lib-nav-links-list>\r\n  </div>\r\n\r\n</div>\r\n\r\n" }]
         }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
                     type: Inject,
                     args: [AuthService]
@@ -2252,7 +2322,7 @@ class ShellHeaderComponent {
         // tslint:disable-next-line:no-input-rename
         this.showAlerts = false;
         // tslint:disable-next-line:no-input-rename
-        this.shellLayout = ShellLayoutType.Stacked;
+        this.showLangs = false;
         this.border = true;
         this.sectionLinks = of([]);
         this.mobileMenuExpanded = false;
@@ -2313,10 +2383,10 @@ class ShellHeaderComponent {
     }
 }
 ShellHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-ShellHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"], shellLayout: ["shell-layout", "shellLayout"], border: "border" }, ngImport: i0, template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div [class]=\"border ? 'shell-header-border' : ''\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-link-container\">\r\n          <div class=\"shell-header-link-container-inner\">\r\n            <lib-nav-links-list\r\n              [links]=\"sectionLinks\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'nav-link'\"\r\n              [link-active-class]=\"'nav-link-active'\">\r\n            </lib-nav-links-list>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n\r\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n            <lib-nav-links-list\r\n              [links]=\"links.profileActions\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\"\r\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n            </lib-nav-links-list>\r\n\r\n\r\n            <!-- Profile dropdown -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-2\">\r\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-2\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\r\n\r\n            <!-- languages dropdown -->\r\n            <div *ngIf=\"config.showLangsOnHeader\" class=\"ml-2\">\r\n              <lib-language-selection></lib-language-selection>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\" *ngIf=\"shellLayout === 'Stacked'\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <!--\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n        -->\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }] });
+ShellHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border" }, ngImport: i0, template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div class=\"shell-header-border\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-link-container\">\r\n          <div class=\"shell-header-link-container-inner\">\r\n            <lib-nav-links-list\r\n              [links]=\"sectionLinks\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'nav-link'\"\r\n              [link-active-class]=\"'nav-link-active'\">\r\n            </lib-nav-links-list>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n\r\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n            <lib-nav-links-list\r\n              [links]=\"links.profileActions\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\"\r\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n            </lib-nav-links-list>\r\n\r\n\r\n            <!-- Profile dropdown -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\r\n\r\n            <!-- languages dropdown -->\r\n            <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n              <lib-language-selection></lib-language-selection>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <!--\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n        -->\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-header', template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div [class]=\"border ? 'shell-header-border' : ''\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-link-container\">\r\n          <div class=\"shell-header-link-container-inner\">\r\n            <lib-nav-links-list\r\n              [links]=\"sectionLinks\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'nav-link'\"\r\n              [link-active-class]=\"'nav-link-active'\">\r\n            </lib-nav-links-list>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n\r\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n            <lib-nav-links-list\r\n              [links]=\"links.profileActions\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\"\r\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n            </lib-nav-links-list>\r\n\r\n\r\n            <!-- Profile dropdown -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-2\">\r\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-2\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\r\n\r\n            <!-- languages dropdown -->\r\n            <div *ngIf=\"config.showLangsOnHeader\" class=\"ml-2\">\r\n              <lib-language-selection></lib-language-selection>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\" *ngIf=\"shellLayout === 'Stacked'\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <!--\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n        -->\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n" }]
+            args: [{ selector: 'lib-shell-header', template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div class=\"shell-header-border\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-link-container\">\r\n          <div class=\"shell-header-link-container-inner\">\r\n            <lib-nav-links-list\r\n              [links]=\"sectionLinks\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'nav-link'\"\r\n              [link-active-class]=\"'nav-link-active'\">\r\n            </lib-nav-links-list>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n\r\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n            <lib-nav-links-list\r\n              [links]=\"links.profileActions\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\"\r\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n            </lib-nav-links-list>\r\n\r\n\r\n            <!-- Profile dropdown -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\r\n\r\n            <!-- languages dropdown -->\r\n            <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n              <lib-language-selection></lib-language-selection>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <!--\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n        -->\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n" }]
         }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
                     type: Inject,
                     args: [AuthService]
@@ -2344,13 +2414,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
             }], showAlerts: [{
                 type: Input,
                 args: ['show-alerts']
-            }], shellLayout: [{
+            }], showLangs: [{
                 type: Input,
-                args: ['shell-layout']
+                args: ['show-langs']
             }], border: [{
                 type: Input
             }] } });
 
+class ShellSidebarHeaderComponent extends ShellHeaderComponent {
+    constructor(authService, router, route, config, links) {
+        super(authService, router, route, config, links);
+        this.authService = authService;
+        this.router = router;
+        this.route = route;
+        this.config = config;
+        this.links = links;
+    }
+}
+ShellSidebarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
+ShellSidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0, template: "<div class=\"shell-header-paddings\">\n    <div class=\"shell-header-border\">\n        <div class=\"shell-header-menu-container\">\n            <div class=\"shell-header-md-visible\">\n                <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n                <!-- Profile dropdown -->\n                <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n                    <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\n                </div>\n                <!-- Notifications dropdown -->\n                <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n                    <lib-notifications-indicator></lib-notifications-indicator>\n                </div>\n                <!-- languages dropdown -->\n                <div *ngIf=\"showLangs\" class=\"ml-4\">\n                    <lib-language-selection></lib-language-selection>\n                </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-shell-sidebar-header', template: "<div class=\"shell-header-paddings\">\n    <div class=\"shell-header-border\">\n        <div class=\"shell-header-menu-container\">\n            <div class=\"shell-header-md-visible\">\n                <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n                <!-- Profile dropdown -->\n                <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n                    <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\n                </div>\n                <!-- Notifications dropdown -->\n                <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n                    <lib-notifications-indicator></lib-notifications-indicator>\n                </div>\n                <!-- languages dropdown -->\n                <div *ngIf=\"showLangs\" class=\"ml-4\">\n                    <lib-language-selection></lib-language-selection>\n                </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n" }]
+        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
+                    type: Inject,
+                    args: [AuthService]
+                }] }, { type: i1$1.Router, decorators: [{
+                    type: Inject,
+                    args: [Router]
+                }] }, { type: i1$1.ActivatedRoute, decorators: [{
+                    type: Inject,
+                    args: [ActivatedRoute]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SHELL_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_LINKS]
+                }] }]; } });
+
+class ShellSidebarLayoutComponent {
+    constructor() {
+        this.showMobileSidebar = true;
+    }
+    ngOnInit() {
+    }
+    toggleMobileSidebar() {
+        this.showMobileSidebar = !this.showMobileSidebar;
+    }
+}
+ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config" }, ngImport: i0, template: "<div>\n    <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\n    <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\n      <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\n      <div class=\"sidebar-off-canvas-menu-backdrop\" \n          [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\n      </div>\n  \n      <div class=\"sidebar-off-canvas-menu-container-inner\" \n      [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\" \n      [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\n        <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\n        <div class=\"sidebar-off-canvas-layout-container\">\n          <!--Close button, show/hide based on off-canvas menu state.-->\n          <div class=\"sidebar-off-canvas-toggle-button-container\">\n            <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n              <span class=\"sr-only\">Close sidebar</span>\n              <!-- Heroicon name: outline/x -->\n              <svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n  \n          <div class=\"sidebar-off-canvas-app-logo-container\">\n            <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n          </div>\n\n          <lib-shell-sidebar></lib-shell-sidebar>\n         \n        </div>\n  \n        <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\n          <!-- Dummy element to force sidebar to shrink to fit close icon -->\n        </div>\n      </div>\n    </div>\n  \n    <!-- Static sidebar for desktop -->\n    <div class=\"sidebar-static-menu-outer-container\">\n    \n    <div class=\"sidebar-static-menu-container\" \n      [class.sidebar-static-menu-container-active]=\"showMobileSidebar\" \n      [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\n      <!-- Sidebar component, swap this element with another sidebar if you like -->\n      <div class=\"sidebar-static-menu-container-inner\">\n        <div class=\"sidebar-static-menu-app-logo-container\">\n          <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n        </div>\n        <lib-shell-sidebar></lib-shell-sidebar>\n      </div>\n    </div>\n    </div>\n\n    <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\n      <div class=\"sidebar-static-menu-toggle-button-container\">\n        <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n          <span class=\"sr-only\">Toggle sidebar</span>\n          <!-- Heroicon name: outline/menu-alt-2 -->\n          <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\n          </svg>\n        </button>\n        \n        <!-- sidebar-static-menu-header-container -->\n        <div class=\"sidebar-static-menu-header-container\">\n          <div class=\"sidebar-static-menu-header-near-container\">\n            \n          </div>\n          <div class=\"sidebar-static-menu-header-far-container\">\n            <lib-shell-sidebar-header \n            [show-userName]=\"config?.showUserNameOnHeader\"\n            [show-alerts]=\"config?.showAlertsOnHeader\" \n            [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\n          </div>\n        </div>\n      </div>\n  \n      <div flex-1>\n        <main class=\"shell-content-container-fluid\">\n            <div class=\"shell-content-container-inner\">\n              <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\n              <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\n            </div>\n          </main>\n      </div>\n    </div>\n  </div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }, { kind: "component", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\n    <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\n    <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\n      <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\n      <div class=\"sidebar-off-canvas-menu-backdrop\" \n          [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\n      </div>\n  \n      <div class=\"sidebar-off-canvas-menu-container-inner\" \n      [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\" \n      [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\n        <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\n        <div class=\"sidebar-off-canvas-layout-container\">\n          <!--Close button, show/hide based on off-canvas menu state.-->\n          <div class=\"sidebar-off-canvas-toggle-button-container\">\n            <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n              <span class=\"sr-only\">Close sidebar</span>\n              <!-- Heroicon name: outline/x -->\n              <svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n  \n          <div class=\"sidebar-off-canvas-app-logo-container\">\n            <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n          </div>\n\n          <lib-shell-sidebar></lib-shell-sidebar>\n         \n        </div>\n  \n        <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\n          <!-- Dummy element to force sidebar to shrink to fit close icon -->\n        </div>\n      </div>\n    </div>\n  \n    <!-- Static sidebar for desktop -->\n    <div class=\"sidebar-static-menu-outer-container\">\n    \n    <div class=\"sidebar-static-menu-container\" \n      [class.sidebar-static-menu-container-active]=\"showMobileSidebar\" \n      [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\n      <!-- Sidebar component, swap this element with another sidebar if you like -->\n      <div class=\"sidebar-static-menu-container-inner\">\n        <div class=\"sidebar-static-menu-app-logo-container\">\n          <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n        </div>\n        <lib-shell-sidebar></lib-shell-sidebar>\n      </div>\n    </div>\n    </div>\n\n    <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\n      <div class=\"sidebar-static-menu-toggle-button-container\">\n        <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n          <span class=\"sr-only\">Toggle sidebar</span>\n          <!-- Heroicon name: outline/menu-alt-2 -->\n          <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\n          </svg>\n        </button>\n        \n        <!-- sidebar-static-menu-header-container -->\n        <div class=\"sidebar-static-menu-header-container\">\n          <div class=\"sidebar-static-menu-header-near-container\">\n            \n          </div>\n          <div class=\"sidebar-static-menu-header-far-container\">\n            <lib-shell-sidebar-header \n            [show-userName]=\"config?.showUserNameOnHeader\"\n            [show-alerts]=\"config?.showAlertsOnHeader\" \n            [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\n          </div>\n        </div>\n      </div>\n  \n      <div flex-1>\n        <main class=\"shell-content-container-fluid\">\n            <div class=\"shell-content-container-inner\">\n              <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\n              <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\n            </div>\n          </main>\n      </div>\n    </div>\n  </div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
 class ShellFooterComponent {
     constructor(links) {
         this.links = links;
@@ -2366,43 +2487,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                     args: [APP_LINKS]
                 }] }]; } });
 
-class ShellSidebarComponent {
-    constructor(router, route, links) {
-        this.router = router;
-        this.route = route;
-        this.links = links;
-        // tslint:disable-next-line:no-input-rename
-        this.sectionLinksPath = 'main';
-        this.sectionLinks = of([]);
-        // tslint:disable-next-line:no-input-rename
-        this.shellConfig = undefined;
-        this.activeFragment = null;
-    }
+class ShellStackedLayoutComponent {
+    constructor() { }
     ngOnInit() {
-        this.activeFragment = this.route.fragment.pipe(share());
-        this.sectionLinks = this.links[this.sectionLinksPath];
     }
 }
-ShellSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, deps: [{ token: Router }, { token: ActivatedRoute }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-ShellSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"flex w-full flex-col h-full min-h-0 bg-gray-800\">\r\n  <div class=\"flex items-center h-16 flex-shrink-0 px-4 bg-gray-900\">\r\n    <!-- <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\" alt=\"Workflow\"> -->\r\n    <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"shellConfig?.appLogo\" [alt]=\"shellConfig?.appLogoAlt\" /></a>\r\n  </div>\r\n  <div class=\"pt-4 px-2 sidebar\">\r\n    <lib-nav-links-list\r\n      [show-icons]=\"true\"\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'sidebar nav-link group'\"\r\n      [link-active-class]=\"'sidebar nav-link-active group'\">\r\n    </lib-nav-links-list>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, decorators: [{
+ShellStackedLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ShellStackedLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\n    <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\n        <ng-container *ngIf=\"config?.customHeaderComponent\">\n        <div appDynamicComponentHost =\"Header\"></div>\n        </ng-container>\n        <lib-shell-header *ngIf=\"!config?.customHeaderComponent\" [show-userName]=\"config?.showUserNameOnHeader\"\n        [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\n        </lib-shell-header>\n    </div>\n</div>\n\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\n    <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\n        <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\n    </div>\n</main>\n\n<div class=\"shell-footer-container\" *ngIf=\"config?.showFooter\">\n    <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\n        <ng-container *ngIf=\"config?.customFooterComponent\">\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\n        </ng-container>\n        <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { kind: "component", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "show-langs", "border"] }, { kind: "component", type: ShellFooterComponent, selector: "lib-shell-footer" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-sidebar', template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"flex w-full flex-col h-full min-h-0 bg-gray-800\">\r\n  <div class=\"flex items-center h-16 flex-shrink-0 px-4 bg-gray-900\">\r\n    <!-- <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\" alt=\"Workflow\"> -->\r\n    <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"shellConfig?.appLogo\" [alt]=\"shellConfig?.appLogoAlt\" /></a>\r\n  </div>\r\n  <div class=\"pt-4 px-2 sidebar\">\r\n    <lib-nav-links-list\r\n      [show-icons]=\"true\"\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'sidebar nav-link group'\"\r\n      [link-active-class]=\"'sidebar nav-link-active group'\">\r\n    </lib-nav-links-list>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router, decorators: [{
-                    type: Inject,
-                    args: [Router]
-                }] }, { type: i1$1.ActivatedRoute, decorators: [{
-                    type: Inject,
-                    args: [ActivatedRoute]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [APP_LINKS]
-                }] }]; }, propDecorators: { sectionLinksPath: [{
-                type: Input,
-                args: ['section-links']
-            }], shellConfig: [{
-                type: Input,
-                args: ['config']
+            args: [{ selector: 'lib-shell-stacked-layout', template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\n    <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\n        <ng-container *ngIf=\"config?.customHeaderComponent\">\n        <div appDynamicComponentHost =\"Header\"></div>\n        </ng-container>\n        <lib-shell-header *ngIf=\"!config?.customHeaderComponent\" [show-userName]=\"config?.showUserNameOnHeader\"\n        [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\n        </lib-shell-header>\n    </div>\n</div>\n\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\n    <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\n        <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\n    </div>\n</main>\n\n<div class=\"shell-footer-container\" *ngIf=\"config?.showFooter\">\n    <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\n        <ng-container *ngIf=\"config?.customFooterComponent\">\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\n        </ng-container>\n        <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\n    </div>\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
             }] } });
 
 class ShellLayoutComponent {
@@ -2476,10 +2572,10 @@ class ShellLayoutComponent {
     }
 }
 ShellLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: DOCUMENT }, { token: i1$1.Router }, { token: i1.Location }, { token: SHELL_CONFIG }, { token: ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Component });
-ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\" [style.display]=\"!loaded ? 'none':'block'\" class=\"shell-container active-side-pane\">\r\n\r\n  <div class=\"shell-header-container\" *ngIf=\"activeConfig.showHeader\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\r\n        <div appDynamicComponentHost =\"Header\"></div>\r\n      </ng-container>\r\n      <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\" [show-userName]=\"activeConfig.showUserNameOnHeader\"\r\n        [show-alerts]=\"activeConfig.showAlertsOnHeader\">\r\n      </lib-shell-header>\r\n    </div>\r\n  </div>\r\n\r\n  <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n      <router-outlet *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\"></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <div class=\"shell-footer-container\" *ngIf=\"activeConfig.showFooter\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customFooterComponent\">\r\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n      </ng-container>\r\n      <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n</div>\r\n\r\n<!-- SIDEBAR LAYOUT -->\r\n\r\n<div *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\" [style.display]=\"!loaded ? 'none':'block'\" class=\"sidebar shell-container active-side-pane\">\r\n\r\n  <!-- Static sidebar for desktop -->\r\n  <div class=\"hidden w-0 sm:w-64 flex-col inset-y-0 bg-gray-800\" [class.hidden]=\"hideSidebar\" [class.fixed]=\"!hideSidebar\">\r\n    <lib-shell-sidebar [config]=\"activeConfig\" ></lib-shell-sidebar>\r\n  </div>\r\n\r\n  <div class=\"flex flex-col\" [class.pl-64]=\"!hideSidebar\">\r\n    <div class=\"sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-800\">\r\n\r\n      <button type=\"button\" class=\"hidden sm:block px-4 border-0 text-white focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\r\n        <span class=\"sr-only\">Open sidebar</span>\r\n        <!-- Heroicon name: outline/menu-alt-2 -->\r\n        <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <button type=\"button\" class=\"block sm:hidden px-4 border-0 text-gray-200 focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\r\n        <span class=\"sr-only\">Open sidebar</span>\r\n        <!-- Heroicon name: outline/menu-alt-2 --> 111\r\n        <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <div class=\"flex-1\">\r\n        <div class=\"shell-header-container\">\r\n            <lib-shell-header [shell-layout]=\"activeConfig.layout\"  [show-userName]=\"activeConfig.showUserNameOnHeader\" [show-alerts]=\"activeConfig.showAlertsOnHeader\"></lib-shell-header>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <main class=\"shell-content-container-sidebar\">\r\n      <div class=\"shell-content-container-inner\">\r\n        <router-outlet *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\"></router-outlet>\r\n      </div>\r\n    </main>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }, { kind: "component", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "shell-layout", "border"] }, { kind: "component", type: ShellFooterComponent, selector: "lib-shell-footer" }, { kind: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }] });
+ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\r\n\r\n  <!-- STACKED LAYOUT -->\r\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n  </div>\r\n\r\n  <!-- SIDEBAR LAYOUT -->\r\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\r\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }, { kind: "component", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config"] }, { kind: "component", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-layout', template: "<div *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\" [style.display]=\"!loaded ? 'none':'block'\" class=\"shell-container active-side-pane\">\r\n\r\n  <div class=\"shell-header-container\" *ngIf=\"activeConfig.showHeader\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\r\n        <div appDynamicComponentHost =\"Header\"></div>\r\n      </ng-container>\r\n      <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\" [show-userName]=\"activeConfig.showUserNameOnHeader\"\r\n        [show-alerts]=\"activeConfig.showAlertsOnHeader\">\r\n      </lib-shell-header>\r\n    </div>\r\n  </div>\r\n\r\n  <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n      <router-outlet *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\"></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <div class=\"shell-footer-container\" *ngIf=\"activeConfig.showFooter\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customFooterComponent\">\r\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n      </ng-container>\r\n      <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n</div>\r\n\r\n<!-- SIDEBAR LAYOUT -->\r\n\r\n<div *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\" [style.display]=\"!loaded ? 'none':'block'\" class=\"sidebar shell-container active-side-pane\">\r\n\r\n  <!-- Static sidebar for desktop -->\r\n  <div class=\"hidden w-0 sm:w-64 flex-col inset-y-0 bg-gray-800\" [class.hidden]=\"hideSidebar\" [class.fixed]=\"!hideSidebar\">\r\n    <lib-shell-sidebar [config]=\"activeConfig\" ></lib-shell-sidebar>\r\n  </div>\r\n\r\n  <div class=\"flex flex-col\" [class.pl-64]=\"!hideSidebar\">\r\n    <div class=\"sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-800\">\r\n\r\n      <button type=\"button\" class=\"hidden sm:block px-4 border-0 text-white focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\r\n        <span class=\"sr-only\">Open sidebar</span>\r\n        <!-- Heroicon name: outline/menu-alt-2 -->\r\n        <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <button type=\"button\" class=\"block sm:hidden px-4 border-0 text-gray-200 focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\r\n        <span class=\"sr-only\">Open sidebar</span>\r\n        <!-- Heroicon name: outline/menu-alt-2 --> 111\r\n        <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <div class=\"flex-1\">\r\n        <div class=\"shell-header-container\">\r\n            <lib-shell-header [shell-layout]=\"activeConfig.layout\"  [show-userName]=\"activeConfig.showUserNameOnHeader\" [show-alerts]=\"activeConfig.showAlertsOnHeader\"></lib-shell-header>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <main class=\"shell-content-container-sidebar\">\r\n      <div class=\"shell-content-container-inner\">\r\n        <router-outlet *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\"></router-outlet>\r\n      </div>\r\n    </main>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-shell-layout', template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\r\n\r\n  <!-- STACKED LAYOUT -->\r\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n  </div>\r\n\r\n  <!-- SIDEBAR LAYOUT -->\r\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\r\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -2809,7 +2905,6 @@ class AuthCallbackComponent {
     ngOnInit() {
         this.authService.signinRedirectCallback().subscribe((user) => {
             if (user) {
-                debugger;
                 this.router.navigateByUrl(user.state?.url || '/');
             }
         });
@@ -3672,7 +3767,10 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         LibStepperComponent,
         LibStepComponent,
         LibStepLabelDirective,
-        LibStepInfoDirective], imports: [CommonModule,
+        LibStepInfoDirective,
+        ShellSidebarHeaderComponent,
+        ShellSidebarLayoutComponent,
+        ShellStackedLayoutComponent], imports: [CommonModule,
         RouterModule,
         IndiceAuthModule], exports: [AddressPipe,
         AuthCallbackComponent,
@@ -3773,7 +3871,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                         LibStepperComponent,
                         LibStepComponent,
                         LibStepLabelDirective,
-                        LibStepInfoDirective
+                        LibStepInfoDirective,
+                        ShellSidebarHeaderComponent,
+                        ShellSidebarLayoutComponent,
+                        ShellStackedLayoutComponent
                     ],
                     imports: [
                         CommonModule,
@@ -3830,5 +3931,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
+export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
 //# sourceMappingURL=indice-ng-components.mjs.map