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

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

@@ -0,0 +1,2990 @@
+import * as i0 from '@angular/core';
+import { Directive, InjectionToken, Optional, Inject, HostBinding, Input, HostListener, forwardRef, isDevMode, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, NgModule, ViewChild, EventEmitter, Output, Injectable, ViewChildren, SkipSelf, Host, Self, ContentChildren } from '@angular/core';
+import * as i3 from '@angular/cdk/portal';
+import { TemplatePortal, PortalModule, BasePortalOutlet, ComponentPortal } from '@angular/cdk/portal';
+import { BehaviorSubject, isObservable, from, Subject, of, combineLatest, defer, Observable } from 'rxjs';
+import { faAngleDoubleRight, faAngleDoubleLeft, faLock, faUnlock, faAngleLeft, faBars, faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import * as i1 from '@theseam/ui-common/layout';
+import { TheSeamLayoutModule } from '@theseam/ui-common/layout';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@theseam/ui-common/scrollbar';
+import { TheSeamScrollbarModule } from '@theseam/ui-common/scrollbar';
+import * as i4$1 from '@theseam/ui-common/buttons';
+import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
+import * as i2$1 from '@theseam/ui-common/icon';
+import { TheSeamIconModule } from '@theseam/ui-common/icon';
+import { map, startWith, switchMap, shareReplay, tap, mapTo, take, auditTime, debounceTime, takeUntil, distinctUntilChanged, finalize, filter } from 'rxjs/operators';
+import { hasProperty, notNullOrUndefined, observeControlValue, observeControlStatus } from '@theseam/ui-common/utils';
+import { __decorate } from 'tslib';
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i3$1 from '@angular/cdk/drag-drop';
+import { moveItemInArray, transferArrayItem, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
+import { InputBoolean, InputNumber, mixinDisabled } from '@theseam/ui-common/core';
+import { THESEAM_WIDGET_ACCESSOR } from '@theseam/ui-common/widget';
+import * as i1$1 from '@theseam/ui-common/dynamic-component-loader';
+import * as i6 from '@theseam/ui-common/shared';
+import { TheSeamSharedModule } from '@theseam/ui-common/shared';
+import { trigger, state, style, transition, animate, group, query, animateChild, keyframes } from '@angular/animations';
+import * as i1$2 from '@angular/router';
+import { NavigationEnd, RouterModule, NavigationStart } from '@angular/router';
+import * as i4$2 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i5 from '@ng-bootstrap/ng-bootstrap';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i2$2 from '@angular/flex-layout/extended';
+import * as i3$2 from '@theseam/ui-common/menu';
+import { TheSeamMenuModule } from '@theseam/ui-common/menu';
+import { faUserCircle } from '@fortawesome/free-regular-svg-icons';
+import * as i1$3 from '@ajsf/core';
+import { isArray, buildTitleMap, hasOwn, Framework, JsonSchemaFormModule, WidgetLibraryModule, JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService } from '@ajsf/core';
+import * as i3$3 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i4$3 from '@theseam/ui-common/form-field';
+import { TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
+import * as i5$1 from '@theseam/ui-common/checkbox';
+import { TheSeamCheckboxModule } from '@theseam/ui-common/checkbox';
+import * as i5$2 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+
+class BaseLayoutContentFooterDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}
+BaseLayoutContentFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutContentFooterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaseLayoutContentFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: BaseLayoutContentFooterDirective, selector: "[seamBaseLayoutContentFooter]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutContentFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutContentFooter]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class BaseLayoutContentHeaderDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}
+BaseLayoutContentHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutContentHeaderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaseLayoutContentHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: BaseLayoutContentHeaderDirective, selector: "[seamBaseLayoutContentHeader]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutContentHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutContentHeader]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class BaseLayoutContentDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}
+BaseLayoutContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutContentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaseLayoutContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: BaseLayoutContentDirective, selector: "[seamBaseLayoutContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutContent]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+const THESEAM_BASE_LAYOUT_REF = new InjectionToken('seamBaseLayoutRef');
+
+/**
+ * Can be used to toggle the expand state of the registered nav.
+ */
+class BaseLayoutNavToggleDirective {
+    constructor(_baseLayout) {
+        this.type = 'button';
+        /** Screenreader label for the button. */
+        this.ariaLabel = 'Navigation toggle';
+        this.baseLayout = _baseLayout;
+    }
+    get _attrType() { return this.type; }
+    get _attrAriaLabel() { return this.ariaLabel || null; }
+    _onClick() {
+        if (this.baseLayout && this.baseLayout.registeredNav) {
+            this.baseLayout.registeredNav.toggle();
+        }
+    }
+}
+BaseLayoutNavToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutNavToggleDirective, deps: [{ token: THESEAM_BASE_LAYOUT_REF, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+BaseLayoutNavToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: BaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: { type: "type", ariaLabel: ["aria-label", "ariaLabel"] }, host: { listeners: { "click": "_onClick()" }, properties: { "attr.type": "this._attrType", "attr.aria-label": "this._attrAriaLabel" } }, exportAs: ["seamBaseLayoutNavToggle"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutNavToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[seamBaseLayoutNavToggle]',
+                    exportAs: 'seamBaseLayoutNavToggle'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [THESEAM_BASE_LAYOUT_REF]
+                    }] }];
+    }, propDecorators: { _attrType: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }], type: [{
+                type: Input
+            }], _attrAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], _onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class BaseLayoutSideBarFooterDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}
+BaseLayoutSideBarFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutSideBarFooterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaseLayoutSideBarFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: BaseLayoutSideBarFooterDirective, selector: "[seamBaseLayoutSideBarFooter]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutSideBarFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutSideBarFooter]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class BaseLayoutSideBarDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}
+BaseLayoutSideBarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutSideBarDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaseLayoutSideBarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: BaseLayoutSideBarDirective, selector: "[seamBaseLayoutSideBar]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutSideBarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutSideBar]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class BaseLayoutTopBarDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}
+BaseLayoutTopBarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutTopBarDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaseLayoutTopBarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: BaseLayoutTopBarDirective, selector: "[seamBaseLayoutTopBar]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BaseLayoutTopBarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutTopBar]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+const THE_SEAM_BASE_LAYOUT = {
+    provide: THESEAM_BASE_LAYOUT_REF,
+    // tslint:disable-next-line:no-use-before-declare
+    useExisting: forwardRef(() => TheSeamBaseLayoutComponent),
+    multi: false,
+};
+class TheSeamBaseLayoutComponent {
+    constructor(_viewContainerRef, _layout) {
+        this._viewContainerRef = _viewContainerRef;
+        this._layout = _layout;
+        this.faAngleDoubleRight = faAngleDoubleRight;
+        this.faAngleDoubleLeft = faAngleDoubleLeft;
+        this.overlayNav = false;
+        this._hasSideBar = new BehaviorSubject(false);
+        this._registeredNav = new BehaviorSubject(undefined);
+        this.registeredNav$ = this._registeredNav.asObservable();
+        this._registeredActions = new BehaviorSubject([]);
+        this.registeredActions$ = this._registeredActions.asObservable();
+        this.isMobile$ = this._layout.isMobile$;
+        this.hasSideBar$ = this._hasSideBar.asObservable();
+    }
+    get registeredNav() { return this._registeredNav.value; }
+    get registeredActions() { return this._registeredActions.value; }
+    ngOnInit() {
+        if (this._topBarTpl) {
+            this._topBarPortal = new TemplatePortal(this._topBarTpl, this._viewContainerRef);
+        }
+        if (this._sideBarTpl) {
+            this._sideBarPortal = new TemplatePortal(this._sideBarTpl, this._viewContainerRef);
+            this._hasSideBar.next(true);
+        }
+        if (this._contentTpl) {
+            this._contentPortal = new TemplatePortal(this._contentTpl, this._viewContainerRef);
+        }
+        if (this._contentHeaderTpl) {
+            this._contentHeaderPortal = new TemplatePortal(this._contentHeaderTpl, this._viewContainerRef);
+        }
+        if (this._contentFooterTpl) {
+            this._contentFooterPortal = new TemplatePortal(this._contentFooterTpl, this._viewContainerRef);
+        }
+    }
+    registerNav(nav) {
+        // TODO: Allow multiple registered navs
+        // if (this.registeredNav) {
+        //   throw new Error('[TheSeamBaseLayoutComponent] A nav is already registered.')
+        // }
+        // console.log('register nav', nav)
+        this._registeredNav.next(nav);
+    }
+    unregisterNav(nav) {
+        if (this.registeredNav === nav) {
+            this._registeredNav.next(undefined);
+        }
+    }
+    registerAction(action) {
+        const actions = this._registeredActions.value;
+        if (actions.findIndex(a => a.name === action.name) !== -1) {
+            if (isDevMode()) {
+                console.warn(`[TheSeamBaseLayoutComponent] registerAction(): Action ${action.name} not ` +
+                    'registered, because another action by that name is already registered.');
+            }
+            return;
+        }
+        actions.push(action);
+    }
+    unregisterAction(action) {
+        const actionName = typeof action === 'string' ? action : action.name;
+        const actions = this._registeredActions.value;
+        this._registeredActions.next(actions.filter(f => f.name !== actionName));
+    }
+    isActionRegistered(actionName) {
+        const actions = this._registeredActions.value;
+        const action = actions.find(f => f.name === actionName);
+        return !!action;
+    }
+    _handleButtonAction(action) {
+        this._execButtonAction(action).subscribe();
+    }
+    _execButtonAction(action) {
+        const fnRes = action.exec();
+        return isObservable(fnRes) ? fnRes : from(Promise.resolve(fnRes));
+    }
+}
+TheSeamBaseLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamBaseLayoutComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.TheSeamLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+TheSeamBaseLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TheSeamBaseLayoutComponent, selector: "seam-base-layout", inputs: { overlayNav: "overlayNav" }, providers: [THE_SEAM_BASE_LAYOUT], queries: [{ propertyName: "_topBarTpl", first: true, predicate: BaseLayoutTopBarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_sideBarTpl", first: true, predicate: BaseLayoutSideBarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentTpl", first: true, predicate: BaseLayoutContentDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentHeaderTpl", first: true, predicate: BaseLayoutContentHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentFooterTpl", first: true, predicate: BaseLayoutContentFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header\">\n      <!-- <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template> -->\n\n      <div class=\"d-flex d-flex-row\">\n        <div class=\"flex-grow-1\">\n          <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n        </div>\n        <div class=\"d-flex\">\n          <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n            <div>\n              <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;float:left;z-index:9999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .base-layout-content-container-header{margin:.25rem;padding:0;background:none;border-radius:0;overflow:hidden}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i4.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamBaseLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-base-layout', providers: [THE_SEAM_BASE_LAYOUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header\">\n      <!-- <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template> -->\n\n      <div class=\"d-flex d-flex-row\">\n        <div class=\"flex-grow-1\">\n          <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n        </div>\n        <div class=\"d-flex\">\n          <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n            <div>\n              <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;float:left;z-index:9999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .base-layout-content-container-header{margin:.25rem;padding:0;background:none;border-radius:0;overflow:hidden}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1.TheSeamLayoutService }]; }, propDecorators: { overlayNav: [{
+                type: Input
+            }], _topBarTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutTopBarDirective, { static: true, read: TemplateRef }]
+            }], _sideBarTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutSideBarDirective, { static: true, read: TemplateRef }]
+            }], _contentTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutContentDirective, { static: true, read: TemplateRef }]
+            }], _contentHeaderTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutContentHeaderDirective, { static: true, read: TemplateRef }]
+            }], _contentFooterTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutContentFooterDirective, { static: true, read: TemplateRef }]
+            }] } });
+
+class TheSeamBaseLayoutModule {
+}
+TheSeamBaseLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamBaseLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamBaseLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: TheSeamBaseLayoutModule, declarations: [TheSeamBaseLayoutComponent,
+        BaseLayoutContentDirective,
+        BaseLayoutSideBarDirective,
+        BaseLayoutSideBarFooterDirective,
+        BaseLayoutTopBarDirective,
+        BaseLayoutNavToggleDirective,
+        BaseLayoutContentHeaderDirective,
+        BaseLayoutContentFooterDirective], imports: [CommonModule,
+        PortalModule,
+        TheSeamScrollbarModule,
+        TheSeamIconModule,
+        TheSeamButtonsModule], exports: [TheSeamBaseLayoutComponent,
+        BaseLayoutContentDirective,
+        BaseLayoutSideBarDirective,
+        BaseLayoutSideBarFooterDirective,
+        BaseLayoutTopBarDirective,
+        BaseLayoutNavToggleDirective,
+        BaseLayoutContentHeaderDirective,
+        BaseLayoutContentFooterDirective] });
+TheSeamBaseLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamBaseLayoutModule, imports: [CommonModule,
+        PortalModule,
+        TheSeamScrollbarModule,
+        TheSeamIconModule,
+        TheSeamButtonsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamBaseLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TheSeamBaseLayoutComponent,
+                        BaseLayoutContentDirective,
+                        BaseLayoutSideBarDirective,
+                        BaseLayoutSideBarFooterDirective,
+                        BaseLayoutTopBarDirective,
+                        BaseLayoutNavToggleDirective,
+                        BaseLayoutContentHeaderDirective,
+                        BaseLayoutContentFooterDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        PortalModule,
+                        TheSeamScrollbarModule,
+                        TheSeamIconModule,
+                        TheSeamButtonsModule
+                    ],
+                    exports: [
+                        TheSeamBaseLayoutComponent,
+                        BaseLayoutContentDirective,
+                        BaseLayoutSideBarDirective,
+                        BaseLayoutSideBarFooterDirective,
+                        BaseLayoutTopBarDirective,
+                        BaseLayoutNavToggleDirective,
+                        BaseLayoutContentHeaderDirective,
+                        BaseLayoutContentFooterDirective
+                    ]
+                }]
+        }] });
+
+class DashboardWidgetContainerComponent {
+    constructor() { }
+    ngOnInit() { }
+}
+DashboardWidgetContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DashboardWidgetContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: DashboardWidgetContainerComponent, selector: "seam-dashboard-widget-container", inputs: { def: "def" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-dashboard-widget-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template><ng-content></ng-content></ng-template>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { def: [{
+                type: Input
+            }], templateRef: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }] } });
+
+const THESEAM_DASHBOARD_WIDGETS_ACCESSOR = new InjectionToken('THESEAM_DASHBOARD_WIDGETS_ACCESSOR');
+
+class DashboardWidgetTemplateContainerComponent {
+    constructor(_dashboardWidgetsComponent) {
+        this._dashboardWidgetsComponent = _dashboardWidgetsComponent;
+        this.template$ = this._dashboardWidgetsComponent.containers$.pipe(map(containers => containers.find((c) => { var _a; return c.def.widgetId === ((_a = this.item) === null || _a === void 0 ? void 0 : _a.widgetId); })), map(container => container && container.templateRef));
+    }
+    ngOnInit() { }
+}
+DashboardWidgetTemplateContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetTemplateContainerComponent, deps: [{ token: THESEAM_DASHBOARD_WIDGETS_ACCESSOR }], target: i0.ɵɵFactoryTarget.Component });
+DashboardWidgetTemplateContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: DashboardWidgetTemplateContainerComponent, selector: "seam-dashboard-widget-template-container", inputs: { item: "item" }, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"$any(template$ | async)\"></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetTemplateContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-dashboard-widget-template-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngTemplateOutlet]=\"$any(template$ | async)\"></ng-template>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [THESEAM_DASHBOARD_WIDGETS_ACCESSOR]
+                    }] }];
+    }, propDecorators: { item: [{
+                type: Input
+            }] } });
+
+/**
+ * Mostly copied from
+ * `https://github.com/angular/components/blob/master/src/cdk/portal/portal-directives.ts`
+ * until I can figure out how to hold off removing the DOM nodes with the
+ * cdkPortalOutlet. When we update to Angular 9 I may be able to do this better
+ * with the new DomPortal.
+ *
+ * Directive version of a PortalOutlet. Because the directive *is* a
+ * PortalOutlet, portals can be directly attached to it, enabling declarative
+ * use.
+ *
+ * Usage: `<ng-template [cdkPortalOutlet]="greeting"></ng-template>`
+ */
+class DashboardWidgetPortalOutletDirective extends BasePortalOutlet {
+    constructor(_componentFactoryResolver, _viewContainerRef, _elementRef) {
+        super();
+        this._componentFactoryResolver = _componentFactoryResolver;
+        this._viewContainerRef = _viewContainerRef;
+        this._elementRef = _elementRef;
+        /** Whether the portal component is initialized. */
+        this._isInitialized = false;
+        /** Emits when a portal is attached to the outlet. */
+        this.attached = new EventEmitter();
+    }
+    /** Portal associated with the Portal outlet. */
+    get portal() {
+        return this._attachedPortal;
+    }
+    set portal(portal) {
+        // console.log('[DashboardWidgetPortalOutletDirective] set portal', portal, this.hasAttached())
+        // Ignore the cases where the `portal` is set to a falsy value before the lifecycle hooks have
+        // run. This handles the cases where the user might do something like `<div cdkPortalOutlet>`
+        // and attach a portal programmatically in the parent component. When Angular does the first CD
+        // round, it will fire the setter with empty string, causing the user's content to be cleared.
+        if (this.hasAttached() && !portal && !this._isInitialized) {
+            return;
+        }
+        if (this.hasAttached()) {
+            super.detach();
+        }
+        if (portal) {
+            super.attach(portal);
+        }
+        this._attachedPortal = portal;
+    }
+    /** Component or view reference that is attached to the portal. */
+    get attachedRef() {
+        return this._attachedRef;
+    }
+    ngOnInit() {
+        this._isInitialized = true;
+    }
+    ngOnDestroy() {
+        // console.log('[DashboardWidgetPortalOutletDirective] ngOnDestroy')
+        // TODO: Figure out the right way to call dispose without messing up
+        // animation. This setTimeout way assumes the transition is 500ms, but that
+        // may not always be the case and isn't guaranteed to match the animation ms
+        // duration, since setTimeout isn't really meant for accurate timing. It
+        // also makes debugging animations difficult, because you can pause an
+        // animation, but the timeout will still run.
+        setTimeout(() => {
+            super.dispose();
+            this._attachedPortal = null;
+            this._attachedRef = null;
+        }, 500);
+    }
+    /**
+     * Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.
+     *
+     * @param portal Portal to be attached to the portal outlet.
+     * @returns Reference to the created component.
+     */
+    attachComponentPortal(portal) {
+        portal.setAttachedHost(this);
+        // If the portal specifies an origin, use that as the logical location of the component
+        // in the application tree. Otherwise use the location of this PortalOutlet.
+        const viewContainerRef = portal.viewContainerRef != null ?
+            portal.viewContainerRef :
+            this._viewContainerRef;
+        const resolver = portal.componentFactoryResolver || this._componentFactoryResolver;
+        const componentFactory = resolver.resolveComponentFactory(portal.component);
+        const ref = viewContainerRef.createComponent(componentFactory, viewContainerRef.length, portal.injector || viewContainerRef.injector);
+        super.setDisposeFn(() => ref.destroy());
+        this._attachedPortal = portal;
+        this._attachedRef = ref;
+        this.attached.emit(ref);
+        return ref;
+    }
+    /**
+     * Attach the given TemplatePortal to this PortlHost as an embedded View.
+     * @param portal Portal to be attached.
+     * @returns Reference to the created embedded view.
+     */
+    attachTemplatePortal(portal) {
+        portal.setAttachedHost(this);
+        const viewRef = this._viewContainerRef.createEmbeddedView(portal.templateRef, portal.context);
+        super.setDisposeFn(() => this._viewContainerRef.clear());
+        this._attachedPortal = portal;
+        this._attachedRef = viewRef;
+        this.attached.emit(viewRef);
+        return viewRef;
+    }
+}
+DashboardWidgetPortalOutletDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetPortalOutletDirective, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DashboardWidgetPortalOutletDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: DashboardWidgetPortalOutletDirective, selector: "[seamDashboardWidgetPortalOutlet]", inputs: { portal: ["seamDashboardWidgetPortalOutlet", "portal"] }, outputs: { attached: "attached" }, exportAs: ["seamDashboardWidgetPortalOutlet"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetPortalOutletDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDashboardWidgetPortalOutlet]',
+                    exportAs: 'seamDashboardWidgetPortalOutlet',
+                    inputs: ['portal: seamDashboardWidgetPortalOutlet']
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }]; }, propDecorators: { attached: [{
+                type: Output
+            }] } });
+
+const THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR = new InjectionToken('ITheSeamDashboardWidgetsPreferencesAccessor');
+
+// TODO: This needs a unit test to make sure it will not cause a race condition
+// if update is called faster than the previous can respond.
+//
+// The ideal approach I am thinking, without steping through the process too
+// thoroughly is to hold the new data emit until all pending updates are done.
+// Any pending updates other than the most recently requested will be ignored
+// and just wait on the most recent, and if already running it should be
+// canceled if possible. Also, incase something happens that causes the new data
+// emissions to get held up too long, there could be a threshold time that the
+// new data can be held up.
+/**
+ * Manages anything dealing with retrieving and updating dashboard widget
+ * preference data from the provided accessor.
+ */
+class DashboardWidgetsPreferencesService {
+    // private _pending = false
+    // public get pending() { return this._pending }
+    constructor(_prefsAccessor) {
+        this._prefsAccessor = _prefsAccessor;
+        this._tablePrefsMap = new Map();
+    }
+    preferences(preferenceKey) {
+        let prefs = this._tablePrefsMap.get(preferenceKey);
+        if (!prefs) {
+            const refreshSubject = new Subject();
+            prefs = {
+                observable: this._createObservable(refreshSubject, preferenceKey),
+                refresh: refreshSubject
+            };
+            this._tablePrefsMap.set(preferenceKey, prefs);
+        }
+        return prefs.observable;
+    }
+    _createObservable(refreshSubject, prefKey) {
+        if (!this._prefsAccessor) {
+            return of({});
+        }
+        const accessor = (key) => this._prefsAccessor ? this._prefsAccessor.get(key) : of('{}');
+        return refreshSubject.pipe(startWith({}), 
+        // tap(() => console.log('Start requesting: ', prefKey)),
+        switchMap(() => accessor(prefKey).pipe(map(v => {
+            if (!v) {
+                return null;
+            }
+            // TODO: Add a schema validator and migration tool to avoid parsing issues.
+            try {
+                return JSON.parse(v);
+            }
+            catch (error) {
+                if (isDevMode()) {
+                    console.error(error);
+                }
+                return null;
+            }
+        }), map(v => !!v ? v : {}))), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    refresh(preferenceKey) {
+        const prefs = this._tablePrefsMap.get(preferenceKey);
+        if (prefs) {
+            // this._pending = true
+            // prefs.refresh.next()
+            return prefs.observable.pipe(
+            // tap(() => prefs.refresh.next()),
+            tap(() => setTimeout(() => { prefs.refresh.next(); }, 0)), mapTo(undefined), take(1));
+        }
+        return of(undefined);
+    }
+    selectLayout(preferenceKey, layoutName) {
+        return this.preferences(preferenceKey).pipe(map(prefs => (prefs.layouts || []).find(l => l.name === layoutName)));
+    }
+    // TODO: Improve this updating to not be more generic, so we can quickly add
+    // edits for different preference schema's.
+    //
+    // TODO: Decide if a send queue/merging of pending queue is needed to avoid
+    // out of order updates. This shouldn't be an issue, with how fast preferences
+    // will most likely be changing, but it could happen in situations, such as
+    // network issues.
+    updateLayout(preferenceKey, layout) {
+        if (!this._prefsAccessor) {
+            return of(undefined);
+        }
+        if (!hasProperty(layout, 'name')) {
+            throw Error(`Unable to save layout preference. 'name' is required for a layout preference.`);
+        }
+        const _layout = this.toSerializeableLayout(layout);
+        // this._pending = true
+        return this.preferences(preferenceKey).pipe(map(prefs => {
+            // Making the preferences immutable may not be necessary, but for now
+            // this obj->str->obj will work as a naive clone.
+            const layouts = JSON.parse(JSON.stringify(prefs.layouts || []));
+            const _layoutPref = layouts.find((c) => c.name === _layout.name);
+            // console.log('has', _layoutPref)
+            if (_layoutPref) {
+                if (hasProperty(_layout, 'name')) {
+                    _layoutPref.name = _layout.name;
+                }
+                if (hasProperty(_layout, 'label')) {
+                    _layoutPref.label = _layout.label;
+                }
+                if (hasProperty(_layout, 'items')) {
+                    _layoutPref.items = _layout.items;
+                }
+            }
+            else {
+                layouts.push(Object.assign({}, _layout));
+            }
+            const newPrefs = Object.assign(Object.assign({}, prefs), { layouts });
+            return newPrefs;
+        }), 
+        // tap(v => console.log('newPrefs', v)),
+        take(1), switchMap(newPrefs => this._prefsAccessor
+            ? this._prefsAccessor.update(preferenceKey, JSON.stringify(newPrefs))
+            : of(newPrefs)), switchMap(() => this.refresh(preferenceKey).pipe(mapTo(undefined))));
+        // .subscribe()
+    }
+    toSerializeableLayout(layout) {
+        const serialized = {
+            name: layout.name,
+            label: layout.label,
+            items: this.toSerializeableItems(layout.items) || []
+        };
+        return serialized;
+    }
+    // public toDeserializedLayout(layout: IDashboardWidgetItemLayoutSerialized): IDashboardWidgetItemLayoutDef {
+    //   // For now there is nothing to do. Eventually this should have at least
+    //   // validation on the deserialized object.
+    //   return layout
+    // }
+    /**
+     * Returns the serializable widget items as objects that can be serialized to
+     * a JSON string for storage.
+     */
+    toSerializeableItems(widgets) {
+        const serialized = [];
+        for (const w of widgets) {
+            // if (!w.__itemDef.component || typeof w.__itemDef.component !== 'string') {
+            //   console.warn(`[DashboardWidgetsService] Widget item def must have a string 'component' property to be serialized.`, w)
+            //   continue
+            // }
+            // serialized.push({
+            //   widgetId: w.widgetId,
+            //   col: w.col,
+            //   order: w.order,
+            //   component: w.__itemDef.component
+            // })
+            // TODO: Remove this, it is only here for initial dev debugging.
+            serialized.push({
+                widgetId: w.widgetId,
+                col: w.col,
+                order: w.order,
+                // component: w.__itemDef.component as string
+            });
+        }
+        return serialized;
+    }
+}
+DashboardWidgetsPreferencesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetsPreferencesService, deps: [{ token: THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+DashboardWidgetsPreferencesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetsPreferencesService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetsPreferencesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR]
+                    }] }];
+    } });
+
+class DashboardWidgetsService {
+    constructor(_dynamicComponentLoaderModule, _preferences) {
+        this._dynamicComponentLoaderModule = _dynamicComponentLoaderModule;
+        this._preferences = _preferences;
+        this.preferenceKey = 'datatable-widgets';
+        this.defaultNumColumns = 3;
+        /** Used for operations, such as 'addWidget', if the column is not specified. */
+        this.defaultColumn = 0;
+        this._widgets = new BehaviorSubject([]);
+        this._numColumns = new BehaviorSubject(this.defaultNumColumns);
+        this._viewContainerRefSubject = new BehaviorSubject(undefined);
+        this.numColumns$ = this._numColumns.asObservable();
+        // Widget items without preferences
+        const _widgetItems$ = combineLatest([this._widgets, this._viewContainerRefSubject])
+            .pipe(switchMap(([defs, vcr]) => this.createWidgetItems(defs, vcr)));
+        // Widget items with preferences
+        this.widgetItems$ = combineLatest([_widgetItems$, this.numColumns$])
+            .pipe(
+        // Wait until the current tick is done, incase both the widgets and
+        // number of columns are set durring the same tick. Without the audit,
+        // this would get called twice when the component is initialized with
+        // both inputs set one after the other individually.
+        auditTime(0), switchMap(([items, numColumns]) => this._preferences.selectLayout(this.preferenceKey, this._layoutName(numColumns)).pipe(map(layout => layout ? this.withLayoutPreferences(items, layout) : items))), shareReplay({ bufferSize: 1, refCount: true }));
+        this.widgetColumns$ = this.widgetItems$
+            .pipe(map(items => this.toColumnRecords(items)), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    get widgets() { return this._widgets.value; }
+    set widgets(value) { this._widgets.next(value); }
+    get numColumns() { return this._numColumns.value; }
+    set numColumns(value) {
+        if (value !== this._numColumns.value) {
+            this._numColumns.next(value);
+        }
+    }
+    _layoutName(numColumns) {
+        return `columns-${numColumns}`;
+    }
+    setViewContainerRef(vcr) {
+        this._viewContainerRefSubject.next(vcr);
+    }
+    createWidgetItems(defs, vcr) {
+        const _createObservables = (defs || []).map(d => this.createWidgetItem(d, vcr));
+        const items$ = _createObservables.length > 0 ? combineLatest(_createObservables) : of([]);
+        return items$.pipe(map(items => items.filter(notNullOrUndefined)), tap(items => {
+            if (isDevMode()) {
+                const ids = items.map(v => v.widgetId);
+                if ((new Set(ids)).size !== ids.length) {
+                    console.warn(`[DashboardWidgetsService] Duplicate widget's with the same 'widgetId' found.`);
+                }
+            }
+        }));
+    }
+    createWidgetItem(def, vcr) {
+        if (!def.widgetId || typeof def.widgetId !== 'string' || def.widgetId.length < 1) {
+            if (isDevMode()) {
+                console.warn(`[DashboardWidgetsService] Widget ignored. All widgets must have a 'widgetId'.`, def);
+            }
+            return of(undefined);
+        }
+        return this.createWidgetPortal(def, vcr).pipe(map(portal => (Object.assign(Object.assign({}, def), { col: def.col || this.defaultColumn, order: def.order || 0, portal, __itemDef: def }))));
+    }
+    createWidgetPortal(def, vcr) {
+        if (typeof def.component === 'string') {
+            return this._dynamicComponentLoaderModule
+                .getComponentFactory(def.component)
+                .pipe(map(componentFactory => {
+                return new ComponentPortal(componentFactory.componentType, vcr, undefined, componentFactory.ngModule.componentFactoryResolver);
+            }), take(1));
+        }
+        return def.componentFactoryResolver
+            ? of(new ComponentPortal(def.component, vcr, undefined, def.componentFactoryResolver))
+            : of(new ComponentPortal(def.component, vcr));
+    }
+    updateOrder() {
+        return this.widgetColumns$
+            .pipe(take(1), tap(columns => columns.forEach(col => {
+            let i = 0;
+            col.items.forEach(itm => itm.order = i++);
+        })), mapTo(undefined));
+    }
+    toColumnRecords(items) {
+        let columns = [];
+        for (let i = 0; i < this.numColumns; i++) {
+            columns.push({ column: i, items: [] });
+        }
+        const colNotFound = [];
+        // Distribute items into columns
+        for (const item of items) {
+            const col = columns.find(c => c.column === item.col);
+            if (!col) {
+                // columns.push({ column: item.col, items: [ item ] })
+                // if (item.col < 0) {
+                //   const col0: IDashboardWidgetsColumnRecord | undefined = columns.find(c => c.column === 0)
+                //   if (col0) {
+                //     col0.items.push(item)
+                //   }
+                // } else if (item.col > this.numColumns - 1) {
+                //   const colMax: IDashboardWidgetsColumnRecord | undefined = columns.find(c => c.column === this.numColumns - 1)
+                //   if (colMax) {
+                //     colMax.items.push(item)
+                //   }
+                // }
+                colNotFound.push(item);
+            }
+            else {
+                col.items.push(item);
+            }
+        }
+        for (let i = 0; i < colNotFound.length; i++) {
+            const item = colNotFound[i];
+            const col = columns
+                .find(c => c.column === i % this.numColumns);
+            if (col) {
+                col.items.push(item);
+            }
+        }
+        // Sort columns
+        columns = columns.sort((a, b) => a.column - b.column);
+        // Sort columns items
+        columns.forEach(col => col.items.sort((a, b) => a.order - b.order));
+        return columns;
+    }
+    withLayoutPreferences(items, layout) {
+        const _items = [];
+        for (const item of items) {
+            const itemPref = layout.items.find(x => x.widgetId === item.widgetId);
+            _items.push(Object.assign(Object.assign({}, item), (itemPref || {})));
+        }
+        return _items;
+    }
+    savePreferences() {
+        // Right now the items are moved between the column record arrays, but the
+        // 'col' prop is not updated, so it is mapped to corrected items here from
+        // the column records.
+        const items$ = this.widgetColumns$.pipe(map(columns => []
+            .concat(...(columns.map(c => c.items.map(itm => (Object.assign(Object.assign({}, itm), { col: c.column }))))))));
+        return combineLatest([items$, this.numColumns$]).pipe(auditTime(0), take(1), switchMap(([items, numColumns]) => {
+            return this._preferences.updateLayout(this.preferenceKey, {
+                name: this._layoutName(numColumns),
+                items
+            });
+        }), mapTo(undefined));
+    }
+}
+DashboardWidgetsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetsService, deps: [{ token: i1$1.TheSeamDynamicComponentLoader }, { token: DashboardWidgetsPreferencesService }], target: i0.ɵɵFactoryTarget.Injectable });
+DashboardWidgetsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.TheSeamDynamicComponentLoader }, { type: DashboardWidgetsPreferencesService }]; } });
+
+class DashboardWidgetsComponent {
+    constructor(_dashboardWidgets, _viewContainerRef, _cdr, _baseLayoutRef) {
+        this._dashboardWidgets = _dashboardWidgets;
+        this._viewContainerRef = _viewContainerRef;
+        this._cdr = _cdr;
+        this._baseLayoutRef = _baseLayoutRef;
+        this.faLock = faLock;
+        this.faUnlock = faUnlock;
+        this._actionWidgetDragToggleName = 'widget-drag-toggle';
+        this._ngUnsubscribe = new Subject();
+        this._gapSize = new BehaviorSubject(30);
+        this.widgetsDraggable = false;
+        this._dragToggleVisible = new BehaviorSubject(true);
+        this._containers = new BehaviorSubject([]);
+        this._layoutChange = new Subject();
+        this.widgetsChange = new EventEmitter();
+        this._widthChange = new Subject();
+        this.containers$ = this._containers.asObservable();
+        this._gapStyleSize$ = this._gapSize.pipe(auditTime(0), map(size => size / 2), shareReplay({ bufferSize: 1, refCount: true }));
+        this._widthChange.pipe(debounceTime(30), tap(width => {
+            if (width > 1300) {
+                this.numColumns = 3;
+            }
+            else if (width > 800) {
+                this.numColumns = 2;
+            }
+            else {
+                this.numColumns = 1;
+            }
+        }), takeUntil(this._ngUnsubscribe)).subscribe();
+        this.widgetItems$ = this._dashboardWidgets.widgetItems$;
+        this.widgetColumns$ = this._dashboardWidgets.widgetColumns$;
+    }
+    get gapSize() { return this._gapSize.value; }
+    set gapSize(val) {
+        this._gapSize.next(coerceNumberProperty(val));
+    }
+    get dragToggleVisible() { return this._dragToggleVisible.value; }
+    set dragToggleVisible(val) {
+        this._dragToggleVisible.next(coerceBooleanProperty(val));
+    }
+    get numColumns() { return this._dashboardWidgets.numColumns; }
+    set numColumns(val) {
+        this._dashboardWidgets.numColumns = coerceNumberProperty(val);
+    }
+    set widgets(value) { this._dashboardWidgets.widgets = value || []; }
+    get widgets() { return this._dashboardWidgets.widgets; }
+    ngOnInit() {
+        // this._dashboardWidgets.setViewContainerRef(this._viewContainerRef)
+        this._layoutChange.pipe(switchMap(() => this.widgetItems$.pipe(take(1), tap(widgetItems => this.widgetsChange.emit(widgetItems)), 
+        // map(widgetItems => this._dashboardWidgets.toSerializeableItems(widgetItems)),
+        // tap(v => console.log('serializable', v)),
+        switchMap(() => this._dashboardWidgets.savePreferences()))), takeUntil(this._ngUnsubscribe)).subscribe();
+    }
+    ngOnDestroy() {
+        this._unregisterToggleAction();
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    ngAfterViewInit() {
+        var _a;
+        if (this._baseLayoutRef) {
+            this._dragToggleVisible.pipe(distinctUntilChanged(), tap(visible => {
+                const isRegistered = this._isActionToggleActionRegistered();
+                if (visible && !isRegistered) {
+                    this._registerToggleAction();
+                }
+                else if (!visible && isRegistered) {
+                    this._unregisterToggleAction();
+                }
+            }), takeUntil(this._ngUnsubscribe)).subscribe();
+        }
+        (_a = this.containers) === null || _a === void 0 ? void 0 : _a.changes.pipe(startWith(undefined), map(() => { var _a; return ((_a = this.containers) === null || _a === void 0 ? void 0 : _a.toArray()) || []; }), takeUntil(this._ngUnsubscribe), finalize(() => this._containers.next([]))).subscribe(v => this._containers.next(v));
+    }
+    _registerToggleAction() {
+        if (this._baseLayoutRef) {
+            // This should probably use a component dynamically created from the
+            // config and return a ref to it, instead of using a template.
+            if (this._toggleBtnTpl) {
+                this._baseLayoutRef.registerAction({
+                    // type: 'button',
+                    type: 'template',
+                    name: this._actionWidgetDragToggleName,
+                    label: 'Toggle Widget Dragging',
+                    // exec: () => {
+                    //   console.log('toggle')
+                    // },
+                    template: this._toggleBtnTpl
+                });
+            }
+        }
+    }
+    _unregisterToggleAction() {
+        if (this._baseLayoutRef) {
+            this._baseLayoutRef.unregisterAction(this._actionWidgetDragToggleName);
+        }
+    }
+    _isActionToggleActionRegistered() {
+        if (!this._baseLayoutRef) {
+            return false;
+        }
+        return this._baseLayoutRef.isActionRegistered(this._actionWidgetDragToggleName);
+    }
+    drop(event) {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+            this._dashboardWidgets.updateOrder().subscribe(() => this._layoutChange.next());
+        }
+        else {
+            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+            this._dashboardWidgets.updateOrder().subscribe(() => this._layoutChange.next());
+        }
+    }
+    _containerTrackByFn(index, item) {
+        return item.widgetId;
+    }
+    _columnsTrackByFn(index, record) {
+        return record.column;
+    }
+    toggleDragging() {
+        this.widgetsDraggable = !this.widgetsDraggable;
+        this._cdr.detectChanges();
+    }
+    _resized(event) {
+        this._widthChange.next(event.size.width);
+    }
+}
+DashboardWidgetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetsComponent, deps: [{ token: DashboardWidgetsService }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: THESEAM_BASE_LAYOUT_REF, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DashboardWidgetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: DashboardWidgetsComponent, selector: "seam-dashboard-widgets", inputs: { gapSize: "gapSize", widgetsDraggable: "widgetsDraggable", dragToggleVisible: "dragToggleVisible", numColumns: "numColumns", widgets: "widgets" }, outputs: { widgetsChange: "widgetsChange" }, providers: [
+        {
+            provide: THESEAM_WIDGET_ACCESSOR,
+            // tslint:disable-next-line:no-use-before-declare
+            useExisting: forwardRef(() => DashboardWidgetsComponent)
+        },
+        {
+            provide: THESEAM_DASHBOARD_WIDGETS_ACCESSOR,
+            // tslint:disable-next-line:no-use-before-declare
+            useExisting: forwardRef(() => DashboardWidgetsComponent)
+        },
+    ], viewQueries: [{ propertyName: "_toggleBtnTpl", first: true, predicate: ["toggleBtnTpl"], descendants: true, static: true }, { propertyName: "containers", predicate: DashboardWidgetContainerComponent, descendants: true }, { propertyName: "cdkDragDirectives", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<!--\n  This is an ugly trick I am using to render the component into an <ng-content>\n  wrapped in an <ng-template> to move the component to different outlets without\n  reinitializing it. This way the widget won't reload when moving between\n  columns. When I remember how I programatically did this I will remove this\n  weirdness.\n -->\n <seam-dashboard-widget-container *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\" [def]=\"$any(item)\">\n  <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n  <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n  style=\"flex: 1410px;\"\n  [style.padding.px]=\"_gapStyleSize$ | async\"\n  (seamElemResized)=\"_resized($event)\"\n  cdkDropListGroup>\n  <div *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n    class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n    cdkDropList\n    [cdkDropListData]=\"col.items\"\n    (cdkDropListDropped)=\"drop($any($event))\">\n    <div *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n      class=\"dashboard-widgets-list-item\"\n      [attr.data-widget-id]=\"item.widgetId\"\n      cdkDrag\n      [cdkDragDisabled]=\"!widgetsDraggable\">\n      <div [style.margin.px]=\"_gapStyleSize$ | async\">\n        <seam-dashboard-widget-template-container [item]=\"item\"></seam-dashboard-widget-template-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n  <button seamButton theme=\"baselayout-action\" title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\" (click)=\"toggleDragging()\">\n    <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n  </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i6.ElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"] }, { kind: "component", type: DashboardWidgetContainerComponent, selector: "seam-dashboard-widget-container", inputs: ["def"] }, { kind: "component", type: DashboardWidgetTemplateContainerComponent, selector: "seam-dashboard-widget-template-container", inputs: ["item"] }, { kind: "directive", type: DashboardWidgetPortalOutletDirective, selector: "[seamDashboardWidgetPortalOutlet]", inputs: ["seamDashboardWidgetPortalOutlet"], outputs: ["attached"], exportAs: ["seamDashboardWidgetPortalOutlet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    InputBoolean()
+], DashboardWidgetsComponent.prototype, "widgetsDraggable", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardWidgetsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-dashboard-widgets', providers: [
+                        {
+                            provide: THESEAM_WIDGET_ACCESSOR,
+                            // tslint:disable-next-line:no-use-before-declare
+                            useExisting: forwardRef(() => DashboardWidgetsComponent)
+                        },
+                        {
+                            provide: THESEAM_DASHBOARD_WIDGETS_ACCESSOR,
+                            // tslint:disable-next-line:no-use-before-declare
+                            useExisting: forwardRef(() => DashboardWidgetsComponent)
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n  This is an ugly trick I am using to render the component into an <ng-content>\n  wrapped in an <ng-template> to move the component to different outlets without\n  reinitializing it. This way the widget won't reload when moving between\n  columns. When I remember how I programatically did this I will remove this\n  weirdness.\n -->\n <seam-dashboard-widget-container *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\" [def]=\"$any(item)\">\n  <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n  <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n  style=\"flex: 1410px;\"\n  [style.padding.px]=\"_gapStyleSize$ | async\"\n  (seamElemResized)=\"_resized($event)\"\n  cdkDropListGroup>\n  <div *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n    class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n    cdkDropList\n    [cdkDropListData]=\"col.items\"\n    (cdkDropListDropped)=\"drop($any($event))\">\n    <div *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n      class=\"dashboard-widgets-list-item\"\n      [attr.data-widget-id]=\"item.widgetId\"\n      cdkDrag\n      [cdkDragDisabled]=\"!widgetsDraggable\">\n      <div [style.margin.px]=\"_gapStyleSize$ | async\">\n        <seam-dashboard-widget-template-container [item]=\"item\"></seam-dashboard-widget-template-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n  <button seamButton theme=\"baselayout-action\" title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\" (click)=\"toggleDragging()\">\n    <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n  </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: DashboardWidgetsService }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [THESEAM_BASE_LAYOUT_REF]
+                    }] }];
+    }, propDecorators: { gapSize: [{
+                type: Input
+            }], widgetsDraggable: [{
+                type: Input
+            }], dragToggleVisible: [{
+                type: Input
+            }], numColumns: [{
+                type: Input
+            }], widgets: [{
+                type: Input
+            }], containers: [{
+                type: ViewChildren,
+                args: [DashboardWidgetContainerComponent]
+            }], cdkDragDirectives: [{
+                type: ViewChildren,
+                args: [CdkDrag]
+            }], _toggleBtnTpl: [{
+                type: ViewChild,
+                args: ['toggleBtnTpl', { static: true }]
+            }], widgetsChange: [{
+                type: Output
+            }] } });
+
+class DashboardComponent {
+    constructor() {
+        this.widgetsDraggable = true;
+    }
+}
+DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: DashboardComponent, selector: "seam-dashboard", inputs: { widgets: "widgets", widgetsDraggable: "widgetsDraggable" }, ngImport: i0, template: "<seam-dashboard-widgets [widgets]=\"widgets\" [widgetsDraggable]=\"widgetsDraggable\"></seam-dashboard-widgets>\n", styles: [""], dependencies: [{ kind: "component", type: DashboardWidgetsComponent, selector: "seam-dashboard-widgets", inputs: ["gapSize", "widgetsDraggable", "dragToggleVisible", "numColumns", "widgets"], outputs: ["widgetsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+__decorate([
+    InputBoolean()
+], DashboardComponent.prototype, "widgetsDraggable", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: DashboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<seam-dashboard-widgets [widgets]=\"widgets\" [widgetsDraggable]=\"widgetsDraggable\"></seam-dashboard-widgets>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { widgets: [{
+                type: Input
+            }], widgetsDraggable: [{
+                type: Input
+            }] } });
+
+class TheSeamDashboardModule {
+}
+TheSeamDashboardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamDashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: TheSeamDashboardModule, declarations: [DashboardComponent,
+        DashboardWidgetsComponent,
+        DashboardWidgetContainerComponent,
+        DashboardWidgetTemplateContainerComponent,
+        DashboardWidgetPortalOutletDirective], imports: [CommonModule,
+        PortalModule,
+        DragDropModule,
+        TheSeamButtonsModule,
+        TheSeamIconModule,
+        TheSeamSharedModule], exports: [DashboardComponent,
+        DashboardWidgetsComponent,
+        DashboardWidgetPortalOutletDirective] });
+TheSeamDashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamDashboardModule, imports: [CommonModule,
+        PortalModule,
+        DragDropModule,
+        TheSeamButtonsModule,
+        TheSeamIconModule,
+        TheSeamSharedModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamDashboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DashboardComponent,
+                        DashboardWidgetsComponent,
+                        DashboardWidgetContainerComponent,
+                        DashboardWidgetTemplateContainerComponent,
+                        DashboardWidgetPortalOutletDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        PortalModule,
+                        DragDropModule,
+                        TheSeamButtonsModule,
+                        TheSeamIconModule,
+                        TheSeamSharedModule
+                    ],
+                    exports: [
+                        DashboardComponent,
+                        DashboardWidgetsComponent,
+                        DashboardWidgetPortalOutletDirective
+                    ]
+                }]
+        }] });
+
+const THESEAM_SIDE_NAV_ACCESSOR = new InjectionToken('THESEAM_SIDE_NAV_ACCESSOR');
+
+const EXPANDED_STATE$1 = 'expanded';
+const COLLAPSED_STATE$1 = 'collapsed';
+const FULL_STATE = 'full';
+const COMPACT_STATE = 'compact';
+class SideNavItemComponent {
+    constructor(_sideNav, _parent) {
+        this._sideNav = _sideNav;
+        this._parent = _parent;
+        this._ngUnsubscribe = new Subject();
+        this.faAngleLeft = faAngleLeft;
+        this.active = false;
+        this._link = new BehaviorSubject(undefined);
+        this.link$ = this._link.asObservable();
+        this.hierLevel = 0;
+        this.indentSize = 10;
+        this._expanded = new BehaviorSubject(false);
+        this.expanded$ = this._expanded.asObservable();
+        this._compact = new BehaviorSubject(false);
+        this.compact$ = this._compact.asObservable();
+        this.badgeTheme = 'danger';
+        this.childGroupAnimState$ = this.expanded$
+            .pipe(map(expanded => expanded ? EXPANDED_STATE$1 : COLLAPSED_STATE$1));
+        this.compactAnimState$ = this.compact$
+            .pipe(map(compact => compact ? COMPACT_STATE : FULL_STATE));
+    }
+    set link(value) { this._link.next(value); }
+    get link() { return this._link.value; }
+    set expanded(value) { this._expanded.next(coerceBooleanProperty(value)); }
+    get expanded() { return this._expanded.value; }
+    set compact(value) { this._compact.next(coerceBooleanProperty(value)); }
+    get compact() { return this._compact.value; }
+    get badgeTooltip() { return this._badgeTooltip; }
+    set badgeTooltip(value) {
+        if (value !== null && value !== undefined) {
+            if (typeof value === 'string') {
+                this._badgeTooltip = {
+                    tooltip: value,
+                    placement: 'auto',
+                    disabled: false
+                };
+            }
+            else {
+                this._badgeTooltip = Object.assign(Object.assign({}, value), { placement: value.placement || 'auto', disabled: typeof (value === null || value === void 0 ? void 0 : value.disabled) === 'boolean'
+                        ? value.disabled
+                        : typeof value.tooltip === 'string' ? false : true });
+            }
+        }
+        else {
+            this._badgeTooltip = undefined;
+        }
+    }
+    get _isActiveCssClass() { return this.active; }
+    get _attrDataHierLevel() { return this.hierLevel; }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    get hasChildren() {
+        return Array.isArray(this.children) && this.children.length > 0;
+    }
+    toggleChildren() {
+        this.expanded = !this.expanded;
+    }
+    _linkClicked() {
+        // Close nav when link is clicked while in overlay state
+        if (this._sideNav.overlay) {
+            this._sideNav.collapse();
+        }
+    }
+}
+SideNavItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SideNavItemComponent, deps: [{ token: THESEAM_SIDE_NAV_ACCESSOR }, { token: SideNavItemComponent, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+SideNavItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: { itemType: "itemType", icon: "icon", label: "label", active: "active", link: "link", queryParams: "queryParams", children: "children", hierLevel: "hierLevel", indentSize: "indentSize", expanded: "expanded", compact: "compact", badgeText: "badgeText", badgeTheme: "badgeTheme", badgeSrContent: "badgeSrContent", badgeTooltip: "badgeTooltip" }, host: { properties: { "class.seam-side-nav-item--active": "this._isActiveCssClass", "attr.data-hier-level": "this._attrDataHierLevel" } }, exportAs: ["seamSideNavItem"], ngImport: i0, template: "<div class=\"d-flex flex-row\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state.active\"\n      [expanded]=\"$any(child).__state.expanded\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    (click)=\"_linkClicked()\">\n    <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n    <div class=\"side-nav-item--icon\">\n      <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\"\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"side-nav-item--toggle-btn\"\n      [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["seam-side-nav-item{display:block;transition:.25s ease-in-out background-color}seam-side-nav-item.seam-side-nav-item--active{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .active,seam-side-nav-item.seam-side-nav-item--active:active,seam-side-nav-item.seam-side-nav-item--active .side-nav-item.active:hover{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item.seam-side-nav-item--active .nav-link{color:#fff}seam-side-nav-item .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#2f71a9;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn{color:#fff}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i4$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip"], exportAs: ["seamSideNavItem"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
+        trigger('childGroupAnim', [
+            state(EXPANDED_STATE$1, style({ height: '*' })),
+            state(COLLAPSED_STATE$1, style({ height: 0, 'overflow-y': 'hidden', visibility: 'hidden' })),
+            transition(`${EXPANDED_STATE$1} <=> ${COLLAPSED_STATE$1}`, animate('0.2s ease-in-out')),
+        ]),
+        trigger('compactAnim', [
+        // transition('* <=> *', [
+        //   query(':enter', [
+        //     style({ opacity: '0' }),
+        //     animate('5.2s ease-in-out', style({ opacity: '1' }))
+        //   ], { optional: true }),
+        //   query(':leave', [
+        //     style({ opacity: '1' }),
+        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
+        //   ], { optional: true })
+        // ])
+        // state(FULL_STATE, style({ opacity: '1' })),
+        // state(COMPACT_STATE, style({ opacity: '0' })),
+        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, animate('5.2s ease-in-out')),
+        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, [
+        // transition('* <=> *', [
+        //   query(':leave', [
+        //     style({ opacity: '1' }),
+        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
+        //   ], { optional: true })
+        // ]),
+        ])
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    InputBoolean()
+], SideNavItemComponent.prototype, "active", void 0);
+__decorate([
+    InputNumber(0)
+], SideNavItemComponent.prototype, "hierLevel", void 0);
+__decorate([
+    InputNumber(10)
+], SideNavItemComponent.prototype, "indentSize", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SideNavItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-side-nav-item', exportAs: 'seamSideNavItem', animations: [
+                        trigger('childGroupAnim', [
+                            state(EXPANDED_STATE$1, style({ height: '*' })),
+                            state(COLLAPSED_STATE$1, style({ height: 0, 'overflow-y': 'hidden', visibility: 'hidden' })),
+                            transition(`${EXPANDED_STATE$1} <=> ${COLLAPSED_STATE$1}`, animate('0.2s ease-in-out')),
+                        ]),
+                        trigger('compactAnim', [
+                        // transition('* <=> *', [
+                        //   query(':enter', [
+                        //     style({ opacity: '0' }),
+                        //     animate('5.2s ease-in-out', style({ opacity: '1' }))
+                        //   ], { optional: true }),
+                        //   query(':leave', [
+                        //     style({ opacity: '1' }),
+                        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
+                        //   ], { optional: true })
+                        // ])
+                        // state(FULL_STATE, style({ opacity: '1' })),
+                        // state(COMPACT_STATE, style({ opacity: '0' })),
+                        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, animate('5.2s ease-in-out')),
+                        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, [
+                        // transition('* <=> *', [
+                        //   query(':leave', [
+                        //     style({ opacity: '1' }),
+                        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
+                        //   ], { optional: true })
+                        // ]),
+                        ])
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"d-flex flex-row\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state.active\"\n      [expanded]=\"$any(child).__state.expanded\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    (click)=\"_linkClicked()\">\n    <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n    <div class=\"side-nav-item--icon\">\n      <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\"\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"side-nav-item--toggle-btn\"\n      [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["seam-side-nav-item{display:block;transition:.25s ease-in-out background-color}seam-side-nav-item.seam-side-nav-item--active{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .active,seam-side-nav-item.seam-side-nav-item--active:active,seam-side-nav-item.seam-side-nav-item--active .side-nav-item.active:hover{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item.seam-side-nav-item--active .nav-link{color:#fff}seam-side-nav-item .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#2f71a9;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn{color:#fff}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [THESEAM_SIDE_NAV_ACCESSOR]
+                    }] }, { type: SideNavItemComponent, decorators: [{
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }, {
+                        type: Host
+                    }] }];
+    }, propDecorators: { itemType: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], link: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
+            }], children: [{
+                type: Input
+            }], hierLevel: [{
+                type: Input
+            }], indentSize: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], badgeTheme: [{
+                type: Input
+            }], badgeSrContent: [{
+                type: Input
+            }], badgeTooltip: [{
+                type: Input
+            }], _isActiveCssClass: [{
+                type: HostBinding,
+                args: ['class.seam-side-nav-item--active']
+            }], _attrDataHierLevel: [{
+                type: HostBinding,
+                args: ['attr.data-hier-level']
+            }] } });
+
+class SideNavToggleComponent {
+    constructor() {
+        this.faBars = faBars;
+        this.expanded = false;
+        this.toggleExpand = new EventEmitter();
+    }
+    ngOnInit() { }
+    toggle() {
+        this.toggleExpand.emit();
+    }
+}
+SideNavToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SideNavToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideNavToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: SideNavToggleComponent, selector: "seam-side-nav-toggle", inputs: { expanded: "expanded" }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "class.side-nav-toggle--compact": "!expanded" } }, ngImport: i0, template: "<div class=\"side-nav-toggle--content\" *ngIf=\"expanded\">\n  <ng-content></ng-content>\n</div>\n<button seamIconBtn [icon]=\"faBars\"\n  iconType=\"borderless-styled-square\"\n  btnSize=\"sm\"\n  class=\"side-nav-toggle--btn ml-1\"\n  (click)=\"toggle()\">\n  <span class=\"sr-only\">Toggle sidebar</span>\n</button>\n", styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{position:absolute;top:0;right:5px;color:#fff}seam-side-nav-toggle .side-nav-toggle--btn seam-icon{padding:5px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    InputBoolean()
+], SideNavToggleComponent.prototype, "expanded", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SideNavToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-side-nav-toggle', host: {
+                        '[class.side-nav-toggle--compact]': '!expanded'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"side-nav-toggle--content\" *ngIf=\"expanded\">\n  <ng-content></ng-content>\n</div>\n<button seamIconBtn [icon]=\"faBars\"\n  iconType=\"borderless-styled-square\"\n  btnSize=\"sm\"\n  class=\"side-nav-toggle--btn ml-1\"\n  (click)=\"toggle()\">\n  <span class=\"sr-only\">Toggle sidebar</span>\n</button>\n", styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{position:absolute;top:0;right:5px;color:#fff}seam-side-nav-toggle .side-nav-toggle--btn seam-icon{padding:5px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { expanded: [{
+                type: Input
+            }], toggleExpand: [{
+                type: Output
+            }] } });
+
+function isNavItemType(item, type) {
+    return item.itemType === type;
+}
+function isNavItemActive(item) {
+    var _a, _b;
+    return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.active) !== null && _b !== void 0 ? _b : false;
+}
+function isExpanded(item) {
+    var _a, _b;
+    return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.expanded) !== null && _b !== void 0 ? _b : false;
+}
+function hasChildren(item) {
+    return canHaveChildren(item) && hasProperty(item, 'children') && item.children.length > 0;
+}
+function canHaveChildren(item) {
+    return isNavItemType(item, 'basic') || isNavItemType(item, 'link');
+}
+function hasActiveChild(item) {
+    if (!hasChildren(item)) {
+        return false;
+    }
+    for (const child of item.children) {
+        if (getItemStateProp(child, 'active')) {
+            return true;
+        }
+    }
+    return false;
+}
+function hasExpandedChild(item) {
+    if (!hasChildren(item)) {
+        return false;
+    }
+    for (const child of item.children) {
+        if (getItemStateProp(child, 'expanded')) {
+            return true;
+        }
+    }
+    return false;
+}
+function canBeActive(item) {
+    return isNavItemType(item, 'basic') || isNavItemType(item, 'link');
+}
+function canExpand(item) {
+    return canHaveChildren(item);
+}
+function findLinkItems(items) {
+    const linkItems = [];
+    const _fn = (_items) => {
+        for (const item of _items) {
+            if (isNavItemType(item, 'link')) {
+                linkItems.push(item);
+            }
+            if (canHaveChildren(item) && hasProperty(item, 'children')) {
+                _fn(item.children);
+            }
+        }
+    };
+    _fn(items);
+    return linkItems;
+}
+function setItemStateProp(item, prop, value) {
+    if (hasProperty(item, '__state')) {
+        item.__state[prop] = value;
+    }
+}
+function getItemStateProp(item, prop) {
+    return setDefaultState(item).__state[prop];
+}
+function setDefaultState(item) {
+    if (hasProperty(item, '__state')) {
+        return item;
+    }
+    item.__state = {
+        active: false,
+        expanded: false
+    };
+    // TODO: See if there is a nice way to fix the typing for this.
+    return item;
+}
+
+class TheSeamSideNavService {
+    constructor(_router) {
+        this._router = _router;
+        this._updatingCount = new BehaviorSubject(0);
+        this.itemChanged = new Subject();
+        this.loading$ = this._updatingCount.pipe(map(count => count > 0), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    createItemsObservable(items) {
+        return defer(() => {
+            this.updateItemsStates(items);
+            return new Observable((subscriber) => {
+                const stateChangeSub = this.itemChanged.pipe(switchMap(() => this.loading$.pipe(filter(loading => !loading)))).subscribe(() => {
+                    subscriber.next(items);
+                });
+                try {
+                    this.updateItemsStates(items);
+                }
+                catch (err) {
+                    subscriber.error(err);
+                }
+                // const linkItems = findLinkItems(items)
+                const routeChangeSub = this._router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+                    try {
+                        this.updateItemsStates(items);
+                    }
+                    catch (err) {
+                        subscriber.error(err);
+                    }
+                });
+                return () => {
+                    stateChangeSub.unsubscribe();
+                    routeChangeSub.unsubscribe();
+                };
+            }).pipe(startWith(items));
+        });
+    }
+    _incUpdatingCount() {
+        this._updatingCount.next(this._updatingCount.value + 1);
+    }
+    _decrUpdatingCount() {
+        this._updatingCount.next(this._updatingCount.value - 1);
+    }
+    updateItemsStates(items) {
+        this._incUpdatingCount();
+        try {
+            for (const item of items) {
+                if (hasChildren(item)) {
+                    this.updateItemsStates(item.children);
+                }
+                this.updateItemState(item);
+            }
+            this._decrUpdatingCount();
+        }
+        catch (err) {
+            this._decrUpdatingCount();
+            throw err;
+        }
+    }
+    updateItemState(item) {
+        this._incUpdatingCount();
+        try {
+            setDefaultState(item);
+            if (isNavItemType(item, 'link')) {
+                const url = this._getUrl(item);
+                if (notNullOrUndefined(url)) {
+                    const opts = this._getMatchOptions(item);
+                    this.setItemStateProp(item, 'active', this._router.isActive(url, opts));
+                }
+            }
+            // TODO: Implement this in a more optimized way. Unless our apps start
+            // having large side-navs constantly updating their state, this shouldn't
+            // have much impact on performance.
+            this._updateItemExpandedState(item);
+            this._decrUpdatingCount();
+        }
+        catch (err) {
+            this._decrUpdatingCount();
+            throw err;
+        }
+    }
+    _updateItemsExpandedState(items) {
+        for (const item of items) {
+            if (hasChildren(item)) {
+                this._updateItemsExpandedState(item.children);
+            }
+            this._updateItemExpandedState(item);
+        }
+    }
+    _updateItemExpandedState(item) {
+        if (!canExpand(item)) {
+            if (getItemStateProp(item, 'expanded')) {
+                this.setItemStateProp(item, 'expanded', false);
+            }
+            return;
+        }
+        if (hasChildren(item)) {
+            this._updateItemsExpandedState(item.children);
+        }
+        if (hasActiveChild(item) || hasExpandedChild(item)) {
+            if (!getItemStateProp(item, 'expanded')) {
+                this.setItemStateProp(item, 'expanded', true);
+            }
+        }
+        else {
+            if (getItemStateProp(item, 'expanded')) {
+                this.setItemStateProp(item, 'expanded', false);
+            }
+        }
+    }
+    _getNavExtras(item) {
+        const navigationExtras = {};
+        if (hasProperty(item, 'queryParams')) {
+            navigationExtras.queryParams = item.queryParams;
+        }
+        if (hasProperty(item, 'fragment')) {
+            navigationExtras.fragment = item.fragment;
+        }
+        if (hasProperty(item, 'queryParamsHandling')) {
+            navigationExtras.queryParamsHandling = item.queryParamsHandling;
+        }
+        if (hasProperty(item, 'preserveFragment')) {
+            navigationExtras.preserveFragment = item.preserveFragment;
+        }
+        return navigationExtras;
+    }
+    _getUrl(item) {
+        const link = item.link;
+        if (typeof link === 'string') {
+            return this._router.createUrlTree([link], this._getNavExtras(item)).toString();
+        }
+        else if (Array.isArray(link)) {
+            return this._router.createUrlTree(link, this._getNavExtras(item)).toString();
+        }
+        return null;
+    }
+    _getMatchOptions(item) {
+        const defaultMatchOpts = {
+            paths: 'subset',
+            queryParams: 'subset',
+            fragment: 'ignored',
+            matrixParams: 'ignored'
+        };
+        if (hasProperty(item, 'matchOptions')) {
+            return Object.assign(Object.assign({}, defaultMatchOpts), item.matchOptions);
+        }
+        return defaultMatchOpts;
+    }
+    setItemStateProp(item, prop, value) {
+        const currentValue = getItemStateProp(item, prop);
+        if (currentValue !== value) {
+            setItemStateProp(item, prop, value);
+            const changed = {
+                item,
+                prop,
+                prevValue: currentValue,
+                newValue: value
+            };
+            this.itemChanged.next(changed);
+        }
+    }
+}
+TheSeamSideNavService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSideNavService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+TheSeamSideNavService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSideNavService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSideNavService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$2.Router }]; } });
+
+const EXPANDED_STATE = 'expanded';
+const COLLAPSED_STATE = 'collapsed';
+const EXPANDED_OVERLAY_STATE = 'expanded-overlay';
+const COLLAPSED_OVERLAY_STATE = 'collapsed-overlay';
+const EXPANDED_STATES = [EXPANDED_STATE, EXPANDED_OVERLAY_STATE];
+const COLLAPSED_STATES = [COLLAPSED_STATE, COLLAPSED_OVERLAY_STATE];
+const EXPAND_STATES = [...EXPANDED_STATES, ...COLLAPSED_STATES];
+function sideNavExpandStateChangeFn(fromState, toState) {
+    // console.log({ fromState, toState })
+    return fromState !== toState &&
+        (
+        // NOTE: The current way the side nav is being used it causes the
+        // component to sometimes get placed in the wrong location initially. It
+        // is fast enough to not be noticed without an initial animation usually,
+        // so it is commented out below until the initial placement issue it
+        // fixed.
+        //
+        // (
+        //   fromState === 'void' && EXPAND_STATES.indexOf(toState) !== -1
+        //   ||
+        //   toState === 'void' && EXPAND_STATES.indexOf(fromState) !== -1
+        // )
+        // ||
+        ((EXPANDED_STATES.indexOf(fromState) !== -1 && COLLAPSED_STATES.indexOf(toState) !== -1)
+            ||
+                (EXPANDED_STATES.indexOf(toState) !== -1 && COLLAPSED_STATES.indexOf(fromState) !== -1)));
+}
+class SideNavComponent {
+    constructor(_viewContainerRef, _layout, _sideNav, _baseLayoutRef) {
+        this._viewContainerRef = _viewContainerRef;
+        this._layout = _layout;
+        this._sideNav = _sideNav;
+        this._baseLayoutRef = _baseLayoutRef;
+        this._ngUnsubscribe = new Subject();
+        // @HostBinding('@sideNavExpand') _sideNavExpand = EXPANDED_STATE
+        // _sideNavExpand = EXPANDED_STATE
+        // @HostBinding('@sideNavAnim') _sideNavExpand = EXPANDED_STATE
+        this._sideNavExpand = 'initial';
+        this.hasHeaderToggle = true;
+        this._items = new BehaviorSubject([]);
+        this._expanded = new BehaviorSubject(true);
+        this.expanded$ = this._expanded.asObservable();
+        this._overlay = new BehaviorSubject(false);
+        this.overlay$ = this._overlay.asObservable();
+        this.toggleExpand = new EventEmitter();
+        this._backdropHidden = new BehaviorSubject(true);
+        this.items$ = this._items.asObservable().pipe(switchMap(items => this._sideNav.createItemsObservable(items)), shareReplay({ bufferSize: 1, refCount: true }));
+        this.isMobile$ = this._layout.isMobile$.pipe(tap(isMobile => isMobile ? this.collapse() : this.expand()));
+        this.sideNavExpandedState$ = combineLatest([this.expanded$, this.overlay$]).pipe(map(([expanded, overlay]) => expanded
+            ? overlay ? EXPANDED_OVERLAY_STATE : EXPANDED_STATE
+            : overlay ? COLLAPSED_OVERLAY_STATE : COLLAPSED_STATE), distinctUntilChanged());
+    }
+    get items() { return this._items.value; }
+    set items(value) { this._items.next(value); }
+    get expanded() { return this._expanded.value; }
+    set expanded(value) {
+        const expanded = coerceBooleanProperty(value);
+        const emit = expanded !== this.expanded;
+        this._expanded.next(expanded);
+        if (emit) {
+            this.toggleExpand.emit(coerceBooleanProperty(value));
+        }
+    }
+    get overlay() { return this._overlay.value; }
+    set overlay(value) { this._overlay.next(coerceBooleanProperty(value)); }
+    ngOnInit() {
+        if (this._baseLayoutRef) {
+            this._baseLayoutRef.registerNav(this);
+        }
+        this.isMobile$
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe(b => this.overlay = b);
+        this.sideNavExpandedState$
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe(v => this._sideNavExpand = v);
+        if (this._sideBarFooterTpl) {
+            this._sideBarFooterPortal = new TemplatePortal(this._sideBarFooterTpl, this._viewContainerRef);
+        }
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+        if (this._baseLayoutRef) {
+            this._baseLayoutRef.unregisterNav(this);
+        }
+    }
+    expand() {
+        this.expanded = true;
+    }
+    collapse() {
+        this.expanded = false;
+    }
+    toggle() {
+        this.expanded = !this.expanded;
+    }
+    animateStart() {
+        if (this.expanded) {
+            this._backdropHidden.next(false);
+        }
+    }
+    animateEnd() {
+        if (!this.expanded) {
+            this._backdropHidden.next(true);
+        }
+    }
+}
+SideNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SideNavComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.TheSeamLayoutService }, { token: TheSeamSideNavService }, { token: THESEAM_BASE_LAYOUT_REF, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: SideNavComponent, selector: "seam-side-nav", inputs: { hasHeaderToggle: "hasHeaderToggle", items: "items", expanded: "expanded", overlay: "overlay" }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "@sideNavAnim": "this._sideNavExpand" } }, providers: [
+        TheSeamSideNavService,
+        {
+            provide: THESEAM_SIDE_NAV_ACCESSOR,
+            // tslint:disable-next-line:no-use-before-declare
+            useExisting: forwardRef(() => SideNavComponent)
+        },
+    ], queries: [{ propertyName: "_sideBarFooterTpl", first: true, predicate: BaseLayoutSideBarFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"></div>\n\n<div class=\"side-nav-inner-wrapper\" [@sideNavExpand]=\"_sideNavExpand\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n        [compact]=\"!(expanded$ | async)\"\n        [itemType]=\"$any(item)?.itemType\"\n        [icon]=\"$any(item)?.icon\"\n        [label]=\"$any(item)?.label\"\n        [link]=\"$any(item)?.link\"\n        [badgeText]=\"$any(item)?.badge?.text\"\n        [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n        [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n        [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n        [queryParams]=\"$any(item)?.queryParams\"\n        [children]=\"$any(item)?.children\"\n        [active]=\"$any(item).__state.active\"\n        [expanded]=\"$any(item).__state.expanded\">\n      </seam-side-nav-item>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip"], exportAs: ["seamSideNavItem"] }, { kind: "component", type: SideNavToggleComponent, selector: "seam-side-nav-toggle", inputs: ["expanded"], outputs: ["toggleExpand"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
+        //
+        // TODO: This animation code turned into a mess. Clean it up and make it
+        // more smooth.
+        //
+        trigger('sideNavAnim', [
+            transition(sideNavExpandStateChangeFn, [
+                group([
+                    query('@sideNavBackdrop', animateChild(), { optional: true }),
+                    query('@sideNavExpand', animateChild(), { optional: true }),
+                ]),
+            ]),
+        ]),
+        trigger('sideNavBackdrop', [
+            state(EXPANDED_OVERLAY_STATE, style({ opacity: '1' })),
+            state(COLLAPSED_OVERLAY_STATE, style({ opacity: '0' })),
+            // transition((fromState, toState, element, params) => {
+            //   console.log('sideNavBackdrop v', fromState, toState, element, params)
+            //   return false
+            // }, []),
+            transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
+        ]),
+        trigger('sideNavExpand', [
+            // TODO: Make width configurable.
+            state(EXPANDED_STATE, style({ width: '260px' })),
+            state(COLLAPSED_STATE, style({ width: '50px', 'overflow-x': 'hidden' })),
+            state(EXPANDED_OVERLAY_STATE, style({
+                position: 'absolute',
+                top: 0,
+                height: '100%',
+                bottom: 0,
+                left: 0,
+                float: 'left',
+                zIndex: '9999',
+                width: 'calc(100vw - 50px)',
+                transform: 'translateX(0)'
+            })),
+            state(COLLAPSED_OVERLAY_STATE, style({
+                position: 'absolute',
+                top: 0,
+                height: '100%',
+                bottom: 0,
+                left: 0,
+                float: 'left',
+                zIndex: '9999',
+                width: 'calc(100vw - 50px)',
+                transform: 'translateX(calc(-100vw + 50px))',
+                'overflow-x': 'hidden'
+            })),
+            // transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
+            transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
+            // transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, [
+            //   // query(':leave', animateChild(), { optional: true }),
+            //   // query(':enter', animateChild(), { optional: true }),
+            //   group([
+            //     query(':leave', animateChild(), { optional: true }),
+            //     query(':enter', animateChild(), { optional: true }),
+            //     query('@compactAnim', animateChild(), { optional: true }),
+            //     animate('5.2s ease-in-out')
+            //   ])
+            // ]),
+        ])
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    InputBoolean()
+], SideNavComponent.prototype, "hasHeaderToggle", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SideNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-side-nav', providers: [
+                        TheSeamSideNavService,
+                        {
+                            provide: THESEAM_SIDE_NAV_ACCESSOR,
+                            // tslint:disable-next-line:no-use-before-declare
+                            useExisting: forwardRef(() => SideNavComponent)
+                        },
+                    ], animations: [
+                        //
+                        // TODO: This animation code turned into a mess. Clean it up and make it
+                        // more smooth.
+                        //
+                        trigger('sideNavAnim', [
+                            transition(sideNavExpandStateChangeFn, [
+                                group([
+                                    query('@sideNavBackdrop', animateChild(), { optional: true }),
+                                    query('@sideNavExpand', animateChild(), { optional: true }),
+                                ]),
+                            ]),
+                        ]),
+                        trigger('sideNavBackdrop', [
+                            state(EXPANDED_OVERLAY_STATE, style({ opacity: '1' })),
+                            state(COLLAPSED_OVERLAY_STATE, style({ opacity: '0' })),
+                            // transition((fromState, toState, element, params) => {
+                            //   console.log('sideNavBackdrop v', fromState, toState, element, params)
+                            //   return false
+                            // }, []),
+                            transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
+                        ]),
+                        trigger('sideNavExpand', [
+                            // TODO: Make width configurable.
+                            state(EXPANDED_STATE, style({ width: '260px' })),
+                            state(COLLAPSED_STATE, style({ width: '50px', 'overflow-x': 'hidden' })),
+                            state(EXPANDED_OVERLAY_STATE, style({
+                                position: 'absolute',
+                                top: 0,
+                                height: '100%',
+                                bottom: 0,
+                                left: 0,
+                                float: 'left',
+                                zIndex: '9999',
+                                width: 'calc(100vw - 50px)',
+                                transform: 'translateX(0)'
+                            })),
+                            state(COLLAPSED_OVERLAY_STATE, style({
+                                position: 'absolute',
+                                top: 0,
+                                height: '100%',
+                                bottom: 0,
+                                left: 0,
+                                float: 'left',
+                                zIndex: '9999',
+                                width: 'calc(100vw - 50px)',
+                                transform: 'translateX(calc(-100vw + 50px))',
+                                'overflow-x': 'hidden'
+                            })),
+                            // transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
+                            transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
+                            // transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, [
+                            //   // query(':leave', animateChild(), { optional: true }),
+                            //   // query(':enter', animateChild(), { optional: true }),
+                            //   group([
+                            //     query(':leave', animateChild(), { optional: true }),
+                            //     query(':enter', animateChild(), { optional: true }),
+                            //     query('@compactAnim', animateChild(), { optional: true }),
+                            //     animate('5.2s ease-in-out')
+                            //   ])
+                            // ]),
+                        ])
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"></div>\n\n<div class=\"side-nav-inner-wrapper\" [@sideNavExpand]=\"_sideNavExpand\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n        [compact]=\"!(expanded$ | async)\"\n        [itemType]=\"$any(item)?.itemType\"\n        [icon]=\"$any(item)?.icon\"\n        [label]=\"$any(item)?.label\"\n        [link]=\"$any(item)?.link\"\n        [badgeText]=\"$any(item)?.badge?.text\"\n        [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n        [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n        [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n        [queryParams]=\"$any(item)?.queryParams\"\n        [children]=\"$any(item)?.children\"\n        [active]=\"$any(item).__state.active\"\n        [expanded]=\"$any(item).__state.expanded\">\n      </seam-side-nav-item>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ViewContainerRef }, { type: i1.TheSeamLayoutService }, { type: TheSeamSideNavService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [THESEAM_BASE_LAYOUT_REF]
+                    }] }];
+    }, propDecorators: { _sideNavExpand: [{
+                type: HostBinding,
+                args: ['@sideNavAnim']
+            }], hasHeaderToggle: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], overlay: [{
+                type: Input
+            }], toggleExpand: [{
+                type: Output
+            }], _sideBarFooterTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutSideBarFooterDirective, { static: true, read: TemplateRef }]
+            }] } });
+
+class TheSeamSideNavModule {
+}
+TheSeamSideNavModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamSideNavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSideNavModule, declarations: [SideNavItemComponent,
+        SideNavComponent,
+        SideNavToggleComponent], imports: [CommonModule,
+        RouterModule,
+        TheSeamIconModule,
+        A11yModule,
+        TheSeamScrollbarModule,
+        TheSeamLayoutModule,
+        NgbTooltipModule,
+        PortalModule], exports: [SideNavItemComponent,
+        SideNavComponent,
+        SideNavToggleComponent] });
+TheSeamSideNavModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSideNavModule, imports: [CommonModule,
+        RouterModule,
+        TheSeamIconModule,
+        A11yModule,
+        TheSeamScrollbarModule,
+        TheSeamLayoutModule,
+        NgbTooltipModule,
+        PortalModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSideNavModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SideNavItemComponent,
+                        SideNavComponent,
+                        SideNavToggleComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        TheSeamIconModule,
+                        A11yModule,
+                        TheSeamScrollbarModule,
+                        TheSeamLayoutModule,
+                        NgbTooltipModule,
+                        PortalModule
+                    ],
+                    exports: [
+                        SideNavItemComponent,
+                        SideNavComponent,
+                        SideNavToggleComponent
+                    ]
+                }]
+        }] });
+
+class TopBarMenuButtonBase {
+}
+const _TopBarMenuButtonMixinBase = mixinDisabled(TopBarMenuButtonBase);
+class TopBarMenuButtonComponent extends _TopBarMenuButtonMixinBase {
+    constructor() {
+        super(...arguments);
+        this.faAngleDown = faAngleDown;
+        this.compact = false;
+    }
+    get _hasCompactClass() { return this.compact; }
+    get _hasPadding0Class() { return this.compact; }
+    get _hasRoundedClass() { return this.compact; }
+    get _hasBtnLinkClass() { return !this.compact; }
+    ngOnInit() { }
+    ngOnDestroy() { }
+}
+TopBarMenuButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TopBarMenuButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TopBarMenuButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TopBarMenuButtonComponent, selector: "button[seamTopBarMenuButton]", inputs: { disabled: "disabled", detailTpl: "detailTpl", compact: "compact", profileIcon: "profileIcon" }, host: { attributes: { "attr.type": "button" }, properties: { "attr.aria-disabled": "disabled.toString()", "attr.disabled": "disabled || null", "class.top-bar-menu-button--compact": "this._hasCompactClass", "class.p-0": "this._hasPadding0Class", "class.rounded": "this._hasRoundedClass", "class.btn-link": "this._hasBtnLinkClass" }, classAttribute: "btn border text-decoration-none py-0" }, exportAs: ["seamButton"], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-row\" *ngIf=\"!compact; else compactTpl\">\n  <div class=\"text-left flex-grow-1 text-truncate\">\n    <ng-template [ngTemplateOutlet]=\"$any(detailTpl)\"></ng-template>\n  </div>\n  <!-- Arrow Button -->\n  <div class=\"pl-2 d-flex flex-column\">\n    <div class=\"flex-grow-1\"></div>\n    <seam-icon class=\"d-block\" [icon]=\"faAngleDown\"></seam-icon>\n    <div class=\"flex-grow-1\"></div>\n  </div>\n</div>\n<ng-template #compactTpl>\n  <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n</ng-template>\n", styles: ["button[seamTopBarMenuButton]{min-width:200px;border-radius:0;border-top:0!important;border-bottom:0!important;border-right:0!important}button[seamTopBarMenuButton].top-bar-menu-button--compact{min-width:40px;border-left:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    InputBoolean()
+], TopBarMenuButtonComponent.prototype, "compact", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TopBarMenuButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[seamTopBarMenuButton]', encapsulation: ViewEncapsulation.None, exportAs: 'seamButton', inputs: ['disabled'], host: {
+                        'attr.type': 'button',
+                        'class': 'btn border text-decoration-none py-0',
+                        '[attr.aria-disabled]': 'disabled.toString()',
+                        '[attr.disabled]': 'disabled || null',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-row\" *ngIf=\"!compact; else compactTpl\">\n  <div class=\"text-left flex-grow-1 text-truncate\">\n    <ng-template [ngTemplateOutlet]=\"$any(detailTpl)\"></ng-template>\n  </div>\n  <!-- Arrow Button -->\n  <div class=\"pl-2 d-flex flex-column\">\n    <div class=\"flex-grow-1\"></div>\n    <seam-icon class=\"d-block\" [icon]=\"faAngleDown\"></seam-icon>\n    <div class=\"flex-grow-1\"></div>\n  </div>\n</div>\n<ng-template #compactTpl>\n  <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n</ng-template>\n", styles: ["button[seamTopBarMenuButton]{min-width:200px;border-radius:0;border-top:0!important;border-bottom:0!important;border-right:0!important}button[seamTopBarMenuButton].top-bar-menu-button--compact{min-width:40px;border-left:0!important}\n"] }]
+        }], propDecorators: { detailTpl: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], profileIcon: [{
+                type: Input
+            }], _hasCompactClass: [{
+                type: HostBinding,
+                args: ['class.top-bar-menu-button--compact']
+            }], _hasPadding0Class: [{
+                type: HostBinding,
+                args: ['class.p-0']
+            }], _hasRoundedClass: [{
+                type: HostBinding,
+                args: ['class.rounded']
+            }], _hasBtnLinkClass: [{
+                type: HostBinding,
+                args: ['class.btn-link']
+            }] } });
+
+class TopBarTitleComponent {
+    constructor() { }
+    ngOnInit() { }
+}
+TopBarTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TopBarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TopBarTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TopBarTitleComponent, selector: "seam-top-bar-title", inputs: { titleText: "titleText", subTitleText: "subTitleText" }, ngImport: i0, 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", styles: ["seam-top-bar-title{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i2$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TopBarTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-top-bar-title', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: ["seam-top-bar-title{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { titleText: [{
+                type: Input
+            }], subTitleText: [{
+                type: Input
+            }] } });
+
+class TopBarItemDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+TopBarItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TopBarItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TopBarItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: TopBarItemDirective, selector: "[seamTopBarItem]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TopBarItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamTopBarItem]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class TopBarMenuBtnDetailDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+TopBarMenuBtnDetailDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TopBarMenuBtnDetailDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TopBarMenuBtnDetailDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: TopBarMenuBtnDetailDirective, selector: "[seamTopBarMenuBtnDetail]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TopBarMenuBtnDetailDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamTopBarMenuBtnDetail]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class TopBarMenuDirective {
+    constructor(menu) {
+        this.menu = menu;
+    }
+}
+TopBarMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TopBarMenuDirective, deps: [{ token: i3$2.MenuComponent, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+TopBarMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: TopBarMenuDirective, selector: "seam-menu[seamTopBarMenu]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TopBarMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'seam-menu[seamTopBarMenu]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i3$2.MenuComponent, decorators: [{
+                        type: Self
+                    }] }];
+    } });
+
+/**
+ * Top bar of an app.
+ *
+ * The top bar is fairly opinionated, so most parts are not intended to be
+ * customized unless there is an input.
+ *
+ * > If you have to make a change and apply it externally with a css class or js
+ * > make sure there is an issue to get the feature changed, so we don't have
+ * > different modifications across our apps. Also, this will help make sure
+ * > your change should have even been done.
+ */
+class TheSeamTopBarComponent {
+    constructor(_layout) {
+        this._layout = _layout;
+        /** @ignore */
+        this._ngUnsubscribe = new Subject();
+        /** @ignore */
+        this.faBars = faBars;
+        /** Link target used when `logoHref` is specified. Defaults to `"_blank"` */
+        this.logoHrefTarget = '_blank';
+        /** Route to link to when `logo` is clicked. Defaults to `/`. */
+        this.logoRoute = '/';
+        /** Determines if the title should be displayed. */
+        this.hasTitle = false;
+        /** Icon to display on mobile to activate profile dropdown. Defaults to faUserCircle. */
+        this.profileIcon = faUserCircle;
+        this.isMobile$ = this._layout.isMobile$;
+    }
+    /** @ignore */
+    ngOnInit() { }
+    /** @ignore */
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    /** @ignore */
+    ngAfterContentInit() {
+        if (this._topBarItems) {
+            this._items$ = this._topBarItems.changes.pipe(startWith(undefined), takeUntil(this._ngUnsubscribe), map(() => { var _a; return ((_a = this._topBarItems) === null || _a === void 0 ? void 0 : _a.toArray()) || []; }), shareReplay({ bufferSize: 1, refCount: true }));
+        }
+    }
+}
+TheSeamTopBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamTopBarComponent, deps: [{ token: i1.TheSeamLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+TheSeamTopBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TheSeamTopBarComponent, selector: "seam-top-bar", inputs: { logo: "logo", logoSm: "logoSm", logoHref: "logoHref", logoHrefTarget: "logoHrefTarget", logoRoute: "logoRoute", hasTitle: "hasTitle", titleText: "titleText", subTitleText: "subTitleText", profileIcon: "profileIcon" }, queries: [{ propertyName: "_topBarMenu", first: true, predicate: TopBarMenuDirective, descendants: true, static: true }, { propertyName: "_topBarMenuBtnDetailTpl", first: true, predicate: TopBarMenuBtnDetailDirective, descendants: true }, { propertyName: "_topBarItems", predicate: TopBarItemDirective }], exportAs: ["seamTopBar"], ngImport: i0, template: "<!-- Nav Toggle -->\n<div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n  <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"faBars\" iconType=\"borderless-styled-square\"></button>\n</div>\n\n<!-- Logo -->\n<div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n  [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n  <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </a>\n</div>\n\n<ng-template #useLogoRoute>\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </div>\n</ng-template>\n\n<!-- Title -->\n<div class=\"d-flex flex-column flex-grow-1\">\n  <seam-top-bar-title *ngIf=\"hasTitle\"\n    [titleText]=\"titleText\"\n    [subTitleText]=\"subTitleText\"\n    [class.ml-2]=\"isMobile$ | async\">\n  </seam-top-bar-title>\n</div>\n\n<!-- Items -->\n<div class=\"top-bar-icon-container mr-2\">\n  <ng-container *ngFor=\"let item of _items$ | async\">\n    <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n  </ng-container>\n</div>\n\n<!-- Menu -->\n<button seamTopBarMenuButton\n  [seamMenuToggle]=\"_topBarMenu?.menu\"\n  [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n  [compact]=\"isMobile$ | async\"\n  [profileIcon]=\"profileIcon\">\n</button>\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar-icon-container{margin:auto 0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.DefaultImgSrcDirective, selector: "  img[src.xs],    img[src.sm],    img[src.md],    img[src.lg],   img[src.xl],  img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl],  img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]", inputs: ["src.xs", "src.sm", "src.md", "src.lg", "src.xl", "src.lt-sm", "src.lt-md", "src.lt-lg", "src.lt-xl", "src.gt-xs", "src.gt-sm", "src.gt-md", "src.gt-lg"] }, { kind: "component", type: i2$1.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions"], exportAs: ["seamMenuToggle"] }, { kind: "directive", type: BaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: ["type", "aria-label"], exportAs: ["seamBaseLayoutNavToggle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TopBarTitleComponent, selector: "seam-top-bar-title", inputs: ["titleText", "subTitleText"] }, { kind: "component", type: TopBarMenuButtonComponent, selector: "button[seamTopBarMenuButton]", inputs: ["disabled", "detailTpl", "compact", "profileIcon"], exportAs: ["seamButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    InputBoolean()
+], TheSeamTopBarComponent.prototype, "hasTitle", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamTopBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-top-bar', encapsulation: ViewEncapsulation.None, exportAs: 'seamTopBar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Nav Toggle -->\n<div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n  <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"faBars\" iconType=\"borderless-styled-square\"></button>\n</div>\n\n<!-- Logo -->\n<div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n  [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n  <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </a>\n</div>\n\n<ng-template #useLogoRoute>\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </div>\n</ng-template>\n\n<!-- Title -->\n<div class=\"d-flex flex-column flex-grow-1\">\n  <seam-top-bar-title *ngIf=\"hasTitle\"\n    [titleText]=\"titleText\"\n    [subTitleText]=\"subTitleText\"\n    [class.ml-2]=\"isMobile$ | async\">\n  </seam-top-bar-title>\n</div>\n\n<!-- Items -->\n<div class=\"top-bar-icon-container mr-2\">\n  <ng-container *ngFor=\"let item of _items$ | async\">\n    <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n  </ng-container>\n</div>\n\n<!-- Menu -->\n<button seamTopBarMenuButton\n  [seamMenuToggle]=\"_topBarMenu?.menu\"\n  [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n  [compact]=\"isMobile$ | async\"\n  [profileIcon]=\"profileIcon\">\n</button>\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar-icon-container{margin:auto 0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.TheSeamLayoutService }]; }, propDecorators: { _topBarMenu: [{
+                type: ContentChild,
+                args: [TopBarMenuDirective, { static: true }]
+            }], _topBarItems: [{
+                type: ContentChildren,
+                args: [TopBarItemDirective]
+            }], _topBarMenuBtnDetailTpl: [{
+                type: ContentChild,
+                args: [TopBarMenuBtnDetailDirective]
+            }], logo: [{
+                type: Input
+            }], logoSm: [{
+                type: Input
+            }], logoHref: [{
+                type: Input
+            }], logoHrefTarget: [{
+                type: Input
+            }], logoRoute: [{
+                type: Input
+            }], hasTitle: [{
+                type: Input
+            }], titleText: [{
+                type: Input
+            }], subTitleText: [{
+                type: Input
+            }], profileIcon: [{
+                type: Input
+            }] } });
+
+class TheSeamTopBarModule {
+}
+TheSeamTopBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamTopBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamTopBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: TheSeamTopBarModule, declarations: [TheSeamTopBarComponent,
+        TopBarTitleComponent,
+        TopBarMenuButtonComponent,
+        TopBarMenuDirective,
+        TopBarItemDirective,
+        TopBarMenuBtnDetailDirective], imports: [CommonModule,
+        TheSeamLayoutModule,
+        TheSeamButtonsModule,
+        TheSeamIconModule,
+        TheSeamMenuModule,
+        TheSeamBaseLayoutModule,
+        RouterModule], exports: [TheSeamTopBarComponent,
+        TopBarMenuButtonComponent,
+        TopBarMenuDirective,
+        TheSeamMenuModule,
+        TopBarItemDirective,
+        TopBarMenuBtnDetailDirective] });
+TheSeamTopBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamTopBarModule, imports: [CommonModule,
+        TheSeamLayoutModule,
+        TheSeamButtonsModule,
+        TheSeamIconModule,
+        TheSeamMenuModule,
+        TheSeamBaseLayoutModule,
+        RouterModule, TheSeamMenuModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamTopBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TheSeamTopBarComponent,
+                        TopBarTitleComponent,
+                        TopBarMenuButtonComponent,
+                        TopBarMenuDirective,
+                        TopBarItemDirective,
+                        TopBarMenuBtnDetailDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        TheSeamLayoutModule,
+                        TheSeamButtonsModule,
+                        TheSeamIconModule,
+                        TheSeamMenuModule,
+                        TheSeamBaseLayoutModule,
+                        RouterModule
+                    ],
+                    exports: [
+                        TheSeamTopBarComponent,
+                        TopBarMenuButtonComponent,
+                        TopBarMenuDirective,
+                        TheSeamMenuModule,
+                        TopBarItemDirective,
+                        TopBarMenuBtnDetailDirective
+                    ]
+                }]
+        }] });
+
+const fader = trigger('routeAnimations', [
+    transition('* <=> *', [
+        // Set a default  style for enter and leave
+        query(':enter, :leave', [
+            style({
+                position: 'absolute',
+                left: 0,
+                width: '100%',
+                opacity: 0,
+                transform: 'scale(0) translateY(100%)',
+            }),
+        ], { optional: true }),
+        // Animate the new page in
+        query(':enter', [
+            animate('600ms ease', style({ opacity: 1, transform: 'scale(1) translateY(0)' })),
+        ], { optional: true })
+    ]),
+]);
+// function slideTo(direction) {
+//   return [
+//     query(':enter, :leave', [
+//       style({
+//         position: 'absolute',
+//         top: 0,
+//         [direction]: 0,
+//         width: '100%'
+//       })
+//     ], { optional: true }),
+//     query(':enter', [
+//       style({ [direction]: '-100%'})
+//     ], { optional: true }),
+//     group([
+//       query(':leave', [
+//         animate('1000ms ease', style({ [direction]: '100%'}))
+//       ], { optional: true }),
+//       query(':enter', [
+//         animate('1000ms ease', style({ [direction]: '0%'}))
+//       ], { optional: true })
+//     ]),
+//     // Normalize the page style... Might not be necessary
+//     // Required only if you have child animations on the page
+//     query(':leave', animateChild(), { optional: true }),
+//     query(':enter', animateChild(), { optional: true }),
+//   ]
+// }
+// TODO: Refactor the slider animation, because AOT or ng-packagr, I haven't
+// looked into what exactly is preventing it, doesn't allow the function call.
+// export const slider =
+//   trigger('routeAnimations', [
+//     transition('* => isLeft', slideTo('left') ),
+//     transition('* => isRight', slideTo('right') ),
+//     transition('isRight => *', slideTo('left') ),
+//     transition('isLeft => *', slideTo('right') )
+//   ])
+// export const contentLeave =
+//   trigger('contentLeave', [
+//     transition(':leave', [
+//     ])
+//   ])
+const slider = trigger('routeAnimations', [
+    transition('* => isLeft', [
+        query('.router-container :enter, .router-container :leave', [
+            style({
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%'
+            })
+        ], { optional: true }),
+        query('.router-container :enter', [
+            style({ left: '-100%' })
+        ], { optional: true }),
+        query('.hierarchy-router-outlet--content', [
+            style({ left: '0%', position: 'absolute' })
+        ], { optional: true }),
+        group([
+            query('.router-container :leave', [
+                animate('1000ms ease', style({ left: '100%' }))
+            ], { optional: true }),
+            query('.router-container :enter', [
+                animate('1000ms ease', style({ left: '0%' }))
+            ], { optional: true }),
+            query('.hierarchy-router-outlet--content', [
+                animate('1000ms ease', style({ left: '-100%' }))
+            ], { optional: true }),
+        ]),
+        // Normalize the page style... Might not be necessary
+        // Required only if you have child animations on the page
+        query('.router-container :leave', animateChild(), { optional: true }),
+        query('.router-container :enter', animateChild(), { optional: true }),
+    ]),
+    transition('* => isRight', [
+        query('.router-container :enter, .router-container :leave', [
+            style({
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                width: '100%'
+            })
+        ], { optional: true }),
+        query('.router-container :enter', [
+            style({ right: '-100%' })
+        ], { optional: true }),
+        query('.hierarchy-router-outlet--content', [
+            style({ left: '0%', position: 'absolute' })
+        ], { optional: true }),
+        group([
+            query('.router-container :leave', [
+                animate('1000ms ease', style({ right: '100%' }))
+            ], { optional: true }),
+            query('.router-container :enter', [
+                animate('1000ms ease', style({ right: '0%' }))
+            ], { optional: true }),
+            query('.hierarchy-router-outlet--content', [
+                animate('1000ms ease', style({ left: '-100%' }))
+            ], { optional: true }),
+        ]),
+        // Normalize the page style... Might not be necessary
+        // Required only if you have child animations on the page
+        query('.router-container :leave', animateChild(), { optional: true }),
+        query('.router-container :enter', animateChild(), { optional: true }),
+    ]),
+    transition('isRight => *', [
+        query('.router-container :enter, .router-container :leave', [
+            style({
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%'
+            })
+        ], { optional: true }),
+        query('.router-container :enter', [
+            style({ left: '-100%' })
+        ], { optional: true }),
+        query('.hierarchy-router-outlet--content', [
+            style({ left: '0%', position: 'absolute' })
+        ], { optional: true }),
+        group([
+            query('.router-container :leave', [
+                animate('1000ms ease', style({ left: '100%' }))
+            ], { optional: true }),
+            query('.router-container :enter', [
+                animate('1000ms ease', style({ left: '0%' }))
+            ], { optional: true }),
+            query('.hierarchy-router-outlet--content', [
+                animate('1000ms ease', style({ left: '-100%' }))
+            ], { optional: true }),
+        ]),
+        // Normalize the page style... Might not be necessary
+        // Required only if you have child animations on the page
+        query('.router-container :leave', animateChild(), { optional: true }),
+        query('.router-container :enter', animateChild(), { optional: true }),
+    ]),
+    transition('isLeft => *', [
+        query('.router-container :enter, .router-container :leave', [
+            style({
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                width: '100%'
+            })
+        ], { optional: true }),
+        query('.router-container :enter', [
+            style({ right: '-100%' })
+        ], { optional: true }),
+        group([
+            query('.router-container :leave', [
+                animate('1000ms ease', style({ right: '100%' }))
+            ], { optional: true }),
+            query('.router-container :enter', [
+                animate('1000ms ease', style({ right: '0%' }))
+            ], { optional: true })
+        ]),
+        // Normalize the page style... Might not be necessary
+        // Required only if you have child animations on the page
+        query('.router-container :leave', animateChild(), { optional: true }),
+        query('.router-container :enter', animateChild(), { optional: true }),
+    ])
+]);
+const transformer = trigger('routeAnimations', [
+    transition('* => isLeft', transformTo({ x: -100, y: -100, rotate: -720 })),
+    transition('* => isRight', transformTo({ x: 100, y: -100, rotate: 90 })),
+    transition('isRight => *', transformTo({ x: -100, y: -100, rotate: 360 })),
+    transition('isLeft => *', transformTo({ x: 100, y: -100, rotate: -360 }))
+]);
+function transformTo({ x = 100, y = 0, rotate = 0 }) {
+    const optional = { optional: true };
+    return [
+        query(':enter, :leave', [
+            style({
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%'
+            })
+        ], optional),
+        query(':enter', [
+            style({ transform: `translate(${x}%, ${y}%) rotate(${rotate}deg)` })
+        ], { optional: true }),
+        group([
+            query(':leave', [
+                animate('600ms ease-out', style({ transform: `translate(${x}%, ${y}%) rotate(${rotate}deg)` }))
+            ], optional),
+            query(':enter', [
+                animate('600ms ease-out', style({ transform: `translate(0, 0) rotate(0)` }))
+            ], { optional: true })
+        ]),
+    ];
+}
+const stepper = trigger('routeAnimations', [
+    transition('* <=> *', [
+        query(':enter, :leave', [
+            style({
+                position: 'absolute',
+                left: 0,
+                width: '100%',
+            }),
+        ], { optional: true }),
+        group([
+            query(':enter', [
+                animate('2000ms ease', keyframes([
+                    style({ transform: 'scale(0) translateX(100%)', offset: 0 }),
+                    style({ transform: 'scale(0.5) translateX(25%)', offset: 0.3 }),
+                    style({ transform: 'scale(1) translateX(0%)', offset: 1 }),
+                ])),
+            ], { optional: true }),
+            query(':leave', [
+                animate('2000ms ease', keyframes([
+                    style({ transform: 'scale(1)', offset: 0 }),
+                    style({ transform: 'scale(0.5) translateX(-25%) rotate(0)', offset: 0.35 }),
+                    style({ opacity: 0, transform: 'translateX(-50%) rotate(-180deg) scale(6)', offset: 1 }),
+                ])),
+            ], { optional: true })
+        ]),
+    ])
+]);
+const sideToSide = trigger('routeAnimations', [
+    transition('* => *', [
+        style({
+            position: 'fixed',
+            width: '100%',
+            transform: 'translateX(-100%)'
+        }),
+        animate('1000ms ease', style({ transform: 'translateX(0%)' }))
+    ]),
+    transition(':leave', [
+        style({
+            position: 'fixed',
+            width: '100%',
+            transform: 'translateX(0%)'
+        }),
+        animate('1000ms ease', style({ transform: 'translateX(-100%)' }))
+    ])
+]);
+
+function routeChanges(router) {
+    return router.events.pipe(filter(event => event instanceof NavigationStart || event instanceof NavigationEnd), distinctUntilChanged((x, y) => x.id === y.id), map(event => ({ url: event.url })));
+}
+//
+// TODO: Animation improvement: Try adding a full component animation that
+// queries the <ng-content> and <router-outlet> blocks. When the outlet
+// activates, set the animation state to a transition that moves both blocks
+// together.
+//
+let _uid = 0;
+class HierarchyRouterOutletComponent {
+    constructor(_route, _router) {
+        this._route = _route;
+        this._router = _router;
+        this._uid = _uid++;
+        this._ngUnsubscribe = new Subject();
+        this.animState = 'isRight';
+        // animState = ''
+        this.outletActive = false;
+        this.ngContentVisible = true;
+        this._router.events.pipe(filter(event => event instanceof NavigationEnd), 
+        // tap(v => console.log(`_hasChildren()[${this._uid}]`, this._hasChildren())),
+        takeUntil(this._ngUnsubscribe))
+            .subscribe();
+        // routeChanges(this._router)
+        //   .pipe(
+        //     untilDestroyed(this),
+        //     tap(() => {
+        //       // if (this._hasChildren()) {
+        //       //   this.animState = 'isLeft'
+        //       // } else {
+        //       //   this.animState = 'isRight'
+        //       // }
+        //     })
+        //   )
+        //   .subscribe(v => console.log(`routeChanges[${this._uid}]`, v))
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    _hasChildren() {
+        const count = this._route.pathFromRoot.length - 1;
+        let countFull = 0;
+        if (this._router.parseUrl(this._router.url).root.children.primary) {
+            countFull = this._router.parseUrl(this._router.url).root.children.primary.segments.length;
+        }
+        // console.log(`_hasChildren[${this._uid}]`, { count, countFull })
+        return countFull > count;
+    }
+    prepareRoute(outlet) {
+        // console.log(`outlet[${this._uid}]`, outlet, this.animState, this._hasChildren(), this.outletActive)
+        if (outlet.isActivated) {
+            // console.log(outlet.isActivated)
+            // console.log(outlet.component)
+            console.log(this.animState);
+            return this.animState;
+        }
+        else {
+            return undefined;
+        }
+        // console.log(`prepareRoute[${this._uid}]`, this.animState, this._hasChildren())
+        // console.log('activatedRouteData', outlet && outlet.activatedRouteData)
+        // if (outlet && outlet.isActivated) {
+        //   console.log('activatedRoute', outlet.activatedRoute && outlet.activatedRoute.snapshot.url)
+        // }
+        // return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']
+        // console.log('')
+        // return this.animState
+    }
+    outletActivate(event) {
+        // console.log(`outletActivate[${this._uid}]`, event)
+        this.outletActive = true;
+    }
+    outletDeactivate(event) {
+        // console.log(`outletDeactivate[${this._uid}]`, event)
+        this.outletActive = false;
+    }
+    routeAnimationsStart(event) {
+        // console.log('routeAnimationsStart', event)
+        this.ngContentVisible = true;
+    }
+    routeAnimationsDone(event) {
+        // console.log('routeAnimationsDone', event)
+        this.ngContentVisible = !this.outletActive;
+    }
+}
+HierarchyRouterOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: HierarchyRouterOutletComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+HierarchyRouterOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: HierarchyRouterOutletComponent, selector: "seam-hierarchy-router-outlet", ngImport: i0, 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", styles: [":host{display:block;height:100%}:host ::ng-deep router-outlet+*{background-color:#fff;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], animations: [
+        // fader,
+        slider,
+        // transformer,
+        // stepper,
+        // sideToSide
+        // contentLeave
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: HierarchyRouterOutletComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-hierarchy-router-outlet', animations: [
+                        // fader,
+                        slider,
+                        // transformer,
+                        // stepper,
+                        // sideToSide
+                        // contentLeave
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: [":host{display:block;height:100%}:host ::ng-deep router-outlet+*{background-color:#fff;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }]; } });
+
+class HierarchyLevelResolver {
+    constructor() { }
+    resolve(route, state) {
+        // console.log('[HierarchyLevelResolver]', route)
+        // console.log('[HierarchyLevelResolver]', state)
+        return this._getMaxHierLevel(route);
+    }
+    _getMaxHierLevel(route) {
+        let curr = route;
+        while (curr.parent) {
+            curr = curr.parent;
+            if (curr.data['hierLevel']) {
+                return curr.data['hierLevel'] + 1;
+            }
+        }
+        return 0;
+    }
+}
+HierarchyLevelResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: HierarchyLevelResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+HierarchyLevelResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: HierarchyLevelResolver, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: HierarchyLevelResolver, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return []; } });
+
+class TheSeamDynamicRouterModule {
+}
+TheSeamDynamicRouterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamDynamicRouterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamDynamicRouterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: TheSeamDynamicRouterModule, declarations: [HierarchyRouterOutletComponent], imports: [CommonModule,
+        RouterModule], exports: [HierarchyRouterOutletComponent] });
+TheSeamDynamicRouterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamDynamicRouterModule, imports: [CommonModule,
+        RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamDynamicRouterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        HierarchyRouterOutletComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        RouterModule
+                    ],
+                    exports: [
+                        HierarchyRouterOutletComponent
+                    ]
+                }]
+        }] });
+
+class TheSeamSchemaFormCheckboxComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.trueValue = true;
+        this.falseValue = false;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this);
+        if (this.controlValue === null || this.controlValue === undefined) {
+            this.controlValue = this.options.title;
+        }
+    }
+    updateValue(event) {
+        event.preventDefault();
+        this.jsf.updateValue(this, event.target.checked ? this.trueValue : this.falseValue);
+    }
+    get isChecked() {
+        return this.jsf.getFormControlValue(this) === this.trueValue;
+    }
+}
+TheSeamSchemaFormCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormCheckboxComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+TheSeamSchemaFormCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TheSeamSchemaFormCheckboxComponent, selector: "seam-schema-form-checkbox", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, 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: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "component", type: i5$1.TheSeamCheckboxComponent, selector: "seam-checkbox", inputs: ["tabIndex", "id", "aria-label", "aria-labelledby", "required", "checked", "disabled", "indeterminate", "name", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["seamCheckbox"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-checkbox', template: "<div class=\"mb-3\">\n  <seam-form-field *ngIf=\"boundControl\">\n    <seam-checkbox seamInput\n      [formControl]=\"$any(formControl)\"\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n\n  <seam-form-field *ngIf=\"!boundControl\">\n    <seam-checkbox seamInput\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\"\n      [value]=\"controlValue\"\n      (change)=\"updateValue($event)\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class TheSeamSchemaFormInputComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.autoCompleteList = [];
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this);
+    }
+    updateValue(event) {
+        this.jsf.updateValue(this, event.target.value);
+    }
+}
+TheSeamSchemaFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormInputComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+TheSeamSchemaFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TheSeamSchemaFormInputComponent, selector: "seam-schema-form-input", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, 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", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$3.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-input', changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class TheSeamSchemaFormNumberComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.allowNegative = true;
+        this.allowDecimal = true;
+        this.allowExponents = false;
+        this.lastValidNumber = '';
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this);
+        if (this.layoutNode.dataType === 'integer') {
+            this.allowDecimal = false;
+        }
+    }
+    updateValue(event) {
+        this.jsf.updateValue(this, event.target.value);
+    }
+}
+TheSeamSchemaFormNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormNumberComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+TheSeamSchemaFormNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TheSeamSchemaFormNumberComponent, selector: "seam-schema-form-number", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, 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", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$3.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormNumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-number', changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class TheSeamSchemaFormSelectComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.selectList = [];
+        this.isArray = isArray;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.selectList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, !!this.options.required, !!this.options.flatList);
+        this.jsf.initializeControl(this);
+    }
+    updateValue(event) {
+        this.jsf.updateValue(this, event.value);
+    }
+}
+TheSeamSchemaFormSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormSelectComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+TheSeamSchemaFormSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TheSeamSchemaFormSelectComponent, selector: "seam-schema-form-select", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, 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", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$3.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "component", type: i5$2.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5$2.ɵf, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5$2.ɵh, selector: "[ng-label-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-select', changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+// NOTE: This component is a little hacky, because I am basically creating a
+// data widget that acts like a data and 'submit' widget at the same time.
+//
+// TODO: Try and think of a nicer way to implement this, but still make sense
+// from a schema definition. The library may need to me forked to actually
+// support this in the way I expect, but maybe there is another way.
+class TheSeamSchemaFormSubmitSplitComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        /** @ignore */
+        this._ngUnsubscribe = new Subject();
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this._buttonLabel = '';
+        this._dropdownDisabled = false;
+        this._selectList = [];
+    }
+    /** @ignore */
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this);
+        // NOTE: This is commented out, because there is a bug with submit widgets
+        // manually defined in layout. All nodes initialized from the provided
+        // layout have their options populated from the defaults and 'disabled' is
+        // on of the default properties, so the 'disableInvalidSubmit' condition
+        // never gets reached.
+        //
+        // My initial idea for fixing would be to check if the disabled property
+        // exists and is a boolean, or possibly anything defined that can coerce
+        // into a boolean. I can't think of a reason disabled should be anything
+        // else, so that may be an acceptable fix, but I don't want to enable that
+        // yet.
+        //
+        // if (hasOwn(this.options, 'disabled')) {
+        //   console.log('[TheSeamSchemaFormSubmitSplitComponent] hasDisabled', this.options.disabled)
+        //   this.controlDisabled = this.options.disabled
+        // } else
+        if (this.jsf.formOptions.disableInvalidSubmit) {
+            this.controlDisabled = !this.jsf.isValid;
+            this.jsf.isValidChanges.subscribe(isValid => this.controlDisabled = !isValid);
+        }
+        if (this.controlValue === null || this.controlValue === undefined) {
+            this.controlValue = this.options.title;
+        }
+        if (hasOwn(this.options, 'title')) {
+            this._buttonLabel = this.options.title;
+        }
+        this._initDropdown();
+        // console.log('this', this)
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    updateValue(event) {
+        if (typeof this.options.onClick === 'function') {
+            this.options.onClick(event);
+        }
+        else {
+            this.jsf.updateValue(this, event.target.value);
+        }
+    }
+    _initDropdown() {
+        var _a;
+        if (!hasOwn(this.layoutNode, 'items') || !(this.layoutNode.items || []).length) {
+            return;
+        }
+        if (isDevMode()) {
+            if (this.layoutNode.items.length > 1) {
+                console.warn(`TheSeamSchemaFormSubmitSplitComponent only supports one item.` +
+                    ` items after index 0 will be ignored.`);
+            }
+        }
+        const idx = 0;
+        const item = this.layoutNode.items[idx];
+        this._dropdownObj = {
+            layoutNode: item,
+            layoutIndex: (this.layoutIndex || []).concat(idx),
+            dataIndex: ((_a = this.layoutNode) === null || _a === void 0 ? void 0 : _a.dataType) === 'array' ? (this.dataIndex || []).concat(idx) : this.dataIndex,
+            options: item.options || {}
+        };
+        this.jsf.initializeControl(this._dropdownObj);
+        const items = buildTitleMap(this._dropdownObj.options.titleMap || this._dropdownObj.options.enumNames, this._dropdownObj.options.enum, !!this._dropdownObj.options.required, !!this._dropdownObj.options.flatList);
+        this._selectList = items;
+        // TODO: Should this be checking if the control is bound?
+        const dropdownControl = this._getDropdownControl();
+        if (!dropdownControl) {
+            return;
+        }
+        observeControlValue(dropdownControl).pipe(takeUntil(this._ngUnsubscribe)).subscribe(value => {
+            this._setSelectListCheckedProp(value);
+            this._selectedItem = this._getSelectedItem();
+        });
+        observeControlStatus(dropdownControl).pipe(takeUntil(this._ngUnsubscribe)).subscribe(value => {
+            this._dropdownDisabled = dropdownControl.disabled;
+        });
+    }
+    _getDropdownControl() {
+        return this._dropdownObj.formControl;
+    }
+    _setSelectListCheckedProp(value) {
+        const items = this._selectList;
+        for (const item of items) {
+            if (item.value === value) {
+                item.checked = true;
+            }
+            else if (item.checked) {
+                item.checked = false;
+            }
+        }
+        this._selectList = [...items];
+    }
+    _getSelectedItem() {
+        return (this._selectList || []).find(x => x.checked === true);
+    }
+    _setDropdownValue(value) {
+        const formControl = this._getDropdownControl();
+        formControl === null || formControl === void 0 ? void 0 : formControl.setValue(value);
+    }
+}
+TheSeamSchemaFormSubmitSplitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+TheSeamSchemaFormSubmitSplitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TheSeamSchemaFormSubmitSplitComponent, selector: "seam-schema-form-submit-split", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button seamButton theme=\"primary\" type=\"submit\"\n      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n      [attr.required]=\"options?.required\"\n      [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n      [disabled]=\"controlDisabled\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [value]=\"controlValue\"\n      (click)=\"updateValue($event)\">\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\">\n        [{{ _selectedItem.name }}]\n      </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\" seamButton theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\">\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\">\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i3$2.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-submit-split', template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button seamButton theme=\"primary\" type=\"submit\"\n      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n      [attr.required]=\"options?.required\"\n      [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n      [disabled]=\"controlDisabled\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [value]=\"controlValue\"\n      (click)=\"updateValue($event)\">\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\">\n        [{{ _selectedItem.name }}]\n      </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\" seamButton theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\">\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\">\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class TheSeamSchemaFormFrameworkComponent {
+}
+TheSeamSchemaFormFrameworkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheSeamSchemaFormFrameworkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TheSeamSchemaFormFrameworkComponent, selector: "seam-schema-form-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<select-widget-widget\n  [dataIndex]=\"$any(dataIndex)\"\n  [layoutIndex]=\"$any(layoutIndex)\"\n  [layoutNode]=\"layoutNode\">\n</select-widget-widget>\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormFrameworkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-framework', template: "<select-widget-widget\n  [dataIndex]=\"$any(dataIndex)\"\n  [layoutIndex]=\"$any(layoutIndex)\"\n  [layoutNode]=\"layoutNode\">\n</select-widget-widget>\n" }]
+        }], propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class TheSeamFramework extends Framework {
+    constructor() {
+        super(...arguments);
+        this.name = 'seam-framework';
+        this.framework = TheSeamSchemaFormFrameworkComponent;
+        this.widgets = {
+            'checkbox': TheSeamSchemaFormCheckboxComponent,
+            // 'submit': TheSeamSchemaFormSubmitComponent,
+            'submit': TheSeamSchemaFormSubmitSplitComponent,
+            'text': TheSeamSchemaFormInputComponent,
+            'number': TheSeamSchemaFormNumberComponent,
+            'select': TheSeamSchemaFormSelectComponent
+        };
+    }
+}
+TheSeamFramework.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+TheSeamFramework.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamFramework });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamFramework, decorators: [{
+            type: Injectable
+        }] });
+
+class TheSeamSchemaFormSubmitComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this);
+        if (hasOwn(this.options, 'disabled')) {
+            this.controlDisabled = this.options.disabled;
+        }
+        else if (this.jsf.formOptions.disableInvalidSubmit) {
+            this.controlDisabled = !this.jsf.isValid;
+            this.jsf.isValidChanges.subscribe(isValid => this.controlDisabled = !isValid);
+        }
+        if (this.controlValue === null || this.controlValue === undefined) {
+            this.controlValue = this.options.title;
+        }
+    }
+    updateValue(event) {
+        if (typeof this.options.onClick === 'function') {
+            this.options.onClick(event);
+        }
+        else {
+            this.jsf.updateValue(this, event.target.value);
+        }
+    }
+}
+TheSeamSchemaFormSubmitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormSubmitComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+TheSeamSchemaFormSubmitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TheSeamSchemaFormSubmitComponent, selector: "seam-schema-form-submit", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, 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" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormSubmitComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-submit', template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <input\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n    [attr.required]=\"options?.required\"\n    [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n    [disabled]=\"controlDisabled\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [type]=\"layoutNode?.type\"\n    [value]=\"controlValue\"\n    (click)=\"updateValue($event)\">\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+const controls = [
+    TheSeamSchemaFormCheckboxComponent,
+    TheSeamSchemaFormSubmitComponent,
+    TheSeamSchemaFormSelectComponent,
+    TheSeamSchemaFormInputComponent,
+    TheSeamSchemaFormNumberComponent,
+    TheSeamSchemaFormSubmitSplitComponent
+];
+class TheSeamSchemaFormControlsModule {
+}
+TheSeamSchemaFormControlsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamSchemaFormControlsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormControlsModule, declarations: [TheSeamSchemaFormCheckboxComponent,
+        TheSeamSchemaFormSubmitComponent,
+        TheSeamSchemaFormSelectComponent,
+        TheSeamSchemaFormInputComponent,
+        TheSeamSchemaFormNumberComponent,
+        TheSeamSchemaFormSubmitSplitComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        JsonSchemaFormModule,
+        TheSeamFormFieldModule,
+        TheSeamCheckboxModule,
+        TheSeamMenuModule,
+        TheSeamButtonsModule,
+        NgSelectModule], exports: [TheSeamSchemaFormCheckboxComponent,
+        TheSeamSchemaFormSubmitComponent,
+        TheSeamSchemaFormSelectComponent,
+        TheSeamSchemaFormInputComponent,
+        TheSeamSchemaFormNumberComponent,
+        TheSeamSchemaFormSubmitSplitComponent, JsonSchemaFormModule] });
+TheSeamSchemaFormControlsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormControlsModule, imports: [CommonModule,
+        ReactiveFormsModule,
+        JsonSchemaFormModule,
+        TheSeamFormFieldModule,
+        TheSeamCheckboxModule,
+        TheSeamMenuModule,
+        TheSeamButtonsModule,
+        NgSelectModule, JsonSchemaFormModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormControlsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ...controls
+                    ],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        JsonSchemaFormModule,
+                        TheSeamFormFieldModule,
+                        TheSeamCheckboxModule,
+                        TheSeamMenuModule,
+                        TheSeamButtonsModule,
+                        NgSelectModule
+                    ],
+                    exports: [
+                        ...controls,
+                        JsonSchemaFormModule
+                    ],
+                    entryComponents: [
+                        ...controls
+                    ]
+                }]
+        }] });
+
+class TheSeamSchemaFormModule {
+}
+TheSeamSchemaFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamSchemaFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormModule, declarations: [TheSeamSchemaFormFrameworkComponent], imports: [CommonModule,
+        JsonSchemaFormModule,
+        TheSeamSchemaFormControlsModule,
+        WidgetLibraryModule], exports: [TheSeamSchemaFormFrameworkComponent,
+        JsonSchemaFormModule] });
+TheSeamSchemaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormModule, providers: [
+        JsonSchemaFormService,
+        FrameworkLibraryService,
+        WidgetLibraryService,
+        { provide: Framework, useClass: TheSeamFramework, multi: true }
+    ], imports: [CommonModule,
+        JsonSchemaFormModule,
+        TheSeamSchemaFormControlsModule,
+        WidgetLibraryModule, JsonSchemaFormModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamSchemaFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TheSeamSchemaFormFrameworkComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        JsonSchemaFormModule,
+                        TheSeamSchemaFormControlsModule,
+                        WidgetLibraryModule,
+                    ],
+                    providers: [
+                        JsonSchemaFormService,
+                        FrameworkLibraryService,
+                        WidgetLibraryService,
+                        { provide: Framework, useClass: TheSeamFramework, multi: true }
+                    ],
+                    exports: [
+                        TheSeamSchemaFormFrameworkComponent,
+                        JsonSchemaFormModule
+                    ],
+                    entryComponents: [
+                        TheSeamSchemaFormFrameworkComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutNavToggleDirective, BaseLayoutSideBarDirective, BaseLayoutSideBarFooterDirective, BaseLayoutTopBarDirective, DashboardComponent, DashboardWidgetContainerComponent, DashboardWidgetPortalOutletDirective, DashboardWidgetTemplateContainerComponent, DashboardWidgetsComponent, DashboardWidgetsPreferencesService, DashboardWidgetsService, HierarchyLevelResolver, HierarchyRouterOutletComponent, SideNavComponent, SideNavItemComponent, SideNavToggleComponent, THESEAM_BASE_LAYOUT_REF, THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, THESEAM_SIDE_NAV_ACCESSOR, THE_SEAM_BASE_LAYOUT, TheSeamBaseLayoutComponent, TheSeamBaseLayoutModule, TheSeamDashboardModule, TheSeamDynamicRouterModule, TheSeamFramework, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarTitleComponent, canBeActive, canExpand, canHaveChildren, fader, findLinkItems, getItemStateProp, hasActiveChild, hasChildren, hasExpandedChild, isExpanded, isNavItemActive, isNavItemType, routeChanges, setDefaultState, setItemStateProp, sideNavExpandStateChangeFn, sideToSide, slider, stepper, transformer };
+//# sourceMappingURL=theseam-ui-common-framework.mjs.map