@theseam/ui-common 0.4.10 → 0.4.12-beta.0

package/fesm2020/theseam-ui-common-framework.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { Directive, InjectionToken, Optional, Inject, HostBinding, Input, HostListener, forwardRef, isDevMode, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, NgModule, ViewChild, EventEmitter, Output, Injectable, Injector, ViewChildren, SkipSelf, Host, Self, ContentChildren } from '@angular/core';
+import { Directive, InjectionToken, Optional, Inject, HostBinding, Input, HostListener, forwardRef, isDevMode, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, NgModule, ViewChild, EventEmitter, Output, Injectable, Injector, ViewChildren, Self, ContentChildren } from '@angular/core';
+import { tap, map, startWith, switchMap, shareReplay, mapTo, take, auditTime, debounceTime, takeUntil, distinctUntilChanged, finalize, filter } from 'rxjs/operators';
 import * as i3 from '@angular/cdk/portal';
 import { TemplatePortal, PortalModule, BasePortalOutlet, ComponentPortal } from '@angular/cdk/portal';
-import { BehaviorSubject, isObservable, from, Subject, of, combineLatest, defer, Observable } from 'rxjs';
+import { BehaviorSubject, isObservable, from, Subject, of, combineLatest, map as map$1, defer, Observable } from 'rxjs';
 import { faAngleDoubleRight, faAngleDoubleLeft, faLock, faUnlock, faAngleLeft, faBars, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 import * as i1 from '@theseam/ui-common/layout';
 import { TheSeamLayoutModule } from '@theseam/ui-common/layout';
@@ -14,8 +15,7 @@ import * as i4$1 from '@theseam/ui-common/buttons';
 import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
 import * as i2$1 from '@theseam/ui-common/icon';
 import { TheSeamIconModule } from '@theseam/ui-common/icon';
-import { map, startWith, switchMap, shareReplay, tap, mapTo, take, auditTime, debounceTime, takeUntil, distinctUntilChanged, finalize, filter } from 'rxjs/operators';
-import { hasProperty, notNullOrUndefined, observeControlValue, observeControlStatus } from '@theseam/ui-common/utils';
+import { hasProperty, notNullOrUndefined, observeControlValue, observeControlStatus, isNullOrUndefined } from '@theseam/ui-common/utils';
 import { __decorate } from 'tslib';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i3$1 from '@angular/cdk/drag-drop';
@@ -25,16 +25,16 @@ import { THESEAM_WIDGET_DATA, THESEAM_WIDGET_ACCESSOR } from '@theseam/ui-common
 import * as i1$1 from '@theseam/ui-common/dynamic-component-loader';
 import * as i6 from '@theseam/ui-common/shared';
 import { TheSeamSharedModule } from '@theseam/ui-common/shared';
-import { trigger, state, style, transition, animate, group, query, animateChild, keyframes } from '@angular/animations';
 import * as i1$2 from '@angular/router';
-import { NavigationEnd, RouterModule, NavigationStart } from '@angular/router';
+import { RouterModule, NavigationEnd, NavigationStart } from '@angular/router';
 import * as i4$2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i5 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { trigger, state, style, transition, animate, group, query, animateChild, keyframes } from '@angular/animations';
 import * as i2$2 from '@angular/flex-layout/extended';
 import * as i3$2 from '@theseam/ui-common/menu';
-import { TheSeamMenuModule } from '@theseam/ui-common/menu';
+import { TheSeamMenuModule, MenuComponent } from '@theseam/ui-common/menu';
 import { faUserCircle } from '@fortawesome/free-regular-svg-icons';
 import * as i1$3 from '@ajsf/core';
 import { isArray, buildTitleMap, hasOwn, Framework, JsonSchemaFormModule, WidgetLibraryModule, JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService } from '@ajsf/core';
@@ -102,22 +102,31 @@ class BaseLayoutNavToggleDirective {
             this.baseLayout.registeredNav.toggle();
         }
     }
-    constructor(_baseLayout) {
+    constructor(_cdr, _baseLayout) {
+        this._cdr = _cdr;
         this.type = 'button';
         /** Screenreader label for the button. */
         this.ariaLabel = 'Navigation toggle';
+        this._toggleClass = true;
+        this._expandedClass = false;
         this.baseLayout = _baseLayout;
     }
+    ngOnInit() {
+        this.baseLayout?.registeredNav?.expanded$.pipe(tap(exp => {
+            this._expandedClass = exp;
+            this._cdr.markForCheck();
+        })).subscribe();
+    }
 }
-BaseLayoutNavToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BaseLayoutNavToggleDirective, deps: [{ token: THESEAM_BASE_LAYOUT_REF, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-BaseLayoutNavToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: BaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: { type: "type", ariaLabel: ["aria-label", "ariaLabel"] }, host: { listeners: { "click": "_onClick()" }, properties: { "attr.type": "this._attrType", "attr.aria-label": "this._attrAriaLabel" } }, exportAs: ["seamBaseLayoutNavToggle"], ngImport: i0 });
+BaseLayoutNavToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BaseLayoutNavToggleDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: THESEAM_BASE_LAYOUT_REF, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+BaseLayoutNavToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: BaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: { type: "type", ariaLabel: ["aria-label", "ariaLabel"] }, host: { listeners: { "click": "_onClick()" }, properties: { "attr.type": "this._attrType", "attr.aria-label": "this._attrAriaLabel", "class.base-layout-nav-toggle": "this._toggleClass", "class.base-layout-nav-toggle--expanded": "this._expandedClass" } }, exportAs: ["seamBaseLayoutNavToggle"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BaseLayoutNavToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[seamBaseLayoutNavToggle]',
                     exportAs: 'seamBaseLayoutNavToggle'
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -133,6 +142,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             }], ariaLabel: [{
                 type: Input,
                 args: ['aria-label']
+            }], _toggleClass: [{
+                type: HostBinding,
+                args: ['class.base-layout-nav-toggle']
+            }], _expandedClass: [{
+                type: HostBinding,
+                args: ['class.base-layout-nav-toggle--expanded']
             }], _onClick: [{
                 type: HostListener,
                 args: ['click']
@@ -180,6 +195,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
+class BaseLayoutSideBarHeaderDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}
+BaseLayoutSideBarHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BaseLayoutSideBarHeaderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaseLayoutSideBarHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: BaseLayoutSideBarHeaderDirective, selector: "[seamBaseLayoutSideBarHeader]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BaseLayoutSideBarHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutSideBarHeader]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
 const THE_SEAM_BASE_LAYOUT = {
     provide: THESEAM_BASE_LAYOUT_REF,
     // tslint:disable-next-line:no-use-before-declare
@@ -195,6 +224,7 @@ class TheSeamBaseLayoutComponent {
         this.faAngleDoubleRight = faAngleDoubleRight;
         this.faAngleDoubleLeft = faAngleDoubleLeft;
         this.overlayNav = false;
+        this.showSidebar = true;
         this._hasSideBar = new BehaviorSubject(false);
         this._registeredNav = new BehaviorSubject(undefined);
         this.registeredNav$ = this._registeredNav.asObservable();
@@ -204,12 +234,17 @@ class TheSeamBaseLayoutComponent {
         this.hasSideBar$ = this._hasSideBar.asObservable();
     }
     ngOnInit() {
+        if (this.mobileBreakpoint) {
+            this._layout.setMobileBreakpoint(this.mobileBreakpoint);
+        }
         if (this._topBarTpl) {
             this._topBarPortal = new TemplatePortal(this._topBarTpl, this._viewContainerRef);
         }
         if (this._sideBarTpl) {
             this._sideBarPortal = new TemplatePortal(this._sideBarTpl, this._viewContainerRef);
-            this._hasSideBar.next(true);
+            if (this.showSidebar) {
+                this._hasSideBar.next(true);
+            }
         }
         if (this._contentTpl) {
             this._contentPortal = new TemplatePortal(this._contentTpl, this._viewContainerRef);
@@ -265,12 +300,16 @@ class TheSeamBaseLayoutComponent {
     }
 }
 TheSeamBaseLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamBaseLayoutComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.TheSeamLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamBaseLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamBaseLayoutComponent, selector: "seam-base-layout", inputs: { overlayNav: "overlayNav" }, providers: [THE_SEAM_BASE_LAYOUT], queries: [{ propertyName: "_topBarTpl", first: true, predicate: BaseLayoutTopBarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_sideBarTpl", first: true, predicate: BaseLayoutSideBarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentTpl", first: true, predicate: BaseLayoutContentDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentHeaderTpl", first: true, predicate: BaseLayoutContentHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentFooterTpl", first: true, predicate: BaseLayoutContentFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header\">\n      <!-- <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template> -->\n\n      <div class=\"d-flex d-flex-row\">\n        <div class=\"flex-grow-1\">\n          <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n        </div>\n        <div class=\"d-flex\">\n          <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n            <div>\n              <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;float:left;z-index:9999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .base-layout-content-container-header{margin:.25rem;padding:0;background:none;border-radius:0;overflow:hidden}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i4.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TheSeamBaseLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamBaseLayoutComponent, selector: "seam-base-layout", inputs: { overlayNav: "overlayNav", mobileBreakpoint: "mobileBreakpoint", showSidebar: "showSidebar" }, providers: [THE_SEAM_BASE_LAYOUT], queries: [{ propertyName: "_topBarTpl", first: true, predicate: BaseLayoutTopBarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_sideBarTpl", first: true, predicate: BaseLayoutSideBarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentTpl", first: true, predicate: BaseLayoutContentDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentHeaderTpl", first: true, predicate: BaseLayoutContentHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentFooterTpl", first: true, predicate: BaseLayoutContentFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header d-flex flex-row\">\n      <div class=\"base-layout-content-container-header-left flex-grow-1\">\n        <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n      </div>\n      <div class=\"base-layout-content-container-header-right d-flex\">\n        <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n          <div class=\"base-layout-registered-action\">\n            <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;z-index:999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto;background:none;margin:.25rem;padding:0;border-radius:0;overflow:hidden}seam-base-layout .base-layout-content-container .base-layout-content-container-header-left{background:none;padding:0rem;margin:0;border-radius:0}seam-base-layout .base-layout-content-container .base-layout-content-container-header-right{background:none;padding:0rem;margin:0;border-radius:0}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i4.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamBaseLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-base-layout', providers: [THE_SEAM_BASE_LAYOUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header\">\n      <!-- <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template> -->\n\n      <div class=\"d-flex d-flex-row\">\n        <div class=\"flex-grow-1\">\n          <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n        </div>\n        <div class=\"d-flex\">\n          <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n            <div>\n              <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;float:left;z-index:9999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .base-layout-content-container-header{margin:.25rem;padding:0;background:none;border-radius:0;overflow:hidden}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"] }]
+            args: [{ selector: 'seam-base-layout', providers: [THE_SEAM_BASE_LAYOUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header d-flex flex-row\">\n      <div class=\"base-layout-content-container-header-left flex-grow-1\">\n        <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n      </div>\n      <div class=\"base-layout-content-container-header-right d-flex\">\n        <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n          <div class=\"base-layout-registered-action\">\n            <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;z-index:999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto;background:none;margin:.25rem;padding:0;border-radius:0;overflow:hidden}seam-base-layout .base-layout-content-container .base-layout-content-container-header-left{background:none;padding:0rem;margin:0;border-radius:0}seam-base-layout .base-layout-content-container .base-layout-content-container-header-right{background:none;padding:0rem;margin:0;border-radius:0}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1.TheSeamLayoutService }]; }, propDecorators: { overlayNav: [{
                 type: Input
+            }], mobileBreakpoint: [{
+                type: Input
+            }], showSidebar: [{
+                type: Input
             }], _topBarTpl: [{
                 type: ContentChild,
                 args: [BaseLayoutTopBarDirective, { static: true, read: TemplateRef }]
@@ -295,6 +334,7 @@ TheSeamBaseLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         BaseLayoutContentDirective,
         BaseLayoutSideBarDirective,
         BaseLayoutSideBarFooterDirective,
+        BaseLayoutSideBarHeaderDirective,
         BaseLayoutTopBarDirective,
         BaseLayoutNavToggleDirective,
         BaseLayoutContentHeaderDirective,
@@ -306,6 +346,7 @@ TheSeamBaseLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         BaseLayoutContentDirective,
         BaseLayoutSideBarDirective,
         BaseLayoutSideBarFooterDirective,
+        BaseLayoutSideBarHeaderDirective,
         BaseLayoutTopBarDirective,
         BaseLayoutNavToggleDirective,
         BaseLayoutContentHeaderDirective,
@@ -323,6 +364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         BaseLayoutContentDirective,
                         BaseLayoutSideBarDirective,
                         BaseLayoutSideBarFooterDirective,
+                        BaseLayoutSideBarHeaderDirective,
                         BaseLayoutTopBarDirective,
                         BaseLayoutNavToggleDirective,
                         BaseLayoutContentHeaderDirective,
@@ -340,6 +382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         BaseLayoutContentDirective,
                         BaseLayoutSideBarDirective,
                         BaseLayoutSideBarFooterDirective,
+                        BaseLayoutSideBarHeaderDirective,
                         BaseLayoutTopBarDirective,
                         BaseLayoutNavToggleDirective,
                         BaseLayoutContentHeaderDirective,
@@ -982,7 +1025,7 @@ DashboardWidgetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             // tslint:disable-next-line:no-use-before-declare
             useExisting: forwardRef(() => DashboardWidgetsComponent)
         },
-    ], viewQueries: [{ propertyName: "_toggleBtnTpl", first: true, predicate: ["toggleBtnTpl"], descendants: true, static: true }, { propertyName: "containers", predicate: DashboardWidgetContainerComponent, descendants: true }, { propertyName: "cdkDragDirectives", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<!--\n  This is an ugly trick I am using to render the component into an <ng-content>\n  wrapped in an <ng-template> to move the component to different outlets without\n  reinitializing it. This way the widget won't reload when moving between\n  columns. When I remember how I programatically did this I will remove this\n  weirdness.\n -->\n <seam-dashboard-widget-container *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\" [def]=\"$any(item)\">\n  <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n  <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n  style=\"flex: 1410px;\"\n  [style.padding.px]=\"_gapStyleSize$ | async\"\n  (seamElemResized)=\"_resized($event)\"\n  cdkDropListGroup>\n  <div *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n    class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n    cdkDropList\n    [cdkDropListData]=\"col.items\"\n    (cdkDropListDropped)=\"drop($any($event))\">\n    <div *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n      class=\"dashboard-widgets-list-item\"\n      [attr.data-widget-id]=\"item.widgetId\"\n      cdkDrag\n      [cdkDragDisabled]=\"!widgetsDraggable\">\n      <div [style.margin.px]=\"_gapStyleSize$ | async\">\n        <seam-dashboard-widget-template-container [item]=\"item\"></seam-dashboard-widget-template-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n  <button seamButton theme=\"baselayout-action\" title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\" (click)=\"toggleDragging()\">\n    <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n  </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i6.ElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"] }, { kind: "component", type: DashboardWidgetContainerComponent, selector: "seam-dashboard-widget-container", inputs: ["def"] }, { kind: "component", type: DashboardWidgetTemplateContainerComponent, selector: "seam-dashboard-widget-template-container", inputs: ["item"] }, { kind: "directive", type: DashboardWidgetPortalOutletDirective, selector: "[seamDashboardWidgetPortalOutlet]", inputs: ["seamDashboardWidgetPortalOutlet"], outputs: ["attached"], exportAs: ["seamDashboardWidgetPortalOutlet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "_toggleBtnTpl", first: true, predicate: ["toggleBtnTpl"], descendants: true, static: true }, { propertyName: "containers", predicate: DashboardWidgetContainerComponent, descendants: true }, { propertyName: "cdkDragDirectives", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<!--\n  This is an ugly trick I am using to render the component into an <ng-content>\n  wrapped in an <ng-template> to move the component to different outlets without\n  reinitializing it. This way the widget won't reload when moving between\n  columns. When I remember how I programatically did this I will remove this\n  weirdness.\n -->\n <seam-dashboard-widget-container *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\" [def]=\"$any(item)\">\n  <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n  <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n  style=\"flex: 1410px;\"\n  [style.padding.px]=\"_gapStyleSize$ | async\"\n  (seamElemResized)=\"_resized($event)\"\n  cdkDropListGroup>\n  <div *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n    class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n    cdkDropList\n    [cdkDropListData]=\"col.items\"\n    (cdkDropListDropped)=\"drop($any($event))\">\n    <div *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n      class=\"dashboard-widgets-list-item\"\n      [attr.data-widget-id]=\"item.widgetId\"\n      cdkDrag\n      [cdkDragDisabled]=\"!widgetsDraggable\">\n      <div [style.margin.px]=\"_gapStyleSize$ | async\">\n        <seam-dashboard-widget-template-container [item]=\"item\"></seam-dashboard-widget-template-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n  <button seamButton theme=\"baselayout-action\" title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\" (click)=\"toggleDragging()\">\n    <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n  </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i4$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i6.ElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"] }, { kind: "component", type: DashboardWidgetContainerComponent, selector: "seam-dashboard-widget-container", inputs: ["def"] }, { kind: "component", type: DashboardWidgetTemplateContainerComponent, selector: "seam-dashboard-widget-template-container", inputs: ["item"] }, { kind: "directive", type: DashboardWidgetPortalOutletDirective, selector: "[seamDashboardWidgetPortalOutlet]", inputs: ["seamDashboardWidgetPortalOutlet"], outputs: ["attached"], exportAs: ["seamDashboardWidgetPortalOutlet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     InputBoolean()
 ], DashboardWidgetsComponent.prototype, "widgetsDraggable", void 0);
@@ -1098,8 +1141,6 @@ const THESEAM_SIDE_NAV_ACCESSOR = new InjectionToken('THESEAM_SIDE_NAV_ACCESSOR'
 
 const EXPANDED_STATE$1 = 'expanded';
 const COLLAPSED_STATE$1 = 'collapsed';
-const FULL_STATE = 'full';
-const COMPACT_STATE = 'compact';
 class SideNavItemComponent {
     set link(value) { this._link.next(value); }
     get link() { return this._link.value; }
@@ -1114,6 +1155,7 @@ class SideNavItemComponent {
                 this._badgeTooltip = {
                     tooltip: value,
                     placement: 'auto',
+                    container: 'body',
                     disabled: false
                 };
             }
@@ -1121,9 +1163,10 @@ class SideNavItemComponent {
                 this._badgeTooltip = {
                     ...value,
                     placement: value.placement || 'auto',
+                    container: value.container || 'body',
                     disabled: typeof value?.disabled === 'boolean'
                         ? value.disabled
-                        : typeof value.tooltip !== 'string'
+                        : typeof value.tooltip === 'string',
                 };
             }
         }
@@ -1133,9 +1176,8 @@ class SideNavItemComponent {
     }
     get _isActiveCssClass() { return this.active; }
     get _attrDataHierLevel() { return this.hierLevel; }
-    constructor(_sideNav, _parent) {
+    constructor(_sideNav) {
         this._sideNav = _sideNav;
-        this._parent = _parent;
         this._ngUnsubscribe = new Subject();
         this.faAngleLeft = faAngleLeft;
         this.active = false;
@@ -1149,9 +1191,7 @@ class SideNavItemComponent {
         this.compact$ = this._compact.asObservable();
         this.badgeTheme = 'danger';
         this.childGroupAnimState$ = this.expanded$
-            .pipe(map(expanded => expanded ? EXPANDED_STATE$1 : COLLAPSED_STATE$1));
-        this.compactAnimState$ = this.compact$
-            .pipe(map(compact => compact ? COMPACT_STATE : FULL_STATE));
+            .pipe(map$1(expanded => expanded ? EXPANDED_STATE$1 : COLLAPSED_STATE$1));
     }
     ngOnDestroy() {
         this._ngUnsubscribe.next(undefined);
@@ -1169,36 +1209,17 @@ class SideNavItemComponent {
             this._sideNav.collapse();
         }
     }
+    get showIconBlock() {
+        return notNullOrUndefined(this.icon) || this.hideEmptyIcon !== true;
+    }
 }
-SideNavItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SideNavItemComponent, deps: [{ token: THESEAM_SIDE_NAV_ACCESSOR }, { token: SideNavItemComponent, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-SideNavItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: { itemType: "itemType", icon: "icon", label: "label", active: "active", link: "link", queryParams: "queryParams", children: "children", hierLevel: "hierLevel", indentSize: "indentSize", expanded: "expanded", compact: "compact", badgeText: "badgeText", badgeTheme: "badgeTheme", badgeSrContent: "badgeSrContent", badgeTooltip: "badgeTooltip" }, host: { properties: { "class.seam-side-nav-item--active": "this._isActiveCssClass", "attr.data-hier-level": "this._attrDataHierLevel" } }, exportAs: ["seamSideNavItem"], ngImport: i0, template: "<div class=\"d-flex flex-row\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state?.active\"\n      [expanded]=\"$any(child).__state?.expanded\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    (click)=\"_linkClicked()\">\n    <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n    <div class=\"side-nav-item--icon\">\n      <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\"\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"side-nav-item--toggle-btn\"\n      [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["seam-side-nav-item{display:block;transition:.25s ease-in-out background-color}seam-side-nav-item.seam-side-nav-item--active{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .active,seam-side-nav-item.seam-side-nav-item--active:active,seam-side-nav-item.seam-side-nav-item--active .side-nav-item.active:hover{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item.seam-side-nav-item--active .nav-link{color:#fff}seam-side-nav-item .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#2f71a9;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn{color:#fff}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i4$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip"], exportAs: ["seamSideNavItem"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
+SideNavItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SideNavItemComponent, deps: [{ token: THESEAM_SIDE_NAV_ACCESSOR }], target: i0.ɵɵFactoryTarget.Component });
+SideNavItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SideNavItemComponent, isStandalone: true, selector: "seam-side-nav-item", inputs: { itemType: "itemType", icon: "icon", hideEmptyIcon: "hideEmptyIcon", label: "label", active: "active", link: "link", queryParams: "queryParams", children: "children", hierLevel: "hierLevel", indentSize: "indentSize", expanded: "expanded", compact: "compact", isMobile: "isMobile", badgeText: "badgeText", badgeTheme: "badgeTheme", badgeSrContent: "badgeSrContent", badgeTooltip: "badgeTooltip", menuItemTooltipConfig: "menuItemTooltipConfig", menuItemTooltipDisabled: "menuItemTooltipDisabled" }, host: { properties: { "class.seam-side-nav-item--active": "this._isActiveCssClass", "attr.data-hier-level": "this._attrDataHierLevel" } }, exportAs: ["seamSideNavItem"], ngImport: i0, template: "<div class=\"d-flex flex-row side-nav-item-wrapper\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [isMobile]=\"isMobile\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state?.active\"\n      [expanded]=\"$any(child).__state?.expanded\"\n      [hideEmptyIcon]=\"hideEmptyIcon\"\n      [indentSize]=\"indentSize\"\n      [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n      [menuItemTooltipDisabled]=\"menuItemTooltipDisabled\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row align-items-stretch rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <div class=\"d-flex flex-row w-100\"\n    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n    <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n      [class.nav-link__compact]=\"compact\"\n      [routerLink]=\"link\"\n      [queryParams]=\"queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      (click)=\"_linkClicked()\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </a>\n\n    <ng-template #noLink>\n      <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n        [class.nav-link__compact]=\"compact\"\n        [ngbTooltip]=\"label\"\n        [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n        [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n        [container]=\"$any(menuItemTooltipConfig)?.container\"\n        [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n        <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n        <div class=\"side-nav-item--icon\">\n          <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        </div>\n        <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n          {{ label }}\n        </span>\n        <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      </a>\n    </ng-template>\n\n    <button *ngIf=\"hasChildren && !compact\"\n      type=\"button\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\"\n      (click)=\"toggleChildren()\"\n      [attr.aria-expanded]=\"expanded\"\n      cdkMonitorElementFocus>\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n      <span class=\"sr-only\">Group Toggle</span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"isMobile || !badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["seam-side-nav-item{display:block;transition:.25s ease-in-out background-color}seam-side-nav-item.seam-side-nav-item--active{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .active,seam-side-nav-item.seam-side-nav-item--active:active,seam-side-nav-item.seam-side-nav-item--active .side-nav-item.active:hover{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item.seam-side-nav-item--active .nav-link{color:#fff}seam-side-nav-item.seam-side-nav-item--active .side-nav-btn{color:#fff}seam-side-nav-item .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#fff;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"], dependencies: [{ kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "hideEmptyIcon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "isMobile", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "menuItemTooltipConfig", "menuItemTooltipDisabled"], exportAs: ["seamSideNavItem"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i4$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], animations: [
         trigger('childGroupAnim', [
             state(EXPANDED_STATE$1, style({ height: '*' })),
-            state(COLLAPSED_STATE$1, style({ height: 0, 'overflow-y': 'hidden', visibility: 'hidden' })),
+            state(COLLAPSED_STATE$1, style({ height: 0, visibility: 'hidden' })),
             transition(`${EXPANDED_STATE$1} <=> ${COLLAPSED_STATE$1}`, animate('0.2s ease-in-out')),
         ]),
-        trigger('compactAnim', [
-        // transition('* <=> *', [
-        //   query(':enter', [
-        //     style({ opacity: '0' }),
-        //     animate('5.2s ease-in-out', style({ opacity: '1' }))
-        //   ], { optional: true }),
-        //   query(':leave', [
-        //     style({ opacity: '1' }),
-        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
-        //   ], { optional: true })
-        // ])
-        // state(FULL_STATE, style({ opacity: '1' })),
-        // state(COMPACT_STATE, style({ opacity: '0' })),
-        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, animate('5.2s ease-in-out')),
-        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, [
-        // transition('* <=> *', [
-        //   query(':leave', [
-        //     style({ opacity: '1' }),
-        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
-        //   ], { optional: true })
-        // ]),
-        ])
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     InputBoolean()
@@ -1214,45 +1235,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             args: [{ selector: 'seam-side-nav-item', exportAs: 'seamSideNavItem', animations: [
                         trigger('childGroupAnim', [
                             state(EXPANDED_STATE$1, style({ height: '*' })),
-                            state(COLLAPSED_STATE$1, style({ height: 0, 'overflow-y': 'hidden', visibility: 'hidden' })),
+                            state(COLLAPSED_STATE$1, style({ height: 0, visibility: 'hidden' })),
                             transition(`${EXPANDED_STATE$1} <=> ${COLLAPSED_STATE$1}`, animate('0.2s ease-in-out')),
                         ]),
-                        trigger('compactAnim', [
-                        // transition('* <=> *', [
-                        //   query(':enter', [
-                        //     style({ opacity: '0' }),
-                        //     animate('5.2s ease-in-out', style({ opacity: '1' }))
-                        //   ], { optional: true }),
-                        //   query(':leave', [
-                        //     style({ opacity: '1' }),
-                        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
-                        //   ], { optional: true })
-                        // ])
-                        // state(FULL_STATE, style({ opacity: '1' })),
-                        // state(COMPACT_STATE, style({ opacity: '0' })),
-                        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, animate('5.2s ease-in-out')),
-                        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, [
-                        // transition('* <=> *', [
-                        //   query(':leave', [
-                        //     style({ opacity: '1' }),
-                        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
-                        //   ], { optional: true })
-                        // ]),
-                        ])
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"d-flex flex-row\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state?.active\"\n      [expanded]=\"$any(child).__state?.expanded\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    (click)=\"_linkClicked()\">\n    <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n    <div class=\"side-nav-item--icon\">\n      <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\"\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"side-nav-item--toggle-btn\"\n      [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["seam-side-nav-item{display:block;transition:.25s ease-in-out background-color}seam-side-nav-item.seam-side-nav-item--active{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .active,seam-side-nav-item.seam-side-nav-item--active:active,seam-side-nav-item.seam-side-nav-item--active .side-nav-item.active:hover{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item.seam-side-nav-item--active .nav-link{color:#fff}seam-side-nav-item .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#2f71a9;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn{color:#fff}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"] }]
+                    ], imports: [
+                        CommonModule,
+                        RouterModule,
+                        TheSeamIconModule,
+                        A11yModule,
+                        NgbTooltipModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, template: "<div class=\"d-flex flex-row side-nav-item-wrapper\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [isMobile]=\"isMobile\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state?.active\"\n      [expanded]=\"$any(child).__state?.expanded\"\n      [hideEmptyIcon]=\"hideEmptyIcon\"\n      [indentSize]=\"indentSize\"\n      [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n      [menuItemTooltipDisabled]=\"menuItemTooltipDisabled\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row align-items-stretch rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <div class=\"d-flex flex-row w-100\"\n    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n    <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n      [class.nav-link__compact]=\"compact\"\n      [routerLink]=\"link\"\n      [queryParams]=\"queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      (click)=\"_linkClicked()\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </a>\n\n    <ng-template #noLink>\n      <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n        [class.nav-link__compact]=\"compact\"\n        [ngbTooltip]=\"label\"\n        [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n        [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n        [container]=\"$any(menuItemTooltipConfig)?.container\"\n        [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n        <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n        <div class=\"side-nav-item--icon\">\n          <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        </div>\n        <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n          {{ label }}\n        </span>\n        <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      </a>\n    </ng-template>\n\n    <button *ngIf=\"hasChildren && !compact\"\n      type=\"button\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\"\n      (click)=\"toggleChildren()\"\n      [attr.aria-expanded]=\"expanded\"\n      cdkMonitorElementFocus>\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n      <span class=\"sr-only\">Group Toggle</span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"isMobile || !badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["seam-side-nav-item{display:block;transition:.25s ease-in-out background-color}seam-side-nav-item.seam-side-nav-item--active{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .active,seam-side-nav-item.seam-side-nav-item--active:active,seam-side-nav-item.seam-side-nav-item--active .side-nav-item.active:hover{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item.seam-side-nav-item--active .nav-link{color:#fff}seam-side-nav-item.seam-side-nav-item--active .side-nav-btn{color:#fff}seam-side-nav-item .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#fff;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [THESEAM_SIDE_NAV_ACCESSOR]
-                }] }, { type: SideNavItemComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }, {
-                    type: Host
                 }] }]; }, propDecorators: { itemType: [{
                 type: Input
             }], icon: [{
                 type: Input
+            }], hideEmptyIcon: [{
+                type: Input
             }], label: [{
                 type: Input
             }], active: [{
@@ -1271,6 +1272,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], compact: [{
                 type: Input
+            }], isMobile: [{
+                type: Input
             }], badgeText: [{
                 type: Input
             }], badgeTheme: [{
@@ -1279,6 +1282,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], badgeTooltip: [{
                 type: Input
+            }], menuItemTooltipConfig: [{
+                type: Input
+            }], menuItemTooltipDisabled: [{
+                type: Input
             }], _isActiveCssClass: [{
                 type: HostBinding,
                 args: ['class.seam-side-nav-item--active']
@@ -1289,7 +1296,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 
 class SideNavToggleComponent {
     constructor() {
-        this.faBars = faBars;
         this.expanded = false;
         this.toggleExpand = new EventEmitter();
     }
@@ -1298,7 +1304,7 @@ class SideNavToggleComponent {
     }
 }
 SideNavToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SideNavToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideNavToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SideNavToggleComponent, selector: "seam-side-nav-toggle", inputs: { expanded: "expanded" }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "class.side-nav-toggle--compact": "!expanded" } }, ngImport: i0, template: "<div class=\"side-nav-toggle--content\" *ngIf=\"expanded\">\n  <ng-content></ng-content>\n</div>\n<button seamIconBtn [icon]=\"faBars\"\n  iconType=\"borderless-styled-square\"\n  btnSize=\"sm\"\n  class=\"side-nav-toggle--btn ml-1\"\n  (click)=\"toggle()\">\n  <span class=\"sr-only\">Toggle sidebar</span>\n</button>\n", styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{position:absolute;top:0;right:5px;color:#fff}seam-side-nav-toggle .side-nav-toggle--btn seam-icon{padding:5px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SideNavToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SideNavToggleComponent, isStandalone: true, selector: "seam-side-nav-toggle", inputs: { expanded: "expanded", toggleIcon: "toggleIcon", toggleTpl: "toggleTpl" }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "class.side-nav-toggle--compact": "!expanded" } }, ngImport: i0, template: "<div class=\"side-nav-toggle--content\">\n  <ng-container *ngIf=\"expanded\">\n    <ng-content></ng-content>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"toggleTpl; else iconBtn\">\n  <button\n    class=\"side-nav-toggle--btn mx-1\"\n    (click)=\"toggle()\">\n    <span class=\"sr-only\">Toggle sidebar</span>\n    <ng-container *ngTemplateOutlet=\"toggleTpl\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #iconBtn>\n  <button seamIconBtn [icon]=\"toggleIcon\"\n    iconType=\"borderless-styled-square\"\n    btnSize=\"sm\"\n    class=\"side-nav-toggle--btn mx-1\"\n    (click)=\"toggle()\">\n    <span class=\"sr-only\">Toggle sidebar</span>\n  </button>\n</ng-template>\n", styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;align-items:center;background:#357ebd;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{color:#fff}seam-side-nav-toggle .side-nav-toggle--btn seam-icon{padding:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2$1.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     InputBoolean()
 ], SideNavToggleComponent.prototype, "expanded", void 0);
@@ -1306,9 +1312,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             type: Component,
             args: [{ selector: 'seam-side-nav-toggle', host: {
                         '[class.side-nav-toggle--compact]': '!expanded'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"side-nav-toggle--content\" *ngIf=\"expanded\">\n  <ng-content></ng-content>\n</div>\n<button seamIconBtn [icon]=\"faBars\"\n  iconType=\"borderless-styled-square\"\n  btnSize=\"sm\"\n  class=\"side-nav-toggle--btn ml-1\"\n  (click)=\"toggle()\">\n  <span class=\"sr-only\">Toggle sidebar</span>\n</button>\n", styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{position:absolute;top:0;right:5px;color:#fff}seam-side-nav-toggle .side-nav-toggle--btn seam-icon{padding:5px}\n"] }]
+                    }, imports: [
+                        CommonModule,
+                        TheSeamIconModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, template: "<div class=\"side-nav-toggle--content\">\n  <ng-container *ngIf=\"expanded\">\n    <ng-content></ng-content>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"toggleTpl; else iconBtn\">\n  <button\n    class=\"side-nav-toggle--btn mx-1\"\n    (click)=\"toggle()\">\n    <span class=\"sr-only\">Toggle sidebar</span>\n    <ng-container *ngTemplateOutlet=\"toggleTpl\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #iconBtn>\n  <button seamIconBtn [icon]=\"toggleIcon\"\n    iconType=\"borderless-styled-square\"\n    btnSize=\"sm\"\n    class=\"side-nav-toggle--btn mx-1\"\n    (click)=\"toggle()\">\n    <span class=\"sr-only\">Toggle sidebar</span>\n  </button>\n</ng-template>\n", styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;align-items:center;background:#357ebd;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{color:#fff}seam-side-nav-toggle .side-nav-toggle--btn seam-icon{padding:5px}\n"] }]
         }], propDecorators: { expanded: [{
                 type: Input
+            }], toggleIcon: [{
+                type: Input
+            }], toggleTpl: [{
+                type: Input
             }], toggleExpand: [{
                 type: Output
             }] } });
@@ -1602,29 +1615,58 @@ class SideNavComponent {
     }
     get overlay() { return this._overlay.value; }
     set overlay(value) { this._overlay.next(coerceBooleanProperty(value)); }
+    get menuItemTooltipConfig() { return this._menuItemTooltipConfig; }
+    set menuItemTooltipConfig(value) {
+        this._menuItemTooltipConfig = {
+            class: value?.class,
+            placement: value?.placement || this._menuItemTooltipConfig.placement,
+            container: value?.container || this._menuItemTooltipConfig.container,
+            behavior: value?.behavior || this._menuItemTooltipConfig.behavior
+        };
+    }
     constructor(_viewContainerRef, _layout, _sideNav, _baseLayoutRef) {
         this._viewContainerRef = _viewContainerRef;
         this._layout = _layout;
         this._sideNav = _sideNav;
         this._baseLayoutRef = _baseLayoutRef;
         this._ngUnsubscribe = new Subject();
+        this.faBars = faBars;
         // @HostBinding('@sideNavExpand') _sideNavExpand = EXPANDED_STATE
         // _sideNavExpand = EXPANDED_STATE
         // @HostBinding('@sideNavAnim') _sideNavExpand = EXPANDED_STATE
         this._sideNavExpand = 'initial';
         this.hasHeaderToggle = true;
+        this.toggleIcon = faBars;
         this._items = new BehaviorSubject([]);
+        this.indentSize = 10;
         this._expanded = new BehaviorSubject(true);
         this.expanded$ = this._expanded.asObservable();
+        this.expandOrigin = 'left';
+        this.expandHeight = '100%';
+        this.expandWidth = 'calc(100vw - 50px)';
         this._overlay = new BehaviorSubject(false);
         this.overlay$ = this._overlay.asObservable();
+        this._menuItemTooltipConfig = {
+            placement: 'right',
+            container: 'body',
+            behavior: 'always'
+        };
         this.toggleExpand = new EventEmitter();
         this._backdropHidden = new BehaviorSubject(true);
-        this.items$ = this._items.asObservable().pipe(switchMap(items => this._sideNav.createItemsObservable(items)), shareReplay({ bufferSize: 1, refCount: true }));
+        this.items$ = this._items.asObservable().pipe(switchMap(items => items ? this._sideNav.createItemsObservable(items) : []), shareReplay({ bufferSize: 1, refCount: true }));
         this.isMobile$ = this._layout.isMobile$.pipe(tap(isMobile => isMobile ? this.collapse() : this.expand()));
         this.sideNavExpandedState$ = combineLatest([this.expanded$, this.overlay$]).pipe(map(([expanded, overlay]) => expanded
             ? overlay ? EXPANDED_OVERLAY_STATE : EXPANDED_STATE
             : overlay ? COLLAPSED_OVERLAY_STATE : COLLAPSED_STATE), distinctUntilChanged());
+        this.menuItemTooltipDisabled$ = combineLatest([this.expanded$, this.overlay$]).pipe(map(([expanded, overlay]) => {
+            // never display tooltip on mobile, it breaks the layout
+            if (overlay) {
+                return true;
+            }
+            return this.menuItemTooltipConfig?.behavior === 'always' ? false
+                : this.menuItemTooltipConfig?.behavior === 'never' ? true
+                    : this.menuItemTooltipConfig?.behavior === 'collapseOnly' ? expanded : true;
+        }), distinctUntilChanged());
     }
     ngOnInit() {
         if (this._baseLayoutRef) {
@@ -1636,6 +1678,9 @@ class SideNavComponent {
         this.sideNavExpandedState$
             .pipe(takeUntil(this._ngUnsubscribe))
             .subscribe(v => this._sideNavExpand = v);
+        if (this._sideBarHeaderTpl) {
+            this._sideBarHeaderPortal = new TemplatePortal(this._sideBarHeaderTpl, this._viewContainerRef);
+        }
         if (this._sideBarFooterTpl) {
             this._sideBarFooterPortal = new TemplatePortal(this._sideBarFooterTpl, this._viewContainerRef);
         }
@@ -1666,16 +1711,32 @@ class SideNavComponent {
             this._backdropHidden.next(true);
         }
     }
+    get expandOriginTransform() {
+        switch (this.expandOrigin) {
+            case 'right':
+                return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateX(100vw) translateX(-100%)'
+                    : this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateX(100vw)' : null;
+            case 'top':
+                return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateY(0)'
+                    : this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateY(-100%)' : null;
+            case 'bottom':
+                return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateY(100vh) translateY(-100%)'
+                    : this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateY(100vh)' : null;
+            case 'left':
+            default:
+                return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateX(0)'
+                    : this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateX(-100%)' : null;
+        }
+    }
 }
 SideNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SideNavComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.TheSeamLayoutService }, { token: TheSeamSideNavService }, { token: THESEAM_BASE_LAYOUT_REF, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SideNavComponent, selector: "seam-side-nav", inputs: { hasHeaderToggle: "hasHeaderToggle", items: "items", expanded: "expanded", overlay: "overlay" }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "@sideNavAnim": "this._sideNavExpand" } }, providers: [
+SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SideNavComponent, isStandalone: true, selector: "seam-side-nav", inputs: { hasHeaderToggle: "hasHeaderToggle", toggleIcon: "toggleIcon", toggleTpl: "toggleTpl", items: "items", hideEmptyIcon: "hideEmptyIcon", indentSize: "indentSize", expanded: "expanded", expandOrigin: "expandOrigin", expandHeight: "expandHeight", expandWidth: "expandWidth", overlay: "overlay", menuItemTooltipConfig: "menuItemTooltipConfig" }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "@sideNavAnim": "this._sideNavExpand" } }, providers: [
         TheSeamSideNavService,
         {
             provide: THESEAM_SIDE_NAV_ACCESSOR,
-            // tslint:disable-next-line:no-use-before-declare
-            useExisting: forwardRef(() => SideNavComponent)
+            useExisting: SideNavComponent
         },
-    ], queries: [{ propertyName: "_sideBarFooterTpl", first: true, predicate: BaseLayoutSideBarFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"></div>\n\n<div class=\"side-nav-inner-wrapper\" [@sideNavExpand]=\"_sideNavExpand\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n        [compact]=\"!(expanded$ | async)\"\n        [itemType]=\"$any(item)?.itemType\"\n        [icon]=\"$any(item)?.icon\"\n        [label]=\"$any(item)?.label\"\n        [link]=\"$any(item)?.link\"\n        [badgeText]=\"$any(item)?.badge?.text\"\n        [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n        [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n        [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n        [queryParams]=\"$any(item)?.queryParams\"\n        [children]=\"$any(item)?.children\"\n        [active]=\"$any(item).__state.active\"\n        [expanded]=\"$any(item).__state.expanded\">\n      </seam-side-nav-item>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip"], exportAs: ["seamSideNavItem"] }, { kind: "component", type: SideNavToggleComponent, selector: "seam-side-nav-toggle", inputs: ["expanded"], outputs: ["toggleExpand"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
+    ], queries: [{ propertyName: "_sideBarHeaderTpl", first: true, predicate: BaseLayoutSideBarHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_sideBarFooterTpl", first: true, predicate: BaseLayoutSideBarFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"\n  (click)=\"collapse()\"></div>\n\n<div\n  class=\"side-nav-inner-wrapper\"\n  [@sideNavExpand]=\"{\n    value: _sideNavExpand,\n    params: {\n      origin: expandOriginTransform,\n      height: expandHeight,\n      width: expandWidth\n    }\n  }\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [toggleIcon]=\"toggleIcon\"\n      [toggleTpl]=\"toggleTpl\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarHeaderPortal\"></ng-template>\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <div class=\"side-nav--group side-nav--group--level-0\">\n        <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n          [compact]=\"!(expanded$ | async)\"\n          [isMobile]=\"isMobile$ | async\"\n          [itemType]=\"$any(item)?.itemType\"\n          [icon]=\"$any(item)?.icon\"\n          [label]=\"$any(item)?.label\"\n          [link]=\"$any(item)?.link\"\n          [badgeText]=\"$any(item)?.badge?.text\"\n          [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n          [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n          [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n          [queryParams]=\"$any(item)?.queryParams\"\n          [children]=\"$any(item)?.children\"\n          [active]=\"$any(item).__state?.active\"\n          [expanded]=\"$any(item).__state?.expanded\"\n          [hideEmptyIcon]=\"hideEmptyIcon\"\n          [indentSize]=\"indentSize\"\n          [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n          [menuItemTooltipDisabled]=\"menuItemTooltipDisabled$ | async\">\n        </seam-side-nav-item>\n      </div>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: TheSeamScrollbarModule }, { kind: "directive", type: i4.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "ngmodule", type: TheSeamLayoutModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "hideEmptyIcon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "isMobile", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "menuItemTooltipConfig", "menuItemTooltipDisabled"], exportAs: ["seamSideNavItem"] }, { kind: "component", type: SideNavToggleComponent, selector: "seam-side-nav-toggle", inputs: ["expanded", "toggleIcon", "toggleTpl"], outputs: ["toggleExpand"] }], animations: [
         //
         // TODO: This animation code turned into a mess. Clean it up and make it
         // more smooth.
@@ -1698,32 +1759,42 @@ SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
             transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
         ]),
         trigger('sideNavExpand', [
-            // TODO: Make width configurable.
+            // TODO: Make width configurable for non-overlay state.
             state(EXPANDED_STATE, style({ width: '260px' })),
             state(COLLAPSED_STATE, style({ width: '50px', 'overflow-x': 'hidden' })),
             state(EXPANDED_OVERLAY_STATE, style({
                 position: 'absolute',
                 top: 0,
-                height: '100%',
                 bottom: 0,
                 left: 0,
-                float: 'left',
+                height: '{{ height }}',
+                width: '{{ width }}',
+                transform: '{{ origin }}',
                 zIndex: '9999',
-                width: 'calc(100vw - 50px)',
-                transform: 'translateX(0)'
-            })),
+            }), {
+                params: {
+                    origin: 'translateX(100%)',
+                    height: '100%',
+                    width: 'calc(100vw - 50px)',
+                }
+            }),
             state(COLLAPSED_OVERLAY_STATE, style({
                 position: 'absolute',
                 top: 0,
-                height: '100%',
                 bottom: 0,
                 left: 0,
-                float: 'left',
+                height: '{{ height }}',
+                width: '{{ width }}',
+                transform: '{{ origin }}',
+                'overflow-x': 'hidden',
                 zIndex: '9999',
-                width: 'calc(100vw - 50px)',
-                transform: 'translateX(calc(-100vw + 50px))',
-                'overflow-x': 'hidden'
-            })),
+            }), {
+                params: {
+                    origin: 'translateX(0)',
+                    height: '100%',
+                    width: 'calc(100vw - 50px)',
+                }
+            }),
             // transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
             transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
             // transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, [
@@ -1741,14 +1812,16 @@ SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
 __decorate([
     InputBoolean()
 ], SideNavComponent.prototype, "hasHeaderToggle", void 0);
+__decorate([
+    InputNumber(10)
+], SideNavComponent.prototype, "indentSize", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SideNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-side-nav', providers: [
                         TheSeamSideNavService,
                         {
                             provide: THESEAM_SIDE_NAV_ACCESSOR,
-                            // tslint:disable-next-line:no-use-before-declare
-                            useExisting: forwardRef(() => SideNavComponent)
+                            useExisting: SideNavComponent
                         },
                     ], animations: [
                         //
@@ -1773,32 +1846,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                             transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
                         ]),
                         trigger('sideNavExpand', [
-                            // TODO: Make width configurable.
+                            // TODO: Make width configurable for non-overlay state.
                             state(EXPANDED_STATE, style({ width: '260px' })),
                             state(COLLAPSED_STATE, style({ width: '50px', 'overflow-x': 'hidden' })),
                             state(EXPANDED_OVERLAY_STATE, style({
                                 position: 'absolute',
                                 top: 0,
-                                height: '100%',
                                 bottom: 0,
                                 left: 0,
-                                float: 'left',
+                                height: '{{ height }}',
+                                width: '{{ width }}',
+                                transform: '{{ origin }}',
                                 zIndex: '9999',
-                                width: 'calc(100vw - 50px)',
-                                transform: 'translateX(0)'
-                            })),
+                            }), {
+                                params: {
+                                    origin: 'translateX(100%)',
+                                    height: '100%',
+                                    width: 'calc(100vw - 50px)',
+                                }
+                            }),
                             state(COLLAPSED_OVERLAY_STATE, style({
                                 position: 'absolute',
                                 top: 0,
-                                height: '100%',
                                 bottom: 0,
                                 left: 0,
-                                float: 'left',
+                                height: '{{ height }}',
+                                width: '{{ width }}',
+                                transform: '{{ origin }}',
+                                'overflow-x': 'hidden',
                                 zIndex: '9999',
-                                width: 'calc(100vw - 50px)',
-                                transform: 'translateX(calc(-100vw + 50px))',
-                                'overflow-x': 'hidden'
-                            })),
+                            }), {
+                                params: {
+                                    origin: 'translateX(0)',
+                                    height: '100%',
+                                    width: 'calc(100vw - 50px)',
+                                }
+                            }),
                             // transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
                             transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
                             // transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, [
@@ -1812,7 +1895,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                             //   ])
                             // ]),
                         ])
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"></div>\n\n<div class=\"side-nav-inner-wrapper\" [@sideNavExpand]=\"_sideNavExpand\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n        [compact]=\"!(expanded$ | async)\"\n        [itemType]=\"$any(item)?.itemType\"\n        [icon]=\"$any(item)?.icon\"\n        [label]=\"$any(item)?.label\"\n        [link]=\"$any(item)?.link\"\n        [badgeText]=\"$any(item)?.badge?.text\"\n        [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n        [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n        [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n        [queryParams]=\"$any(item)?.queryParams\"\n        [children]=\"$any(item)?.children\"\n        [active]=\"$any(item).__state.active\"\n        [expanded]=\"$any(item).__state.expanded\">\n      </seam-side-nav-item>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"] }]
+                    ], imports: [
+                        CommonModule,
+                        A11yModule,
+                        TheSeamScrollbarModule,
+                        TheSeamLayoutModule,
+                        PortalModule,
+                        SideNavItemComponent,
+                        SideNavToggleComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"\n  (click)=\"collapse()\"></div>\n\n<div\n  class=\"side-nav-inner-wrapper\"\n  [@sideNavExpand]=\"{\n    value: _sideNavExpand,\n    params: {\n      origin: expandOriginTransform,\n      height: expandHeight,\n      width: expandWidth\n    }\n  }\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [toggleIcon]=\"toggleIcon\"\n      [toggleTpl]=\"toggleTpl\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarHeaderPortal\"></ng-template>\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <div class=\"side-nav--group side-nav--group--level-0\">\n        <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n          [compact]=\"!(expanded$ | async)\"\n          [isMobile]=\"isMobile$ | async\"\n          [itemType]=\"$any(item)?.itemType\"\n          [icon]=\"$any(item)?.icon\"\n          [label]=\"$any(item)?.label\"\n          [link]=\"$any(item)?.link\"\n          [badgeText]=\"$any(item)?.badge?.text\"\n          [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n          [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n          [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n          [queryParams]=\"$any(item)?.queryParams\"\n          [children]=\"$any(item)?.children\"\n          [active]=\"$any(item).__state?.active\"\n          [expanded]=\"$any(item).__state?.expanded\"\n          [hideEmptyIcon]=\"hideEmptyIcon\"\n          [indentSize]=\"indentSize\"\n          [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n          [menuItemTooltipDisabled]=\"menuItemTooltipDisabled$ | async\">\n        </seam-side-nav-item>\n      </div>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1.TheSeamLayoutService }, { type: TheSeamSideNavService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1823,14 +1914,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 args: ['@sideNavAnim']
             }], hasHeaderToggle: [{
                 type: Input
+            }], toggleIcon: [{
+                type: Input
+            }], toggleTpl: [{
+                type: Input
             }], items: [{
                 type: Input
+            }], hideEmptyIcon: [{
+                type: Input
+            }], indentSize: [{
+                type: Input
             }], expanded: [{
                 type: Input
+            }], expandOrigin: [{
+                type: Input
+            }], expandHeight: [{
+                type: Input
+            }], expandWidth: [{
+                type: Input
             }], overlay: [{
                 type: Input
+            }], menuItemTooltipConfig: [{
+                type: Input
             }], toggleExpand: [{
                 type: Output
+            }], _sideBarHeaderTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutSideBarHeaderDirective, { static: true, read: TemplateRef }]
             }], _sideBarFooterTpl: [{
                 type: ContentChild,
                 args: [BaseLayoutSideBarFooterDirective, { static: true, read: TemplateRef }]
@@ -1839,48 +1949,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 class TheSeamSideNavModule {
 }
 TheSeamSideNavModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheSeamSideNavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSideNavModule, declarations: [SideNavItemComponent,
+TheSeamSideNavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSideNavModule, imports: [SideNavItemComponent,
         SideNavComponent,
-        SideNavToggleComponent], imports: [CommonModule,
-        RouterModule,
-        TheSeamIconModule,
-        A11yModule,
-        TheSeamScrollbarModule,
-        TheSeamLayoutModule,
-        NgbTooltipModule,
-        PortalModule], exports: [SideNavItemComponent,
+        SideNavToggleComponent], exports: [SideNavItemComponent,
+        SideNavComponent,
+        SideNavToggleComponent] });
+TheSeamSideNavModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSideNavModule, imports: [SideNavItemComponent,
         SideNavComponent,
         SideNavToggleComponent] });
-TheSeamSideNavModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSideNavModule, imports: [CommonModule,
-        RouterModule,
-        TheSeamIconModule,
-        A11yModule,
-        TheSeamScrollbarModule,
-        TheSeamLayoutModule,
-        NgbTooltipModule,
-        PortalModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSideNavModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
+                    imports: [
                         SideNavItemComponent,
                         SideNavComponent,
-                        SideNavToggleComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        TheSeamIconModule,
-                        A11yModule,
-                        TheSeamScrollbarModule,
-                        TheSeamLayoutModule,
-                        NgbTooltipModule,
-                        PortalModule
+                        SideNavToggleComponent,
                     ],
                     exports: [
                         SideNavItemComponent,
                         SideNavComponent,
-                        SideNavToggleComponent
+                        SideNavToggleComponent,
                     ]
                 }]
         }] });
@@ -1900,7 +1988,7 @@ class TopBarMenuButtonComponent extends _TopBarMenuButtonMixinBase {
     get _hasBtnLinkClass() { return !this.compact; }
 }
 TopBarMenuButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TopBarMenuButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TopBarMenuButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TopBarMenuButtonComponent, selector: "button[seamTopBarMenuButton]", inputs: { disabled: "disabled", detailTpl: "detailTpl", compact: "compact", profileIcon: "profileIcon" }, host: { attributes: { "attr.type": "button" }, properties: { "attr.aria-disabled": "disabled.toString()", "attr.disabled": "disabled || null", "class.top-bar-menu-button--compact": "this._hasCompactClass", "class.p-0": "this._hasPadding0Class", "class.rounded": "this._hasRoundedClass", "class.btn-link": "this._hasBtnLinkClass" }, classAttribute: "btn border text-decoration-none py-0" }, exportAs: ["seamButton"], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-row\" *ngIf=\"!compact; else compactTpl\">\n  <div class=\"text-left flex-grow-1 text-truncate\">\n    <ng-template [ngTemplateOutlet]=\"$any(detailTpl)\"></ng-template>\n  </div>\n  <!-- Arrow Button -->\n  <div class=\"pl-2 d-flex flex-column\">\n    <div class=\"flex-grow-1\"></div>\n    <seam-icon class=\"d-block\" [icon]=\"faAngleDown\"></seam-icon>\n    <div class=\"flex-grow-1\"></div>\n  </div>\n</div>\n<ng-template #compactTpl>\n  <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n</ng-template>\n", styles: ["button[seamTopBarMenuButton]{min-width:200px;border-radius:0;border-top:0!important;border-bottom:0!important;border-right:0!important}button[seamTopBarMenuButton].top-bar-menu-button--compact{min-width:40px;border-left:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TopBarMenuButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TopBarMenuButtonComponent, selector: "button[seamTopBarMenuButton]", inputs: { disabled: "disabled", detailTpl: "detailTpl", compactDetailTpl: "compactDetailTpl", compact: "compact", profileIcon: "profileIcon" }, host: { attributes: { "attr.type": "button" }, properties: { "attr.aria-disabled": "disabled.toString()", "attr.disabled": "disabled || null", "class.top-bar-menu-button--compact": "this._hasCompactClass", "class.p-0": "this._hasPadding0Class", "class.rounded": "this._hasRoundedClass", "class.btn-link": "this._hasBtnLinkClass" }, classAttribute: "btn border text-decoration-none py-0 top-bar-menu-button" }, exportAs: ["seamButton"], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-row\" *ngIf=\"!compact; else compactTpl\">\n  <div class=\"text-left flex-grow-1 text-truncate\">\n    <ng-template [ngTemplateOutlet]=\"$any(detailTpl)\"></ng-template>\n  </div>\n  <!-- Arrow Button -->\n  <div class=\"pl-2 d-flex flex-column\">\n    <div class=\"flex-grow-1\"></div>\n    <seam-icon class=\"d-block\" [icon]=\"faAngleDown\"></seam-icon>\n    <div class=\"flex-grow-1\"></div>\n  </div>\n</div>\n<ng-template #compactTpl>\n  <ng-container *ngIf=\"compactDetailTpl; else iconTpl\">\n    <ng-template [ngTemplateOutlet]=\"$any(compactDetailTpl)\"></ng-template>\n  </ng-container>\n  <ng-template #iconTpl>\n    <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n  </ng-template>\n</ng-template>\n", styles: ["button[seamTopBarMenuButton]{min-width:200px;border-radius:0;border-top:0!important;border-bottom:0!important;border-right:0!important}button[seamTopBarMenuButton].top-bar-menu-button--compact{min-width:40px;border-left:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     InputBoolean()
 ], TopBarMenuButtonComponent.prototype, "compact", void 0);
