@theseam/ui-common 0.3.14-beta.2 → 0.3.15-beta.1

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

@@ -1,3400 +0,0 @@
-import * as i0 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, 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 { __decorate } from 'tslib';
-import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { moveItemInArray, transferArrayItem, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
-import { InputBoolean, InputNumber, mixinDisabled } from '@theseam/ui-common/core';
-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, 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';
-import { A11yModule } from '@angular/cdk/a11y';
-import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { MenuComponent, TheSeamMenuModule } from '@theseam/ui-common/menu';
-import { faUserCircle } from '@fortawesome/free-regular-svg-icons';
-import { JsonSchemaFormService, isArray, buildTitleMap, hasOwn, Framework, JsonSchemaFormModule, WidgetLibraryModule, FrameworkLibraryService, WidgetLibraryService } from '@ajsf/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { TheSeamCheckboxModule } from '@theseam/ui-common/checkbox';
-import { TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
-
-class BaseLayoutContentFooterDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-BaseLayoutContentFooterDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamBaseLayoutContentFooter]'
-            },] }
-];
-BaseLayoutContentFooterDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-class BaseLayoutContentHeaderDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-BaseLayoutContentHeaderDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamBaseLayoutContentHeader]'
-            },] }
-];
-BaseLayoutContentHeaderDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-class BaseLayoutContentDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-BaseLayoutContentDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamBaseLayoutContent]'
-            },] }
-];
-BaseLayoutContentDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-const THESEAM_BASE_LAYOUT_REF = new InjectionToken('seamBaseLayoutRef');
-
-/**
- * Can be used to toggle the expand state of the registered nav.
- */
-class BaseLayoutNavToggleDirective {
-    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; }
-    get _attrAriaLabel() { return this.ariaLabel || null; }
-    _onClick() {
-        if (this.baseLayout && this.baseLayout.registeredNav) {
-            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: [{
-                selector: 'button[seamBaseLayoutNavToggle]',
-                exportAs: 'seamBaseLayoutNavToggle'
-            },] }
-];
-BaseLayoutNavToggleDirective.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [THESEAM_BASE_LAYOUT_REF,] }] }
-];
-BaseLayoutNavToggleDirective.propDecorators = {
-    _attrType: [{ type: HostBinding, args: ['attr.type',] }],
-    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',] }]
-};
-
-class BaseLayoutSideBarDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-BaseLayoutSideBarDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamBaseLayoutSideBar]'
-            },] }
-];
-BaseLayoutSideBarDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-class BaseLayoutTopBarDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-BaseLayoutTopBarDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamBaseLayoutTopBar]'
-            },] }
-];
-BaseLayoutTopBarDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-const THE_SEAM_BASE_LAYOUT = {
-    provide: THESEAM_BASE_LAYOUT_REF,
-    // tslint:disable-next-line:no-use-before-declare
-    useExisting: forwardRef(() => TheSeamBaseLayoutComponent),
-    multi: false,
-};
-class TheSeamBaseLayoutComponent {
-    constructor(_viewContainerRef, _layout) {
-        this._viewContainerRef = _viewContainerRef;
-        this._layout = _layout;
-        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();
-        this._registeredActions = new BehaviorSubject([]);
-        this.registeredActions$ = this._registeredActions.asObservable();
-        this.isMobile$ = this._layout.isMobile$;
-        this.hasSideBar$ = this._hasSideBar.asObservable();
-    }
-    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);
-            if (this.showSidebar) {
-                this._hasSideBar.next(true);
-            }
-        }
-        if (this._contentTpl) {
-            this._contentPortal = new TemplatePortal(this._contentTpl, this._viewContainerRef);
-        }
-        if (this._contentHeaderTpl) {
-            this._contentHeaderPortal = new TemplatePortal(this._contentHeaderTpl, this._viewContainerRef);
-        }
-        if (this._contentFooterTpl) {
-            this._contentFooterPortal = new TemplatePortal(this._contentFooterTpl, this._viewContainerRef);
-        }
-    }
-    registerNav(nav) {
-        // TODO: Allow multiple registered navs
-        // if (this.registeredNav) {
-        //   throw new Error('[TheSeamBaseLayoutComponent] A nav is already registered.')
-        // }
-        // console.log('register nav', nav)
-        this._registeredNav.next(nav);
-    }
-    unregisterNav(nav) {
-        if (this.registeredNav === nav) {
-            this._registeredNav.next(undefined);
-        }
-    }
-    registerAction(action) {
-        const actions = this._registeredActions.value;
-        if (actions.findIndex(a => a.name === action.name) !== -1) {
-            if (isDevMode()) {
-                console.warn(`[TheSeamBaseLayoutComponent] registerAction(): Action ${action.name} not ` +
-                    'registered, because another action by that name is already registered.');
-            }
-            return;
-        }
-        actions.push(action);
-    }
-    unregisterAction(action) {
-        const actionName = typeof action === 'string' ? action : action.name;
-        const actions = this._registeredActions.value;
-        this._registeredActions.next(actions.filter(f => f.name !== actionName));
-    }
-    isActionRegistered(actionName) {
-        const actions = this._registeredActions.value;
-        const action = actions.find(f => f.name === actionName);
-        return !!action;
-    }
-    _handleButtonAction(action) {
-        this._execButtonAction(action).subscribe();
-    }
-    _execButtonAction(action) {
-        const fnRes = action.exec();
-        return isObservable(fnRes) ? fnRes : from(Promise.resolve(fnRes));
-    }
-}
-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 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;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 = () => [
-    { type: ViewContainerRef },
-    { type: TheSeamLayoutService }
-];
-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 },] }],
-    _contentHeaderTpl: [{ type: ContentChild, args: [BaseLayoutContentHeaderDirective, { static: true, read: TemplateRef },] }],
-    _contentFooterTpl: [{ type: ContentChild, args: [BaseLayoutContentFooterDirective, { static: true, read: TemplateRef },] }]
-};
-
-class BaseLayoutSideBarFooterDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-BaseLayoutSideBarFooterDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamBaseLayoutSideBarFooter]'
-            },] }
-];
-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 = [
-    { type: NgModule, args: [{
-                declarations: [
-                    TheSeamBaseLayoutComponent,
-                    BaseLayoutContentDirective,
-                    BaseLayoutSideBarDirective,
-                    BaseLayoutSideBarFooterDirective,
-                    BaseLayoutSideBarHeaderDirective,
-                    BaseLayoutTopBarDirective,
-                    BaseLayoutNavToggleDirective,
-                    BaseLayoutContentHeaderDirective,
-                    BaseLayoutContentFooterDirective
-                ],
-                imports: [
-                    CommonModule,
-                    PortalModule,
-                    TheSeamScrollbarModule,
-                    TheSeamIconModule,
-                    TheSeamButtonsModule
-                ],
-                exports: [
-                    TheSeamBaseLayoutComponent,
-                    BaseLayoutContentDirective,
-                    BaseLayoutSideBarDirective,
-                    BaseLayoutSideBarFooterDirective,
-                    BaseLayoutSideBarHeaderDirective,
-                    BaseLayoutTopBarDirective,
-                    BaseLayoutNavToggleDirective,
-                    BaseLayoutContentHeaderDirective,
-                    BaseLayoutContentFooterDirective
-                ]
-            },] }
-];
-
-class DashboardWidgetContainerComponent {
-    constructor() { }
-    ngOnInit() { }
-}
-DashboardWidgetContainerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-dashboard-widget-container',
-                template: "<ng-template><ng-content></ng-content></ng-template>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-DashboardWidgetContainerComponent.ctorParameters = () => [];
-DashboardWidgetContainerComponent.propDecorators = {
-    def: [{ type: Input }],
-    templateRef: [{ type: ViewChild, args: [TemplateRef,] }]
-};
-
-const THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR = new InjectionToken('ITheSeamDashboardWidgetsPreferencesAccessor');
-
-// TODO: This needs a unit test to make sure it will not cause a race condition
-// if update is called faster than the previous can respond.
-//
-// The ideal approach I am thinking, without steping through the process too
-// thoroughly is to hold the new data emit until all pending updates are done.
-// Any pending updates other than the most recently requested will be ignored
-// and just wait on the most recent, and if already running it should be
-// canceled if possible. Also, incase something happens that causes the new data
-// emissions to get held up too long, there could be a threshold time that the
-// new data can be held up.
-/**
- * Manages anything dealing with retrieving and updating dashboard widget
- * preference data from the provided accessor.
- */
-class DashboardWidgetsPreferencesService {
-    // private _pending = false
-    // public get pending() { return this._pending }
-    constructor(_prefsAccessor) {
-        this._prefsAccessor = _prefsAccessor;
-        this._tablePrefsMap = new Map();
-    }
-    preferences(preferenceKey) {
-        let prefs = this._tablePrefsMap.get(preferenceKey);
-        if (!prefs) {
-            const refreshSubject = new Subject();
-            prefs = {
-                observable: this._createObservable(refreshSubject, preferenceKey),
-                refresh: refreshSubject
-            };
-            this._tablePrefsMap.set(preferenceKey, prefs);
-        }
-        return prefs.observable;
-    }
-    _createObservable(refreshSubject, prefKey) {
-        if (!this._prefsAccessor) {
-            return of({});
-        }
-        const accessor = (key) => this._prefsAccessor ? this._prefsAccessor.get(key) : of('{}');
-        return refreshSubject.pipe(startWith({}), 
-        // tap(() => console.log('Start requesting: ', prefKey)),
-        switchMap(() => accessor(prefKey).pipe(map(v => {
-            if (!v) {
-                return null;
-            }
-            // TODO: Add a schema validator and migration tool to avoid parsing issues.
-            try {
-                return JSON.parse(v);
-            }
-            catch (error) {
-                if (isDevMode()) {
-                    console.error(error);
-                }
-                return null;
-            }
-        }), map(v => !!v ? v : {}))), shareReplay({ bufferSize: 1, refCount: true }));
-    }
-    refresh(preferenceKey) {
-        const prefs = this._tablePrefsMap.get(preferenceKey);
-        if (prefs) {
-            // this._pending = true
-            // prefs.refresh.next()
-            return prefs.observable.pipe(
-            // tap(() => prefs.refresh.next()),
-            tap(() => setTimeout(() => { prefs.refresh.next(); }, 0)), mapTo(undefined), take(1));
-        }
-        return of(undefined);
-    }
-    selectLayout(preferenceKey, layoutName) {
-        return this.preferences(preferenceKey).pipe(map(prefs => (prefs.layouts || []).find(l => l.name === layoutName)));
-    }
-    // TODO: Improve this updating to not be more generic, so we can quickly add
-    // edits for different preference schema's.
-    //
-    // TODO: Decide if a send queue/merging of pending queue is needed to avoid
-    // out of order updates. This shouldn't be an issue, with how fast preferences
-    // will most likely be changing, but it could happen in situations, such as
-    // network issues.
-    updateLayout(preferenceKey, layout) {
-        if (!this._prefsAccessor) {
-            return of(undefined);
-        }
-        if (!hasProperty(layout, 'name')) {
-            throw Error(`Unable to save layout preference. 'name' is required for a layout preference.`);
-        }
-        const _layout = this.toSerializeableLayout(layout);
-        // this._pending = true
-        return this.preferences(preferenceKey).pipe(map(prefs => {
-            // Making the preferences immutable may not be necessary, but for now
-            // this obj->str->obj will work as a naive clone.
-            const layouts = JSON.parse(JSON.stringify(prefs.layouts || []));
-            const _layoutPref = layouts.find((c) => c.name === _layout.name);
-            // console.log('has', _layoutPref)
-            if (_layoutPref) {
-                if (hasProperty(_layout, 'name')) {
-                    _layoutPref.name = _layout.name;
-                }
-                if (hasProperty(_layout, 'label')) {
-                    _layoutPref.label = _layout.label;
-                }
-                if (hasProperty(_layout, 'items')) {
-                    _layoutPref.items = _layout.items;
-                }
-            }
-            else {
-                layouts.push(Object.assign({}, _layout));
-            }
-            const newPrefs = Object.assign(Object.assign({}, prefs), { layouts });
-            return newPrefs;
-        }), 
-        // tap(v => console.log('newPrefs', v)),
-        take(1), switchMap(newPrefs => this._prefsAccessor
-            ? this._prefsAccessor.update(preferenceKey, JSON.stringify(newPrefs))
-            : of(newPrefs)), switchMap(() => this.refresh(preferenceKey).pipe(mapTo(undefined))));
-        // .subscribe()
-    }
-    toSerializeableLayout(layout) {
-        const serialized = {
-            name: layout.name,
-            label: layout.label,
-            items: this.toSerializeableItems(layout.items) || []
-        };
-        return serialized;
-    }
-    // public toDeserializedLayout(layout: IDashboardWidgetItemLayoutSerialized): IDashboardWidgetItemLayoutDef {
-    //   // For now there is nothing to do. Eventually this should have at least
-    //   // validation on the deserialized object.
-    //   return layout
-    // }
-    /**
-     * Returns the serializable widget items as objects that can be serialized to
-     * a JSON string for storage.
-     */
-    toSerializeableItems(widgets) {
-        const serialized = [];
-        for (const w of widgets) {
-            // if (!w.__itemDef.component || typeof w.__itemDef.component !== 'string') {
-            //   console.warn(`[DashboardWidgetsService] Widget item def must have a string 'component' property to be serialized.`, w)
-            //   continue
-            // }
-            // serialized.push({
-            //   widgetId: w.widgetId,
-            //   col: w.col,
-            //   order: w.order,
-            //   component: w.__itemDef.component
-            // })
-            // TODO: Remove this, it is only here for initial dev debugging.
-            serialized.push({
-                widgetId: w.widgetId,
-                col: w.col,
-                order: w.order,
-                // component: w.__itemDef.component as string
-            });
-        }
-        return serialized;
-    }
-}
-DashboardWidgetsPreferencesService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DashboardWidgetsPreferencesService_Factory() { return new DashboardWidgetsPreferencesService(i0.ɵɵinject(THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, 8)); }, token: DashboardWidgetsPreferencesService, providedIn: "root" });
-DashboardWidgetsPreferencesService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-DashboardWidgetsPreferencesService.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR,] }] }
-];
-
-class DashboardWidgetsService {
-    constructor(_dynamicComponentLoaderModule, _preferences) {
-        this._dynamicComponentLoaderModule = _dynamicComponentLoaderModule;
-        this._preferences = _preferences;
-        this.preferenceKey = 'datatable-widgets';
-        this.defaultNumColumns = 3;
-        /** Used for operations, such as 'addWidget', if the column is not specified. */
-        this.defaultColumn = 0;
-        this._widgets = new BehaviorSubject([]);
-        this._numColumns = new BehaviorSubject(this.defaultNumColumns);
-        this._viewContainerRefSubject = new BehaviorSubject(undefined);
-        this.numColumns$ = this._numColumns.asObservable();
-        // Widget items without preferences
-        const _widgetItems$ = combineLatest([this._widgets, this._viewContainerRefSubject])
-            .pipe(switchMap(([defs, vcr]) => this.createWidgetItems(defs, vcr)));
-        // Widget items with preferences
-        this.widgetItems$ = combineLatest([_widgetItems$, this.numColumns$])
-            .pipe(
-        // Wait until the current tick is done, incase both the widgets and
-        // number of columns are set durring the same tick. Without the audit,
-        // this would get called twice when the component is initialized with
-        // both inputs set one after the other individually.
-        auditTime(0), switchMap(([items, numColumns]) => this._preferences.selectLayout(this.preferenceKey, this._layoutName(numColumns)).pipe(map(layout => layout ? this.withLayoutPreferences(items, layout) : items))), shareReplay({ bufferSize: 1, refCount: true }));
-        this.widgetColumns$ = this.widgetItems$
-            .pipe(map(items => this.toColumnRecords(items)), shareReplay({ bufferSize: 1, refCount: true }));
-    }
-    get widgets() { return this._widgets.value; }
-    set widgets(value) { this._widgets.next(value); }
-    get numColumns() { return this._numColumns.value; }
-    set numColumns(value) {
-        if (value !== this._numColumns.value) {
-            this._numColumns.next(value);
-        }
-    }
-    _layoutName(numColumns) {
-        return `columns-${numColumns}`;
-    }
-    setViewContainerRef(vcr) {
-        this._viewContainerRefSubject.next(vcr);
-    }
-    createWidgetItems(defs, vcr) {
-        const _createObservables = (defs || []).map(d => this.createWidgetItem(d, vcr));
-        const items$ = _createObservables.length > 0 ? combineLatest(_createObservables) : of([]);
-        return items$.pipe(map(items => items.filter(notNullOrUndefined)), tap(items => {
-            if (isDevMode()) {
-                const ids = items.map(v => v.widgetId);
-                if ((new Set(ids)).size !== ids.length) {
-                    console.warn(`[DashboardWidgetsService] Duplicate widget's with the same 'widgetId' found.`);
-                }
-            }
-        }));
-    }
-    createWidgetItem(def, vcr) {
-        if (!def.widgetId || typeof def.widgetId !== 'string' || def.widgetId.length < 1) {
-            if (isDevMode()) {
-                console.warn(`[DashboardWidgetsService] Widget ignored. All widgets must have a 'widgetId'.`, def);
-            }
-            return of(undefined);
-        }
-        return this.createWidgetPortal(def, vcr).pipe(map(portal => (Object.assign(Object.assign({}, def), { col: def.col || this.defaultColumn, order: def.order || 0, portal, __itemDef: def }))));
-    }
-    createWidgetPortal(def, vcr) {
-        if (typeof def.component === 'string') {
-            return this._dynamicComponentLoaderModule
-                .getComponentFactory(def.component)
-                .pipe(map(componentFactory => {
-                return new ComponentPortal(componentFactory.componentType, vcr, undefined, componentFactory.ngModule.componentFactoryResolver);
-            }), take(1));
-        }
-        return def.componentFactoryResolver
-            ? of(new ComponentPortal(def.component, vcr, undefined, def.componentFactoryResolver))
-            : of(new ComponentPortal(def.component, vcr));
-    }
-    updateOrder() {
-        return this.widgetColumns$
-            .pipe(take(1), tap(columns => columns.forEach(col => {
-            let i = 0;
-            col.items.forEach(itm => itm.order = i++);
-        })), mapTo(undefined));
-    }
-    toColumnRecords(items) {
-        let columns = [];
-        for (let i = 0; i < this.numColumns; i++) {
-            columns.push({ column: i, items: [] });
-        }
-        const colNotFound = [];
-        // Distribute items into columns
-        for (const item of items) {
-            const col = columns.find(c => c.column === item.col);
-            if (!col) {
-                // columns.push({ column: item.col, items: [ item ] })
-                // if (item.col < 0) {
-                //   const col0: IDashboardWidgetsColumnRecord | undefined = columns.find(c => c.column === 0)
-                //   if (col0) {
-                //     col0.items.push(item)
-                //   }
-                // } else if (item.col > this.numColumns - 1) {
-                //   const colMax: IDashboardWidgetsColumnRecord | undefined = columns.find(c => c.column === this.numColumns - 1)
-                //   if (colMax) {
-                //     colMax.items.push(item)
-                //   }
-                // }
-                colNotFound.push(item);
-            }
-            else {
-                col.items.push(item);
-            }
-        }
-        for (let i = 0; i < colNotFound.length; i++) {
-            const item = colNotFound[i];
-            const col = columns
-                .find(c => c.column === i % this.numColumns);
-            if (col) {
-                col.items.push(item);
-            }
-        }
-        // Sort columns
-        columns = columns.sort((a, b) => a.column - b.column);
-        // Sort columns items
-        columns.forEach(col => col.items.sort((a, b) => a.order - b.order));
-        return columns;
-    }
-    withLayoutPreferences(items, layout) {
-        const _items = [];
-        for (const item of items) {
-            const itemPref = layout.items.find(x => x.widgetId === item.widgetId);
-            _items.push(Object.assign(Object.assign({}, item), (itemPref || {})));
-        }
-        return _items;
-    }
-    savePreferences() {
-        // Right now the items are moved between the column record arrays, but the
-        // 'col' prop is not updated, so it is mapped to corrected items here from
-        // the column records.
-        const items$ = this.widgetColumns$.pipe(map(columns => []
-            .concat(...(columns.map(c => c.items.map(itm => (Object.assign(Object.assign({}, itm), { col: c.column }))))))));
-        return combineLatest([items$, this.numColumns$]).pipe(auditTime(0), take(1), switchMap(([items, numColumns]) => {
-            return this._preferences.updateLayout(this.preferenceKey, {
-                name: this._layoutName(numColumns),
-                items
-            });
-        }), mapTo(undefined));
-    }
-}
-DashboardWidgetsService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DashboardWidgetsService_Factory() { return new DashboardWidgetsService(i0.ɵɵinject(i1.TheSeamDynamicComponentLoader), i0.ɵɵinject(DashboardWidgetsPreferencesService)); }, token: DashboardWidgetsService, providedIn: "root" });
-DashboardWidgetsService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-DashboardWidgetsService.ctorParameters = () => [
-    { type: TheSeamDynamicComponentLoader },
-    { type: DashboardWidgetsPreferencesService }
-];
-
-class DashboardWidgetsComponent {
-    constructor(_dashboardWidgets, _viewContainerRef, _cdr, _baseLayoutRef) {
-        this._dashboardWidgets = _dashboardWidgets;
-        this._viewContainerRef = _viewContainerRef;
-        this._cdr = _cdr;
-        this._baseLayoutRef = _baseLayoutRef;
-        this.faLock = faLock;
-        this.faUnlock = faUnlock;
-        this._actionWidgetDragToggleName = 'widget-drag-toggle';
-        this._ngUnsubscribe = new Subject();
-        this._gapSize = new BehaviorSubject(30);
-        this.widgetsDraggable = false;
-        this._dragToggleVisible = new BehaviorSubject(true);
-        this._containers = new BehaviorSubject([]);
-        this._layoutChange = new Subject();
-        this.widgetsChange = new EventEmitter();
-        this._widthChange = new Subject();
-        this.containers$ = this._containers.asObservable();
-        this._gapStyleSize$ = this._gapSize.pipe(auditTime(0), map(size => size / 2), shareReplay({ bufferSize: 1, refCount: true }));
-        this._widthChange.pipe(debounceTime(30), tap(width => {
-            if (width > 1300) {
-                this.numColumns = 3;
-            }
-            else if (width > 800) {
-                this.numColumns = 2;
-            }
-            else {
-                this.numColumns = 1;
-            }
-        }), takeUntil(this._ngUnsubscribe)).subscribe();
-        this.widgetItems$ = this._dashboardWidgets.widgetItems$;
-        this.widgetColumns$ = this._dashboardWidgets.widgetColumns$;
-    }
-    get gapSize() { return this._gapSize.value; }
-    set gapSize(val) {
-        this._gapSize.next(coerceNumberProperty(val));
-    }
-    get dragToggleVisible() { return this._dragToggleVisible.value; }
-    set dragToggleVisible(val) {
-        this._dragToggleVisible.next(coerceBooleanProperty(val));
-    }
-    get numColumns() { return this._dashboardWidgets.numColumns; }
-    set numColumns(val) {
-        this._dashboardWidgets.numColumns = coerceNumberProperty(val);
-    }
-    set widgets(value) { this._dashboardWidgets.widgets = value || []; }
-    get widgets() { return this._dashboardWidgets.widgets; }
-    ngOnInit() {
-        // this._dashboardWidgets.setViewContainerRef(this._viewContainerRef)
-        this._layoutChange.pipe(switchMap(() => this.widgetItems$.pipe(take(1), tap(widgetItems => this.widgetsChange.emit(widgetItems)), 
-        // map(widgetItems => this._dashboardWidgets.toSerializeableItems(widgetItems)),
-        // tap(v => console.log('serializable', v)),
-        switchMap(() => this._dashboardWidgets.savePreferences()))), takeUntil(this._ngUnsubscribe)).subscribe();
-    }
-    ngOnDestroy() {
-        this._unregisterToggleAction();
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-    }
-    ngAfterViewInit() {
-        var _a;
-        if (this._baseLayoutRef) {
-            this._dragToggleVisible.pipe(distinctUntilChanged(), tap(visible => {
-                const isRegistered = this._isActionToggleActionRegistered();
-                if (visible && !isRegistered) {
-                    this._registerToggleAction();
-                }
-                else if (!visible && isRegistered) {
-                    this._unregisterToggleAction();
-                }
-            }), takeUntil(this._ngUnsubscribe)).subscribe();
-        }
-        (_a = this.containers) === null || _a === void 0 ? void 0 : _a.changes.pipe(startWith(undefined), map(() => { var _a; return ((_a = this.containers) === null || _a === void 0 ? void 0 : _a.toArray()) || []; }), takeUntil(this._ngUnsubscribe), finalize(() => this._containers.next([]))).subscribe(v => this._containers.next(v));
-    }
-    _registerToggleAction() {
-        if (this._baseLayoutRef) {
-            // This should probably use a component dynamically created from the
-            // config and return a ref to it, instead of using a template.
-            if (this._toggleBtnTpl) {
-                this._baseLayoutRef.registerAction({
-                    // type: 'button',
-                    type: 'template',
-                    name: this._actionWidgetDragToggleName,
-                    label: 'Toggle Widget Dragging',
-                    // exec: () => {
-                    //   console.log('toggle')
-                    // },
-                    template: this._toggleBtnTpl
-                });
-            }
-        }
-    }
-    _unregisterToggleAction() {
-        if (this._baseLayoutRef) {
-            this._baseLayoutRef.unregisterAction(this._actionWidgetDragToggleName);
-        }
-    }
-    _isActionToggleActionRegistered() {
-        if (!this._baseLayoutRef) {
-            return false;
-        }
-        return this._baseLayoutRef.isActionRegistered(this._actionWidgetDragToggleName);
-    }
-    drop(event) {
-        if (event.previousContainer === event.container) {
-            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-            this._dashboardWidgets.updateOrder().subscribe(() => this._layoutChange.next());
-        }
-        else {
-            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
-            this._dashboardWidgets.updateOrder().subscribe(() => this._layoutChange.next());
-        }
-    }
-    _containerTrackByFn(index, item) {
-        return item.widgetId;
-    }
-    _columnsTrackByFn(index, record) {
-        return record.column;
-    }
-    toggleDragging() {
-        this.widgetsDraggable = !this.widgetsDraggable;
-        this._cdr.detectChanges();
-    }
-    _resized(event) {
-        this._widthChange.next(event.size.width);
-    }
-}
-DashboardWidgetsComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-dashboard-widgets',
-                template: "<!--\n  This is an ugly trick I am using to render the component into an <ng-content>\n  wrapped in an <ng-template> to move the component to different outlets without\n  reinitializing it. This way the widget won't reload when moving between\n  columns. When I remember how I programatically did this I will remove this\n  weirdness.\n -->\n <seam-dashboard-widget-container *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\" [def]=\"$any(item)\">\n  <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n  <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n  style=\"flex: 1410px;\"\n  [style.padding.px]=\"_gapStyleSize$ | async\"\n  (seamElemResized)=\"_resized($event)\"\n  cdkDropListGroup>\n  <div *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n    class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n    cdkDropList\n    [cdkDropListData]=\"col.items\"\n    (cdkDropListDropped)=\"drop($any($event))\">\n    <div *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n      class=\"dashboard-widgets-list-item\"\n      [attr.data-widget-id]=\"item.widgetId\"\n      cdkDrag\n      [cdkDragDisabled]=\"!widgetsDraggable\">\n      <div [style.margin.px]=\"_gapStyleSize$ | async\">\n        <seam-dashboard-widget-template-container [item]=\"item\"></seam-dashboard-widget-template-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n  <button seamButton theme=\"baselayout-action\" title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\" (click)=\"toggleDragging()\">\n    <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n  </button>\n</ng-template>\n",
-                providers: [
-                    {
-                        provide: THESEAM_WIDGET_ACCESSOR,
-                        // tslint:disable-next-line:no-use-before-declare
-                        useExisting: forwardRef(() => DashboardWidgetsComponent)
-                    }
-                ],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None,
-                styles: ["seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"]
-            },] }
-];
-DashboardWidgetsComponent.ctorParameters = () => [
-    { type: DashboardWidgetsService },
-    { type: ViewContainerRef },
-    { type: ChangeDetectorRef },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [THESEAM_BASE_LAYOUT_REF,] }] }
-];
-DashboardWidgetsComponent.propDecorators = {
-    gapSize: [{ type: Input }],
-    widgetsDraggable: [{ type: Input }],
-    dragToggleVisible: [{ type: Input }],
-    numColumns: [{ type: Input }],
-    widgets: [{ type: Input }],
-    containers: [{ type: ViewChildren, args: [DashboardWidgetContainerComponent,] }],
-    cdkDragDirectives: [{ type: ViewChildren, args: [CdkDrag,] }],
-    _toggleBtnTpl: [{ type: ViewChild, args: ['toggleBtnTpl', { static: true },] }],
-    widgetsChange: [{ type: Output }]
-};
-__decorate([
-    InputBoolean()
-], DashboardWidgetsComponent.prototype, "widgetsDraggable", void 0);
-
-class DashboardWidgetTemplateContainerComponent {
-    constructor(_dashboardWidgetsComponent) {
-        this._dashboardWidgetsComponent = _dashboardWidgetsComponent;
-        this.template$ = this._dashboardWidgetsComponent.containers$.pipe(map(containers => containers.find((c) => { var _a; return c.def.widgetId === ((_a = this.item) === null || _a === void 0 ? void 0 : _a.widgetId); })), map(container => container && container.templateRef));
-    }
-    ngOnInit() { }
-}
-DashboardWidgetTemplateContainerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-dashboard-widget-template-container',
-                template: "<ng-template [ngTemplateOutlet]=\"$any(template$ | async)\"></ng-template>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-DashboardWidgetTemplateContainerComponent.ctorParameters = () => [
-    { type: DashboardWidgetsComponent }
-];
-DashboardWidgetTemplateContainerComponent.propDecorators = {
-    item: [{ type: Input }]
-};
-
-/**
- * Mostly copied from
- * `https://github.com/angular/components/blob/master/src/cdk/portal/portal-directives.ts`
- * until I can figure out how to hold off removing the DOM nodes with the
- * cdkPortalOutlet. When we update to Angular 9 I may be able to do this better
- * with the new DomPortal.
- *
- * Directive version of a PortalOutlet. Because the directive *is* a
- * PortalOutlet, portals can be directly attached to it, enabling declarative
- * use.
- *
- * Usage: `<ng-template [cdkPortalOutlet]="greeting"></ng-template>`
- */
-class DashboardWidgetPortalOutletDirective extends BasePortalOutlet {
-    constructor(_componentFactoryResolver, _viewContainerRef, _elementRef) {
-        super();
-        this._componentFactoryResolver = _componentFactoryResolver;
-        this._viewContainerRef = _viewContainerRef;
-        this._elementRef = _elementRef;
-        /** Whether the portal component is initialized. */
-        this._isInitialized = false;
-        /** Emits when a portal is attached to the outlet. */
-        this.attached = new EventEmitter();
-    }
-    /** Portal associated with the Portal outlet. */
-    get portal() {
-        return this._attachedPortal;
-    }
-    set portal(portal) {
-        // console.log('[DashboardWidgetPortalOutletDirective] set portal', portal, this.hasAttached())
-        // Ignore the cases where the `portal` is set to a falsy value before the lifecycle hooks have
-        // run. This handles the cases where the user might do something like `<div cdkPortalOutlet>`
-        // and attach a portal programmatically in the parent component. When Angular does the first CD
-        // round, it will fire the setter with empty string, causing the user's content to be cleared.
-        if (this.hasAttached() && !portal && !this._isInitialized) {
-            return;
-        }
-        if (this.hasAttached()) {
-            super.detach();
-        }
-        if (portal) {
-            super.attach(portal);
-        }
-        this._attachedPortal = portal;
-    }
-    /** Component or view reference that is attached to the portal. */
-    get attachedRef() {
-        return this._attachedRef;
-    }
-    ngOnInit() {
-        this._isInitialized = true;
-    }
-    ngOnDestroy() {
-        // console.log('[DashboardWidgetPortalOutletDirective] ngOnDestroy')
-        // TODO: Figure out the right way to call dispose without messing up
-        // animation. This setTimeout way assumes the transition is 500ms, but that
-        // may not always be the case and isn't guaranteed to match the animation ms
-        // duration, since setTimeout isn't really meant for accurate timing. It
-        // also makes debugging animations difficult, because you can pause an
-        // animation, but the timeout will still run.
-        setTimeout(() => {
-            super.dispose();
-            this._attachedPortal = null;
-            this._attachedRef = null;
-        }, 500);
-    }
-    /**
-     * Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.
-     *
-     * @param portal Portal to be attached to the portal outlet.
-     * @returns Reference to the created component.
-     */
-    attachComponentPortal(portal) {
-        portal.setAttachedHost(this);
-        // If the portal specifies an origin, use that as the logical location of the component
-        // in the application tree. Otherwise use the location of this PortalOutlet.
-        const viewContainerRef = portal.viewContainerRef != null ?
-            portal.viewContainerRef :
-            this._viewContainerRef;
-        const resolver = portal.componentFactoryResolver || this._componentFactoryResolver;
-        const componentFactory = resolver.resolveComponentFactory(portal.component);
-        const ref = viewContainerRef.createComponent(componentFactory, viewContainerRef.length, portal.injector || viewContainerRef.injector);
-        super.setDisposeFn(() => ref.destroy());
-        this._attachedPortal = portal;
-        this._attachedRef = ref;
-        this.attached.emit(ref);
-        return ref;
-    }
-    /**
-     * Attach the given TemplatePortal to this PortlHost as an embedded View.
-     * @param portal Portal to be attached.
-     * @returns Reference to the created embedded view.
-     */
-    attachTemplatePortal(portal) {
-        portal.setAttachedHost(this);
-        const viewRef = this._viewContainerRef.createEmbeddedView(portal.templateRef, portal.context);
-        super.setDisposeFn(() => this._viewContainerRef.clear());
-        this._attachedPortal = portal;
-        this._attachedRef = viewRef;
-        this.attached.emit(viewRef);
-        return viewRef;
-    }
-}
-DashboardWidgetPortalOutletDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamDashboardWidgetPortalOutlet]',
-                exportAs: 'seamDashboardWidgetPortalOutlet',
-                inputs: ['portal: seamDashboardWidgetPortalOutlet']
-            },] }
-];
-DashboardWidgetPortalOutletDirective.ctorParameters = () => [
-    { type: ComponentFactoryResolver },
-    { type: ViewContainerRef },
-    { type: ElementRef }
-];
-DashboardWidgetPortalOutletDirective.propDecorators = {
-    attached: [{ type: Output }]
-};
-
-class DashboardComponent {
-    constructor() {
-        this.widgetsDraggable = true;
-    }
-}
-DashboardComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-dashboard',
-                template: "<seam-dashboard-widgets [widgets]=\"widgets\" [widgetsDraggable]=\"widgetsDraggable\"></seam-dashboard-widgets>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-DashboardComponent.ctorParameters = () => [];
-DashboardComponent.propDecorators = {
-    widgets: [{ type: Input }],
-    widgetsDraggable: [{ type: Input }]
-};
-__decorate([
-    InputBoolean()
-], DashboardComponent.prototype, "widgetsDraggable", void 0);
-
-class TheSeamDashboardModule {
-}
-TheSeamDashboardModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    DashboardComponent,
-                    DashboardWidgetsComponent,
-                    DashboardWidgetContainerComponent,
-                    DashboardWidgetTemplateContainerComponent,
-                    DashboardWidgetPortalOutletDirective
-                ],
-                imports: [
-                    CommonModule,
-                    PortalModule,
-                    DragDropModule,
-                    TheSeamButtonsModule,
-                    TheSeamIconModule,
-                    TheSeamSharedModule
-                ],
-                exports: [
-                    DashboardComponent,
-                    DashboardWidgetsComponent,
-                    DashboardWidgetPortalOutletDirective
-                ]
-            },] }
-];
-
-function isNavItemType(item, type) {
-    return item.itemType === type;
-}
-function isNavItemActive(item) {
-    var _a, _b;
-    return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.active) !== null && _b !== void 0 ? _b : false;
-}
-function isExpanded(item) {
-    var _a, _b;
-    return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.expanded) !== null && _b !== void 0 ? _b : false;
-}
-function hasChildren(item) {
-    return canHaveChildren(item) && hasProperty(item, 'children') && item.children.length > 0;
-}
-function canHaveChildren(item) {
-    return isNavItemType(item, 'basic') || isNavItemType(item, 'link');
-}
-function hasActiveChild(item) {
-    if (!hasChildren(item)) {
-        return false;
-    }
-    for (const child of item.children) {
-        if (getItemStateProp(child, 'active')) {
-            return true;
-        }
-    }
-    return false;
-}
-function hasExpandedChild(item) {
-    if (!hasChildren(item)) {
-        return false;
-    }
-    for (const child of item.children) {
-        if (getItemStateProp(child, 'expanded')) {
-            return true;
-        }
-    }
-    return false;
-}
-function canBeActive(item) {
-    return isNavItemType(item, 'basic') || isNavItemType(item, 'link');
-}
-function canExpand(item) {
-    return canHaveChildren(item);
-}
-function findLinkItems(items) {
-    const linkItems = [];
-    const _fn = (_items) => {
-        for (const item of _items) {
-            if (isNavItemType(item, 'link')) {
-                linkItems.push(item);
-            }
-            if (canHaveChildren(item) && hasProperty(item, 'children')) {
-                _fn(item.children);
-            }
-        }
-    };
-    _fn(items);
-    return linkItems;
-}
-function setItemStateProp(item, prop, value) {
-    if (hasProperty(item, '__state')) {
-        item.__state[prop] = value;
-    }
-}
-function getItemStateProp(item, prop) {
-    return setDefaultState(item).__state[prop];
-}
-function setDefaultState(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;
-}
-
-class TheSeamSideNavService {
-    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(() => this.loading$.pipe(filter(loading => !loading)))).subscribe(() => {
-                    subscriber.next(items);
-                });
-                try {
-                    this.updateItemsStates(items);
-                }
-                catch (err) {
-                    subscriber.error(err);
-                }
-                // const linkItems = findLinkItems(items)
-                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 (hasChildren(item)) {
-                    this.updateItemsStates(item.children);
-                }
-                this.updateItemState(item);
-            }
-            this._decrUpdatingCount();
-        }
-        catch (err) {
-            this._decrUpdatingCount();
-            throw err;
-        }
-    }
-    updateItemState(item) {
-        this._incUpdatingCount();
-        try {
-            setDefaultState(item);
-            if (isNavItemType(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 side-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 (hasChildren(item)) {
-                this._updateItemsExpandedState(item.children);
-            }
-            this._updateItemExpandedState(item);
-        }
-    }
-    _updateItemExpandedState(item) {
-        if (!canExpand(item)) {
-            if (getItemStateProp(item, 'expanded')) {
-                this.setItemStateProp(item, 'expanded', false);
-            }
-            return;
-        }
-        if (hasChildren(item)) {
-            this._updateItemsExpandedState(item.children);
-        }
-        if (hasActiveChild(item) || hasExpandedChild(item)) {
-            if (!getItemStateProp(item, 'expanded')) {
-                this.setItemStateProp(item, 'expanded', true);
-            }
-        }
-        else {
-            if (getItemStateProp(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 = getItemStateProp(item, prop);
-        if (currentValue !== value) {
-            setItemStateProp(item, prop, value);
-            const changed = {
-                item,
-                prop,
-                prevValue: currentValue,
-                newValue: value
-            };
-            this.itemChanged.next(changed);
-        }
-    }
-}
-TheSeamSideNavService.decorators = [
-    { type: Injectable }
-];
-TheSeamSideNavService.ctorParameters = () => [
-    { type: Router }
-];
-
-const EXPANDED_STATE$1 = 'expanded';
-const COLLAPSED_STATE$1 = 'collapsed';
-const EXPANDED_OVERLAY_STATE = 'expanded-overlay';
-const COLLAPSED_OVERLAY_STATE = 'collapsed-overlay';
-const EXPANDED_STATES = [EXPANDED_STATE$1, EXPANDED_OVERLAY_STATE];
-const COLLAPSED_STATES = [COLLAPSED_STATE$1, COLLAPSED_OVERLAY_STATE];
-const EXPAND_STATES = [...EXPANDED_STATES, ...COLLAPSED_STATES];
-function sideNavExpandStateChangeFn(fromState, toState) {
-    // console.log({ fromState, toState })
-    return fromState !== toState &&
-        (
-        // NOTE: The current way the side nav is being used it causes the
-        // component to sometimes get placed in the wrong location initially. It
-        // is fast enough to not be noticed without an initial animation usually,
-        // so it is commented out below until the initial placement issue it
-        // fixed.
-        //
-        // (
-        //   fromState === 'void' && EXPAND_STATES.indexOf(toState) !== -1
-        //   ||
-        //   toState === 'void' && EXPAND_STATES.indexOf(fromState) !== -1
-        // )
-        // ||
-        ((EXPANDED_STATES.indexOf(fromState) !== -1 && COLLAPSED_STATES.indexOf(toState) !== -1)
-            ||
-                (EXPANDED_STATES.indexOf(toState) !== -1 && COLLAPSED_STATES.indexOf(fromState) !== -1)));
-}
-class SideNavComponent {
-    constructor(_viewContainerRef, _layout, _sideNav, _baseLayoutRef) {
-        this._viewContainerRef = _viewContainerRef;
-        this._layout = _layout;
-        this._sideNav = _sideNav;
-        this._baseLayoutRef = _baseLayoutRef;
-        this._ngUnsubscribe = new Subject();
-        this.faBars = faBars;
-        // @HostBinding('@sideNavExpand') _sideNavExpand = EXPANDED_STATE
-        // _sideNavExpand = EXPANDED_STATE
-        // @HostBinding('@sideNavAnim') _sideNavExpand = EXPANDED_STATE
-        this._sideNavExpand = 'initial';
-        this.hasHeaderToggle = true;
-        this.toggleIcon = faBars;
-        this._items = new BehaviorSubject([]);
-        this.indentSize = 10;
-        this._expanded = new BehaviorSubject(true);
-        this.expanded$ = this._expanded.asObservable();
-        this.expandOrigin = 'left';
-        this.expandHeight = '100%';
-        this.expandWidth = 'calc(100vw - 50px)';
-        this._overlay = new BehaviorSubject(false);
-        this.overlay$ = this._overlay.asObservable();
-        this.toggleExpand = new EventEmitter();
-        this._backdropHidden = new BehaviorSubject(true);
-        this.items$ = this._items.asObservable().pipe(switchMap(items => items ? this._sideNav.createItemsObservable(items) : []), shareReplay({ bufferSize: 1, refCount: true }));
-        this.isMobile$ = this._layout.isMobile$.pipe(tap(isMobile => isMobile ? this.collapse() : this.expand()));
-        this.sideNavExpandedState$ = combineLatest([this.expanded$, this.overlay$]).pipe(map(([expanded, overlay]) => expanded
-            ? overlay ? EXPANDED_OVERLAY_STATE : EXPANDED_STATE$1
-            : overlay ? COLLAPSED_OVERLAY_STATE : COLLAPSED_STATE$1), distinctUntilChanged());
-    }
-    get items() { return this._items.value; }
-    set items(value) { this._items.next(value); }
-    get expanded() { return this._expanded.value; }
-    set expanded(value) {
-        const expanded = coerceBooleanProperty(value);
-        const emit = expanded !== this.expanded;
-        this._expanded.next(expanded);
-        if (emit) {
-            this.toggleExpand.emit(coerceBooleanProperty(value));
-        }
-    }
-    get overlay() { return this._overlay.value; }
-    set overlay(value) { this._overlay.next(coerceBooleanProperty(value)); }
-    ngOnInit() {
-        if (this._baseLayoutRef) {
-            this._baseLayoutRef.registerNav(this);
-        }
-        this.isMobile$
-            .pipe(takeUntil(this._ngUnsubscribe))
-            .subscribe(b => this.overlay = b);
-        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);
-        }
-    }
-    ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-        if (this._baseLayoutRef) {
-            this._baseLayoutRef.unregisterNav(this);
-        }
-    }
-    expand() {
-        this.expanded = true;
-    }
-    collapse() {
-        this.expanded = false;
-    }
-    toggle() {
-        this.expanded = !this.expanded;
-    }
-    animateStart() {
-        if (this.expanded) {
-            this._backdropHidden.next(false);
-        }
-    }
-    animateEnd() {
-        if (!this.expanded) {
-            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\"\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
-                ],
-                animations: [
-                    //
-                    // TODO: This animation code turned into a mess. Clean it up and make it
-                    // more smooth.
-                    //
-                    trigger('sideNavAnim', [
-                        transition(sideNavExpandStateChangeFn, [
-                            group([
-                                query('@sideNavBackdrop', animateChild(), { optional: true }),
-                                query('@sideNavExpand', animateChild(), { optional: true }),
-                            ]),
-                        ]),
-                    ]),
-                    trigger('sideNavBackdrop', [
-                        state(EXPANDED_OVERLAY_STATE, style({ opacity: '1' })),
-                        state(COLLAPSED_OVERLAY_STATE, style({ opacity: '0' })),
-                        // transition((fromState, toState, element, params) => {
-                        //   console.log('sideNavBackdrop v', fromState, toState, element, params)
-                        //   return false
-                        // }, []),
-                        transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
-                    ]),
-                    trigger('sideNavExpand', [
-                        // 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,
-                            bottom: 0,
-                            left: 0,
-                            height: '{{ height }}',
-                            width: '{{ width }}',
-                            transform: '{{ origin }}',
-                            zIndex: '9999',
-                        }), {
-                            params: {
-                                origin: 'translateX(100%)',
-                                height: '100%',
-                                width: 'calc(100vw - 50px)',
-                            }
-                        }),
-                        state(COLLAPSED_OVERLAY_STATE, style({
-                            position: 'absolute',
-                            top: 0,
-                            bottom: 0,
-                            left: 0,
-                            height: '{{ height }}',
-                            width: '{{ width }}',
-                            transform: '{{ origin }}',
-                            'overflow-x': 'hidden',
-                            zIndex: '9999',
-                        }), {
-                            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}`, [
-                        //   // query(':leave', animateChild(), { optional: true }),
-                        //   // query(':enter', animateChild(), { optional: true }),
-                        //   group([
-                        //     query(':leave', animateChild(), { optional: true }),
-                        //     query(':enter', animateChild(), { optional: true }),
-                        //     query('@compactAnim', animateChild(), { optional: true }),
-                        //     animate('5.2s ease-in-out')
-                        //   ])
-                        // ]),
-                    ])
-                ],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None,
-                styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"]
-            },] }
-];
-SideNavComponent.ctorParameters = () => [
-    { type: ViewContainerRef },
-    { type: TheSeamLayoutService },
-    { type: TheSeamSideNavService },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [THESEAM_BASE_LAYOUT_REF,] }] }
-];
-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);
-__decorate([
-    InputNumber(10)
-], SideNavComponent.prototype, "indentSize", void 0);
-
-const EXPANDED_STATE = 'expanded';
-const COLLAPSED_STATE = 'collapsed';
-const FULL_STATE = 'full';
-const COMPACT_STATE = 'compact';
-class SideNavItemComponent {
-    constructor(_sideNav, _parent) {
-        this._sideNav = _sideNav;
-        this._parent = _parent;
-        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.childGroupAnimState$ = this.expanded$
-            .pipe(map(expanded => expanded ? EXPANDED_STATE : COLLAPSED_STATE));
-        this.compactAnimState$ = this.compact$
-            .pipe(map(compact => compact ? COMPACT_STATE : FULL_STATE));
-    }
-    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,
-                    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, container: value.container || 'body' });
-            }
-        }
-        else {
-            this._badgeTooltip = undefined;
-        }
-    }
-    get _isActiveCssClass() { return this.active; }
-    get _attrDataHierLevel() { return this.hierLevel; }
-    ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-    }
-    get hasChildren() {
-        return Array.isArray(this.children) && this.children.length > 0;
-    }
-    toggleChildren() {
-        this.expanded = !this.expanded;
-    }
-    _linkClicked() {
-        // Close nav when link is clicked while in overlay state
-        if (this._sideNav.overlay) {
-            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 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', [
-                        state(EXPANDED_STATE, style({ height: '*' })),
-                        state(COLLAPSED_STATE, style({ height: 0, 'overflow-y': 'hidden', visibility: 'hidden' })),
-                        transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
-                    ]),
-                    trigger('compactAnim', [
-                    // transition('* <=> *', [
-                    //   query(':enter', [
-                    //     style({ opacity: '0' }),
-                    //     animate('5.2s ease-in-out', style({ opacity: '1' }))
-                    //   ], { optional: true }),
-                    //   query(':leave', [
-                    //     style({ opacity: '1' }),
-                    //     animate('5.2s ease-in-out', style({ opacity: '0' }))
-                    //   ], { optional: true })
-                    // ])
-                    // state(FULL_STATE, style({ opacity: '1' })),
-                    // state(COMPACT_STATE, style({ opacity: '0' })),
-                    // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, animate('5.2s ease-in-out')),
-                    // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, [
-                    // transition('* <=> *', [
-                    //   query(':leave', [
-                    //     style({ opacity: '1' }),
-                    //     animate('5.2s ease-in-out', style({ opacity: '0' }))
-                    //   ], { optional: true })
-                    // ]),
-                    ])
-                ],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None,
-                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 = () => [
-    { type: SideNavComponent },
-    { type: SideNavItemComponent, decorators: [{ type: Optional }, { type: SkipSelf }, { type: Host }] }
-];
-SideNavItemComponent.propDecorators = {
-    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 }],
-    _isActiveCssClass: [{ type: HostBinding, args: ['class.seam-side-nav-item--active',] }],
-    _attrDataHierLevel: [{ type: HostBinding, args: ['attr.data-hier-level',] }]
-};
-__decorate([
-    InputBoolean()
-], SideNavItemComponent.prototype, "active", void 0);
-__decorate([
-    InputNumber(0)
-], SideNavItemComponent.prototype, "hierLevel", void 0);
-__decorate([
-    InputNumber(10)
-], SideNavItemComponent.prototype, "indentSize", void 0);
-
-class SideNavToggleComponent {
-    constructor() {
-        this.expanded = false;
-        this.toggleExpand = new EventEmitter();
-    }
-    ngOnInit() { }
-    toggle() {
-        this.toggleExpand.emit();
-    }
-}
-SideNavToggleComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-side-nav-toggle',
-                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;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([
-    InputBoolean()
-], SideNavToggleComponent.prototype, "expanded", void 0);
-
-class TheSeamSideNavModule {
-}
-TheSeamSideNavModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SideNavItemComponent,
-                    SideNavComponent,
-                    SideNavToggleComponent
-                ],
-                imports: [
-                    CommonModule,
-                    RouterModule,
-                    TheSeamIconModule,
-                    A11yModule,
-                    TheSeamScrollbarModule,
-                    TheSeamLayoutModule,
-                    NgbTooltipModule,
-                    PortalModule
-                ],
-                exports: [
-                    SideNavItemComponent,
-                    SideNavComponent,
-                    SideNavToggleComponent
-                ]
-            },] }
-];
-
-class TopBarMenuButtonBase {
-}
-const _TopBarMenuButtonMixinBase = mixinDisabled(TopBarMenuButtonBase);
-class TopBarMenuButtonComponent extends _TopBarMenuButtonMixinBase {
-    constructor() {
-        super(...arguments);
-        this.faAngleDown = faAngleDown;
-        this.compact = false;
-    }
-    get _hasCompactClass() { return this.compact; }
-    get _hasPadding0Class() { return this.compact; }
-    get _hasRoundedClass() { return this.compact; }
-    get _hasBtnLinkClass() { return !this.compact; }
-    ngOnInit() { }
-    ngOnDestroy() { }
-}
-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  <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
-                inputs: ['disabled'],
-                // tslint:disable-next-line:use-host-property-decorator
-                host: {
-                    'attr.type': 'button',
-                    'class': 'btn border text-decoration-none py-0 top-bar-menu-button',
-                    '[attr.aria-disabled]': 'disabled.toString()',
-                    '[attr.disabled]': 'disabled || null',
-                },
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["button[seamTopBarMenuButton]{min-width:200px;border-radius:0;border-top:0!important;border-bottom:0!important;border-right:0!important}button[seamTopBarMenuButton].top-bar-menu-button--compact{min-width:40px;border-left:0!important}\n"]
-            },] }
-];
-TopBarMenuButtonComponent.propDecorators = {
-    detailTpl: [{ type: Input }],
-    compactDetailTpl: [{ type: Input }],
-    compact: [{ type: Input }],
-    profileIcon: [{ type: Input }],
-    _hasCompactClass: [{ type: HostBinding, args: ['class.top-bar-menu-button--compact',] }],
-    _hasPadding0Class: [{ type: HostBinding, args: ['class.p-0',] }],
-    _hasRoundedClass: [{ type: HostBinding, args: ['class.rounded',] }],
-    _hasBtnLinkClass: [{ type: HostBinding, args: ['class.btn-link',] }]
-};
-__decorate([
-    InputBoolean()
-], TopBarMenuButtonComponent.prototype, "compact", void 0);
-
-class TopBarTitleComponent {
-    constructor() { }
-    ngOnInit() { }
-}
-TopBarTitleComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-top-bar-title',
-                template: "<h2 class=\"mb-0\" [ngStyle]=\"{ 'font-size.px': 32 }\" [ngStyle.lt-md]=\"{ 'font-size.px': 26 }\" [ngStyle.lt-sm]=\"{ 'font-size.px': 20, 'line-height': 1 }\">\n  {{ titleText }}\n  <br fxHide.gt-sm>\n  <small *ngIf=\"subTitleText\" class=\"text-muted\">{{ subTitleText }}</small>\n</h2>\n",
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["seam-top-bar-title{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}\n"]
-            },] }
-];
-TopBarTitleComponent.ctorParameters = () => [];
-TopBarTitleComponent.propDecorators = {
-    titleText: [{ type: Input }],
-    subTitleText: [{ type: Input }]
-};
-
-class TopBarItemDirective {
-    constructor(template) {
-        this.template = template;
-        this.position = 'right';
-    }
-    set seamTopBarItem(value) {
-        this.position = value;
-    }
-}
-TopBarItemDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamTopBarItem]'
-            },] }
-];
-TopBarItemDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-TopBarItemDirective.propDecorators = {
-    seamTopBarItem: [{ type: Input }]
-};
-
-class TopBarMenuBtnDetailDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-TopBarMenuBtnDetailDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamTopBarMenuBtnDetail]'
-            },] }
-];
-TopBarMenuBtnDetailDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-
-class TopBarMenuDirective {
-    constructor(menu) {
-        this.menu = menu;
-    }
-}
-TopBarMenuDirective.decorators = [
-    { type: Directive, args: [{
-                selector: 'seam-menu[seamTopBarMenu]'
-            },] }
-];
-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.
- *
- * The top bar is fairly opinionated, so most parts are not intended to be
- * customized unless there is an input.
- *
- * > If you have to make a change and apply it externally with a css class or js
- * > make sure there is an issue to get the feature changed, so we don't have
- * > different modifications across our apps. Also, this will help make sure
- * > your change should have even been done.
- */
-class TheSeamTopBarComponent {
-    constructor(_layout) {
-        this._layout = _layout;
-        /** @ignore */
-        this._ngUnsubscribe = new Subject();
-        /** @ignore */
-        this.faBars = faBars;
-        /** Link target used when `logoHref` is specified. Defaults to `"_blank"` */
-        this.logoHrefTarget = '_blank';
-        /** Route to link to when `logo` is clicked. Defaults to `/`. */
-        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 */
-    ngOnInit() { }
-    /** @ignore */
-    ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-    }
-    /** @ignore */
-    ngAfterContentInit() {
-        if (this._topBarItems) {
-            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: "<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--left{flex-grow:1}.top-bar-items{display:flex;align-items:center}\n"]
-            },] }
-];
-TheSeamTopBarComponent.ctorParameters = () => [
-    { type: TheSeamLayoutService }
-];
-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 }],
-    logoHrefTarget: [{ type: Input }],
-    logoRoute: [{ type: Input }],
-    hasTitle: [{ type: Input }],
-    titleText: [{ type: Input }],
-    subTitleText: [{ type: Input }],
-    hasTopBarMenuButton: [{ type: Input }],
-    profileIcon: [{ type: Input }],
-    toggleIcon: [{ type: Input }],
-    navToggleAlign: [{ type: Input }]
-};
-__decorate([
-    InputBoolean()
-], TheSeamTopBarComponent.prototype, "hasTitle", void 0);
-__decorate([
-    InputBoolean()
-], TheSeamTopBarComponent.prototype, "hasTopBarMenuButton", void 0);
-
-class TheSeamTopBarModule {
-}
-TheSeamTopBarModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    TheSeamTopBarComponent,
-                    TopBarTitleComponent,
-                    TopBarMenuButtonComponent,
-                    TopBarMenuDirective,
-                    TopBarItemDirective,
-                    TopBarMenuBtnDetailDirective,
-                    TopBarCompactMenuBtnDetailDirective,
-                    TopBarNavToggleBtnDetailDirective
-                ],
-                imports: [
-                    CommonModule,
-                    TheSeamLayoutModule,
-                    TheSeamButtonsModule,
-                    TheSeamIconModule,
-                    TheSeamMenuModule,
-                    TheSeamBaseLayoutModule,
-                    RouterModule
-                ],
-                exports: [
-                    TheSeamTopBarComponent,
-                    TopBarMenuButtonComponent,
-                    TopBarMenuDirective,
-                    TheSeamMenuModule,
-                    TopBarItemDirective,
-                    TopBarMenuBtnDetailDirective,
-                    TopBarCompactMenuBtnDetailDirective,
-                    TopBarNavToggleBtnDetailDirective
-                ]
-            },] }
-];
-
-const fader = trigger('routeAnimations', [
-    transition('* <=> *', [
-        // Set a default  style for enter and leave
-        query(':enter, :leave', [
-            style({
-                position: 'absolute',
-                left: 0,
-                width: '100%',
-                opacity: 0,
-                transform: 'scale(0) translateY(100%)',
-            }),
-        ], { optional: true }),
-        // Animate the new page in
-        query(':enter', [
-            animate('600ms ease', style({ opacity: 1, transform: 'scale(1) translateY(0)' })),
-        ], { optional: true })
-    ]),
-]);
-// function slideTo(direction) {
-//   return [
-//     query(':enter, :leave', [
-//       style({
-//         position: 'absolute',
-//         top: 0,
-//         [direction]: 0,
-//         width: '100%'
-//       })
-//     ], { optional: true }),
-//     query(':enter', [
-//       style({ [direction]: '-100%'})
-//     ], { optional: true }),
-//     group([
-//       query(':leave', [
-//         animate('1000ms ease', style({ [direction]: '100%'}))
-//       ], { optional: true }),
-//       query(':enter', [
-//         animate('1000ms ease', style({ [direction]: '0%'}))
-//       ], { optional: true })
-//     ]),
-//     // Normalize the page style... Might not be necessary
-//     // Required only if you have child animations on the page
-//     query(':leave', animateChild(), { optional: true }),
-//     query(':enter', animateChild(), { optional: true }),
-//   ]
-// }
-// TODO: Refactor the slider animation, because AOT or ng-packagr, I haven't
-// looked into what exactly is preventing it, doesn't allow the function call.
-// export const slider =
-//   trigger('routeAnimations', [
-//     transition('* => isLeft', slideTo('left') ),
-//     transition('* => isRight', slideTo('right') ),
-//     transition('isRight => *', slideTo('left') ),
-//     transition('isLeft => *', slideTo('right') )
-//   ])
-// export const contentLeave =
-//   trigger('contentLeave', [
-//     transition(':leave', [
-//     ])
-//   ])
-const slider = trigger('routeAnimations', [
-    transition('* => isLeft', [
-        query('.router-container :enter, .router-container :leave', [
-            style({
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%'
-            })
-        ], { optional: true }),
-        query('.router-container :enter', [
-            style({ left: '-100%' })
-        ], { optional: true }),
-        query('.hierarchy-router-outlet--content', [
-            style({ left: '0%', position: 'absolute' })
-        ], { optional: true }),
-        group([
-            query('.router-container :leave', [
-                animate('1000ms ease', style({ left: '100%' }))
-            ], { optional: true }),
-            query('.router-container :enter', [
-                animate('1000ms ease', style({ left: '0%' }))
-            ], { optional: true }),
-            query('.hierarchy-router-outlet--content', [
-                animate('1000ms ease', style({ left: '-100%' }))
-            ], { optional: true }),
-        ]),
-        // Normalize the page style... Might not be necessary
-        // Required only if you have child animations on the page
-        query('.router-container :leave', animateChild(), { optional: true }),
-        query('.router-container :enter', animateChild(), { optional: true }),
-    ]),
-    transition('* => isRight', [
-        query('.router-container :enter, .router-container :leave', [
-            style({
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                width: '100%'
-            })
-        ], { optional: true }),
-        query('.router-container :enter', [
-            style({ right: '-100%' })
-        ], { optional: true }),
-        query('.hierarchy-router-outlet--content', [
-            style({ left: '0%', position: 'absolute' })
-        ], { optional: true }),
-        group([
-            query('.router-container :leave', [
-                animate('1000ms ease', style({ right: '100%' }))
-            ], { optional: true }),
-            query('.router-container :enter', [
-                animate('1000ms ease', style({ right: '0%' }))
-            ], { optional: true }),
-            query('.hierarchy-router-outlet--content', [
-                animate('1000ms ease', style({ left: '-100%' }))
-            ], { optional: true }),
-        ]),
-        // Normalize the page style... Might not be necessary
-        // Required only if you have child animations on the page
-        query('.router-container :leave', animateChild(), { optional: true }),
-        query('.router-container :enter', animateChild(), { optional: true }),
-    ]),
-    transition('isRight => *', [
-        query('.router-container :enter, .router-container :leave', [
-            style({
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%'
-            })
-        ], { optional: true }),
-        query('.router-container :enter', [
-            style({ left: '-100%' })
-        ], { optional: true }),
-        query('.hierarchy-router-outlet--content', [
-            style({ left: '0%', position: 'absolute' })
-        ], { optional: true }),
-        group([
-            query('.router-container :leave', [
-                animate('1000ms ease', style({ left: '100%' }))
-            ], { optional: true }),
-            query('.router-container :enter', [
-                animate('1000ms ease', style({ left: '0%' }))
-            ], { optional: true }),
-            query('.hierarchy-router-outlet--content', [
-                animate('1000ms ease', style({ left: '-100%' }))
-            ], { optional: true }),
-        ]),
-        // Normalize the page style... Might not be necessary
-        // Required only if you have child animations on the page
-        query('.router-container :leave', animateChild(), { optional: true }),
-        query('.router-container :enter', animateChild(), { optional: true }),
-    ]),
-    transition('isLeft => *', [
-        query('.router-container :enter, .router-container :leave', [
-            style({
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                width: '100%'
-            })
-        ], { optional: true }),
-        query('.router-container :enter', [
-            style({ right: '-100%' })
-        ], { optional: true }),
-        group([
-            query('.router-container :leave', [
-                animate('1000ms ease', style({ right: '100%' }))
-            ], { optional: true }),
-            query('.router-container :enter', [
-                animate('1000ms ease', style({ right: '0%' }))
-            ], { optional: true })
-        ]),
-        // Normalize the page style... Might not be necessary
-        // Required only if you have child animations on the page
-        query('.router-container :leave', animateChild(), { optional: true }),
-        query('.router-container :enter', animateChild(), { optional: true }),
-    ])
-]);
-const transformer = trigger('routeAnimations', [
-    transition('* => isLeft', transformTo({ x: -100, y: -100, rotate: -720 })),
-    transition('* => isRight', transformTo({ x: 100, y: -100, rotate: 90 })),
-    transition('isRight => *', transformTo({ x: -100, y: -100, rotate: 360 })),
-    transition('isLeft => *', transformTo({ x: 100, y: -100, rotate: -360 }))
-]);
-function transformTo({ x = 100, y = 0, rotate = 0 }) {
-    const optional = { optional: true };
-    return [
-        query(':enter, :leave', [
-            style({
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%'
-            })
-        ], optional),
-        query(':enter', [
-            style({ transform: `translate(${x}%, ${y}%) rotate(${rotate}deg)` })
-        ], { optional: true }),
-        group([
-            query(':leave', [
-                animate('600ms ease-out', style({ transform: `translate(${x}%, ${y}%) rotate(${rotate}deg)` }))
-            ], optional),
-            query(':enter', [
-                animate('600ms ease-out', style({ transform: `translate(0, 0) rotate(0)` }))
-            ], { optional: true })
-        ]),
-    ];
-}
-const stepper = trigger('routeAnimations', [
-    transition('* <=> *', [
-        query(':enter, :leave', [
-            style({
-                position: 'absolute',
-                left: 0,
-                width: '100%',
-            }),
-        ], { optional: true }),
-        group([
-            query(':enter', [
-                animate('2000ms ease', keyframes([
-                    style({ transform: 'scale(0) translateX(100%)', offset: 0 }),
-                    style({ transform: 'scale(0.5) translateX(25%)', offset: 0.3 }),
-                    style({ transform: 'scale(1) translateX(0%)', offset: 1 }),
-                ])),
-            ], { optional: true }),
-            query(':leave', [
-                animate('2000ms ease', keyframes([
-                    style({ transform: 'scale(1)', offset: 0 }),
-                    style({ transform: 'scale(0.5) translateX(-25%) rotate(0)', offset: 0.35 }),
-                    style({ opacity: 0, transform: 'translateX(-50%) rotate(-180deg) scale(6)', offset: 1 }),
-                ])),
-            ], { optional: true })
-        ]),
-    ])
-]);
-const sideToSide = trigger('routeAnimations', [
-    transition('* => *', [
-        style({
-            position: 'fixed',
-            width: '100%',
-            transform: 'translateX(-100%)'
-        }),
-        animate('1000ms ease', style({ transform: 'translateX(0%)' }))
-    ]),
-    transition(':leave', [
-        style({
-            position: 'fixed',
-            width: '100%',
-            transform: 'translateX(0%)'
-        }),
-        animate('1000ms ease', style({ transform: 'translateX(-100%)' }))
-    ])
-]);
-
-function routeChanges(router) {
-    return router.events.pipe(filter(event => event instanceof NavigationStart || event instanceof NavigationEnd), distinctUntilChanged((x, y) => x.id === y.id), map(event => ({ url: event.url })));
-}
-//
-// TODO: Animation improvement: Try adding a full component animation that
-// queries the <ng-content> and <router-outlet> blocks. When the outlet
-// activates, set the animation state to a transition that moves both blocks
-// together.
-//
-let _uid = 0;
-class HierarchyRouterOutletComponent {
-    constructor(_route, _router) {
-        this._route = _route;
-        this._router = _router;
-        this._uid = _uid++;
-        this._ngUnsubscribe = new Subject();
-        this.animState = 'isRight';
-        // animState = ''
-        this.outletActive = false;
-        this.ngContentVisible = true;
-        this._router.events.pipe(filter(event => event instanceof NavigationEnd), 
-        // tap(v => console.log(`_hasChildren()[${this._uid}]`, this._hasChildren())),
-        takeUntil(this._ngUnsubscribe))
-            .subscribe();
-        // routeChanges(this._router)
-        //   .pipe(
-        //     untilDestroyed(this),
-        //     tap(() => {
-        //       // if (this._hasChildren()) {
-        //       //   this.animState = 'isLeft'
-        //       // } else {
-        //       //   this.animState = 'isRight'
-        //       // }
-        //     })
-        //   )
-        //   .subscribe(v => console.log(`routeChanges[${this._uid}]`, v))
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-    }
-    _hasChildren() {
-        const count = this._route.pathFromRoot.length - 1;
-        let countFull = 0;
-        if (this._router.parseUrl(this._router.url).root.children.primary) {
-            countFull = this._router.parseUrl(this._router.url).root.children.primary.segments.length;
-        }
-        // console.log(`_hasChildren[${this._uid}]`, { count, countFull })
-        return countFull > count;
-    }
-    prepareRoute(outlet) {
-        // console.log(`outlet[${this._uid}]`, outlet, this.animState, this._hasChildren(), this.outletActive)
-        if (outlet.isActivated) {
-            // console.log(outlet.isActivated)
-            // console.log(outlet.component)
-            console.log(this.animState);
-            return this.animState;
-        }
-        else {
-            return undefined;
-        }
-        // console.log(`prepareRoute[${this._uid}]`, this.animState, this._hasChildren())
-        // console.log('activatedRouteData', outlet && outlet.activatedRouteData)
-        // if (outlet && outlet.isActivated) {
-        //   console.log('activatedRoute', outlet.activatedRoute && outlet.activatedRoute.snapshot.url)
-        // }
-        // return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']
-        // console.log('')
-        // return this.animState
-    }
-    outletActivate(event) {
-        // console.log(`outletActivate[${this._uid}]`, event)
-        this.outletActive = true;
-    }
-    outletDeactivate(event) {
-        // console.log(`outletDeactivate[${this._uid}]`, event)
-        this.outletActive = false;
-    }
-    routeAnimationsStart(event) {
-        // console.log('routeAnimationsStart', event)
-        this.ngContentVisible = true;
-    }
-    routeAnimationsDone(event) {
-        // console.log('routeAnimationsDone', event)
-        this.ngContentVisible = !this.outletActive;
-    }
-}
-HierarchyRouterOutletComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-hierarchy-router-outlet',
-                template: "<div class=\"h-100\"\n  [@routeAnimations]=\"prepareRoute(outlet)\"\n  (@routeAnimations.start)=\"routeAnimationsStart($event)\"\n  (@routeAnimations.done)=\"routeAnimationsDone($event)\">\n  <div class=\"hierarchy-router-outlet--content h-100\" *ngIf=\"ngContentVisible\">\n    <!-- {{ animState }} -->\n    <div class=\"border border-info h-100\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div class=\"router-container\"\n    [class.h-100]=\"!ngContentVisible\"\n    >\n  <!-- <div [@routeAnimations]=\"animState\"> -->\n  <!-- <div class=\"hierarchy-router-outlet--route-content\"> -->\n    <router-outlet #outlet=\"outlet\"\n      (activate)=\"outletActivate($event)\"\n      (deactivate)=\"outletDeactivate($event)\">\n    </router-outlet>\n  </div>\n</div>\n",
-                animations: [
-                    // fader,
-                    slider,
-                    // transformer,
-                    // stepper,
-                    // sideToSide
-                    // contentLeave
-                ],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block;height:100%}:host ::ng-deep router-outlet+*{background-color:#fff;height:100%}\n"]
-            },] }
-];
-HierarchyRouterOutletComponent.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: Router }
-];
-
-class HierarchyLevelResolver {
-    constructor() { }
-    resolve(route, state) {
-        // console.log('[HierarchyLevelResolver]', route)
-        // console.log('[HierarchyLevelResolver]', state)
-        return this._getMaxHierLevel(route);
-    }
-    _getMaxHierLevel(route) {
-        let curr = route;
-        while (curr.parent) {
-            curr = curr.parent;
-            if (curr.data['hierLevel']) {
-                return curr.data['hierLevel'] + 1;
-            }
-        }
-        return 0;
-    }
-}
-HierarchyLevelResolver.ɵprov = i0.ɵɵdefineInjectable({ factory: function HierarchyLevelResolver_Factory() { return new HierarchyLevelResolver(); }, token: HierarchyLevelResolver, providedIn: "root" });
-HierarchyLevelResolver.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
-HierarchyLevelResolver.ctorParameters = () => [];
-
-class TheSeamDynamicRouterModule {
-}
-TheSeamDynamicRouterModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    HierarchyRouterOutletComponent
-                ],
-                imports: [
-                    CommonModule,
-                    RouterModule
-                ],
-                exports: [
-                    HierarchyRouterOutletComponent
-                ]
-            },] }
-];
-
-class TheSeamSchemaFormCheckboxComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
-        this.controlDisabled = false;
-        this.boundControl = false;
-        this.trueValue = true;
-        this.falseValue = false;
-    }
-    ngOnInit() {
-        this.options = this.layoutNode.options || {};
-        this.jsf.initializeControl(this);
-        if (this.controlValue === null || this.controlValue === undefined) {
-            this.controlValue = this.options.title;
-        }
-    }
-    updateValue(event) {
-        event.preventDefault();
-        this.jsf.updateValue(this, event.target.checked ? this.trueValue : this.falseValue);
-    }
-    get isChecked() {
-        return this.jsf.getFormControlValue(this) === this.trueValue;
-    }
-}
-TheSeamSchemaFormCheckboxComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-schema-form-checkbox',
-                template: "<div class=\"mb-3\">\n  <seam-form-field *ngIf=\"boundControl\">\n    <seam-checkbox seamInput\n      [formControl]=\"$any(formControl)\"\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n\n  <seam-form-field *ngIf=\"!boundControl\">\n    <seam-checkbox seamInput\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\"\n      [value]=\"controlValue\"\n      (change)=\"updateValue($event)\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n</div>\n",
-                styles: [""]
-            },] }
-];
-TheSeamSchemaFormCheckboxComponent.ctorParameters = () => [
-    { type: JsonSchemaFormService }
-];
-TheSeamSchemaFormCheckboxComponent.propDecorators = {
-    layoutNode: [{ type: Input }],
-    layoutIndex: [{ type: Input }],
-    dataIndex: [{ type: Input }]
-};
-
-class TheSeamSchemaFormInputComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
-        this.controlDisabled = false;
-        this.boundControl = false;
-        this.autoCompleteList = [];
-    }
-    ngOnInit() {
-        this.options = this.layoutNode.options || {};
-        this.jsf.initializeControl(this);
-    }
-    updateValue(event) {
-        this.jsf.updateValue(this, event.target.value);
-    }
-}
-TheSeamSchemaFormInputComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-schema-form-input',
-                template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type\">\n  <datalist *ngIf=\"options?.typeahead?.source\"\n    [id]=\"'control' + layoutNode?._id + 'Autocomplete'\">\n    <option *ngFor=\"let word of options?.typeahead?.source\" [value]=\"word\">\n  </datalist>\n</seam-form-field>\n\n<seam-form-field *ngIf=\"!boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n    [value]=\"controlValue\"\n    (input)=\"updateValue($event)\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type\"\n    [disabled]=\"controlDisabled\">\n  <datalist *ngIf=\"options?.typeahead?.source\"\n    [id]=\"'control' + layoutNode?._id + 'Autocomplete'\">\n    <option *ngFor=\"let word of options?.typeahead?.source\" [value]=\"word\">\n  </datalist>\n</seam-form-field>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block}\n"]
-            },] }
-];
-TheSeamSchemaFormInputComponent.ctorParameters = () => [
-    { type: JsonSchemaFormService }
-];
-TheSeamSchemaFormInputComponent.propDecorators = {
-    layoutNode: [{ type: Input }],
-    layoutIndex: [{ type: Input }],
-    dataIndex: [{ type: Input }]
-};
-
-class TheSeamSchemaFormNumberComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
-        this.controlDisabled = false;
-        this.boundControl = false;
-        this.allowNegative = true;
-        this.allowDecimal = true;
-        this.allowExponents = false;
-        this.lastValidNumber = '';
-    }
-    ngOnInit() {
-        this.options = this.layoutNode.options || {};
-        this.jsf.initializeControl(this);
-        if (this.layoutNode.dataType === 'integer') {
-            this.allowDecimal = false;
-        }
-    }
-    updateValue(event) {
-        this.jsf.updateValue(this, event.target.value);
-    }
-}
-TheSeamSchemaFormNumberComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-schema-form-number',
-                template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n    [attr.max]=\"options?.maximum\"\n    [attr.min]=\"options?.minimum\"\n    [attr.step]=\"options?.multipleOf || options?.step || 'any'\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type === 'range' ? 'range' : 'number'\">\n  <span *ngIf=\"layoutNode?.type === 'range'\" [innerHTML]=\"controlValue\"></span>\n</seam-form-field>\n\n<seam-form-field *ngIf=\"!boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n    [attr.max]=\"options?.maximum\"\n    [attr.min]=\"options?.minimum\"\n    [attr.step]=\"options?.multipleOf || options?.step || 'any'\"\n    [value]=\"controlValue\"\n    (input)=\"updateValue($event)\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type === 'range' ? 'range' : 'number'\"\n    [disabled]=\"controlDisabled\">\n  <span *ngIf=\"layoutNode?.type === 'range'\" [innerHTML]=\"controlValue\"></span>\n</seam-form-field>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block}\n"]
-            },] }
-];
-TheSeamSchemaFormNumberComponent.ctorParameters = () => [
-    { type: JsonSchemaFormService }
-];
-TheSeamSchemaFormNumberComponent.propDecorators = {
-    layoutNode: [{ type: Input }],
-    layoutIndex: [{ type: Input }],
-    dataIndex: [{ type: Input }]
-};
-
-class TheSeamSchemaFormSelectComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
-        this.controlDisabled = false;
-        this.boundControl = false;
-        this.selectList = [];
-        this.isArray = isArray;
-    }
-    ngOnInit() {
-        this.options = this.layoutNode.options || {};
-        this.selectList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, !!this.options.required, !!this.options.flatList);
-        this.jsf.initializeControl(this);
-    }
-    updateValue(event) {
-        this.jsf.updateValue(this, event.value);
-    }
-}
-TheSeamSchemaFormSelectComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-schema-form-select',
-                template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <ng-select seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [required]=\"options?.required\"\n    [items]=\"selectList\"\n    bindLabel=\"name\"\n    bindValue=\"value\"\n    [clearable]=\"false\"\n    appendTo=\"body\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? true : false\">\n    <ng-template ng-label-tmp let-item=\"item\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n  </ng-select>\n</seam-form-field>\n\n<seam-form-field *ngIf=\"!boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <ng-select seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [required]=\"options?.required\"\n    [items]=\"selectList\"\n    bindLabel=\"name\"\n    bindValue=\"value\"\n    [clearable]=\"false\"\n    (change)=\"updateValue($event)\"\n    appendTo=\"body\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? true : false\"\n    [disabled]=\"controlDisabled\">\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n  </ng-select>\n</seam-form-field>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block}\n"]
-            },] }
-];
-TheSeamSchemaFormSelectComponent.ctorParameters = () => [
-    { type: JsonSchemaFormService }
-];
-TheSeamSchemaFormSelectComponent.propDecorators = {
-    layoutNode: [{ type: Input }],
-    layoutIndex: [{ type: Input }],
-    dataIndex: [{ type: Input }]
-};
-
-// NOTE: This component is a little hacky, because I am basically creating a
-// data widget that acts like a data and 'submit' widget at the same time.
-//
-// TODO: Try and think of a nicer way to implement this, but still make sense
-// from a schema definition. The library may need to me forked to actually
-// support this in the way I expect, but maybe there is another way.
-class TheSeamSchemaFormSubmitSplitComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
-        /** @ignore */
-        this._ngUnsubscribe = new Subject();
-        this.controlDisabled = false;
-        this.boundControl = false;
-        this._buttonLabel = '';
-        this._dropdownDisabled = false;
-        this._selectList = [];
-    }
-    /** @ignore */
-    ngOnInit() {
-        this.options = this.layoutNode.options || {};
-        this.jsf.initializeControl(this);
-        // NOTE: This is commented out, because there is a bug with submit widgets
-        // manually defined in layout. All nodes initialized from the provided
-        // layout have their options populated from the defaults and 'disabled' is
-        // on of the default properties, so the 'disableInvalidSubmit' condition
-        // never gets reached.
-        //
-        // My initial idea for fixing would be to check if the disabled property
-        // exists and is a boolean, or possibly anything defined that can coerce
-        // into a boolean. I can't think of a reason disabled should be anything
-        // else, so that may be an acceptable fix, but I don't want to enable that
-        // yet.
-        //
-        // if (hasOwn(this.options, 'disabled')) {
-        //   console.log('[TheSeamSchemaFormSubmitSplitComponent] hasDisabled', this.options.disabled)
-        //   this.controlDisabled = this.options.disabled
-        // } else
-        if (this.jsf.formOptions.disableInvalidSubmit) {
-            this.controlDisabled = !this.jsf.isValid;
-            this.jsf.isValidChanges.subscribe(isValid => this.controlDisabled = !isValid);
-        }
-        if (this.controlValue === null || this.controlValue === undefined) {
-            this.controlValue = this.options.title;
-        }
-        if (hasOwn(this.options, 'title')) {
-            this._buttonLabel = this.options.title;
-        }
-        this._initDropdown();
-        // console.log('this', this)
-    }
-    /** @ignore */
-    ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-    }
-    updateValue(event) {
-        if (typeof this.options.onClick === 'function') {
-            this.options.onClick(event);
-        }
-        else {
-            this.jsf.updateValue(this, event.target.value);
-        }
-    }
-    _initDropdown() {
-        var _a;
-        if (!hasOwn(this.layoutNode, 'items') || !(this.layoutNode.items || []).length) {
-            return;
-        }
-        if (isDevMode()) {
-            if (this.layoutNode.items.length > 1) {
-                console.warn(`TheSeamSchemaFormSubmitSplitComponent only supports one item.` +
-                    ` items after index 0 will be ignored.`);
-            }
-        }
-        const idx = 0;
-        const item = this.layoutNode.items[idx];
-        this._dropdownObj = {
-            layoutNode: item,
-            layoutIndex: (this.layoutIndex || []).concat(idx),
-            dataIndex: ((_a = this.layoutNode) === null || _a === void 0 ? void 0 : _a.dataType) === 'array' ? (this.dataIndex || []).concat(idx) : this.dataIndex,
-            options: item.options || {}
-        };
-        this.jsf.initializeControl(this._dropdownObj);
-        const items = buildTitleMap(this._dropdownObj.options.titleMap || this._dropdownObj.options.enumNames, this._dropdownObj.options.enum, !!this._dropdownObj.options.required, !!this._dropdownObj.options.flatList);
-        this._selectList = items;
-        // TODO: Should this be checking if the control is bound?
-        const dropdownControl = this._getDropdownControl();
-        if (!dropdownControl) {
-            return;
-        }
-        observeControlValue(dropdownControl).pipe(takeUntil(this._ngUnsubscribe)).subscribe(value => {
-            this._setSelectListCheckedProp(value);
-            this._selectedItem = this._getSelectedItem();
-        });
-        observeControlStatus(dropdownControl).pipe(takeUntil(this._ngUnsubscribe)).subscribe(value => {
-            this._dropdownDisabled = dropdownControl.disabled;
-        });
-    }
-    _getDropdownControl() {
-        return this._dropdownObj.formControl;
-    }
-    _setSelectListCheckedProp(value) {
-        const items = this._selectList;
-        for (const item of items) {
-            if (item.value === value) {
-                item.checked = true;
-            }
-            else if (item.checked) {
-                item.checked = false;
-            }
-        }
-        this._selectList = [...items];
-    }
-    _getSelectedItem() {
-        return (this._selectList || []).find(x => x.checked === true);
-    }
-    _setDropdownValue(value) {
-        const formControl = this._getDropdownControl();
-        formControl === null || formControl === void 0 ? void 0 : formControl.setValue(value);
-    }
-}
-TheSeamSchemaFormSubmitSplitComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-schema-form-submit-split',
-                template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button seamButton theme=\"primary\" type=\"submit\"\n      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n      [attr.required]=\"options?.required\"\n      [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n      [disabled]=\"controlDisabled\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [value]=\"controlValue\"\n      (click)=\"updateValue($event)\">\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\">\n        [{{ _selectedItem.name }}]\n      </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\" seamButton theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\">\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\">\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n",
-                styles: [":host{display:block}\n"]
-            },] }
-];
-TheSeamSchemaFormSubmitSplitComponent.ctorParameters = () => [
-    { type: JsonSchemaFormService }
-];
-TheSeamSchemaFormSubmitSplitComponent.propDecorators = {
-    layoutNode: [{ type: Input }],
-    layoutIndex: [{ type: Input }],
-    dataIndex: [{ type: Input }]
-};
-
-class TheSeamSchemaFormFrameworkComponent {
-}
-TheSeamSchemaFormFrameworkComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-schema-form-framework',
-                template: "<select-widget-widget\n  [dataIndex]=\"$any(dataIndex)\"\n  [layoutIndex]=\"$any(layoutIndex)\"\n  [layoutNode]=\"layoutNode\">\n</select-widget-widget>\n",
-                styles: [""]
-            },] }
-];
-TheSeamSchemaFormFrameworkComponent.propDecorators = {
-    layoutNode: [{ type: Input }],
-    layoutIndex: [{ type: Input }],
-    dataIndex: [{ type: Input }]
-};
-
-class TheSeamFramework extends Framework {
-    constructor() {
-        super(...arguments);
-        this.name = 'seam-framework';
-        this.framework = TheSeamSchemaFormFrameworkComponent;
-        this.widgets = {
-            'checkbox': TheSeamSchemaFormCheckboxComponent,
-            // 'submit': TheSeamSchemaFormSubmitComponent,
-            'submit': TheSeamSchemaFormSubmitSplitComponent,
-            'text': TheSeamSchemaFormInputComponent,
-            'number': TheSeamSchemaFormNumberComponent,
-            'select': TheSeamSchemaFormSelectComponent
-        };
-    }
-}
-TheSeamFramework.decorators = [
-    { type: Injectable }
-];
-
-class TheSeamSchemaFormSubmitComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
-        this.controlDisabled = false;
-        this.boundControl = false;
-    }
-    ngOnInit() {
-        this.options = this.layoutNode.options || {};
-        this.jsf.initializeControl(this);
-        if (hasOwn(this.options, 'disabled')) {
-            this.controlDisabled = this.options.disabled;
-        }
-        else if (this.jsf.formOptions.disableInvalidSubmit) {
-            this.controlDisabled = !this.jsf.isValid;
-            this.jsf.isValidChanges.subscribe(isValid => this.controlDisabled = !isValid);
-        }
-        if (this.controlValue === null || this.controlValue === undefined) {
-            this.controlValue = this.options.title;
-        }
-    }
-    updateValue(event) {
-        if (typeof this.options.onClick === 'function') {
-            this.options.onClick(event);
-        }
-        else {
-            this.jsf.updateValue(this, event.target.value);
-        }
-    }
-}
-TheSeamSchemaFormSubmitComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-schema-form-submit',
-                template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <input\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n    [attr.required]=\"options?.required\"\n    [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n    [disabled]=\"controlDisabled\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [type]=\"layoutNode?.type\"\n    [value]=\"controlValue\"\n    (click)=\"updateValue($event)\">\n</div>\n"
-            },] }
-];
-TheSeamSchemaFormSubmitComponent.ctorParameters = () => [
-    { type: JsonSchemaFormService }
-];
-TheSeamSchemaFormSubmitComponent.propDecorators = {
-    layoutNode: [{ type: Input }],
-    layoutIndex: [{ type: Input }],
-    dataIndex: [{ type: Input }]
-};
-
-const controls = [
-    TheSeamSchemaFormCheckboxComponent,
-    TheSeamSchemaFormSubmitComponent,
-    TheSeamSchemaFormSelectComponent,
-    TheSeamSchemaFormInputComponent,
-    TheSeamSchemaFormNumberComponent,
-    TheSeamSchemaFormSubmitSplitComponent
-];
-class TheSeamSchemaFormControlsModule {
-}
-TheSeamSchemaFormControlsModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    ...controls
-                ],
-                imports: [
-                    CommonModule,
-                    ReactiveFormsModule,
-                    JsonSchemaFormModule,
-                    TheSeamFormFieldModule,
-                    TheSeamCheckboxModule,
-                    TheSeamMenuModule,
-                    TheSeamButtonsModule,
-                    NgSelectModule
-                ],
-                exports: [
-                    ...controls,
-                    JsonSchemaFormModule
-                ],
-                entryComponents: [
-                    ...controls
-                ]
-            },] }
-];
-
-class TheSeamSchemaFormModule {
-}
-TheSeamSchemaFormModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    TheSeamSchemaFormFrameworkComponent
-                ],
-                imports: [
-                    CommonModule,
-                    JsonSchemaFormModule,
-                    TheSeamSchemaFormControlsModule,
-                    WidgetLibraryModule,
-                ],
-                providers: [
-                    JsonSchemaFormService,
-                    FrameworkLibraryService,
-                    WidgetLibraryService,
-                    { provide: Framework, useClass: TheSeamFramework, multi: true }
-                ],
-                exports: [
-                    TheSeamSchemaFormFrameworkComponent,
-                    JsonSchemaFormModule
-                ],
-                entryComponents: [
-                    TheSeamSchemaFormFrameworkComponent
-                ]
-            },] }
-];
-
-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 isHorizontalNavItemFocused(item) {
-    var _a, _b;
-    return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.focused) !== 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,
-        focused: false
-    };
-    // TODO: See if there is a nice way to fix the typing for this.
-    return item;
-}
-function areSameHorizontalNavItem(item1, item2) {
-    if (isNullOrUndefined(item1) || isNullOrUndefined(item2)) {
-        return false;
-    }
-    if (item1.itemType !== item2.itemType) {
-        return false;
-    }
-    if (isHorizontalNavItemType(item1, 'title') && isHorizontalNavItemType(item2, 'title')) {
-        return item1.label === item2.label;
-    }
-    else if (isHorizontalNavItemType(item1, 'divider') && isHorizontalNavItemType(item2, 'divider')) {
-        return item1.label === item2.label;
-    }
-    else if (isHorizontalNavItemType(item1, 'basic') && isHorizontalNavItemType(item2, 'basic')) {
-        return item1.label === item2.label;
-    }
-    else if (isHorizontalNavItemType(item1, 'link') && isHorizontalNavItemType(item2, 'link')) {
-        return item1.label === item2.label && item1.link === item2.link;
-    }
-    else if (isHorizontalNavItemType(item1, 'button') && isHorizontalNavItemType(item2, 'button')) {
-        return item1.onClick === item2.onClick;
-    }
-    return false;
-}
-
-class TheSeamNavService {
-    constructor(_router) {
-        this._router = _router;
-        this._updatingCount = new BehaviorSubject(0);
-        this.itemChanged = new Subject();
-        this.loading$ = this._updatingCount.pipe(map(count => count > 0), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
-    }
-    createItemsObservable(items) {
-        return defer(() => {
-            this.updateItemsStates(items);
-            this.updateRouterFocusedItem(items);
-            return new Observable((subscriber) => {
-                const stateChangeSub = this.itemChanged.pipe(switchMap(change => {
-                    if (change.prop === 'focused' && change.newValue) {
-                        this.updateFocusedItem(items, change.item);
-                    }
-                    return this.loading$.pipe(filter(loading => !loading));
-                })).subscribe(() => {
-                    subscriber.next(items);
-                });
-                try {
-                    this.updateItemsStates(items);
-                }
-                catch (err) {
-                    subscriber.error(err);
-                }
-                const routeChangeSub = this._router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
-                    try {
-                        this.updateItemsStates(items);
-                        this.updateRouterFocusedItem(items);
-                    }
-                    catch (err) {
-                        subscriber.error(err);
-                    }
-                });
-                return () => {
-                    stateChangeSub.unsubscribe();
-                    routeChangeSub.unsubscribe();
-                };
-            }).pipe(startWith(items));
-        });
-    }
-    _incUpdatingCount() {
-        this._updatingCount.next(this._updatingCount.value + 1);
-    }
-    _decrUpdatingCount() {
-        this._updatingCount.next(this._updatingCount.value - 1);
-    }
-    updateItemsStates(items) {
-        this._incUpdatingCount();
-        try {
-            for (const item of items) {
-                if (horizontalNavItemHasChildren(item)) {
-                    this.updateItemsStates(item.children);
-                }
-                this.updateItemState(item);
-            }
-            this._decrUpdatingCount();
-        }
-        catch (err) {
-            this._decrUpdatingCount();
-            throw err;
-        }
-    }
-    updateItemState(item) {
-        this._incUpdatingCount();
-        try {
-            setDefaultHorizontalNavItemState(item);
-            this.setItemStateProp(item, 'active', this.horizontalNavLinkActive(item));
-            // TODO: Implement this in a more optimized way. Unless our apps start
-            // having large navs constantly updating their state, this shouldn't
-            // have much impact on performance.
-            this._updateItemExpandedState(item);
-            this._decrUpdatingCount();
-        }
-        catch (err) {
-            this._decrUpdatingCount();
-            throw err;
-        }
-    }
-    horizontalNavLinkActive(item) {
-        if (isHorizontalNavItemType(item, 'link')) {
-            const url = this._getUrl(item);
-            if (notNullOrUndefined(url)) {
-                const opts = this._getMatchOptions(item);
-                return this._router.isActive(url, opts);
-            }
-        }
-        return false;
-    }
-    _updateItemsExpandedState(items) {
-        for (const item of items) {
-            if (horizontalNavItemHasChildren(item)) {
-                this._updateItemsExpandedState(item.children);
-            }
-            this._updateItemExpandedState(item);
-        }
-    }
-    _updateItemExpandedState(item) {
-        if (!horizontalNavItemCanExpand(item)) {
-            if (getHorizontalNavItemStateProp(item, 'expanded')) {
-                this.setItemStateProp(item, 'expanded', false);
-            }
-            return;
-        }
-        if (horizontalNavItemHasChildren(item)) {
-            this._updateItemsExpandedState(item.children);
-        }
-        if (horizontalNavItemHasActiveChild(item) || horizontalNavItemHasExpandedChild(item)) {
-            if (!getHorizontalNavItemStateProp(item, 'expanded')) {
-                this.setItemStateProp(item, 'expanded', true);
-            }
-        }
-        else {
-            if (getHorizontalNavItemStateProp(item, 'expanded')) {
-                this.setItemStateProp(item, 'expanded', false);
-            }
-        }
-    }
-    updateRouterFocusedItem(items) {
-        const focusedItem = items.find(i => isHorizontalNavItemActive(i)) || items.find(i => horizontalNavItemHasActiveChild(i));
-        if (notNullOrUndefined(focusedItem)) {
-            this.updateFocusedItem(items, focusedItem);
-        }
-    }
-    updateFocusedItem(items, focusedItem) {
-        for (const item of items) {
-            if (areSameHorizontalNavItem(item, focusedItem)) {
-                setHorizontalNavItemStateProp(item, 'focused', true);
-            }
-            else {
-                setHorizontalNavItemStateProp(item, 'focused', false);
-            }
-        }
-    }
-    _getNavExtras(item) {
-        const navigationExtras = {};
-        if (hasProperty(item, 'queryParams')) {
-            navigationExtras.queryParams = item.queryParams;
-        }
-        if (hasProperty(item, 'fragment')) {
-            navigationExtras.fragment = item.fragment;
-        }
-        if (hasProperty(item, 'queryParamsHandling')) {
-            navigationExtras.queryParamsHandling = item.queryParamsHandling;
-        }
-        if (hasProperty(item, 'preserveFragment')) {
-            navigationExtras.preserveFragment = item.preserveFragment;
-        }
-        return navigationExtras;
-    }
-    _getUrl(item) {
-        const link = item.link;
-        if (typeof link === 'string') {
-            return this._router.createUrlTree([link], this._getNavExtras(item)).toString();
-        }
-        else if (Array.isArray(link)) {
-            return this._router.createUrlTree(link, this._getNavExtras(item)).toString();
-        }
-        return null;
-    }
-    _getMatchOptions(item) {
-        const defaultMatchOpts = {
-            paths: 'subset',
-            queryParams: 'subset',
-            fragment: 'ignored',
-            matrixParams: 'ignored'
-        };
-        if (hasProperty(item, 'matchOptions')) {
-            return 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 NavItemComponent {
-    constructor(_nav) {
-        this._nav = _nav;
-        this._ngUnsubscribe = new Subject();
-        this.faAngleLeft = faAngleLeft;
-        this.active = false;
-        this._link = new BehaviorSubject(undefined);
-        this.link$ = this._link.asObservable();
-        this.hierLevel = 0;
-        this.indentSize = 10;
-        this._expanded = new BehaviorSubject(false);
-        this.expanded$ = this._expanded.asObservable();
-        this._compact = new BehaviorSubject(false);
-        this.compact$ = this._compact.asObservable();
-        this.focused = false;
-        this.badgeTheme = 'danger';
-        this.childAction = 'menu';
-        this.expandAction = 'toggle';
-        this.navItemExpanded = new EventEmitter();
-    }
-    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 _isFocusedCssClass() { return this.focused; }
-    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);
-        if (this.item && this.expanded) {
-            this._nav.setItemStateProp(this.item, 'focused', this.expanded);
-        }
-        // Prevents seam-menu from closing out when toggling child expand
-        event.stopPropagation();
-    }
-    // Updates expanded state when user exits seam-menu
-    _menuEvent(menuExpanded) {
-        if (menuExpanded === false) {
-            this.expanded = false;
-            // TODO: figure out why closing seam-menu with expanded submenu messes up animation
-            if (this._navItems && this._navItems.length) {
-                this._navItems.forEach(navItem => {
-                    navItem.expanded = false;
-                });
-            }
-        }
-    }
-    get showIconBlock() {
-        return notNullOrUndefined(this.icon) || this.hideEmptyIcon !== true;
-    }
-}
-NavItemComponent.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    [focused]=\"$any(child).__state?.focused\"\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 = () => [
-    { type: TheSeamNavService }
-];
-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 }],
-    focused: [{ type: Input }],
-    badgeText: [{ type: Input }],
-    badgeTheme: [{ type: Input }],
-    badgeSrContent: [{ type: Input }],
-    badgeTooltip: [{ type: Input }],
-    childAction: [{ type: Input }],
-    expandAction: [{ type: Input }],
-    navItemExpanded: [{ type: Output }],
-    _isActiveCssClass: [{ type: HostBinding, args: ['class.seam-nav-item--active',] }],
-    _isChildActiveCssClass: [{ type: HostBinding, args: ['class.seam-nav-item--child-active',] }],
-    _isExpandedCssClass: [{ type: HostBinding, args: ['class.seam-nav-item--expanded',] }],
-    _isFocusedCssClass: [{ type: HostBinding, args: ['class.seam-nav-item--focused',] }],
-    _attrDataHierLevel: [{ type: HostBinding, args: ['attr.data-hier-level',] }],
-    _menu: [{ type: ViewChild, args: [MenuComponent,] }],
-    _navItems: [{ type: ViewChildren, args: [NavItemComponent,] }]
-};
-__decorate([
-    InputBoolean()
-], NavItemComponent.prototype, "active", void 0);
-__decorate([
-    InputNumber(0)
-], NavItemComponent.prototype, "hierLevel", void 0);
-__decorate([
-    InputNumber(10)
-], NavItemComponent.prototype, "indentSize", void 0);
-
-class HorizontalNavComponent {
-    constructor(_nav) {
-        this._nav = _nav;
-        this._ngUnsubscribe = new Subject();
-        this._items = new BehaviorSubject([]);
-        this.hideEmptyIcon = true;
-        this.hierLevel = 0;
-        this.childAction = 'menu';
-        this.expandAction = 'toggle';
-        this.navItemExpanded = new EventEmitter();
-        this.items$ = this._items.asObservable().pipe(switchMap(items => items ? this._nav.createItemsObservable(items) : []), shareReplay({ bufferSize: 1, refCount: true }));
-    }
-    get items() { return this._items.value; }
-    set items(value) {
-        this._items.next(value);
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-    }
-    _navItemExpanded(item, expanded) {
-        this.navItemExpanded.emit({ navItem: item, expanded });
-    }
-}
-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      [focused]=\"$any(item).__state?.focused\"\n      [hierLevel]=\"hierLevel\"\n      [childAction]=\"childAction\"\n      [expandAction]=\"expandAction\"\n      (navItemExpanded)=\"_navItemExpanded(item, $event)\"\n      [hideEmptyIcon]=\"hideEmptyIcon\">\n    </seam-nav-item>\n  </div>\n</div>\n",
-                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 = () => [
-    { type: TheSeamNavService }
-];
-HorizontalNavComponent.propDecorators = {
-    items: [{ type: Input }],
-    hideEmptyIcon: [{ type: Input }],
-    hierLevel: [{ type: Input }],
-    childAction: [{ type: Input }],
-    expandAction: [{ 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, 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, isHorizontalNavItemFocused, 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