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

package/bundles/theseam-ui-common-framework.umd.js

@@ -1,4270 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/operators'), require('@angular/cdk/portal'), require('rxjs'), require('@fortawesome/free-solid-svg-icons'), require('@theseam/ui-common/layout'), require('@angular/common'), require('@theseam/ui-common/buttons'), require('@theseam/ui-common/icon'), require('@theseam/ui-common/scrollbar'), require('@angular/cdk/coercion'), require('@angular/cdk/drag-drop'), require('@theseam/ui-common/core'), require('@theseam/ui-common/widget'), require('@theseam/ui-common/dynamic-component-loader'), require('@theseam/ui-common/utils'), require('@theseam/ui-common/shared'), require('@angular/animations'), require('@angular/router'), require('@angular/cdk/a11y'), require('@ng-bootstrap/ng-bootstrap'), require('@theseam/ui-common/menu'), require('@fortawesome/free-regular-svg-icons'), require('@ajsf/core'), require('@angular/forms'), require('@ng-select/ng-select'), require('@theseam/ui-common/checkbox'), require('@theseam/ui-common/form-field')) :
-    typeof define === 'function' && define.amd ? define('@theseam/ui-common/framework', ['exports', '@angular/core', 'rxjs/operators', '@angular/cdk/portal', 'rxjs', '@fortawesome/free-solid-svg-icons', '@theseam/ui-common/layout', '@angular/common', '@theseam/ui-common/buttons', '@theseam/ui-common/icon', '@theseam/ui-common/scrollbar', '@angular/cdk/coercion', '@angular/cdk/drag-drop', '@theseam/ui-common/core', '@theseam/ui-common/widget', '@theseam/ui-common/dynamic-component-loader', '@theseam/ui-common/utils', '@theseam/ui-common/shared', '@angular/animations', '@angular/router', '@angular/cdk/a11y', '@ng-bootstrap/ng-bootstrap', '@theseam/ui-common/menu', '@fortawesome/free-regular-svg-icons', '@ajsf/core', '@angular/forms', '@ng-select/ng-select', '@theseam/ui-common/checkbox', '@theseam/ui-common/form-field'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.theseam = global.theseam || {}, global.theseam["ui-common"] = global.theseam["ui-common"] || {}, global.theseam["ui-common"].framework = {}), global.ng.core, global.rxjs.operators, global.ng.cdk.portal, global.rxjs, global.freeSolidSvgIcons, global.theseam["ui-common"].layout, global.ng.common, global.theseam["ui-common"].buttons, global.theseam["ui-common"].icon, global.theseam["ui-common"].scrollbar, global.ng.cdk.coercion, global.ng.cdk.dragDrop, global.theseam["ui-common"].core, global.theseam["ui-common"].widget, global.theseam["ui-common"]["dynamic-component-loader"], global.theseam["ui-common"].utils, global.theseam["ui-common"].shared, global.ng.animations, global.ng.router, global.ng.cdk.a11y, global.ngBootstrap, global.theseam["ui-common"].menu, global.freeRegularSvgIcons, global.core$1, global.ng.forms, global.ngSelect, global.theseam["ui-common"].checkbox, global.theseam["ui-common"]["form-field"]));
-})(this, (function (exports, i0, operators, portal, rxjs, freeSolidSvgIcons, layout, common, buttons, icon, scrollbar, coercion, dragDrop, core, widget, i1, utils, shared, animations, router, a11y, ngBootstrap, menu, freeRegularSvgIcons, core$1, forms, ngSelect, checkbox, formField) { 'use strict';
-
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
-        var n = Object.create(null);
-        if (e) {
-            Object.keys(e).forEach(function (k) {
-                if (k !== 'default') {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () { return e[k]; }
-                    });
-                }
-            });
-        }
-        n["default"] = e;
-        return Object.freeze(n);
-    }
-
-    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-
-    var BaseLayoutContentFooterDirective = /** @class */ (function () {
-        function BaseLayoutContentFooterDirective(_elementRef) {
-            this._elementRef = _elementRef;
-        }
-        return BaseLayoutContentFooterDirective;
-    }());
-    BaseLayoutContentFooterDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[seamBaseLayoutContentFooter]'
-                },] }
-    ];
-    BaseLayoutContentFooterDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
-    var BaseLayoutContentHeaderDirective = /** @class */ (function () {
-        function BaseLayoutContentHeaderDirective(_elementRef) {
-            this._elementRef = _elementRef;
-        }
-        return BaseLayoutContentHeaderDirective;
-    }());
-    BaseLayoutContentHeaderDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[seamBaseLayoutContentHeader]'
-                },] }
-    ];
-    BaseLayoutContentHeaderDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
-    var BaseLayoutContentDirective = /** @class */ (function () {
-        function BaseLayoutContentDirective(_elementRef) {
-            this._elementRef = _elementRef;
-        }
-        return BaseLayoutContentDirective;
-    }());
-    BaseLayoutContentDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[seamBaseLayoutContent]'
-                },] }
-    ];
-    BaseLayoutContentDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
-    var THESEAM_BASE_LAYOUT_REF = new i0.InjectionToken('seamBaseLayoutRef');
-
-    /**
-     * Can be used to toggle the expand state of the registered nav.
-     */
-    var BaseLayoutNavToggleDirective = /** @class */ (function () {
-        function BaseLayoutNavToggleDirective(_cdr, _baseLayout) {
-            this._cdr = _cdr;
-            this.type = 'button';
-            /** Screenreader label for the button. */
-            this.ariaLabel = 'Navigation toggle';
-            this._toggleClass = true;
-            this._expandedClass = false;
-            this.baseLayout = _baseLayout;
-        }
-        Object.defineProperty(BaseLayoutNavToggleDirective.prototype, "_attrType", {
-            get: function () { return this.type; },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BaseLayoutNavToggleDirective.prototype, "_attrAriaLabel", {
-            get: function () { return this.ariaLabel || null; },
-            enumerable: false,
-            configurable: true
-        });
-        BaseLayoutNavToggleDirective.prototype._onClick = function () {
-            if (this.baseLayout && this.baseLayout.registeredNav) {
-                this.baseLayout.registeredNav.toggle();
-            }
-        };
-        BaseLayoutNavToggleDirective.prototype.ngOnInit = function () {
-            var _this = this;
-            var _a, _b;
-            (_b = (_a = this.baseLayout) === null || _a === void 0 ? void 0 : _a.registeredNav) === null || _b === void 0 ? void 0 : _b.expanded$.pipe(operators.tap(function (exp) {
-                _this._expandedClass = exp;
-                _this._cdr.markForCheck();
-            })).subscribe();
-        };
-        return BaseLayoutNavToggleDirective;
-    }());
-    BaseLayoutNavToggleDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: 'button[seamBaseLayoutNavToggle]',
-                    exportAs: 'seamBaseLayoutNavToggle'
-                },] }
-    ];
-    BaseLayoutNavToggleDirective.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [THESEAM_BASE_LAYOUT_REF,] }] }
-    ]; };
-    BaseLayoutNavToggleDirective.propDecorators = {
-        _attrType: [{ type: i0.HostBinding, args: ['attr.type',] }],
-        type: [{ type: i0.Input }],
-        _attrAriaLabel: [{ type: i0.HostBinding, args: ['attr.aria-label',] }],
-        ariaLabel: [{ type: i0.Input, args: ['aria-label',] }],
-        _toggleClass: [{ type: i0.HostBinding, args: ['class.base-layout-nav-toggle',] }],
-        _expandedClass: [{ type: i0.HostBinding, args: ['class.base-layout-nav-toggle--expanded',] }],
-        _onClick: [{ type: i0.HostListener, args: ['click',] }]
-    };
-
-    var BaseLayoutSideBarDirective = /** @class */ (function () {
-        function BaseLayoutSideBarDirective(_elementRef) {
-            this._elementRef = _elementRef;
-        }
-        return BaseLayoutSideBarDirective;
-    }());
-    BaseLayoutSideBarDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[seamBaseLayoutSideBar]'
-                },] }
-    ];
-    BaseLayoutSideBarDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
-    var BaseLayoutTopBarDirective = /** @class */ (function () {
-        function BaseLayoutTopBarDirective(_elementRef) {
-            this._elementRef = _elementRef;
-        }
-        return BaseLayoutTopBarDirective;
-    }());
-    BaseLayoutTopBarDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[seamBaseLayoutTopBar]'
-                },] }
-    ];
-    BaseLayoutTopBarDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
-    var THE_SEAM_BASE_LAYOUT = {
-        provide: THESEAM_BASE_LAYOUT_REF,
-        // tslint:disable-next-line:no-use-before-declare
-        useExisting: i0.forwardRef(function () { return TheSeamBaseLayoutComponent; }),
-        multi: false,
-    };
-    var TheSeamBaseLayoutComponent = /** @class */ (function () {
-        function TheSeamBaseLayoutComponent(_viewContainerRef, _layout) {
-            this._viewContainerRef = _viewContainerRef;
-            this._layout = _layout;
-            this.faAngleDoubleRight = freeSolidSvgIcons.faAngleDoubleRight;
-            this.faAngleDoubleLeft = freeSolidSvgIcons.faAngleDoubleLeft;
-            this.overlayNav = false;
-            this.showSidebar = true;
-            this._hasSideBar = new rxjs.BehaviorSubject(false);
-            this._registeredNav = new rxjs.BehaviorSubject(undefined);
-            this.registeredNav$ = this._registeredNav.asObservable();
-            this._registeredActions = new rxjs.BehaviorSubject([]);
-            this.registeredActions$ = this._registeredActions.asObservable();
-            this.isMobile$ = this._layout.isMobile$;
-            this.hasSideBar$ = this._hasSideBar.asObservable();
-        }
-        Object.defineProperty(TheSeamBaseLayoutComponent.prototype, "registeredNav", {
-            get: function () { return this._registeredNav.value; },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TheSeamBaseLayoutComponent.prototype, "registeredActions", {
-            get: function () { return this._registeredActions.value; },
-            enumerable: false,
-            configurable: true
-        });
-        TheSeamBaseLayoutComponent.prototype.ngOnInit = function () {
-            if (this.mobileBreakpoint) {
-                this._layout.setMobileBreakpoint(this.mobileBreakpoint);
-            }
-            if (this._topBarTpl) {
-                this._topBarPortal = new portal.TemplatePortal(this._topBarTpl, this._viewContainerRef);
-            }
-            if (this._sideBarTpl) {
-                this._sideBarPortal = new portal.TemplatePortal(this._sideBarTpl, this._viewContainerRef);
-                if (this.showSidebar) {
-                    this._hasSideBar.next(true);
-                }
-            }
-            if (this._contentTpl) {
-                this._contentPortal = new portal.TemplatePortal(this._contentTpl, this._viewContainerRef);
-            }
-            if (this._contentHeaderTpl) {
-                this._contentHeaderPortal = new portal.TemplatePortal(this._contentHeaderTpl, this._viewContainerRef);
-            }
-            if (this._contentFooterTpl) {
-                this._contentFooterPortal = new portal.TemplatePortal(this._contentFooterTpl, this._viewContainerRef);
-            }
-        };
-        TheSeamBaseLayoutComponent.prototype.registerNav = function (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);
-        };
-        TheSeamBaseLayoutComponent.prototype.unregisterNav = function (nav) {
-            if (this.registeredNav === nav) {
-                this._registeredNav.next(undefined);
-            }
-        };
-        TheSeamBaseLayoutComponent.prototype.registerAction = function (action) {
-            var actions = this._registeredActions.value;
-            if (actions.findIndex(function (a) { return a.name === action.name; }) !== -1) {
-                if (i0.isDevMode()) {
-                    console.warn("[TheSeamBaseLayoutComponent] registerAction(): Action " + action.name + " not " +
-                        'registered, because another action by that name is already registered.');
-                }
-                return;
-            }
-            actions.push(action);
-        };
-        TheSeamBaseLayoutComponent.prototype.unregisterAction = function (action) {
-            var actionName = typeof action === 'string' ? action : action.name;
-            var actions = this._registeredActions.value;
-            this._registeredActions.next(actions.filter(function (f) { return f.name !== actionName; }));
-        };
-        TheSeamBaseLayoutComponent.prototype.isActionRegistered = function (actionName) {
-            var actions = this._registeredActions.value;
-            var action = actions.find(function (f) { return f.name === actionName; });
-            return !!action;
-        };
-        TheSeamBaseLayoutComponent.prototype._handleButtonAction = function (action) {
-            this._execButtonAction(action).subscribe();
-        };
-        TheSeamBaseLayoutComponent.prototype._execButtonAction = function (action) {
-            var fnRes = action.exec();
-            return rxjs.isObservable(fnRes) ? fnRes : rxjs.from(Promise.resolve(fnRes));
-        };
-        return TheSeamBaseLayoutComponent;
-    }());
-    TheSeamBaseLayoutComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'seam-base-layout',
-                    template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header d-flex flex-row\">\n      <div class=\"base-layout-content-container-header-left flex-grow-1\">\n        <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n      </div>\n      <div class=\"base-layout-content-container-header-right d-flex\">\n        <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n          <div class=\"base-layout-registered-action\">\n            <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n",
-                    providers: [THE_SEAM_BASE_LAYOUT],
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;z-index:999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto;background:none;margin:.25rem;padding:0;border-radius:0;overflow:hidden}seam-base-layout .base-layout-content-container .base-layout-content-container-header-left{background:none;padding:0;margin:0;border-radius:0}seam-base-layout .base-layout-content-container .base-layout-content-container-header-right{background:none;padding:0;margin:0;border-radius:0}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"]
-                },] }
-    ];
-    TheSeamBaseLayoutComponent.ctorParameters = function () { return [
-        { type: i0.ViewContainerRef },
-        { type: layout.TheSeamLayoutService }
-    ]; };
-    TheSeamBaseLayoutComponent.propDecorators = {
-        overlayNav: [{ type: i0.Input }],
-        mobileBreakpoint: [{ type: i0.Input }],
-        showSidebar: [{ type: i0.Input }],
-        _topBarTpl: [{ type: i0.ContentChild, args: [BaseLayoutTopBarDirective, { static: true, read: i0.TemplateRef },] }],
-        _sideBarTpl: [{ type: i0.ContentChild, args: [BaseLayoutSideBarDirective, { static: true, read: i0.TemplateRef },] }],
-        _contentTpl: [{ type: i0.ContentChild, args: [BaseLayoutContentDirective, { static: true, read: i0.TemplateRef },] }],
-        _contentHeaderTpl: [{ type: i0.ContentChild, args: [BaseLayoutContentHeaderDirective, { static: true, read: i0.TemplateRef },] }],
-        _contentFooterTpl: [{ type: i0.ContentChild, args: [BaseLayoutContentFooterDirective, { static: true, read: i0.TemplateRef },] }]
-    };
-
-    var BaseLayoutSideBarFooterDirective = /** @class */ (function () {
-        function BaseLayoutSideBarFooterDirective(_elementRef) {
-            this._elementRef = _elementRef;
-        }
-        return BaseLayoutSideBarFooterDirective;
-    }());
-    BaseLayoutSideBarFooterDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[seamBaseLayoutSideBarFooter]'
-                },] }
-    ];
-    BaseLayoutSideBarFooterDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
-    var BaseLayoutSideBarHeaderDirective = /** @class */ (function () {
-        function BaseLayoutSideBarHeaderDirective(_elementRef) {
-            this._elementRef = _elementRef;
-        }
-        return BaseLayoutSideBarHeaderDirective;
-    }());
-    BaseLayoutSideBarHeaderDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[seamBaseLayoutSideBarHeader]'
-                },] }
-    ];
-    BaseLayoutSideBarHeaderDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
-    var TheSeamBaseLayoutModule = /** @class */ (function () {
-        function TheSeamBaseLayoutModule() {
-        }
-        return TheSeamBaseLayoutModule;
-    }());
-    TheSeamBaseLayoutModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        TheSeamBaseLayoutComponent,
-                        BaseLayoutContentDirective,
-                        BaseLayoutSideBarDirective,
-                        BaseLayoutSideBarFooterDirective,
-                        BaseLayoutSideBarHeaderDirective,
-                        BaseLayoutTopBarDirective,
-                        BaseLayoutNavToggleDirective,
-                        BaseLayoutContentHeaderDirective,
-                        BaseLayoutContentFooterDirective
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        portal.PortalModule,
-                        scrollbar.TheSeamScrollbarModule,
-                        icon.TheSeamIconModule,
-                        buttons.TheSeamButtonsModule
-                    ],
-                    exports: [
-                        TheSeamBaseLayoutComponent,
-                        BaseLayoutContentDirective,
-                        BaseLayoutSideBarDirective,
-                        BaseLayoutSideBarFooterDirective,
-                        BaseLayoutSideBarHeaderDirective,
-                        BaseLayoutTopBarDirective,
-                        BaseLayoutNavToggleDirective,
-                        BaseLayoutContentHeaderDirective,
-                        BaseLayoutContentFooterDirective
-                    ]
-                },] }
-    ];
-
-    var DashboardWidgetContainerComponent = /** @class */ (function () {
-        function DashboardWidgetContainerComponent() {
-        }
-        DashboardWidgetContainerComponent.prototype.ngOnInit = function () { };
-        return DashboardWidgetContainerComponent;
-    }());
-    DashboardWidgetContainerComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'seam-dashboard-widget-container',
-                    template: "<ng-template><ng-content></ng-content></ng-template>\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    DashboardWidgetContainerComponent.ctorParameters = function () { return []; };
-    DashboardWidgetContainerComponent.propDecorators = {
-        def: [{ type: i0.Input }],
-        templateRef: [{ type: i0.ViewChild, args: [i0.TemplateRef,] }]
-    };
-
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    /** @deprecated */
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    /** @deprecated */
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __spreadArray(to, from, pack) {
-        if (pack || arguments.length === 2)
-            for (var i = 0, l = from.length, ar; i < l; i++) {
-                if (ar || !(i in from)) {
-                    if (!ar)
-                        ar = Array.prototype.slice.call(from, 0, i);
-                    ar[i] = from[i];
-                }
-            }
-        return to.concat(ar || Array.prototype.slice.call(from));
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
-    };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
-
-    var THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR = new i0.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.
-     */
-    var DashboardWidgetsPreferencesService = /** @class */ (function () {
-        // private _pending = false
-        // public get pending() { return this._pending }
-        function DashboardWidgetsPreferencesService(_prefsAccessor) {
-            this._prefsAccessor = _prefsAccessor;
-            this._tablePrefsMap = new Map();
-        }
-        DashboardWidgetsPreferencesService.prototype.preferences = function (preferenceKey) {
-            var prefs = this._tablePrefsMap.get(preferenceKey);
-            if (!prefs) {
-                var refreshSubject = new rxjs.Subject();
-                prefs = {
-                    observable: this._createObservable(refreshSubject, preferenceKey),
-                    refresh: refreshSubject
-                };
-                this._tablePrefsMap.set(preferenceKey, prefs);
-            }
-            return prefs.observable;
-        };
-        DashboardWidgetsPreferencesService.prototype._createObservable = function (refreshSubject, prefKey) {
-            var _this = this;
-            if (!this._prefsAccessor) {
-                return rxjs.of({});
-            }
-            var accessor = function (key) { return _this._prefsAccessor ? _this._prefsAccessor.get(key) : rxjs.of('{}'); };
-            return refreshSubject.pipe(operators.startWith({}), 
-            // tap(() => console.log('Start requesting: ', prefKey)),
-            operators.switchMap(function () { return accessor(prefKey).pipe(operators.map(function (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 (i0.isDevMode()) {
-                        console.error(error);
-                    }
-                    return null;
-                }
-            }), operators.map(function (v) { return !!v ? v : {}; })); }), operators.shareReplay({ bufferSize: 1, refCount: true }));
-        };
-        DashboardWidgetsPreferencesService.prototype.refresh = function (preferenceKey) {
-            var prefs = this._tablePrefsMap.get(preferenceKey);
-            if (prefs) {
-                // this._pending = true
-                // prefs.refresh.next()
-                return prefs.observable.pipe(
-                // tap(() => prefs.refresh.next()),
-                operators.tap(function () { return setTimeout(function () { prefs.refresh.next(); }, 0); }), operators.mapTo(undefined), operators.take(1));
-            }
-            return rxjs.of(undefined);
-        };
-        DashboardWidgetsPreferencesService.prototype.selectLayout = function (preferenceKey, layoutName) {
-            return this.preferences(preferenceKey).pipe(operators.map(function (prefs) { return (prefs.layouts || []).find(function (l) { return 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.
-        DashboardWidgetsPreferencesService.prototype.updateLayout = function (preferenceKey, layout) {
-            var _this = this;
-            if (!this._prefsAccessor) {
-                return rxjs.of(undefined);
-            }
-            if (!utils.hasProperty(layout, 'name')) {
-                throw Error("Unable to save layout preference. 'name' is required for a layout preference.");
-            }
-            var _layout = this.toSerializeableLayout(layout);
-            // this._pending = true
-            return this.preferences(preferenceKey).pipe(operators.map(function (prefs) {
-                // Making the preferences immutable may not be necessary, but for now
-                // this obj->str->obj will work as a naive clone.
-                var layouts = JSON.parse(JSON.stringify(prefs.layouts || []));
-                var _layoutPref = layouts.find(function (c) { return c.name === _layout.name; });
-                // console.log('has', _layoutPref)
-                if (_layoutPref) {
-                    if (utils.hasProperty(_layout, 'name')) {
-                        _layoutPref.name = _layout.name;
-                    }
-                    if (utils.hasProperty(_layout, 'label')) {
-                        _layoutPref.label = _layout.label;
-                    }
-                    if (utils.hasProperty(_layout, 'items')) {
-                        _layoutPref.items = _layout.items;
-                    }
-                }
-                else {
-                    layouts.push(Object.assign({}, _layout));
-                }
-                var newPrefs = Object.assign(Object.assign({}, prefs), { layouts: layouts });
-                return newPrefs;
-            }), 
-            // tap(v => console.log('newPrefs', v)),
-            operators.take(1), operators.switchMap(function (newPrefs) { return _this._prefsAccessor
-                ? _this._prefsAccessor.update(preferenceKey, JSON.stringify(newPrefs))
-                : rxjs.of(newPrefs); }), operators.switchMap(function () { return _this.refresh(preferenceKey).pipe(operators.mapTo(undefined)); }));
-            // .subscribe()
-        };
-        DashboardWidgetsPreferencesService.prototype.toSerializeableLayout = function (layout) {
-            var 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.
-         */
-        DashboardWidgetsPreferencesService.prototype.toSerializeableItems = function (widgets) {
-            var e_1, _a;
-            var serialized = [];
-            try {
-                for (var widgets_1 = __values(widgets), widgets_1_1 = widgets_1.next(); !widgets_1_1.done; widgets_1_1 = widgets_1.next()) {
-                    var w = widgets_1_1.value;
-                    // 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
-                    });
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (widgets_1_1 && !widgets_1_1.done && (_a = widgets_1.return)) _a.call(widgets_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            return serialized;
-        };
-        return DashboardWidgetsPreferencesService;
-    }());
-    DashboardWidgetsPreferencesService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DashboardWidgetsPreferencesService_Factory() { return new DashboardWidgetsPreferencesService(i0__namespace.ɵɵinject(THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, 8)); }, token: DashboardWidgetsPreferencesService, providedIn: "root" });
-    DashboardWidgetsPreferencesService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    DashboardWidgetsPreferencesService.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR,] }] }
-    ]; };
-
-    var DashboardWidgetsService = /** @class */ (function () {
-        function DashboardWidgetsService(_dynamicComponentLoaderModule, _preferences) {
-            var _this = this;
-            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 rxjs.BehaviorSubject([]);
-            this._numColumns = new rxjs.BehaviorSubject(this.defaultNumColumns);
-            this._viewContainerRefSubject = new rxjs.BehaviorSubject(undefined);
-            this.numColumns$ = this._numColumns.asObservable();
-            // Widget items without preferences
-            var _widgetItems$ = rxjs.combineLatest([this._widgets, this._viewContainerRefSubject])
-                .pipe(operators.switchMap(function (_a) {
-                var _b = __read(_a, 2), defs = _b[0], vcr = _b[1];
-                return _this.createWidgetItems(defs, vcr);
-            }));
-            // Widget items with preferences
-            this.widgetItems$ = rxjs.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.
-            operators.auditTime(0), operators.switchMap(function (_a) {
-                var _b = __read(_a, 2), items = _b[0], numColumns = _b[1];
-                return _this._preferences.selectLayout(_this.preferenceKey, _this._layoutName(numColumns)).pipe(operators.map(function (layout) { return layout ? _this.withLayoutPreferences(items, layout) : items; }));
-            }), operators.shareReplay({ bufferSize: 1, refCount: true }));
-            this.widgetColumns$ = this.widgetItems$
-                .pipe(operators.map(function (items) { return _this.toColumnRecords(items); }), operators.shareReplay({ bufferSize: 1, refCount: true }));
-        }
-        Object.defineProperty(DashboardWidgetsService.prototype, "widgets", {
-            get: function () { return this._widgets.value; },
-            set: function (value) { this._widgets.next(value); },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DashboardWidgetsService.prototype, "numColumns", {
-            get: function () { return this._numColumns.value; },
-            set: function (value) {
-                if (value !== this._numColumns.value) {
-                    this._numColumns.next(value);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DashboardWidgetsService.prototype._layoutName = function (numColumns) {
-            return "columns-" + numColumns;
-        };
-        DashboardWidgetsService.prototype.setViewContainerRef = function (vcr) {
-            this._viewContainerRefSubject.next(vcr);
-        };
-        DashboardWidgetsService.prototype.createWidgetItems = function (defs, vcr) {
-            var _this = this;
-            var _createObservables = (defs || []).map(function (d) { return _this.createWidgetItem(d, vcr); });
-            var items$ = _createObservables.length > 0 ? rxjs.combineLatest(_createObservables) : rxjs.of([]);
-            return items$.pipe(operators.map(function (items) { return items.filter(utils.notNullOrUndefined); }), operators.tap(function (items) {
-                if (i0.isDevMode()) {
-                    var ids = items.map(function (v) { return v.widgetId; });
-                    if ((new Set(ids)).size !== ids.length) {
-                        console.warn("[DashboardWidgetsService] Duplicate widget's with the same 'widgetId' found.");
-                    }
-                }
-            }));
-        };
-        DashboardWidgetsService.prototype.createWidgetItem = function (def, vcr) {
-            var _this = this;
-            if (!def.widgetId || typeof def.widgetId !== 'string' || def.widgetId.length < 1) {
-                if (i0.isDevMode()) {
-                    console.warn("[DashboardWidgetsService] Widget ignored. All widgets must have a 'widgetId'.", def);
-                }
-                return rxjs.of(undefined);
-            }
-            return this.createWidgetPortal(def, vcr).pipe(operators.map(function (portal) { return (Object.assign(Object.assign({}, def), { col: def.col || _this.defaultColumn, order: def.order || 0, portal: portal, __itemDef: def })); }));
-        };
-        DashboardWidgetsService.prototype.createWidgetPortal = function (def, vcr) {
-            if (typeof def.component === 'string') {
-                return this._dynamicComponentLoaderModule
-                    .getComponentFactory(def.component)
-                    .pipe(operators.map(function (componentFactory) {
-                    return new portal.ComponentPortal(componentFactory.componentType, vcr, undefined, componentFactory.ngModule.componentFactoryResolver);
-                }), operators.take(1));
-            }
-            return def.componentFactoryResolver
-                ? rxjs.of(new portal.ComponentPortal(def.component, vcr, undefined, def.componentFactoryResolver))
-                : rxjs.of(new portal.ComponentPortal(def.component, vcr));
-        };
-        DashboardWidgetsService.prototype.updateOrder = function () {
-            return this.widgetColumns$
-                .pipe(operators.take(1), operators.tap(function (columns) { return columns.forEach(function (col) {
-                var i = 0;
-                col.items.forEach(function (itm) { return itm.order = i++; });
-            }); }), operators.mapTo(undefined));
-        };
-        DashboardWidgetsService.prototype.toColumnRecords = function (items) {
-            var e_1, _a;
-            var _this = this;
-            var columns = [];
-            for (var i = 0; i < this.numColumns; i++) {
-                columns.push({ column: i, items: [] });
-            }
-            var colNotFound = [];
-            var _loop_1 = function (item) {
-                var col = columns.find(function (c) { return 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);
-                }
-            };
-            try {
-                // Distribute items into columns
-                for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
-                    var item = items_1_1.value;
-                    _loop_1(item);
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            var _loop_2 = function (i) {
-                var item = colNotFound[i];
-                var col = columns
-                    .find(function (c) { return c.column === i % _this.numColumns; });
-                if (col) {
-                    col.items.push(item);
-                }
-            };
-            for (var i = 0; i < colNotFound.length; i++) {
-                _loop_2(i);
-            }
-            // Sort columns
-            columns = columns.sort(function (a, b) { return a.column - b.column; });
-            // Sort columns items
-            columns.forEach(function (col) { return col.items.sort(function (a, b) { return a.order - b.order; }); });
-            return columns;
-        };
-        DashboardWidgetsService.prototype.withLayoutPreferences = function (items, layout) {
-            var e_2, _a;
-            var _items = [];
-            var _loop_3 = function (item) {
-                var itemPref = layout.items.find(function (x) { return x.widgetId === item.widgetId; });
-                _items.push(Object.assign(Object.assign({}, item), (itemPref || {})));
-            };
-            try {
-                for (var items_2 = __values(items), items_2_1 = items_2.next(); !items_2_1.done; items_2_1 = items_2.next()) {
-                    var item = items_2_1.value;
-                    _loop_3(item);
-                }
-            }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
-                try {
-                    if (items_2_1 && !items_2_1.done && (_a = items_2.return)) _a.call(items_2);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
-            return _items;
-        };
-        DashboardWidgetsService.prototype.savePreferences = function () {
-            var _this = this;
-            // 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.
-            var items$ = this.widgetColumns$.pipe(operators.map(function (columns) { return []
-                .concat.apply([], __spreadArray([], __read((columns.map(function (c) { return c.items.map(function (itm) { return (Object.assign(Object.assign({}, itm), { col: c.column })); }); }))))); }));
-            return rxjs.combineLatest([items$, this.numColumns$]).pipe(operators.auditTime(0), operators.take(1), operators.switchMap(function (_a) {
-                var _b = __read(_a, 2), items = _b[0], numColumns = _b[1];
-                return _this._preferences.updateLayout(_this.preferenceKey, {
-                    name: _this._layoutName(numColumns),
-                    items: items
-                });
-            }), operators.mapTo(undefined));
-        };
-        return DashboardWidgetsService;
-    }());
-    DashboardWidgetsService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DashboardWidgetsService_Factory() { return new DashboardWidgetsService(i0__namespace.ɵɵinject(i1__namespace.TheSeamDynamicComponentLoader), i0__namespace.ɵɵinject(DashboardWidgetsPreferencesService)); }, token: DashboardWidgetsService, providedIn: "root" });
-    DashboardWidgetsService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    DashboardWidgetsService.ctorParameters = function () { return [
-        { type: i1.TheSeamDynamicComponentLoader },
-        { type: DashboardWidgetsPreferencesService }
-    ]; };
-
-    var DashboardWidgetsComponent = /** @class */ (function () {
-        function DashboardWidgetsComponent(_dashboardWidgets, _viewContainerRef, _cdr, _baseLayoutRef) {
-            var _this = this;
-            this._dashboardWidgets = _dashboardWidgets;
-            this._viewContainerRef = _viewContainerRef;
-            this._cdr = _cdr;
-            this._baseLayoutRef = _baseLayoutRef;
-            this.faLock = freeSolidSvgIcons.faLock;
-            this.faUnlock = freeSolidSvgIcons.faUnlock;
-            this._actionWidgetDragToggleName = 'widget-drag-toggle';
-            this._ngUnsubscribe = new rxjs.Subject();
-            this._gapSize = new rxjs.BehaviorSubject(30);
-            this.widgetsDraggable = false;
-            this._dragToggleVisible = new rxjs.BehaviorSubject(true);
-            this._containers = new rxjs.BehaviorSubject([]);
-            this._layoutChange = new rxjs.Subject();
-            this.widgetsChange = new i0.EventEmitter();
-            this._widthChange = new rxjs.Subject();
-            this.containers$ = this._containers.asObservable();
-            this._gapStyleSize$ = this._gapSize.pipe(operators.auditTime(0), operators.map(function (size) { return size / 2; }), operators.shareReplay({ bufferSize: 1, refCount: true }));
-            this._widthChange.pipe(operators.debounceTime(30), operators.tap(function (width) {
-                if (width > 1300) {
-                    _this.numColumns = 3;
-                }
-                else if (width > 800) {
-                    _this.numColumns = 2;
-                }
-                else {
-                    _this.numColumns = 1;
-                }
-            }), operators.takeUntil(this._ngUnsubscribe)).subscribe();
-            this.widgetItems$ = this._dashboardWidgets.widgetItems$;
-            this.widgetColumns$ = this._dashboardWidgets.widgetColumns$;
-        }
-        Object.defineProperty(DashboardWidgetsComponent.prototype, "gapSize", {
-            get: function () { return this._gapSize.value; },
-            set: function (val) {
-                this._gapSize.next(coercion.coerceNumberProperty(val));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DashboardWidgetsComponent.prototype, "dragToggleVisible", {
-            get: function () { return this._dragToggleVisible.value; },
-            set: function (val) {
-                this._dragToggleVisible.next(coercion.coerceBooleanProperty(val));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DashboardWidgetsComponent.prototype, "numColumns", {
-            get: function () { return this._dashboardWidgets.numColumns; },
-            set: function (val) {
-                this._dashboardWidgets.numColumns = coercion.coerceNumberProperty(val);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DashboardWidgetsComponent.prototype, "widgets", {
-            get: function () { return this._dashboardWidgets.widgets; },
-            set: function (value) { this._dashboardWidgets.widgets = value || []; },
-            enumerable: false,
-            configurable: true
-        });
-        DashboardWidgetsComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            // this._dashboardWidgets.setViewContainerRef(this._viewContainerRef)
-            this._layoutChange.pipe(operators.switchMap(function () { return _this.widgetItems$.pipe(operators.take(1), operators.tap(function (widgetItems) { return _this.widgetsChange.emit(widgetItems); }), 
-            // map(widgetItems => this._dashboardWidgets.toSerializeableItems(widgetItems)),
-            // tap(v => console.log('serializable', v)),
-            operators.switchMap(function () { return _this._dashboardWidgets.savePreferences(); })); }), operators.takeUntil(this._ngUnsubscribe)).subscribe();
-        };
-        DashboardWidgetsComponent.prototype.ngOnDestroy = function () {
-            this._unregisterToggleAction();
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
-        };
-        DashboardWidgetsComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            var _a;
-            if (this._baseLayoutRef) {
-                this._dragToggleVisible.pipe(operators.distinctUntilChanged(), operators.tap(function (visible) {
-                    var isRegistered = _this._isActionToggleActionRegistered();
-                    if (visible && !isRegistered) {
-                        _this._registerToggleAction();
-                    }
-                    else if (!visible && isRegistered) {
-                        _this._unregisterToggleAction();
-                    }
-                }), operators.takeUntil(this._ngUnsubscribe)).subscribe();
-            }
-            (_a = this.containers) === null || _a === void 0 ? void 0 : _a.changes.pipe(operators.startWith(undefined), operators.map(function () { var _a; return ((_a = _this.containers) === null || _a === void 0 ? void 0 : _a.toArray()) || []; }), operators.takeUntil(this._ngUnsubscribe), operators.finalize(function () { return _this._containers.next([]); })).subscribe(function (v) { return _this._containers.next(v); });
-        };
-        DashboardWidgetsComponent.prototype._registerToggleAction = function () {
-            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
-                    });
-                }
-            }
-        };
-        DashboardWidgetsComponent.prototype._unregisterToggleAction = function () {
-            if (this._baseLayoutRef) {
-                this._baseLayoutRef.unregisterAction(this._actionWidgetDragToggleName);
-            }
-        };
-        DashboardWidgetsComponent.prototype._isActionToggleActionRegistered = function () {
-            if (!this._baseLayoutRef) {
-                return false;
-            }
-            return this._baseLayoutRef.isActionRegistered(this._actionWidgetDragToggleName);
-        };
-        DashboardWidgetsComponent.prototype.drop = function (event) {
-            var _this = this;
-            if (event.previousContainer === event.container) {
-                dragDrop.moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-                this._dashboardWidgets.updateOrder().subscribe(function () { return _this._layoutChange.next(); });
-            }
-            else {
-                dragDrop.transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
-                this._dashboardWidgets.updateOrder().subscribe(function () { return _this._layoutChange.next(); });
-            }
-        };
-        DashboardWidgetsComponent.prototype._containerTrackByFn = function (index, item) {
-            return item.widgetId;
-        };
-        DashboardWidgetsComponent.prototype._columnsTrackByFn = function (index, record) {
-            return record.column;
-        };
-        DashboardWidgetsComponent.prototype.toggleDragging = function () {
-            this.widgetsDraggable = !this.widgetsDraggable;
-            this._cdr.detectChanges();
-        };
-        DashboardWidgetsComponent.prototype._resized = function (event) {
-            this._widthChange.next(event.size.width);
-        };
-        return DashboardWidgetsComponent;
-    }());
-    DashboardWidgetsComponent.decorators = [
-        { type: i0.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: widget.THESEAM_WIDGET_ACCESSOR,
-                            // tslint:disable-next-line:no-use-before-declare
-                            useExisting: i0.forwardRef(function () { return DashboardWidgetsComponent; })
-                        }
-                    ],
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    encapsulation: i0.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 = function () { return [
-        { type: DashboardWidgetsService },
-        { type: i0.ViewContainerRef },
-        { type: i0.ChangeDetectorRef },
-        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [THESEAM_BASE_LAYOUT_REF,] }] }
-    ]; };
-    DashboardWidgetsComponent.propDecorators = {
-        gapSize: [{ type: i0.Input }],
-        widgetsDraggable: [{ type: i0.Input }],
-        dragToggleVisible: [{ type: i0.Input }],
-        numColumns: [{ type: i0.Input }],
-        widgets: [{ type: i0.Input }],
-        containers: [{ type: i0.ViewChildren, args: [DashboardWidgetContainerComponent,] }],
-        cdkDragDirectives: [{ type: i0.ViewChildren, args: [dragDrop.CdkDrag,] }],
-        _toggleBtnTpl: [{ type: i0.ViewChild, args: ['toggleBtnTpl', { static: true },] }],
-        widgetsChange: [{ type: i0.Output }]
-    };
-    __decorate([
-        core.InputBoolean()
-    ], DashboardWidgetsComponent.prototype, "widgetsDraggable", void 0);
-
-    var DashboardWidgetTemplateContainerComponent = /** @class */ (function () {
-        function DashboardWidgetTemplateContainerComponent(_dashboardWidgetsComponent) {
-            var _this = this;
-            this._dashboardWidgetsComponent = _dashboardWidgetsComponent;
-            this.template$ = this._dashboardWidgetsComponent.containers$.pipe(operators.map(function (containers) { return containers.find(function (c) { var _a; return c.def.widgetId === ((_a = _this.item) === null || _a === void 0 ? void 0 : _a.widgetId); }); }), operators.map(function (container) { return container && container.templateRef; }));
-        }
-        DashboardWidgetTemplateContainerComponent.prototype.ngOnInit = function () { };
-        return DashboardWidgetTemplateContainerComponent;
-    }());
-    DashboardWidgetTemplateContainerComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'seam-dashboard-widget-template-container',
-                    template: "<ng-template [ngTemplateOutlet]=\"$any(template$ | async)\"></ng-template>\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    DashboardWidgetTemplateContainerComponent.ctorParameters = function () { return [
-        { type: DashboardWidgetsComponent }
-    ]; };
-    DashboardWidgetTemplateContainerComponent.propDecorators = {
-        item: [{ type: i0.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>`
-     */
-    var DashboardWidgetPortalOutletDirective = /** @class */ (function (_super) {
-        __extends(DashboardWidgetPortalOutletDirective, _super);
-        function DashboardWidgetPortalOutletDirective(_componentFactoryResolver, _viewContainerRef, _elementRef) {
-            var _this = _super.call(this) || this;
-            _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 i0.EventEmitter();
-            return _this;
-        }
-        Object.defineProperty(DashboardWidgetPortalOutletDirective.prototype, "portal", {
-            /** Portal associated with the Portal outlet. */
-            get: function () {
-                return this._attachedPortal;
-            },
-            set: function (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.prototype.detach.call(this);
-                }
-                if (portal) {
-                    _super.prototype.attach.call(this, portal);
-                }
-                this._attachedPortal = portal;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DashboardWidgetPortalOutletDirective.prototype, "attachedRef", {
-            /** Component or view reference that is attached to the portal. */
-            get: function () {
-                return this._attachedRef;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DashboardWidgetPortalOutletDirective.prototype.ngOnInit = function () {
-            this._isInitialized = true;
-        };
-        DashboardWidgetPortalOutletDirective.prototype.ngOnDestroy = function () {
-            var _this = this;
-            // 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(function () {
-                _super.prototype.dispose.call(_this);
-                _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.
-         */
-        DashboardWidgetPortalOutletDirective.prototype.attachComponentPortal = function (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.
-            var viewContainerRef = portal.viewContainerRef != null ?
-                portal.viewContainerRef :
-                this._viewContainerRef;
-            var resolver = portal.componentFactoryResolver || this._componentFactoryResolver;
-            var componentFactory = resolver.resolveComponentFactory(portal.component);
-            var ref = viewContainerRef.createComponent(componentFactory, viewContainerRef.length, portal.injector || viewContainerRef.injector);
-            _super.prototype.setDisposeFn.call(this, function () { return 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.
-         */
-        DashboardWidgetPortalOutletDirective.prototype.attachTemplatePortal = function (portal) {
-            var _this = this;
-            portal.setAttachedHost(this);
-            var viewRef = this._viewContainerRef.createEmbeddedView(portal.templateRef, portal.context);
-            _super.prototype.setDisposeFn.call(this, function () { return _this._viewContainerRef.clear(); });
-            this._attachedPortal = portal;
-            this._attachedRef = viewRef;
-            this.attached.emit(viewRef);
-            return viewRef;
-        };
-        return DashboardWidgetPortalOutletDirective;
-    }(portal.BasePortalOutlet));
-    DashboardWidgetPortalOutletDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[seamDashboardWidgetPortalOutlet]',
-                    exportAs: 'seamDashboardWidgetPortalOutlet',
-                    inputs: ['portal: seamDashboardWidgetPortalOutlet']
-                },] }
-    ];
-    DashboardWidgetPortalOutletDirective.ctorParameters = function () { return [
-        { type: i0.ComponentFactoryResolver },
-        { type: i0.ViewContainerRef },
-        { type: i0.ElementRef }
-    ]; };
-    DashboardWidgetPortalOutletDirective.propDecorators = {
-        attached: [{ type: i0.Output }]
-    };
-
-    var DashboardComponent = /** @class */ (function () {
-        function DashboardComponent() {
-            this.widgetsDraggable = true;
-        }
-        return DashboardComponent;
-    }());
-    DashboardComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'seam-dashboard',
-                    template: "<seam-dashboard-widgets [widgets]=\"widgets\" [widgetsDraggable]=\"widgetsDraggable\"></seam-dashboard-widgets>\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    DashboardComponent.ctorParameters = function () { return []; };
-    DashboardComponent.propDecorators = {
-        widgets: [{ type: i0.Input }],
-        widgetsDraggable: [{ type: i0.Input }]
-    };
-    __decorate([
-        core.InputBoolean()
-    ], DashboardComponent.prototype, "widgetsDraggable", void 0);
-
-    var TheSeamDashboardModule = /** @class */ (function () {
-        function TheSeamDashboardModule() {
-        }
-        return TheSeamDashboardModule;
-    }());
-    TheSeamDashboardModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        DashboardComponent,
-                        DashboardWidgetsComponent,
-                        DashboardWidgetContainerComponent,
-                        DashboardWidgetTemplateContainerComponent,
-                        DashboardWidgetPortalOutletDirective
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        portal.PortalModule,
-                        dragDrop.DragDropModule,
-                        buttons.TheSeamButtonsModule,
-                        icon.TheSeamIconModule,
-                        shared.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) && utils.hasProperty(item, 'children') && item.children.length > 0;
-    }
-    function canHaveChildren(item) {
-        return isNavItemType(item, 'basic') || isNavItemType(item, 'link');
-    }
-    function hasActiveChild(item) {
-        var e_1, _c;
-        if (!hasChildren(item)) {
-            return false;
-        }
-        try {
-            for (var _d = __values(item.children), _e = _d.next(); !_e.done; _e = _d.next()) {
-                var child = _e.value;
-                if (getItemStateProp(child, 'active')) {
-                    return true;
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        return false;
-    }
-    function hasExpandedChild(item) {
-        var e_2, _c;
-        if (!hasChildren(item)) {
-            return false;
-        }
-        try {
-            for (var _d = __values(item.children), _e = _d.next(); !_e.done; _e = _d.next()) {
-                var child = _e.value;
-                if (getItemStateProp(child, 'expanded')) {
-                    return true;
-                }
-            }
-        }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-        finally {
-            try {
-                if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
-            }
-            finally { if (e_2) throw e_2.error; }
-        }
-        return false;
-    }
-    function canBeActive(item) {
-        return isNavItemType(item, 'basic') || isNavItemType(item, 'link');
-    }
-    function canExpand(item) {
-        return canHaveChildren(item);
-    }
-    function findLinkItems(items) {
-        var linkItems = [];
-        var _fn = function (_items) {
-            var e_3, _c;
-            try {
-                for (var _items_1 = __values(_items), _items_1_1 = _items_1.next(); !_items_1_1.done; _items_1_1 = _items_1.next()) {
-                    var item = _items_1_1.value;
-                    if (isNavItemType(item, 'link')) {
-                        linkItems.push(item);
-                    }
-                    if (canHaveChildren(item) && utils.hasProperty(item, 'children')) {
-                        _fn(item.children);
-                    }
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (_items_1_1 && !_items_1_1.done && (_c = _items_1.return)) _c.call(_items_1);
-                }
-                finally { if (e_3) throw e_3.error; }
-            }
-        };
-        _fn(items);
-        return linkItems;
-    }
-    function setItemStateProp(item, prop, value) {
-        if (utils.hasProperty(item, '__state')) {
-            item.__state[prop] = value;
-        }
-    }
-    function getItemStateProp(item, prop) {
-        return setDefaultState(item).__state[prop];
-    }
-    function setDefaultState(item) {
-        if (utils.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;
-    }
-
-    var TheSeamSideNavService = /** @class */ (function () {
-        function TheSeamSideNavService(_router) {
-            this._router = _router;
-            this._updatingCount = new rxjs.BehaviorSubject(0);
-            this.itemChanged = new rxjs.Subject();
-            this.loading$ = this._updatingCount.pipe(operators.map(function (count) { return count > 0; }), operators.distinctUntilChanged(), operators.shareReplay({ bufferSize: 1, refCount: true }));
-        }
-        TheSeamSideNavService.prototype.createItemsObservable = function (items) {
-            var _this = this;
-            return rxjs.defer(function () {
-                _this.updateItemsStates(items);
-                return new rxjs.Observable(function (subscriber) {
-                    var stateChangeSub = _this.itemChanged.pipe(operators.switchMap(function () { return _this.loading$.pipe(operators.filter(function (loading) { return !loading; })); })).subscribe(function () {
-                        subscriber.next(items);
-                    });
-                    try {
-                        _this.updateItemsStates(items);
-                    }
-                    catch (err) {
-                        subscriber.error(err);
-                    }
-                    // const linkItems = findLinkItems(items)
-                    var routeChangeSub = _this._router.events.pipe(operators.filter(function (event) { return event instanceof router.NavigationEnd; })).subscribe(function () {
-                        try {
-                            _this.updateItemsStates(items);
-                        }
-                        catch (err) {
-                            subscriber.error(err);
-                        }
-                    });
-                    return function () {
-                        stateChangeSub.unsubscribe();
-                        routeChangeSub.unsubscribe();
-                    };
-                }).pipe(operators.startWith(items));
-            });
-        };
-        TheSeamSideNavService.prototype._incUpdatingCount = function () {
-            this._updatingCount.next(this._updatingCount.value + 1);
-        };
-        TheSeamSideNavService.prototype._decrUpdatingCount = function () {
-            this._updatingCount.next(this._updatingCount.value - 1);
-        };
-        TheSeamSideNavService.prototype.updateItemsStates = function (items) {
-            var e_1, _a;
-            this._incUpdatingCount();
-            try {
-                try {
-                    for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
-                        var item = items_1_1.value;
-                        if (hasChildren(item)) {
-                            this.updateItemsStates(item.children);
-                        }
-                        this.updateItemState(item);
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-                this._decrUpdatingCount();
-            }
-            catch (err) {
-                this._decrUpdatingCount();
-                throw err;
-            }
-        };
-        TheSeamSideNavService.prototype.updateItemState = function (item) {
-            this._incUpdatingCount();
-            try {
-                setDefaultState(item);
-                if (isNavItemType(item, 'link')) {
-                    var url = this._getUrl(item);
-                    if (utils.notNullOrUndefined(url)) {
-                        var 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;
-            }
-        };
-        TheSeamSideNavService.prototype._updateItemsExpandedState = function (items) {
-            var e_2, _a;
-            try {
-                for (var items_2 = __values(items), items_2_1 = items_2.next(); !items_2_1.done; items_2_1 = items_2.next()) {
-                    var item = items_2_1.value;
-                    if (hasChildren(item)) {
-                        this._updateItemsExpandedState(item.children);
-                    }
-                    this._updateItemExpandedState(item);
-                }
-            }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
-                try {
-                    if (items_2_1 && !items_2_1.done && (_a = items_2.return)) _a.call(items_2);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
-        };
-        TheSeamSideNavService.prototype._updateItemExpandedState = function (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);
-                }
-            }
-        };
-        TheSeamSideNavService.prototype._getNavExtras = function (item) {
-            var navigationExtras = {};
-            if (utils.hasProperty(item, 'queryParams')) {
-                navigationExtras.queryParams = item.queryParams;
-            }
-            if (utils.hasProperty(item, 'fragment')) {
-                navigationExtras.fragment = item.fragment;
-            }
-            if (utils.hasProperty(item, 'queryParamsHandling')) {
-                navigationExtras.queryParamsHandling = item.queryParamsHandling;
-            }
-            if (utils.hasProperty(item, 'preserveFragment')) {
-                navigationExtras.preserveFragment = item.preserveFragment;
-            }
-            return navigationExtras;
-        };
-        TheSeamSideNavService.prototype._getUrl = function (item) {
-            var 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;
-        };
-        TheSeamSideNavService.prototype._getMatchOptions = function (item) {
-            var defaultMatchOpts = {
-                paths: 'subset',
-                queryParams: 'subset',
-                fragment: 'ignored',
-                matrixParams: 'ignored'
-            };
-            if (utils.hasProperty(item, 'matchOptions')) {
-                return Object.assign(Object.assign({}, defaultMatchOpts), item.matchOptions);
-            }
-            return defaultMatchOpts;
-        };
-        TheSeamSideNavService.prototype.setItemStateProp = function (item, prop, value) {
-            var currentValue = getItemStateProp(item, prop);
-            if (currentValue !== value) {
-                setItemStateProp(item, prop, value);
-                var changed = {
-                    item: item,
-                    prop: prop,
-                    prevValue: currentValue,
-                    newValue: value
-                };
-                this.itemChanged.next(changed);
-            }
-        };
-        return TheSeamSideNavService;
-    }());
-    TheSeamSideNavService.decorators = [
-        { type: i0.Injectable }
-    ];
-    TheSeamSideNavService.ctorParameters = function () { return [
-        { type: router.Router }
-    ]; };
-
-    var EXPANDED_STATE$1 = 'expanded';
-    var COLLAPSED_STATE$1 = 'collapsed';
-    var EXPANDED_OVERLAY_STATE = 'expanded-overlay';
-    var COLLAPSED_OVERLAY_STATE = 'collapsed-overlay';
-    var EXPANDED_STATES = [EXPANDED_STATE$1, EXPANDED_OVERLAY_STATE];
-    var COLLAPSED_STATES = [COLLAPSED_STATE$1, COLLAPSED_OVERLAY_STATE];
-    var EXPAND_STATES = __spreadArray(__spreadArray([], __read(EXPANDED_STATES)), __read(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)));
-    }
-    var SideNavComponent = /** @class */ (function () {
-        function SideNavComponent(_viewContainerRef, _layout, _sideNav, _baseLayoutRef) {
-            var _this = this;
-            this._viewContainerRef = _viewContainerRef;
-            this._layout = _layout;
-            this._sideNav = _sideNav;
-            this._baseLayoutRef = _baseLayoutRef;
-            this._ngUnsubscribe = new rxjs.Subject();
-            this.faBars = freeSolidSvgIcons.faBars;
-            // @HostBinding('@sideNavExpand') _sideNavExpand = EXPANDED_STATE
-            // _sideNavExpand = EXPANDED_STATE
-            // @HostBinding('@sideNavAnim') _sideNavExpand = EXPANDED_STATE
-            this._sideNavExpand = 'initial';
-            this.hasHeaderToggle = true;
-            this.toggleIcon = freeSolidSvgIcons.faBars;
-            this._items = new rxjs.BehaviorSubject([]);
-            this.indentSize = 10;
-            this._expanded = new rxjs.BehaviorSubject(true);
-            this.expanded$ = this._expanded.asObservable();
-            this.expandOrigin = 'left';
-            this.expandHeight = '100%';
-            this.expandWidth = 'calc(100vw - 50px)';
-            this._overlay = new rxjs.BehaviorSubject(false);
-            this.overlay$ = this._overlay.asObservable();
-            this.toggleExpand = new i0.EventEmitter();
-            this._backdropHidden = new rxjs.BehaviorSubject(true);
-            this.items$ = this._items.asObservable().pipe(operators.switchMap(function (items) { return items ? _this._sideNav.createItemsObservable(items) : []; }), operators.shareReplay({ bufferSize: 1, refCount: true }));
-            this.isMobile$ = this._layout.isMobile$.pipe(operators.tap(function (isMobile) { return isMobile ? _this.collapse() : _this.expand(); }));
-            this.sideNavExpandedState$ = rxjs.combineLatest([this.expanded$, this.overlay$]).pipe(operators.map(function (_a) {
-                var _b = __read(_a, 2), expanded = _b[0], overlay = _b[1];
-                return expanded
-                    ? overlay ? EXPANDED_OVERLAY_STATE : EXPANDED_STATE$1
-                    : overlay ? COLLAPSED_OVERLAY_STATE : COLLAPSED_STATE$1;
-            }), operators.distinctUntilChanged());
-        }
-        Object.defineProperty(SideNavComponent.prototype, "items", {
-            get: function () { return this._items.value; },
-            set: function (value) { this._items.next(value); },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SideNavComponent.prototype, "expanded", {
-            get: function () { return this._expanded.value; },
-            set: function (value) {
-                var expanded = coercion.coerceBooleanProperty(value);
-                var emit = expanded !== this.expanded;
-                this._expanded.next(expanded);
-                if (emit) {
-                    this.toggleExpand.emit(coercion.coerceBooleanProperty(value));
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SideNavComponent.prototype, "overlay", {
-            get: function () { return this._overlay.value; },
-            set: function (value) { this._overlay.next(coercion.coerceBooleanProperty(value)); },
-            enumerable: false,
-            configurable: true
-        });
-        SideNavComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            if (this._baseLayoutRef) {
-                this._baseLayoutRef.registerNav(this);
-            }
-            this.isMobile$
-                .pipe(operators.takeUntil(this._ngUnsubscribe))
-                .subscribe(function (b) { return _this.overlay = b; });
-            this.sideNavExpandedState$
-                .pipe(operators.takeUntil(this._ngUnsubscribe))
-                .subscribe(function (v) { return _this._sideNavExpand = v; });
-            if (this._sideBarHeaderTpl) {
-                this._sideBarHeaderPortal = new portal.TemplatePortal(this._sideBarHeaderTpl, this._viewContainerRef);
-            }
-            if (this._sideBarFooterTpl) {
-                this._sideBarFooterPortal = new portal.TemplatePortal(this._sideBarFooterTpl, this._viewContainerRef);
-            }
-        };
-        SideNavComponent.prototype.ngOnDestroy = function () {
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
-            if (this._baseLayoutRef) {
-                this._baseLayoutRef.unregisterNav(this);
-            }
-        };
-        SideNavComponent.prototype.expand = function () {
-            this.expanded = true;
-        };
-        SideNavComponent.prototype.collapse = function () {
-            this.expanded = false;
-        };
-        SideNavComponent.prototype.toggle = function () {
-            this.expanded = !this.expanded;
-        };
-        SideNavComponent.prototype.animateStart = function () {
-            if (this.expanded) {
-                this._backdropHidden.next(false);
-            }
-        };
-        SideNavComponent.prototype.animateEnd = function () {
-            if (!this.expanded) {
-                this._backdropHidden.next(true);
-            }
-        };
-        Object.defineProperty(SideNavComponent.prototype, "expandOriginTransform", {
-            get: function () {
-                switch (this.expandOrigin) {
-                    case 'right':
-                        return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateX(100vw) translateX(-100%)' :
-                            this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateX(100vw)' : null;
-                    case 'top':
-                        return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateY(0)' :
-                            this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateY(-100%)' : null;
-                    case 'bottom':
-                        return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateY(100vh) translateY(-100%)' :
-                            this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateY(100vh)' : null;
-                    case 'left':
-                    default:
-                        return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateX(0)' :
-                            this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateX(-100%)' : null;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return SideNavComponent;
-    }());
-    SideNavComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'seam-side-nav',
-                    template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"\n  (click)=\"collapse()\"></div>\n\n<div\n  class=\"side-nav-inner-wrapper\"\n  [@sideNavExpand]=\"{\n    value: _sideNavExpand,\n    params: {\n      origin: expandOriginTransform,\n      height: expandHeight,\n      width: expandWidth\n    }\n  }\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [toggleIcon]=\"toggleIcon\"\n      [toggleTpl]=\"toggleTpl\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarHeaderPortal\"></ng-template>\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <div class=\"side-nav--group side-nav--group--level-0\">\n        <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n          [compact]=\"!(expanded$ | async)\"\n          [itemType]=\"$any(item)?.itemType\"\n          [icon]=\"$any(item)?.icon\"\n          [label]=\"$any(item)?.label\"\n          [link]=\"$any(item)?.link\"\n          [badgeText]=\"$any(item)?.badge?.text\"\n          [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n          [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n          [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n          [queryParams]=\"$any(item)?.queryParams\"\n          [children]=\"$any(item)?.children\"\n          [active]=\"$any(item).__state?.active\"\n          [expanded]=\"$any(item).__state?.expanded\"\n          [hideEmptyIcon]=\"hideEmptyIcon\"\n          [indentSize]=\"indentSize\">\n      </seam-side-nav-item>\n      </div>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n",
-                    providers: [
-                        TheSeamSideNavService
-                    ],
-                    animations: [
-                        //
-                        // TODO: This animation code turned into a mess. Clean it up and make it
-                        // more smooth.
-                        //
-                        animations.trigger('sideNavAnim', [
-                            animations.transition(sideNavExpandStateChangeFn, [
-                                animations.group([
-                                    animations.query('@sideNavBackdrop', animations.animateChild(), { optional: true }),
-                                    animations.query('@sideNavExpand', animations.animateChild(), { optional: true }),
-                                ]),
-                            ]),
-                        ]),
-                        animations.trigger('sideNavBackdrop', [
-                            animations.state(EXPANDED_OVERLAY_STATE, animations.style({ opacity: '1' })),
-                            animations.state(COLLAPSED_OVERLAY_STATE, animations.style({ opacity: '0' })),
-                            // transition((fromState, toState, element, params) => {
-                            //   console.log('sideNavBackdrop v', fromState, toState, element, params)
-                            //   return false
-                            // }, []),
-                            animations.transition(sideNavExpandStateChangeFn, animations.animate('0.2s ease-in-out')),
-                        ]),
-                        animations.trigger('sideNavExpand', [
-                            // TODO: Make width configurable for non-overlay state.
-                            animations.state(EXPANDED_STATE$1, animations.style({ width: '260px' })),
-                            animations.state(COLLAPSED_STATE$1, animations.style({ width: '50px', 'overflow-x': 'hidden' })),
-                            animations.state(EXPANDED_OVERLAY_STATE, animations.style({
-                                position: 'absolute',
-                                top: 0,
-                                bottom: 0,
-                                left: 0,
-                                height: '{{ height }}',
-                                width: '{{ width }}',
-                                transform: '{{ origin }}',
-                                zIndex: '9999',
-                            }), {
-                                params: {
-                                    origin: 'translateX(100%)',
-                                    height: '100%',
-                                    width: 'calc(100vw - 50px)',
-                                }
-                            }),
-                            animations.state(COLLAPSED_OVERLAY_STATE, animations.style({
-                                position: 'absolute',
-                                top: 0,
-                                bottom: 0,
-                                left: 0,
-                                height: '{{ height }}',
-                                width: '{{ width }}',
-                                transform: '{{ origin }}',
-                                'overflow-x': 'hidden',
-                                zIndex: '9999',
-                            }), {
-                                params: {
-                                    origin: 'translateX(0)',
-                                    height: '100%',
-                                    width: 'calc(100vw - 50px)',
-                                }
-                            }),
-                            // transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
-                            animations.transition(sideNavExpandStateChangeFn, animations.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: i0.ChangeDetectionStrategy.OnPush,
-                    encapsulation: i0.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 = function () { return [
-        { type: i0.ViewContainerRef },
-        { type: layout.TheSeamLayoutService },
-        { type: TheSeamSideNavService },
-        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [THESEAM_BASE_LAYOUT_REF,] }] }
-    ]; };
-    SideNavComponent.propDecorators = {
-        _sideNavExpand: [{ type: i0.HostBinding, args: ['@sideNavAnim',] }],
-        hasHeaderToggle: [{ type: i0.Input }],
-        toggleIcon: [{ type: i0.Input }],
-        toggleTpl: [{ type: i0.Input }],
-        items: [{ type: i0.Input }],
-        hideEmptyIcon: [{ type: i0.Input }],
-        indentSize: [{ type: i0.Input }],
-        expanded: [{ type: i0.Input }],
-        expandOrigin: [{ type: i0.Input }],
-        expandHeight: [{ type: i0.Input }],
-        expandWidth: [{ type: i0.Input }],
-        overlay: [{ type: i0.Input }],
-        toggleExpand: [{ type: i0.Output }],
-        _sideBarHeaderTpl: [{ type: i0.ContentChild, args: [BaseLayoutSideBarHeaderDirective, { static: true, read: i0.TemplateRef },] }],
-        _sideBarFooterTpl: [{ type: i0.ContentChild, args: [BaseLayoutSideBarFooterDirective, { static: true, read: i0.TemplateRef },] }]
-    };
-    __decorate([
-        core.InputBoolean()
-    ], SideNavComponent.prototype, "hasHeaderToggle", void 0);
-    __decorate([
-        core.InputNumber(10)
-    ], SideNavComponent.prototype, "indentSize", void 0);
-
-    var EXPANDED_STATE = 'expanded';
-    var COLLAPSED_STATE = 'collapsed';
-    var FULL_STATE = 'full';
-    var COMPACT_STATE = 'compact';
-    var SideNavItemComponent = /** @class */ (function () {
-        function SideNavItemComponent(_sideNav, _parent) {
-            this._sideNav = _sideNav;
-            this._parent = _parent;
-            this._ngUnsubscribe = new rxjs.Subject();
-            this.faAngleLeft = freeSolidSvgIcons.faAngleLeft;
-            this.active = false;
-            this._link = new rxjs.BehaviorSubject(undefined);
-            this.link$ = this._link.asObservable();
-            this.hierLevel = 0;
-            this.indentSize = 10;
-            this._expanded = new rxjs.BehaviorSubject(false);
-            this.expanded$ = this._expanded.asObservable();
-            this._compact = new rxjs.BehaviorSubject(false);
-            this.compact$ = this._compact.asObservable();
-            this.badgeTheme = 'danger';
-            this.childGroupAnimState$ = this.expanded$
-                .pipe(operators.map(function (expanded) { return expanded ? EXPANDED_STATE : COLLAPSED_STATE; }));
-            this.compactAnimState$ = this.compact$
-                .pipe(operators.map(function (compact) { return compact ? COMPACT_STATE : FULL_STATE; }));
-        }
-        Object.defineProperty(SideNavItemComponent.prototype, "link", {
-            get: function () { return this._link.value; },
-            set: function (value) { this._link.next(value); },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SideNavItemComponent.prototype, "expanded", {
-            get: function () { return this._expanded.value; },
-            set: function (value) { this._expanded.next(coercion.coerceBooleanProperty(value)); },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SideNavItemComponent.prototype, "compact", {
-            get: function () { return this._compact.value; },
-            set: function (value) { this._compact.next(coercion.coerceBooleanProperty(value)); },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SideNavItemComponent.prototype, "badgeTooltip", {
-            get: function () { return this._badgeTooltip; },
-            set: function (value) {
-                if (value !== null && value !== undefined) {
-                    if (typeof value === 'string') {
-                        this._badgeTooltip = {
-                            tooltip: value,
-                            placement: 'auto',
-                            disabled: false,
-                            container: 'body'
-                        };
-                    }
-                    else {
-                        this._badgeTooltip = Object.assign(Object.assign({}, value), { placement: value.placement || 'auto', disabled: typeof (value === null || value === void 0 ? void 0 : value.disabled) === 'boolean'
-                                ? value.disabled
-                                : typeof value.tooltip === 'string' ? false : true, container: value.container || 'body' });
-                    }
-                }
-                else {
-                    this._badgeTooltip = undefined;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SideNavItemComponent.prototype, "_isActiveCssClass", {
-            get: function () { return this.active; },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SideNavItemComponent.prototype, "_attrDataHierLevel", {
-            get: function () { return this.hierLevel; },
-            enumerable: false,
-            configurable: true
-        });
-        SideNavItemComponent.prototype.ngOnDestroy = function () {
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
-        };
-        Object.defineProperty(SideNavItemComponent.prototype, "hasChildren", {
-            get: function () {
-                return Array.isArray(this.children) && this.children.length > 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SideNavItemComponent.prototype.toggleChildren = function () {
-            this.expanded = !this.expanded;
-        };
-        SideNavItemComponent.prototype._linkClicked = function () {
-            // Close nav when link is clicked while in overlay state
-            if (this._sideNav.overlay) {
-                this._sideNav.collapse();
-            }
-        };
-        Object.defineProperty(SideNavItemComponent.prototype, "showIconBlock", {
-            get: function () {
-                return utils.notNullOrUndefined(this.icon) || this.hideEmptyIcon !== true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return SideNavItemComponent;
-    }());
-    SideNavItemComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'seam-side-nav-item',
-                    template: "<div class=\"d-flex flex-row side-nav-item-wrapper\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state?.active\"\n      [expanded]=\"$any(child).__state?.expanded\"\n      [hideEmptyIcon]=\"hideEmptyIcon\"\n      [indentSize]=\"indentSize\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row align-items-stretch rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\">\n    <div class=\"nav-link d-flex flex-row align-items-center w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    (click)=\"_linkClicked()\">\n    <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n    <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\n      <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\"\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"side-nav-item--toggle-btn\"\n      [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n",
-                    exportAs: 'seamSideNavItem',
-                    animations: [
-                        animations.trigger('childGroupAnim', [
-                            animations.state(EXPANDED_STATE, animations.style({ height: '*' })),
-                            animations.state(COLLAPSED_STATE, animations.style({ height: 0, 'overflow-y': 'hidden', visibility: 'hidden' })),
-                            animations.transition(EXPANDED_STATE + " <=> " + COLLAPSED_STATE, animations.animate('0.2s ease-in-out')),
-                        ]),
-                        animations.trigger('compactAnim', [
-                        // transition('* <=> *', [
-                        //   query(':enter', [
-                        //     style({ opacity: '0' }),
-                        //     animate('5.2s ease-in-out', style({ opacity: '1' }))
-                        //   ], { optional: true }),
-                        //   query(':leave', [
-                        //     style({ opacity: '1' }),
-                        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
-                        //   ], { optional: true })
-                        // ])
-                        // state(FULL_STATE, style({ opacity: '1' })),
-                        // state(COMPACT_STATE, style({ opacity: '0' })),
-                        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, animate('5.2s ease-in-out')),
-                        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, [
-                        // transition('* <=> *', [
-                        //   query(':leave', [
-                        //     style({ opacity: '1' }),
-                        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
-                        //   ], { optional: true })
-                        // ]),
-                        ])
-                    ],
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["seam-side-nav-item{display:block;transition:.25s ease-in-out background-color}seam-side-nav-item.seam-side-nav-item--active{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .active,seam-side-nav-item.seam-side-nav-item--active:active,seam-side-nav-item.seam-side-nav-item--active .side-nav-item.active:hover{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item.seam-side-nav-item--active .nav-link{color:#fff}seam-side-nav-item.seam-side-nav-item--active .side-nav-btn{color:#fff}seam-side-nav-item .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0px;right:0px}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#fff;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"]
-                },] }
-    ];
-    SideNavItemComponent.ctorParameters = function () { return [
-        { type: SideNavComponent },
-        { type: SideNavItemComponent, decorators: [{ type: i0.Optional }, { type: i0.SkipSelf }, { type: i0.Host }] }
-    ]; };
-    SideNavItemComponent.propDecorators = {
-        itemType: [{ type: i0.Input }],
-        icon: [{ type: i0.Input }],
-        hideEmptyIcon: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
-        active: [{ type: i0.Input }],
-        link: [{ type: i0.Input }],
-        queryParams: [{ type: i0.Input }],
-        children: [{ type: i0.Input }],
-        hierLevel: [{ type: i0.Input }],
-        indentSize: [{ type: i0.Input }],
-        expanded: [{ type: i0.Input }],
-        compact: [{ type: i0.Input }],
-        badgeText: [{ type: i0.Input }],
-        badgeTheme: [{ type: i0.Input }],
-        badgeSrContent: [{ type: i0.Input }],
-        badgeTooltip: [{ type: i0.Input }],
-        _isActiveCssClass: [{ type: i0.HostBinding, args: ['class.seam-side-nav-item--active',] }],
-        _attrDataHierLevel: [{ type: i0.HostBinding, args: ['attr.data-hier-level',] }]
-    };
-    __decorate([
-        core.InputBoolean()
-    ], SideNavItemComponent.prototype, "active", void 0);
-    __decorate([
-        core.InputNumber(0)
-    ], SideNavItemComponent.prototype, "hierLevel", void 0);
-    __decorate([
-        core.InputNumber(10)
-    ], SideNavItemComponent.prototype, "indentSize", void 0);
-
-    var SideNavToggleComponent = /** @class */ (function () {
-        function SideNavToggleComponent() {
-            this.expanded = false;
-            this.toggleExpand = new i0.EventEmitter();
-        }
-        SideNavToggleComponent.prototype.ngOnInit = function () { };
-        SideNavToggleComponent.prototype.toggle = function () {
-            this.toggleExpand.emit();
-        };
-        return SideNavToggleComponent;
-    }());
-    SideNavToggleComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'seam-side-nav-toggle',
-                    template: "<div class=\"side-nav-toggle--content\">\n  <ng-container *ngIf=\"expanded\">\n    <ng-content></ng-content>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"toggleTpl; else iconBtn\">\n  <button\n    class=\"side-nav-toggle--btn mx-1\"\n    (click)=\"toggle()\">\n    <span class=\"sr-only\">Toggle sidebar</span>\n    <ng-container *ngTemplateOutlet=\"toggleTpl\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #iconBtn>\n  <button seamIconBtn [icon]=\"toggleIcon\"\n    iconType=\"borderless-styled-square\"\n    btnSize=\"sm\"\n    class=\"side-nav-toggle--btn mx-1\"\n    (click)=\"toggle()\">\n    <span class=\"sr-only\">Toggle sidebar</span>\n  </button>\n</ng-template>\n",
-                    host: {
-                        '[class.side-nav-toggle--compact]': '!expanded'
-                    },
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;align-items:center;background:#357ebd;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{color:#fff}seam-side-nav-toggle .side-nav-toggle--btn seam-icon{padding:5px}\n"]
-                },] }
-    ];
-    SideNavToggleComponent.ctorParameters = function () { return []; };
-    SideNavToggleComponent.propDecorators = {
-        expanded: [{ type: i0.Input }],
-        toggleIcon: [{ type: i0.Input }],
-        toggleTpl: [{ type: i0.Input }],
-        toggleExpand: [{ type: i0.Output }]
-    };
-    __decorate([
-        core.InputBoolean()
-    ], SideNavToggleComponent.prototype, "expanded", void 0);
-
-    var TheSeamSideNavModule = /** @class */ (function () {
-        function TheSeamSideNavModule() {
-        }
-        return TheSeamSideNavModule;
-    }());
-    TheSeamSideNavModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        SideNavItemComponent,
-                        SideNavComponent,
-                        SideNavToggleComponent
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        router.RouterModule,
-                        icon.TheSeamIconModule,
-                        a11y.A11yModule,
-                        scrollbar.TheSeamScrollbarModule,
-                        layout.TheSeamLayoutModule,
-                        ngBootstrap.NgbTooltipModule,
-                        portal.PortalModule
-                    ],
-                    exports: [
-                        SideNavItemComponent,
-                        SideNavComponent,
-                        SideNavToggleComponent
-                    ]
-                },] }
-    ];
-
-    var TopBarMenuButtonBase = /** @class */ (function () {
-        function TopBarMenuButtonBase() {
-        }
-        return TopBarMenuButtonBase;
-    }());
-    var _TopBarMenuButtonMixinBase = core.mixinDisabled(TopBarMenuButtonBase);
-    var TopBarMenuButtonComponent = /** @class */ (function (_super) {
-        __extends(TopBarMenuButtonComponent, _super);
-        function TopBarMenuButtonComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.faAngleDown = freeSolidSvgIcons.faAngleDown;
-            _this.compact = false;
-            return _this;
-        }
-        Object.defineProperty(TopBarMenuButtonComponent.prototype, "_hasCompactClass", {
-            get: function () { return this.compact; },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TopBarMenuButtonComponent.prototype, "_hasPadding0Class", {
-            get: function () { return this.compact; },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TopBarMenuButtonComponent.prototype, "_hasRoundedClass", {
-            get: function () { return this.compact; },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TopBarMenuButtonComponent.prototype, "_hasBtnLinkClass", {
-            get: function () { return !this.compact; },
-            enumerable: false,
-            configurable: true
-        });
-        TopBarMenuButtonComponent.prototype.ngOnInit = function () { };
-        TopBarMenuButtonComponent.prototype.ngOnDestroy = function () { };
-        return TopBarMenuButtonComponent;
-    }(_TopBarMenuButtonMixinBase));
-    TopBarMenuButtonComponent.decorators = [
-        { type: i0.Component, args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'button[seamTopBarMenuButton]',
-                    template: "<div class=\"d-flex flex-row\" *ngIf=\"!compact; else compactTpl\">\n  <div class=\"text-left flex-grow-1 text-truncate\">\n    <ng-template [ngTemplateOutlet]=\"$any(detailTpl)\"></ng-template>\n  </div>\n  <!-- Arrow Button -->\n  <div class=\"pl-2 d-flex flex-column\">\n    <div class=\"flex-grow-1\"></div>\n    <seam-icon class=\"d-block\" [icon]=\"faAngleDown\"></seam-icon>\n    <div class=\"flex-grow-1\"></div>\n  </div>\n</div>\n<ng-template #compactTpl>\n  <ng-container *ngIf=\"compactDetailTpl; else iconTpl\">\n    <ng-template [ngTemplateOutlet]=\"$any(compactDetailTpl)\"></ng-template>\n  </ng-container>\n  <ng-template #iconTpl>\n    <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n  </ng-template>\n</ng-template>\n",
-                    encapsulation: i0.ViewEncapsulation.None,
-                    exportAs: 'seamButton',
-                    // tslint:disable-next-line:use-input-property-decorator
-                    inputs: ['disabled'],
-                    // tslint:disable-next-line:use-host-property-decorator
-                    host: {
-                        'attr.type': 'button',
-                        'class': 'btn border text-decoration-none py-0 top-bar-menu-button',
-                        '[attr.aria-disabled]': 'disabled.toString()',
-                        '[attr.disabled]': 'disabled || null',
-                    },
-                    changeDetection: i0.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: i0.Input }],
-        compactDetailTpl: [{ type: i0.Input }],
-        compact: [{ type: i0.Input }],
-        profileIcon: [{ type: i0.Input }],
-        _hasCompactClass: [{ type: i0.HostBinding, args: ['class.top-bar-menu-button--compact',] }],
-        _hasPadding0Class: [{ type: i0.HostBinding, args: ['class.p-0',] }],
-        _hasRoundedClass: [{ type: i0.HostBinding, args: ['class.rounded',] }],
-        _hasBtnLinkClass: [{ type: i0.HostBinding, args: ['class.btn-link',] }]
-    };
-    __decorate([
-        core.InputBoolean()
-    ], TopBarMenuButtonComponent.prototype, "compact", void 0);
-
-    var TopBarTitleComponent = /** @class */ (function () {
-        function TopBarTitleComponent() {
-        }
-        TopBarTitleComponent.prototype.ngOnInit = function () { };
-        return TopBarTitleComponent;
-    }());
-    TopBarTitleComponent.decorators = [
-        { type: i0.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: i0.ViewEncapsulation.None,
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["seam-top-bar-title{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}\n"]
-                },] }
-    ];
-    TopBarTitleComponent.ctorParameters = function () { return []; };
-    TopBarTitleComponent.propDecorators = {
-        titleText: [{ type: i0.Input }],
-        subTitleText: [{ type: i0.Input }]
-    };
-
-    var TopBarItemDirective = /** @class */ (function () {
-        function TopBarItemDirective(template) {
-            this.template = template;
-            this.position = 'right';
-        }
-        Object.defineProperty(TopBarItemDirective.prototype, "seamTopBarItem", {
-            set: function (value) {
-                this.position = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return TopBarItemDirective;
-    }());
-    TopBarItemDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[seamTopBarItem]'
-                },] }
-    ];
-    TopBarItemDirective.ctorParameters = function () { return [
-        { type: i0.TemplateRef }
-    ]; };
-    TopBarItemDirective.propDecorators = {
-        seamTopBarItem: [{ type: i0.Input }]
-    };
-
-    var TopBarMenuBtnDetailDirective = /** @class */ (function () {
-        function TopBarMenuBtnDetailDirective(template) {
-            this.template = template;
-        }
-        return TopBarMenuBtnDetailDirective;
-    }());
-    TopBarMenuBtnDetailDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[seamTopBarMenuBtnDetail]'
-                },] }
-    ];
-    TopBarMenuBtnDetailDirective.ctorParameters = function () { return [
-        { type: i0.TemplateRef }
-    ]; };
-
-    var TopBarMenuDirective = /** @class */ (function () {
-        function TopBarMenuDirective(menu) {
-            this.menu = menu;
-        }
-        return TopBarMenuDirective;
-    }());
-    TopBarMenuDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: 'seam-menu[seamTopBarMenu]'
-                },] }
-    ];
-    TopBarMenuDirective.ctorParameters = function () { return [
-        { type: menu.MenuComponent, decorators: [{ type: i0.Self }] }
-    ]; };
-
-    var TopBarCompactMenuBtnDetailDirective = /** @class */ (function () {
-        function TopBarCompactMenuBtnDetailDirective(template) {
-            this.template = template;
-        }
-        return TopBarCompactMenuBtnDetailDirective;
-    }());
-    TopBarCompactMenuBtnDetailDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[seamTopBarCompactMenuBtnDetail]'
-                },] }
-    ];
-    TopBarCompactMenuBtnDetailDirective.ctorParameters = function () { return [
-        { type: i0.TemplateRef }
-    ]; };
-
-    var TopBarNavToggleBtnDetailDirective = /** @class */ (function () {
-        function TopBarNavToggleBtnDetailDirective(template) {
-            this.template = template;
-        }
-        return TopBarNavToggleBtnDetailDirective;
-    }());
-    TopBarNavToggleBtnDetailDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[seamTopBarNavToggleBtnDetail]'
-                },] }
-    ];
-    TopBarNavToggleBtnDetailDirective.ctorParameters = function () { return [
-        { type: i0.TemplateRef }
-    ]; };
-
-    /**
-     * Top bar of an app.
-     *
-     * The top bar is fairly opinionated, so most parts are not intended to be
-     * customized unless there is an input.
-     *
-     * > If you have to make a change and apply it externally with a css class or js
-     * > make sure there is an issue to get the feature changed, so we don't have
-     * > different modifications across our apps. Also, this will help make sure
-     * > your change should have even been done.
-     */
-    var TheSeamTopBarComponent = /** @class */ (function () {
-        function TheSeamTopBarComponent(_layout) {
-            this._layout = _layout;
-            /** @ignore */
-            this._ngUnsubscribe = new rxjs.Subject();
-            /** @ignore */
-            this.faBars = freeSolidSvgIcons.faBars;
-            /** Link target used when `logoHref` is specified. Defaults to `"_blank"` */
-            this.logoHrefTarget = '_blank';
-            /** Route to link to when `logo` is clicked. Defaults to `/`. */
-            this.logoRoute = '/';
-            /** Determines if the title should be displayed. */
-            this.hasTitle = false;
-            /** Determines if the top bar button should be displayed. */
-            this.hasTopBarMenuButton = true;
-            /** Icon to display on mobile to activate profile dropdown. Defaults to faUserCircle. */
-            this.profileIcon = freeRegularSvgIcons.faUserCircle;
-            /** Icon to display for mobile nav toggle. Defaults to faBars. */
-            this.toggleIcon = freeSolidSvgIcons.faBars;
-            /** Display nav toggle on either left or right side of top bar. Defaults to left. */
-            this.navToggleAlign = 'left';
-            /** @ignore */
-            this._leftItems = new rxjs.BehaviorSubject([]);
-            /** Additional templates to display on left side of top bar */
-            this.leftItems$ = this._leftItems.asObservable();
-            /** @ignore */
-            this._centerItems = new rxjs.BehaviorSubject([]);
-            /** Additional templates to display in center of top bar */
-            this.centerItems$ = this._centerItems.asObservable();
-            /** @ignore */
-            this._rightItems = new rxjs.BehaviorSubject([]);
-            /** Additional templates to display on right side of top bar */
-            this.rightItems$ = this._rightItems.asObservable();
-            this.isMobile$ = this._layout.isMobile$;
-        }
-        /** @ignore */
-        TheSeamTopBarComponent.prototype.ngOnInit = function () { };
-        /** @ignore */
-        TheSeamTopBarComponent.prototype.ngOnDestroy = function () {
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
-        };
-        /** @ignore */
-        TheSeamTopBarComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            if (this._topBarItems) {
-                this._topBarItems.changes.pipe(operators.startWith(undefined), operators.takeUntil(this._ngUnsubscribe), operators.map(function () {
-                    var _a;
-                    var items = ((_a = _this._topBarItems) === null || _a === void 0 ? void 0 : _a.toArray()) || [];
-                    var left = items.filter(function (i) { return i.position === 'left'; });
-                    var right = items.filter(function (i) { return i.position === 'right'; });
-                    var center = items.filter(function (i) { return i.position === 'center'; });
-                    _this._leftItems.next(left);
-                    _this._rightItems.next(right);
-                    _this._centerItems.next(center);
-                }), operators.shareReplay({ bufferSize: 1, refCount: true })).subscribe();
-            }
-        };
-        return TheSeamTopBarComponent;
-    }());
-    TheSeamTopBarComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'seam-top-bar',
-                    template: "<div class=\"top-bar--left d-flex\">\n  <!-- Nav Toggle -->\n  <ng-container *ngIf=\"navToggleAlign === 'left'\">\n    <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n  </ng-container>\n\n  <!-- Logo -->\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </a>\n  </div>\n\n  <ng-template #useLogoRoute>\n    <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n      [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </div>\n  </ng-template>\n\n  <ng-template #logoTpl>\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"logoSm ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </ng-template>\n\n  <!-- Title -->\n  <div class=\"d-flex flex-column\" *ngIf=\"hasTitle\">\n    <seam-top-bar-title\n      [titleText]=\"titleText\"\n      [subTitleText]=\"subTitleText\"\n      [class.ml-2]=\"isMobile$ | async\">\n    </seam-top-bar-title>\n  </div>\n\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--left mr-2\">\n    <ng-container *ngFor=\"let item of leftItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"top-bar--center\">\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--center mr-2\">\n    <ng-container *ngFor=\"let item of centerItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"top-bar--right d-flex\">\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--right mr-2\">\n    <ng-container *ngFor=\"let item of rightItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n\n  <!-- Menu -->\n  <button\n    *ngIf=\"hasTopBarMenuButton\"\n    seamTopBarMenuButton\n    [seamMenuToggle]=\"_topBarMenu?.menu\"\n    [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n    [compactDetailTpl]=\"_topBarCompactMenuBtnDetailTpl?.template\"\n    [compact]=\"isMobile$ | async\"\n    [profileIcon]=\"profileIcon\">\n  </button>\n\n  <ng-container *ngIf=\"navToggleAlign === 'right'\">\n    <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #navToggle>\n  <div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n    <ng-container *ngIf=\"_topBarNavToggleBtnDetailTpl; else iconBtn\">\n      <button seamButton seamBaseLayoutNavToggle>\n        <ng-template [ngTemplateOutlet]=\"_topBarNavToggleBtnDetailTpl?.template\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #iconBtn>\n      <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"toggleIcon\" iconType=\"borderless-styled-square\"></button>\n    </ng-template>\n  </div>\n</ng-template>\n\n",
-                    encapsulation: i0.ViewEncapsulation.None,
-                    exportAs: 'seamTopBar',
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar--left{flex-grow:1}.top-bar-items{display:flex;align-items:center}\n"]
-                },] }
-    ];
-    TheSeamTopBarComponent.ctorParameters = function () { return [
-        { type: layout.TheSeamLayoutService }
-    ]; };
-    TheSeamTopBarComponent.propDecorators = {
-        _topBarMenu: [{ type: i0.ContentChild, args: [TopBarMenuDirective, { static: true },] }],
-        _topBarItems: [{ type: i0.ContentChildren, args: [TopBarItemDirective,] }],
-        _topBarMenuBtnDetailTpl: [{ type: i0.ContentChild, args: [TopBarMenuBtnDetailDirective,] }],
-        _topBarCompactMenuBtnDetailTpl: [{ type: i0.ContentChild, args: [TopBarCompactMenuBtnDetailDirective,] }],
-        _topBarNavToggleBtnDetailTpl: [{ type: i0.ContentChild, args: [TopBarNavToggleBtnDetailDirective,] }],
-        logo: [{ type: i0.Input }],
-        logoSm: [{ type: i0.Input }],
-        logoHref: [{ type: i0.Input }],
-        logoHrefTarget: [{ type: i0.Input }],
-        logoRoute: [{ type: i0.Input }],
-        hasTitle: [{ type: i0.Input }],
-        titleText: [{ type: i0.Input }],
-        subTitleText: [{ type: i0.Input }],
-        hasTopBarMenuButton: [{ type: i0.Input }],
-        profileIcon: [{ type: i0.Input }],
-        toggleIcon: [{ type: i0.Input }],
-        navToggleAlign: [{ type: i0.Input }]
-    };
-    __decorate([
-        core.InputBoolean()
-    ], TheSeamTopBarComponent.prototype, "hasTitle", void 0);
-    __decorate([
-        core.InputBoolean()
-    ], TheSeamTopBarComponent.prototype, "hasTopBarMenuButton", void 0);
-
-    var TheSeamTopBarModule = /** @class */ (function () {
-        function TheSeamTopBarModule() {
-        }
-        return TheSeamTopBarModule;
-    }());
-    TheSeamTopBarModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        TheSeamTopBarComponent,
-                        TopBarTitleComponent,
-                        TopBarMenuButtonComponent,
-                        TopBarMenuDirective,
-                        TopBarItemDirective,
-                        TopBarMenuBtnDetailDirective,
-                        TopBarCompactMenuBtnDetailDirective,
-                        TopBarNavToggleBtnDetailDirective
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        layout.TheSeamLayoutModule,
-                        buttons.TheSeamButtonsModule,
-                        icon.TheSeamIconModule,
-                        menu.TheSeamMenuModule,
-                        TheSeamBaseLayoutModule,
-                        router.RouterModule
-                    ],
-                    exports: [
-                        TheSeamTopBarComponent,
-                        TopBarMenuButtonComponent,
-                        TopBarMenuDirective,
-                        menu.TheSeamMenuModule,
-                        TopBarItemDirective,
-                        TopBarMenuBtnDetailDirective,
-                        TopBarCompactMenuBtnDetailDirective,
-                        TopBarNavToggleBtnDetailDirective
-                    ]
-                },] }
-    ];
-
-    var fader = animations.trigger('routeAnimations', [
-        animations.transition('* <=> *', [
-            // Set a default  style for enter and leave
-            animations.query(':enter, :leave', [
-                animations.style({
-                    position: 'absolute',
-                    left: 0,
-                    width: '100%',
-                    opacity: 0,
-                    transform: 'scale(0) translateY(100%)',
-                }),
-            ], { optional: true }),
-            // Animate the new page in
-            animations.query(':enter', [
-                animations.animate('600ms ease', animations.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', [
-    //     ])
-    //   ])
-    var slider = animations.trigger('routeAnimations', [
-        animations.transition('* => isLeft', [
-            animations.query('.router-container :enter, .router-container :leave', [
-                animations.style({
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%'
-                })
-            ], { optional: true }),
-            animations.query('.router-container :enter', [
-                animations.style({ left: '-100%' })
-            ], { optional: true }),
-            animations.query('.hierarchy-router-outlet--content', [
-                animations.style({ left: '0%', position: 'absolute' })
-            ], { optional: true }),
-            animations.group([
-                animations.query('.router-container :leave', [
-                    animations.animate('1000ms ease', animations.style({ left: '100%' }))
-                ], { optional: true }),
-                animations.query('.router-container :enter', [
-                    animations.animate('1000ms ease', animations.style({ left: '0%' }))
-                ], { optional: true }),
-                animations.query('.hierarchy-router-outlet--content', [
-                    animations.animate('1000ms ease', animations.style({ left: '-100%' }))
-                ], { optional: true }),
-            ]),
-            // Normalize the page style... Might not be necessary
-            // Required only if you have child animations on the page
-            animations.query('.router-container :leave', animations.animateChild(), { optional: true }),
-            animations.query('.router-container :enter', animations.animateChild(), { optional: true }),
-        ]),
-        animations.transition('* => isRight', [
-            animations.query('.router-container :enter, .router-container :leave', [
-                animations.style({
-                    position: 'absolute',
-                    top: 0,
-                    right: 0,
-                    width: '100%'
-                })
-            ], { optional: true }),
-            animations.query('.router-container :enter', [
-                animations.style({ right: '-100%' })
-            ], { optional: true }),
-            animations.query('.hierarchy-router-outlet--content', [
-                animations.style({ left: '0%', position: 'absolute' })
-            ], { optional: true }),
-            animations.group([
-                animations.query('.router-container :leave', [
-                    animations.animate('1000ms ease', animations.style({ right: '100%' }))
-                ], { optional: true }),
-                animations.query('.router-container :enter', [
-                    animations.animate('1000ms ease', animations.style({ right: '0%' }))
-                ], { optional: true }),
-                animations.query('.hierarchy-router-outlet--content', [
-                    animations.animate('1000ms ease', animations.style({ left: '-100%' }))
-                ], { optional: true }),
-            ]),
-            // Normalize the page style... Might not be necessary
-            // Required only if you have child animations on the page
-            animations.query('.router-container :leave', animations.animateChild(), { optional: true }),
-            animations.query('.router-container :enter', animations.animateChild(), { optional: true }),
-        ]),
-        animations.transition('isRight => *', [
-            animations.query('.router-container :enter, .router-container :leave', [
-                animations.style({
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%'
-                })
-            ], { optional: true }),
-            animations.query('.router-container :enter', [
-                animations.style({ left: '-100%' })
-            ], { optional: true }),
-            animations.query('.hierarchy-router-outlet--content', [
-                animations.style({ left: '0%', position: 'absolute' })
-            ], { optional: true }),
-            animations.group([
-                animations.query('.router-container :leave', [
-                    animations.animate('1000ms ease', animations.style({ left: '100%' }))
-                ], { optional: true }),
-                animations.query('.router-container :enter', [
-                    animations.animate('1000ms ease', animations.style({ left: '0%' }))
-                ], { optional: true }),
-                animations.query('.hierarchy-router-outlet--content', [
-                    animations.animate('1000ms ease', animations.style({ left: '-100%' }))
-                ], { optional: true }),
-            ]),
-            // Normalize the page style... Might not be necessary
-            // Required only if you have child animations on the page
-            animations.query('.router-container :leave', animations.animateChild(), { optional: true }),
-            animations.query('.router-container :enter', animations.animateChild(), { optional: true }),
-        ]),
-        animations.transition('isLeft => *', [
-            animations.query('.router-container :enter, .router-container :leave', [
-                animations.style({
-                    position: 'absolute',
-                    top: 0,
-                    right: 0,
-                    width: '100%'
-                })
-            ], { optional: true }),
-            animations.query('.router-container :enter', [
-                animations.style({ right: '-100%' })
-            ], { optional: true }),
-            animations.group([
-                animations.query('.router-container :leave', [
-                    animations.animate('1000ms ease', animations.style({ right: '100%' }))
-                ], { optional: true }),
-                animations.query('.router-container :enter', [
-                    animations.animate('1000ms ease', animations.style({ right: '0%' }))
-                ], { optional: true })
-            ]),
-            // Normalize the page style... Might not be necessary
-            // Required only if you have child animations on the page
-            animations.query('.router-container :leave', animations.animateChild(), { optional: true }),
-            animations.query('.router-container :enter', animations.animateChild(), { optional: true }),
-        ])
-    ]);
-    var transformer = animations.trigger('routeAnimations', [
-        animations.transition('* => isLeft', transformTo({ x: -100, y: -100, rotate: -720 })),
-        animations.transition('* => isRight', transformTo({ x: 100, y: -100, rotate: 90 })),
-        animations.transition('isRight => *', transformTo({ x: -100, y: -100, rotate: 360 })),
-        animations.transition('isLeft => *', transformTo({ x: 100, y: -100, rotate: -360 }))
-    ]);
-    function transformTo(_a) {
-        var _b = _a.x, x = _b === void 0 ? 100 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.rotate, rotate = _d === void 0 ? 0 : _d;
-        var optional = { optional: true };
-        return [
-            animations.query(':enter, :leave', [
-                animations.style({
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%'
-                })
-            ], optional),
-            animations.query(':enter', [
-                animations.style({ transform: "translate(" + x + "%, " + y + "%) rotate(" + rotate + "deg)" })
-            ], { optional: true }),
-            animations.group([
-                animations.query(':leave', [
-                    animations.animate('600ms ease-out', animations.style({ transform: "translate(" + x + "%, " + y + "%) rotate(" + rotate + "deg)" }))
-                ], optional),
-                animations.query(':enter', [
-                    animations.animate('600ms ease-out', animations.style({ transform: "translate(0, 0) rotate(0)" }))
-                ], { optional: true })
-            ]),
-        ];
-    }
-    var stepper = animations.trigger('routeAnimations', [
-        animations.transition('* <=> *', [
-            animations.query(':enter, :leave', [
-                animations.style({
-                    position: 'absolute',
-                    left: 0,
-                    width: '100%',
-                }),
-            ], { optional: true }),
-            animations.group([
-                animations.query(':enter', [
-                    animations.animate('2000ms ease', animations.keyframes([
-                        animations.style({ transform: 'scale(0) translateX(100%)', offset: 0 }),
-                        animations.style({ transform: 'scale(0.5) translateX(25%)', offset: 0.3 }),
-                        animations.style({ transform: 'scale(1) translateX(0%)', offset: 1 }),
-                    ])),
-                ], { optional: true }),
-                animations.query(':leave', [
-                    animations.animate('2000ms ease', animations.keyframes([
-                        animations.style({ transform: 'scale(1)', offset: 0 }),
-                        animations.style({ transform: 'scale(0.5) translateX(-25%) rotate(0)', offset: 0.35 }),
-                        animations.style({ opacity: 0, transform: 'translateX(-50%) rotate(-180deg) scale(6)', offset: 1 }),
-                    ])),
-                ], { optional: true })
-            ]),
-        ])
-    ]);
-    var sideToSide = animations.trigger('routeAnimations', [
-        animations.transition('* => *', [
-            animations.style({
-                position: 'fixed',
-                width: '100%',
-                transform: 'translateX(-100%)'
-            }),
-            animations.animate('1000ms ease', animations.style({ transform: 'translateX(0%)' }))
-        ]),
-        animations.transition(':leave', [
-            animations.style({
-                position: 'fixed',
-                width: '100%',
-                transform: 'translateX(0%)'
-            }),
-            animations.animate('1000ms ease', animations.style({ transform: 'translateX(-100%)' }))
-        ])
-    ]);
-
-    function routeChanges(router$1) {
-        return router$1.events.pipe(operators.filter(function (event) { return event instanceof router.NavigationStart || event instanceof router.NavigationEnd; }), operators.distinctUntilChanged(function (x, y) { return x.id === y.id; }), operators.map(function (event) { return ({ 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.
-    //
-    var _uid = 0;
-    var HierarchyRouterOutletComponent = /** @class */ (function () {
-        function HierarchyRouterOutletComponent(_route, _router) {
-            this._route = _route;
-            this._router = _router;
-            this._uid = _uid++;
-            this._ngUnsubscribe = new rxjs.Subject();
-            this.animState = 'isRight';
-            // animState = ''
-            this.outletActive = false;
-            this.ngContentVisible = true;
-            this._router.events.pipe(operators.filter(function (event) { return event instanceof router.NavigationEnd; }), 
-            // tap(v => console.log(`_hasChildren()[${this._uid}]`, this._hasChildren())),
-            operators.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))
-        }
-        HierarchyRouterOutletComponent.prototype.ngOnInit = function () { };
-        HierarchyRouterOutletComponent.prototype.ngOnDestroy = function () {
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
-        };
-        HierarchyRouterOutletComponent.prototype._hasChildren = function () {
-            var count = this._route.pathFromRoot.length - 1;
-            var 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;
-        };
-        HierarchyRouterOutletComponent.prototype.prepareRoute = function (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
-        };
-        HierarchyRouterOutletComponent.prototype.outletActivate = function (event) {
-            // console.log(`outletActivate[${this._uid}]`, event)
-            this.outletActive = true;
-        };
-        HierarchyRouterOutletComponent.prototype.outletDeactivate = function (event) {
-            // console.log(`outletDeactivate[${this._uid}]`, event)
-            this.outletActive = false;
-        };
-        HierarchyRouterOutletComponent.prototype.routeAnimationsStart = function (event) {
-            // console.log('routeAnimationsStart', event)
-            this.ngContentVisible = true;
-        };
-        HierarchyRouterOutletComponent.prototype.routeAnimationsDone = function (event) {
-            // console.log('routeAnimationsDone', event)
-            this.ngContentVisible = !this.outletActive;
-        };
-        return HierarchyRouterOutletComponent;
-    }());
-    HierarchyRouterOutletComponent.decorators = [
-        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:block;height:100%}:host ::ng-deep router-outlet+*{background-color:#fff;height:100%}\n"]
-                },] }
-    ];
-    HierarchyRouterOutletComponent.ctorParameters = function () { return [
-        { type: router.ActivatedRoute },
-        { type: router.Router }
-    ]; };
-
-    var HierarchyLevelResolver = /** @class */ (function () {
-        function HierarchyLevelResolver() {
-        }
-        HierarchyLevelResolver.prototype.resolve = function (route, state) {
-            // console.log('[HierarchyLevelResolver]', route)
-            // console.log('[HierarchyLevelResolver]', state)
-            return this._getMaxHierLevel(route);
-        };
-        HierarchyLevelResolver.prototype._getMaxHierLevel = function (route) {
-            var curr = route;
-            while (curr.parent) {
-                curr = curr.parent;
-                if (curr.data['hierLevel']) {
-                    return curr.data['hierLevel'] + 1;
-                }
-            }
-            return 0;
-        };
-        return HierarchyLevelResolver;
-    }());
-    HierarchyLevelResolver.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function HierarchyLevelResolver_Factory() { return new HierarchyLevelResolver(); }, token: HierarchyLevelResolver, providedIn: "root" });
-    HierarchyLevelResolver.decorators = [
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
-    ];
-    HierarchyLevelResolver.ctorParameters = function () { return []; };
-
-    var TheSeamDynamicRouterModule = /** @class */ (function () {
-        function TheSeamDynamicRouterModule() {
-        }
-        return TheSeamDynamicRouterModule;
-    }());
-    TheSeamDynamicRouterModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        HierarchyRouterOutletComponent
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        router.RouterModule
-                    ],
-                    exports: [
-                        HierarchyRouterOutletComponent
-                    ]
-                },] }
-    ];
-
-    var TheSeamSchemaFormCheckboxComponent = /** @class */ (function () {
-        function TheSeamSchemaFormCheckboxComponent(jsf) {
-            this.jsf = jsf;
-            this.controlDisabled = false;
-            this.boundControl = false;
-            this.trueValue = true;
-            this.falseValue = false;
-        }
-        TheSeamSchemaFormCheckboxComponent.prototype.ngOnInit = function () {
-            this.options = this.layoutNode.options || {};
-            this.jsf.initializeControl(this);
-            if (this.controlValue === null || this.controlValue === undefined) {
-                this.controlValue = this.options.title;
-            }
-        };
-        TheSeamSchemaFormCheckboxComponent.prototype.updateValue = function (event) {
-            event.preventDefault();
-            this.jsf.updateValue(this, event.target.checked ? this.trueValue : this.falseValue);
-        };
-        Object.defineProperty(TheSeamSchemaFormCheckboxComponent.prototype, "isChecked", {
-            get: function () {
-                return this.jsf.getFormControlValue(this) === this.trueValue;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return TheSeamSchemaFormCheckboxComponent;
-    }());
-    TheSeamSchemaFormCheckboxComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: core$1.JsonSchemaFormService }
-    ]; };
-    TheSeamSchemaFormCheckboxComponent.propDecorators = {
-        layoutNode: [{ type: i0.Input }],
-        layoutIndex: [{ type: i0.Input }],
-        dataIndex: [{ type: i0.Input }]
-    };
-
-    var TheSeamSchemaFormInputComponent = /** @class */ (function () {
-        function TheSeamSchemaFormInputComponent(jsf) {
-            this.jsf = jsf;
-            this.controlDisabled = false;
-            this.boundControl = false;
-            this.autoCompleteList = [];
-        }
-        TheSeamSchemaFormInputComponent.prototype.ngOnInit = function () {
-            this.options = this.layoutNode.options || {};
-            this.jsf.initializeControl(this);
-        };
-        TheSeamSchemaFormInputComponent.prototype.updateValue = function (event) {
-            this.jsf.updateValue(this, event.target.value);
-        };
-        return TheSeamSchemaFormInputComponent;
-    }());
-    TheSeamSchemaFormInputComponent.decorators = [
-        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:block}\n"]
-                },] }
-    ];
-    TheSeamSchemaFormInputComponent.ctorParameters = function () { return [
-        { type: core$1.JsonSchemaFormService }
-    ]; };
-    TheSeamSchemaFormInputComponent.propDecorators = {
-        layoutNode: [{ type: i0.Input }],
-        layoutIndex: [{ type: i0.Input }],
-        dataIndex: [{ type: i0.Input }]
-    };
-
-    var TheSeamSchemaFormNumberComponent = /** @class */ (function () {
-        function TheSeamSchemaFormNumberComponent(jsf) {
-            this.jsf = jsf;
-            this.controlDisabled = false;
-            this.boundControl = false;
-            this.allowNegative = true;
-            this.allowDecimal = true;
-            this.allowExponents = false;
-            this.lastValidNumber = '';
-        }
-        TheSeamSchemaFormNumberComponent.prototype.ngOnInit = function () {
-            this.options = this.layoutNode.options || {};
-            this.jsf.initializeControl(this);
-            if (this.layoutNode.dataType === 'integer') {
-                this.allowDecimal = false;
-            }
-        };
-        TheSeamSchemaFormNumberComponent.prototype.updateValue = function (event) {
-            this.jsf.updateValue(this, event.target.value);
-        };
-        return TheSeamSchemaFormNumberComponent;
-    }());
-    TheSeamSchemaFormNumberComponent.decorators = [
-        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:block}\n"]
-                },] }
-    ];
-    TheSeamSchemaFormNumberComponent.ctorParameters = function () { return [
-        { type: core$1.JsonSchemaFormService }
-    ]; };
-    TheSeamSchemaFormNumberComponent.propDecorators = {
-        layoutNode: [{ type: i0.Input }],
-        layoutIndex: [{ type: i0.Input }],
-        dataIndex: [{ type: i0.Input }]
-    };
-
-    var TheSeamSchemaFormSelectComponent = /** @class */ (function () {
-        function TheSeamSchemaFormSelectComponent(jsf) {
-            this.jsf = jsf;
-            this.controlDisabled = false;
-            this.boundControl = false;
-            this.selectList = [];
-            this.isArray = core$1.isArray;
-        }
-        TheSeamSchemaFormSelectComponent.prototype.ngOnInit = function () {
-            this.options = this.layoutNode.options || {};
-            this.selectList = core$1.buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, !!this.options.required, !!this.options.flatList);
-            this.jsf.initializeControl(this);
-        };
-        TheSeamSchemaFormSelectComponent.prototype.updateValue = function (event) {
-            this.jsf.updateValue(this, event.value);
-        };
-        return TheSeamSchemaFormSelectComponent;
-    }());
-    TheSeamSchemaFormSelectComponent.decorators = [
-        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:block}\n"]
-                },] }
-    ];
-    TheSeamSchemaFormSelectComponent.ctorParameters = function () { return [
-        { type: core$1.JsonSchemaFormService }
-    ]; };
-    TheSeamSchemaFormSelectComponent.propDecorators = {
-        layoutNode: [{ type: i0.Input }],
-        layoutIndex: [{ type: i0.Input }],
-        dataIndex: [{ type: i0.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.
-    var TheSeamSchemaFormSubmitSplitComponent = /** @class */ (function () {
-        function TheSeamSchemaFormSubmitSplitComponent(jsf) {
-            this.jsf = jsf;
-            /** @ignore */
-            this._ngUnsubscribe = new rxjs.Subject();
-            this.controlDisabled = false;
-            this.boundControl = false;
-            this._buttonLabel = '';
-            this._dropdownDisabled = false;
-            this._selectList = [];
-        }
-        /** @ignore */
-        TheSeamSchemaFormSubmitSplitComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            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(function (isValid) { return _this.controlDisabled = !isValid; });
-            }
-            if (this.controlValue === null || this.controlValue === undefined) {
-                this.controlValue = this.options.title;
-            }
-            if (core$1.hasOwn(this.options, 'title')) {
-                this._buttonLabel = this.options.title;
-            }
-            this._initDropdown();
-            // console.log('this', this)
-        };
-        /** @ignore */
-        TheSeamSchemaFormSubmitSplitComponent.prototype.ngOnDestroy = function () {
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
-        };
-        TheSeamSchemaFormSubmitSplitComponent.prototype.updateValue = function (event) {
-            if (typeof this.options.onClick === 'function') {
-                this.options.onClick(event);
-            }
-            else {
-                this.jsf.updateValue(this, event.target.value);
-            }
-        };
-        TheSeamSchemaFormSubmitSplitComponent.prototype._initDropdown = function () {
-            var _this = this;
-            var _a;
-            if (!core$1.hasOwn(this.layoutNode, 'items') || !(this.layoutNode.items || []).length) {
-                return;
-            }
-            if (i0.isDevMode()) {
-                if (this.layoutNode.items.length > 1) {
-                    console.warn("TheSeamSchemaFormSubmitSplitComponent only supports one item." +
-                        " items after index 0 will be ignored.");
-                }
-            }
-            var idx = 0;
-            var 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);
-            var items = core$1.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?
-            var dropdownControl = this._getDropdownControl();
-            if (!dropdownControl) {
-                return;
-            }
-            utils.observeControlValue(dropdownControl).pipe(operators.takeUntil(this._ngUnsubscribe)).subscribe(function (value) {
-                _this._setSelectListCheckedProp(value);
-                _this._selectedItem = _this._getSelectedItem();
-            });
-            utils.observeControlStatus(dropdownControl).pipe(operators.takeUntil(this._ngUnsubscribe)).subscribe(function (value) {
-                _this._dropdownDisabled = dropdownControl.disabled;
-            });
-        };
-        TheSeamSchemaFormSubmitSplitComponent.prototype._getDropdownControl = function () {
-            return this._dropdownObj.formControl;
-        };
-        TheSeamSchemaFormSubmitSplitComponent.prototype._setSelectListCheckedProp = function (value) {
-            var e_1, _b;
-            var items = this._selectList;
-            try {
-                for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
-                    var item = items_1_1.value;
-                    if (item.value === value) {
-                        item.checked = true;
-                    }
-                    else if (item.checked) {
-                        item.checked = false;
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (items_1_1 && !items_1_1.done && (_b = items_1.return)) _b.call(items_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            this._selectList = __spreadArray([], __read(items));
-        };
-        TheSeamSchemaFormSubmitSplitComponent.prototype._getSelectedItem = function () {
-            return (this._selectList || []).find(function (x) { return x.checked === true; });
-        };
-        TheSeamSchemaFormSubmitSplitComponent.prototype._setDropdownValue = function (value) {
-            var formControl = this._getDropdownControl();
-            formControl === null || formControl === void 0 ? void 0 : formControl.setValue(value);
-        };
-        return TheSeamSchemaFormSubmitSplitComponent;
-    }());
-    TheSeamSchemaFormSubmitSplitComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: core$1.JsonSchemaFormService }
-    ]; };
-    TheSeamSchemaFormSubmitSplitComponent.propDecorators = {
-        layoutNode: [{ type: i0.Input }],
-        layoutIndex: [{ type: i0.Input }],
-        dataIndex: [{ type: i0.Input }]
-    };
-
-    var TheSeamSchemaFormFrameworkComponent = /** @class */ (function () {
-        function TheSeamSchemaFormFrameworkComponent() {
-        }
-        return TheSeamSchemaFormFrameworkComponent;
-    }());
-    TheSeamSchemaFormFrameworkComponent.decorators = [
-        { type: i0.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: i0.Input }],
-        layoutIndex: [{ type: i0.Input }],
-        dataIndex: [{ type: i0.Input }]
-    };
-
-    var TheSeamFramework = /** @class */ (function (_super) {
-        __extends(TheSeamFramework, _super);
-        function TheSeamFramework() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.name = 'seam-framework';
-            _this.framework = TheSeamSchemaFormFrameworkComponent;
-            _this.widgets = {
-                'checkbox': TheSeamSchemaFormCheckboxComponent,
-                // 'submit': TheSeamSchemaFormSubmitComponent,
-                'submit': TheSeamSchemaFormSubmitSplitComponent,
-                'text': TheSeamSchemaFormInputComponent,
-                'number': TheSeamSchemaFormNumberComponent,
-                'select': TheSeamSchemaFormSelectComponent
-            };
-            return _this;
-        }
-        return TheSeamFramework;
-    }(core$1.Framework));
-    TheSeamFramework.decorators = [
-        { type: i0.Injectable }
-    ];
-
-    var TheSeamSchemaFormSubmitComponent = /** @class */ (function () {
-        function TheSeamSchemaFormSubmitComponent(jsf) {
-            this.jsf = jsf;
-            this.controlDisabled = false;
-            this.boundControl = false;
-        }
-        TheSeamSchemaFormSubmitComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.options = this.layoutNode.options || {};
-            this.jsf.initializeControl(this);
-            if (core$1.hasOwn(this.options, 'disabled')) {
-                this.controlDisabled = this.options.disabled;
-            }
-            else if (this.jsf.formOptions.disableInvalidSubmit) {
-                this.controlDisabled = !this.jsf.isValid;
-                this.jsf.isValidChanges.subscribe(function (isValid) { return _this.controlDisabled = !isValid; });
-            }
-            if (this.controlValue === null || this.controlValue === undefined) {
-                this.controlValue = this.options.title;
-            }
-        };
-        TheSeamSchemaFormSubmitComponent.prototype.updateValue = function (event) {
-            if (typeof this.options.onClick === 'function') {
-                this.options.onClick(event);
-            }
-            else {
-                this.jsf.updateValue(this, event.target.value);
-            }
-        };
-        return TheSeamSchemaFormSubmitComponent;
-    }());
-    TheSeamSchemaFormSubmitComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: core$1.JsonSchemaFormService }
-    ]; };
-    TheSeamSchemaFormSubmitComponent.propDecorators = {
-        layoutNode: [{ type: i0.Input }],
-        layoutIndex: [{ type: i0.Input }],
-        dataIndex: [{ type: i0.Input }]
-    };
-
-    var controls = [
-        TheSeamSchemaFormCheckboxComponent,
-        TheSeamSchemaFormSubmitComponent,
-        TheSeamSchemaFormSelectComponent,
-        TheSeamSchemaFormInputComponent,
-        TheSeamSchemaFormNumberComponent,
-        TheSeamSchemaFormSubmitSplitComponent
-    ];
-    var TheSeamSchemaFormControlsModule = /** @class */ (function () {
-        function TheSeamSchemaFormControlsModule() {
-        }
-        return TheSeamSchemaFormControlsModule;
-    }());
-    TheSeamSchemaFormControlsModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: __spreadArray([], __read(controls)),
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        core$1.JsonSchemaFormModule,
-                        formField.TheSeamFormFieldModule,
-                        checkbox.TheSeamCheckboxModule,
-                        menu.TheSeamMenuModule,
-                        buttons.TheSeamButtonsModule,
-                        ngSelect.NgSelectModule
-                    ],
-                    exports: __spreadArray(__spreadArray([], __read(controls)), [
-                        core$1.JsonSchemaFormModule
-                    ]),
-                    entryComponents: __spreadArray([], __read(controls))
-                },] }
-    ];
-
-    var TheSeamSchemaFormModule = /** @class */ (function () {
-        function TheSeamSchemaFormModule() {
-        }
-        return TheSeamSchemaFormModule;
-    }());
-    TheSeamSchemaFormModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        TheSeamSchemaFormFrameworkComponent
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        core$1.JsonSchemaFormModule,
-                        TheSeamSchemaFormControlsModule,
-                        core$1.WidgetLibraryModule,
-                    ],
-                    providers: [
-                        core$1.JsonSchemaFormService,
-                        core$1.FrameworkLibraryService,
-                        core$1.WidgetLibraryService,
-                        { provide: core$1.Framework, useClass: TheSeamFramework, multi: true }
-                    ],
-                    exports: [
-                        TheSeamSchemaFormFrameworkComponent,
-                        core$1.JsonSchemaFormModule
-                    ],
-                    entryComponents: [
-                        TheSeamSchemaFormFrameworkComponent
-                    ]
-                },] }
-    ];
-
-    function isHorizontalNavItemType(item, type) {
-        return item.itemType === type;
-    }
-    function isHorizontalNavItemActive(item) {
-        var _a, _b;
-        return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.active) !== null && _b !== void 0 ? _b : false;
-    }
-    function isHorizontalNavItemExpanded(item) {
-        var _a, _b;
-        return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.expanded) !== null && _b !== void 0 ? _b : false;
-    }
-    function isHorizontalNavItemFocused(item) {
-        var _a, _b;
-        return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.focused) !== null && _b !== void 0 ? _b : false;
-    }
-    function horizontalNavItemHasChildren(item) {
-        return horizontalNavItemCanHaveChildren(item) && utils.hasProperty(item, 'children') && item.children.length > 0;
-    }
-    function horizontalNavItemCanHaveChildren(item) {
-        return isHorizontalNavItemType(item, 'basic') || isHorizontalNavItemType(item, 'link');
-    }
-    function horizontalNavItemHasActiveChild(item) {
-        var e_1, _c;
-        if (!horizontalNavItemHasChildren(item)) {
-            return false;
-        }
-        try {
-            for (var _d = __values(item.children), _e = _d.next(); !_e.done; _e = _d.next()) {
-                var child = _e.value;
-                if (getHorizontalNavItemStateProp(child, 'active') || horizontalNavItemHasActiveChild(child)) {
-                    return true;
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        return false;
-    }
-    function horizontalNavItemHasExpandedChild(item) {
-        var e_2, _c;
-        if (!horizontalNavItemHasChildren(item)) {
-            return false;
-        }
-        try {
-            for (var _d = __values(item.children), _e = _d.next(); !_e.done; _e = _d.next()) {
-                var child = _e.value;
-                if (getHorizontalNavItemStateProp(child, 'expanded')) {
-                    return true;
-                }
-            }
-        }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-        finally {
-            try {
-                if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
-            }
-            finally { if (e_2) throw e_2.error; }
-        }
-        return false;
-    }
-    function horizontalNavItemCanBeActive(item) {
-        return isHorizontalNavItemType(item, 'basic') || isHorizontalNavItemType(item, 'link');
-    }
-    function horizontalNavItemCanExpand(item) {
-        return horizontalNavItemCanHaveChildren(item);
-    }
-    function findHorizontalNavLinkItems(items) {
-        var linkItems = [];
-        var _fn = function (_items) {
-            var e_3, _c;
-            try {
-                for (var _items_1 = __values(_items), _items_1_1 = _items_1.next(); !_items_1_1.done; _items_1_1 = _items_1.next()) {
-                    var item = _items_1_1.value;
-                    if (isHorizontalNavItemType(item, 'link')) {
-                        linkItems.push(item);
-                    }
-                    if (horizontalNavItemCanHaveChildren(item) && utils.hasProperty(item, 'children')) {
-                        _fn(item.children);
-                    }
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (_items_1_1 && !_items_1_1.done && (_c = _items_1.return)) _c.call(_items_1);
-                }
-                finally { if (e_3) throw e_3.error; }
-            }
-        };
-        _fn(items);
-        return linkItems;
-    }
-    function setHorizontalNavItemStateProp(item, prop, value) {
-        if (utils.hasProperty(item, '__state')) {
-            item.__state[prop] = value;
-        }
-    }
-    function getHorizontalNavItemStateProp(item, prop) {
-        return setDefaultHorizontalNavItemState(item).__state[prop];
-    }
-    function setDefaultHorizontalNavItemState(item) {
-        if (utils.hasProperty(item, '__state')) {
-            return item;
-        }
-        item.__state = {
-            active: false,
-            expanded: false,
-            focused: false
-        };
-        // TODO: See if there is a nice way to fix the typing for this.
-        return item;
-    }
-    function areSameHorizontalNavItem(item1, item2) {
-        if (utils.isNullOrUndefined(item1) || utils.isNullOrUndefined(item2)) {
-            return false;
-        }
-        if (item1.itemType !== item2.itemType) {
-            return false;
-        }
-        if (isHorizontalNavItemType(item1, 'title') && isHorizontalNavItemType(item2, 'title')) {
-            return item1.label === item2.label;
-        }
-        else if (isHorizontalNavItemType(item1, 'divider') && isHorizontalNavItemType(item2, 'divider')) {
-            return item1.label === item2.label;
-        }
-        else if (isHorizontalNavItemType(item1, 'basic') && isHorizontalNavItemType(item2, 'basic')) {
-            return item1.label === item2.label;
-        }
-        else if (isHorizontalNavItemType(item1, 'link') && isHorizontalNavItemType(item2, 'link')) {
-            return item1.label === item2.label && item1.link === item2.link;
-        }
-        else if (isHorizontalNavItemType(item1, 'button') && isHorizontalNavItemType(item2, 'button')) {
-            return item1.onClick === item2.onClick;
-        }
-        return false;
-    }
-
-    var TheSeamNavService = /** @class */ (function () {
-        function TheSeamNavService(_router) {
-            this._router = _router;
-            this._updatingCount = new rxjs.BehaviorSubject(0);
-            this.itemChanged = new rxjs.Subject();
-            this.loading$ = this._updatingCount.pipe(operators.map(function (count) { return count > 0; }), operators.distinctUntilChanged(), operators.shareReplay({ bufferSize: 1, refCount: true }));
-        }
-        TheSeamNavService.prototype.createItemsObservable = function (items) {
-            var _this = this;
-            return rxjs.defer(function () {
-                _this.updateItemsStates(items);
-                _this.updateRouterFocusedItem(items);
-                return new rxjs.Observable(function (subscriber) {
-                    var stateChangeSub = _this.itemChanged.pipe(operators.switchMap(function (change) {
-                        if (change.prop === 'focused' && change.newValue) {
-                            _this.updateFocusedItem(items, change.item);
-                        }
-                        return _this.loading$.pipe(operators.filter(function (loading) { return !loading; }));
-                    })).subscribe(function () {
-                        subscriber.next(items);
-                    });
-                    try {
-                        _this.updateItemsStates(items);
-                    }
-                    catch (err) {
-                        subscriber.error(err);
-                    }
-                    var routeChangeSub = _this._router.events.pipe(operators.filter(function (event) { return event instanceof router.NavigationEnd; })).subscribe(function (event) {
-                        try {
-                            _this.updateItemsStates(items);
-                            _this.updateRouterFocusedItem(items);
-                        }
-                        catch (err) {
-                            subscriber.error(err);
-                        }
-                    });
-                    return function () {
-                        stateChangeSub.unsubscribe();
-                        routeChangeSub.unsubscribe();
-                    };
-                }).pipe(operators.startWith(items));
-            });
-        };
-        TheSeamNavService.prototype._incUpdatingCount = function () {
-            this._updatingCount.next(this._updatingCount.value + 1);
-        };
-        TheSeamNavService.prototype._decrUpdatingCount = function () {
-            this._updatingCount.next(this._updatingCount.value - 1);
-        };
-        TheSeamNavService.prototype.updateItemsStates = function (items) {
-            var e_1, _a;
-            this._incUpdatingCount();
-            try {
-                try {
-                    for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
-                        var item = items_1_1.value;
-                        if (horizontalNavItemHasChildren(item)) {
-                            this.updateItemsStates(item.children);
-                        }
-                        this.updateItemState(item);
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-                this._decrUpdatingCount();
-            }
-            catch (err) {
-                this._decrUpdatingCount();
-                throw err;
-            }
-        };
-        TheSeamNavService.prototype.updateItemState = function (item) {
-            this._incUpdatingCount();
-            try {
-                setDefaultHorizontalNavItemState(item);
-                this.setItemStateProp(item, 'active', this.horizontalNavLinkActive(item));
-                // TODO: Implement this in a more optimized way. Unless our apps start
-                // having large navs constantly updating their state, this shouldn't
-                // have much impact on performance.
-                this._updateItemExpandedState(item);
-                this._decrUpdatingCount();
-            }
-            catch (err) {
-                this._decrUpdatingCount();
-                throw err;
-            }
-        };
-        TheSeamNavService.prototype.horizontalNavLinkActive = function (item) {
-            if (isHorizontalNavItemType(item, 'link')) {
-                var url = this._getUrl(item);
-                if (utils.notNullOrUndefined(url)) {
-                    var opts = this._getMatchOptions(item);
-                    return this._router.isActive(url, opts);
-                }
-            }
-            return false;
-        };
-        TheSeamNavService.prototype._updateItemsExpandedState = function (items) {
-            var e_2, _a;
-            try {
-                for (var items_2 = __values(items), items_2_1 = items_2.next(); !items_2_1.done; items_2_1 = items_2.next()) {
-                    var item = items_2_1.value;
-                    if (horizontalNavItemHasChildren(item)) {
-                        this._updateItemsExpandedState(item.children);
-                    }
-                    this._updateItemExpandedState(item);
-                }
-            }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
-                try {
-                    if (items_2_1 && !items_2_1.done && (_a = items_2.return)) _a.call(items_2);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
-        };
-        TheSeamNavService.prototype._updateItemExpandedState = function (item) {
-            if (!horizontalNavItemCanExpand(item)) {
-                if (getHorizontalNavItemStateProp(item, 'expanded')) {
-                    this.setItemStateProp(item, 'expanded', false);
-                }
-                return;
-            }
-            if (horizontalNavItemHasChildren(item)) {
-                this._updateItemsExpandedState(item.children);
-            }
-            if (horizontalNavItemHasActiveChild(item) || horizontalNavItemHasExpandedChild(item)) {
-                if (!getHorizontalNavItemStateProp(item, 'expanded')) {
-                    this.setItemStateProp(item, 'expanded', true);
-                }
-            }
-            else {
-                if (getHorizontalNavItemStateProp(item, 'expanded')) {
-                    this.setItemStateProp(item, 'expanded', false);
-                }
-            }
-        };
-        TheSeamNavService.prototype.updateRouterFocusedItem = function (items) {
-            var focusedItem = items.find(function (i) { return isHorizontalNavItemActive(i); }) || items.find(function (i) { return horizontalNavItemHasActiveChild(i); });
-            if (utils.notNullOrUndefined(focusedItem)) {
-                this.updateFocusedItem(items, focusedItem);
-            }
-        };
-        TheSeamNavService.prototype.updateFocusedItem = function (items, focusedItem) {
-            var e_3, _a;
-            try {
-                for (var items_3 = __values(items), items_3_1 = items_3.next(); !items_3_1.done; items_3_1 = items_3.next()) {
-                    var item = items_3_1.value;
-                    if (areSameHorizontalNavItem(item, focusedItem)) {
-                        setHorizontalNavItemStateProp(item, 'focused', true);
-                    }
-                    else {
-                        setHorizontalNavItemStateProp(item, 'focused', false);
-                    }
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (items_3_1 && !items_3_1.done && (_a = items_3.return)) _a.call(items_3);
-                }
-                finally { if (e_3) throw e_3.error; }
-            }
-        };
-        TheSeamNavService.prototype._getNavExtras = function (item) {
-            var navigationExtras = {};
-            if (utils.hasProperty(item, 'queryParams')) {
-                navigationExtras.queryParams = item.queryParams;
-            }
-            if (utils.hasProperty(item, 'fragment')) {
-                navigationExtras.fragment = item.fragment;
-            }
-            if (utils.hasProperty(item, 'queryParamsHandling')) {
-                navigationExtras.queryParamsHandling = item.queryParamsHandling;
-            }
-            if (utils.hasProperty(item, 'preserveFragment')) {
-                navigationExtras.preserveFragment = item.preserveFragment;
-            }
-            return navigationExtras;
-        };
-        TheSeamNavService.prototype._getUrl = function (item) {
-            var 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;
-        };
-        TheSeamNavService.prototype._getMatchOptions = function (item) {
-            var defaultMatchOpts = {
-                paths: 'subset',
-                queryParams: 'subset',
-                fragment: 'ignored',
-                matrixParams: 'ignored'
-            };
-            if (utils.hasProperty(item, 'matchOptions')) {
-                return Object.assign(Object.assign({}, defaultMatchOpts), item.matchOptions);
-            }
-            return defaultMatchOpts;
-        };
-        TheSeamNavService.prototype.setItemStateProp = function (item, prop, value) {
-            var currentValue = getHorizontalNavItemStateProp(item, prop);
-            if (currentValue !== value) {
-                setHorizontalNavItemStateProp(item, prop, value);
-                var changed = {
-                    item: item,
-                    prop: prop,
-                    prevValue: currentValue,
-                    newValue: value
-                };
-                this.itemChanged.next(changed);
-            }
-        };
-        return TheSeamNavService;
-    }());
-    TheSeamNavService.decorators = [
-        { type: i0.Injectable }
-    ];
-    TheSeamNavService.ctorParameters = function () { return [
-        { type: router.Router }
-    ]; };
-
-    var NavItemComponent = /** @class */ (function () {
-        function NavItemComponent(_nav) {
-            this._nav = _nav;
-            this._ngUnsubscribe = new rxjs.Subject();
-            this.faAngleLeft = freeSolidSvgIcons.faAngleLeft;
-            this.active = false;
-            this._link = new rxjs.BehaviorSubject(undefined);
-            this.link$ = this._link.asObservable();
-            this.hierLevel = 0;
-            this.indentSize = 10;
-            this._expanded = new rxjs.BehaviorSubject(false);
-            this.expanded$ = this._expanded.asObservable();
-            this._compact = new rxjs.BehaviorSubject(false);
-            this.compact$ = this._compact.asObservable();
-            this.focused = false;
-            this.badgeTheme = 'danger';
-            this.childAction = 'menu';
-            this.expandAction = 'toggle';
-            this.navItemExpanded = new i0.EventEmitter();
-        }
-        Object.defineProperty(NavItemComponent.prototype, "link", {
-            get: function () { return this._link.value; },
-            set: function (value) { this._link.next(value); },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemComponent.prototype, "expanded", {
-            get: function () { return this._expanded.value; },
-            set: function (value) {
-                this._expanded.next(coercion.coerceBooleanProperty(value));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemComponent.prototype, "compact", {
-            get: function () { return this._compact.value; },
-            set: function (value) { this._compact.next(coercion.coerceBooleanProperty(value)); },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemComponent.prototype, "badgeTooltip", {
-            get: function () { return this._badgeTooltip; },
-            set: function (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;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemComponent.prototype, "_isActiveCssClass", {
-            get: function () { return this.active; },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemComponent.prototype, "_isChildActiveCssClass", {
-            get: function () { return this.hasActiveChild; },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemComponent.prototype, "_isExpandedCssClass", {
-            get: function () { return this.expanded; },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemComponent.prototype, "_isFocusedCssClass", {
-            get: function () { return this.focused; },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemComponent.prototype, "_attrDataHierLevel", {
-            get: function () { return this.hierLevel; },
-            enumerable: false,
-            configurable: true
-        });
-        NavItemComponent.prototype.ngOnDestroy = function () {
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
-        };
-        Object.defineProperty(NavItemComponent.prototype, "hasChildren", {
-            get: function () {
-                return Array.isArray(this.children) && this.children.length > 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemComponent.prototype, "hasActiveChild", {
-            get: function () {
-                if (utils.notNullOrUndefined(this.item)) {
-                    return horizontalNavItemHasActiveChild(this.item);
-                }
-                return false;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemComponent.prototype, "hasMenuToggle", {
-            get: function () {
-                return this.hasChildren && this.childAction === 'menu';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemComponent.prototype, "menuTpl", {
-            get: function () {
-                return this.hasMenuToggle ? this._menu : undefined;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemComponent.prototype, "hasExpandingChildren", {
-            get: function () {
-                return this.hasChildren && this.childAction === 'expand';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        NavItemComponent.prototype._toggleChildren = function (event) {
-            var ex = !this.expanded;
-            if (this.expandAction === 'expandOnly') {
-                ex = true;
-            }
-            this.expanded = ex;
-            this.navItemExpanded.emit(this.expanded);
-            if (this.item && this.expanded) {
-                this._nav.setItemStateProp(this.item, 'focused', this.expanded);
-            }
-            // Prevents seam-menu from closing out when toggling child expand
-            event.stopPropagation();
-        };
-        // Updates expanded state when user exits seam-menu
-        NavItemComponent.prototype._menuEvent = function (menuExpanded) {
-            if (menuExpanded === false) {
-                this.expanded = false;
-                // TODO: figure out why closing seam-menu with expanded submenu messes up animation
-                if (this._navItems && this._navItems.length) {
-                    this._navItems.forEach(function (navItem) {
-                        navItem.expanded = false;
-                    });
-                }
-            }
-        };
-        Object.defineProperty(NavItemComponent.prototype, "showIconBlock", {
-            get: function () {
-                return utils.notNullOrUndefined(this.icon) || this.hideEmptyIcon !== true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return NavItemComponent;
-    }());
-    NavItemComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'seam-nav-item',
-                    template: "<div class=\"d-flex flex-row h-100\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasExpandingChildren\">\n  <div class=\"nav--group nav--group--level-{{ hierLevel + 1 }}\"\n    *ngIf=\"expanded$ | async\" @childGroupAnim>\n    <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"nav-item btn nav-btn p-0 d-flex align-items-stretch flex-row text-decoration-none w-100\"\n    cdkMonitorElementFocus\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\">\n    <div class=\"nav-link d-flex flex-row align-items-center w-100\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn nav-btn nav-item--toggle-btn-container d-flex align-items-center\">\n      <seam-icon\n        class=\"nav-item--toggle-btn\"\n        [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"nav-item nav-link d-flex flex-row w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\">\n    <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n      <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"nav-item nav-link d-flex flex-row w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn nav-btn nav-item--toggle-btn-container\"\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"nav-item--toggle-btn\"\n      [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"nav-item--title pt-1\" nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"nav-item--badge\"\n      [class.nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n\n<seam-menu #menu *ngIf=\"hasMenuToggle\">\n  <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n</seam-menu>\n\n<ng-template #navChildren>\n  <seam-nav-item *ngFor=\"let child of children\"\n    [item]=\"child\"\n    [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n    [compact]=\"compact\"\n    [itemType]=\"$any(child).itemType\"\n    [icon]=\"$any(child).icon\"\n    [label]=\"$any(child).label\"\n    [link]=\"$any(child).link\"\n    [badgeText]=\"$any(child).badge?.text\"\n    [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n    [badgeSrContent]=\"$any(child).badge?.srContent\"\n    [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n    [queryParams]=\"$any(child).queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    [children]=\"$any(child)?.children\"\n    [active]=\"$any(child).__state?.active\"\n    [expanded]=\"$any(child).__state?.expanded\"\n    [focused]=\"$any(child).__state?.focused\"\n    childAction=\"expand\"\n    [hideEmptyIcon]=\"hideEmptyIcon\">\n  </seam-nav-item>\n</ng-template>\n\n",
-                    exportAs: 'seamNavItem',
-                    animations: [
-                        animations.trigger('childGroupAnim', [
-                            animations.transition(':enter', [
-                                animations.style({ height: 0 }),
-                                animations.animate('0.2s ease-in-out', animations.style({ height: '*' }))
-                            ]),
-                            animations.transition(':leave', [
-                                animations.style({ height: '*' }),
-                                animations.animate('0.2s ease-in-out', animations.style({ height: 0 }))
-                            ])
-                        ])
-                    ],
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["seam-nav-item{display:block;transition:.25s ease-in-out background-color;text-align:inherit;border-radius:0;overflow:hidden;background:transparent;margin:0}seam-nav-item.seam-nav-item--expanded{background-color:transparent}seam-nav-item.seam-nav-item--expanded .nav-link{color:#000}seam-nav-item.seam-nav-item--child-active{background-color:#dae0e5}seam-nav-item.seam-nav-item--child-active .nav-link{color:#000}seam-nav-item.seam-nav-item--active{background-color:#dae0e5}seam-nav-item.seam-nav-item--active .active,seam-nav-item.seam-nav-item--active:active,seam-nav-item.seam-nav-item--active .nav-item.active:hover{background-color:#dae0e5}seam-nav-item.seam-nav-item--active .nav-item:hover{background-color:#e9ecef}seam-nav-item.seam-nav-item--active .nav-link{color:#000}seam-nav-item .badge{vertical-align:middle}seam-nav-item:not(.nav-item--icon) .nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-nav-item .nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center;margin-right:.5rem}seam-nav-item .nav-item--icon .nav-item--badge{top:-4px;right:-4px;position:absolute}seam-nav-item .nav-item--icon .nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-nav-item .nav-item--icon .nav-item--badge.nav-item--badge-no-icon{top:0px;right:0px}seam-nav-item .nav-item{transition:.25s ease-in-out background-color}seam-nav-item .nav-item:hover{background-color:#e9ecef}seam-nav-item .nav-item.active{pointer-events:none;cursor:default}seam-nav-item a.nav-item:not([href]):not([tabindex]){color:#000}seam-nav-item a.nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-nav-item .nav-link{color:#000}seam-nav-item .nav-btn{font-weight:400;color:#000;text-decoration:none;border-radius:0;border:0 solid #dee2e6}seam-nav-item .nav-btn:hover{color:#000;text-decoration:underline}seam-nav-item .nav-btn:focus,seam-nav-item .nav-btn.focus{text-decoration:underline;box-shadow:none}seam-nav-item .nav-btn:disabled,seam-nav-item .nav-btn.disabled{color:#000;pointer-events:none}seam-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-nav-item .nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:0 .5rem}seam-nav-item button.nav-item--toggle-btn-container:hover{background-color:#e9ecef}seam-nav-item .nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform;transform:none}seam-nav-item .nav-item--toggle-btn.nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-nav-item .nav--group{will-change:height;overflow:hidden}seam-nav-item .nav--group--level-1{background-color:#eff1f4}seam-nav-item .nav--group--level-2{background-color:#e6eaed}seam-nav-item .nav--group--level-3{background-color:#dde2e7}seam-nav-item .nav--group--level-4{background-color:#d4dae1}seam-nav-item .nav--group--level-5{background-color:#cbd3da}seam-nav-item .nav--group--level-6{background-color:#c2cbd4}seam-nav-item .nav--group--level-7{background-color:#bac3cd}seam-nav-item .nav--group--level-8{background-color:#b1bcc7}seam-nav-item .nav--group--level-9{background-color:#a8b4c1}seam-nav-item .nav-item--divider{display:block;border-top:1px solid #dae0e5;width:100%}seam-nav-item .nav-item--title{color:#000;font-size:24px;padding-left:10px}seam-nav-item .sr-only{top:0;left:0}\n"]
-                },] }
-    ];
-    NavItemComponent.ctorParameters = function () { return [
-        { type: TheSeamNavService }
-    ]; };
-    NavItemComponent.propDecorators = {
-        item: [{ type: i0.Input }],
-        itemType: [{ type: i0.Input }],
-        icon: [{ type: i0.Input }],
-        hideEmptyIcon: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
-        active: [{ type: i0.Input }],
-        link: [{ type: i0.Input }],
-        queryParams: [{ type: i0.Input }],
-        children: [{ type: i0.Input }],
-        hierLevel: [{ type: i0.Input }],
-        indentSize: [{ type: i0.Input }],
-        expanded: [{ type: i0.Input }],
-        compact: [{ type: i0.Input }],
-        focused: [{ type: i0.Input }],
-        badgeText: [{ type: i0.Input }],
-        badgeTheme: [{ type: i0.Input }],
-        badgeSrContent: [{ type: i0.Input }],
-        badgeTooltip: [{ type: i0.Input }],
-        childAction: [{ type: i0.Input }],
-        expandAction: [{ type: i0.Input }],
-        navItemExpanded: [{ type: i0.Output }],
-        _isActiveCssClass: [{ type: i0.HostBinding, args: ['class.seam-nav-item--active',] }],
-        _isChildActiveCssClass: [{ type: i0.HostBinding, args: ['class.seam-nav-item--child-active',] }],
-        _isExpandedCssClass: [{ type: i0.HostBinding, args: ['class.seam-nav-item--expanded',] }],
-        _isFocusedCssClass: [{ type: i0.HostBinding, args: ['class.seam-nav-item--focused',] }],
-        _attrDataHierLevel: [{ type: i0.HostBinding, args: ['attr.data-hier-level',] }],
-        _menu: [{ type: i0.ViewChild, args: [menu.MenuComponent,] }],
-        _navItems: [{ type: i0.ViewChildren, args: [NavItemComponent,] }]
-    };
-    __decorate([
-        core.InputBoolean()
-    ], NavItemComponent.prototype, "active", void 0);
-    __decorate([
-        core.InputNumber(0)
-    ], NavItemComponent.prototype, "hierLevel", void 0);
-    __decorate([
-        core.InputNumber(10)
-    ], NavItemComponent.prototype, "indentSize", void 0);
-
-    var HorizontalNavComponent = /** @class */ (function () {
-        function HorizontalNavComponent(_nav) {
-            var _this = this;
-            this._nav = _nav;
-            this._ngUnsubscribe = new rxjs.Subject();
-            this._items = new rxjs.BehaviorSubject([]);
-            this.hideEmptyIcon = true;
-            this.hierLevel = 0;
-            this.childAction = 'menu';
-            this.expandAction = 'toggle';
-            this.navItemExpanded = new i0.EventEmitter();
-            this.items$ = this._items.asObservable().pipe(operators.switchMap(function (items) { return items ? _this._nav.createItemsObservable(items) : []; }), operators.shareReplay({ bufferSize: 1, refCount: true }));
-        }
-        Object.defineProperty(HorizontalNavComponent.prototype, "items", {
-            get: function () { return this._items.value; },
-            set: function (value) {
-                this._items.next(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        HorizontalNavComponent.prototype.ngOnInit = function () { };
-        HorizontalNavComponent.prototype.ngOnDestroy = function () {
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
-        };
-        HorizontalNavComponent.prototype._navItemExpanded = function (item, expanded) {
-            this.navItemExpanded.emit({ navItem: item, expanded: expanded });
-        };
-        return HorizontalNavComponent;
-    }());
-    HorizontalNavComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'seam-horizontal-nav',
-                    template: "<div class=\"nav-inner-wrapper\" class=\"nav-inner-wrapper-{{hierLevel}}\">\n  <div class=\"nav-items-row\">\n    <seam-nav-item *ngFor=\"let item of items$ | async\"\n      class=\"flex-shrink-0\"\n      [item]=\"item\"\n      [itemType]=\"$any(item)?.itemType\"\n      [icon]=\"$any(item)?.icon\"\n      [label]=\"$any(item)?.label\"\n      [link]=\"$any(item)?.link\"\n      [badgeText]=\"$any(item)?.badge?.text\"\n      [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n      [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n      [queryParams]=\"$any(item)?.queryParams\"\n      [children]=\"$any(item)?.children\"\n      [active]=\"$any(item).__state?.active\"\n      [expanded]=\"$any(item).__state?.expanded\"\n      [focused]=\"$any(item).__state?.focused\"\n      [hierLevel]=\"hierLevel\"\n      [childAction]=\"childAction\"\n      [expandAction]=\"expandAction\"\n      (navItemExpanded)=\"_navItemExpanded(item, $event)\"\n      [hideEmptyIcon]=\"hideEmptyIcon\">\n    </seam-nav-item>\n  </div>\n</div>\n",
-                    providers: [
-                        TheSeamNavService
-                    ],
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["seam-horizontal-nav,.seam-horizontal-nav{display:block;height:100%;position:relative;z-index:2}seam-horizontal-nav .nav-inner-wrapper,.seam-horizontal-nav .nav-inner-wrapper{background:none;height:100%}seam-horizontal-nav .nav-backdrop,.seam-horizontal-nav .nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden,.seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-horizontal-nav .nav-content,.seam-horizontal-nav .nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-horizontal-nav .nav-items-container,.seam-horizontal-nav .nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}seam-horizontal-nav .nav-items-row,.seam-horizontal-nav .nav-items-row{height:100%;display:flex;padding:.25rem .5rem}\n"]
-                },] }
-    ];
-    HorizontalNavComponent.ctorParameters = function () { return [
-        { type: TheSeamNavService }
-    ]; };
-    HorizontalNavComponent.propDecorators = {
-        items: [{ type: i0.Input }],
-        hideEmptyIcon: [{ type: i0.Input }],
-        hierLevel: [{ type: i0.Input }],
-        childAction: [{ type: i0.Input }],
-        expandAction: [{ type: i0.Input }],
-        navItemExpanded: [{ type: i0.Output }]
-    };
-
-    var TheSeamNavModule = /** @class */ (function () {
-        function TheSeamNavModule() {
-        }
-        return TheSeamNavModule;
-    }());
-    TheSeamNavModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        NavItemComponent,
-                        HorizontalNavComponent,
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        router.RouterModule,
-                        icon.TheSeamIconModule,
-                        a11y.A11yModule,
-                        scrollbar.TheSeamScrollbarModule,
-                        layout.TheSeamLayoutModule,
-                        ngBootstrap.NgbTooltipModule,
-                        portal.PortalModule,
-                        menu.TheSeamMenuModule
-                    ],
-                    exports: [
-                        NavItemComponent,
-                        HorizontalNavComponent,
-                    ],
-                    providers: [
-                        TheSeamNavService,
-                    ]
-                },] }
-    ];
-
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
-    exports.BaseLayoutContentDirective = BaseLayoutContentDirective;
-    exports.BaseLayoutContentFooterDirective = BaseLayoutContentFooterDirective;
-    exports.BaseLayoutContentHeaderDirective = BaseLayoutContentHeaderDirective;
-    exports.BaseLayoutNavToggleDirective = BaseLayoutNavToggleDirective;
-    exports.BaseLayoutSideBarDirective = BaseLayoutSideBarDirective;
-    exports.BaseLayoutTopBarDirective = BaseLayoutTopBarDirective;
-    exports.DashboardComponent = DashboardComponent;
-    exports.DashboardWidgetContainerComponent = DashboardWidgetContainerComponent;
-    exports.DashboardWidgetPortalOutletDirective = DashboardWidgetPortalOutletDirective;
-    exports.DashboardWidgetTemplateContainerComponent = DashboardWidgetTemplateContainerComponent;
-    exports.DashboardWidgetsComponent = DashboardWidgetsComponent;
-    exports.DashboardWidgetsPreferencesService = DashboardWidgetsPreferencesService;
-    exports.DashboardWidgetsService = DashboardWidgetsService;
-    exports.HierarchyLevelResolver = HierarchyLevelResolver;
-    exports.HierarchyRouterOutletComponent = HierarchyRouterOutletComponent;
-    exports.HorizontalNavComponent = HorizontalNavComponent;
-    exports.NavItemComponent = NavItemComponent;
-    exports.SideNavComponent = SideNavComponent;
-    exports.SideNavItemComponent = SideNavItemComponent;
-    exports.SideNavToggleComponent = SideNavToggleComponent;
-    exports.THESEAM_BASE_LAYOUT_REF = THESEAM_BASE_LAYOUT_REF;
-    exports.THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR = THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR;
-    exports.THE_SEAM_BASE_LAYOUT = THE_SEAM_BASE_LAYOUT;
-    exports.TheSeamBaseLayoutComponent = TheSeamBaseLayoutComponent;
-    exports.TheSeamBaseLayoutModule = TheSeamBaseLayoutModule;
-    exports.TheSeamDashboardModule = TheSeamDashboardModule;
-    exports.TheSeamDynamicRouterModule = TheSeamDynamicRouterModule;
-    exports.TheSeamFramework = TheSeamFramework;
-    exports.TheSeamNavModule = TheSeamNavModule;
-    exports.TheSeamSchemaFormFrameworkComponent = TheSeamSchemaFormFrameworkComponent;
-    exports.TheSeamSchemaFormModule = TheSeamSchemaFormModule;
-    exports.TheSeamSideNavModule = TheSeamSideNavModule;
-    exports.TheSeamTopBarComponent = TheSeamTopBarComponent;
-    exports.TheSeamTopBarModule = TheSeamTopBarModule;
-    exports.TopBarItemDirective = TopBarItemDirective;
-    exports.TopBarMenuBtnDetailDirective = TopBarMenuBtnDetailDirective;
-    exports.TopBarMenuButtonComponent = TopBarMenuButtonComponent;
-    exports.TopBarMenuDirective = TopBarMenuDirective;
-    exports.TopBarTitleComponent = TopBarTitleComponent;
-    exports.areSameHorizontalNavItem = areSameHorizontalNavItem;
-    exports.canBeActive = canBeActive;
-    exports.canExpand = canExpand;
-    exports.canHaveChildren = canHaveChildren;
-    exports.fader = fader;
-    exports.findHorizontalNavLinkItems = findHorizontalNavLinkItems;
-    exports.findLinkItems = findLinkItems;
-    exports.getHorizontalNavItemStateProp = getHorizontalNavItemStateProp;
-    exports.getItemStateProp = getItemStateProp;
-    exports.hasActiveChild = hasActiveChild;
-    exports.hasChildren = hasChildren;
-    exports.hasExpandedChild = hasExpandedChild;
-    exports.horizontalNavItemCanBeActive = horizontalNavItemCanBeActive;
-    exports.horizontalNavItemCanExpand = horizontalNavItemCanExpand;
-    exports.horizontalNavItemCanHaveChildren = horizontalNavItemCanHaveChildren;
-    exports.horizontalNavItemHasActiveChild = horizontalNavItemHasActiveChild;
-    exports.horizontalNavItemHasChildren = horizontalNavItemHasChildren;
-    exports.horizontalNavItemHasExpandedChild = horizontalNavItemHasExpandedChild;
-    exports.isExpanded = isExpanded;
-    exports.isHorizontalNavItemActive = isHorizontalNavItemActive;
-    exports.isHorizontalNavItemExpanded = isHorizontalNavItemExpanded;
-    exports.isHorizontalNavItemFocused = isHorizontalNavItemFocused;
-    exports.isHorizontalNavItemType = isHorizontalNavItemType;
-    exports.isNavItemActive = isNavItemActive;
-    exports.isNavItemType = isNavItemType;
-    exports.routeChanges = routeChanges;
-    exports.setDefaultHorizontalNavItemState = setDefaultHorizontalNavItemState;
-    exports.setDefaultState = setDefaultState;
-    exports.setHorizontalNavItemStateProp = setHorizontalNavItemStateProp;
-    exports.setItemStateProp = setItemStateProp;
-    exports.sideNavExpandStateChangeFn = sideNavExpandStateChangeFn;
-    exports.sideToSide = sideToSide;
-    exports.slider = slider;
-    exports.stepper = stepper;
-    exports.transformer = transformer;
-    exports["ɵa"] = BaseLayoutSideBarFooterDirective;
-    exports["ɵb"] = BaseLayoutSideBarHeaderDirective;
-    exports["ɵc"] = TheSeamSideNavService;
-    exports["ɵd"] = TopBarCompactMenuBtnDetailDirective;
-    exports["ɵe"] = TopBarNavToggleBtnDetailDirective;
-    exports["ɵf"] = TheSeamSchemaFormControlsModule;
-    exports["ɵg"] = TheSeamSchemaFormCheckboxComponent;
-    exports["ɵh"] = TheSeamSchemaFormSubmitComponent;
-    exports["ɵi"] = TheSeamSchemaFormSelectComponent;
-    exports["ɵj"] = TheSeamSchemaFormInputComponent;
-    exports["ɵk"] = TheSeamSchemaFormNumberComponent;
-    exports["ɵl"] = TheSeamSchemaFormSubmitSplitComponent;
-    exports["ɵm"] = TheSeamNavService;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-}));
-//# sourceMappingURL=theseam-ui-common-framework.umd.js.map