@@ -1908,12 +1996,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             type: Component,
             args: [{ selector: 'button[seamTopBarMenuButton]', encapsulation: ViewEncapsulation.None, exportAs: 'seamButton', inputs: ['disabled'], host: {
                         'attr.type': 'button',
-                        'class': 'btn border text-decoration-none py-0',
+                        'class': 'btn border text-decoration-none py-0 top-bar-menu-button',
                         '[attr.aria-disabled]': 'disabled.toString()',
                         '[attr.disabled]': 'disabled || null',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-row\" *ngIf=\"!compact; else compactTpl\">\n  <div class=\"text-left flex-grow-1 text-truncate\">\n    <ng-template [ngTemplateOutlet]=\"$any(detailTpl)\"></ng-template>\n  </div>\n  <!-- Arrow Button -->\n  <div class=\"pl-2 d-flex flex-column\">\n    <div class=\"flex-grow-1\"></div>\n    <seam-icon class=\"d-block\" [icon]=\"faAngleDown\"></seam-icon>\n    <div class=\"flex-grow-1\"></div>\n  </div>\n</div>\n<ng-template #compactTpl>\n  <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n</ng-template>\n", styles: ["button[seamTopBarMenuButton]{min-width:200px;border-radius:0;border-top:0!important;border-bottom:0!important;border-right:0!important}button[seamTopBarMenuButton].top-bar-menu-button--compact{min-width:40px;border-left:0!important}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-row\" *ngIf=\"!compact; else compactTpl\">\n  <div class=\"text-left flex-grow-1 text-truncate\">\n    <ng-template [ngTemplateOutlet]=\"$any(detailTpl)\"></ng-template>\n  </div>\n  <!-- Arrow Button -->\n  <div class=\"pl-2 d-flex flex-column\">\n    <div class=\"flex-grow-1\"></div>\n    <seam-icon class=\"d-block\" [icon]=\"faAngleDown\"></seam-icon>\n    <div class=\"flex-grow-1\"></div>\n  </div>\n</div>\n<ng-template #compactTpl>\n  <ng-container *ngIf=\"compactDetailTpl; else iconTpl\">\n    <ng-template [ngTemplateOutlet]=\"$any(compactDetailTpl)\"></ng-template>\n  </ng-container>\n  <ng-template #iconTpl>\n    <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n  </ng-template>\n</ng-template>\n", styles: ["button[seamTopBarMenuButton]{min-width:200px;border-radius:0;border-top:0!important;border-bottom:0!important;border-right:0!important}button[seamTopBarMenuButton].top-bar-menu-button--compact{min-width:40px;border-left:0!important}\n"] }]
         }], propDecorators: { detailTpl: [{
                 type: Input
+            }], compactDetailTpl: [{
+                type: Input
             }], compact: [{
                 type: Input
             }], profileIcon: [{
@@ -1945,19 +2035,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }] } });
 
+class TopBarCompactMenuBtnDetailDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+TopBarCompactMenuBtnDetailDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TopBarCompactMenuBtnDetailDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TopBarCompactMenuBtnDetailDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: TopBarCompactMenuBtnDetailDirective, selector: "[seamTopBarCompactMenuBtnDetail]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TopBarCompactMenuBtnDetailDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamTopBarCompactMenuBtnDetail]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class TopBarNavToggleBtnDetailDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+TopBarNavToggleBtnDetailDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TopBarNavToggleBtnDetailDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TopBarNavToggleBtnDetailDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: TopBarNavToggleBtnDetailDirective, selector: "[seamTopBarNavToggleBtnDetail]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TopBarNavToggleBtnDetailDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamTopBarNavToggleBtnDetail]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
 class TopBarItemDirective {
+    set seamTopBarItem(value) {
+        this.position = value;
+    }
     constructor(template) {
         this.template = template;
+        this.position = 'right';
     }
 }
 TopBarItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TopBarItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TopBarItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: TopBarItemDirective, selector: "[seamTopBarItem]", ngImport: i0 });
+TopBarItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: TopBarItemDirective, selector: "[seamTopBarItem]", inputs: { seamTopBarItem: "seamTopBarItem" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TopBarItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamTopBarItem]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { seamTopBarItem: [{
+                type: Input
+            }] } });
 
 class TopBarMenuBtnDetailDirective {
     constructor(template) {
@@ -2013,8 +2137,26 @@ class TheSeamTopBarComponent {
         this.logoRoute = '/';
         /** Determines if the title should be displayed. */
         this.hasTitle = false;
+        /** Determines if the top bar button should be displayed. */
+        this.hasTopBarMenuButton = true;
         /** Icon to display on mobile to activate profile dropdown. Defaults to faUserCircle. */
         this.profileIcon = faUserCircle;
+        /** Icon to display for mobile nav toggle. Defaults to faBars. */
+        this.toggleIcon = faBars;
+        /** Display nav toggle on either left or right side of top bar. Defaults to left. */
+        this.navToggleAlign = 'left';
+        /** @ignore */
+        this._leftItems = new BehaviorSubject([]);
+        /** Additional templates to display on left side of top bar */
+        this.leftItems$ = this._leftItems.asObservable();
+        /** @ignore */
+        this._centerItems = new BehaviorSubject([]);
+        /** Additional templates to display in center of top bar */
+        this.centerItems$ = this._centerItems.asObservable();
+        /** @ignore */
+        this._rightItems = new BehaviorSubject([]);
+        /** Additional templates to display on right side of top bar */
+        this.rightItems$ = this._rightItems.asObservable();
         this.isMobile$ = this._layout.isMobile$;
     }
     /** @ignore */
@@ -2025,18 +2167,29 @@ class TheSeamTopBarComponent {
     /** @ignore */
     ngAfterContentInit() {
         if (this._topBarItems) {
-            this._items$ = this._topBarItems.changes.pipe(startWith(undefined), takeUntil(this._ngUnsubscribe), map(() => this._topBarItems?.toArray() || []), shareReplay({ bufferSize: 1, refCount: true }));
+            this._topBarItems.changes.pipe(startWith(undefined), takeUntil(this._ngUnsubscribe), map(() => {
+                const items = this._topBarItems?.toArray() || [];
+                const left = items.filter(i => i.position === 'left');
+                const right = items.filter(i => i.position === 'right');
+                const center = items.filter(i => i.position === 'center');
+                this._leftItems.next(left);
+                this._rightItems.next(right);
+                this._centerItems.next(center);
+            }), shareReplay({ bufferSize: 1, refCount: true })).subscribe();
         }
     }
 }
 TheSeamTopBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamTopBarComponent, deps: [{ token: i1.TheSeamLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamTopBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamTopBarComponent, selector: "seam-top-bar", inputs: { logo: "logo", logoSm: "logoSm", logoHref: "logoHref", logoHrefTarget: "logoHrefTarget", logoRoute: "logoRoute", hasTitle: "hasTitle", titleText: "titleText", subTitleText: "subTitleText", profileIcon: "profileIcon" }, queries: [{ propertyName: "_topBarMenu", first: true, predicate: TopBarMenuDirective, descendants: true, static: true }, { propertyName: "_topBarMenuBtnDetailTpl", first: true, predicate: TopBarMenuBtnDetailDirective, descendants: true }, { propertyName: "_topBarItems", predicate: TopBarItemDirective }], exportAs: ["seamTopBar"], ngImport: i0, template: "<!-- Nav Toggle -->\n<div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n  <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"faBars\" iconType=\"borderless-styled-square\"></button>\n</div>\n\n<!-- Logo -->\n<div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n  [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n  <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </a>\n</div>\n\n<ng-template #useLogoRoute>\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </div>\n</ng-template>\n\n<!-- Title -->\n<div class=\"d-flex flex-column flex-grow-1\">\n  <seam-top-bar-title *ngIf=\"hasTitle\"\n    [titleText]=\"titleText\"\n    [subTitleText]=\"subTitleText\"\n    [class.ml-2]=\"isMobile$ | async\">\n  </seam-top-bar-title>\n</div>\n\n<!-- Items -->\n<div class=\"top-bar-icon-container mr-2\">\n  <ng-container *ngFor=\"let item of _items$ | async\">\n    <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n  </ng-container>\n</div>\n\n<!-- Menu -->\n<button seamTopBarMenuButton\n  [seamMenuToggle]=\"_topBarMenu?.menu\"\n  [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n  [compact]=\"isMobile$ | async\"\n  [profileIcon]=\"profileIcon\">\n</button>\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar-icon-container{margin:auto 0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.DefaultImgSrcDirective, selector: "  img[src.xs],    img[src.sm],    img[src.md],    img[src.lg],   img[src.xl],  img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl],  img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]", inputs: ["src.xs", "src.sm", "src.md", "src.lg", "src.xl", "src.lt-sm", "src.lt-md", "src.lt-lg", "src.lt-xl", "src.gt-xs", "src.gt-sm", "src.gt-md", "src.gt-lg"] }, { kind: "component", type: i2$1.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "directive", type: BaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: ["type", "aria-label"], exportAs: ["seamBaseLayoutNavToggle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TopBarTitleComponent, selector: "seam-top-bar-title", inputs: ["titleText", "subTitleText"] }, { kind: "component", type: TopBarMenuButtonComponent, selector: "button[seamTopBarMenuButton]", inputs: ["disabled", "detailTpl", "compact", "profileIcon"], exportAs: ["seamButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TheSeamTopBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamTopBarComponent, selector: "seam-top-bar", inputs: { logo: "logo", logoSm: "logoSm", logoHref: "logoHref", logoHrefTarget: "logoHrefTarget", logoRoute: "logoRoute", hasTitle: "hasTitle", titleText: "titleText", subTitleText: "subTitleText", hasTopBarMenuButton: "hasTopBarMenuButton", profileIcon: "profileIcon", toggleIcon: "toggleIcon", navToggleAlign: "navToggleAlign" }, queries: [{ propertyName: "_topBarMenu", first: true, predicate: TopBarMenuDirective, descendants: true, static: true }, { propertyName: "_topBarMenuBtnDetailTpl", first: true, predicate: TopBarMenuBtnDetailDirective, descendants: true }, { propertyName: "_topBarCompactMenuBtnDetailTpl", first: true, predicate: TopBarCompactMenuBtnDetailDirective, descendants: true }, { propertyName: "_topBarNavToggleBtnDetailTpl", first: true, predicate: TopBarNavToggleBtnDetailDirective, descendants: true }, { propertyName: "_topBarItems", predicate: TopBarItemDirective }], exportAs: ["seamTopBar"], ngImport: i0, template: "<div class=\"top-bar--left d-flex\">\n  <!-- Nav Toggle -->\n  <ng-container *ngIf=\"navToggleAlign === 'left'\">\n    <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n  </ng-container>\n\n  <!-- Logo -->\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </a>\n  </div>\n\n  <ng-template #useLogoRoute>\n    <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n      [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </div>\n  </ng-template>\n\n  <ng-template #logoTpl>\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"logoSm ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </ng-template>\n\n  <!-- Title -->\n  <div class=\"d-flex flex-column\" *ngIf=\"hasTitle\">\n    <seam-top-bar-title\n      [titleText]=\"titleText\"\n      [subTitleText]=\"subTitleText\"\n      [class.ml-2]=\"isMobile$ | async\">\n    </seam-top-bar-title>\n  </div>\n\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--left mr-2\">\n    <ng-container *ngFor=\"let item of leftItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"top-bar--center\">\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--center mr-2\">\n    <ng-container *ngFor=\"let item of centerItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"top-bar--right d-flex\">\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--right mr-2\">\n    <ng-container *ngFor=\"let item of rightItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n\n  <!-- Menu -->\n  <button\n    *ngIf=\"hasTopBarMenuButton\"\n    seamTopBarMenuButton\n    [seamMenuToggle]=\"_topBarMenu?.menu\"\n    [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n    [compactDetailTpl]=\"_topBarCompactMenuBtnDetailTpl?.template\"\n    [compact]=\"isMobile$ | async\"\n    [profileIcon]=\"profileIcon\">\n  </button>\n\n  <ng-container *ngIf=\"navToggleAlign === 'right'\">\n    <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #navToggle>\n  <div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n    <ng-container *ngIf=\"_topBarNavToggleBtnDetailTpl; else iconBtn\">\n      <button seamButton seamBaseLayoutNavToggle>\n        <ng-template [ngTemplateOutlet]=\"_topBarNavToggleBtnDetailTpl?.template || null\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #iconBtn>\n      <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"toggleIcon\" iconType=\"borderless-styled-square\"></button>\n    </ng-template>\n  </div>\n</ng-template>\n\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar--left{flex-grow:1}.top-bar-items{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.DefaultImgSrcDirective, selector: "  img[src.xs],    img[src.sm],    img[src.md],    img[src.lg],   img[src.xl],  img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl],  img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]", inputs: ["src.xs", "src.sm", "src.md", "src.lg", "src.xl", "src.lt-sm", "src.lt-md", "src.lt-lg", "src.lt-xl", "src.gt-xs", "src.gt-sm", "src.gt-md", "src.gt-lg"] }, { kind: "component", type: i4$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "component", type: i2$1.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "directive", type: BaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: ["type", "aria-label"], exportAs: ["seamBaseLayoutNavToggle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TopBarTitleComponent, selector: "seam-top-bar-title", inputs: ["titleText", "subTitleText"] }, { kind: "component", type: TopBarMenuButtonComponent, selector: "button[seamTopBarMenuButton]", inputs: ["disabled", "detailTpl", "compactDetailTpl", "compact", "profileIcon"], exportAs: ["seamButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     InputBoolean()
 ], TheSeamTopBarComponent.prototype, "hasTitle", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTopBarComponent.prototype, "hasTopBarMenuButton", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamTopBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-top-bar', encapsulation: ViewEncapsulation.None, exportAs: 'seamTopBar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Nav Toggle -->\n<div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n  <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"faBars\" iconType=\"borderless-styled-square\"></button>\n</div>\n\n<!-- Logo -->\n<div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n  [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n  <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </a>\n</div>\n\n<ng-template #useLogoRoute>\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </div>\n</ng-template>\n\n<!-- Title -->\n<div class=\"d-flex flex-column flex-grow-1\">\n  <seam-top-bar-title *ngIf=\"hasTitle\"\n    [titleText]=\"titleText\"\n    [subTitleText]=\"subTitleText\"\n    [class.ml-2]=\"isMobile$ | async\">\n  </seam-top-bar-title>\n</div>\n\n<!-- Items -->\n<div class=\"top-bar-icon-container mr-2\">\n  <ng-container *ngFor=\"let item of _items$ | async\">\n    <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n  </ng-container>\n</div>\n\n<!-- Menu -->\n<button seamTopBarMenuButton\n  [seamMenuToggle]=\"_topBarMenu?.menu\"\n  [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n  [compact]=\"isMobile$ | async\"\n  [profileIcon]=\"profileIcon\">\n</button>\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar-icon-container{margin:auto 0}\n"] }]
