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

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

@@ -1,2685 +0,0 @@
-import * as i0 from '@angular/core';
-import { Directive, ElementRef, InjectionToken, Optional, Inject, HostBinding, Input, HostListener, forwardRef, isDevMode, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewContainerRef, ContentChild, TemplateRef, NgModule, ViewChild, Injectable, EventEmitter, ChangeDetectorRef, ViewChildren, Output, ComponentFactoryResolver, SkipSelf, Host, Self, ContentChildren } from '@angular/core';
-import { TemplatePortal, PortalModule, ComponentPortal, BasePortalOutlet } from '@angular/cdk/portal';
-import { BehaviorSubject, isObservable, from, Subject, of, combineLatest, defer, Observable } from 'rxjs';
-import { faAngleDoubleRight, faAngleDoubleLeft, faLock, faUnlock, faAngleLeft, faBars, faAngleDown } from '@fortawesome/free-solid-svg-icons';
-import { TheSeamLayoutService, TheSeamLayoutModule } from '@theseam/ui-common/layout';
-import { CommonModule } from '@angular/common';
-import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
-import { TheSeamIconModule } from '@theseam/ui-common/icon';
-import { TheSeamScrollbarModule } from '@theseam/ui-common/scrollbar';
-import { startWith, switchMap, map, shareReplay, tap, mapTo, take, auditTime, debounceTime, takeUntil, distinctUntilChanged, finalize, filter } from 'rxjs/operators';
-import { __decorate } from 'tslib';
-import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { moveItemInArray, transferArrayItem, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
-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 } 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(_baseLayout) {
-        this.type = 'button';
-        /** Screenreader label for the button. */
-        this.ariaLabel = 'Navigation toggle';
-        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();
-        }
-    }
-}
-BaseLayoutNavToggleDirective.decorators = [
-    { type: Directive, args: [{
-                selector: 'button[seamBaseLayoutNavToggle]',
-                exportAs: 'seamBaseLayoutNavToggle'
-            },] }
-];
-BaseLayoutNavToggleDirective.ctorParameters = () => [
-    { 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',] }],
-    _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._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._topBarTpl) {
-            this._topBarPortal = new TemplatePortal(this._topBarTpl, this._viewContainerRef);
-        }
-        if (this._sideBarTpl) {
-            this._sideBarPortal = new TemplatePortal(this._sideBarTpl, this._viewContainerRef);
-            this._hasSideBar.next(true);
-        }
-        if (this._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\">\n      <!-- <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template> -->\n\n      <div class=\"d-flex d-flex-row\">\n        <div class=\"flex-grow-1\">\n          <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n        </div>\n        <div class=\"d-flex\">\n          <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n            <div>\n              <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n",
-                providers: [THE_SEAM_BASE_LAYOUT],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None,
-                styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;float:left;z-index:9999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .base-layout-content-container-header{margin:.25rem;padding:0;background:none;border-radius:0;overflow:hidden}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"]
-            },] }
-];
-TheSeamBaseLayoutComponent.ctorParameters = () => [
-    { type: ViewContainerRef },
-    { type: TheSeamLayoutService }
-];
-TheSeamBaseLayoutComponent.propDecorators = {
-    overlayNav: [{ 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 TheSeamBaseLayoutModule {
-}
-TheSeamBaseLayoutModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    TheSeamBaseLayoutComponent,
-                    BaseLayoutContentDirective,
-                    BaseLayoutSideBarDirective,
-                    BaseLayoutSideBarFooterDirective,
-                    BaseLayoutTopBarDirective,
-                    BaseLayoutNavToggleDirective,
-                    BaseLayoutContentHeaderDirective,
-                    BaseLayoutContentFooterDirective
-                ],
-                imports: [
-                    CommonModule,
-                    PortalModule,
-                    TheSeamScrollbarModule,
-                    TheSeamIconModule,
-                    TheSeamButtonsModule
-                ],
-                exports: [
-                    TheSeamBaseLayoutComponent,
-                    BaseLayoutContentDirective,
-                    BaseLayoutSideBarDirective,
-                    BaseLayoutSideBarFooterDirective,
-                    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();
-        // @HostBinding('@sideNavExpand') _sideNavExpand = EXPANDED_STATE
-        // _sideNavExpand = EXPANDED_STATE
-        // @HostBinding('@sideNavAnim') _sideNavExpand = EXPANDED_STATE
-        this._sideNavExpand = 'initial';
-        this.hasHeaderToggle = true;
-        this._items = new BehaviorSubject([]);
-        this._expanded = new BehaviorSubject(true);
-        this.expanded$ = this._expanded.asObservable();
-        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 => 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);
-        let 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._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);
-        }
-    }
-}
-SideNavComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-side-nav',
-                template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"></div>\n\n<div class=\"side-nav-inner-wrapper\" [@sideNavExpand]=\"_sideNavExpand\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n        [compact]=\"!(expanded$ | async)\"\n        [itemType]=\"$any(item)?.itemType\"\n        [icon]=\"$any(item)?.icon\"\n        [label]=\"$any(item)?.label\"\n        [link]=\"$any(item)?.link\"\n        [badgeText]=\"$any(item)?.badge?.text\"\n        [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n        [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n        [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n        [queryParams]=\"$any(item)?.queryParams\"\n        [children]=\"$any(item)?.children\"\n        [active]=\"$any(item).__state.active\"\n        [expanded]=\"$any(item).__state.expanded\">\n      </seam-side-nav-item>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n",
-                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.
-                        state(EXPANDED_STATE$1, style({ width: '260px' })),
-                        state(COLLAPSED_STATE$1, style({ width: '50px', 'overflow-x': 'hidden' })),
-                        state(EXPANDED_OVERLAY_STATE, style({
-                            position: 'absolute',
-                            top: 0,
-                            height: '100%',
-                            bottom: 0,
-                            left: 0,
-                            float: 'left',
-                            zIndex: '9999',
-                            width: 'calc(100vw - 50px)',
-                            transform: 'translateX(0)'
-                        })),
-                        state(COLLAPSED_OVERLAY_STATE, style({
-                            position: 'absolute',
-                            top: 0,
-                            height: '100%',
-                            bottom: 0,
-                            left: 0,
-                            float: 'left',
-                            zIndex: '9999',
-                            width: 'calc(100vw - 50px)',
-                            transform: 'translateX(calc(-100vw + 50px))',
-                            'overflow-x': 'hidden'
-                        })),
-                        // 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 }],
-    items: [{ type: Input }],
-    expanded: [{ type: Input }],
-    overlay: [{ type: Input }],
-    toggleExpand: [{ type: Output }],
-    _sideBarFooterTpl: [{ type: ContentChild, args: [BaseLayoutSideBarFooterDirective, { static: true, read: TemplateRef },] }]
-};
-__decorate([
-    InputBoolean()
-], SideNavComponent.prototype, "hasHeaderToggle", 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
-                };
-            }
-            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 _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();
-        }
-    }
-}
-SideNavItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-side-nav-item',
-                template: "<div class=\"d-flex flex-row\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state.active\"\n      [expanded]=\"$any(child).__state.expanded\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    (click)=\"_linkClicked()\">\n    <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n    <div class=\"side-nav-item--icon\">\n      <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\"\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"side-nav-item--toggle-btn\"\n      [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n",
-                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 .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0px;right:0px}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#2f71a9;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn{color:#fff}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"]
-            },] }
-];
-SideNavItemComponent.ctorParameters = () => [
-    { type: SideNavComponent },
-    { type: SideNavItemComponent, decorators: [{ type: Optional }, { type: SkipSelf }, { type: Host }] }
-];
-SideNavItemComponent.propDecorators = {
-    itemType: [{ type: Input }],
-    icon: [{ 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.faBars = faBars;
-        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\" *ngIf=\"expanded\">\n  <ng-content></ng-content>\n</div>\n<button seamIconBtn [icon]=\"faBars\"\n  iconType=\"borderless-styled-square\"\n  btnSize=\"sm\"\n  class=\"side-nav-toggle--btn ml-1\"\n  (click)=\"toggle()\">\n  <span class=\"sr-only\">Toggle sidebar</span>\n</button>\n",
-                host: {
-                    '[class.side-nav-toggle--compact]': '!expanded'
-                },
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None,
-                styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{position:absolute;top:0;right:5px;color:#fff}seam-side-nav-toggle .side-nav-toggle--btn seam-icon{padding:5px}\n"]
-            },] }
-];
-SideNavToggleComponent.ctorParameters = () => [];
-SideNavToggleComponent.propDecorators = {
-    expanded: [{ 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  <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\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',
-                    '[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 }],
-    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;
-    }
-}
-TopBarItemDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamTopBarItem]'
-            },] }
-];
-TopBarItemDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-
-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 }] }
-];
-
-/**
- * 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;
-        /** Icon to display on mobile to activate profile dropdown. Defaults to faUserCircle. */
-        this.profileIcon = faUserCircle;
-        this.isMobile$ = this._layout.isMobile$;
-    }
-    /** @ignore */
-    ngOnInit() { }
-    /** @ignore */
-    ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-    }
-    /** @ignore */
-    ngAfterContentInit() {
-        if (this._topBarItems) {
-            this._items$ = this._topBarItems.changes.pipe(startWith(undefined), takeUntil(this._ngUnsubscribe), map(() => { var _a; return ((_a = this._topBarItems) === null || _a === void 0 ? void 0 : _a.toArray()) || []; }), shareReplay({ bufferSize: 1, refCount: true }));
-        }
-    }
-}
-TheSeamTopBarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-top-bar',
-                template: "<!-- Nav Toggle -->\n<div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n  <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"faBars\" iconType=\"borderless-styled-square\"></button>\n</div>\n\n<!-- Logo -->\n<div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n  [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n  <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </a>\n</div>\n\n<ng-template #useLogoRoute>\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </div>\n</ng-template>\n\n<!-- Title -->\n<div class=\"d-flex flex-column flex-grow-1\">\n  <seam-top-bar-title *ngIf=\"hasTitle\"\n    [titleText]=\"titleText\"\n    [subTitleText]=\"subTitleText\"\n    [class.ml-2]=\"isMobile$ | async\">\n  </seam-top-bar-title>\n</div>\n\n<!-- Items -->\n<div class=\"top-bar-icon-container mr-2\">\n  <ng-container *ngFor=\"let item of _items$ | async\">\n    <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n  </ng-container>\n</div>\n\n<!-- Menu -->\n<button seamTopBarMenuButton\n  [seamMenuToggle]=\"_topBarMenu?.menu\"\n  [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n  [compact]=\"isMobile$ | async\"\n  [profileIcon]=\"profileIcon\">\n</button>\n",
-                encapsulation: ViewEncapsulation.None,
-                exportAs: 'seamTopBar',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar-icon-container{margin:auto 0}\n"]
-            },] }
-];
-TheSeamTopBarComponent.ctorParameters = () => [
-    { type: TheSeamLayoutService }
-];
-TheSeamTopBarComponent.propDecorators = {
-    _topBarMenu: [{ type: ContentChild, args: [TopBarMenuDirective, { static: true },] }],
-    _topBarItems: [{ type: ContentChildren, args: [TopBarItemDirective,] }],
-    _topBarMenuBtnDetailTpl: [{ type: ContentChild, args: [TopBarMenuBtnDetailDirective,] }],
-    logo: [{ type: Input }],
-    logoSm: [{ type: Input }],
-    logoHref: [{ type: Input }],
-    logoHrefTarget: [{ type: Input }],
-    logoRoute: [{ type: Input }],
-    hasTitle: [{ type: Input }],
-    titleText: [{ type: Input }],
-    subTitleText: [{ type: Input }],
-    profileIcon: [{ type: Input }]
-};
-__decorate([
-    InputBoolean()
-], TheSeamTopBarComponent.prototype, "hasTitle", void 0);
-
-class TheSeamTopBarModule {
-}
-TheSeamTopBarModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    TheSeamTopBarComponent,
-                    TopBarTitleComponent,
-                    TopBarMenuButtonComponent,
-                    TopBarMenuDirective,
-                    TopBarItemDirective,
-                    TopBarMenuBtnDetailDirective
-                ],
-                imports: [
-                    CommonModule,
-                    TheSeamLayoutModule,
-                    TheSeamButtonsModule,
-                    TheSeamIconModule,
-                    TheSeamMenuModule,
-                    TheSeamBaseLayoutModule,
-                    RouterModule
-                ],
-                exports: [
-                    TheSeamTopBarComponent,
-                    TopBarMenuButtonComponent,
-                    TopBarMenuDirective,
-                    TheSeamMenuModule,
-                    TopBarItemDirective,
-                    TopBarMenuBtnDetailDirective
-                ]
-            },] }
-];
-
-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
-                ]
-            },] }
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutNavToggleDirective, BaseLayoutSideBarDirective, BaseLayoutTopBarDirective, DashboardComponent, DashboardWidgetContainerComponent, DashboardWidgetPortalOutletDirective, DashboardWidgetTemplateContainerComponent, DashboardWidgetsComponent, DashboardWidgetsPreferencesService, DashboardWidgetsService, HierarchyLevelResolver, HierarchyRouterOutletComponent, SideNavComponent, SideNavItemComponent, SideNavToggleComponent, THESEAM_BASE_LAYOUT_REF, THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, THE_SEAM_BASE_LAYOUT, TheSeamBaseLayoutComponent, TheSeamBaseLayoutModule, TheSeamDashboardModule, TheSeamDynamicRouterModule, TheSeamFramework, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarTitleComponent, canBeActive, canExpand, canHaveChildren, fader, findLinkItems, getItemStateProp, hasActiveChild, hasChildren, hasExpandedChild, isExpanded, isNavItemActive, isNavItemType, routeChanges, setDefaultState, setItemStateProp, sideNavExpandStateChangeFn, sideToSide, slider, stepper, transformer, BaseLayoutSideBarFooterDirective as ɵa, TheSeamSideNavService as ɵb, TheSeamSchemaFormControlsModule as ɵc, TheSeamSchemaFormCheckboxComponent as ɵd, TheSeamSchemaFormSubmitComponent as ɵe, TheSeamSchemaFormSelectComponent as ɵf, TheSeamSchemaFormInputComponent as ɵg, TheSeamSchemaFormNumberComponent as ɵh, TheSeamSchemaFormSubmitSplitComponent as ɵi };
-//# sourceMappingURL=theseam-ui-common-framework.js.map