@theseam/ui-common 0.3.11 → 0.3.12-beta.0

package/fesm2015/theseam-ui-common-framework.js

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { Directive, ElementRef, InjectionToken, Optional, Inject, HostBinding, Input, HostListener, forwardRef, isDevMode, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewContainerRef, ContentChild, TemplateRef, NgModule, ViewChild, Injectable, EventEmitter, ChangeDetectorRef, ViewChildren, Output, ComponentFactoryResolver, SkipSelf, Host, Self, ContentChildren } from '@angular/core';
+import { Directive, ElementRef, InjectionToken, ChangeDetectorRef, Optional, Inject, HostBinding, Input, HostListener, forwardRef, isDevMode, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewContainerRef, ContentChild, TemplateRef, NgModule, ViewChild, Injectable, EventEmitter, ViewChildren, Output, ComponentFactoryResolver, SkipSelf, Host, Self, ContentChildren } from '@angular/core';
+import { tap, startWith, switchMap, map, shareReplay, mapTo, take, auditTime, debounceTime, takeUntil, distinctUntilChanged, finalize, filter } from 'rxjs/operators';
 import { TemplatePortal, PortalModule, ComponentPortal, BasePortalOutlet } from '@angular/cdk/portal';
 import { BehaviorSubject, isObservable, from, Subject, of, combineLatest, defer, Observable } from 'rxjs';