+            args: [{ selector: 'seam-top-bar', encapsulation: ViewEncapsulation.None, exportAs: 'seamTopBar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"top-bar--left d-flex\">\n  <!-- Nav Toggle -->\n  <ng-container *ngIf=\"navToggleAlign === 'left'\">\n    <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n  </ng-container>\n\n  <!-- Logo -->\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </a>\n  </div>\n\n  <ng-template #useLogoRoute>\n    <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n      [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </div>\n  </ng-template>\n\n  <ng-template #logoTpl>\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"logoSm ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </ng-template>\n\n  <!-- Title -->\n  <div class=\"d-flex flex-column\" *ngIf=\"hasTitle\">\n    <seam-top-bar-title\n      [titleText]=\"titleText\"\n      [subTitleText]=\"subTitleText\"\n      [class.ml-2]=\"isMobile$ | async\">\n    </seam-top-bar-title>\n  </div>\n\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--left mr-2\">\n    <ng-container *ngFor=\"let item of leftItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"top-bar--center\">\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--center mr-2\">\n    <ng-container *ngFor=\"let item of centerItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"top-bar--right d-flex\">\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--right mr-2\">\n    <ng-container *ngFor=\"let item of rightItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n\n  <!-- Menu -->\n  <button\n    *ngIf=\"hasTopBarMenuButton\"\n    seamTopBarMenuButton\n    [seamMenuToggle]=\"_topBarMenu?.menu\"\n    [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n    [compactDetailTpl]=\"_topBarCompactMenuBtnDetailTpl?.template\"\n    [compact]=\"isMobile$ | async\"\n    [profileIcon]=\"profileIcon\">\n  </button>\n\n  <ng-container *ngIf=\"navToggleAlign === 'right'\">\n    <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #navToggle>\n  <div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n    <ng-container *ngIf=\"_topBarNavToggleBtnDetailTpl; else iconBtn\">\n      <button seamButton seamBaseLayoutNavToggle>\n        <ng-template [ngTemplateOutlet]=\"_topBarNavToggleBtnDetailTpl?.template || null\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #iconBtn>\n      <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"toggleIcon\" iconType=\"borderless-styled-square\"></button>\n    </ng-template>\n  </div>\n</ng-template>\n\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar--left{flex-grow:1}.top-bar-items{display:flex;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TheSeamLayoutService }]; }, propDecorators: { _topBarMenu: [{
                 type: ContentChild,
                 args: [TopBarMenuDirective, { static: true }]
@@ -2046,6 +2199,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             }], _topBarMenuBtnDetailTpl: [{
                 type: ContentChild,
                 args: [TopBarMenuBtnDetailDirective]
+            }], _topBarCompactMenuBtnDetailTpl: [{
+                type: ContentChild,
+                args: [TopBarCompactMenuBtnDetailDirective]
+            }], _topBarNavToggleBtnDetailTpl: [{
+                type: ContentChild,
+                args: [TopBarNavToggleBtnDetailDirective]
             }], logo: [{
                 type: Input
             }], logoSm: [{
@@ -2062,8 +2221,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], subTitleText: [{
                 type: Input
+            }], hasTopBarMenuButton: [{
+                type: Input
             }], profileIcon: [{
                 type: Input
+            }], toggleIcon: [{
+                type: Input
+            }], navToggleAlign: [{
+                type: Input
             }] } });
 
 class TheSeamTopBarModule {
@@ -2074,7 +2239,9 @@ TheSeamTopBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         TopBarMenuButtonComponent,
         TopBarMenuDirective,
         TopBarItemDirective,
-        TopBarMenuBtnDetailDirective], imports: [CommonModule,
+        TopBarMenuBtnDetailDirective,
+        TopBarCompactMenuBtnDetailDirective,
+        TopBarNavToggleBtnDetailDirective], imports: [CommonModule,
         TheSeamLayoutModule,
         TheSeamButtonsModule,
         TheSeamIconModule,
@@ -2085,7 +2252,9 @@ TheSeamTopBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         TopBarMenuDirective,
         TheSeamMenuModule,
         TopBarItemDirective,
-        TopBarMenuBtnDetailDirective] });
+        TopBarMenuBtnDetailDirective,
+        TopBarCompactMenuBtnDetailDirective,
+        TopBarNavToggleBtnDetailDirective] });
 TheSeamTopBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamTopBarModule, imports: [CommonModule,
         TheSeamLayoutModule,
         TheSeamButtonsModule,
@@ -2102,7 +2271,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         TopBarMenuButtonComponent,
                         TopBarMenuDirective,
                         TopBarItemDirective,
-                        TopBarMenuBtnDetailDirective
+                        TopBarMenuBtnDetailDirective,
+                        TopBarCompactMenuBtnDetailDirective,
+                        TopBarNavToggleBtnDetailDirective
                     ],
                     imports: [
                         CommonModule,
@@ -2119,7 +2290,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         TopBarMenuDirective,
                         TheSeamMenuModule,
                         TopBarItemDirective,
-                        TopBarMenuBtnDetailDirective
+                        TopBarMenuBtnDetailDirective,
+                        TopBarCompactMenuBtnDetailDirective,
+                        TopBarNavToggleBtnDetailDirective
                     ]
                 }]
         }] });
@@ -2784,7 +2957,7 @@ class TheSeamSchemaFormSubmitSplitComponent {
     }
 }
 TheSeamSchemaFormSubmitSplitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormSubmitSplitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamSchemaFormSubmitSplitComponent, selector: "seam-schema-form-submit-split", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button seamButton theme=\"primary\" type=\"submit\"\n      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n      [attr.required]=\"options?.required\"\n      [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n      [disabled]=\"controlDisabled\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [value]=\"controlValue\"\n      (click)=\"updateValue($event)\">\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\">\n        [{{ _selectedItem.name }}]\n      </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\" seamButton theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\">\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\">\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i3$2.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }] });
+TheSeamSchemaFormSubmitSplitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamSchemaFormSubmitSplitComponent, selector: "seam-schema-form-submit-split", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button seamButton theme=\"primary\" type=\"submit\"\n      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n      [attr.required]=\"options?.required\"\n      [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n      [disabled]=\"controlDisabled\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [value]=\"controlValue\"\n      (click)=\"updateValue($event)\">\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\">\n        [{{ _selectedItem.name }}]\n      </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\" seamButton theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\">\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\">\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i3$2.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i4$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-schema-form-submit-split', template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button seamButton theme=\"primary\" type=\"submit\"\n      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n      [attr.required]=\"options?.required\"\n      [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n      [disabled]=\"controlDisabled\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [value]=\"controlValue\"\n      (click)=\"updateValue($event)\">\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\">\n        [{{ _selectedItem.name }}]\n      </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\" seamButton theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\">\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\">\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
@@ -2982,9 +3155,620 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }] });
 
