@theseam/ui-common 0.4.30 → 1.0.0-beta.0

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

@@ -0,0 +1,4018 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive, InjectionToken, ChangeDetectorRef, HostListener, HostBinding, Input, forwardRef, ViewContainerRef, isDevMode, TemplateRef, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule, ViewChild, EventEmitter, Output, Injectable, Injector, ViewChildren, Inject, Optional, ContentChildren } from '@angular/core';
+import { tap, map, startWith, switchMap, shareReplay, mapTo, take, auditTime, debounceTime, takeUntil, distinctUntilChanged, finalize, filter } from 'rxjs/operators';
+import * as i1 from '@angular/cdk/portal';
+import { TemplatePortal, PortalModule, BasePortalOutlet, ComponentPortal } from '@angular/cdk/portal';
+import * as i2$1 from '@angular/common';
+import { NgIf, NgFor, NgTemplateOutlet, AsyncPipe, CommonModule, NgStyle } from '@angular/common';
+import { BehaviorSubject, from, isObservable, Subject, of, combineLatest, map as map$1, defer, Observable } from 'rxjs';
+import { faAngleDoubleRight, faAngleDoubleLeft, faLock, faUnlock, faAngleLeft, faBars, faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import * as i1$3 from '@theseam/ui-common/layout';
+import { TheSeamLayoutService, TheSeamLayoutModule } from '@theseam/ui-common/layout';
+import { TheSeamOverlayScrollbarDirective } from '@theseam/ui-common/scrollbar';
+import { hasProperty, notNullOrUndefined, observeControlValue, observeControlStatus, isNullOrUndefined } from '@theseam/ui-common/utils';
+import { __decorate } from 'tslib';
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i1$1 from '@angular/cdk/drag-drop';
+import { moveItemInArray, transferArrayItem, DragDropModule, CdkDrag } from '@angular/cdk/drag-drop';
+import { InputBoolean, InputNumber, mixinDisabled } from '@theseam/ui-common/core';
+import { THESEAM_WIDGET_DATA, THESEAM_WIDGET_ACCESSOR } from '@theseam/ui-common/widget';
+import * as i2 from '@theseam/ui-common/icon';
+import { TheSeamIconModule } from '@theseam/ui-common/icon';
+import * as i3 from '@theseam/ui-common/buttons';
+import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
+import { TheSeamDynamicComponentLoader } from '@theseam/ui-common/dynamic-component-loader';
+import { trigger, state, transition, style, animate, group, query, animateChild, keyframes } from '@angular/animations';
+import * as i1$2 from '@angular/router';
+import { RouterModule, NavigationEnd, NavigationStart, Router } from '@angular/router';
+import * as i4 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i5 from '@theseam/ui-common/tooltip';
+import { TheSeamTooltipModule } from '@theseam/ui-common/tooltip';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import * as i1$4 from '@angular/flex-layout/extended';
+import * as i3$1 from '@theseam/ui-common/menu';
+import { MenuComponent, TheSeamMenuModule } from '@theseam/ui-common/menu';
+import { faUserCircle } from '@fortawesome/free-regular-svg-icons';
+import * as i1$5 from '@ajsf/core';
+import { JsonSchemaFormModule, isArray, buildTitleMap, hasOwn, JsonSchemaFormService, Framework, WidgetLibraryModule, FrameworkLibraryService, WidgetLibraryService } from '@ajsf/core';
+import * as i3$2 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { TheSeamCheckboxComponent } from '@theseam/ui-common/checkbox';
+import * as i4$1 from '@theseam/ui-common/form-field';
+import { TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
+import * as i5$1 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+import * as i5$2 from '@theseam/ui-common/tel-input';
+import { TheSeamTelInputModule } from '@theseam/ui-common/tel-input';
+import { Platform } from '@angular/cdk/platform';
+import * as i4$2 from '@theseam/ui-common/tiled-select';
+import { TheSeamTiledSelectModule } from '@theseam/ui-common/tiled-select';
+
+class BaseLayoutContentFooterDirective {
+    _elementRef = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutContentFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: BaseLayoutContentFooterDirective, isStandalone: true, selector: "[seamBaseLayoutContentFooter]", exportAs: ["seamBaseLayoutContentFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutContentFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutContentFooter]',
+                    exportAs: 'seamBaseLayoutContentFooter',
+                }]
+        }] });
+
+class BaseLayoutContentHeaderDirective {
+    _elementRef = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutContentHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: BaseLayoutContentHeaderDirective, isStandalone: true, selector: "[seamBaseLayoutContentHeader]", exportAs: ["seamBaseLayoutContentHeader"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutContentHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutContentHeader]',
+                    exportAs: 'seamBaseLayoutContentHeader',
+                }]
+        }] });
+
+class BaseLayoutContentDirective {
+    _elementRef = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: BaseLayoutContentDirective, isStandalone: true, selector: "[seamBaseLayoutContent]", exportAs: ["seamBaseLayoutContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutContent]',
+                    exportAs: 'seamBaseLayoutContent',
+                }]
+        }] });
+
+const THESEAM_BASE_LAYOUT_REF = new InjectionToken('seamBaseLayoutRef');
+
+/**
+ * Can be used to toggle the expand state of the registered nav.
+ */
+class TheSeamBaseLayoutNavToggleDirective {
+    _cdr = inject(ChangeDetectorRef);
+    _baseLayout = inject(THESEAM_BASE_LAYOUT_REF, { optional: true });
+    baseLayout = this._baseLayout ?? undefined;
+    get _attrType() { return this.type; }
+    type = 'button';
+    get _attrAriaLabel() { return this.ariaLabel || null; }
+    /** Screenreader label for the button. */
+    ariaLabel = 'Navigation toggle';
+    _toggleClass = true;
+    _expandedClass = false;
+    _onClick() {
+        if (this.baseLayout && this.baseLayout.registeredNav) {
+            this.baseLayout.registeredNav.toggle();
+        }
+    }
+    ngOnInit() {
+        this.baseLayout?.registeredNav?.expanded$.pipe(tap(exp => {
+            this._expandedClass = exp;
+            this._cdr.markForCheck();
+        })).subscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamBaseLayoutNavToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamBaseLayoutNavToggleDirective, isStandalone: true, selector: "button[seamBaseLayoutNavToggle]", inputs: { type: "type", ariaLabel: ["aria-label", "ariaLabel"] }, host: { listeners: { "click": "_onClick()" }, properties: { "attr.type": "this._attrType", "attr.aria-label": "this._attrAriaLabel", "class.base-layout-nav-toggle": "this._toggleClass", "class.base-layout-nav-toggle--expanded": "this._expandedClass" } }, exportAs: ["seamBaseLayoutNavToggle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamBaseLayoutNavToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[seamBaseLayoutNavToggle]',
+                    exportAs: 'seamBaseLayoutNavToggle',
+                }]
+        }], propDecorators: { _attrType: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }], type: [{
+                type: Input
+            }], _attrAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], _toggleClass: [{
+                type: HostBinding,
+                args: ['class.base-layout-nav-toggle']
+            }], _expandedClass: [{
+                type: HostBinding,
+                args: ['class.base-layout-nav-toggle--expanded']
+            }], _onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class BaseLayoutSideBarFooterDirective {
+    _elementRef = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutSideBarFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: BaseLayoutSideBarFooterDirective, isStandalone: true, selector: "[seamBaseLayoutSideBarFooter]", exportAs: ["seamBaseLayoutSideBarFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutSideBarFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutSideBarFooter]',
+                    exportAs: 'seamBaseLayoutSideBarFooter',
+                }]
+        }] });
+
+class BaseLayoutSideBarDirective {
+    _elementRef = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutSideBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: BaseLayoutSideBarDirective, isStandalone: true, selector: "[seamBaseLayoutSideBar]", exportAs: ["seamBaseLayoutSideBar"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutSideBarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutSideBar]',
+                    exportAs: 'seamBaseLayoutSideBar',
+                }]
+        }] });
+
+class BaseLayoutTopBarDirective {
+    _elementRef = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutTopBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: BaseLayoutTopBarDirective, isStandalone: true, selector: "[seamBaseLayoutTopBar]", exportAs: ["seamBaseLayoutTopBar"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutTopBarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutTopBar]',
+                    exportAs: 'seamBaseLayoutTopBar',
+                }]
+        }] });
+
+class BaseLayoutSideBarHeaderDirective {
+    _elementRef = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutSideBarHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: BaseLayoutSideBarHeaderDirective, isStandalone: true, selector: "[seamBaseLayoutSideBarHeader]", exportAs: ["seamBaseLayoutSideBarHeader"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: BaseLayoutSideBarHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamBaseLayoutSideBarHeader]',
+                    exportAs: 'seamBaseLayoutSideBarHeader',
+                }]
+        }] });
+
+const THE_SEAM_BASE_LAYOUT = {
+    provide: THESEAM_BASE_LAYOUT_REF,
+    useExisting: forwardRef(() => TheSeamBaseLayoutComponent),
+    multi: false,
+};
+class TheSeamBaseLayoutComponent {
+    _viewContainerRef = inject(ViewContainerRef);
+    _layout = inject(TheSeamLayoutService);
+    faAngleDoubleRight = faAngleDoubleRight;
+    faAngleDoubleLeft = faAngleDoubleLeft;
+    overlayNav = false;
+    mobileBreakpoint;
+    showSidebar = true;
+    // TODO: Consider making the template queries not be dynamic. I can see this
+    // potentially causing confusion or issues with potential layouts built with
+    // this component.
+    _topBarTpl;
+    _sideBarTpl;
+    _contentTpl;
+    _contentHeaderTpl;
+    _contentFooterTpl;
+    _topBarPortal;
+    _sideBarPortal;
+    _contentPortal;
+    _contentHeaderPortal;
+    _contentFooterPortal;
+    _hasSideBar = new BehaviorSubject(false);
+    hasSideBar$;
+    isMobile$;
+    get registeredNav() { return this._registeredNav.value; }
+    _registeredNav = new BehaviorSubject(undefined);
+    registeredNav$ = this._registeredNav.asObservable();
+    get registeredActions() { return this._registeredActions.value; }
+    _registeredActions = new BehaviorSubject([]);
+    registeredActions$;
+    constructor() {
+        this.registeredActions$ = this._registeredActions.asObservable();
+        this.isMobile$ = this._layout.isMobile$;
+        this.hasSideBar$ = this._hasSideBar.asObservable();
+    }
+    ngOnInit() {
+        if (this.mobileBreakpoint) {
+            this._layout.setMobileBreakpoint(this.mobileBreakpoint);
+        }
+        if (this._topBarTpl) {
+            this._topBarPortal = new TemplatePortal(this._topBarTpl, this._viewContainerRef);
+        }
+        if (this._sideBarTpl) {
+            this._sideBarPortal = new TemplatePortal(this._sideBarTpl, this._viewContainerRef);
+            if (this.showSidebar) {
+                this._hasSideBar.next(true);
+            }
+        }
+        if (this._contentTpl) {
+            this._contentPortal = new TemplatePortal(this._contentTpl, this._viewContainerRef);
+        }
+        if (this._contentHeaderTpl) {
+            this._contentHeaderPortal = new TemplatePortal(this._contentHeaderTpl, this._viewContainerRef);
+        }
+        if (this._contentFooterTpl) {
+            this._contentFooterPortal = new TemplatePortal(this._contentFooterTpl, this._viewContainerRef);
+        }
+    }
+    registerNav(nav) {
+        // TODO: Allow multiple registered navs
+        // if (this.registeredNav) {
+        //   throw new Error('[TheSeamBaseLayoutComponent] A nav is already registered.')
+        // }
+        // console.log('register nav', nav)
+        this._registeredNav.next(nav);
+    }
+    unregisterNav(nav) {
+        if (this.registeredNav === nav) {
+            this._registeredNav.next(undefined);
+        }
+    }
+    registerAction(action) {
+        const actions = this._registeredActions.value;
+        if (actions.findIndex(a => a.name === action.name) !== -1) {
+            if (isDevMode()) {
+                // eslint-disable-next-line no-console
+                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));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamBaseLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamBaseLayoutComponent, isStandalone: true, selector: "seam-base-layout", inputs: { overlayNav: "overlayNav", mobileBreakpoint: "mobileBreakpoint", showSidebar: "showSidebar" }, providers: [THE_SEAM_BASE_LAYOUT], queries: [{ propertyName: "_topBarTpl", first: true, predicate: BaseLayoutTopBarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_sideBarTpl", first: true, predicate: BaseLayoutSideBarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentTpl", first: true, predicate: BaseLayoutContentDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentHeaderTpl", first: true, predicate: BaseLayoutContentHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentFooterTpl", first: true, predicate: BaseLayoutContentFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header d-flex flex-row\">\n      <div class=\"base-layout-content-container-header-left flex-grow-1\">\n        <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n      </div>\n      <div class=\"base-layout-content-container-header-right d-flex\">\n        <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n          <div class=\"base-layout-registered-action\">\n            <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;z-index:999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto;background:none;margin:.25rem;padding:0;border-radius:0;overflow:hidden}seam-base-layout .base-layout-content-container .base-layout-content-container-header-left{background:none;padding:0rem;margin:0;border-radius:0}seam-base-layout .base-layout-content-container .base-layout-content-container-header-right{background:none;padding:0rem;margin:0;border-radius:0}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: TheSeamOverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamBaseLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-base-layout', providers: [THE_SEAM_BASE_LAYOUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        NgIf,
+                        NgFor,
+                        NgTemplateOutlet,
+                        AsyncPipe,
+                        PortalModule,
+                        TheSeamOverlayScrollbarDirective,
+                    ], template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header d-flex flex-row\">\n      <div class=\"base-layout-content-container-header-left flex-grow-1\">\n        <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n      </div>\n      <div class=\"base-layout-content-container-header-right d-flex\">\n        <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n          <div class=\"base-layout-registered-action\">\n            <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;z-index:999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto;background:none;margin:.25rem;padding:0;border-radius:0;overflow:hidden}seam-base-layout .base-layout-content-container .base-layout-content-container-header-left{background:none;padding:0rem;margin:0;border-radius:0}seam-base-layout .base-layout-content-container .base-layout-content-container-header-right{background:none;padding:0rem;margin:0;border-radius:0}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { overlayNav: [{
+                type: Input
+            }], mobileBreakpoint: [{
+                type: Input
+            }], showSidebar: [{
+                type: Input
+            }], _topBarTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutTopBarDirective, { static: true, read: TemplateRef }]
+            }], _sideBarTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutSideBarDirective, { static: true, read: TemplateRef }]
+            }], _contentTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutContentDirective, { static: true, read: TemplateRef }]
+            }], _contentHeaderTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutContentHeaderDirective, { static: true, read: TemplateRef }]
+            }], _contentFooterTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutContentFooterDirective, { static: true, read: TemplateRef }]
+            }] } });
+
+class TheSeamBaseLayoutModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamBaseLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamBaseLayoutModule, imports: [TheSeamBaseLayoutComponent,
+            BaseLayoutContentDirective,
+            BaseLayoutSideBarDirective,
+            BaseLayoutSideBarFooterDirective,
+            BaseLayoutSideBarHeaderDirective,
+            BaseLayoutTopBarDirective,
+            TheSeamBaseLayoutNavToggleDirective,
+            BaseLayoutContentHeaderDirective,
+            BaseLayoutContentFooterDirective], exports: [TheSeamBaseLayoutComponent,
+            BaseLayoutContentDirective,
+            BaseLayoutSideBarDirective,
+            BaseLayoutSideBarFooterDirective,
+            BaseLayoutSideBarHeaderDirective,
+            BaseLayoutTopBarDirective,
+            TheSeamBaseLayoutNavToggleDirective,
+            BaseLayoutContentHeaderDirective,
+            BaseLayoutContentFooterDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamBaseLayoutModule, imports: [TheSeamBaseLayoutComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamBaseLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TheSeamBaseLayoutComponent,
+                        BaseLayoutContentDirective,
+                        BaseLayoutSideBarDirective,
+                        BaseLayoutSideBarFooterDirective,
+                        BaseLayoutSideBarHeaderDirective,
+                        BaseLayoutTopBarDirective,
+                        TheSeamBaseLayoutNavToggleDirective,
+                        BaseLayoutContentHeaderDirective,
+                        BaseLayoutContentFooterDirective,
+                    ],
+                    exports: [
+                        TheSeamBaseLayoutComponent,
+                        BaseLayoutContentDirective,
+                        BaseLayoutSideBarDirective,
+                        BaseLayoutSideBarFooterDirective,
+                        BaseLayoutSideBarHeaderDirective,
+                        BaseLayoutTopBarDirective,
+                        TheSeamBaseLayoutNavToggleDirective,
+                        BaseLayoutContentHeaderDirective,
+                        BaseLayoutContentFooterDirective,
+                    ],
+                }]
+        }] });
+
+class DashboardWidgetContainerComponent {
+    def;
+    templateRef;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DashboardWidgetContainerComponent, isStandalone: true, selector: "seam-dashboard-widget-container", inputs: { def: "def" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-dashboard-widget-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template><ng-content></ng-content></ng-template>\n" }]
+        }], propDecorators: { def: [{
+                type: Input
+            }], templateRef: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }] } });
+
+const THESEAM_DASHBOARD_WIDGETS_ACCESSOR = new InjectionToken('THESEAM_DASHBOARD_WIDGETS_ACCESSOR');
+
+class DashboardWidgetTemplateContainerComponent {
+    _dashboardWidgetsComponent = inject(THESEAM_DASHBOARD_WIDGETS_ACCESSOR);
+    item;
+    template$;
+    constructor() {
+        this.template$ = this._dashboardWidgetsComponent.containers$.pipe(map(containers => containers.find((c) => c.def.widgetId === this.item?.widgetId)), map(container => container && container.templateRef));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetTemplateContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DashboardWidgetTemplateContainerComponent, isStandalone: true, selector: "seam-dashboard-widget-template-container", inputs: { item: "item" }, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"$any(template$ | async)\"></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetTemplateContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-dashboard-widget-template-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        AsyncPipe,
+                    ], template: "<ng-template [ngTemplateOutlet]=\"$any(template$ | async)\"></ng-template>\n" }]
+        }], ctorParameters: () => [], 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 {
+    _viewContainerRef = inject(ViewContainerRef);
+    /** Whether the portal component is initialized. */
+    _isInitialized = false;
+    /** Reference to the currently-attached component/view ref. */
+    _attachedRef;
+    /** 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;
+    }
+    /** Emits when a portal is attached to the outlet. */
+    attached = new EventEmitter();
+    /** 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.
+     *
+     * @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 ref = viewContainerRef.createComponent(portal.component, {
+            index: viewContainerRef.length,
+            injector: 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;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetPortalOutletDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DashboardWidgetPortalOutletDirective, isStandalone: true, selector: "[seamDashboardWidgetPortalOutlet]", inputs: { portal: ["seamDashboardWidgetPortalOutlet", "portal"] }, outputs: { attached: "attached" }, exportAs: ["seamDashboardWidgetPortalOutlet"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetPortalOutletDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDashboardWidgetPortalOutlet]',
+                    exportAs: 'seamDashboardWidgetPortalOutlet',
+                    inputs: ['portal: seamDashboardWidgetPortalOutlet'],
+                }]
+        }], propDecorators: { attached: [{
+                type: Output
+            }] } });
+
+const THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR = new InjectionToken('ITheSeamDashboardWidgetsPreferencesAccessor');
+
+// TODO: This needs a unit test to make sure it will not cause a race condition
+// if update is called faster than the previous can respond.
+//
+// The ideal approach I am thinking, without steping through the process too
+// thoroughly is to hold the new data emit until all pending updates are done.
+// Any pending updates other than the most recently requested will be ignored
+// and just wait on the most recent, and if already running it should be
+// canceled if possible. Also, incase something happens that causes the new data
+// emissions to get held up too long, there could be a threshold time that the
+// new data can be held up.
+/**
+ * Manages anything dealing with retrieving and updating dashboard widget
+ * preference data from the provided accessor.
+ */
+class DashboardWidgetsPreferencesService {
+    _prefsAccessor = inject(THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, { optional: true });
+    _tablePrefsMap = new Map();
+    // private _pending = false
+    // public get pending() { return this._pending }
+    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()) {
+                    // eslint-disable-next-line no-console
+                    console.error(error);
+                }
+                return null;
+            }
+        }), map(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({ ..._layout });
+            }
+            const newPrefs = { ...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;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetsPreferencesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetsPreferencesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetsPreferencesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DashboardWidgetsService {
+    _dynamicComponentLoaderModule = inject(TheSeamDynamicComponentLoader);
+    _preferences = inject(DashboardWidgetsPreferencesService);
+    preferenceKey = 'datatable-widgets';
+    defaultNumColumns = 3;
+    /** Used for operations, such as 'addWidget', if the column is not specified. */
+    defaultColumn = 0;
+    get widgets() { return this._widgets.value; }
+    set widgets(value) { this._widgets.next(value); }
+    _widgets = new BehaviorSubject([]);
+    get numColumns() { return this._numColumns.value; }
+    set numColumns(value) {
+        if (value !== this._numColumns.value) {
+            this._numColumns.next(value);
+        }
+    }
+    _numColumns = new BehaviorSubject(this.defaultNumColumns);
+    numColumns$;
+    widgetItems$;
+    widgetColumns$;
+    _viewContainerRefSubject = new BehaviorSubject(undefined);
+    constructor() {
+        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 }));
+    }
+    _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) {
+                    // eslint-disable-next-line no-console
+                    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()) {
+                // eslint-disable-next-line no-console
+                console.warn(`[DashboardWidgetsService] Widget ignored. All widgets must have a 'widgetId'.`, def);
+            }
+            return of(undefined);
+        }
+        return this.createWidgetPortal(def, vcr).pipe(map(portal => ({
+            ...def,
+            col: def.col || this.defaultColumn,
+            order: def.order || 0,
+            portal,
+            __itemDef: def
+        })));
+    }
+    createWidgetPortal(def, vcr) {
+        const injector = Injector.create({ providers: [
+                { provide: THESEAM_WIDGET_DATA, useValue: { widgetId: def.widgetId } },
+            ], parent: this._viewContainerRefSubject.value?.injector });
+        // TODO: I still use the ViewContainerRef injector, but I don't pass it to
+        // the portal, because it throws an error and I am not sure why. I would
+        // like to find out why, even though I don't think it is needed, because our
+        // code has been leaving it undefined for a while, when I thought it was
+        // being used.
+        if (typeof def.component === 'string') {
+            return this._dynamicComponentLoaderModule
+                .getComponentFactory(def.component).pipe(map(componentFactory => {
+                return new ComponentPortal(componentFactory.componentType, undefined, injector);
+            }), take(1));
+        }
+        return of(new ComponentPortal(def.component, undefined, injector));
+    }
+    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({
+                ...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 => ({ ...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));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class DashboardWidgetsComponent {
+    static ngAcceptInputType_gapSize;
+    static ngAcceptInputType_numColumns;
+    static ngAcceptInputType_widgetsDraggable;
+    static ngAcceptInputType_dragToggleVisible;
+    static ngAcceptInputType_widgets;
+    _dashboardWidgets = inject(DashboardWidgetsService);
+    _viewContainerRef = inject(ViewContainerRef);
+    _cdr = inject(ChangeDetectorRef);
+    _baseLayoutRef = inject(THESEAM_BASE_LAYOUT_REF, { optional: true });
+    faLock = faLock;
+    faUnlock = faUnlock;
+    _actionWidgetDragToggleName = 'widget-drag-toggle';
+    _ngUnsubscribe = new Subject();
+    get gapSize() { return this._gapSize.value; }
+    set gapSize(val) {
+        this._gapSize.next(coerceNumberProperty(val));
+    }
+    _gapSize = new BehaviorSubject(30);
+    widgetsDraggable = false;
+    get dragToggleVisible() { return this._dragToggleVisible.value; }
+    set dragToggleVisible(val) {
+        this._dragToggleVisible.next(coerceBooleanProperty(val));
+    }
+    _dragToggleVisible = new BehaviorSubject(true);
+    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; }
+    widgetItems$;
+    widgetColumns$;
+    containers$;
+    _gapStyleSize$;
+    containers;
+    cdkDragDirectives;
+    _toggleBtnTpl;
+    _containers = new BehaviorSubject([]);
+    _layoutChange = new Subject();
+    widgetsChange = new EventEmitter();
+    _widthChange = new Subject();
+    constructor() {
+        this._dashboardWidgets.setViewContainerRef(this._viewContainerRef);
+        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$;
+    }
+    ngOnInit() {
+        // this._dashboardWidgets.setViewContainerRef(this._viewContainerRef)
+        this._layoutChange.pipe(switchMap(() => this.widgetItems$.pipe(take(1), tap(widgetItems => this.widgetsChange.emit(widgetItems)), 
+        // map(widgetItems => this._dashboardWidgets.toSerializeableItems(widgetItems)),
+        // tap(v => console.log('serializable', v)),
+        switchMap(() => this._dashboardWidgets.savePreferences()))), takeUntil(this._ngUnsubscribe)).subscribe();
+    }
+    ngOnDestroy() {
+        this._unregisterToggleAction();
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    ngAfterViewInit() {
+        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();
+        }
+        this.containers?.changes.pipe(startWith(undefined), map(() => this.containers?.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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DashboardWidgetsComponent, isStandalone: true, selector: "seam-dashboard-widgets", inputs: { gapSize: "gapSize", widgetsDraggable: "widgetsDraggable", dragToggleVisible: "dragToggleVisible", numColumns: "numColumns", widgets: "widgets" }, outputs: { widgetsChange: "widgetsChange" }, providers: [
+            {
+                provide: THESEAM_WIDGET_ACCESSOR,
+                useExisting: forwardRef(() => DashboardWidgetsComponent),
+            },
+            {
+                provide: THESEAM_DASHBOARD_WIDGETS_ACCESSOR,
+                useExisting: forwardRef(() => DashboardWidgetsComponent),
+            },
+        ], viewQueries: [{ propertyName: "_toggleBtnTpl", first: true, predicate: ["toggleBtnTpl"], descendants: true, static: true }, { propertyName: "containers", predicate: DashboardWidgetContainerComponent, descendants: true }, { propertyName: "cdkDragDirectives", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<!--\n  This is an ugly trick I am using to render the component into an <ng-content>\n  wrapped in an <ng-template> to move the component to different outlets without\n  reinitializing it. This way the widget won't reload when moving between\n  columns. When I remember how I programatically did this I will remove this\n  weirdness.\n -->\n <seam-dashboard-widget-container *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\" [def]=\"$any(item)\">\n  <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n  <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n  style=\"flex: 1410px;\"\n  [style.padding.px]=\"_gapStyleSize$ | async\"\n  (seamElemResized)=\"_resized($any($event))\"\n  cdkDropListGroup>\n  <div *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n    class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n    cdkDropList\n    [cdkDropListData]=\"col.items\"\n    (cdkDropListDropped)=\"drop($any($event))\">\n    <div *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n      class=\"dashboard-widgets-list-item\"\n      [attr.data-widget-id]=\"item.widgetId\"\n      cdkDrag\n      [cdkDragDisabled]=\"!widgetsDraggable\">\n      <div [style.margin.px]=\"_gapStyleSize$ | async\">\n        <seam-dashboard-widget-template-container [item]=\"item\"></seam-dashboard-widget-template-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n  <button seamButton theme=\"baselayout-action\" title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\" (click)=\"toggleDragging()\">\n    <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n  </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i3.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "component", type: DashboardWidgetTemplateContainerComponent, selector: "seam-dashboard-widget-template-container", inputs: ["item"] }, { kind: "component", type: DashboardWidgetContainerComponent, selector: "seam-dashboard-widget-container", inputs: ["def"] }, { kind: "directive", type: DashboardWidgetPortalOutletDirective, selector: "[seamDashboardWidgetPortalOutlet]", inputs: ["seamDashboardWidgetPortalOutlet"], outputs: ["attached"], exportAs: ["seamDashboardWidgetPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+__decorate([
+    InputBoolean()
+], DashboardWidgetsComponent.prototype, "widgetsDraggable", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardWidgetsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-dashboard-widgets', providers: [
+                        {
+                            provide: THESEAM_WIDGET_ACCESSOR,
+                            useExisting: forwardRef(() => DashboardWidgetsComponent),
+                        },
+                        {
+                            provide: THESEAM_DASHBOARD_WIDGETS_ACCESSOR,
+                            useExisting: forwardRef(() => DashboardWidgetsComponent),
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        NgFor,
+                        AsyncPipe,
+                        DragDropModule,
+                        TheSeamIconModule,
+                        TheSeamButtonsModule,
+                        DashboardWidgetTemplateContainerComponent,
+                        DashboardWidgetContainerComponent,
+                        DashboardWidgetPortalOutletDirective,
+                    ], 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($any($event))\"\n  cdkDropListGroup>\n  <div *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n    class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n    cdkDropList\n    [cdkDropListData]=\"col.items\"\n    (cdkDropListDropped)=\"drop($any($event))\">\n    <div *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n      class=\"dashboard-widgets-list-item\"\n      [attr.data-widget-id]=\"item.widgetId\"\n      cdkDrag\n      [cdkDragDisabled]=\"!widgetsDraggable\">\n      <div [style.margin.px]=\"_gapStyleSize$ | async\">\n        <seam-dashboard-widget-template-container [item]=\"item\"></seam-dashboard-widget-template-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n  <button seamButton theme=\"baselayout-action\" title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\" (click)=\"toggleDragging()\">\n    <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n  </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { gapSize: [{
+                type: Input
+            }], widgetsDraggable: [{
+                type: Input
+            }], dragToggleVisible: [{
+                type: Input
+            }], numColumns: [{
+                type: Input
+            }], widgets: [{
+                type: Input
+            }], containers: [{
+                type: ViewChildren,
+                args: [DashboardWidgetContainerComponent]
+            }], cdkDragDirectives: [{
+                type: ViewChildren,
+                args: [CdkDrag]
+            }], _toggleBtnTpl: [{
+                type: ViewChild,
+                args: ['toggleBtnTpl', { static: true }]
+            }], widgetsChange: [{
+                type: Output
+            }] } });
+
+class DashboardComponent {
+    widgets;
+    widgetsDraggable = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DashboardComponent, isStandalone: true, selector: "seam-dashboard", inputs: { widgets: "widgets", widgetsDraggable: "widgetsDraggable" }, ngImport: i0, template: "<seam-dashboard-widgets [widgets]=\"widgets\" [widgetsDraggable]=\"widgetsDraggable\"></seam-dashboard-widgets>\n", styles: [""], dependencies: [{ kind: "component", type: DashboardWidgetsComponent, selector: "seam-dashboard-widgets", inputs: ["gapSize", "widgetsDraggable", "dragToggleVisible", "numColumns", "widgets"], outputs: ["widgetsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+__decorate([
+    InputBoolean()
+], DashboardComponent.prototype, "widgetsDraggable", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        DashboardWidgetsComponent,
+                    ], template: "<seam-dashboard-widgets [widgets]=\"widgets\" [widgetsDraggable]=\"widgetsDraggable\"></seam-dashboard-widgets>\n" }]
+        }], propDecorators: { widgets: [{
+                type: Input
+            }], widgetsDraggable: [{
+                type: Input
+            }] } });
+
+class TheSeamDashboardModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDashboardModule, imports: [
+            // CommonModule,
+            // PortalModule,
+            // DragDropModule,
+            // TheSeamButtonsModule,
+            // TheSeamIconModule,
+            // TheSeamSharedModule,
+            DashboardComponent,
+            DashboardWidgetsComponent,
+            DashboardWidgetContainerComponent,
+            DashboardWidgetTemplateContainerComponent,
+            DashboardWidgetPortalOutletDirective], exports: [DashboardComponent,
+            DashboardWidgetsComponent,
+            DashboardWidgetPortalOutletDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDashboardModule, imports: [
+            // CommonModule,
+            // PortalModule,
+            // DragDropModule,
+            // TheSeamButtonsModule,
+            // TheSeamIconModule,
+            // TheSeamSharedModule,
+            DashboardComponent,
+            DashboardWidgetsComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDashboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    // declarations: [
+                    //   // DashboardComponent,
+                    //   // DashboardWidgetsComponent,
+                    // ],
+                    imports: [
+                        // CommonModule,
+                        // PortalModule,
+                        // DragDropModule,
+                        // TheSeamButtonsModule,
+                        // TheSeamIconModule,
+                        // TheSeamSharedModule,
+                        DashboardComponent,
+                        DashboardWidgetsComponent,
+                        DashboardWidgetContainerComponent,
+                        DashboardWidgetTemplateContainerComponent,
+                        DashboardWidgetPortalOutletDirective,
+                    ],
+                    exports: [
+                        DashboardComponent,
+                        DashboardWidgetsComponent,
+                        DashboardWidgetPortalOutletDirective,
+                    ]
+                }]
+        }] });
+
+const THESEAM_SIDE_NAV_ACCESSOR = new InjectionToken('THESEAM_SIDE_NAV_ACCESSOR');
+const THESEAM_SIDE_NAV_CONFIG = new InjectionToken('THESEAM_SIDE_NAV_CONFIG');
+const DEFAULT_SIDE_NAV_CONFIG = {
+    activeNavigatable: false
+};
+
+const EXPANDED_STATE$1 = 'expanded';
+const COLLAPSED_STATE$1 = 'collapsed';
+class SideNavItemComponent {
+    _sideNav;
+    static ngAcceptInputType_hierLevel;
+    static ngAcceptInputType_indentSize;
+    static ngAcceptInputType_expanded;
+    static ngAcceptInputType_compact;
+    static ngAcceptInputType_active;
+    _ngUnsubscribe = new Subject();
+    faAngleLeft = faAngleLeft;
+    _linkHistoryState = { seamReload: true, triggeredByNavBar: true };
+    itemType;
+    icon;
+    hideEmptyIcon;
+    label;
+    active = false;
+    activeNavigatable = false;
+    set link(value) { this._link.next(value); }
+    get link() { return this._link.value; }
+    _link = new BehaviorSubject(undefined);
+    link$ = this._link.asObservable();
+    queryParams;
+    children;
+    hierLevel = 0;
+    indentSize = 10;
+    set expanded(value) { this._expanded.next(coerceBooleanProperty(value)); }
+    get expanded() { return this._expanded.value; }
+    _expanded = new BehaviorSubject(false);
+    expanded$ = this._expanded.asObservable();
+    set compact(value) { this._compact.next(coerceBooleanProperty(value)); }
+    get compact() { return this._compact.value; }
+    _compact = new BehaviorSubject(false);
+    compact$ = this._compact.asObservable();
+    isMobile;
+    badgeText;
+    badgeTheme = 'danger';
+    /**
+     * Content to provide to assistive technology, such as screen readers.
+     */
+    badgeSrContent;
+    get badgeTooltip() { return this._badgeTooltip; }
+    set badgeTooltip(value) {
+        if (value !== null && value !== undefined) {
+            if (typeof value === 'string') {
+                this._badgeTooltip = {
+                    tooltip: value,
+                    placement: 'auto',
+                    container: 'body',
+                    disabled: false
+                };
+            }
+            else {
+                this._badgeTooltip = {
+                    ...value,
+                    placement: value.placement || 'auto',
+                    container: value.container || 'body',
+                    disabled: typeof value?.disabled === 'boolean'
+                        ? value.disabled
+                        : typeof value.tooltip === 'string',
+                };
+            }
+        }
+        else {
+            this._badgeTooltip = undefined;
+        }
+    }
+    _badgeTooltip;
+    menuItemTooltipConfig;
+    menuItemTooltipDisabled;
+    get _isActiveCssClass() { return this.active; }
+    get _isClickableWhenActiveCssClass() { return this.activeNavigatable; }
+    get _attrDataHierLevel() { return this.hierLevel; }
+    childGroupAnimState$;
+    constructor(_sideNav) {
+        this._sideNav = _sideNav;
+        this.childGroupAnimState$ = this.expanded$
+            .pipe(map$1(expanded => expanded ? EXPANDED_STATE$1 : COLLAPSED_STATE$1));
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    get hasChildren() {
+        return Array.isArray(this.children) && this.children.length > 0;
+    }
+    toggleChildren() {
+        this.expanded = !this.expanded;
+    }
+    _linkClicked() {
+        // Close nav when link is clicked while in overlay state
+        if (this._sideNav.overlay) {
+            this._sideNav.collapse();
+        }
+    }
+    get showIconBlock() {
+        return notNullOrUndefined(this.icon) || this.hideEmptyIcon !== true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SideNavItemComponent, deps: [{ token: THESEAM_SIDE_NAV_ACCESSOR }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SideNavItemComponent, isStandalone: true, selector: "seam-side-nav-item", inputs: { itemType: "itemType", icon: "icon", hideEmptyIcon: "hideEmptyIcon", label: "label", active: "active", activeNavigatable: "activeNavigatable", link: "link", queryParams: "queryParams", children: "children", hierLevel: "hierLevel", indentSize: "indentSize", expanded: "expanded", compact: "compact", isMobile: "isMobile", badgeText: "badgeText", badgeTheme: "badgeTheme", badgeSrContent: "badgeSrContent", badgeTooltip: "badgeTooltip", menuItemTooltipConfig: "menuItemTooltipConfig", menuItemTooltipDisabled: "menuItemTooltipDisabled" }, host: { properties: { "class.seam-side-nav-item--active": "this._isActiveCssClass", "class.active-clickable": "this._isClickableWhenActiveCssClass", "attr.data-hier-level": "this._attrDataHierLevel" } }, exportAs: ["seamSideNavItem"], ngImport: i0, template: "<div class=\"d-flex flex-row side-nav-item-wrapper\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [isMobile]=\"isMobile\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state?.active\"\n      [expanded]=\"$any(child).__state?.expanded\"\n      [hideEmptyIcon]=\"hideEmptyIcon\"\n      [indentSize]=\"indentSize\"\n      [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n      [menuItemTooltipDisabled]=\"menuItemTooltipDisabled\"\n      [activeNavigatable]=\"$any(child).activeNavigatable\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row align-items-stretch rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    [seamTooltip]=\"label ?? null\"\n    [tooltipClass]=\"menuItemTooltipConfig?.class\"\n    [placement]=\"menuItemTooltipConfig?.placement\"\n    [container]=\"menuItemTooltipConfig?.container\"\n    [disableTooltip]=\"menuItemTooltipDisabled ?? false\"\n    [class.active-clickable]=\"activeNavigatable\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <div class=\"d-flex flex-row w-100\"\n    [seamTooltip]=\"label ?? null\"\n    [tooltipClass]=\"menuItemTooltipConfig?.class\"\n    [placement]=\"menuItemTooltipConfig?.placement\"\n    [container]=\"menuItemTooltipConfig?.container\"\n    [disableTooltip]=\"menuItemTooltipDisabled ?? false\">\n    <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n      [class.nav-link__compact]=\"compact\"\n      [routerLink]=\"link\"\n      [queryParams]=\"queryParams\"\n      [state]=\"_linkHistoryState\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      (click)=\"_linkClicked()\"\n      [class.active-clickable]=\"activeNavigatable\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </a>\n\n    <ng-template #noLink>\n      <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n        [class.nav-link__compact]=\"compact\"\n        [seamTooltip]=\"label ?? null\"\n        [tooltipClass]=\"menuItemTooltipConfig?.class\"\n        [placement]=\"menuItemTooltipConfig?.placement\"\n        [container]=\"menuItemTooltipConfig?.container\"\n        [disableTooltip]=\"menuItemTooltipDisabled ?? false\">\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  </div>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [seamTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"isMobile || !badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["seam-side-nav-item{display:block;transition:.25s ease-in-out background-color}seam-side-nav-item.seam-side-nav-item--active{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .active,seam-side-nav-item.seam-side-nav-item--active:active,seam-side-nav-item.seam-side-nav-item--active .side-nav-item.active:hover{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item.seam-side-nav-item--active .nav-link{color:#fff}seam-side-nav-item.seam-side-nav-item--active .side-nav-btn{color:#fff}seam-side-nav-item .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active:not(.active-clickable){pointer-events:none;cursor:default}seam-side-nav-item .side-nav-item.active:not(.active-clickable) .side-nav-item--badge{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#fff;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .side-nav-btn:disabled .side-nav-item--badge,seam-side-nav-item .side-nav-btn.disabled .side-nav-item--badge{pointer-events:none;cursor:default}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid rgb(41.8305785124,99.4462809917,149.1694214876);width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"], dependencies: [{ kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "hideEmptyIcon", "label", "active", "activeNavigatable", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "isMobile", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "menuItemTooltipConfig", "menuItemTooltipDisabled"], exportAs: ["seamSideNavItem"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i4.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "ngmodule", type: TheSeamTooltipModule }, { kind: "directive", type: i5.TheSeamTooltipDirective, selector: "[seamTooltip]", inputs: ["seamTooltip", "tooltipClass", "placement", "container", "disableTooltip", "showDelay", "hideDelay", "trigger"], exportAs: ["seamTooltip"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], animations: [
+            trigger('childGroupAnim', [
+                state(EXPANDED_STATE$1, style({ height: '*' })),
+                state(COLLAPSED_STATE$1, style({ height: 0, visibility: 'hidden' })),
+                transition(`${EXPANDED_STATE$1} <=> ${COLLAPSED_STATE$1}`, animate('0.2s ease-in-out')),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+__decorate([
+    InputBoolean()
+], SideNavItemComponent.prototype, "active", void 0);
+__decorate([
+    InputBoolean()
+], SideNavItemComponent.prototype, "activeNavigatable", void 0);
+__decorate([
+    InputNumber(0)
+], SideNavItemComponent.prototype, "hierLevel", void 0);
+__decorate([
+    InputNumber(10)
+], SideNavItemComponent.prototype, "indentSize", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SideNavItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-side-nav-item', exportAs: 'seamSideNavItem', animations: [
+                        trigger('childGroupAnim', [
+                            state(EXPANDED_STATE$1, style({ height: '*' })),
+                            state(COLLAPSED_STATE$1, style({ height: 0, visibility: 'hidden' })),
+                            transition(`${EXPANDED_STATE$1} <=> ${COLLAPSED_STATE$1}`, animate('0.2s ease-in-out')),
+                        ]),
+                    ], imports: [
+                        CommonModule,
+                        RouterModule,
+                        TheSeamIconModule,
+                        A11yModule,
+                        TheSeamTooltipModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"d-flex flex-row side-nav-item-wrapper\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [isMobile]=\"isMobile\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state?.active\"\n      [expanded]=\"$any(child).__state?.expanded\"\n      [hideEmptyIcon]=\"hideEmptyIcon\"\n      [indentSize]=\"indentSize\"\n      [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n      [menuItemTooltipDisabled]=\"menuItemTooltipDisabled\"\n      [activeNavigatable]=\"$any(child).activeNavigatable\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row align-items-stretch rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    [seamTooltip]=\"label ?? null\"\n    [tooltipClass]=\"menuItemTooltipConfig?.class\"\n    [placement]=\"menuItemTooltipConfig?.placement\"\n    [container]=\"menuItemTooltipConfig?.container\"\n    [disableTooltip]=\"menuItemTooltipDisabled ?? false\"\n    [class.active-clickable]=\"activeNavigatable\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <div class=\"d-flex flex-row w-100\"\n    [seamTooltip]=\"label ?? null\"\n    [tooltipClass]=\"menuItemTooltipConfig?.class\"\n    [placement]=\"menuItemTooltipConfig?.placement\"\n    [container]=\"menuItemTooltipConfig?.container\"\n    [disableTooltip]=\"menuItemTooltipDisabled ?? false\">\n    <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n      [class.nav-link__compact]=\"compact\"\n      [routerLink]=\"link\"\n      [queryParams]=\"queryParams\"\n      [state]=\"_linkHistoryState\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      (click)=\"_linkClicked()\"\n      [class.active-clickable]=\"activeNavigatable\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </a>\n\n    <ng-template #noLink>\n      <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n        [class.nav-link__compact]=\"compact\"\n        [seamTooltip]=\"label ?? null\"\n        [tooltipClass]=\"menuItemTooltipConfig?.class\"\n        [placement]=\"menuItemTooltipConfig?.placement\"\n        [container]=\"menuItemTooltipConfig?.container\"\n        [disableTooltip]=\"menuItemTooltipDisabled ?? false\">\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  </div>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [seamTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"isMobile || !badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["seam-side-nav-item{display:block;transition:.25s ease-in-out background-color}seam-side-nav-item.seam-side-nav-item--active{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .active,seam-side-nav-item.seam-side-nav-item--active:active,seam-side-nav-item.seam-side-nav-item--active .side-nav-item.active:hover{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item.seam-side-nav-item--active .nav-link{color:#fff}seam-side-nav-item.seam-side-nav-item--active .side-nav-btn{color:#fff}seam-side-nav-item .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active:not(.active-clickable){pointer-events:none;cursor:default}seam-side-nav-item .side-nav-item.active:not(.active-clickable) .side-nav-item--badge{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#fff;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .side-nav-btn:disabled .side-nav-item--badge,seam-side-nav-item .side-nav-btn.disabled .side-nav-item--badge{pointer-events:none;cursor:default}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid rgb(41.8305785124,99.4462809917,149.1694214876);width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [THESEAM_SIDE_NAV_ACCESSOR]
+                }] }], propDecorators: { itemType: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], hideEmptyIcon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], activeNavigatable: [{
+                type: Input
+            }], link: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
+            }], children: [{
+                type: Input
+            }], hierLevel: [{
+                type: Input
+            }], indentSize: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], isMobile: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], badgeTheme: [{
+                type: Input
+            }], badgeSrContent: [{
+                type: Input
+            }], badgeTooltip: [{
+                type: Input
+            }], menuItemTooltipConfig: [{
+                type: Input
+            }], menuItemTooltipDisabled: [{
+                type: Input
+            }], _isActiveCssClass: [{
+                type: HostBinding,
+                args: ['class.seam-side-nav-item--active']
+            }], _isClickableWhenActiveCssClass: [{
+                type: HostBinding,
+                args: ['class.active-clickable']
+            }], _attrDataHierLevel: [{
+                type: HostBinding,
+                args: ['attr.data-hier-level']
+            }] } });
+
+class SideNavToggleComponent {
+    static ngAcceptInputType_expanded;
+    expanded = false;
+    toggleIcon;
+    toggleTpl;
+    toggleExpand = new EventEmitter();
+    toggle() {
+        this.toggleExpand.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SideNavToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SideNavToggleComponent, isStandalone: true, selector: "seam-side-nav-toggle", inputs: { expanded: "expanded", toggleIcon: "toggleIcon", toggleTpl: "toggleTpl" }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "class.side-nav-toggle--compact": "!expanded" } }, ngImport: i0, template: "<div class=\"side-nav-toggle--content\">\n  <ng-container *ngIf=\"expanded\">\n    <ng-content></ng-content>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"toggleTpl; else iconBtn\">\n  <button\n    class=\"side-nav-toggle--btn mx-1\"\n    (click)=\"toggle()\">\n    <span class=\"sr-only\">Toggle sidebar</span>\n    <ng-container *ngTemplateOutlet=\"toggleTpl\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #iconBtn>\n  <button seamIconBtn [icon]=\"toggleIcon\"\n    iconType=\"borderless-styled-square\"\n    btnSize=\"sm\"\n    class=\"side-nav-toggle--btn mx-1\"\n    (click)=\"toggle()\">\n    <span class=\"sr-only\">Toggle sidebar</span>\n  </button>\n</ng-template>\n", styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;align-items:center;background:#357ebd;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{color:#fff}seam-side-nav-toggle .side-nav-toggle--btn seam-icon{padding:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+__decorate([
+    InputBoolean()
+], SideNavToggleComponent.prototype, "expanded", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SideNavToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-side-nav-toggle', host: {
+                        '[class.side-nav-toggle--compact]': '!expanded'
+                    }, imports: [
+                        CommonModule,
+                        TheSeamIconModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"side-nav-toggle--content\">\n  <ng-container *ngIf=\"expanded\">\n    <ng-content></ng-content>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"toggleTpl; else iconBtn\">\n  <button\n    class=\"side-nav-toggle--btn mx-1\"\n    (click)=\"toggle()\">\n    <span class=\"sr-only\">Toggle sidebar</span>\n    <ng-container *ngTemplateOutlet=\"toggleTpl\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #iconBtn>\n  <button seamIconBtn [icon]=\"toggleIcon\"\n    iconType=\"borderless-styled-square\"\n    btnSize=\"sm\"\n    class=\"side-nav-toggle--btn mx-1\"\n    (click)=\"toggle()\">\n    <span class=\"sr-only\">Toggle sidebar</span>\n  </button>\n</ng-template>\n", styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;align-items:center;background:#357ebd;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{color:#fff}seam-side-nav-toggle .side-nav-toggle--btn seam-icon{padding:5px}\n"] }]
+        }], propDecorators: { expanded: [{
+                type: Input
+            }], toggleIcon: [{
+                type: Input
+            }], toggleTpl: [{
+                type: Input
+            }], toggleExpand: [{
+                type: Output
+            }] } });
+
+function isNavItemType(item, type) {
+    return item.itemType === type;
+}
+function isNavItemActive(item) {
+    return item.__state?.active ?? false;
+}
+function isExpanded(item) {
+    return item.__state?.expanded ?? 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, 'button') || 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;
+}
+function applyItemConfig(item, config) {
+    if (canBeActive(item)) {
+        if (!hasProperty(item, 'activeNavigatable') && hasProperty(config, 'activeNavigatable')) {
+            item.activeNavigatable = config.activeNavigatable;
+        }
+    }
+    if (hasChildren(item)) {
+        item.children = item.children.map(child => applyItemConfig(child, config));
+    }
+    return item;
+}
+
+class TheSeamSideNavService {
+    _router;
+    _updatingCount = new BehaviorSubject(0);
+    loading$;
+    itemChanged = new Subject();
+    constructor(_router) {
+        this._router = _router;
+        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 {
+                ...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);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSideNavService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSideNavService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSideNavService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$2.Router }] });
+
+const EXPANDED_STATE = 'expanded';
+const COLLAPSED_STATE = 'collapsed';
+const EXPANDED_OVERLAY_STATE = 'expanded-overlay';
+const COLLAPSED_OVERLAY_STATE = 'collapsed-overlay';
+const EXPANDED_STATES = [EXPANDED_STATE, EXPANDED_OVERLAY_STATE];
+const COLLAPSED_STATES = [COLLAPSED_STATE, COLLAPSED_OVERLAY_STATE];
+const EXPAND_STATES = [...EXPANDED_STATES, ...COLLAPSED_STATES];
+function sideNavExpandStateChangeFn(fromState, toState) {
+    // console.log({ fromState, toState })
+    return fromState !== toState &&
+        (
+        // NOTE: The current way the side nav is being used it causes the
+        // component to sometimes get placed in the wrong location initially. It
+        // is fast enough to not be noticed without an initial animation usually,
+        // so it is commented out below until the initial placement issue it
+        // fixed.
+        //
+        // (
+        //   fromState === 'void' && EXPAND_STATES.indexOf(toState) !== -1
+        //   ||
+        //   toState === 'void' && EXPAND_STATES.indexOf(fromState) !== -1
+        // )
+        // ||
+        ((EXPANDED_STATES.indexOf(fromState) !== -1 && COLLAPSED_STATES.indexOf(toState) !== -1) ||
+            (EXPANDED_STATES.indexOf(toState) !== -1 && COLLAPSED_STATES.indexOf(fromState) !== -1)));
+}
+class SideNavComponent {
+    _viewContainerRef;
+    _layout;
+    _sideNav;
+    _config;
+    _baseLayoutRef;
+    static ngAcceptInputType_hasHeaderToggle;
+    _ngUnsubscribe = new Subject();
+    faBars = faBars;
+    // @HostBinding('@sideNavExpand') _sideNavExpand = EXPANDED_STATE
+    // _sideNavExpand = EXPANDED_STATE
+    // @HostBinding('@sideNavAnim') _sideNavExpand = EXPANDED_STATE
+    _sideNavExpand = 'initial';
+    hasHeaderToggle = true;
+    toggleIcon = faBars;
+    toggleTpl;
+    get items() { return this._items.value; }
+    set items(value) { this._items.next(value); }
+    _items = new BehaviorSubject([]);
+    items$;
+    hideEmptyIcon;
+    indentSize = 10;
+    get expanded() { return this._expanded.value; }
+    set expanded(value) {
+        const expanded = coerceBooleanProperty(value);
+        const emit = expanded !== this.expanded;
+        this._expanded.next(expanded);
+        if (emit) {
+            this.toggleExpand.emit(coerceBooleanProperty(value));
+        }
+    }
+    _expanded = new BehaviorSubject(true);
+    expanded$ = this._expanded.asObservable();
+    expandOrigin = 'left';
+    expandHeight = '100%';
+    expandWidth = 'calc(100vw - 50px)';
+    get overlay() { return this._overlay.value; }
+    set overlay(value) { this._overlay.next(coerceBooleanProperty(value)); }
+    _overlay = new BehaviorSubject(false);
+    overlay$ = this._overlay.asObservable();
+    _menuItemTooltipConfig = {
+        placement: 'right',
+        container: 'body',
+        behavior: 'always'
+    };
+    get menuItemTooltipConfig() { return this._menuItemTooltipConfig; }
+    set menuItemTooltipConfig(value) {
+        this._menuItemTooltipConfig = {
+            class: value?.class,
+            placement: value?.placement || this._menuItemTooltipConfig.placement,
+            container: value?.container || this._menuItemTooltipConfig.container,
+            behavior: value?.behavior || this._menuItemTooltipConfig.behavior
+        };
+    }
+    menuItemTooltipDisabled$;
+    toggleExpand = new EventEmitter();
+    isMobile$;
+    sideNavExpandedState$;
+    _backdropHidden = new BehaviorSubject(true);
+    _sideBarHeaderTpl;
+    _sideBarHeaderPortal;
+    _sideBarFooterTpl;
+    _sideBarFooterPortal;
+    constructor(_viewContainerRef, _layout, _sideNav, _config, _baseLayoutRef) {
+        this._viewContainerRef = _viewContainerRef;
+        this._layout = _layout;
+        this._sideNav = _sideNav;
+        this._config = _config;
+        this._baseLayoutRef = _baseLayoutRef;
+        const config = {
+            ...DEFAULT_SIDE_NAV_CONFIG,
+            ...(this._config || {}),
+        };
+        this.items$ = this._items.asObservable().pipe(map(items => (items && config) ? items.map(itm => applyItemConfig(itm, config)) : []), switchMap(items => items ? this._sideNav.createItemsObservable(items) : []), shareReplay({ bufferSize: 1, refCount: true }));
+        this.isMobile$ = this._layout.isMobile$.pipe(tap(isMobile => isMobile ? this.collapse() : this.expand()));
+        this.sideNavExpandedState$ = combineLatest([this.expanded$, this.overlay$]).pipe(map(([expanded, overlay]) => expanded
+            ? overlay ? EXPANDED_OVERLAY_STATE : EXPANDED_STATE
+            : overlay ? COLLAPSED_OVERLAY_STATE : COLLAPSED_STATE), distinctUntilChanged());
+        this.menuItemTooltipDisabled$ = combineLatest([this.expanded$, this.overlay$]).pipe(map(([expanded, overlay]) => {
+            // never display tooltip on mobile, it breaks the layout
+            if (overlay) {
+                return true;
+            }
+            return this.menuItemTooltipConfig?.behavior === 'always' ? false
+                : this.menuItemTooltipConfig?.behavior === 'never' ? true
+                    : this.menuItemTooltipConfig?.behavior === 'collapseOnly' ? expanded : true;
+        }), distinctUntilChanged());
+    }
+    ngOnInit() {
+        if (this._baseLayoutRef) {
+            this._baseLayoutRef.registerNav(this);
+        }
+        this.isMobile$
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe(b => this.overlay = b);
+        this.sideNavExpandedState$
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe(v => this._sideNavExpand = v);
+        if (this._sideBarHeaderTpl) {
+            this._sideBarHeaderPortal = new TemplatePortal(this._sideBarHeaderTpl, this._viewContainerRef);
+        }
+        if (this._sideBarFooterTpl) {
+            this._sideBarFooterPortal = new TemplatePortal(this._sideBarFooterTpl, this._viewContainerRef);
+        }
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+        if (this._baseLayoutRef) {
+            this._baseLayoutRef.unregisterNav(this);
+        }
+    }
+    expand() {
+        this.expanded = true;
+    }
+    collapse() {
+        this.expanded = false;
+    }
+    toggle() {
+        this.expanded = !this.expanded;
+    }
+    animateStart() {
+        if (this.expanded) {
+            this._backdropHidden.next(false);
+        }
+    }
+    animateEnd() {
+        if (!this.expanded) {
+            this._backdropHidden.next(true);
+        }
+    }
+    get expandOriginTransform() {
+        switch (this.expandOrigin) {
+            case 'right':
+                return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateX(100vw) translateX(-100%)'
+                    : this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateX(100vw)' : null;
+            case 'top':
+                return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateY(0)'
+                    : this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateY(-100%)' : null;
+            case 'bottom':
+                return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateY(100vh) translateY(-100%)'
+                    : this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateY(100vh)' : null;
+            case 'left':
+            default:
+                return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateX(0)'
+                    : this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateX(-100%)' : null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SideNavComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$3.TheSeamLayoutService }, { token: TheSeamSideNavService }, { token: THESEAM_SIDE_NAV_CONFIG, optional: true }, { token: THESEAM_BASE_LAYOUT_REF, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SideNavComponent, isStandalone: true, selector: "seam-side-nav", inputs: { hasHeaderToggle: "hasHeaderToggle", toggleIcon: "toggleIcon", toggleTpl: "toggleTpl", items: "items", hideEmptyIcon: "hideEmptyIcon", indentSize: "indentSize", expanded: "expanded", expandOrigin: "expandOrigin", expandHeight: "expandHeight", expandWidth: "expandWidth", overlay: "overlay", menuItemTooltipConfig: "menuItemTooltipConfig" }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "@sideNavAnim": "this._sideNavExpand" } }, providers: [
+            TheSeamSideNavService,
+            {
+                provide: THESEAM_SIDE_NAV_ACCESSOR,
+                useExisting: SideNavComponent
+            },
+        ], queries: [{ propertyName: "_sideBarHeaderTpl", first: true, predicate: BaseLayoutSideBarHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_sideBarFooterTpl", first: true, predicate: BaseLayoutSideBarFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"\n  (click)=\"collapse()\"></div>\n\n<div\n  class=\"side-nav-inner-wrapper\"\n  [@sideNavExpand]=\"{\n    value: _sideNavExpand,\n    params: {\n      origin: expandOriginTransform,\n      height: expandHeight,\n      width: expandWidth\n    }\n  }\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [toggleIcon]=\"toggleIcon\"\n      [toggleTpl]=\"toggleTpl\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarHeaderPortal\"></ng-template>\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <div class=\"side-nav--group side-nav--group--level-0\">\n        <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n          [compact]=\"!(expanded$ | async)\"\n          [isMobile]=\"isMobile$ | async\"\n          [itemType]=\"$any(item)?.itemType\"\n          [icon]=\"$any(item)?.icon\"\n          [label]=\"$any(item)?.label\"\n          [link]=\"$any(item)?.link\"\n          [badgeText]=\"$any(item)?.badge?.text\"\n          [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n          [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n          [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n          [queryParams]=\"$any(item)?.queryParams\"\n          [children]=\"$any(item)?.children\"\n          [active]=\"$any(item).__state?.active\"\n          [expanded]=\"$any(item).__state?.expanded\"\n          [hideEmptyIcon]=\"hideEmptyIcon\"\n          [indentSize]=\"indentSize\"\n          [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n          [menuItemTooltipDisabled]=\"menuItemTooltipDisabled$ | async\">\n          [activeNavigatable]=\"$any(item).activeNavigatable\">\n        </seam-side-nav-item>\n      </div>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:#343a4099;width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TheSeamOverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "ngmodule", type: TheSeamLayoutModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "hideEmptyIcon", "label", "active", "activeNavigatable", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "isMobile", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "menuItemTooltipConfig", "menuItemTooltipDisabled"], exportAs: ["seamSideNavItem"] }, { kind: "component", type: SideNavToggleComponent, selector: "seam-side-nav-toggle", inputs: ["expanded", "toggleIcon", "toggleTpl"], outputs: ["toggleExpand"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], animations: [
+            //
+            // TODO: This animation code turned into a mess. Clean it up and make it
+            // more smooth.
+            //
+            trigger('sideNavAnim', [
+                transition(sideNavExpandStateChangeFn, [
+                    group([
+                        query('@sideNavBackdrop', animateChild(), { optional: true }),
+                        query('@sideNavExpand', animateChild(), { optional: true }),
+                    ]),
+                ]),
+            ]),
+            trigger('sideNavBackdrop', [
+                state(EXPANDED_OVERLAY_STATE, style({ opacity: '1' })),
+                state(COLLAPSED_OVERLAY_STATE, style({ opacity: '0' })),
+                // transition((fromState, toState, element, params) => {
+                //   console.log('sideNavBackdrop v', fromState, toState, element, params)
+                //   return false
+                // }, []),
+                transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
+            ]),
+            trigger('sideNavExpand', [
+                // TODO: Make width configurable for non-overlay state.
+                state(EXPANDED_STATE, style({ width: '260px' })),
+                state(COLLAPSED_STATE, style({ width: '50px', 'overflow-x': 'hidden' })),
+                state(EXPANDED_OVERLAY_STATE, style({
+                    position: 'absolute',
+                    top: 0,
+                    bottom: 0,
+                    left: 0,
+                    height: '{{ height }}',
+                    width: '{{ width }}',
+                    transform: '{{ origin }}',
+                    zIndex: '9999',
+                }), {
+                    params: {
+                        origin: 'translateX(100%)',
+                        height: '100%',
+                        width: 'calc(100vw - 50px)',
+                    }
+                }),
+                state(COLLAPSED_OVERLAY_STATE, style({
+                    position: 'absolute',
+                    top: 0,
+                    bottom: 0,
+                    left: 0,
+                    height: '{{ height }}',
+                    width: '{{ width }}',
+                    transform: '{{ origin }}',
+                    'overflow-x': 'hidden',
+                    zIndex: '9999',
+                }), {
+                    params: {
+                        origin: 'translateX(0)',
+                        height: '100%',
+                        width: 'calc(100vw - 50px)',
+                    }
+                }),
+                // transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
+                transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
+                // transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, [
+                //   // query(':leave', animateChild(), { optional: true }),
+                //   // query(':enter', animateChild(), { optional: true }),
+                //   group([
+                //     query(':leave', animateChild(), { optional: true }),
+                //     query(':enter', animateChild(), { optional: true }),
+                //     query('@compactAnim', animateChild(), { optional: true }),
+                //     animate('5.2s ease-in-out')
+                //   ])
+                // ]),
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+__decorate([
+    InputBoolean()
+], SideNavComponent.prototype, "hasHeaderToggle", void 0);
+__decorate([
+    InputNumber(10)
+], SideNavComponent.prototype, "indentSize", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SideNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-side-nav', providers: [
+                        TheSeamSideNavService,
+                        {
+                            provide: THESEAM_SIDE_NAV_ACCESSOR,
+                            useExisting: SideNavComponent
+                        },
+                    ], animations: [
+                        //
+                        // TODO: This animation code turned into a mess. Clean it up and make it
+                        // more smooth.
+                        //
+                        trigger('sideNavAnim', [
+                            transition(sideNavExpandStateChangeFn, [
+                                group([
+                                    query('@sideNavBackdrop', animateChild(), { optional: true }),
+                                    query('@sideNavExpand', animateChild(), { optional: true }),
+                                ]),
+                            ]),
+                        ]),
+                        trigger('sideNavBackdrop', [
+                            state(EXPANDED_OVERLAY_STATE, style({ opacity: '1' })),
+                            state(COLLAPSED_OVERLAY_STATE, style({ opacity: '0' })),
+                            // transition((fromState, toState, element, params) => {
+                            //   console.log('sideNavBackdrop v', fromState, toState, element, params)
+                            //   return false
+                            // }, []),
+                            transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
+                        ]),
+                        trigger('sideNavExpand', [
+                            // TODO: Make width configurable for non-overlay state.
+                            state(EXPANDED_STATE, style({ width: '260px' })),
+                            state(COLLAPSED_STATE, style({ width: '50px', 'overflow-x': 'hidden' })),
+                            state(EXPANDED_OVERLAY_STATE, style({
+                                position: 'absolute',
+                                top: 0,
+                                bottom: 0,
+                                left: 0,
+                                height: '{{ height }}',
+                                width: '{{ width }}',
+                                transform: '{{ origin }}',
+                                zIndex: '9999',
+                            }), {
+                                params: {
+                                    origin: 'translateX(100%)',
+                                    height: '100%',
+                                    width: 'calc(100vw - 50px)',
+                                }
+                            }),
+                            state(COLLAPSED_OVERLAY_STATE, style({
+                                position: 'absolute',
+                                top: 0,
+                                bottom: 0,
+                                left: 0,
+                                height: '{{ height }}',
+                                width: '{{ width }}',
+                                transform: '{{ origin }}',
+                                'overflow-x': 'hidden',
+                                zIndex: '9999',
+                            }), {
+                                params: {
+                                    origin: 'translateX(0)',
+                                    height: '100%',
+                                    width: 'calc(100vw - 50px)',
+                                }
+                            }),
+                            // transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
+                            transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
+                            // transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, [
+                            //   // query(':leave', animateChild(), { optional: true }),
+                            //   // query(':enter', animateChild(), { optional: true }),
+                            //   group([
+                            //     query(':leave', animateChild(), { optional: true }),
+                            //     query(':enter', animateChild(), { optional: true }),
+                            //     query('@compactAnim', animateChild(), { optional: true }),
+                            //     animate('5.2s ease-in-out')
+                            //   ])
+                            // ]),
+                        ])
+                    ], imports: [
+                        CommonModule,
+                        A11yModule,
+                        TheSeamOverlayScrollbarDirective,
+                        TheSeamLayoutModule,
+                        PortalModule,
+                        SideNavItemComponent,
+                        SideNavToggleComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"\n  (click)=\"collapse()\"></div>\n\n<div\n  class=\"side-nav-inner-wrapper\"\n  [@sideNavExpand]=\"{\n    value: _sideNavExpand,\n    params: {\n      origin: expandOriginTransform,\n      height: expandHeight,\n      width: expandWidth\n    }\n  }\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [toggleIcon]=\"toggleIcon\"\n      [toggleTpl]=\"toggleTpl\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarHeaderPortal\"></ng-template>\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <div class=\"side-nav--group side-nav--group--level-0\">\n        <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n          [compact]=\"!(expanded$ | async)\"\n          [isMobile]=\"isMobile$ | async\"\n          [itemType]=\"$any(item)?.itemType\"\n          [icon]=\"$any(item)?.icon\"\n          [label]=\"$any(item)?.label\"\n          [link]=\"$any(item)?.link\"\n          [badgeText]=\"$any(item)?.badge?.text\"\n          [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n          [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n          [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n          [queryParams]=\"$any(item)?.queryParams\"\n          [children]=\"$any(item)?.children\"\n          [active]=\"$any(item).__state?.active\"\n          [expanded]=\"$any(item).__state?.expanded\"\n          [hideEmptyIcon]=\"hideEmptyIcon\"\n          [indentSize]=\"indentSize\"\n          [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n          [menuItemTooltipDisabled]=\"menuItemTooltipDisabled$ | async\">\n          [activeNavigatable]=\"$any(item).activeNavigatable\">\n        </seam-side-nav-item>\n      </div>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:#343a4099;width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$3.TheSeamLayoutService }, { type: TheSeamSideNavService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [THESEAM_SIDE_NAV_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [THESEAM_BASE_LAYOUT_REF]
+                }] }], propDecorators: { _sideNavExpand: [{
+                type: HostBinding,
+                args: ['@sideNavAnim']
+            }], hasHeaderToggle: [{
+                type: Input
+            }], toggleIcon: [{
+                type: Input
+            }], toggleTpl: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], hideEmptyIcon: [{
+                type: Input
+            }], indentSize: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], expandOrigin: [{
+                type: Input
+            }], expandHeight: [{
+                type: Input
+            }], expandWidth: [{
+                type: Input
+            }], overlay: [{
+                type: Input
+            }], menuItemTooltipConfig: [{
+                type: Input
+            }], toggleExpand: [{
+                type: Output
+            }], _sideBarHeaderTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutSideBarHeaderDirective, { static: true, read: TemplateRef }]
+            }], _sideBarFooterTpl: [{
+                type: ContentChild,
+                args: [BaseLayoutSideBarFooterDirective, { static: true, read: TemplateRef }]
+            }] } });
+
+class TheSeamSideNavModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSideNavModule, imports: [SideNavItemComponent,
+            SideNavComponent,
+            SideNavToggleComponent], exports: [SideNavItemComponent,
+            SideNavComponent,
+            SideNavToggleComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSideNavModule, imports: [SideNavItemComponent,
+            SideNavComponent,
+            SideNavToggleComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSideNavModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SideNavItemComponent,
+                        SideNavComponent,
+                        SideNavToggleComponent,
+                    ],
+                    exports: [
+                        SideNavItemComponent,
+                        SideNavComponent,
+                        SideNavToggleComponent,
+                    ]
+                }]
+        }] });
+
+class TopBarMenuButtonBase {
+}
+const _TopBarMenuButtonMixinBase = mixinDisabled(TopBarMenuButtonBase);
+class TopBarMenuButtonComponent extends _TopBarMenuButtonMixinBase {
+    static ngAcceptInputType_compact;
+    faAngleDown = faAngleDown;
+    /** Custom template to show in desktop mode. No default. */
+    detailTpl;
+    /** Custom template to show in mobile mode. Defaults to icon. */
+    compactDetailTpl;
+    compact = false;
+    /** Icon to display on mobile to activate profile dropdown. Defaults to faUserCircle. */
+    profileIcon;
+    get _hasCompactClass() { return this.compact; }
+    get _hasPadding0Class() { return this.compact; }
+    get _hasRoundedClass() { return this.compact; }
+    get _hasBtnLinkClass() { return !this.compact; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarMenuButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TopBarMenuButtonComponent, isStandalone: true, selector: "button[seamTopBarMenuButton]", inputs: { disabled: "disabled", detailTpl: "detailTpl", compactDetailTpl: "compactDetailTpl", compact: "compact", profileIcon: "profileIcon" }, host: { attributes: { "attr.type": "button" }, properties: { "attr.aria-disabled": "disabled.toString()", "attr.disabled": "disabled || null", "class.top-bar-menu-button--compact": "this._hasCompactClass", "class.p-0": "this._hasPadding0Class", "class.rounded": "this._hasRoundedClass", "class.btn-link": "this._hasBtnLinkClass" }, classAttribute: "btn border text-decoration-none py-0 top-bar-menu-button" }, exportAs: ["seamButton"], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-row\" *ngIf=\"!compact; else compactTpl\">\n  <div class=\"text-left flex-grow-1 text-truncate\">\n    <ng-template [ngTemplateOutlet]=\"$any(detailTpl)\"></ng-template>\n  </div>\n  <!-- Arrow Button -->\n  <div class=\"pl-2 d-flex flex-column\">\n    <div class=\"flex-grow-1\"></div>\n    <seam-icon class=\"d-block\" [icon]=\"faAngleDown\"></seam-icon>\n    <div class=\"flex-grow-1\"></div>\n  </div>\n</div>\n<ng-template #compactTpl>\n  <ng-container *ngIf=\"compactDetailTpl; else iconTpl\">\n    <ng-template [ngTemplateOutlet]=\"$any(compactDetailTpl)\"></ng-template>\n  </ng-container>\n  <ng-template #iconTpl>\n    <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n  </ng-template>\n</ng-template>\n", styles: ["button[seamTopBarMenuButton]{min-width:200px;border-radius:0;border-top:0!important;border-bottom:0!important;border-right:0!important}button[seamTopBarMenuButton].top-bar-menu-button--compact{min-width:40px;border-left:0!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+__decorate([
+    InputBoolean()
+], TopBarMenuButtonComponent.prototype, "compact", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarMenuButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[seamTopBarMenuButton]', encapsulation: ViewEncapsulation.None, exportAs: 'seamButton', inputs: ['disabled'], host: {
+                        'attr.type': 'button',
+                        'class': 'btn border text-decoration-none py-0 top-bar-menu-button',
+                        '[attr.aria-disabled]': 'disabled.toString()',
+                        '[attr.disabled]': 'disabled || null',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgIf,
+                        NgTemplateOutlet,
+                        TheSeamIconModule,
+                    ], template: "<div class=\"d-flex flex-row\" *ngIf=\"!compact; else compactTpl\">\n  <div class=\"text-left flex-grow-1 text-truncate\">\n    <ng-template [ngTemplateOutlet]=\"$any(detailTpl)\"></ng-template>\n  </div>\n  <!-- Arrow Button -->\n  <div class=\"pl-2 d-flex flex-column\">\n    <div class=\"flex-grow-1\"></div>\n    <seam-icon class=\"d-block\" [icon]=\"faAngleDown\"></seam-icon>\n    <div class=\"flex-grow-1\"></div>\n  </div>\n</div>\n<ng-template #compactTpl>\n  <ng-container *ngIf=\"compactDetailTpl; else iconTpl\">\n    <ng-template [ngTemplateOutlet]=\"$any(compactDetailTpl)\"></ng-template>\n  </ng-container>\n  <ng-template #iconTpl>\n    <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n  </ng-template>\n</ng-template>\n", styles: ["button[seamTopBarMenuButton]{min-width:200px;border-radius:0;border-top:0!important;border-bottom:0!important;border-right:0!important}button[seamTopBarMenuButton].top-bar-menu-button--compact{min-width:40px;border-left:0!important}\n"] }]
+        }], propDecorators: { detailTpl: [{
+                type: Input
+            }], compactDetailTpl: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], profileIcon: [{
+                type: Input
+            }], _hasCompactClass: [{
+                type: HostBinding,
+                args: ['class.top-bar-menu-button--compact']
+            }], _hasPadding0Class: [{
+                type: HostBinding,
+                args: ['class.p-0']
+            }], _hasRoundedClass: [{
+                type: HostBinding,
+                args: ['class.rounded']
+            }], _hasBtnLinkClass: [{
+                type: HostBinding,
+                args: ['class.btn-link']
+            }] } });
+
+class TopBarTitleComponent {
+    titleText;
+    subTitleText;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TopBarTitleComponent, isStandalone: true, selector: "seam-top-bar-title", inputs: { titleText: "titleText", subTitleText: "subTitleText" }, ngImport: i0, template: "<h2 class=\"mb-0\" [ngStyle]=\"{ 'font-size.px': 32 }\" [ngStyle.lt-md]=\"{ 'font-size.px': 26 }\" [ngStyle.lt-sm]=\"{ 'font-size.px': 20, 'line-height': 1 }\">\n  {{ titleText }}\n  <br fxHide.gt-sm>\n  <small *ngIf=\"subTitleText\" class=\"text-muted\">{{ subTitleText }}</small>\n</h2>\n", styles: ["seam-top-bar-title{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$4.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i1$4.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-top-bar-title', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgIf,
+                        NgStyle,
+                        FlexLayoutModule,
+                    ], template: "<h2 class=\"mb-0\" [ngStyle]=\"{ 'font-size.px': 32 }\" [ngStyle.lt-md]=\"{ 'font-size.px': 26 }\" [ngStyle.lt-sm]=\"{ 'font-size.px': 20, 'line-height': 1 }\">\n  {{ titleText }}\n  <br fxHide.gt-sm>\n  <small *ngIf=\"subTitleText\" class=\"text-muted\">{{ subTitleText }}</small>\n</h2>\n", styles: ["seam-top-bar-title{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}\n"] }]
+        }], propDecorators: { titleText: [{
+                type: Input
+            }], subTitleText: [{
+                type: Input
+            }] } });
+
+class TopBarCompactMenuBtnDetailDirective {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarCompactMenuBtnDetailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TopBarCompactMenuBtnDetailDirective, isStandalone: true, selector: "[seamTopBarCompactMenuBtnDetail]", exportAs: ["seamTopBarCompactMenuBtnDetail"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarCompactMenuBtnDetailDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamTopBarCompactMenuBtnDetail]',
+                    exportAs: 'seamTopBarCompactMenuBtnDetail',
+                }]
+        }] });
+
+class TopBarNavToggleBtnDetailDirective {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarNavToggleBtnDetailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TopBarNavToggleBtnDetailDirective, isStandalone: true, selector: "[seamTopBarNavToggleBtnDetail]", exportAs: ["seamTopBarNavToggleBtnDetail"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarNavToggleBtnDetailDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamTopBarNavToggleBtnDetail]',
+                    exportAs: 'seamTopBarNavToggleBtnDetail',
+                }]
+        }] });
+
+class TopBarItemDirective {
+    template = inject((TemplateRef));
+    position = 'right';
+    set seamTopBarItem(value) {
+        this.position = value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TopBarItemDirective, isStandalone: true, selector: "[seamTopBarItem]", inputs: { seamTopBarItem: "seamTopBarItem" }, exportAs: ["seamTopBarItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamTopBarItem]',
+                    exportAs: 'seamTopBarItem',
+                }]
+        }], propDecorators: { seamTopBarItem: [{
+                type: Input
+            }] } });
+
+class TopBarMenuBtnDetailDirective {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarMenuBtnDetailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TopBarMenuBtnDetailDirective, isStandalone: true, selector: "[seamTopBarMenuBtnDetail]", exportAs: ["seamTopBarMenuBtnDetail"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarMenuBtnDetailDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamTopBarMenuBtnDetail]',
+                    exportAs: 'seamTopBarMenuBtnDetail',
+                }]
+        }] });
+
+class TopBarMenuDirective {
+    menu = inject(MenuComponent, { self: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TopBarMenuDirective, isStandalone: true, selector: "seam-menu[seamTopBarMenu]", exportAs: ["seamTopBarMenu"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TopBarMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'seam-menu[seamTopBarMenu]',
+                    exportAs: 'seamTopBarMenu',
+                }]
+        }] });
+
+/**
+ * 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 {
+    _layout;
+    static ngAcceptInputType_hasTitle;
+    /** @ignore */
+    _ngUnsubscribe = new Subject();
+    /** @ignore */
+    faBars = faBars;
+    /** @ignore */
+    _topBarMenu;
+    /** @ignore */
+    _topBarItems;
+    /** @ignore */
+    _topBarMenuBtnDetailTpl;
+    /** @ignore */
+    _topBarCompactMenuBtnDetailTpl;
+    /** @ignore */
+    _topBarNavToggleBtnDetailTpl;
+    /** Logo displayed on the top bar. */
+    logo;
+    /** Logo displayed on the top bar when a smaller logo is needed. */
+    logoSm;
+    /** External url to link to when `logo` is clicked. */
+    logoHref;
+    /** Link target used when `logoHref` is specified. Defaults to `"_blank"` */
+    logoHrefTarget = '_blank';
+    /** Route to link to when `logo` is clicked. Defaults to `/`. */
+    logoRoute = '/';
+    /** Determines if the title should be displayed. */
+    hasTitle = false;
+    /** Title text displayed when `hasTitle` is true. */
+    titleText;
+    /** Sub Title text displayed when `hasTitle` is true. The sub title will be less prominent. */
+    subTitleText;
+    /** Determines if the top bar button should be displayed. */
+    hasTopBarMenuButton = true;
+    /** Icon to display on mobile to activate profile dropdown. Defaults to faUserCircle. */
+    profileIcon = faUserCircle;
+    /** Icon to display for mobile nav toggle. Defaults to faBars. */
+    toggleIcon = faBars;
+    /** Display nav toggle on either left or right side of top bar. Defaults to left. */
+    navToggleAlign = 'left';
+    /** @ignore */
+    _leftItems = new BehaviorSubject([]);
+    /** Additional templates to display on left side of top bar */
+    leftItems$ = this._leftItems.asObservable();
+    /** @ignore */
+    _centerItems = new BehaviorSubject([]);
+    /** Additional templates to display in center of top bar */
+    centerItems$ = this._centerItems.asObservable();
+    /** @ignore */
+    _rightItems = new BehaviorSubject([]);
+    /** Additional templates to display on right side of top bar */
+    rightItems$ = this._rightItems.asObservable();
+    /** @ignore */
+    isMobile$;
+    constructor(_layout) {
+        this._layout = _layout;
+        this.isMobile$ = this._layout.isMobile$;
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    /** @ignore */
+    ngAfterContentInit() {
+        if (this._topBarItems) {
+            this._topBarItems.changes.pipe(startWith(undefined), map(() => {
+                const items = this._topBarItems?.toArray() || [];
+                const left = items.filter(i => i.position === 'left');
+                const right = items.filter(i => i.position === 'right');
+                const center = items.filter(i => i.position === 'center');
+                this._leftItems.next(left);
+                this._rightItems.next(right);
+                this._centerItems.next(center);
+            }), shareReplay({ bufferSize: 1, refCount: true }), takeUntil(this._ngUnsubscribe)).subscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTopBarComponent, deps: [{ token: i1$3.TheSeamLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamTopBarComponent, isStandalone: true, selector: "seam-top-bar", inputs: { logo: "logo", logoSm: "logoSm", logoHref: "logoHref", logoHrefTarget: "logoHrefTarget", logoRoute: "logoRoute", hasTitle: "hasTitle", titleText: "titleText", subTitleText: "subTitleText", hasTopBarMenuButton: "hasTopBarMenuButton", profileIcon: "profileIcon", toggleIcon: "toggleIcon", navToggleAlign: "navToggleAlign" }, queries: [{ propertyName: "_topBarMenu", first: true, predicate: TopBarMenuDirective, descendants: true, static: true }, { propertyName: "_topBarMenuBtnDetailTpl", first: true, predicate: TopBarMenuBtnDetailDirective, descendants: true }, { propertyName: "_topBarCompactMenuBtnDetailTpl", first: true, predicate: TopBarCompactMenuBtnDetailDirective, descendants: true }, { propertyName: "_topBarNavToggleBtnDetailTpl", first: true, predicate: TopBarNavToggleBtnDetailDirective, descendants: true }, { propertyName: "_topBarItems", predicate: TopBarItemDirective }], exportAs: ["seamTopBar"], ngImport: i0, template: "<div class=\"top-bar--left d-flex\">\n  <!-- Nav Toggle -->\n  <ng-container *ngIf=\"navToggleAlign === 'left'\">\n    <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n  </ng-container>\n\n  <!-- Logo -->\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </a>\n  </div>\n\n  <ng-template #useLogoRoute>\n    <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n      [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </div>\n  </ng-template>\n\n  <ng-template #logoTpl>\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"logoSm ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </ng-template>\n\n  <!-- Title -->\n  <div class=\"d-flex flex-column\" *ngIf=\"hasTitle\">\n    <seam-top-bar-title\n      [titleText]=\"titleText\"\n      [subTitleText]=\"subTitleText\"\n      [class.ml-2]=\"isMobile$ | async\">\n    </seam-top-bar-title>\n  </div>\n\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--left mr-2\">\n    <ng-container *ngFor=\"let item of leftItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"top-bar--center\">\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--center mr-2\">\n    <ng-container *ngFor=\"let item of centerItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"top-bar--right d-flex\">\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--right mr-2\">\n    <ng-container *ngFor=\"let item of rightItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n\n  <!-- Menu -->\n  <button\n    *ngIf=\"hasTopBarMenuButton\"\n    seamTopBarMenuButton\n    [seamMenuToggle]=\"_topBarMenu?.menu\"\n    [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n    [compactDetailTpl]=\"_topBarCompactMenuBtnDetailTpl?.template\"\n    [compact]=\"isMobile$ | async\"\n    [profileIcon]=\"profileIcon\">\n  </button>\n\n  <ng-container *ngIf=\"navToggleAlign === 'right'\">\n    <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #navToggle>\n  <div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n    <ng-container *ngIf=\"_topBarNavToggleBtnDetailTpl; else iconBtn\">\n      <button seamButton seamBaseLayoutNavToggle>\n        <ng-template [ngTemplateOutlet]=\"_topBarNavToggleBtnDetailTpl?.template || null\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #iconBtn>\n      <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"toggleIcon\" iconType=\"borderless-styled-square\"></button>\n    </ng-template>\n  </div>\n</ng-template>\n\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:#fff;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar--left{flex-grow:1}.top-bar-items{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i3.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }, { kind: "ngmodule", type: TheSeamMenuModule }, { kind: "directive", type: i3$1.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "ngmodule", type: TheSeamBaseLayoutModule }, { kind: "directive", type: TheSeamBaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: ["type", "aria-label"], exportAs: ["seamBaseLayoutNavToggle"] }, { kind: "ngmodule", type: TheSeamLayoutModule }, { kind: "directive", type: i1$4.DefaultImgSrcDirective, selector: "  img[src.xs],    img[src.sm],    img[src.md],    img[src.lg],   img[src.xl],  img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl],  img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]", inputs: ["src.xs", "src.sm", "src.md", "src.lg", "src.xl", "src.lt-sm", "src.lt-md", "src.lt-lg", "src.lt-xl", "src.gt-xs", "src.gt-sm", "src.gt-md", "src.gt-lg"] }, { kind: "component", type: TopBarTitleComponent, selector: "seam-top-bar-title", inputs: ["titleText", "subTitleText"] }, { kind: "component", type: TopBarMenuButtonComponent, selector: "button[seamTopBarMenuButton]", inputs: ["disabled", "detailTpl", "compactDetailTpl", "compact", "profileIcon"], exportAs: ["seamButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+__decorate([
+    InputBoolean()
+], TheSeamTopBarComponent.prototype, "hasTitle", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTopBarComponent.prototype, "hasTopBarMenuButton", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTopBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-top-bar', encapsulation: ViewEncapsulation.None, exportAs: 'seamTopBar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgIf,
+                        NgFor,
+                        NgTemplateOutlet,
+                        AsyncPipe,
+                        RouterModule,
+                        TheSeamButtonsModule,
+                        TheSeamIconModule,
+                        TheSeamMenuModule,
+                        TheSeamBaseLayoutModule,
+                        TheSeamLayoutModule,
+                        TopBarTitleComponent,
+                        TopBarMenuButtonComponent,
+                        // TheSeamBaseLayoutNavToggleDirective,
+                    ], template: "<div class=\"top-bar--left d-flex\">\n  <!-- Nav Toggle -->\n  <ng-container *ngIf=\"navToggleAlign === 'left'\">\n    <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n  </ng-container>\n\n  <!-- Logo -->\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </a>\n  </div>\n\n  <ng-template #useLogoRoute>\n    <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n      [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </div>\n  </ng-template>\n\n  <ng-template #logoTpl>\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"logoSm ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </ng-template>\n\n  <!-- Title -->\n  <div class=\"d-flex flex-column\" *ngIf=\"hasTitle\">\n    <seam-top-bar-title\n      [titleText]=\"titleText\"\n      [subTitleText]=\"subTitleText\"\n      [class.ml-2]=\"isMobile$ | async\">\n    </seam-top-bar-title>\n  </div>\n\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--left mr-2\">\n    <ng-container *ngFor=\"let item of leftItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"top-bar--center\">\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--center mr-2\">\n    <ng-container *ngFor=\"let item of centerItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"top-bar--right d-flex\">\n  <!-- Items -->\n  <div class=\"top-bar-items top-bar-items--right mr-2\">\n    <ng-container *ngFor=\"let item of rightItems$ | async\">\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-container>\n  </div>\n\n  <!-- Menu -->\n  <button\n    *ngIf=\"hasTopBarMenuButton\"\n    seamTopBarMenuButton\n    [seamMenuToggle]=\"_topBarMenu?.menu\"\n    [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n    [compactDetailTpl]=\"_topBarCompactMenuBtnDetailTpl?.template\"\n    [compact]=\"isMobile$ | async\"\n    [profileIcon]=\"profileIcon\">\n  </button>\n\n  <ng-container *ngIf=\"navToggleAlign === 'right'\">\n    <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #navToggle>\n  <div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n    <ng-container *ngIf=\"_topBarNavToggleBtnDetailTpl; else iconBtn\">\n      <button seamButton seamBaseLayoutNavToggle>\n        <ng-template [ngTemplateOutlet]=\"_topBarNavToggleBtnDetailTpl?.template || null\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #iconBtn>\n      <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"toggleIcon\" iconType=\"borderless-styled-square\"></button>\n    </ng-template>\n  </div>\n</ng-template>\n\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:#fff;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar--left{flex-grow:1}.top-bar-items{display:flex;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.TheSeamLayoutService }], propDecorators: { _topBarMenu: [{
+                type: ContentChild,
+                args: [TopBarMenuDirective, { static: true }]
+            }], _topBarItems: [{
+                type: ContentChildren,
+                args: [TopBarItemDirective]
+            }], _topBarMenuBtnDetailTpl: [{
+                type: ContentChild,
+                args: [TopBarMenuBtnDetailDirective]
+            }], _topBarCompactMenuBtnDetailTpl: [{
+                type: ContentChild,
+                args: [TopBarCompactMenuBtnDetailDirective]
+            }], _topBarNavToggleBtnDetailTpl: [{
+                type: ContentChild,
+                args: [TopBarNavToggleBtnDetailDirective]
+            }], logo: [{
+                type: Input
+            }], logoSm: [{
+                type: Input
+            }], logoHref: [{
+                type: Input
+            }], logoHrefTarget: [{
+                type: Input
+            }], logoRoute: [{
+                type: Input
+            }], hasTitle: [{
+                type: Input
+            }], titleText: [{
+                type: Input
+            }], subTitleText: [{
+                type: Input
+            }], hasTopBarMenuButton: [{
+                type: Input
+            }], profileIcon: [{
+                type: Input
+            }], toggleIcon: [{
+                type: Input
+            }], navToggleAlign: [{
+                type: Input
+            }] } });
+
+class TheSeamTopBarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTopBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTopBarModule, imports: [TheSeamTopBarComponent,
+            TopBarTitleComponent,
+            TopBarMenuButtonComponent,
+            TopBarMenuDirective,
+            TopBarItemDirective,
+            TopBarMenuBtnDetailDirective,
+            TopBarCompactMenuBtnDetailDirective,
+            TopBarNavToggleBtnDetailDirective], exports: [TheSeamTopBarComponent,
+            TopBarMenuButtonComponent,
+            TopBarMenuDirective,
+            TopBarItemDirective,
+            TopBarMenuBtnDetailDirective,
+            TopBarCompactMenuBtnDetailDirective,
+            TopBarNavToggleBtnDetailDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTopBarModule, imports: [TheSeamTopBarComponent,
+            TopBarTitleComponent,
+            TopBarMenuButtonComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTopBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TheSeamTopBarComponent,
+                        TopBarTitleComponent,
+                        TopBarMenuButtonComponent,
+                        TopBarMenuDirective,
+                        TopBarItemDirective,
+                        TopBarMenuBtnDetailDirective,
+                        TopBarCompactMenuBtnDetailDirective,
+                        TopBarNavToggleBtnDetailDirective,
+                    ],
+                    exports: [
+                        TheSeamTopBarComponent,
+                        TopBarMenuButtonComponent,
+                        TopBarMenuDirective,
+                        TopBarItemDirective,
+                        TopBarMenuBtnDetailDirective,
+                        TopBarCompactMenuBtnDetailDirective,
+                        TopBarNavToggleBtnDetailDirective,
+                    ],
+                }]
+        }] });
+
+const fader = trigger('routeAnimations', [
+    transition('* <=> *', [
+        // Set a default  style for enter and leave
+        query(':enter, :leave', [
+            style({
+                position: 'absolute',
+                left: 0,
+                width: '100%',
+                opacity: 0,
+                transform: 'scale(0) translateY(100%)',
+            }),
+        ], { optional: true }),
+        // Animate the new page in
+        query(':enter', [
+            animate('600ms ease', style({ opacity: 1, transform: 'scale(1) translateY(0)' })),
+        ], { optional: true })
+    ]),
+]);
+// function slideTo(direction) {
+//   return [
+//     query(':enter, :leave', [
+//       style({
+//         position: 'absolute',
+//         top: 0,
+//         [direction]: 0,
+//         width: '100%'
+//       })
+//     ], { optional: true }),
+//     query(':enter', [
+//       style({ [direction]: '-100%'})
+//     ], { optional: true }),
+//     group([
+//       query(':leave', [
+//         animate('1000ms ease', style({ [direction]: '100%'}))
+//       ], { optional: true }),
+//       query(':enter', [
+//         animate('1000ms ease', style({ [direction]: '0%'}))
+//       ], { optional: true })
+//     ]),
+//     // Normalize the page style... Might not be necessary
+//     // Required only if you have child animations on the page
+//     query(':leave', animateChild(), { optional: true }),
+//     query(':enter', animateChild(), { optional: true }),
+//   ]
+// }
+// TODO: Refactor the slider animation, because AOT or ng-packagr, I haven't
+// looked into what exactly is preventing it, doesn't allow the function call.
+// export const slider =
+//   trigger('routeAnimations', [
+//     transition('* => isLeft', slideTo('left') ),
+//     transition('* => isRight', slideTo('right') ),
+//     transition('isRight => *', slideTo('left') ),
+//     transition('isLeft => *', slideTo('right') )
+//   ])
+// export const contentLeave =
+//   trigger('contentLeave', [
+//     transition(':leave', [
+//     ])
+//   ])
+const slider = trigger('routeAnimations', [
+    transition('* => isLeft', [
+        query('.router-container :enter, .router-container :leave', [
+            style({
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%'
+            })
+        ], { optional: true }),
+        query('.router-container :enter', [
+            style({ left: '-100%' })
+        ], { optional: true }),
+        query('.hierarchy-router-outlet--content', [
+            style({ left: '0%', position: 'absolute' })
+        ], { optional: true }),
+        group([
+            query('.router-container :leave', [
+                animate('1000ms ease', style({ left: '100%' }))
+            ], { optional: true }),
+            query('.router-container :enter', [
+                animate('1000ms ease', style({ left: '0%' }))
+            ], { optional: true }),
+            query('.hierarchy-router-outlet--content', [
+                animate('1000ms ease', style({ left: '-100%' }))
+            ], { optional: true }),
+        ]),
+        // Normalize the page style... Might not be necessary
+        // Required only if you have child animations on the page
+        query('.router-container :leave', animateChild(), { optional: true }),
+        query('.router-container :enter', animateChild(), { optional: true }),
+    ]),
+    transition('* => isRight', [
+        query('.router-container :enter, .router-container :leave', [
+            style({
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                width: '100%'
+            })
+        ], { optional: true }),
+        query('.router-container :enter', [
+            style({ right: '-100%' })
+        ], { optional: true }),
+        query('.hierarchy-router-outlet--content', [
+            style({ left: '0%', position: 'absolute' })
+        ], { optional: true }),
+        group([
+            query('.router-container :leave', [
+                animate('1000ms ease', style({ right: '100%' }))
+            ], { optional: true }),
+            query('.router-container :enter', [
+                animate('1000ms ease', style({ right: '0%' }))
+            ], { optional: true }),
+            query('.hierarchy-router-outlet--content', [
+                animate('1000ms ease', style({ left: '-100%' }))
+            ], { optional: true }),
+        ]),
+        // Normalize the page style... Might not be necessary
+        // Required only if you have child animations on the page
+        query('.router-container :leave', animateChild(), { optional: true }),
+        query('.router-container :enter', animateChild(), { optional: true }),
+    ]),
+    transition('isRight => *', [
+        query('.router-container :enter, .router-container :leave', [
+            style({
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%'
+            })
+        ], { optional: true }),
+        query('.router-container :enter', [
+            style({ left: '-100%' })
+        ], { optional: true }),
+        query('.hierarchy-router-outlet--content', [
+            style({ left: '0%', position: 'absolute' })
+        ], { optional: true }),
+        group([
+            query('.router-container :leave', [
+                animate('1000ms ease', style({ left: '100%' }))
+            ], { optional: true }),
+            query('.router-container :enter', [
+                animate('1000ms ease', style({ left: '0%' }))
+            ], { optional: true }),
+            query('.hierarchy-router-outlet--content', [
+                animate('1000ms ease', style({ left: '-100%' }))
+            ], { optional: true }),
+        ]),
+        // Normalize the page style... Might not be necessary
+        // Required only if you have child animations on the page
+        query('.router-container :leave', animateChild(), { optional: true }),
+        query('.router-container :enter', animateChild(), { optional: true }),
+    ]),
+    transition('isLeft => *', [
+        query('.router-container :enter, .router-container :leave', [
+            style({
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                width: '100%'
+            })
+        ], { optional: true }),
+        query('.router-container :enter', [
+            style({ right: '-100%' })
+        ], { optional: true }),
+        group([
+            query('.router-container :leave', [
+                animate('1000ms ease', style({ right: '100%' }))
+            ], { optional: true }),
+            query('.router-container :enter', [
+                animate('1000ms ease', style({ right: '0%' }))
+            ], { optional: true })
+        ]),
+        // Normalize the page style... Might not be necessary
+        // Required only if you have child animations on the page
+        query('.router-container :leave', animateChild(), { optional: true }),
+        query('.router-container :enter', animateChild(), { optional: true }),
+    ])
+]);
+const transformer = trigger('routeAnimations', [
+    transition('* => isLeft', transformTo({ x: -100, y: -100, rotate: -720 })),
+    transition('* => isRight', transformTo({ x: 100, y: -100, rotate: 90 })),
+    transition('isRight => *', transformTo({ x: -100, y: -100, rotate: 360 })),
+    transition('isLeft => *', transformTo({ x: 100, y: -100, rotate: -360 }))
+]);
+function transformTo({ x = 100, y = 0, rotate = 0 }) {
+    const optional = { optional: true };
+    return [
+        query(':enter, :leave', [
+            style({
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%'
+            })
+        ], optional),
+        query(':enter', [
+            style({ transform: `translate(${x}%, ${y}%) rotate(${rotate}deg)` })
+        ], { optional: true }),
+        group([
+            query(':leave', [
+                animate('600ms ease-out', style({ transform: `translate(${x}%, ${y}%) rotate(${rotate}deg)` }))
+            ], optional),
+            query(':enter', [
+                animate('600ms ease-out', style({ transform: `translate(0, 0) rotate(0)` }))
+            ], { optional: true })
+        ]),
+    ];
+}
+const stepper = trigger('routeAnimations', [
+    transition('* <=> *', [
+        query(':enter, :leave', [
+            style({
+                position: 'absolute',
+                left: 0,
+                width: '100%',
+            }),
+        ], { optional: true }),
+        group([
+            query(':enter', [
+                animate('2000ms ease', keyframes([
+                    style({ transform: 'scale(0) translateX(100%)', offset: 0 }),
+                    style({ transform: 'scale(0.5) translateX(25%)', offset: 0.3 }),
+                    style({ transform: 'scale(1) translateX(0%)', offset: 1 }),
+                ])),
+            ], { optional: true }),
+            query(':leave', [
+                animate('2000ms ease', keyframes([
+                    style({ transform: 'scale(1)', offset: 0 }),
+                    style({ transform: 'scale(0.5) translateX(-25%) rotate(0)', offset: 0.35 }),
+                    style({ opacity: 0, transform: 'translateX(-50%) rotate(-180deg) scale(6)', offset: 1 }),
+                ])),
+            ], { optional: true })
+        ]),
+    ])
+]);
+const sideToSide = trigger('routeAnimations', [
+    transition('* => *', [
+        style({
+            position: 'fixed',
+            width: '100%',
+            transform: 'translateX(-100%)'
+        }),
+        animate('1000ms ease', style({ transform: 'translateX(0%)' }))
+    ]),
+    transition(':leave', [
+        style({
+            position: 'fixed',
+            width: '100%',
+            transform: 'translateX(0%)'
+        }),
+        animate('1000ms ease', style({ transform: 'translateX(-100%)' }))
+    ])
+]);
+
+function routeChanges(router) {
+    return router.events.pipe(filter(event => event instanceof NavigationStart || event instanceof NavigationEnd), distinctUntilChanged((x, y) => x.id === y.id), map(event => ({ url: event.url })));
+}
+//
+// TODO: Animation improvement: Try adding a full component animation that
+// queries the <ng-content> and <router-outlet> blocks. When the outlet
+// activates, set the animation state to a transition that moves both blocks
+// together.
+//
+let _uid = 0;
+class HierarchyRouterOutletComponent {
+    _route;
+    _router;
+    _uid = _uid++;
+    _ngUnsubscribe = new Subject();
+    animState = 'isRight';
+    // animState = ''
+    outletActive = false;
+    ngContentVisible = true;
+    constructor(_route, _router) {
+        this._route = _route;
+        this._router = _router;
+        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))
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    _hasChildren() {
+        const count = this._route.pathFromRoot.length - 1;
+        let countFull = 0;
+        if (this._router.parseUrl(this._router.url).root.children.primary) {
+            countFull = this._router.parseUrl(this._router.url).root.children.primary.segments.length;
+        }
+        // console.log(`_hasChildren[${this._uid}]`, { count, countFull })
+        return countFull > count;
+    }
+    prepareRoute(outlet) {
+        // console.log(`outlet[${this._uid}]`, outlet, this.animState, this._hasChildren(), this.outletActive)
+        if (outlet.isActivated) {
+            // console.log(outlet.isActivated)
+            // console.log(outlet.component)
+            // console.log(this.animState)
+            return this.animState;
+        }
+        else {
+            return undefined;
+        }
+        // console.log(`prepareRoute[${this._uid}]`, this.animState, this._hasChildren())
+        // console.log('activatedRouteData', outlet && outlet.activatedRouteData)
+        // if (outlet && outlet.isActivated) {
+        //   console.log('activatedRoute', outlet.activatedRoute && outlet.activatedRoute.snapshot.url)
+        // }
+        // return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']
+        // console.log('')
+        // return this.animState
+    }
+    outletActivate(event) {
+        // console.log(`outletActivate[${this._uid}]`, event)
+        this.outletActive = true;
+    }
+    outletDeactivate(event) {
+        // console.log(`outletDeactivate[${this._uid}]`, event)
+        this.outletActive = false;
+    }
+    routeAnimationsStart(event) {
+        // console.log('routeAnimationsStart', event)
+        this.ngContentVisible = true;
+    }
+    routeAnimationsDone(event) {
+        // console.log('routeAnimationsDone', event)
+        this.ngContentVisible = !this.outletActive;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HierarchyRouterOutletComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: HierarchyRouterOutletComponent, isStandalone: false, selector: "seam-hierarchy-router-outlet", ngImport: i0, template: "<div class=\"h-100\"\n  [@routeAnimations]=\"prepareRoute(outlet)\"\n  (@routeAnimations.start)=\"routeAnimationsStart($event)\"\n  (@routeAnimations.done)=\"routeAnimationsDone($event)\">\n  <div class=\"hierarchy-router-outlet--content h-100\" *ngIf=\"ngContentVisible\">\n    <!-- {{ animState }} -->\n    <div class=\"border border-info h-100\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div class=\"router-container\"\n    [class.h-100]=\"!ngContentVisible\"\n    >\n  <!-- <div [@routeAnimations]=\"animState\"> -->\n  <!-- <div class=\"hierarchy-router-outlet--route-content\"> -->\n    <router-outlet #outlet=\"outlet\"\n      (activate)=\"outletActivate($event)\"\n      (deactivate)=\"outletDeactivate($event)\">\n    </router-outlet>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}:host ::ng-deep router-outlet+*{background-color:#fff;height:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], animations: [
+            // fader,
+            slider,
+            // transformer,
+            // stepper,
+            // sideToSide
+            // contentLeave
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HierarchyRouterOutletComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-hierarchy-router-outlet', animations: [
+                        // fader,
+                        slider,
+                        // transformer,
+                        // stepper,
+                        // sideToSide
+                        // contentLeave
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"h-100\"\n  [@routeAnimations]=\"prepareRoute(outlet)\"\n  (@routeAnimations.start)=\"routeAnimationsStart($event)\"\n  (@routeAnimations.done)=\"routeAnimationsDone($event)\">\n  <div class=\"hierarchy-router-outlet--content h-100\" *ngIf=\"ngContentVisible\">\n    <!-- {{ animState }} -->\n    <div class=\"border border-info h-100\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div class=\"router-container\"\n    [class.h-100]=\"!ngContentVisible\"\n    >\n  <!-- <div [@routeAnimations]=\"animState\"> -->\n  <!-- <div class=\"hierarchy-router-outlet--route-content\"> -->\n    <router-outlet #outlet=\"outlet\"\n      (activate)=\"outletActivate($event)\"\n      (deactivate)=\"outletDeactivate($event)\">\n    </router-outlet>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}:host ::ng-deep router-outlet+*{background-color:#fff;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }] });
+
+class HierarchyLevelResolver {
+    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;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HierarchyLevelResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HierarchyLevelResolver, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HierarchyLevelResolver, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class TheSeamDynamicRouterModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDynamicRouterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDynamicRouterModule, declarations: [HierarchyRouterOutletComponent], imports: [CommonModule,
+            RouterModule], exports: [HierarchyRouterOutletComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDynamicRouterModule, imports: [CommonModule,
+            RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDynamicRouterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        HierarchyRouterOutletComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        RouterModule
+                    ],
+                    exports: [
+                        HierarchyRouterOutletComponent
+                    ]
+                }]
+        }] });
+
+class TheSeamSchemaFormCheckboxComponent {
+    _jsf;
+    formControl;
+    controlName;
+    controlValue;
+    controlDisabled = false;
+    boundControl = false;
+    options;
+    layoutNode;
+    layoutIndex;
+    dataIndex;
+    trueValue = true;
+    falseValue = false;
+    constructor(_jsf) {
+        this._jsf = _jsf;
+    }
+    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;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormCheckboxComponent, deps: [{ token: i1$5.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamSchemaFormCheckboxComponent, isStandalone: true, selector: "seam-schema-form-checkbox", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div class=\"mb-3\">\n  <seam-form-field *ngIf=\"boundControl\">\n    <seam-checkbox seamInput\n      [formControl]=\"$any(formControl)\"\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n\n  <seam-form-field *ngIf=\"!boundControl\">\n    <seam-checkbox seamInput\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\"\n      [value]=\"controlValue\"\n      (change)=\"updateValue($event)\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "component", type: i4$1.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "component", type: TheSeamCheckboxComponent, selector: "seam-checkbox", inputs: ["tabIndex", "id", "aria-label", "aria-labelledby", "required", "checked", "disabled", "indeterminate", "name", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["seamCheckbox"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-checkbox', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        JsonSchemaFormModule,
+                        TheSeamFormFieldModule,
+                        TheSeamCheckboxComponent,
+                    ], template: "<div class=\"mb-3\">\n  <seam-form-field *ngIf=\"boundControl\">\n    <seam-checkbox seamInput\n      [formControl]=\"$any(formControl)\"\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n\n  <seam-form-field *ngIf=\"!boundControl\">\n    <seam-checkbox seamInput\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\"\n      [value]=\"controlValue\"\n      (change)=\"updateValue($event)\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$5.JsonSchemaFormService }], propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class TheSeamSchemaFormInputComponent {
+    _jsf;
+    formControl;
+    controlName;
+    controlValue;
+    controlDisabled = false;
+    boundControl = false;
+    options;
+    layoutNode;
+    layoutIndex;
+    dataIndex;
+    autoCompleteList = [];
+    constructor(_jsf) {
+        this._jsf = _jsf;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode?.options || {};
+        this._jsf.initializeControl(this);
+    }
+    updateValue(event) {
+        this._jsf.updateValue(this, event.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormInputComponent, deps: [{ token: i1$5.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamSchemaFormInputComponent, isStandalone: true, selector: "seam-schema-form-input", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div [class]=\"options?.htmlClass || ''\">\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\" [required]=\"options?.required\"></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\" [required]=\"options?.required\"></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</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$1.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        JsonSchemaFormModule,
+                        TheSeamFormFieldModule,
+                    ], template: "<div [class]=\"options?.htmlClass || ''\">\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\" [required]=\"options?.required\"></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\" [required]=\"options?.required\"></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</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i1$5.JsonSchemaFormService }], propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class TheSeamSchemaFormNumberComponent {
+    jsf;
+    formControl;
+    controlName;
+    controlValue;
+    controlDisabled = false;
+    boundControl = false;
+    options;
+    layoutNode;
+    layoutIndex;
+    dataIndex;
+    allowNegative = true;
+    allowDecimal = true;
+    allowExponents = false;
+    lastValidNumber = '';
+    constructor(jsf) {
+        this.jsf = jsf;
+    }
+    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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormNumberComponent, deps: [{ token: i1$5.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamSchemaFormNumberComponent, isStandalone: true, selector: "seam-schema-form-number", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></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\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n    [attr.max]=\"options?.maximum\"\n    [attr.min]=\"options?.minimum\"\n    [attr.step]=\"options?.multipleOf || options?.step || 'any'\"\n    [value]=\"controlValue\"\n    (input)=\"updateValue($event)\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type === 'range' ? 'range' : 'number'\"\n    [disabled]=\"controlDisabled\">\n  <span *ngIf=\"layoutNode?.type === 'range'\" [innerHTML]=\"controlValue\"></span>\n</seam-form-field>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$1.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormNumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-number', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        JsonSchemaFormModule,
+                        TheSeamFormFieldModule,
+                    ], 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\" [required]=\"options?.required\"></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\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n    [attr.max]=\"options?.maximum\"\n    [attr.min]=\"options?.minimum\"\n    [attr.step]=\"options?.multipleOf || options?.step || 'any'\"\n    [value]=\"controlValue\"\n    (input)=\"updateValue($event)\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type === 'range' ? 'range' : 'number'\"\n    [disabled]=\"controlDisabled\">\n  <span *ngIf=\"layoutNode?.type === 'range'\" [innerHTML]=\"controlValue\"></span>\n</seam-form-field>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i1$5.JsonSchemaFormService }], propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class TheSeamSchemaFormSelectComponent {
+    _jsf;
+    formControl;
+    controlName;
+    controlValue;
+    controlDisabled = false;
+    boundControl = false;
+    options;
+    layoutNode;
+    layoutIndex;
+    dataIndex;
+    selectList = [];
+    isArray = isArray;
+    constructor(_jsf) {
+        this._jsf = _jsf;
+    }
+    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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormSelectComponent, deps: [{ token: i1$5.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamSchemaFormSelectComponent, isStandalone: true, selector: "seam-schema-form-select", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div [class]=\"options?.htmlClass || ''\">\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      [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</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$1.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-select', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        JsonSchemaFormModule,
+                        TheSeamFormFieldModule,
+                        NgSelectModule,
+                    ], template: "<div [class]=\"options?.htmlClass || ''\">\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      [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</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i1$5.JsonSchemaFormService }], propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+// NOTE: This component is a little hacky, because I am basically creating a
+// data widget that acts like a data and 'submit' widget at the same time.
+//
+// TODO: Try and think of a nicer way to implement this, but still make sense
+// from a schema definition. The library may need to me forked to actually
+// support this in the way I expect, but maybe there is another way.
+class TheSeamSchemaFormSubmitSplitComponent {
+    _jsf;
+    /** @ignore */
+    _ngUnsubscribe = new Subject();
+    formControl;
+    controlName;
+    controlValue;
+    controlDisabled = false;
+    boundControl = false;
+    options;
+    layoutNode;
+    layoutIndex;
+    dataIndex;
+    _buttonLabel = '';
+    _dropdownObj;
+    _dropdownDisabled = false;
+    _selectList = [];
+    _selectedItem;
+    constructor(_jsf) {
+        this._jsf = _jsf;
+    }
+    /** @ignore */
+    ngOnInit() {
+        this.options = this.layoutNode?.options || {};
+        this._jsf.initializeControl(this);
+        // NOTE: This is commented out, because there is a bug with submit widgets
+        // manually defined in layout. All nodes initialized from the provided
+        // layout have their options populated from the defaults and 'disabled' is
+        // on of the default properties, so the 'disableInvalidSubmit' condition
+        // never gets reached.
+        //
+        // My initial idea for fixing would be to check if the disabled property
+        // exists and is a boolean, or possibly anything defined that can coerce
+        // into a boolean. I can't think of a reason disabled should be anything
+        // else, so that may be an acceptable fix, but I don't want to enable that
+        // yet.
+        //
+        // if (hasOwn(this.options, 'disabled')) {
+        //   console.log('[TheSeamSchemaFormSubmitSplitComponent] hasDisabled', this.options.disabled)
+        //   this.controlDisabled = this.options.disabled
+        // } else
+        if (this._jsf.formOptions.disableInvalidSubmit) {
+            this.controlDisabled = !this._jsf.isValid;
+            this._jsf.isValidChanges.subscribe(isValid => this.controlDisabled = !isValid);
+        }
+        if (this.controlValue === null || this.controlValue === undefined) {
+            this.controlValue = this.options.title;
+        }
+        if (hasOwn(this.options, 'title')) {
+            this._buttonLabel = this.options.title;
+        }
+        this._initDropdown();
+        // console.log('this', this)
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    updateValue(event) {
+        if (typeof this.options?.onClick === 'function') {
+            this.options.onClick(event);
+        }
+        else {
+            this._jsf.updateValue(this, event.target.value);
+        }
+    }
+    _initDropdown() {
+        if (!hasOwn(this.layoutNode, 'items') || !(this.layoutNode?.items || []).length) {
+            return;
+        }
+        if (isDevMode()) {
+            if (this.layoutNode?.items && this.layoutNode?.items.length > 1) {
+                // eslint-disable-next-line no-console
+                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: this.layoutNode?.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?.setValue(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, deps: [{ token: i1$5.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamSchemaFormSubmitSplitComponent, isStandalone: true, selector: "seam-schema-form-submit-split", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button seamButton theme=\"primary\" type=\"submit\"\n      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n      [attr.required]=\"options?.required\"\n      [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n      [disabled]=\"controlDisabled\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [value]=\"controlValue\"\n      (click)=\"updateValue($event)\">\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\">\n        [{{ _selectedItem.name }}]\n      </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\" seamButton theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\">\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\">\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "ngmodule", type: TheSeamMenuModule }, { kind: "component", type: i3$1.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i3$1.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i3$1.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i3.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-submit-split', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        JsonSchemaFormModule,
+                        TheSeamFormFieldModule,
+                        TheSeamMenuModule,
+                        TheSeamButtonsModule,
+                    ], template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button seamButton theme=\"primary\" type=\"submit\"\n      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n      [attr.required]=\"options?.required\"\n      [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n      [disabled]=\"controlDisabled\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [value]=\"controlValue\"\n      (click)=\"updateValue($event)\">\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\">\n        [{{ _selectedItem.name }}]\n      </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\" seamButton theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\">\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\">\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i1$5.JsonSchemaFormService }], propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class TheSeamSchemaFormDividerComponent {
+    options;
+    layoutNode;
+    layoutIndex;
+    dataIndex;
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamSchemaFormDividerComponent, isStandalone: true, selector: "seam-schema-form-divider", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `<hr [class]="options?.htmlClass" />`, isInline: true, styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-divider', template: `<hr [class]="options?.htmlClass" />`, standalone: true, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class TheSeamSchemaFormTelComponent {
+    _jsf;
+    formControl;
+    controlName;
+    controlValue;
+    controlDisabled = false;
+    boundControl = false;
+    options;
+    layoutNode;
+    layoutIndex;
+    dataIndex;
+    autoCompleteList = [];
+    constructor(_jsf) {
+        this._jsf = _jsf;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode?.options || {};
+        this._jsf.initializeControl(this);
+        console.log(this.controlValue);
+        console.log(this.formControl?.value);
+    }
+    updateValue(event) {
+        this._jsf.updateValue(this, event.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormTelComponent, deps: [{ token: i1$5.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamSchemaFormTelComponent, isStandalone: true, selector: "seam-schema-form-tel", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <seam-tel-input\n    seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\">\n  </seam-tel-input>\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\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <seam-tel-input\n    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    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [disabled]=\"controlDisabled\">\n  </seam-tel-input>\n</seam-form-field>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$1.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "ngmodule", type: TheSeamTelInputModule }, { kind: "component", type: i5$2.TheSeamTelInputComponent, selector: "seam-tel-input", inputs: ["required", "disabled", "tabIndex", "name", "value"], outputs: ["change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormTelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-tel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        JsonSchemaFormModule,
+                        TheSeamFormFieldModule,
+                        TheSeamTelInputModule,
+                    ], 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\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <seam-tel-input\n    seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\">\n  </seam-tel-input>\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\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <seam-tel-input\n    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    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [disabled]=\"controlDisabled\">\n  </seam-tel-input>\n</seam-form-field>\n" }]
+        }], ctorParameters: () => [{ type: i1$5.JsonSchemaFormService }], propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class TheSeamSchemaFormTiledSelectComponent {
+    _jsf = inject(JsonSchemaFormService);
+    _platform = inject(Platform);
+    formControl;
+    controlName;
+    controlValue;
+    controlDisabled = false;
+    boundControl = false;
+    options;
+    layoutNode;
+    layoutIndex;
+    dataIndex;
+    tiles = [];
+    layout = 'grid';
+    multiple = false;
+    selectionToggleable = true;
+    tileBackdrop = false;
+    showSelectedIcon = true;
+    animationsDisabled = this._platform.IOS;
+    ngOnInit() {
+        this.options = this.layoutNode?.options || {};
+        this._jsf.initializeControl(this);
+        console.log(this.options);
+        console.log(this.layoutNode);
+        this.tiles = this.options.tiles || [];
+    }
+    updateValue(event) {
+        this._jsf.updateValue(this, event.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormTiledSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamSchemaFormTiledSelectComponent, isStandalone: true, selector: "seam-schema-form-tiled-select", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <seam-tiled-select\n    seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [attr.name]=\"controlName\"\n    [required]=\"options?.required\"\n    [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n    [tiles]=\"tiles\"\n    [layout]=\"layout\"\n    [multiple]=\"multiple\"\n    [selectionToggleable]=\"selectionToggleable\"\n    [tileBackdrop]=\"tileBackdrop\"\n    [showSelectedIcon]=\"showSelectedIcon\"\n    [animationsDisabled]=\"animationsDisabled\">\n  </seam-tiled-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\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <seam-tiled-select\n    seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [attr.name]=\"controlName\"\n    [attr.required]=\"options?.required\"\n    [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n    [value]=\"controlValue\"\n    (input)=\"updateValue($event)\"\n    [disabled]=\"controlDisabled\"\n    [tiles]=\"tiles\"\n    [layout]=\"layout\"\n    [multiple]=\"multiple\"\n    [selectionToggleable]=\"selectionToggleable\"\n    [tileBackdrop]=\"tileBackdrop\"\n    [showSelectedIcon]=\"showSelectedIcon\"\n    [animationsDisabled]=\"animationsDisabled\">\n  </seam-tiled-select>\n</seam-form-field>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$1.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$1.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "ngmodule", type: TheSeamTiledSelectModule }, { kind: "component", type: i4$2.TheSeamTiledSelectComponent, selector: "seam-tiled-select", inputs: ["layout", "tiles", "value", "disabled", "multiple", "selectionToggleable", "tileBackdrop", "showSelectedIcon", "animationsDisabled"], outputs: ["change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormTiledSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-tiled-select', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        JsonSchemaFormModule,
+                        TheSeamFormFieldModule,
+                        TheSeamTiledSelectModule,
+                    ], 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\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <seam-tiled-select\n    seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [attr.name]=\"controlName\"\n    [required]=\"options?.required\"\n    [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n    [tiles]=\"tiles\"\n    [layout]=\"layout\"\n    [multiple]=\"multiple\"\n    [selectionToggleable]=\"selectionToggleable\"\n    [tileBackdrop]=\"tileBackdrop\"\n    [showSelectedIcon]=\"showSelectedIcon\"\n    [animationsDisabled]=\"animationsDisabled\">\n  </seam-tiled-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\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <seam-tiled-select\n    seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [attr.name]=\"controlName\"\n    [attr.required]=\"options?.required\"\n    [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n    [value]=\"controlValue\"\n    (input)=\"updateValue($event)\"\n    [disabled]=\"controlDisabled\"\n    [tiles]=\"tiles\"\n    [layout]=\"layout\"\n    [multiple]=\"multiple\"\n    [selectionToggleable]=\"selectionToggleable\"\n    [tileBackdrop]=\"tileBackdrop\"\n    [showSelectedIcon]=\"showSelectedIcon\"\n    [animationsDisabled]=\"animationsDisabled\">\n  </seam-tiled-select>\n</seam-form-field>\n" }]
+        }], propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class TheSeamSchemaFormFrameworkComponent {
+    layoutNode;
+    layoutIndex;
+    dataIndex;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamSchemaFormFrameworkComponent, isStandalone: true, selector: "seam-schema-form-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, host: { properties: { "attr.data-name": "layoutNode?.node", "attr.data-data-pointer": "layoutNode?.dataPointer" } }, ngImport: i0, template: "<select-widget-widget\n  [dataIndex]=\"$any(dataIndex)\"\n  [layoutIndex]=\"$any(layoutIndex)\"\n  [layoutNode]=\"layoutNode\">\n</select-widget-widget>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "component", type: i1$5.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormFrameworkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-framework', host: {
+                        '[attr.data-name]': 'layoutNode?.node',
+                        '[attr.data-data-pointer]': 'layoutNode?.dataPointer',
+                    }, imports: [
+                        JsonSchemaFormModule,
+                    ], template: "<select-widget-widget\n  [dataIndex]=\"$any(dataIndex)\"\n  [layoutIndex]=\"$any(layoutIndex)\"\n  [layoutNode]=\"layoutNode\">\n</select-widget-widget>\n" }]
+        }], propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+const THESEAM_SCHEMA_FRAMEWORK_OVERRIDES = new InjectionToken('THESEAM_SCHEMA_FRAMEWORK_OVERRIDES');
+function extendFramework(toExtend, extendFrameworkOrName) {
+    // console.log('extendFramework', toExtend, extendFrameworkOrName)
+    const _overrides = inject(Framework, { optional: true });
+    const overrides = typeof extendFrameworkOrName === 'string'
+        ? (_overrides || []).filter(x => x.name === extendFrameworkOrName)
+        : [extendFrameworkOrName];
+    // console.log(_overrides, overrides)
+    if (overrides) {
+        for (const override of overrides) {
+            // console.log('override', override)
+            if (hasProperty(override, 'framework')) {
+                toExtend.framework = override.framework;
+            }
+            if (hasProperty(override, 'widgets')) {
+                toExtend.widgets = { ...toExtend.widgets, ...override.widgets };
+            }
+            if (hasProperty(override, 'stylesheets')) {
+                toExtend.stylesheets = { ...toExtend.stylesheets, ...override.stylesheets };
+            }
+            if (hasProperty(override, 'scripts')) {
+                toExtend.scripts = { ...toExtend.scripts, ...override.scripts };
+            }
+        }
+    }
+}
+class TheSeamFramework extends Framework {
+    name = 'seam-framework';
+    framework = TheSeamSchemaFormFrameworkComponent;
+    widgets = {
+        'checkbox': TheSeamSchemaFormCheckboxComponent,
+        // 'submit': TheSeamSchemaFormSubmitComponent,
+        'submit': TheSeamSchemaFormSubmitSplitComponent,
+        'text': TheSeamSchemaFormInputComponent,
+        'number': TheSeamSchemaFormNumberComponent,
+        'select': TheSeamSchemaFormSelectComponent,
+        'divider': TheSeamSchemaFormDividerComponent,
+        'tel': TheSeamSchemaFormTelComponent,
+        'tiled-select': TheSeamSchemaFormTiledSelectComponent
+        // 'date': // TODO: Implement
+        // 'file': // TODO: Implement
+        // 'image': // TODO: Implement
+        // 'richtext': // TODO: Implement
+        // 'tabs': // TODO: Implement
+        // 'wizard': // TODO: Implement
+        // 'card': // TODO: Implement
+        // 'map': // TODO: Implement
+    };
+    constructor(_overrides) {
+        super();
+        // console.log('TheSeamFramework', _overrides, this)
+        if (_overrides) {
+            for (const override of _overrides) {
+                // console.log('override', override)
+                if (hasProperty(override, 'widgets')) {
+                    this.widgets = { ...this.widgets, ...override.widgets };
+                }
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamFramework, deps: [{ token: THESEAM_SCHEMA_FRAMEWORK_OVERRIDES, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamFramework });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamFramework, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [THESEAM_SCHEMA_FRAMEWORK_OVERRIDES]
+                }] }] });
+
+class TheSeamSchemaFormModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormModule, imports: [CommonModule,
+            JsonSchemaFormModule,
+            WidgetLibraryModule,
+            TheSeamSchemaFormFrameworkComponent], exports: [TheSeamSchemaFormFrameworkComponent,
+            JsonSchemaFormModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormModule, providers: [
+            JsonSchemaFormService,
+            FrameworkLibraryService,
+            WidgetLibraryService,
+            { provide: Framework, useClass: TheSeamFramework, multi: true },
+        ], imports: [CommonModule,
+            JsonSchemaFormModule,
+            WidgetLibraryModule,
+            TheSeamSchemaFormFrameworkComponent, JsonSchemaFormModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSchemaFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        JsonSchemaFormModule,
+                        WidgetLibraryModule,
+                        TheSeamSchemaFormFrameworkComponent
+                    ],
+                    providers: [
+                        JsonSchemaFormService,
+                        FrameworkLibraryService,
+                        WidgetLibraryService,
+                        { provide: Framework, useClass: TheSeamFramework, multi: true },
+                    ],
+                    exports: [
+                        TheSeamSchemaFormFrameworkComponent,
+                        JsonSchemaFormModule,
+                    ],
+                }]
+        }] });
+
+function isHorizontalNavItemType(item, type) {
+    return item.itemType === type;
+}
+function isHorizontalNavItemActive(item) {
+    return item.__state?.active ?? false;
+}
+function isHorizontalNavItemExpanded(item) {
+    return item.__state?.expanded ?? false;
+}
+function isHorizontalNavItemFocused(item) {
+    return item.__state?.focused ?? false;
+}
+function horizontalNavItemHasChildren(item) {
+    return horizontalNavItemCanHaveChildren(item) && hasProperty(item, 'children') && item.children.length > 0;
+}
+function horizontalNavItemCanHaveChildren(item) {
+    return isHorizontalNavItemType(item, 'basic') || isHorizontalNavItemType(item, 'link');
+}
+function horizontalNavItemHasActiveChild(item) {
+    if (!horizontalNavItemHasChildren(item)) {
+        return false;
+    }
+    for (const child of item.children) {
+        if (getHorizontalNavItemStateProp(child, 'active') || horizontalNavItemHasActiveChild(child)) {
+            return true;
+        }
+    }
+    return false;
+}
+function horizontalNavItemHasExpandedChild(item) {
+    if (!horizontalNavItemHasChildren(item)) {
+        return false;
+    }
+    for (const child of item.children) {
+        if (getHorizontalNavItemStateProp(child, 'expanded')) {
+            return true;
+        }
+    }
+    return false;
+}
+function horizontalNavItemCanBeActive(item) {
+    return isHorizontalNavItemType(item, 'basic') || isHorizontalNavItemType(item, 'link');
+}
+function horizontalNavItemCanExpand(item) {
+    return horizontalNavItemCanHaveChildren(item);
+}
+function findHorizontalNavLinkItems(items) {
+    const linkItems = [];
+    const _fn = (_items) => {
+        for (const item of _items) {
+            if (isHorizontalNavItemType(item, 'link')) {
+                linkItems.push(item);
+            }
+            if (horizontalNavItemCanHaveChildren(item) && hasProperty(item, 'children')) {
+                _fn(item.children);
+            }
+        }
+    };
+    _fn(items);
+    return linkItems;
+}
+function setHorizontalNavItemStateProp(item, prop, value) {
+    if (hasProperty(item, '__state')) {
+        item.__state[prop] = value;
+    }
+}
+function getHorizontalNavItemStateProp(item, prop) {
+    return setDefaultHorizontalNavItemState(item).__state[prop];
+}
+function setDefaultHorizontalNavItemState(item) {
+    if (hasProperty(item, '__state')) {
+        return item;
+    }
+    item.__state = {
+        active: false,
+        expanded: false,
+        focused: false
+    };
+    // TODO: See if there is a nice way to fix the typing for this.
+    return item;
+}
+function areSameHorizontalNavItem(item1, item2) {
+    if (isNullOrUndefined(item1) || isNullOrUndefined(item2)) {
+        return false;
+    }
+    if (item1.itemType !== item2.itemType) {
+        return false;
+    }
+    if (isHorizontalNavItemType(item1, 'title') && isHorizontalNavItemType(item2, 'title')) {
+        return item1.label === item2.label;
+    }
+    else if (isHorizontalNavItemType(item1, 'divider') && isHorizontalNavItemType(item2, 'divider')) {
+        return item1.label === item2.label;
+    }
+    else if (isHorizontalNavItemType(item1, 'basic') && isHorizontalNavItemType(item2, 'basic')) {
+        return item1.label === item2.label;
+    }
+    else if (isHorizontalNavItemType(item1, 'link') && isHorizontalNavItemType(item2, 'link')) {
+        return item1.label === item2.label && item1.link === item2.link;
+    }
+    else if (isHorizontalNavItemType(item1, 'button') && isHorizontalNavItemType(item2, 'button')) {
+        return item1.onClick === item2.onClick;
+    }
+    return false;
+}
+
+class TheSeamNavService {
+    _router = inject(Router);
+    _updatingCount = new BehaviorSubject(0);
+    loading$;
+    itemChanged = new Subject();
+    constructor() {
+        this.loading$ = this._updatingCount.pipe(map(count => count > 0), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    createItemsObservable(items) {
+        return defer(() => {
+            this.updateItemsStates(items);
+            this.updateRouterFocusedItem(items);
+            return new Observable((subscriber) => {
+                const stateChangeSub = this.itemChanged.pipe(switchMap(change => {
+                    if (change.prop === 'focused' && change.newValue) {
+                        this.updateFocusedItem(items, change.item);
+                    }
+                    return this.loading$.pipe(filter(loading => !loading));
+                })).subscribe(() => {
+                    subscriber.next(items);
+                });
+                try {
+                    this.updateItemsStates(items);
+                }
+                catch (err) {
+                    subscriber.error(err);
+                }
+                const routeChangeSub = this._router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
+                    try {
+                        this.updateItemsStates(items);
+                        this.updateRouterFocusedItem(items);
+                    }
+                    catch (err) {
+                        subscriber.error(err);
+                    }
+                });
+                return () => {
+                    stateChangeSub.unsubscribe();
+                    routeChangeSub.unsubscribe();
+                };
+            }).pipe(startWith(items));
+        });
+    }
+    _incUpdatingCount() {
+        this._updatingCount.next(this._updatingCount.value + 1);
+    }
+    _decrUpdatingCount() {
+        this._updatingCount.next(this._updatingCount.value - 1);
+    }
+    updateItemsStates(items) {
+        this._incUpdatingCount();
+        try {
+            for (const item of items) {
+                if (horizontalNavItemHasChildren(item)) {
+                    this.updateItemsStates(item.children);
+                }
+                this.updateItemState(item);
+            }
+            this._decrUpdatingCount();
+        }
+        catch (err) {
+            this._decrUpdatingCount();
+            throw err;
+        }
+    }
+    updateItemState(item) {
+        this._incUpdatingCount();
+        try {
+            setDefaultHorizontalNavItemState(item);
+            this.setItemStateProp(item, 'active', this.horizontalNavLinkActive(item));
+            // TODO: Implement this in a more optimized way. Unless our apps start
+            // having large navs constantly updating their state, this shouldn't
+            // have much impact on performance.
+            this._updateItemExpandedState(item);
+            this._decrUpdatingCount();
+        }
+        catch (err) {
+            this._decrUpdatingCount();
+            throw err;
+        }
+    }
+    horizontalNavLinkActive(item) {
+        if (isHorizontalNavItemType(item, 'link')) {
+            const url = this._getUrl(item);
+            if (notNullOrUndefined(url)) {
+                const opts = this._getMatchOptions(item);
+                return this._router.isActive(url, opts);
+            }
+        }
+        return false;
+    }
+    _updateItemsExpandedState(items) {
+        for (const item of items) {
+            if (horizontalNavItemHasChildren(item)) {
+                this._updateItemsExpandedState(item.children);
+            }
+            this._updateItemExpandedState(item);
+        }
+    }
+    _updateItemExpandedState(item) {
+        if (!horizontalNavItemCanExpand(item)) {
+            if (getHorizontalNavItemStateProp(item, 'expanded')) {
+                this.setItemStateProp(item, 'expanded', false);
+            }
+            return;
+        }
+        if (horizontalNavItemHasChildren(item)) {
+            this._updateItemsExpandedState(item.children);
+        }
+        if (horizontalNavItemHasActiveChild(item) || horizontalNavItemHasExpandedChild(item)) {
+            if (!getHorizontalNavItemStateProp(item, 'expanded')) {
+                this.setItemStateProp(item, 'expanded', true);
+            }
+        }
+        else {
+            if (getHorizontalNavItemStateProp(item, 'expanded')) {
+                this.setItemStateProp(item, 'expanded', false);
+            }
+        }
+    }
+    updateRouterFocusedItem(items) {
+        const focusedItem = items.find(i => isHorizontalNavItemActive(i)) || items.find(i => horizontalNavItemHasActiveChild(i));
+        if (notNullOrUndefined(focusedItem)) {
+            this.updateFocusedItem(items, focusedItem);
+        }
+    }
+    updateFocusedItem(items, focusedItem) {
+        for (const item of items) {
+            if (areSameHorizontalNavItem(item, focusedItem)) {
+                setHorizontalNavItemStateProp(item, 'focused', true);
+            }
+            else {
+                setHorizontalNavItemStateProp(item, 'focused', false);
+            }
+        }
+    }
+    _getNavExtras(item) {
+        const navigationExtras = {};
+        if (hasProperty(item, 'queryParams')) {
+            navigationExtras.queryParams = item.queryParams;
+        }
+        if (hasProperty(item, 'fragment')) {
+            navigationExtras.fragment = item.fragment;
+        }
+        if (hasProperty(item, 'queryParamsHandling')) {
+            navigationExtras.queryParamsHandling = item.queryParamsHandling;
+        }
+        if (hasProperty(item, 'preserveFragment')) {
+            navigationExtras.preserveFragment = item.preserveFragment;
+        }
+        return navigationExtras;
+    }
+    _getUrl(item) {
+        const link = item.link;
+        if (typeof link === 'string') {
+            return this._router.createUrlTree([link], this._getNavExtras(item)).toString();
+        }
+        else if (Array.isArray(link)) {
+            return this._router.createUrlTree(link, this._getNavExtras(item)).toString();
+        }
+        return null;
+    }
+    _getMatchOptions(item) {
+        const defaultMatchOpts = {
+            paths: 'subset',
+            queryParams: 'subset',
+            fragment: 'ignored',
+            matrixParams: 'ignored',
+        };
+        if (hasProperty(item, 'matchOptions')) {
+            return {
+                ...defaultMatchOpts,
+                ...item.matchOptions,
+            };
+        }
+        return defaultMatchOpts;
+    }
+    setItemStateProp(item, prop, value) {
+        const currentValue = getHorizontalNavItemStateProp(item, prop);
+        if (currentValue !== value) {
+            setHorizontalNavItemStateProp(item, prop, value);
+            const changed = {
+                item,
+                prop,
+                prevValue: currentValue,
+                newValue: value,
+            };
+            this.itemChanged.next(changed);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNavService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNavService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class NavItemComponent {
+    static ngAcceptInputType_hierLevel;
+    static ngAcceptInputType_indentSize;
+    static ngAcceptInputType_expanded;
+    static ngAcceptInputType_compact;
+    static ngAcceptInputType_active;
+    _nav = inject(TheSeamNavService);
+    _ngUnsubscribe = new Subject();
+    faAngleLeft = faAngleLeft;
+    item;
+    itemType;
+    icon;
+    hideEmptyIcon;
+    label;
+    active = false;
+    set link(value) { this._link.next(value); }
+    get link() { return this._link.value; }
+    _link = new BehaviorSubject(undefined);
+    link$ = this._link.asObservable();
+    queryParams;
+    children;
+    hierLevel = 0;
+    indentSize = 10;
+    set expanded(value) {
+        this._expanded.next(coerceBooleanProperty(value));
+    }
+    get expanded() { return this._expanded.value; }
+    _expanded = new BehaviorSubject(false);
+    expanded$ = this._expanded.asObservable();
+    set compact(value) { this._compact.next(coerceBooleanProperty(value)); }
+    get compact() { return this._compact.value; }
+    _compact = new BehaviorSubject(false);
+    compact$ = this._compact.asObservable();
+    focused = false;
+    badgeText;
+    badgeTheme = 'danger';
+    /**
+     * Content to provide to assistive technology, such as screen readers.
+     */
+    badgeSrContent;
+    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 = {
+                    ...value,
+                    placement: value.placement || 'auto',
+                    disabled: typeof value?.disabled === 'boolean'
+                        ? value.disabled
+                        : typeof value.tooltip !== 'string'
+                };
+            }
+        }
+        else {
+            this._badgeTooltip = undefined;
+        }
+    }
+    _badgeTooltip;
+    childAction = 'menu';
+    expandAction = 'toggle';
+    navItemExpanded = new EventEmitter();
+    get _isActiveCssClass() { return this.active; }
+    get _isChildActiveCssClass() { return this.hasActiveChild; }
+    get _isExpandedCssClass() { return this.expanded; }
+    get _isFocusedCssClass() { return this.focused; }
+    get _attrDataHierLevel() { return this.hierLevel; }
+    _menu;
+    _navItems;
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    get hasChildren() {
+        return Array.isArray(this.children) && this.children.length > 0;
+    }
+    get hasActiveChild() {
+        if (notNullOrUndefined(this.item)) {
+            return horizontalNavItemHasActiveChild(this.item);
+        }
+        return false;
+    }
+    get hasMenuToggle() {
+        return this.hasChildren && this.childAction === 'menu';
+    }
+    get menuTpl() {
+        return this.hasMenuToggle ? this._menu : undefined;
+    }
+    get hasExpandingChildren() {
+        return this.hasChildren && this.childAction === 'expand';
+    }
+    _toggleChildren(event) {
+        let ex = !this.expanded;
+        if (this.expandAction === 'expandOnly') {
+            ex = true;
+        }
+        this.expanded = ex;
+        this.navItemExpanded.emit(this.expanded);
+        if (this.item && this.expanded) {
+            this._nav.setItemStateProp(this.item, 'focused', this.expanded);
+        }
+        // Prevents seam-menu from closing out when toggling child expand
+        event.stopPropagation();
+    }
+    // Updates expanded state when user exits seam-menu
+    _menuEvent(menuExpanded) {
+        if (menuExpanded === false) {
+            this.expanded = false;
+            // TODO: figure out why closing seam-menu with expanded submenu messes up animation
+            if (this._navItems && this._navItems.length) {
+                this._navItems.forEach(navItem => {
+                    navItem.expanded = false;
+                });
+            }
+        }
+    }
+    get showIconBlock() {
+        return notNullOrUndefined(this.icon) || this.hideEmptyIcon !== true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NavItemComponent, isStandalone: true, selector: "seam-nav-item", inputs: { item: "item", itemType: "itemType", icon: "icon", hideEmptyIcon: "hideEmptyIcon", label: "label", active: "active", link: "link", queryParams: "queryParams", children: "children", hierLevel: "hierLevel", indentSize: "indentSize", expanded: "expanded", compact: "compact", focused: "focused", badgeText: "badgeText", badgeTheme: "badgeTheme", badgeSrContent: "badgeSrContent", badgeTooltip: "badgeTooltip", childAction: "childAction", expandAction: "expandAction" }, outputs: { navItemExpanded: "navItemExpanded" }, host: { properties: { "class.seam-nav-item--active": "this._isActiveCssClass", "class.seam-nav-item--child-active": "this._isChildActiveCssClass", "class.seam-nav-item--expanded": "this._isExpandedCssClass", "class.seam-nav-item--focused": "this._isFocusedCssClass", "attr.data-hier-level": "this._attrDataHierLevel" } }, viewQueries: [{ propertyName: "_menu", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "_navItems", predicate: NavItemComponent, descendants: true }], exportAs: ["seamNavItem"], ngImport: i0, template: "<div class=\"d-flex flex-row h-100\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasExpandingChildren\">\n  <div class=\"nav--group nav--group--level-{{ hierLevel + 1 }}\"\n    *ngIf=\"expanded$ | async\" @childGroupAnim>\n    <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"nav-item btn nav-btn p-0 d-flex align-items-stretch flex-row text-decoration-none w-100\"\n    cdkMonitorElementFocus\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\">\n    <div class=\"nav-link d-flex flex-row align-items-center w-100\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn nav-btn nav-item--toggle-btn-container d-flex align-items-center\">\n      <seam-icon\n        class=\"nav-item--toggle-btn\"\n        [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"nav-item nav-link d-flex flex-row w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\">\n    <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n      <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"nav-item nav-link d-flex flex-row w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn nav-btn nav-item--toggle-btn-container\"\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"nav-item--toggle-btn\"\n      [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"nav-item--title pt-1\" nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"nav-item--badge\"\n      [class.nav-item--badge-no-icon]=\"!icon\"\n      [seamTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n\n<seam-menu #menu *ngIf=\"hasMenuToggle\">\n  <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n</seam-menu>\n\n<ng-template #navChildren>\n  <seam-nav-item *ngFor=\"let child of children\"\n    [item]=\"child\"\n    [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n    [compact]=\"compact\"\n    [itemType]=\"$any(child).itemType\"\n    [icon]=\"$any(child).icon\"\n    [label]=\"$any(child).label\"\n    [link]=\"$any(child).link\"\n    [badgeText]=\"$any(child).badge?.text\"\n    [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n    [badgeSrContent]=\"$any(child).badge?.srContent\"\n    [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n    [queryParams]=\"$any(child).queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    [children]=\"$any(child)?.children\"\n    [active]=\"$any(child).__state?.active\"\n    [expanded]=\"$any(child).__state?.expanded\"\n    [focused]=\"$any(child).__state?.focused\"\n    childAction=\"expand\"\n    [hideEmptyIcon]=\"hideEmptyIcon\">\n  </seam-nav-item>\n</ng-template>\n\n", styles: ["seam-nav-item{display:block;transition:.25s ease-in-out background-color;text-align:inherit;border-radius:0;overflow:hidden;background:transparent;margin:0}seam-nav-item.seam-nav-item--expanded{background-color:transparent}seam-nav-item.seam-nav-item--expanded .nav-link{color:#000}seam-nav-item.seam-nav-item--child-active{background-color:#dae0e5}seam-nav-item.seam-nav-item--child-active .nav-link{color:#000}seam-nav-item.seam-nav-item--active{background-color:#dae0e5}seam-nav-item.seam-nav-item--active .active,seam-nav-item.seam-nav-item--active:active,seam-nav-item.seam-nav-item--active .nav-item.active:hover{background-color:#dae0e5}seam-nav-item.seam-nav-item--active .nav-item:hover{background-color:#e9ecef}seam-nav-item.seam-nav-item--active .nav-link{color:#000}seam-nav-item .badge{vertical-align:middle}seam-nav-item:not(.nav-item--icon) .nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-nav-item .nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center;margin-right:.5rem}seam-nav-item .nav-item--icon .nav-item--badge{top:-4px;right:-4px;position:absolute}seam-nav-item .nav-item--icon .nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-nav-item .nav-item--icon .nav-item--badge.nav-item--badge-no-icon{top:0;right:0}seam-nav-item .nav-item{transition:.25s ease-in-out background-color}seam-nav-item .nav-item:hover{background-color:#e9ecef}seam-nav-item .nav-item.active{pointer-events:none;cursor:default}seam-nav-item a.nav-item:not([href]):not([tabindex]){color:#000}seam-nav-item a.nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-nav-item .nav-link{color:#000}seam-nav-item .nav-btn{font-weight:400;color:#000;text-decoration:none;border-radius:0;border:0 solid #dee2e6}seam-nav-item .nav-btn:hover{color:#000;text-decoration:underline}seam-nav-item .nav-btn:focus,seam-nav-item .nav-btn.focus{text-decoration:underline;box-shadow:none}seam-nav-item .nav-btn:disabled,seam-nav-item .nav-btn.disabled{color:#000;pointer-events:none}seam-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-nav-item .nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:0 .5rem}seam-nav-item button.nav-item--toggle-btn-container:hover{background-color:#e9ecef}seam-nav-item .nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform;transform:none}seam-nav-item .nav-item--toggle-btn.nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-nav-item .nav--group{will-change:height;overflow:hidden}seam-nav-item .nav--group--level-1{background-color:#eff1f4}seam-nav-item .nav--group--level-2{background-color:#e6eaed}seam-nav-item .nav--group--level-3{background-color:#dde2e7}seam-nav-item .nav--group--level-4{background-color:#d4dae1}seam-nav-item .nav--group--level-5{background-color:#cbd3da}seam-nav-item .nav--group--level-6{background-color:#c2cbd4}seam-nav-item .nav--group--level-7{background-color:#bac3cd}seam-nav-item .nav--group--level-8{background-color:#b1bcc7}seam-nav-item .nav--group--level-9{background-color:#a8b4c1}seam-nav-item .nav-item--divider{display:block;border-top:1px solid rgb(218.25,223.5,228.75);width:100%}seam-nav-item .nav-item--title{color:#000;font-size:24px;padding-left:10px}seam-nav-item .sr-only{top:0;left:0}\n"], dependencies: [{ kind: "component", type: NavItemComponent, selector: "seam-nav-item", inputs: ["item", "itemType", "icon", "hideEmptyIcon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "focused", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "childAction", "expandAction"], outputs: ["navItemExpanded"], exportAs: ["seamNavItem"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i4.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "ngmodule", type: TheSeamMenuModule }, { kind: "component", type: i3$1.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i3$1.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i2.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "ngmodule", type: TheSeamTooltipModule }, { kind: "directive", type: i5.TheSeamTooltipDirective, selector: "[seamTooltip]", inputs: ["seamTooltip", "tooltipClass", "placement", "container", "disableTooltip", "showDelay", "hideDelay", "trigger"], exportAs: ["seamTooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+            trigger('childGroupAnim', [
+                transition(':enter', [
+                    style({ height: 0 }),
+                    animate('0.2s ease-in-out', style({ height: '*' })),
+                ]),
+                transition(':leave', [
+                    style({ height: '*' }),
+                    animate('0.2s ease-in-out', style({ height: 0 })),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+__decorate([
+    InputBoolean()
+], NavItemComponent.prototype, "active", void 0);
+__decorate([
+    InputNumber(0)
+], NavItemComponent.prototype, "hierLevel", void 0);
+__decorate([
+    InputNumber(10)
+], NavItemComponent.prototype, "indentSize", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NavItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-nav-item', exportAs: 'seamNavItem', animations: [
+                        trigger('childGroupAnim', [
+                            transition(':enter', [
+                                style({ height: 0 }),
+                                animate('0.2s ease-in-out', style({ height: '*' })),
+                            ]),
+                            transition(':leave', [
+                                style({ height: '*' }),
+                                animate('0.2s ease-in-out', style({ height: 0 })),
+                            ]),
+                        ]),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        NgIf,
+                        NgFor,
+                        NgTemplateOutlet,
+                        AsyncPipe,
+                        RouterModule,
+                        A11yModule,
+                        TheSeamMenuModule,
+                        TheSeamIconModule,
+                        TheSeamTooltipModule,
+                    ], template: "<div class=\"d-flex flex-row h-100\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasExpandingChildren\">\n  <div class=\"nav--group nav--group--level-{{ hierLevel + 1 }}\"\n    *ngIf=\"expanded$ | async\" @childGroupAnim>\n    <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"nav-item btn nav-btn p-0 d-flex align-items-stretch flex-row text-decoration-none w-100\"\n    cdkMonitorElementFocus\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\">\n    <div class=\"nav-link d-flex flex-row align-items-center w-100\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn nav-btn nav-item--toggle-btn-container d-flex align-items-center\">\n      <seam-icon\n        class=\"nav-item--toggle-btn\"\n        [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"nav-item nav-link d-flex flex-row w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\">\n    <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n      <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"nav-item nav-link d-flex flex-row w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn nav-btn nav-item--toggle-btn-container\"\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"nav-item--toggle-btn\"\n      [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"nav-item--title pt-1\" nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"nav-item--badge\"\n      [class.nav-item--badge-no-icon]=\"!icon\"\n      [seamTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n\n<seam-menu #menu *ngIf=\"hasMenuToggle\">\n  <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n</seam-menu>\n\n<ng-template #navChildren>\n  <seam-nav-item *ngFor=\"let child of children\"\n    [item]=\"child\"\n    [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n    [compact]=\"compact\"\n    [itemType]=\"$any(child).itemType\"\n    [icon]=\"$any(child).icon\"\n    [label]=\"$any(child).label\"\n    [link]=\"$any(child).link\"\n    [badgeText]=\"$any(child).badge?.text\"\n    [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n    [badgeSrContent]=\"$any(child).badge?.srContent\"\n    [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n    [queryParams]=\"$any(child).queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    [children]=\"$any(child)?.children\"\n    [active]=\"$any(child).__state?.active\"\n    [expanded]=\"$any(child).__state?.expanded\"\n    [focused]=\"$any(child).__state?.focused\"\n    childAction=\"expand\"\n    [hideEmptyIcon]=\"hideEmptyIcon\">\n  </seam-nav-item>\n</ng-template>\n\n", styles: ["seam-nav-item{display:block;transition:.25s ease-in-out background-color;text-align:inherit;border-radius:0;overflow:hidden;background:transparent;margin:0}seam-nav-item.seam-nav-item--expanded{background-color:transparent}seam-nav-item.seam-nav-item--expanded .nav-link{color:#000}seam-nav-item.seam-nav-item--child-active{background-color:#dae0e5}seam-nav-item.seam-nav-item--child-active .nav-link{color:#000}seam-nav-item.seam-nav-item--active{background-color:#dae0e5}seam-nav-item.seam-nav-item--active .active,seam-nav-item.seam-nav-item--active:active,seam-nav-item.seam-nav-item--active .nav-item.active:hover{background-color:#dae0e5}seam-nav-item.seam-nav-item--active .nav-item:hover{background-color:#e9ecef}seam-nav-item.seam-nav-item--active .nav-link{color:#000}seam-nav-item .badge{vertical-align:middle}seam-nav-item:not(.nav-item--icon) .nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-nav-item .nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center;margin-right:.5rem}seam-nav-item .nav-item--icon .nav-item--badge{top:-4px;right:-4px;position:absolute}seam-nav-item .nav-item--icon .nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-nav-item .nav-item--icon .nav-item--badge.nav-item--badge-no-icon{top:0;right:0}seam-nav-item .nav-item{transition:.25s ease-in-out background-color}seam-nav-item .nav-item:hover{background-color:#e9ecef}seam-nav-item .nav-item.active{pointer-events:none;cursor:default}seam-nav-item a.nav-item:not([href]):not([tabindex]){color:#000}seam-nav-item a.nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-nav-item .nav-link{color:#000}seam-nav-item .nav-btn{font-weight:400;color:#000;text-decoration:none;border-radius:0;border:0 solid #dee2e6}seam-nav-item .nav-btn:hover{color:#000;text-decoration:underline}seam-nav-item .nav-btn:focus,seam-nav-item .nav-btn.focus{text-decoration:underline;box-shadow:none}seam-nav-item .nav-btn:disabled,seam-nav-item .nav-btn.disabled{color:#000;pointer-events:none}seam-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-nav-item .nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:0 .5rem}seam-nav-item button.nav-item--toggle-btn-container:hover{background-color:#e9ecef}seam-nav-item .nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform;transform:none}seam-nav-item .nav-item--toggle-btn.nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-nav-item .nav--group{will-change:height;overflow:hidden}seam-nav-item .nav--group--level-1{background-color:#eff1f4}seam-nav-item .nav--group--level-2{background-color:#e6eaed}seam-nav-item .nav--group--level-3{background-color:#dde2e7}seam-nav-item .nav--group--level-4{background-color:#d4dae1}seam-nav-item .nav--group--level-5{background-color:#cbd3da}seam-nav-item .nav--group--level-6{background-color:#c2cbd4}seam-nav-item .nav--group--level-7{background-color:#bac3cd}seam-nav-item .nav--group--level-8{background-color:#b1bcc7}seam-nav-item .nav--group--level-9{background-color:#a8b4c1}seam-nav-item .nav-item--divider{display:block;border-top:1px solid rgb(218.25,223.5,228.75);width:100%}seam-nav-item .nav-item--title{color:#000;font-size:24px;padding-left:10px}seam-nav-item .sr-only{top:0;left:0}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], itemType: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], hideEmptyIcon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], link: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
+            }], children: [{
+                type: Input
+            }], hierLevel: [{
+                type: Input
+            }], indentSize: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], focused: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], badgeTheme: [{
+                type: Input
+            }], badgeSrContent: [{
+                type: Input
+            }], badgeTooltip: [{
+                type: Input
+            }], childAction: [{
+                type: Input
+            }], expandAction: [{
+                type: Input
+            }], navItemExpanded: [{
+                type: Output
+            }], _isActiveCssClass: [{
+                type: HostBinding,
+                args: ['class.seam-nav-item--active']
+            }], _isChildActiveCssClass: [{
+                type: HostBinding,
+                args: ['class.seam-nav-item--child-active']
+            }], _isExpandedCssClass: [{
+                type: HostBinding,
+                args: ['class.seam-nav-item--expanded']
+            }], _isFocusedCssClass: [{
+                type: HostBinding,
+                args: ['class.seam-nav-item--focused']
+            }], _attrDataHierLevel: [{
+                type: HostBinding,
+                args: ['attr.data-hier-level']
+            }], _menu: [{
+                type: ViewChild,
+                args: [MenuComponent]
+            }], _navItems: [{
+                type: ViewChildren,
+                args: [NavItemComponent]
+            }] } });
+
+class HorizontalNavComponent {
+    static ngAcceptInputType_hasHeaderToggle;
+    _nav = inject(TheSeamNavService);
+    _ngUnsubscribe = new Subject();
+    get items() { return this._items.value; }
+    set items(value) {
+        this._items.next(value);
+    }
+    _items = new BehaviorSubject([]);
+    items$;
+    hideEmptyIcon = true;
+    hierLevel = 0;
+    childAction = 'menu';
+    expandAction = 'toggle';
+    navItemExpanded = new EventEmitter();
+    constructor() {
+        this.items$ = this._items.asObservable().pipe(switchMap(items => items ? this._nav.createItemsObservable(items) : []), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    _navItemExpanded(item, expanded) {
+        this.navItemExpanded.emit({ navItem: item, expanded });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HorizontalNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: HorizontalNavComponent, isStandalone: true, selector: "seam-horizontal-nav", inputs: { items: "items", hideEmptyIcon: "hideEmptyIcon", hierLevel: "hierLevel", childAction: "childAction", expandAction: "expandAction" }, outputs: { navItemExpanded: "navItemExpanded" }, providers: [
+            TheSeamNavService,
+        ], ngImport: i0, template: "<div class=\"nav-inner-wrapper\" class=\"nav-inner-wrapper-{{hierLevel}}\">\n  <div class=\"nav-items-row\">\n    <seam-nav-item *ngFor=\"let item of items$ | async\"\n      class=\"flex-shrink-0\"\n      [item]=\"item\"\n      [itemType]=\"$any(item)?.itemType\"\n      [icon]=\"$any(item)?.icon\"\n      [label]=\"$any(item)?.label\"\n      [link]=\"$any(item)?.link\"\n      [badgeText]=\"$any(item)?.badge?.text\"\n      [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n      [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n      [queryParams]=\"$any(item)?.queryParams\"\n      [children]=\"$any(item)?.children\"\n      [active]=\"$any(item).__state?.active\"\n      [expanded]=\"$any(item).__state?.expanded\"\n      [focused]=\"$any(item).__state?.focused\"\n      [hierLevel]=\"hierLevel\"\n      [childAction]=\"childAction\"\n      [expandAction]=\"expandAction\"\n      (navItemExpanded)=\"_navItemExpanded(item, $event)\"\n      [hideEmptyIcon]=\"hideEmptyIcon\">\n    </seam-nav-item>\n  </div>\n</div>\n", styles: ["seam-horizontal-nav,.seam-horizontal-nav{display:block;height:100%;position:relative;z-index:2}seam-horizontal-nav .nav-inner-wrapper,.seam-horizontal-nav .nav-inner-wrapper{background:none;height:100%}seam-horizontal-nav .nav-backdrop,.seam-horizontal-nav .nav-backdrop{background:#343a4099;width:100vw;height:100vh}seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden,.seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-horizontal-nav .nav-content,.seam-horizontal-nav .nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-horizontal-nav .nav-items-container,.seam-horizontal-nav .nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}seam-horizontal-nav .nav-items-row,.seam-horizontal-nav .nav-items-row{height:100%;display:flex;padding:.25rem .5rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NavItemComponent, selector: "seam-nav-item", inputs: ["item", "itemType", "icon", "hideEmptyIcon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "focused", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "childAction", "expandAction"], outputs: ["navItemExpanded"], exportAs: ["seamNavItem"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HorizontalNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-horizontal-nav', providers: [
+                        TheSeamNavService,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        NgFor,
+                        AsyncPipe,
+                        NavItemComponent,
+                    ], template: "<div class=\"nav-inner-wrapper\" class=\"nav-inner-wrapper-{{hierLevel}}\">\n  <div class=\"nav-items-row\">\n    <seam-nav-item *ngFor=\"let item of items$ | async\"\n      class=\"flex-shrink-0\"\n      [item]=\"item\"\n      [itemType]=\"$any(item)?.itemType\"\n      [icon]=\"$any(item)?.icon\"\n      [label]=\"$any(item)?.label\"\n      [link]=\"$any(item)?.link\"\n      [badgeText]=\"$any(item)?.badge?.text\"\n      [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n      [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n      [queryParams]=\"$any(item)?.queryParams\"\n      [children]=\"$any(item)?.children\"\n      [active]=\"$any(item).__state?.active\"\n      [expanded]=\"$any(item).__state?.expanded\"\n      [focused]=\"$any(item).__state?.focused\"\n      [hierLevel]=\"hierLevel\"\n      [childAction]=\"childAction\"\n      [expandAction]=\"expandAction\"\n      (navItemExpanded)=\"_navItemExpanded(item, $event)\"\n      [hideEmptyIcon]=\"hideEmptyIcon\">\n    </seam-nav-item>\n  </div>\n</div>\n", styles: ["seam-horizontal-nav,.seam-horizontal-nav{display:block;height:100%;position:relative;z-index:2}seam-horizontal-nav .nav-inner-wrapper,.seam-horizontal-nav .nav-inner-wrapper{background:none;height:100%}seam-horizontal-nav .nav-backdrop,.seam-horizontal-nav .nav-backdrop{background:#343a4099;width:100vw;height:100vh}seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden,.seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-horizontal-nav .nav-content,.seam-horizontal-nav .nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-horizontal-nav .nav-items-container,.seam-horizontal-nav .nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}seam-horizontal-nav .nav-items-row,.seam-horizontal-nav .nav-items-row{height:100%;display:flex;padding:.25rem .5rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{
+                type: Input
+            }], hideEmptyIcon: [{
+                type: Input
+            }], hierLevel: [{
+                type: Input
+            }], childAction: [{
+                type: Input
+            }], expandAction: [{
+                type: Input
+            }], navItemExpanded: [{
+                type: Output
+            }] } });
+
+class TheSeamNavModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNavModule, imports: [NavItemComponent,
+            HorizontalNavComponent], exports: [NavItemComponent,
+            HorizontalNavComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNavModule, imports: [NavItemComponent,
+            HorizontalNavComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNavModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        NavItemComponent,
+                        HorizontalNavComponent,
+                    ],
+                    exports: [
+                        NavItemComponent,
+                        HorizontalNavComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutSideBarDirective, BaseLayoutSideBarFooterDirective, BaseLayoutSideBarHeaderDirective, BaseLayoutTopBarDirective, DEFAULT_SIDE_NAV_CONFIG, DashboardComponent, DashboardWidgetContainerComponent, DashboardWidgetPortalOutletDirective, DashboardWidgetTemplateContainerComponent, DashboardWidgetsComponent, DashboardWidgetsPreferencesService, DashboardWidgetsService, HierarchyLevelResolver, HierarchyRouterOutletComponent, HorizontalNavComponent, NavItemComponent, SideNavComponent, SideNavItemComponent, SideNavToggleComponent, THESEAM_BASE_LAYOUT_REF, THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, THESEAM_SCHEMA_FRAMEWORK_OVERRIDES, THESEAM_SIDE_NAV_ACCESSOR, THESEAM_SIDE_NAV_CONFIG, THE_SEAM_BASE_LAYOUT, TheSeamBaseLayoutComponent, TheSeamBaseLayoutModule, TheSeamBaseLayoutNavToggleDirective, TheSeamDashboardModule, TheSeamDynamicRouterModule, TheSeamFramework, TheSeamNavModule, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarCompactMenuBtnDetailDirective, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarNavToggleBtnDetailDirective, TopBarTitleComponent, applyItemConfig, areSameHorizontalNavItem, canBeActive, canExpand, canHaveChildren, extendFramework, fader, findHorizontalNavLinkItems, findLinkItems, getHorizontalNavItemStateProp, getItemStateProp, hasActiveChild, hasChildren, hasExpandedChild, horizontalNavItemCanBeActive, horizontalNavItemCanExpand, horizontalNavItemCanHaveChildren, horizontalNavItemHasActiveChild, horizontalNavItemHasChildren, horizontalNavItemHasExpandedChild, isExpanded, isHorizontalNavItemActive, isHorizontalNavItemExpanded, isHorizontalNavItemFocused, isHorizontalNavItemType, isNavItemActive, isNavItemType, routeChanges, setDefaultHorizontalNavItemState, setDefaultState, setHorizontalNavItemStateProp, setItemStateProp, sideNavExpandStateChangeFn, sideToSide, slider, stepper, transformer };
+//# sourceMappingURL=theseam-ui-common-framework.mjs.map