@theseam/ui-common 0.2.9

package/fesm2015/theseam-ui-common-form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theseam-ui-common-form-field.js","sources":["../../../projects/ui-common/form-field/form-field-error.directive.ts","../../../projects/ui-common/form-field/form-field-help-text.directive.ts","../../../projects/ui-common/form-field/form-field-label-tpl.directive.ts","../../../projects/ui-common/form-field/input.directive.ts","../../../projects/ui-common/form-field/form-field.component.ts","../../../projects/ui-common/form-field/form-field-required-indicator.component.ts","../../../projects/ui-common/form-field/form-field.module.ts","../../../projects/ui-common/form-field/theseam-ui-common-form-field.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion'\nimport { Directive, Input, TemplateRef } from '@angular/core'\n\nimport { InputBoolean } from '@theseam/ui-common/core'\n\n@Directive({\n  selector: '[seamFormFieldError]'\n})\nexport class FormFieldErrorDirective {\n  static ngAcceptInputType_external: BooleanInput\n\n  @Input()\n  get validatorName(): string | undefined | null { return this._validatorName || this.seamFormFieldError }\n  set validatorName(value: string | undefined | null) { this._validatorName = value }\n  private _validatorName: string | undefined | null\n\n  @Input() seamFormFieldError: string | undefined | null\n\n  @Input() @InputBoolean() external: boolean = false\n\n  constructor(public template: TemplateRef<any>) {}\n\n}\n","import { Directive, TemplateRef } from '@angular/core'\n\n@Directive({\n  selector: '[seamFormFieldHelpText]'\n})\nexport class FormFieldHelpTextDirective {\n\n  constructor(public template: TemplateRef<any>) { }\n\n}\n","import { Directive, TemplateRef } from '@angular/core'\n\n@Directive({\n  selector: '[seamFormFieldLabelTpl]'\n})\nexport class FormFieldLabelTplDirective {\n\n  constructor(public template: TemplateRef<any>) { }\n\n}\n","import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'\nimport { Directive, DoCheck, ElementRef, HostBinding, Input, Optional, Self } from '@angular/core'\nimport { FormGroupDirective, NgControl, NgForm } from '@angular/forms'\nimport { Subject } from 'rxjs'\n\nimport { NgSelectComponent } from '@ng-select/ng-select'\n\nimport { InputBoolean } from '@theseam/ui-common/core'\nimport { toggleAttribute } from '@theseam/ui-common/utils'\n\n// NOTE: Partially based on mat-input: https://github.com/angular/material2/blob/master/src/lib/input/input.ts\n\nlet nextUniqueId = 0\n\n@Directive({\n  // TODO: Consider removing restriction and instead adding a dev warning. A few\n  // inputs in the app need to be changed for this first.\n  selector: 'input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput]',\n  exportAs: 'seamInput',\n})\nexport class InputDirective implements DoCheck {\n  static ngAcceptInputType_required: BooleanInput\n  static ngAcceptInputType_disabled: BooleanInput\n  static ngAcceptInputType_readonly: BooleanInput\n\n  protected _uid = `lib-input-${nextUniqueId++}`\n\n  // TODO: Remove this being added to all seamInput elements or break this\n  // directive up. Some elements in our app already have worked around this\n  // class being there, so some refactoring will be required before removal.\n  @HostBinding('class.form-control') _isFormControl = true\n  @HostBinding('class.form-control-sm') get _isFormControlSmall() {\n    return this._isFormControl && this.seamInputSize === 'sm'\n  }\n  @HostBinding('class.is-invalid') get _isInvalid() {\n    return this.ngControl && this.ngControl.invalid && (this.ngControl.dirty || this.ngControl.touched)\n  }\n\n  @HostBinding('attr.id') get _attrId() { return this._isNgSelect() ? undefined : this.id }\n  @HostBinding('attr.placeholder') get _attrPlaceholder() { return this.placeholder }\n  @HostBinding('attr.aria-describedby') ariaDescribedBy: string | undefined\n\n  @Input() seamInputSize: 'sm' | 'normal' = 'normal'\n\n  @Input()\n  get id(): string | undefined | null { return this._id }\n  set id(value: string | undefined | null) { this._id = value || this._uid }\n  protected _id: string | undefined | null\n\n  /** Input type of the element. */\n  @Input()\n  get type(): string | undefined | null { return this._type }\n  set type(value: string | undefined | null) {\n    this._type = value || 'text'\n    // this._validateType()\n\n    // When using Angular inputs, developers are no longer able to set the properties on the native\n    // input element. To ensure that bindings for `type` work, we need to sync the setter\n    // with the native property. Textarea elements don't support the type property or attribute.\n    if ((!this._isTextarea() && !this._isNgSelect()) /* && getSupportedInputTypes().has(this._type) */) {\n      (this._elementRef.nativeElement as HTMLInputElement).type = this._type\n    }\n  }\n  protected _type: string | undefined | null = 'text'\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  @Input() placeholder: string | undefined | null\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  @Input() @InputBoolean() required: boolean = false\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  @Input()\n  get disabled(): boolean {\n    if (this.ngControl && this.ngControl.disabled !== null) {\n      return this.ngControl.disabled\n    }\n    return this._disabled\n  }\n  set disabled(value: boolean) {\n    this._disabled = coerceBooleanProperty(value)\n\n    // Browsers may not fire the blur event if the input is disabled too quickly.\n    // Reset from here to ensure that the element doesn't become stuck.\n    if (this.focused) {\n      this.focused = false\n      this.stateChanges.next()\n    }\n  }\n  protected _disabled = false\n\n  focused = false\n\n  readonly stateChanges: Subject<void> = new Subject<void>()\n\n  // @Input()\n  // get value(): string { return this._inputValueAccessor.value; }\n  // set value(value: string) {\n  //   if (value !== this.value) {\n  //     this._inputValueAccessor.value = value;\n  //     this.stateChanges.next();\n  //   }\n  // }\n\n  /** Whether the element is readonly. */\n  @Input() @InputBoolean() readonly: boolean = false\n\n  constructor(\n    public _elementRef: ElementRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,\n    @Optional() @Self() public ngControl: NgControl,\n    @Optional() private _parentForm: NgForm,\n    @Optional() private _parentFormGroup: FormGroupDirective,\n    // 3rd party support\n    @Optional() private _ngSelect: NgSelectComponent\n  ) {\n    // Force setter to be called in case id was not specified.\n    this.id = this.id\n\n    if (!this._shouldHaveFormControlCssClass()) {\n      this._isFormControl = false\n    }\n  }\n\n  ngDoCheck() {\n    if (this._isNgSelect()) {\n      this._ngSelect.labelForId = this.id\n      this._ngSelect.setDisabledState(this.disabled)\n    } else {\n      toggleAttribute(this._elementRef.nativeElement, 'required', this.required)\n      toggleAttribute(this._elementRef.nativeElement, 'disabled', this.disabled)\n    }\n  }\n\n  /** Should only be textual inputs, but initially our app added to all form controls. */\n  protected _shouldHaveFormControlCssClass() {\n    return !this._isSeamCheckbox()\n      && !this._isRadioInput()\n      && !this._isNgbRadioGroup()\n      && !this._isTelInput()\n      && !this._isQuillEditor()\n  }\n\n  /** Determines if the component host is a textarea. */\n  protected _isTextarea() {\n    return this._elementRef.nativeElement.nodeName.toLowerCase() === 'textarea'\n  }\n\n  /** Determines if the component host is a ng-select. */\n  protected _isNgSelect() {\n    return this._elementRef.nativeElement.nodeName.toLowerCase() === 'ng-select'\n  }\n\n  /** Determines if the component host is a seam-checkbox. */\n  protected _isSeamCheckbox() {\n    return this._elementRef.nativeElement.nodeName.toLowerCase() === 'seam-checkbox'\n  }\n\n  /** Determines if the component host is a radio input. */\n  protected _isRadioInput() {\n    return this._elementRef.nativeElement.nodeName.toLowerCase() === 'input' &&\n      this._elementRef.nativeElement.type.toLowerCase() === 'radio'\n  }\n\n  protected _isNgbRadioGroup() {\n    return this._elementRef.nativeElement.getAttribute('ngbRadioGroup') !== null\n  }\n\n  protected _isTelInput() {\n    return this._elementRef.nativeElement.nodeName.toLowerCase() === 'seam-tel-input'\n  }\n\n  protected _isQuillEditor() {\n    return this._elementRef.nativeElement.nodeName.toLowerCase() === 'quill-editor'\n  }\n\n  /** Make sure the input is a supported type. */\n  // protected _validateType() {\n  //   if (MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1) {\n  //     throw getMatInputUnsupportedTypeError(this._type)\n  //   }\n  // }\n\n  /** Focuses the input. */\n  focus(): void {\n    this._elementRef.nativeElement.focus()\n  }\n\n  /** Unfocuses the input. */\n  blur(): void {\n    this._elementRef.nativeElement.blur()\n  }\n\n  setValue(value: any) {\n    if (this.ngControl) {\n      const control = this.ngControl.control\n      if (control) {\n        control.setValue(value)\n      }\n    }\n  }\n\n}\n","import { BooleanInput } from '@angular/cdk/coercion'\nimport {\n  Component,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnDestroy,\n  OnInit,\n  QueryList\n} from '@angular/core'\nimport { BehaviorSubject, combineLatest, Observable, ReplaySubject, Subscription } from 'rxjs'\nimport { distinctUntilChanged, filter, map, startWith, switchMap, tap } from 'rxjs/operators'\n\nimport { InputBoolean } from '@theseam/ui-common/core'\nimport { IErrorRecord } from '@theseam/ui-common/form-field-error'\n\nimport { FormFieldErrorDirective } from './form-field-error.directive'\nimport { FormFieldHelpTextDirective } from './form-field-help-text.directive'\nimport { FormFieldLabelTplDirective } from './form-field-label-tpl.directive'\nimport { InputDirective } from './input.directive'\n\nlet nextLabelUniqueId = 0\n\n/**\n * Should wrap all form controls.\n */\n@Component({\n  selector: 'seam-form-field',\n  templateUrl: './form-field.component.html',\n  styleUrls: ['./form-field.component.scss']\n})\nexport class TheSeamFormFieldComponent implements OnInit, OnDestroy {\n  static ngAcceptInputType_inline: BooleanInput\n\n  private readonly _helpTextStrSubject = new BehaviorSubject<string | undefined>(undefined)\n  private readonly _helpTextTplSubject = new BehaviorSubject<FormFieldHelpTextDirective | undefined>(undefined)\n  private readonly _contentInputSubject = new BehaviorSubject<InputDirective | undefined>(undefined)\n\n  /** @ignore */\n  protected _labelUid = `seam-label-${nextLabelUniqueId++}`\n\n  /** @ignore */\n  protected _helpTextUid = `seam-help-text-${nextLabelUniqueId++}`\n\n  /** @ignore */\n  public _errorPadding = '0px'\n\n  /** @ignore */\n  @HostBinding('style.display') get _displayStyle() { return this.inline ? 'inline-block' : 'block' }\n\n  /**\n   * Used to declare an inline element.\n   *\n   * NOTE: Not well tested or supported, so it may have some issues currently\n   * and could change.\n   */\n  @Input() @InputBoolean() inline: boolean = false\n\n  /** Add a text label for the form control. */\n  @Input() label: string | undefined | null\n\n  /**\n   * The label can be on top or inline.\n   *\n   * > Only supports `ltr` direction, so inline will only place the label on the\n   * > left.\n   */\n  @Input() labelPosition: 'top' | 'inline' = 'top'\n\n  /**\n   * CSS class to add to the label element.\n   *\n   * Accepts a single space separated string of classes, like the html class\n   * attribute.\n   */\n  @Input() labelClass: string | undefined | null\n\n  /** Max errors to display. */\n  @Input() maxErrors = -1\n\n  /**\n   * A padding error is an always allocated space equivalent to a single line\n   * error string.\n   */\n  @Input() numPaddingErrors = 1\n\n  /**\n   * `id` attribute to add to the label element. This should not be needed in\n   * most situations, because a unique id will be generated if not provided.\n   */\n  @Input()\n  get labelId(): string | undefined | null { return this._labelId }\n  set labelId(value: string | undefined | null) { this._labelId = value || this._labelUid }\n  /** @ignore */\n  protected _labelId: string | undefined | null\n\n  /**\n   * Help text added below the control.\n   */\n  @Input()\n  get helpText(): string | undefined | null { return this._helpTextStrSubject.value }\n  set helpText(value: string | undefined | null) {\n    this._helpTextStrSubject.next(value || undefined)\n  }\n\n  /**\n   * `id` attribute to add to the label element. This should not be needed in\n   * most situations, because a unique id will be generated if not provided.\n   */\n  @Input()\n  get helpTextId(): string | undefined | null { return this._helpTextId }\n  set helpTextId(value: string | undefined | null) { this._helpTextId = value || this._helpTextUid }\n  /** @ignore */\n  protected _helpTextId: string | undefined | null\n\n  /** @ignore */\n  @ContentChild(FormFieldHelpTextDirective, { static: true })\n  get helpTextTpl(): FormFieldLabelTplDirective | undefined { return this._helpTextTplSubject.value }\n  set helpTextTpl(value: FormFieldLabelTplDirective | undefined) {\n    this._helpTextTplSubject.next(value || undefined)\n  }\n\n  /** @ignore */\n  @ContentChild(FormFieldLabelTplDirective, { static: true }) labelTpl?: FormFieldLabelTplDirective\n\n  /** @ignore */\n  @ContentChild(InputDirective, { static: true })\n  get contentInput(): InputDirective | undefined { return this._contentInputSubject.value }\n  set contentInput(value: InputDirective | undefined) { this._contentInputSubject.next(value || undefined) }\n\n\n  /** @ignore */\n  @ContentChildren(FormFieldErrorDirective)\n  get fieldErrors() { return this._fieldErrors }\n  set fieldErrors(value: QueryList<FormFieldErrorDirective[]> | undefined | null) {\n    this._fieldErrors = value\n\n    if (this._sub) { this._sub.unsubscribe() }\n    if (this.fieldErrors) {\n      this._sub = this.fieldErrors.changes\n        .pipe(startWith(this.fieldErrors))\n        .pipe(map(v => v.toArray() as FormFieldErrorDirective[]))\n        .pipe(tap(v => {\n          const records: IErrorRecord[] = []\n          for (const item of v) {\n            if (item.validatorName) {\n              records.push({\n                validatorName: item.validatorName,\n                error: null,\n                template: item.template,\n                external: item.external\n              })\n            }\n          }\n          this._fieldErrorsSubject2.next(records)\n        }))\n        .subscribe(v => this._fieldErrorsSubject.next(v))\n    }\n  }\n  /** @ignore */\n  private _fieldErrors: QueryList<FormFieldErrorDirective[]> | undefined | null\n  /** @ignore */\n  private _sub?: Subscription\n\n  /** @ignore */\n  private readonly _fieldErrorsSubject = new ReplaySubject<FormFieldErrorDirective[]>(1)\n  /** @ignore */\n  public readonly fieldErrors$: Observable<FormFieldErrorDirective[]> = this._fieldErrorsSubject.asObservable()\n\n  /** @ignore */\n  private readonly _fieldErrorsSubject2 = new ReplaySubject<IErrorRecord[]>(1)\n  /** @ignore */\n  public readonly fieldErrors2$: Observable<IErrorRecord[]> = this._fieldErrorsSubject2.asObservable()\n\n  get isPasswordInput() {\n    return this.contentInput && this.contentInput.type && this.contentInput.type === 'password'\n  }\n  get passwordInputElement() {\n    return this.contentInput && this.contentInput._elementRef && this.contentInput._elementRef.nativeElement\n  }\n\n  get hasHelpText() { return !!this._helpTextStrSubject.value || !!this._helpTextTplSubject.value }\n  // get hasHelpText() { return !!this.helpText || !!this._helpTextTpl }\n\n  private _helpTextSub = Subscription.EMPTY\n\n  /** @ignore */\n  constructor(\n    private readonly _elementRef: ElementRef\n  ) { }\n\n  /** @ignore */\n  ngOnInit() {\n    this._helpTextSub = this._contentInputSubject.pipe(\n      filter(contentInput => !!contentInput),\n      switchMap(contentInput => combineLatest([\n        this._helpTextStrSubject,\n        this._helpTextTplSubject\n      ]).pipe(\n        map(() => this.hasHelpText),\n        distinctUntilChanged(),\n        tap(() => {\n          if (!!contentInput) {\n            contentInput.ariaDescribedBy = this._helpTextId || undefined\n          }\n        })\n      ))\n    ).subscribe()\n  }\n\n  /** @ignore */\n  ngOnDestroy() {\n    this._sub?.unsubscribe()\n    this._helpTextSub?.unsubscribe()\n  }\n\n  /** @ignore */\n  public isValidatorMatch(validatorName: string, tplValidatorName: string, errors: any): boolean {\n    const tplValidatorNames = tplValidatorName.split(' ')\n\n    for (let i = 0; i < tplValidatorNames.length; i++) {\n      const name = tplValidatorNames[i]\n      if (name === validatorName && i === 0) {\n        return true\n      }\n    }\n\n    return false\n  }\n\n  /** @ignore */\n  public _labelElemResized(labelElem: HTMLLabelElement) {\n    if (labelElem) {\n      this._errorPadding = `${labelElem.getBoundingClientRect().width}px`\n    } else {\n      this._errorPadding = '0px'\n    }\n  }\n\n  public getElement(): HTMLElement {\n    return this._elementRef.nativeElement\n  }\n\n}\n","import { BooleanInput } from '@angular/cdk/coercion'\nimport { ChangeDetectionStrategy, Component, Input, Optional } from '@angular/core'\n\nimport { InputBoolean } from '@theseam/ui-common/core'\n\nimport { TheSeamFormFieldComponent } from './form-field.component'\n\n@Component({\n  selector: 'seam-form-field-required-indicator',\n  template: `\n    <ng-container *ngIf=\"_formField?.contentInput; else noControl\">\n      <ng-container *ngIf=\"_formField?.contentInput?.required\">*</ng-container>\n    </ng-container>\n    <ng-template #noControl>\n      <ng-container *ngIf=\"required\">*</ng-container>\n    </ng-template>\n  `,\n  styles: [],\n  host: {\n    'class': 'text-danger'\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FormFieldRequiredIndicatorComponent {\n  static ngAcceptInputType_required: BooleanInput\n\n  /** Used if a form control is not found. */\n  @Input() @InputBoolean() required: boolean = false\n\n  constructor(\n    @Optional() public readonly _formField: TheSeamFormFieldComponent\n  ) { }\n\n}\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\nimport { ReactiveFormsModule } from '@angular/forms'\n\nimport { TheSeamFormFieldErrorModule } from '@theseam/ui-common/form-field-error'\nimport { TheSeamSharedModule } from '@theseam/ui-common/shared'\n\nimport { FormFieldErrorDirective } from './form-field-error.directive'\nimport { FormFieldHelpTextDirective } from './form-field-help-text.directive'\nimport { FormFieldLabelTplDirective } from './form-field-label-tpl.directive'\nimport { FormFieldRequiredIndicatorComponent } from './form-field-required-indicator.component'\nimport { TheSeamFormFieldComponent } from './form-field.component'\nimport { InputDirective } from './input.directive'\n\n@NgModule({\n  declarations: [\n    TheSeamFormFieldComponent,\n    InputDirective,\n    FormFieldErrorDirective,\n    FormFieldLabelTplDirective,\n    FormFieldRequiredIndicatorComponent,\n    FormFieldHelpTextDirective\n  ],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    TheSeamFormFieldErrorModule,\n    TheSeamSharedModule\n  ],\n  exports: [\n    TheSeamFormFieldComponent,\n    InputDirective,\n    FormFieldErrorDirective,\n    FormFieldLabelTplDirective,\n    FormFieldRequiredIndicatorComponent,\n    FormFieldHelpTextDirective\n  ]\n})\nexport class TheSeamFormFieldModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

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