+function isHorizontalNavItemType(item, type) {
+    return item.itemType === type;
+}
+function isHorizontalNavItemActive(item) {
+    return item.__state?.active ?? false;
+}
+function isHorizontalNavItemExpanded(item) {
+    return item.__state?.expanded ?? false;
+}
+function isHorizontalNavItemFocused(item) {
+    return item.__state?.focused ?? false;
+}
+function horizontalNavItemHasChildren(item) {
+    return horizontalNavItemCanHaveChildren(item) && hasProperty(item, 'children') && item.children.length > 0;
+}
+function horizontalNavItemCanHaveChildren(item) {
+    return isHorizontalNavItemType(item, 'basic') || isHorizontalNavItemType(item, 'link');
+}
+function horizontalNavItemHasActiveChild(item) {
+    if (!horizontalNavItemHasChildren(item)) {
+        return false;
+    }
+    for (const child of item.children) {
+        if (getHorizontalNavItemStateProp(child, 'active') || horizontalNavItemHasActiveChild(child)) {
+            return true;
+        }
+    }
+    return false;
+}
+function horizontalNavItemHasExpandedChild(item) {
+    if (!horizontalNavItemHasChildren(item)) {
+        return false;
+    }
+    for (const child of item.children) {
+        if (getHorizontalNavItemStateProp(child, 'expanded')) {
+            return true;
+        }
+    }
+    return false;
+}
+function horizontalNavItemCanBeActive(item) {
+    return isHorizontalNavItemType(item, 'basic') || isHorizontalNavItemType(item, 'link');
+}
+function horizontalNavItemCanExpand(item) {
+    return horizontalNavItemCanHaveChildren(item);
+}
+function findHorizontalNavLinkItems(items) {
+    const linkItems = [];
+    const _fn = (_items) => {
+        for (const item of _items) {
+            if (isHorizontalNavItemType(item, 'link')) {
+                linkItems.push(item);
+            }
+            if (horizontalNavItemCanHaveChildren(item) && hasProperty(item, 'children')) {
+                _fn(item.children);
+            }
+        }
+    };
+    _fn(items);
+    return linkItems;
+}
+function setHorizontalNavItemStateProp(item, prop, value) {
+    if (hasProperty(item, '__state')) {
+        item.__state[prop] = value;
+    }
+}
+function getHorizontalNavItemStateProp(item, prop) {
+    return setDefaultHorizontalNavItemState(item).__state[prop];
+}
+function setDefaultHorizontalNavItemState(item) {
+    if (hasProperty(item, '__state')) {
+        return item;
+    }
+    item.__state = {
+        active: false,
+        expanded: false,
+        focused: false
+    };
+    // TODO: See if there is a nice way to fix the typing for this.
+    return item;
+}
+function areSameHorizontalNavItem(item1, item2) {
+    if (isNullOrUndefined(item1) || isNullOrUndefined(item2)) {
+        return false;
+    }
+    if (item1.itemType !== item2.itemType) {
+        return false;
+    }
+    if (isHorizontalNavItemType(item1, 'title') && isHorizontalNavItemType(item2, 'title')) {
+        return item1.label === item2.label;
+    }
+    else if (isHorizontalNavItemType(item1, 'divider') && isHorizontalNavItemType(item2, 'divider')) {
+        return item1.label === item2.label;
+    }
+    else if (isHorizontalNavItemType(item1, 'basic') && isHorizontalNavItemType(item2, 'basic')) {
+        return item1.label === item2.label;
+    }
+    else if (isHorizontalNavItemType(item1, 'link') && isHorizontalNavItemType(item2, 'link')) {
+        return item1.label === item2.label && item1.link === item2.link;
+    }
+    else if (isHorizontalNavItemType(item1, 'button') && isHorizontalNavItemType(item2, 'button')) {
+        return item1.onClick === item2.onClick;
+    }
+    return false;
+}
+
+class TheSeamNavService {
+    constructor(_router) {
+        this._router = _router;
+        this._updatingCount = new BehaviorSubject(0);
+        this.itemChanged = new Subject();
+        this.loading$ = this._updatingCount.pipe(map(count => count > 0), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    createItemsObservable(items) {
+        return defer(() => {
+            this.updateItemsStates(items);
+            this.updateRouterFocusedItem(items);
+            return new Observable((subscriber) => {
+                const stateChangeSub = this.itemChanged.pipe(switchMap(change => {
+                    if (change.prop === 'focused' && change.newValue) {
+                        this.updateFocusedItem(items, change.item);
+                    }
+                    return this.loading$.pipe(filter(loading => !loading));
+                })).subscribe(() => {
+                    subscriber.next(items);
+                });
+                try {
+                    this.updateItemsStates(items);
+                }
+                catch (err) {
+                    subscriber.error(err);
+                }
+                const routeChangeSub = this._router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
+                    try {
+                        this.updateItemsStates(items);
+                        this.updateRouterFocusedItem(items);
+                    }
+                    catch (err) {
+                        subscriber.error(err);
+                    }
+                });
+                return () => {
+                    stateChangeSub.unsubscribe();
+                    routeChangeSub.unsubscribe();
+                };
+            }).pipe(startWith(items));
+        });
+    }
+    _incUpdatingCount() {
+        this._updatingCount.next(this._updatingCount.value + 1);
+    }
+    _decrUpdatingCount() {
+        this._updatingCount.next(this._updatingCount.value - 1);
+    }
+    updateItemsStates(items) {
+        this._incUpdatingCount();
+        try {
+            for (const item of items) {
+                if (horizontalNavItemHasChildren(item)) {
+                    this.updateItemsStates(item.children);
+                }
+                this.updateItemState(item);
+            }
+            this._decrUpdatingCount();
+        }
+        catch (err) {
+            this._decrUpdatingCount();
+            throw err;
+        }
+    }
+    updateItemState(item) {
+        this._incUpdatingCount();
+        try {
+            setDefaultHorizontalNavItemState(item);
+            this.setItemStateProp(item, 'active', this.horizontalNavLinkActive(item));
+            // TODO: Implement this in a more optimized way. Unless our apps start
+            // having large navs constantly updating their state, this shouldn't
+            // have much impact on performance.
+            this._updateItemExpandedState(item);
+            this._decrUpdatingCount();
+        }
+        catch (err) {
+            this._decrUpdatingCount();
+            throw err;
+        }
+    }
+    horizontalNavLinkActive(item) {
+        if (isHorizontalNavItemType(item, 'link')) {
+            const url = this._getUrl(item);
+            if (notNullOrUndefined(url)) {
+                const opts = this._getMatchOptions(item);
+                return this._router.isActive(url, opts);
+            }
+        }
+        return false;
+    }
+    _updateItemsExpandedState(items) {
+        for (const item of items) {
+            if (horizontalNavItemHasChildren(item)) {
+                this._updateItemsExpandedState(item.children);
+            }
+            this._updateItemExpandedState(item);
+        }
+    }
+    _updateItemExpandedState(item) {
+        if (!horizontalNavItemCanExpand(item)) {
+            if (getHorizontalNavItemStateProp(item, 'expanded')) {
+                this.setItemStateProp(item, 'expanded', false);
+            }
+            return;
+        }
+        if (horizontalNavItemHasChildren(item)) {
+            this._updateItemsExpandedState(item.children);
+        }
+        if (horizontalNavItemHasActiveChild(item) || horizontalNavItemHasExpandedChild(item)) {
+            if (!getHorizontalNavItemStateProp(item, 'expanded')) {
+                this.setItemStateProp(item, 'expanded', true);
+            }
+        }
+        else {
+            if (getHorizontalNavItemStateProp(item, 'expanded')) {
+                this.setItemStateProp(item, 'expanded', false);
+            }
+        }
+    }
+    updateRouterFocusedItem(items) {
+        const focusedItem = items.find(i => isHorizontalNavItemActive(i)) || items.find(i => horizontalNavItemHasActiveChild(i));
+        if (notNullOrUndefined(focusedItem)) {
+            this.updateFocusedItem(items, focusedItem);
+        }
+    }
+    updateFocusedItem(items, focusedItem) {
+        for (const item of items) {
+            if (areSameHorizontalNavItem(item, focusedItem)) {
+                setHorizontalNavItemStateProp(item, 'focused', true);
+            }
+            else {
+                setHorizontalNavItemStateProp(item, 'focused', false);
+            }
+        }
+    }
+    _getNavExtras(item) {
+        const navigationExtras = {};
+        if (hasProperty(item, 'queryParams')) {
+            navigationExtras.queryParams = item.queryParams;
+        }
+        if (hasProperty(item, 'fragment')) {
+            navigationExtras.fragment = item.fragment;
+        }
+        if (hasProperty(item, 'queryParamsHandling')) {
+            navigationExtras.queryParamsHandling = item.queryParamsHandling;
+        }
+        if (hasProperty(item, 'preserveFragment')) {
+            navigationExtras.preserveFragment = item.preserveFragment;
+        }
+        return navigationExtras;
+    }
+    _getUrl(item) {
+        const link = item.link;
+        if (typeof link === 'string') {
+            return this._router.createUrlTree([link], this._getNavExtras(item)).toString();
+        }
+        else if (Array.isArray(link)) {
+            return this._router.createUrlTree(link, this._getNavExtras(item)).toString();
+        }
+        return null;
+    }
+    _getMatchOptions(item) {
+        const defaultMatchOpts = {
+            paths: 'subset',
+            queryParams: 'subset',
+            fragment: 'ignored',
+            matrixParams: 'ignored'
+        };
+        if (hasProperty(item, 'matchOptions')) {
+            return {
+                ...defaultMatchOpts,
+                ...item.matchOptions
+            };
+        }
+        return defaultMatchOpts;
+    }
+    setItemStateProp(item, prop, value) {
+        const currentValue = getHorizontalNavItemStateProp(item, prop);
+        if (currentValue !== value) {
+            setHorizontalNavItemStateProp(item, prop, value);
+            const changed = {
+                item,
+                prop,
+                prevValue: currentValue,
+                newValue: value
+            };
+            this.itemChanged.next(changed);
+        }
+    }
+}
+TheSeamNavService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamNavService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+TheSeamNavService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamNavService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamNavService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$2.Router }]; } });
+
+class NavItemComponent {
+    set link(value) { this._link.next(value); }
+    get link() { return this._link.value; }
+    set expanded(value) {
+        this._expanded.next(coerceBooleanProperty(value));
+    }
+    get expanded() { return this._expanded.value; }
+    set compact(value) { this._compact.next(coerceBooleanProperty(value)); }
+    get compact() { return this._compact.value; }
+    get badgeTooltip() { return this._badgeTooltip; }
+    set badgeTooltip(value) {
+        if (value !== null && value !== undefined) {
+            if (typeof value === 'string') {
+                this._badgeTooltip = {
+                    tooltip: value,
+                    placement: 'auto',
+                    disabled: false
+                };
+            }
+            else {
+                this._badgeTooltip = {
+                    ...value,
+                    placement: value.placement || 'auto',
+                    disabled: typeof value?.disabled === 'boolean'
+                        ? value.disabled
+                        : typeof value.tooltip !== 'string'
+                };
+            }
+        }
+        else {
+            this._badgeTooltip = undefined;
+        }
+    }
+    get _isActiveCssClass() { return this.active; }
+    get _isChildActiveCssClass() { return this.hasActiveChild; }
+    get _isExpandedCssClass() { return this.expanded; }
+    get _isFocusedCssClass() { return this.focused; }
+    get _attrDataHierLevel() { return this.hierLevel; }
+    constructor(_nav) {
+        this._nav = _nav;
+        this._ngUnsubscribe = new Subject();
+        this.faAngleLeft = faAngleLeft;
+        this.active = false;
+        this._link = new BehaviorSubject(undefined);
+        this.link$ = this._link.asObservable();
+        this.hierLevel = 0;
+        this.indentSize = 10;
+        this._expanded = new BehaviorSubject(false);
+        this.expanded$ = this._expanded.asObservable();
+        this._compact = new BehaviorSubject(false);
+        this.compact$ = this._compact.asObservable();
+        this.focused = false;
+        this.badgeTheme = 'danger';
+        this.childAction = 'menu';
+        this.expandAction = 'toggle';
+        this.navItemExpanded = new EventEmitter();
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    get hasChildren() {
+        return Array.isArray(this.children) && this.children.length > 0;
+    }
+    get hasActiveChild() {
+        if (notNullOrUndefined(this.item)) {
+            return horizontalNavItemHasActiveChild(this.item);
+        }
+        return false;
+    }
+    get hasMenuToggle() {
+        return this.hasChildren && this.childAction === 'menu';
+    }
+    get menuTpl() {
+        return this.hasMenuToggle ? this._menu : undefined;
+    }
+    get hasExpandingChildren() {
+        return this.hasChildren && this.childAction === 'expand';
+    }
+    _toggleChildren(event) {
+        let ex = !this.expanded;
+        if (this.expandAction === 'expandOnly') {
+            ex = true;
+        }
+        this.expanded = ex;
+        this.navItemExpanded.emit(this.expanded);
+        if (this.item && this.expanded) {
+            this._nav.setItemStateProp(this.item, 'focused', this.expanded);
+        }
+        // Prevents seam-menu from closing out when toggling child expand
+        event.stopPropagation();
+    }
+    // Updates expanded state when user exits seam-menu
+    _menuEvent(menuExpanded) {
+        if (menuExpanded === false) {
+            this.expanded = false;
+            // TODO: figure out why closing seam-menu with expanded submenu messes up animation
+            if (this._navItems && this._navItems.length) {
+                this._navItems.forEach(navItem => {
+                    navItem.expanded = false;
+                });
+            }
+        }
+    }
+    get showIconBlock() {
+        return notNullOrUndefined(this.icon) || this.hideEmptyIcon !== true;
+    }
+}
+NavItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NavItemComponent, deps: [{ token: TheSeamNavService }], target: i0.ɵɵFactoryTarget.Component });
+NavItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: NavItemComponent, selector: "seam-nav-item", inputs: { item: "item", itemType: "itemType", icon: "icon", hideEmptyIcon: "hideEmptyIcon", label: "label", active: "active", link: "link", queryParams: "queryParams", children: "children", hierLevel: "hierLevel", indentSize: "indentSize", expanded: "expanded", compact: "compact", focused: "focused", badgeText: "badgeText", badgeTheme: "badgeTheme", badgeSrContent: "badgeSrContent", badgeTooltip: "badgeTooltip", childAction: "childAction", expandAction: "expandAction" }, outputs: { navItemExpanded: "navItemExpanded" }, host: { properties: { "class.seam-nav-item--active": "this._isActiveCssClass", "class.seam-nav-item--child-active": "this._isChildActiveCssClass", "class.seam-nav-item--expanded": "this._isExpandedCssClass", "class.seam-nav-item--focused": "this._isFocusedCssClass", "attr.data-hier-level": "this._attrDataHierLevel" } }, viewQueries: [{ propertyName: "_menu", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "_navItems", predicate: NavItemComponent, descendants: true }], exportAs: ["seamNavItem"], ngImport: i0, template: "<div class=\"d-flex flex-row h-100\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasExpandingChildren\">\n  <div class=\"nav--group nav--group--level-{{ hierLevel + 1 }}\"\n    *ngIf=\"expanded$ | async\" @childGroupAnim>\n    <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"nav-item btn nav-btn p-0 d-flex align-items-stretch flex-row text-decoration-none w-100\"\n    cdkMonitorElementFocus\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\">\n    <div class=\"nav-link d-flex flex-row align-items-center w-100\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn nav-btn nav-item--toggle-btn-container d-flex align-items-center\">\n      <seam-icon\n        class=\"nav-item--toggle-btn\"\n        [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"nav-item nav-link d-flex flex-row w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\">\n    <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n      <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"nav-item nav-link d-flex flex-row w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn nav-btn nav-item--toggle-btn-container\"\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"nav-item--toggle-btn\"\n      [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"nav-item--title pt-1\" nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"nav-item--badge\"\n      [class.nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n\n<seam-menu #menu *ngIf=\"hasMenuToggle\">\n  <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n</seam-menu>\n\n<ng-template #navChildren>\n  <seam-nav-item *ngFor=\"let child of children\"\n    [item]=\"child\"\n    [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n    [compact]=\"compact\"\n    [itemType]=\"$any(child).itemType\"\n    [icon]=\"$any(child).icon\"\n    [label]=\"$any(child).label\"\n    [link]=\"$any(child).link\"\n    [badgeText]=\"$any(child).badge?.text\"\n    [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n    [badgeSrContent]=\"$any(child).badge?.srContent\"\n    [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n    [queryParams]=\"$any(child).queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    [children]=\"$any(child)?.children\"\n    [active]=\"$any(child).__state?.active\"\n    [expanded]=\"$any(child).__state?.expanded\"\n    [focused]=\"$any(child).__state?.focused\"\n    childAction=\"expand\"\n    [hideEmptyIcon]=\"hideEmptyIcon\">\n  </seam-nav-item>\n</ng-template>\n\n", styles: ["seam-nav-item{display:block;transition:.25s ease-in-out background-color;text-align:inherit;border-radius:0;overflow:hidden;background:transparent;margin:0}seam-nav-item.seam-nav-item--expanded{background-color:transparent}seam-nav-item.seam-nav-item--expanded .nav-link{color:#000}seam-nav-item.seam-nav-item--child-active{background-color:#dae0e5}seam-nav-item.seam-nav-item--child-active .nav-link{color:#000}seam-nav-item.seam-nav-item--active{background-color:#dae0e5}seam-nav-item.seam-nav-item--active .active,seam-nav-item.seam-nav-item--active:active,seam-nav-item.seam-nav-item--active .nav-item.active:hover{background-color:#dae0e5}seam-nav-item.seam-nav-item--active .nav-item:hover{background-color:#e9ecef}seam-nav-item.seam-nav-item--active .nav-link{color:#000}seam-nav-item .badge{vertical-align:middle}seam-nav-item:not(.nav-item--icon) .nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-nav-item .nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center;margin-right:.5rem}seam-nav-item .nav-item--icon .nav-item--badge{top:-4px;right:-4px;position:absolute}seam-nav-item .nav-item--icon .nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-nav-item .nav-item--icon .nav-item--badge.nav-item--badge-no-icon{top:0;right:0}seam-nav-item .nav-item{transition:.25s ease-in-out background-color}seam-nav-item .nav-item:hover{background-color:#e9ecef}seam-nav-item .nav-item.active{pointer-events:none;cursor:default}seam-nav-item a.nav-item:not([href]):not([tabindex]){color:#000}seam-nav-item a.nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-nav-item .nav-link{color:#000}seam-nav-item .nav-btn{font-weight:400;color:#000;text-decoration:none;border-radius:0;border:0 solid #dee2e6}seam-nav-item .nav-btn:hover{color:#000;text-decoration:underline}seam-nav-item .nav-btn:focus,seam-nav-item .nav-btn.focus{text-decoration:underline;box-shadow:none}seam-nav-item .nav-btn:disabled,seam-nav-item .nav-btn.disabled{color:#000;pointer-events:none}seam-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-nav-item .nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:0 .5rem}seam-nav-item button.nav-item--toggle-btn-container:hover{background-color:#e9ecef}seam-nav-item .nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform;transform:none}seam-nav-item .nav-item--toggle-btn.nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-nav-item .nav--group{will-change:height;overflow:hidden}seam-nav-item .nav--group--level-1{background-color:#eff1f4}seam-nav-item .nav--group--level-2{background-color:#e6eaed}seam-nav-item .nav--group--level-3{background-color:#dde2e7}seam-nav-item .nav--group--level-4{background-color:#d4dae1}seam-nav-item .nav--group--level-5{background-color:#cbd3da}seam-nav-item .nav--group--level-6{background-color:#c2cbd4}seam-nav-item .nav--group--level-7{background-color:#bac3cd}seam-nav-item .nav--group--level-8{background-color:#b1bcc7}seam-nav-item .nav--group--level-9{background-color:#a8b4c1}seam-nav-item .nav-item--divider{display:block;border-top:1px solid #dae0e5;width:100%}seam-nav-item .nav-item--title{color:#000;font-size:24px;padding-left:10px}seam-nav-item .sr-only{top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i4$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3$2.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: NavItemComponent, selector: "seam-nav-item", inputs: ["item", "itemType", "icon", "hideEmptyIcon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "focused", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "childAction", "expandAction"], outputs: ["navItemExpanded"], exportAs: ["seamNavItem"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
+        trigger('childGroupAnim', [
+            transition(':enter', [
+                style({ height: 0 }),
+                animate('0.2s ease-in-out', style({ height: '*' }))
+            ]),
+            transition(':leave', [
+                style({ height: '*' }),
+                animate('0.2s ease-in-out', style({ height: 0 }))
+            ])
+        ])
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    InputBoolean()
+], NavItemComponent.prototype, "active", void 0);
+__decorate([
+    InputNumber(0)
+], NavItemComponent.prototype, "hierLevel", void 0);
+__decorate([
+    InputNumber(10)
+], NavItemComponent.prototype, "indentSize", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NavItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-nav-item', exportAs: 'seamNavItem', animations: [
+                        trigger('childGroupAnim', [
+                            transition(':enter', [
+                                style({ height: 0 }),
+                                animate('0.2s ease-in-out', style({ height: '*' }))
+                            ]),
+                            transition(':leave', [
+                                style({ height: '*' }),
+                                animate('0.2s ease-in-out', style({ height: 0 }))
+                            ])
+                        ])
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"d-flex flex-row h-100\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasExpandingChildren\">\n  <div class=\"nav--group nav--group--level-{{ hierLevel + 1 }}\"\n    *ngIf=\"expanded$ | async\" @childGroupAnim>\n    <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"nav-item btn nav-btn p-0 d-flex align-items-stretch flex-row text-decoration-none w-100\"\n    cdkMonitorElementFocus\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\">\n    <div class=\"nav-link d-flex flex-row align-items-center w-100\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn nav-btn nav-item--toggle-btn-container d-flex align-items-center\">\n      <seam-icon\n        class=\"nav-item--toggle-btn\"\n        [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"nav-item nav-link d-flex flex-row w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\">\n    <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n      <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"nav-item nav-link d-flex flex-row w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn nav-btn nav-item--toggle-btn-container\"\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"nav-item--toggle-btn\"\n      [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"nav-item--title pt-1\" nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"nav-item--badge\"\n      [class.nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n\n<seam-menu #menu *ngIf=\"hasMenuToggle\">\n  <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n</seam-menu>\n\n<ng-template #navChildren>\n  <seam-nav-item *ngFor=\"let child of children\"\n    [item]=\"child\"\n    [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n    [compact]=\"compact\"\n    [itemType]=\"$any(child).itemType\"\n    [icon]=\"$any(child).icon\"\n    [label]=\"$any(child).label\"\n    [link]=\"$any(child).link\"\n    [badgeText]=\"$any(child).badge?.text\"\n    [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n    [badgeSrContent]=\"$any(child).badge?.srContent\"\n    [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n    [queryParams]=\"$any(child).queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    [children]=\"$any(child)?.children\"\n    [active]=\"$any(child).__state?.active\"\n    [expanded]=\"$any(child).__state?.expanded\"\n    [focused]=\"$any(child).__state?.focused\"\n    childAction=\"expand\"\n    [hideEmptyIcon]=\"hideEmptyIcon\">\n  </seam-nav-item>\n</ng-template>\n\n", styles: ["seam-nav-item{display:block;transition:.25s ease-in-out background-color;text-align:inherit;border-radius:0;overflow:hidden;background:transparent;margin:0}seam-nav-item.seam-nav-item--expanded{background-color:transparent}seam-nav-item.seam-nav-item--expanded .nav-link{color:#000}seam-nav-item.seam-nav-item--child-active{background-color:#dae0e5}seam-nav-item.seam-nav-item--child-active .nav-link{color:#000}seam-nav-item.seam-nav-item--active{background-color:#dae0e5}seam-nav-item.seam-nav-item--active .active,seam-nav-item.seam-nav-item--active:active,seam-nav-item.seam-nav-item--active .nav-item.active:hover{background-color:#dae0e5}seam-nav-item.seam-nav-item--active .nav-item:hover{background-color:#e9ecef}seam-nav-item.seam-nav-item--active .nav-link{color:#000}seam-nav-item .badge{vertical-align:middle}seam-nav-item:not(.nav-item--icon) .nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-nav-item .nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center;margin-right:.5rem}seam-nav-item .nav-item--icon .nav-item--badge{top:-4px;right:-4px;position:absolute}seam-nav-item .nav-item--icon .nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-nav-item .nav-item--icon .nav-item--badge.nav-item--badge-no-icon{top:0;right:0}seam-nav-item .nav-item{transition:.25s ease-in-out background-color}seam-nav-item .nav-item:hover{background-color:#e9ecef}seam-nav-item .nav-item.active{pointer-events:none;cursor:default}seam-nav-item a.nav-item:not([href]):not([tabindex]){color:#000}seam-nav-item a.nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-nav-item .nav-link{color:#000}seam-nav-item .nav-btn{font-weight:400;color:#000;text-decoration:none;border-radius:0;border:0 solid #dee2e6}seam-nav-item .nav-btn:hover{color:#000;text-decoration:underline}seam-nav-item .nav-btn:focus,seam-nav-item .nav-btn.focus{text-decoration:underline;box-shadow:none}seam-nav-item .nav-btn:disabled,seam-nav-item .nav-btn.disabled{color:#000;pointer-events:none}seam-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-nav-item .nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:0 .5rem}seam-nav-item button.nav-item--toggle-btn-container:hover{background-color:#e9ecef}seam-nav-item .nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform;transform:none}seam-nav-item .nav-item--toggle-btn.nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-nav-item .nav--group{will-change:height;overflow:hidden}seam-nav-item .nav--group--level-1{background-color:#eff1f4}seam-nav-item .nav--group--level-2{background-color:#e6eaed}seam-nav-item .nav--group--level-3{background-color:#dde2e7}seam-nav-item .nav--group--level-4{background-color:#d4dae1}seam-nav-item .nav--group--level-5{background-color:#cbd3da}seam-nav-item .nav--group--level-6{background-color:#c2cbd4}seam-nav-item .nav--group--level-7{background-color:#bac3cd}seam-nav-item .nav--group--level-8{background-color:#b1bcc7}seam-nav-item .nav--group--level-9{background-color:#a8b4c1}seam-nav-item .nav-item--divider{display:block;border-top:1px solid #dae0e5;width:100%}seam-nav-item .nav-item--title{color:#000;font-size:24px;padding-left:10px}seam-nav-item .sr-only{top:0;left:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: TheSeamNavService }]; }, propDecorators: { item: [{
+                type: Input
+            }], itemType: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], hideEmptyIcon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], link: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
+            }], children: [{
+                type: Input
+            }], hierLevel: [{
+                type: Input
+            }], indentSize: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], focused: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], badgeTheme: [{
+                type: Input
+            }], badgeSrContent: [{
+                type: Input
+            }], badgeTooltip: [{
+                type: Input
+            }], childAction: [{
+                type: Input
+            }], expandAction: [{
+                type: Input
+            }], navItemExpanded: [{
+                type: Output
+            }], _isActiveCssClass: [{
+                type: HostBinding,
+                args: ['class.seam-nav-item--active']
+            }], _isChildActiveCssClass: [{
+                type: HostBinding,
+                args: ['class.seam-nav-item--child-active']
+            }], _isExpandedCssClass: [{
+                type: HostBinding,
+                args: ['class.seam-nav-item--expanded']
+            }], _isFocusedCssClass: [{
+                type: HostBinding,
+                args: ['class.seam-nav-item--focused']
+            }], _attrDataHierLevel: [{
+                type: HostBinding,
+                args: ['attr.data-hier-level']
+            }], _menu: [{
+                type: ViewChild,
+                args: [MenuComponent]
+            }], _navItems: [{
+                type: ViewChildren,
+                args: [NavItemComponent]
+            }] } });
+
+class HorizontalNavComponent {
+    get items() { return this._items.value; }
+    set items(value) {
+        this._items.next(value);
+    }
+    constructor(_nav) {
+        this._nav = _nav;
+        this._ngUnsubscribe = new Subject();
+        this._items = new BehaviorSubject([]);
+        this.hideEmptyIcon = true;
+        this.hierLevel = 0;
+        this.childAction = 'menu';
+        this.expandAction = 'toggle';
+        this.navItemExpanded = new EventEmitter();
+        this.items$ = this._items.asObservable().pipe(switchMap(items => items ? this._nav.createItemsObservable(items) : []), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    _navItemExpanded(item, expanded) {
+        this.navItemExpanded.emit({ navItem: item, expanded });
+    }
+}
+HorizontalNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: HorizontalNavComponent, deps: [{ token: TheSeamNavService }], target: i0.ɵɵFactoryTarget.Component });
+HorizontalNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: HorizontalNavComponent, selector: "seam-horizontal-nav", inputs: { items: "items", hideEmptyIcon: "hideEmptyIcon", hierLevel: "hierLevel", childAction: "childAction", expandAction: "expandAction" }, outputs: { navItemExpanded: "navItemExpanded" }, providers: [
+        TheSeamNavService
+    ], ngImport: i0, template: "<div class=\"nav-inner-wrapper\" class=\"nav-inner-wrapper-{{hierLevel}}\">\n  <div class=\"nav-items-row\">\n    <seam-nav-item *ngFor=\"let item of items$ | async\"\n      class=\"flex-shrink-0\"\n      [item]=\"item\"\n      [itemType]=\"$any(item)?.itemType\"\n      [icon]=\"$any(item)?.icon\"\n      [label]=\"$any(item)?.label\"\n      [link]=\"$any(item)?.link\"\n      [badgeText]=\"$any(item)?.badge?.text\"\n      [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n      [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n      [queryParams]=\"$any(item)?.queryParams\"\n      [children]=\"$any(item)?.children\"\n      [active]=\"$any(item).__state?.active\"\n      [expanded]=\"$any(item).__state?.expanded\"\n      [focused]=\"$any(item).__state?.focused\"\n      [hierLevel]=\"hierLevel\"\n      [childAction]=\"childAction\"\n      [expandAction]=\"expandAction\"\n      (navItemExpanded)=\"_navItemExpanded(item, $event)\"\n      [hideEmptyIcon]=\"hideEmptyIcon\">\n    </seam-nav-item>\n  </div>\n</div>\n", styles: ["seam-horizontal-nav,.seam-horizontal-nav{display:block;height:100%;position:relative;z-index:2}seam-horizontal-nav .nav-inner-wrapper,.seam-horizontal-nav .nav-inner-wrapper{background:none;height:100%}seam-horizontal-nav .nav-backdrop,.seam-horizontal-nav .nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden,.seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-horizontal-nav .nav-content,.seam-horizontal-nav .nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-horizontal-nav .nav-items-container,.seam-horizontal-nav .nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}seam-horizontal-nav .nav-items-row,.seam-horizontal-nav .nav-items-row{height:100%;display:flex;padding:.25rem .5rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NavItemComponent, selector: "seam-nav-item", inputs: ["item", "itemType", "icon", "hideEmptyIcon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "focused", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "childAction", "expandAction"], outputs: ["navItemExpanded"], exportAs: ["seamNavItem"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: HorizontalNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-horizontal-nav', providers: [
+                        TheSeamNavService
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nav-inner-wrapper\" class=\"nav-inner-wrapper-{{hierLevel}}\">\n  <div class=\"nav-items-row\">\n    <seam-nav-item *ngFor=\"let item of items$ | async\"\n      class=\"flex-shrink-0\"\n      [item]=\"item\"\n      [itemType]=\"$any(item)?.itemType\"\n      [icon]=\"$any(item)?.icon\"\n      [label]=\"$any(item)?.label\"\n      [link]=\"$any(item)?.link\"\n      [badgeText]=\"$any(item)?.badge?.text\"\n      [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n      [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n      [queryParams]=\"$any(item)?.queryParams\"\n      [children]=\"$any(item)?.children\"\n      [active]=\"$any(item).__state?.active\"\n      [expanded]=\"$any(item).__state?.expanded\"\n      [focused]=\"$any(item).__state?.focused\"\n      [hierLevel]=\"hierLevel\"\n      [childAction]=\"childAction\"\n      [expandAction]=\"expandAction\"\n      (navItemExpanded)=\"_navItemExpanded(item, $event)\"\n      [hideEmptyIcon]=\"hideEmptyIcon\">\n    </seam-nav-item>\n  </div>\n</div>\n", styles: ["seam-horizontal-nav,.seam-horizontal-nav{display:block;height:100%;position:relative;z-index:2}seam-horizontal-nav .nav-inner-wrapper,.seam-horizontal-nav .nav-inner-wrapper{background:none;height:100%}seam-horizontal-nav .nav-backdrop,.seam-horizontal-nav .nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden,.seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-horizontal-nav .nav-content,.seam-horizontal-nav .nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-horizontal-nav .nav-items-container,.seam-horizontal-nav .nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}seam-horizontal-nav .nav-items-row,.seam-horizontal-nav .nav-items-row{height:100%;display:flex;padding:.25rem .5rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: TheSeamNavService }]; }, propDecorators: { items: [{
+                type: Input
+            }], hideEmptyIcon: [{
+                type: Input
+            }], hierLevel: [{
+                type: Input
+            }], childAction: [{
+                type: Input
+            }], expandAction: [{
+                type: Input
+            }], navItemExpanded: [{
+                type: Output
+            }] } });
+
+class TheSeamNavModule {
+}
+TheSeamNavModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamNavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TheSeamNavModule, declarations: [NavItemComponent,
+        HorizontalNavComponent], imports: [CommonModule,
+        RouterModule,
+        TheSeamIconModule,
+        A11yModule,
+        TheSeamScrollbarModule,
+        TheSeamLayoutModule,
+        NgbTooltipModule,
+        PortalModule,
+        TheSeamMenuModule], exports: [NavItemComponent,
+        HorizontalNavComponent] });
+TheSeamNavModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamNavModule, providers: [
+        TheSeamNavService,
+    ], imports: [CommonModule,
+        RouterModule,
+        TheSeamIconModule,
+        A11yModule,
+        TheSeamScrollbarModule,
+        TheSeamLayoutModule,
+        NgbTooltipModule,
+        PortalModule,
+        TheSeamMenuModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamNavModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        NavItemComponent,
+                        HorizontalNavComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        TheSeamIconModule,
+                        A11yModule,
+                        TheSeamScrollbarModule,
+                        TheSeamLayoutModule,
+                        NgbTooltipModule,
+                        PortalModule,
+                        TheSeamMenuModule
+                    ],
+                    exports: [
+                        NavItemComponent,
+                        HorizontalNavComponent,
+                    ],
+                    providers: [
+                        TheSeamNavService,
+                    ]
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutNavToggleDirective, BaseLayoutSideBarDirective, BaseLayoutSideBarFooterDirective, BaseLayoutTopBarDirective, DashboardComponent, DashboardWidgetContainerComponent, DashboardWidgetPortalOutletDirective, DashboardWidgetTemplateContainerComponent, DashboardWidgetsComponent, DashboardWidgetsPreferencesService, DashboardWidgetsService, HierarchyLevelResolver, HierarchyRouterOutletComponent, SideNavComponent, SideNavItemComponent, SideNavToggleComponent, THESEAM_BASE_LAYOUT_REF, THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, THESEAM_SIDE_NAV_ACCESSOR, THE_SEAM_BASE_LAYOUT, TheSeamBaseLayoutComponent, TheSeamBaseLayoutModule, TheSeamDashboardModule, TheSeamDynamicRouterModule, TheSeamFramework, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarTitleComponent, canBeActive, canExpand, canHaveChildren, fader, findLinkItems, getItemStateProp, hasActiveChild, hasChildren, hasExpandedChild, isExpanded, isNavItemActive, isNavItemType, routeChanges, setDefaultState, setItemStateProp, sideNavExpandStateChangeFn, sideToSide, slider, stepper, transformer };
+export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutNavToggleDirective, BaseLayoutSideBarDirective, BaseLayoutSideBarFooterDirective, BaseLayoutSideBarHeaderDirective, BaseLayoutTopBarDirective, DashboardComponent, DashboardWidgetContainerComponent, DashboardWidgetPortalOutletDirective, DashboardWidgetTemplateContainerComponent, DashboardWidgetsComponent, DashboardWidgetsPreferencesService, DashboardWidgetsService, HierarchyLevelResolver, HierarchyRouterOutletComponent, HorizontalNavComponent, NavItemComponent, SideNavComponent, SideNavItemComponent, SideNavToggleComponent, THESEAM_BASE_LAYOUT_REF, THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, THESEAM_SIDE_NAV_ACCESSOR, THE_SEAM_BASE_LAYOUT, TheSeamBaseLayoutComponent, TheSeamBaseLayoutModule, TheSeamDashboardModule, TheSeamDynamicRouterModule, TheSeamFramework, TheSeamNavModule, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarCompactMenuBtnDetailDirective, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarNavToggleBtnDetailDirective, TopBarTitleComponent, areSameHorizontalNavItem, canBeActive, canExpand, canHaveChildren, fader, findHorizontalNavLinkItems, findLinkItems, getHorizontalNavItemStateProp, getItemStateProp, hasActiveChild, hasChildren, hasExpandedChild, horizontalNavItemCanBeActive, horizontalNavItemCanExpand, horizontalNavItemCanHaveChildren, horizontalNavItemHasActiveChild, horizontalNavItemHasChildren, horizontalNavItemHasExpandedChild, isExpanded, isHorizontalNavItemActive, isHorizontalNavItemExpanded, isHorizontalNavItemFocused, isHorizontalNavItemType, isNavItemActive, isNavItemType, routeChanges, setDefaultHorizontalNavItemState, setDefaultState, setHorizontalNavItemStateProp, setItemStateProp, sideNavExpandStateChangeFn, sideToSide, slider, stepper, transformer };
 //# sourceMappingURL=theseam-ui-common-framework.mjs.map