-import { faAngleDoubleRight, faAngleDoubleLeft, faLock, faUnlock, faAngleLeft, faBars, faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import { faAngleDoubleRight, faAngleDoubleLeft, faLock, faUnlock, faBars, faAngleLeft, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 import { TheSeamLayoutService, TheSeamLayoutModule } from '@theseam/ui-common/layout';
 import { CommonModule } from '@angular/common';
 import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
 import { TheSeamIconModule } from '@theseam/ui-common/icon';
 import { TheSeamScrollbarModule } from '@theseam/ui-common/scrollbar';
-import { startWith, switchMap, map, shareReplay, tap, mapTo, take, auditTime, debounceTime, takeUntil, distinctUntilChanged, finalize, filter } from 'rxjs/operators';
 import { __decorate } from 'tslib';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { moveItemInArray, transferArrayItem, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
@@ -16,7 +16,7 @@ import { InputBoolean, InputNumber, mixinDisabled } from '@theseam/ui-common/cor
 import { THESEAM_WIDGET_ACCESSOR } from '@theseam/ui-common/widget';
 import * as i1 from '@theseam/ui-common/dynamic-component-loader';
 import { TheSeamDynamicComponentLoader } from '@theseam/ui-common/dynamic-component-loader';
-import { hasProperty, notNullOrUndefined, observeControlValue, observeControlStatus } from '@theseam/ui-common/utils';
+import { hasProperty, notNullOrUndefined, observeControlValue, observeControlStatus, isNullOrUndefined } from '@theseam/ui-common/utils';
 import { TheSeamSharedModule } from '@theseam/ui-common/shared';
 import { trigger, transition, group, query, animateChild, state, style, animate, keyframes } from '@angular/animations';
 import { NavigationEnd, Router, RouterModule, NavigationStart, ActivatedRoute } from '@angular/router';
@@ -78,10 +78,13 @@ const THESEAM_BASE_LAYOUT_REF = new InjectionToken('seamBaseLayoutRef');
  * Can be used to toggle the expand state of the registered nav.
  */
 class BaseLayoutNavToggleDirective {
-    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;
     }
     get _attrType() { return this.type; }
@@ -91,6 +94,13 @@ class BaseLayoutNavToggleDirective {
             this.baseLayout.registeredNav.toggle();
         }
     }
+    ngOnInit() {
+        var _a, _b;
+        (_b = (_a = this.baseLayout) === null || _a === void 0 ? void 0 : _a.registeredNav) === null || _b === void 0 ? void 0 : _b.expanded$.pipe(tap(exp => {
+            this._expandedClass = exp;
+            this._cdr.markForCheck();
+        })).subscribe();
+    }
 }
 BaseLayoutNavToggleDirective.decorators = [
     { type: Directive, args: [{
@@ -99,6 +109,7 @@ BaseLayoutNavToggleDirective.decorators = [
             },] }
 ];
 BaseLayoutNavToggleDirective.ctorParameters = () => [
+    { type: ChangeDetectorRef },
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [THESEAM_BASE_LAYOUT_REF,] }] }
 ];
 BaseLayoutNavToggleDirective.propDecorators = {
@@ -106,6 +117,8 @@ BaseLayoutNavToggleDirective.propDecorators = {
     type: [{ type: Input }],
     _attrAriaLabel: [{ type: HostBinding, args: ['attr.aria-label',] }],
     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',] }]
 };
 
@@ -150,6 +163,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();
@@ -161,12 +175,17 @@ class TheSeamBaseLayoutComponent {
     get registeredNav() { return this._registeredNav.value; }
     get registeredActions() { return this._registeredActions.value; }
     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);
@@ -223,11 +242,11 @@ class TheSeamBaseLayoutComponent {
 TheSeamBaseLayoutComponent.decorators = [
     { type: Component, args: [{
                 selector: 'seam-base-layout',
-                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",
+                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",
                 providers: [THE_SEAM_BASE_LAYOUT],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                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"]
+                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:0;margin:0;border-radius:0}seam-base-layout .base-layout-content-container .base-layout-content-container-header-right{background:none;padding:0;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"]
             },] }
 ];
 TheSeamBaseLayoutComponent.ctorParameters = () => [
@@ -236,6 +255,8 @@ TheSeamBaseLayoutComponent.ctorParameters = () => [
 ];
 TheSeamBaseLayoutComponent.propDecorators = {
     overlayNav: [{ type: Input }],
+    mobileBreakpoint: [{ type: Input }],
+    showSidebar: [{ type: Input }],
     _topBarTpl: [{ type: ContentChild, args: [BaseLayoutTopBarDirective, { static: true, read: TemplateRef },] }],
     _sideBarTpl: [{ type: ContentChild, args: [BaseLayoutSideBarDirective, { static: true, read: TemplateRef },] }],
     _contentTpl: [{ type: ContentChild, args: [BaseLayoutContentDirective, { static: true, read: TemplateRef },] }],
@@ -257,6 +278,20 @@ BaseLayoutSideBarFooterDirective.ctorParameters = () => [
     { type: ElementRef }
 ];
 
+class BaseLayoutSideBarHeaderDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}
+BaseLayoutSideBarHeaderDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[seamBaseLayoutSideBarHeader]'
+            },] }
+];
+BaseLayoutSideBarHeaderDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
 class TheSeamBaseLayoutModule {
 }
 TheSeamBaseLayoutModule.decorators = [
@@ -266,6 +301,7 @@ TheSeamBaseLayoutModule.decorators = [
                     BaseLayoutContentDirective,
                     BaseLayoutSideBarDirective,
                     BaseLayoutSideBarFooterDirective,
+                    BaseLayoutSideBarHeaderDirective,
                     BaseLayoutTopBarDirective,
                     BaseLayoutNavToggleDirective,
                     BaseLayoutContentHeaderDirective,
@@ -283,6 +319,7 @@ TheSeamBaseLayoutModule.decorators = [
                     BaseLayoutContentDirective,
                     BaseLayoutSideBarDirective,
                     BaseLayoutSideBarFooterDirective,
+                    BaseLayoutSideBarHeaderDirective,
                     BaseLayoutTopBarDirective,
                     BaseLayoutNavToggleDirective,
                     BaseLayoutContentHeaderDirective,
@@ -1268,14 +1305,20 @@ class SideNavComponent {
         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.toggleExpand = new EventEmitter();
@@ -1291,7 +1334,7 @@ class SideNavComponent {
     get expanded() { return this._expanded.value; }
     set expanded(value) {
         const expanded = coerceBooleanProperty(value);
-        let emit = expanded !== this.expanded;
+        const emit = expanded !== this.expanded;
         this._expanded.next(expanded);
         if (emit) {
             this.toggleExpand.emit(coerceBooleanProperty(value));
@@ -1309,6 +1352,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);
         }
@@ -1339,11 +1385,28 @@ 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.decorators = [
     { type: Component, args: [{
                 selector: 'seam-side-nav',
-                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",
+                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          [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      </seam-side-nav-item>\n      </div>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n",
                 providers: [
                     TheSeamSideNavService
                 ],
@@ -1370,32 +1433,42 @@ SideNavComponent.decorators = [
                         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$1, style({ width: '260px' })),
                         state(COLLAPSED_STATE$1, 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}`, [
@@ -1424,15 +1497,26 @@ SideNavComponent.ctorParameters = () => [
 SideNavComponent.propDecorators = {
     _sideNavExpand: [{ type: HostBinding, 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 }],
     toggleExpand: [{ type: Output }],
+    _sideBarHeaderTpl: [{ type: ContentChild, args: [BaseLayoutSideBarHeaderDirective, { static: true, read: TemplateRef },] }],
     _sideBarFooterTpl: [{ type: ContentChild, args: [BaseLayoutSideBarFooterDirective, { static: true, read: TemplateRef },] }]
 };
 __decorate([
     InputBoolean()
-], SideNavComponent.prototype, "hasHeaderToggle", void 0);
+], SideNavComponent.prototype, "hasHeaderToggle", void 0);
+__decorate([
+    InputNumber(10)
+], SideNavComponent.prototype, "indentSize", void 0);
 
 const EXPANDED_STATE = 'expanded';
 const COLLAPSED_STATE = 'collapsed';
@@ -1472,13 +1556,14 @@ class SideNavItemComponent {
                 this._badgeTooltip = {
                     tooltip: value,
                     placement: 'auto',
-                    disabled: false
+                    disabled: false,
+                    container: 'body'
                 };
             }
             else {
                 this._badgeTooltip = Object.assign(Object.assign({}, value), { placement: value.placement || 'auto', disabled: typeof (value === null || value === void 0 ? void 0 : value.disabled) === 'boolean'
                         ? value.disabled
-                        : typeof value.tooltip === 'string' ? false : true });
+                        : typeof value.tooltip === 'string' ? false : true, container: value.container || 'body' });
             }
         }
         else {
@@ -1503,11 +1588,14 @@ class SideNavItemComponent {
             this._sideNav.collapse();
         }
     }
+    get showIconBlock() {
+        return notNullOrUndefined(this.icon) || this.hideEmptyIcon !== true;
+    }
 }
 SideNavItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'seam-side-nav-item',
-                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",
+                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      [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    </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    <div class=\"nav-link d-flex flex-row align-items-center 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  <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\" [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      </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",
                 exportAs: 'seamSideNavItem',
                 animations: [
                     trigger('childGroupAnim', [
@@ -1540,7 +1628,7 @@ SideNavItemComponent.decorators = [
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                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:0px;right:0px}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"]
+                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:0px;right:0px}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"]
             },] }
 ];
 SideNavItemComponent.ctorParameters = () => [
@@ -1550,6 +1638,7 @@ SideNavItemComponent.ctorParameters = () => [
 SideNavItemComponent.propDecorators = {
     itemType: [{ type: Input }],
     icon: [{ type: Input }],
+    hideEmptyIcon: [{ type: Input }],
     label: [{ type: Input }],
     active: [{ type: Input }],
     link: [{ type: Input }],
@@ -1578,7 +1667,6 @@ __decorate([
 
 class SideNavToggleComponent {
     constructor() {
-        this.faBars = faBars;
         this.expanded = false;
         this.toggleExpand = new EventEmitter();
     }
@@ -1590,18 +1678,20 @@ class SideNavToggleComponent {
 SideNavToggleComponent.decorators = [
     { type: Component, args: [{
                 selector: 'seam-side-nav-toggle',
-                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",
+                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",
                 host: {
                     '[class.side-nav-toggle--compact]': '!expanded'
                 },
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                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"]
+                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"]
             },] }
 ];
 SideNavToggleComponent.ctorParameters = () => [];
 SideNavToggleComponent.propDecorators = {
     expanded: [{ type: Input }],
+    toggleIcon: [{ type: Input }],
+    toggleTpl: [{ type: Input }],
     toggleExpand: [{ type: Output }]
 };
 __decorate([
@@ -1655,7 +1745,7 @@ TopBarMenuButtonComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line:component-selector
                 selector: 'button[seamTopBarMenuButton]',
-                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",
+                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",
                 encapsulation: ViewEncapsulation.None,
                 exportAs: 'seamButton',
                 // tslint:disable-next-line:use-input-property-decorator
@@ -1663,7 +1753,7 @@ TopBarMenuButtonComponent.decorators = [
                 // tslint:disable-next-line:use-host-property-decorator
                 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',
                 },
@@ -1673,6 +1763,7 @@ TopBarMenuButtonComponent.decorators = [
 ];
 TopBarMenuButtonComponent.propDecorators = {
     detailTpl: [{ type: Input }],
+    compactDetailTpl: [{ type: Input }],
     compact: [{ type: Input }],
     profileIcon: [{ type: Input }],
     _hasCompactClass: [{ type: HostBinding, args: ['class.top-bar-menu-button--compact',] }],
@@ -1706,6 +1797,10 @@ TopBarTitleComponent.propDecorators = {
 class TopBarItemDirective {
     constructor(template) {
         this.template = template;
+        this.position = 'right';
+    }
+    set seamTopBarItem(value) {
+        this.position = value;
     }
 }
 TopBarItemDirective.decorators = [
@@ -1715,7 +1810,10 @@ TopBarItemDirective.decorators = [
 ];
 TopBarItemDirective.ctorParameters = () => [
     { type: TemplateRef }
-];
+];
+TopBarItemDirective.propDecorators = {
+    seamTopBarItem: [{ type: Input }]
+};
 
 class TopBarMenuBtnDetailDirective {
     constructor(template) {
@@ -1745,6 +1843,34 @@ TopBarMenuDirective.ctorParameters = () => [
     { type: MenuComponent, decorators: [{ type: Self }] }
 ];
 
+class TopBarCompactMenuBtnDetailDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+TopBarCompactMenuBtnDetailDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[seamTopBarCompactMenuBtnDetail]'
+            },] }
+];
+TopBarCompactMenuBtnDetailDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+
+class TopBarNavToggleBtnDetailDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+TopBarNavToggleBtnDetailDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[seamTopBarNavToggleBtnDetail]'
+            },] }
+];
+TopBarNavToggleBtnDetailDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+
 /**
  * Top bar of an app.
  *
@@ -1769,8 +1895,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 */
@@ -1783,18 +1927,27 @@ class TheSeamTopBarComponent {
     /** @ignore */
     ngAfterContentInit() {
         if (this._topBarItems) {
-            this._items$ = this._topBarItems.changes.pipe(startWith(undefined), takeUntil(this._ngUnsubscribe), map(() => { var _a; return ((_a = this._topBarItems) === null || _a === void 0 ? void 0 : _a.toArray()) || []; }), shareReplay({ bufferSize: 1, refCount: true }));
+            this._topBarItems.changes.pipe(startWith(undefined), takeUntil(this._ngUnsubscribe), map(() => {
+                var _a;
+                const items = ((_a = this._topBarItems) === null || _a === void 0 ? void 0 : _a.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.decorators = [
     { type: Component, args: [{
                 selector: 'seam-top-bar',
-                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",
+                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\"></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",
                 encapsulation: ViewEncapsulation.None,
                 exportAs: 'seamTopBar',
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                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"]
+                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"]
             },] }
 ];
 TheSeamTopBarComponent.ctorParameters = () => [
@@ -1804,6 +1957,8 @@ TheSeamTopBarComponent.propDecorators = {
     _topBarMenu: [{ type: ContentChild, args: [TopBarMenuDirective, { static: true },] }],
     _topBarItems: [{ type: ContentChildren, args: [TopBarItemDirective,] }],
     _topBarMenuBtnDetailTpl: [{ type: ContentChild, args: [TopBarMenuBtnDetailDirective,] }],
+    _topBarCompactMenuBtnDetailTpl: [{ type: ContentChild, args: [TopBarCompactMenuBtnDetailDirective,] }],
+    _topBarNavToggleBtnDetailTpl: [{ type: ContentChild, args: [TopBarNavToggleBtnDetailDirective,] }],
     logo: [{ type: Input }],
     logoSm: [{ type: Input }],
     logoHref: [{ type: Input }],
@@ -1812,11 +1967,17 @@ TheSeamTopBarComponent.propDecorators = {
     hasTitle: [{ type: Input }],
     titleText: [{ type: Input }],
     subTitleText: [{ type: Input }],
-    profileIcon: [{ type: Input }]
+    hasTopBarMenuButton: [{ type: Input }],
+    profileIcon: [{ type: Input }],
+    toggleIcon: [{ type: Input }],
+    navToggleAlign: [{ type: Input }]
 };
 __decorate([
     InputBoolean()
-], TheSeamTopBarComponent.prototype, "hasTitle", void 0);
+], TheSeamTopBarComponent.prototype, "hasTitle", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTopBarComponent.prototype, "hasTopBarMenuButton", void 0);
 
 class TheSeamTopBarModule {
 }
@@ -1828,7 +1989,9 @@ TheSeamTopBarModule.decorators = [
                     TopBarMenuButtonComponent,
                     TopBarMenuDirective,
                     TopBarItemDirective,
-                    TopBarMenuBtnDetailDirective
+                    TopBarMenuBtnDetailDirective,
+                    TopBarCompactMenuBtnDetailDirective,
+                    TopBarNavToggleBtnDetailDirective
                 ],
                 imports: [
                     CommonModule,
@@ -1845,7 +2008,9 @@ TheSeamTopBarModule.decorators = [
                     TopBarMenuDirective,
                     TheSeamMenuModule,
                     TopBarItemDirective,
-                    TopBarMenuBtnDetailDirective
+                    TopBarMenuBtnDetailDirective,
+                    TopBarCompactMenuBtnDetailDirective,
+                    TopBarNavToggleBtnDetailDirective
                 ]
             },] }
 ];
@@ -2677,9 +2842,533 @@ TheSeamSchemaFormModule.decorators = [
             },] }
 ];
 
+function isHorizontalNavItemType(item, type) {
+    return item.itemType === type;
+}
+function isHorizontalNavItemActive(item) {
+    var _a, _b;
+    return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.active) !== null && _b !== void 0 ? _b : false;
+}
+function isHorizontalNavItemExpanded(item) {
+    var _a, _b;
+    return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.expanded) !== null && _b !== void 0 ? _b : 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
+    };
+    // 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 NavItemComponent {
+    constructor() {
+        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.badgeTheme = 'danger';
+        this.childAction = 'menu';
+        this.expandAction = 'toggle';
+        this.navItemExpanded = new EventEmitter();
+    }
+    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 = Object.assign(Object.assign({}, value), { placement: value.placement || 'auto', disabled: typeof (value === null || value === void 0 ? void 0 : value.disabled) === 'boolean'
+                        ? value.disabled
+                        : typeof value.tooltip === 'string' ? false : true });
+            }
+        }
+        else {
+            this._badgeTooltip = undefined;
+        }
+    }
+    get _isActiveCssClass() { return this.active; }
+    get _isChildActiveCssClass() { return this.hasActiveChild; }
+    get _isExpandedCssClass() { return this.expanded; }
+    get _attrDataHierLevel() { return this.hierLevel; }
+    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);
+        // 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.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-nav-item',
+                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    childAction=\"expand\"\n    [hideEmptyIcon]=\"hideEmptyIcon\">\n  </seam-nav-item>\n</ng-template>\n\n",
+                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,
+                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:0px;right:0px}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"]
+            },] }
+];
+NavItemComponent.ctorParameters = () => [];
+NavItemComponent.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 }],
+    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',] }],
+    _attrDataHierLevel: [{ type: HostBinding, args: ['attr.data-hier-level',] }],
+    _menu: [{ type: ViewChild, args: [MenuComponent,] }],
+    _navItems: [{ type: ViewChildren, args: [NavItemComponent,] }]
+};
+__decorate([
+    InputBoolean()
+], NavItemComponent.prototype, "active", void 0);
+__decorate([
+    InputNumber(0)
+], NavItemComponent.prototype, "hierLevel", void 0);
+__decorate([
+    InputNumber(10)
+], NavItemComponent.prototype, "indentSize", void 0);
+
+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);
+            return new Observable((subscriber) => {
+                const stateChangeSub = this.itemChanged.pipe(switchMap(change => {
+                    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(() => {
+                    try {
+                        this.updateItemsStates(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);
+            if (isHorizontalNavItemType(item, 'link')) {
+                const url = this._getUrl(item);
+                if (notNullOrUndefined(url)) {
+                    const opts = this._getMatchOptions(item);
+                    this.setItemStateProp(item, 'active', this._router.isActive(url, opts));
+                }
+            }
+            // 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;
+        }
+    }
+    _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);
+            }
+        }
+    }
+    _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 Object.assign(Object.assign({}, 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.decorators = [
+    { type: Injectable }
+];
+TheSeamNavService.ctorParameters = () => [
+    { type: Router }
+];
+
+class HorizontalNavComponent {
+    constructor() {
+        this._ngUnsubscribe = new Subject();
+        this._items = new BehaviorSubject([]);
+        this.hideEmptyIcon = true;
+        this.hierLevel = 0;
+        this.childAction = 'menu';
+        this.expandAction = 'toggle';
+        this._focusedNavItem = new BehaviorSubject(undefined);
+        this.focusedNavItem$ = this._focusedNavItem.asObservable();
+        this.navItemExpanded = new EventEmitter();
+        this.items$ = this._items.asObservable();
+    }
+    get items() { return this._items.value; }
+    set items(value) {
+        this._items.next(value);
+    }
+    /**
+     * The 'focused' nav item refers to the item in
+     * the list that was most recently expanded or activated.
+     * // TODO: make all this better
+     */
+    get focusedNavItem() {
+        return this._focusedNavItem.value;
+    }
+    set focusedNavItem(value) {
+        this._focusedNavItem.next(value);
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    _navItemExpanded(item, expanded) {
+        this.navItemExpanded.emit({ navItem: item, expanded });
+    }
+    _navItemIsFocused(item) {
+        return this.focusedNavItem$.pipe(map(focusedNavItem => areSameHorizontalNavItem(focusedNavItem, item)));
+    }
+}
+HorizontalNavComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-horizontal-nav',
+                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      [hierLevel]=\"hierLevel\"\n      [childAction]=\"childAction\"\n      [expandAction]=\"expandAction\"\n      (navItemExpanded)=\"_navItemExpanded(item, $event)\"\n      [class.seam-nav-item--focused]=\"_navItemIsFocused(item) | async\"\n      [hideEmptyIcon]=\"hideEmptyIcon\">\n    </seam-nav-item>\n  </div>\n</div>\n",
+                providers: [
+                    TheSeamNavService
+                ],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                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"]
+            },] }
+];
+HorizontalNavComponent.ctorParameters = () => [];
+HorizontalNavComponent.propDecorators = {
+    items: [{ type: Input }],
+    hideEmptyIcon: [{ type: Input }],
+    hierLevel: [{ type: Input }],
+    childAction: [{ type: Input }],
+    expandAction: [{ type: Input }],
+    focusedNavItem: [{ type: Input }],
+    navItemExpanded: [{ type: Output }]
+};
+
+class TheSeamNavModule {
+}
+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, BaseLayoutTopBarDirective, DashboardComponent, DashboardWidgetContainerComponent, DashboardWidgetPortalOutletDirective, DashboardWidgetTemplateContainerComponent, DashboardWidgetsComponent, DashboardWidgetsPreferencesService, DashboardWidgetsService, HierarchyLevelResolver, HierarchyRouterOutletComponent, SideNavComponent, SideNavItemComponent, SideNavToggleComponent, THESEAM_BASE_LAYOUT_REF, THESEAM_DASHBOARD_WIDGETS_PREFERENCES_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, BaseLayoutSideBarFooterDirective as ɵa, TheSeamSideNavService as ɵb, TheSeamSchemaFormControlsModule as ɵc, TheSeamSchemaFormCheckboxComponent as ɵd, TheSeamSchemaFormSubmitComponent as ɵe, TheSeamSchemaFormSelectComponent as ɵf, TheSeamSchemaFormInputComponent as ɵg, TheSeamSchemaFormNumberComponent as ɵh, TheSeamSchemaFormSubmitSplitComponent as ɵi };
+export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutNavToggleDirective, BaseLayoutSideBarDirective, BaseLayoutTopBarDirective, DashboardComponent, DashboardWidgetContainerComponent, DashboardWidgetPortalOutletDirective, DashboardWidgetTemplateContainerComponent, DashboardWidgetsComponent, DashboardWidgetsPreferencesService, DashboardWidgetsService, HierarchyLevelResolver, HierarchyRouterOutletComponent, HorizontalNavComponent, NavItemComponent, SideNavComponent, SideNavItemComponent, SideNavToggleComponent, THESEAM_BASE_LAYOUT_REF, THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, THE_SEAM_BASE_LAYOUT, TheSeamBaseLayoutComponent, TheSeamBaseLayoutModule, TheSeamDashboardModule, TheSeamDynamicRouterModule, TheSeamFramework, TheSeamNavModule, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarTitleComponent, areSameHorizontalNavItem, canBeActive, canExpand, canHaveChildren, fader, findHorizontalNavLinkItems, findLinkItems, getHorizontalNavItemStateProp, getItemStateProp, hasActiveChild, hasChildren, hasExpandedChild, horizontalNavItemCanBeActive, horizontalNavItemCanExpand, horizontalNavItemCanHaveChildren, horizontalNavItemHasActiveChild, horizontalNavItemHasChildren, horizontalNavItemHasExpandedChild, isExpanded, isHorizontalNavItemActive, isHorizontalNavItemExpanded, isHorizontalNavItemType, isNavItemActive, isNavItemType, routeChanges, setDefaultHorizontalNavItemState, setDefaultState, setHorizontalNavItemStateProp, setItemStateProp, sideNavExpandStateChangeFn, sideToSide, slider, stepper, transformer, BaseLayoutSideBarFooterDirective as ɵa, BaseLayoutSideBarHeaderDirective as ɵb, TheSeamSideNavService as ɵc, TopBarCompactMenuBtnDetailDirective as ɵd, TopBarNavToggleBtnDetailDirective as ɵe, TheSeamSchemaFormControlsModule as ɵf, TheSeamSchemaFormCheckboxComponent as ɵg, TheSeamSchemaFormSubmitComponent as ɵh, TheSeamSchemaFormSelectComponent as ɵi, TheSeamSchemaFormInputComponent as ɵj, TheSeamSchemaFormNumberComponent as ɵk, TheSeamSchemaFormSubmitSplitComponent as ɵl, TheSeamNavService as ɵm };
 //# sourceMappingURL=theseam-ui-common-framework.js.map