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

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

@@ -1,3891 +0,0 @@
-import * as i0 from '@angular/core';
-import { Directive, InjectionToken, Optional, Inject, HostBinding, Input, HostListener, forwardRef, isDevMode, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, NgModule, ViewChild, EventEmitter, Output, Injectable, Injector, ViewChildren, Self, ContentChildren, inject } from '@angular/core';
-import { tap, map, startWith, switchMap, shareReplay, mapTo, take, auditTime, debounceTime, takeUntil, distinctUntilChanged, finalize, filter } from 'rxjs/operators';
-import * as i3 from '@angular/cdk/portal';
-import { TemplatePortal, PortalModule, BasePortalOutlet, ComponentPortal } from '@angular/cdk/portal';
-import { BehaviorSubject, isObservable, from, 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 from '@theseam/ui-common/layout';
-import { TheSeamLayoutModule } from '@theseam/ui-common/layout';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4 from '@theseam/ui-common/scrollbar';
-import { TheSeamScrollbarModule } from '@theseam/ui-common/scrollbar';
-import * as i4$1 from '@theseam/ui-common/buttons';
-import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
-import * as i2$1 from '@theseam/ui-common/icon';
-import { TheSeamIconModule } from '@theseam/ui-common/icon';
-import { hasProperty, notNullOrUndefined, observeControlValue, observeControlStatus, isNullOrUndefined } from '@theseam/ui-common/utils';
-import { __decorate } from 'tslib';
-import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i3$1 from '@angular/cdk/drag-drop';
-import { moveItemInArray, transferArrayItem, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
-import { InputBoolean, InputNumber, mixinDisabled } from '@theseam/ui-common/core';
-import { THESEAM_WIDGET_DATA, THESEAM_WIDGET_ACCESSOR } from '@theseam/ui-common/widget';
-import * as i1$1 from '@theseam/ui-common/dynamic-component-loader';
-import * as i6 from '@theseam/ui-common/shared';
-import { TheSeamSharedModule } from '@theseam/ui-common/shared';
-import * as i1$2 from '@angular/router';
-import { RouterModule, NavigationEnd, NavigationStart } from '@angular/router';
-import * as i4$2 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
-import * as i5 from '@ng-bootstrap/ng-bootstrap';
-import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { trigger, state, style, transition, animate, group, query, animateChild, keyframes } from '@angular/animations';
-import * as i2$2 from '@angular/flex-layout/extended';
-import * as i3$2 from '@theseam/ui-common/menu';
-import { TheSeamMenuModule, MenuComponent } from '@theseam/ui-common/menu';
-import { faUserCircle } from '@fortawesome/free-regular-svg-icons';
-import * as i1$3 from '@ajsf/core';
-import { JsonSchemaFormModule, isArray, buildTitleMap, hasOwn, Framework, WidgetLibraryModule, JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService } from '@ajsf/core';
-import * as i3$3 from '@angular/forms';
-import { ReactiveFormsModule } from '@angular/forms';
-import { TheSeamCheckboxComponent } from '@theseam/ui-common/checkbox';
-import * as i4$3 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 * as i6$1 from '@theseam/ui-common/tiled-select';
-import { TheSeamTiledSelectModule } from '@theseam/ui-common/tiled-select';
-import * as i2$3 from '@angular/cdk/platform';
-
-class BaseLayoutContentFooterDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-BaseLayoutContentFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutContentFooterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BaseLayoutContentFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BaseLayoutContentFooterDirective, selector: "[seamBaseLayoutContentFooter]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutContentFooterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[seamBaseLayoutContentFooter]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class BaseLayoutContentHeaderDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-BaseLayoutContentHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutContentHeaderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BaseLayoutContentHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BaseLayoutContentHeaderDirective, selector: "[seamBaseLayoutContentHeader]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutContentHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[seamBaseLayoutContentHeader]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class BaseLayoutContentDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-BaseLayoutContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutContentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BaseLayoutContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BaseLayoutContentDirective, selector: "[seamBaseLayoutContent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[seamBaseLayoutContent]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-const THESEAM_BASE_LAYOUT_REF = new InjectionToken('seamBaseLayoutRef');
-
-/**
- * Can be used to toggle the expand state of the registered nav.
- */
-class BaseLayoutNavToggleDirective {
-    get _attrType() { return this.type; }
-    get _attrAriaLabel() { return this.ariaLabel || null; }
-    _onClick() {
-        if (this.baseLayout && this.baseLayout.registeredNav) {
-            this.baseLayout.registeredNav.toggle();
-        }
-    }
-    constructor(_cdr, _baseLayout) {
-        this._cdr = _cdr;
-        this.type = 'button';
-        /** Screenreader label for the button. */
-        this.ariaLabel = 'Navigation toggle';
-        this._toggleClass = true;
-        this._expandedClass = false;
-        this.baseLayout = _baseLayout;
-    }
-    ngOnInit() {
-        var _a, _b;
-        (_b = (_a = this.baseLayout) === null || _a === void 0 ? void 0 : _a.registeredNav) === null || _b === void 0 ? void 0 : _b.expanded$.pipe(tap(exp => {
-            this._expandedClass = exp;
-            this._cdr.markForCheck();
-        })).subscribe();
-    }
-}
-BaseLayoutNavToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutNavToggleDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: THESEAM_BASE_LAYOUT_REF, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-BaseLayoutNavToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: { type: "type", ariaLabel: ["aria-label", "ariaLabel"] }, host: { listeners: { "click": "_onClick()" }, properties: { "attr.type": "this._attrType", "attr.aria-label": "this._attrAriaLabel", "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: "15.2.10", ngImport: i0, type: BaseLayoutNavToggleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[seamBaseLayoutNavToggle]',
-                    exportAs: 'seamBaseLayoutNavToggle'
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [THESEAM_BASE_LAYOUT_REF]
-                    }] }];
-    }, propDecorators: { _attrType: [{
-                type: HostBinding,
-                args: ['attr.type']
-            }], type: [{
-                type: Input
-            }], _attrAriaLabel: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], _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 {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-BaseLayoutSideBarFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutSideBarFooterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BaseLayoutSideBarFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BaseLayoutSideBarFooterDirective, selector: "[seamBaseLayoutSideBarFooter]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutSideBarFooterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[seamBaseLayoutSideBarFooter]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class BaseLayoutSideBarDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-BaseLayoutSideBarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutSideBarDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BaseLayoutSideBarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BaseLayoutSideBarDirective, selector: "[seamBaseLayoutSideBar]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutSideBarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[seamBaseLayoutSideBar]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class BaseLayoutTopBarDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-BaseLayoutTopBarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutTopBarDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BaseLayoutTopBarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BaseLayoutTopBarDirective, selector: "[seamBaseLayoutTopBar]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutTopBarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[seamBaseLayoutTopBar]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class BaseLayoutSideBarHeaderDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-BaseLayoutSideBarHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutSideBarHeaderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BaseLayoutSideBarHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BaseLayoutSideBarHeaderDirective, selector: "[seamBaseLayoutSideBarHeader]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutSideBarHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[seamBaseLayoutSideBarHeader]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-const THE_SEAM_BASE_LAYOUT = {
-    provide: THESEAM_BASE_LAYOUT_REF,
-    // tslint:disable-next-line:no-use-before-declare
-    useExisting: forwardRef(() => TheSeamBaseLayoutComponent),
-    multi: false,
-};
-class TheSeamBaseLayoutComponent {
-    get registeredNav() { return this._registeredNav.value; }
-    get registeredActions() { return this._registeredActions.value; }
-    constructor(_viewContainerRef, _layout) {
-        this._viewContainerRef = _viewContainerRef;
-        this._layout = _layout;
-        this.faAngleDoubleRight = faAngleDoubleRight;
-        this.faAngleDoubleLeft = faAngleDoubleLeft;
-        this.overlayNav = false;
-        this.showSidebar = true;
-        this._hasSideBar = new BehaviorSubject(false);
-        this._registeredNav = new BehaviorSubject(undefined);
-        this.registeredNav$ = this._registeredNav.asObservable();
-        this._registeredActions = new BehaviorSubject([]);
-        this.registeredActions$ = this._registeredActions.asObservable();
-        this.isMobile$ = this._layout.isMobile$;
-        this.hasSideBar$ = this._hasSideBar.asObservable();
-    }
-    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));
-    }
-}
-TheSeamBaseLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamBaseLayoutComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.TheSeamLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamBaseLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TheSeamBaseLayoutComponent, 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i4.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamBaseLayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'seam-base-layout', providers: [THE_SEAM_BASE_LAYOUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header 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: function () { return [{ type: i0.ViewContainerRef }, { type: i1.TheSeamLayoutService }]; }, 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 {
-}
-TheSeamBaseLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamBaseLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheSeamBaseLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TheSeamBaseLayoutModule, declarations: [TheSeamBaseLayoutComponent,
-        BaseLayoutContentDirective,
-        BaseLayoutSideBarDirective,
-        BaseLayoutSideBarFooterDirective,
-        BaseLayoutSideBarHeaderDirective,
-        BaseLayoutTopBarDirective,
-        BaseLayoutNavToggleDirective,
-        BaseLayoutContentHeaderDirective,
-        BaseLayoutContentFooterDirective], imports: [CommonModule,
-        PortalModule,
-        TheSeamScrollbarModule,
-        TheSeamIconModule,
-        TheSeamButtonsModule], exports: [TheSeamBaseLayoutComponent,
-        BaseLayoutContentDirective,
-        BaseLayoutSideBarDirective,
-        BaseLayoutSideBarFooterDirective,
-        BaseLayoutSideBarHeaderDirective,
-        BaseLayoutTopBarDirective,
-        BaseLayoutNavToggleDirective,
-        BaseLayoutContentHeaderDirective,
-        BaseLayoutContentFooterDirective] });
-TheSeamBaseLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamBaseLayoutModule, imports: [CommonModule,
-        PortalModule,
-        TheSeamScrollbarModule,
-        TheSeamIconModule,
-        TheSeamButtonsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamBaseLayoutModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        TheSeamBaseLayoutComponent,
-                        BaseLayoutContentDirective,
-                        BaseLayoutSideBarDirective,
-                        BaseLayoutSideBarFooterDirective,
-                        BaseLayoutSideBarHeaderDirective,
-                        BaseLayoutTopBarDirective,
-                        BaseLayoutNavToggleDirective,
-                        BaseLayoutContentHeaderDirective,
-                        BaseLayoutContentFooterDirective
-                    ],
-                    imports: [
-                        CommonModule,
-                        PortalModule,
-                        TheSeamScrollbarModule,
-                        TheSeamIconModule,
-                        TheSeamButtonsModule
-                    ],
-                    exports: [
-                        TheSeamBaseLayoutComponent,
-                        BaseLayoutContentDirective,
-                        BaseLayoutSideBarDirective,
-                        BaseLayoutSideBarFooterDirective,
-                        BaseLayoutSideBarHeaderDirective,
-                        BaseLayoutTopBarDirective,
-                        BaseLayoutNavToggleDirective,
-                        BaseLayoutContentHeaderDirective,
-                        BaseLayoutContentFooterDirective
-                    ]
-                }]
-        }] });
-
-class DashboardWidgetContainerComponent {
-}
-DashboardWidgetContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DashboardWidgetContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardWidgetContainerComponent, selector: "seam-dashboard-widget-container", inputs: { def: "def" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 {
-    constructor(_dashboardWidgetsComponent) {
-        this._dashboardWidgetsComponent = _dashboardWidgetsComponent;
-        this.template$ = this._dashboardWidgetsComponent.containers$.pipe(map(containers => containers.find((c) => { var _a; return c.def.widgetId === ((_a = this.item) === null || _a === void 0 ? void 0 : _a.widgetId); })), map(container => container && container.templateRef));
-    }
-}
-DashboardWidgetTemplateContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetTemplateContainerComponent, deps: [{ token: THESEAM_DASHBOARD_WIDGETS_ACCESSOR }], target: i0.ɵɵFactoryTarget.Component });
-DashboardWidgetTemplateContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardWidgetTemplateContainerComponent, selector: "seam-dashboard-widget-template-container", inputs: { item: "item" }, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"$any(template$ | async)\"></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetTemplateContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'seam-dashboard-widget-template-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngTemplateOutlet]=\"$any(template$ | async)\"></ng-template>\n" }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [THESEAM_DASHBOARD_WIDGETS_ACCESSOR]
-                    }] }];
-    }, propDecorators: { item: [{
-                type: Input
-            }] } });
-
-/**
- * Mostly copied from
- * `https://github.com/angular/components/blob/master/src/cdk/portal/portal-directives.ts`
- * until I can figure out how to hold off removing the DOM nodes with the
- * cdkPortalOutlet. When we update to Angular 9 I may be able to do this better
- * with the new DomPortal.
- *
- * Directive version of a PortalOutlet. Because the directive *is* a
- * PortalOutlet, portals can be directly attached to it, enabling declarative
- * use.
- *
- * Usage: `<ng-template [cdkPortalOutlet]="greeting"></ng-template>`
- */
-class DashboardWidgetPortalOutletDirective extends BasePortalOutlet {
-    constructor(_componentFactoryResolver, _viewContainerRef, _elementRef) {
-        super();
-        this._componentFactoryResolver = _componentFactoryResolver;
-        this._viewContainerRef = _viewContainerRef;
-        this._elementRef = _elementRef;
-        /** Whether the portal component is initialized. */
-        this._isInitialized = false;
-        /** Emits when a portal is attached to the outlet. */
-        this.attached = new EventEmitter();
-    }
-    /** Portal associated with the Portal outlet. */
-    get portal() {
-        return this._attachedPortal;
-    }
-    set portal(portal) {
-        // console.log('[DashboardWidgetPortalOutletDirective] set portal', portal, this.hasAttached())
-        // Ignore the cases where the `portal` is set to a falsy value before the lifecycle hooks have
-        // run. This handles the cases where the user might do something like `<div cdkPortalOutlet>`
-        // and attach a portal programmatically in the parent component. When Angular does the first CD
-        // round, it will fire the setter with empty string, causing the user's content to be cleared.
-        if (this.hasAttached() && !portal && !this._isInitialized) {
-            return;
-        }
-        if (this.hasAttached()) {
-            super.detach();
-        }
-        if (portal) {
-            super.attach(portal);
-        }
-        this._attachedPortal = portal;
-    }
-    /** Component or view reference that is attached to the portal. */
-    get attachedRef() {
-        return this._attachedRef;
-    }
-    ngOnInit() {
-        this._isInitialized = true;
-    }
-    ngOnDestroy() {
-        // console.log('[DashboardWidgetPortalOutletDirective] ngOnDestroy')
-        // TODO: Figure out the right way to call dispose without messing up
-        // animation. This setTimeout way assumes the transition is 500ms, but that
-        // may not always be the case and isn't guaranteed to match the animation ms
-        // duration, since setTimeout isn't really meant for accurate timing. It
-        // also makes debugging animations difficult, because you can pause an
-        // animation, but the timeout will still run.
-        setTimeout(() => {
-            super.dispose();
-            this._attachedPortal = null;
-            this._attachedRef = null;
-        }, 500);
-    }
-    /**
-     * Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.
-     *
-     * @param portal Portal to be attached to the portal outlet.
-     * @returns Reference to the created component.
-     */
-    attachComponentPortal(portal) {
-        portal.setAttachedHost(this);
-        // If the portal specifies an origin, use that as the logical location of the component
-        // in the application tree. Otherwise use the location of this PortalOutlet.
-        const viewContainerRef = portal.viewContainerRef != null
-            ? portal.viewContainerRef
-            : this._viewContainerRef;
-        const resolver = portal.componentFactoryResolver || this._componentFactoryResolver;
-        const componentFactory = resolver.resolveComponentFactory(portal.component);
-        const ref = viewContainerRef.createComponent(componentFactory, viewContainerRef.length, portal.injector || viewContainerRef.injector);
-        super.setDisposeFn(() => ref.destroy());
-        this._attachedPortal = portal;
-        this._attachedRef = ref;
-        this.attached.emit(ref);
-        return ref;
-    }
-    /**
-     * Attach the given TemplatePortal to this PortlHost as an embedded View.
-     * @param portal Portal to be attached.
-     * @returns Reference to the created embedded view.
-     */
-    attachTemplatePortal(portal) {
-        portal.setAttachedHost(this);
-        const viewRef = this._viewContainerRef.createEmbeddedView(portal.templateRef, portal.context);
-        super.setDisposeFn(() => this._viewContainerRef.clear());
-        this._attachedPortal = portal;
-        this._attachedRef = viewRef;
-        this.attached.emit(viewRef);
-        return viewRef;
-    }
-}
-DashboardWidgetPortalOutletDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetPortalOutletDirective, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-DashboardWidgetPortalOutletDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DashboardWidgetPortalOutletDirective, selector: "[seamDashboardWidgetPortalOutlet]", inputs: { portal: ["seamDashboardWidgetPortalOutlet", "portal"] }, outputs: { attached: "attached" }, exportAs: ["seamDashboardWidgetPortalOutlet"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetPortalOutletDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[seamDashboardWidgetPortalOutlet]',
-                    exportAs: 'seamDashboardWidgetPortalOutlet',
-                    inputs: ['portal: seamDashboardWidgetPortalOutlet']
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }]; }, propDecorators: { attached: [{
-                type: Output
-            }] } });
-
-const THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR = new InjectionToken('ITheSeamDashboardWidgetsPreferencesAccessor');
-
-// TODO: This needs a unit test to make sure it will not cause a race condition
-// if update is called faster than the previous can respond.
-//
-// The ideal approach I am thinking, without steping through the process too
-// thoroughly is to hold the new data emit until all pending updates are done.
-// Any pending updates other than the most recently requested will be ignored
-// and just wait on the most recent, and if already running it should be
-// canceled if possible. Also, incase something happens that causes the new data
-// emissions to get held up too long, there could be a threshold time that the
-// new data can be held up.
-/**
- * Manages anything dealing with retrieving and updating dashboard widget
- * preference data from the provided accessor.
- */
-class DashboardWidgetsPreferencesService {
-    // private _pending = false
-    // public get pending() { return this._pending }
-    constructor(_prefsAccessor) {
-        this._prefsAccessor = _prefsAccessor;
-        this._tablePrefsMap = new Map();
-    }
-    preferences(preferenceKey) {
-        let prefs = this._tablePrefsMap.get(preferenceKey);
-        if (!prefs) {
-            const refreshSubject = new Subject();
-            prefs = {
-                observable: this._createObservable(refreshSubject, preferenceKey),
-                refresh: refreshSubject
-            };
-            this._tablePrefsMap.set(preferenceKey, prefs);
-        }
-        return prefs.observable;
-    }
-    _createObservable(refreshSubject, prefKey) {
-        if (!this._prefsAccessor) {
-            return of({});
-        }
-        const accessor = (key) => this._prefsAccessor ? this._prefsAccessor.get(key) : of('{}');
-        return refreshSubject.pipe(startWith({}), 
-        // tap(() => console.log('Start requesting: ', prefKey)),
-        switchMap(() => accessor(prefKey).pipe(map(v => {
-            if (!v) {
-                return null;
-            }
-            // TODO: Add a schema validator and migration tool to avoid parsing issues.
-            try {
-                return JSON.parse(v);
-            }
-            catch (error) {
-                if (isDevMode()) {
-                    // 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(Object.assign({}, _layout));
-            }
-            const newPrefs = Object.assign(Object.assign({}, prefs), { layouts });
-            return newPrefs;
-        }), 
-        // tap(v => console.log('newPrefs', v)),
-        take(1), switchMap(newPrefs => this._prefsAccessor
-            ? this._prefsAccessor.update(preferenceKey, JSON.stringify(newPrefs))
-            : of(newPrefs)), switchMap(() => this.refresh(preferenceKey).pipe(mapTo(undefined))));
-        // .subscribe()
-    }
-    toSerializeableLayout(layout) {
-        const serialized = {
-            name: layout.name,
-            label: layout.label,
-            items: this.toSerializeableItems(layout.items) || []
-        };
-        return serialized;
-    }
-    // public toDeserializedLayout(layout: IDashboardWidgetItemLayoutSerialized): IDashboardWidgetItemLayoutDef {
-    //   // For now there is nothing to do. Eventually this should have at least
-    //   // validation on the deserialized object.
-    //   return layout
-    // }
-    /**
-     * Returns the serializable widget items as objects that can be serialized to
-     * a JSON string for storage.
-     */
-    toSerializeableItems(widgets) {
-        const serialized = [];
-        for (const w of widgets) {
-            // if (!w.__itemDef.component || typeof w.__itemDef.component !== 'string') {
-            //   console.warn(`[DashboardWidgetsService] Widget item def must have a string 'component' property to be serialized.`, w)
-            //   continue
-            // }
-            // serialized.push({
-            //   widgetId: w.widgetId,
-            //   col: w.col,
-            //   order: w.order,
-            //   component: w.__itemDef.component
-            // })
-            // TODO: Remove this, it is only here for initial dev debugging.
-            serialized.push({
-                widgetId: w.widgetId,
-                col: w.col,
-                order: w.order,
-                // component: w.__itemDef.component as string
-            });
-        }
-        return serialized;
-    }
-}
-DashboardWidgetsPreferencesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetsPreferencesService, deps: [{ token: THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-DashboardWidgetsPreferencesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetsPreferencesService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetsPreferencesService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR]
-                    }] }];
-    } });
-
-class DashboardWidgetsService {
-    get widgets() { return this._widgets.value; }
-    set widgets(value) { this._widgets.next(value); }
-    get numColumns() { return this._numColumns.value; }
-    set numColumns(value) {
-        if (value !== this._numColumns.value) {
-            this._numColumns.next(value);
-        }
-    }
-    constructor(_dynamicComponentLoaderModule, _preferences) {
-        this._dynamicComponentLoaderModule = _dynamicComponentLoaderModule;
-        this._preferences = _preferences;
-        this.preferenceKey = 'datatable-widgets';
-        this.defaultNumColumns = 3;
-        /** Used for operations, such as 'addWidget', if the column is not specified. */
-        this.defaultColumn = 0;
-        this._widgets = new BehaviorSubject([]);
-        this._numColumns = new BehaviorSubject(this.defaultNumColumns);
-        this._viewContainerRefSubject = new BehaviorSubject(undefined);
-        this.numColumns$ = this._numColumns.asObservable();
-        // Widget items without preferences
-        const _widgetItems$ = combineLatest([this._widgets, this._viewContainerRefSubject])
-            .pipe(switchMap(([defs, vcr]) => this.createWidgetItems(defs, vcr)));
-        // Widget items with preferences
-        this.widgetItems$ = combineLatest([_widgetItems$, this.numColumns$])
-            .pipe(
-        // Wait until the current tick is done, incase both the widgets and
-        // number of columns are set durring the same tick. Without the audit,
-        // this would get called twice when the component is initialized with
-        // both inputs set one after the other individually.
-        auditTime(0), switchMap(([items, numColumns]) => this._preferences.selectLayout(this.preferenceKey, this._layoutName(numColumns)).pipe(map(layout => layout ? this.withLayoutPreferences(items, layout) : items))), shareReplay({ bufferSize: 1, refCount: true }));
-        this.widgetColumns$ = this.widgetItems$
-            .pipe(map(items => this.toColumnRecords(items)), shareReplay({ bufferSize: 1, refCount: true }));
-    }
-    _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 => (Object.assign(Object.assign({}, def), { col: def.col || this.defaultColumn, order: def.order || 0, portal, __itemDef: def }))));
-    }
-    createWidgetPortal(def, vcr) {
-        var _a;
-        const injector = Injector.create({ providers: [
-                { provide: THESEAM_WIDGET_DATA, useValue: { widgetId: def.widgetId } }
-            ], parent: (_a = this._viewContainerRefSubject.value) === null || _a === void 0 ? void 0 : _a.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, componentFactory /* ComponentFactoryBoundToModule */.ngModule.componentFactoryResolver);
-            }), take(1));
-        }
-        return def.componentFactoryResolver
-            ? of(new ComponentPortal(def.component, undefined, injector, def.componentFactoryResolver))
-            : 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(Object.assign(Object.assign({}, item), (itemPref || {})));
-        }
-        return _items;
-    }
-    savePreferences() {
-        // Right now the items are moved between the column record arrays, but the
-        // 'col' prop is not updated, so it is mapped to corrected items here from
-        // the column records.
-        const items$ = this.widgetColumns$.pipe(map(columns => []
-            .concat(...(columns.map(c => c.items.map(itm => (Object.assign(Object.assign({}, itm), { col: c.column }))))))));
-        return combineLatest([items$, this.numColumns$]).pipe(auditTime(0), take(1), switchMap(([items, numColumns]) => {
-            return this._preferences.updateLayout(this.preferenceKey, {
-                name: this._layoutName(numColumns),
-                items
-            });
-        }), mapTo(undefined));
-    }
-}
-DashboardWidgetsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetsService, deps: [{ token: i1$1.TheSeamDynamicComponentLoader }, { token: DashboardWidgetsPreferencesService }], target: i0.ɵɵFactoryTarget.Injectable });
-DashboardWidgetsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.TheSeamDynamicComponentLoader }, { type: DashboardWidgetsPreferencesService }]; } });
-
-class DashboardWidgetsComponent {
-    get gapSize() { return this._gapSize.value; }
-    set gapSize(val) {
-        this._gapSize.next(coerceNumberProperty(val));
-    }
-    get dragToggleVisible() { return this._dragToggleVisible.value; }
-    set dragToggleVisible(val) {
-        this._dragToggleVisible.next(coerceBooleanProperty(val));
-    }
-    get numColumns() { return this._dashboardWidgets.numColumns; }
-    set numColumns(val) {
-        this._dashboardWidgets.numColumns = coerceNumberProperty(val);
-    }
-    set widgets(value) { this._dashboardWidgets.widgets = value || []; }
-    get widgets() { return this._dashboardWidgets.widgets; }
-    constructor(_dashboardWidgets, _viewContainerRef, _cdr, _baseLayoutRef) {
-        this._dashboardWidgets = _dashboardWidgets;
-        this._viewContainerRef = _viewContainerRef;
-        this._cdr = _cdr;
-        this._baseLayoutRef = _baseLayoutRef;
-        this.faLock = faLock;
-        this.faUnlock = faUnlock;
-        this._actionWidgetDragToggleName = 'widget-drag-toggle';
-        this._ngUnsubscribe = new Subject();
-        this._gapSize = new BehaviorSubject(30);
-        this.widgetsDraggable = false;
-        this._dragToggleVisible = new BehaviorSubject(true);
-        this._containers = new BehaviorSubject([]);
-        this._layoutChange = new Subject();
-        this.widgetsChange = new EventEmitter();
-        this._widthChange = new Subject();
-        this._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() {
-        var _a;
-        if (this._baseLayoutRef) {
-            this._dragToggleVisible.pipe(distinctUntilChanged(), tap(visible => {
-                const isRegistered = this._isActionToggleActionRegistered();
-                if (visible && !isRegistered) {
-                    this._registerToggleAction();
-                }
-                else if (!visible && isRegistered) {
-                    this._unregisterToggleAction();
-                }
-            }), takeUntil(this._ngUnsubscribe)).subscribe();
-        }
-        (_a = this.containers) === null || _a === void 0 ? void 0 : _a.changes.pipe(startWith(undefined), map(() => { var _a; return ((_a = this.containers) === null || _a === void 0 ? void 0 : _a.toArray()) || []; }), takeUntil(this._ngUnsubscribe), finalize(() => this._containers.next([]))).subscribe(v => this._containers.next(v));
-    }
-    _registerToggleAction() {
-        if (this._baseLayoutRef) {
-            // This should probably use a component dynamically created from the
-            // config and return a ref to it, instead of using a template.
-            if (this._toggleBtnTpl) {
-                this._baseLayoutRef.registerAction({
-                    // type: 'button',
-                    type: 'template',
-                    name: this._actionWidgetDragToggleName,
-                    label: 'Toggle Widget Dragging',
-                    // exec: () => {
-                    //   console.log('toggle')
-                    // },
-                    template: this._toggleBtnTpl
-                });
-            }
-        }
-    }
-    _unregisterToggleAction() {
-        if (this._baseLayoutRef) {
-            this._baseLayoutRef.unregisterAction(this._actionWidgetDragToggleName);
-        }
-    }
-    _isActionToggleActionRegistered() {
-        if (!this._baseLayoutRef) {
-            return false;
-        }
-        return this._baseLayoutRef.isActionRegistered(this._actionWidgetDragToggleName);
-    }
-    drop(event) {
-        if (event.previousContainer === event.container) {
-            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-            this._dashboardWidgets.updateOrder().subscribe(() => this._layoutChange.next());
-        }
-        else {
-            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
-            this._dashboardWidgets.updateOrder().subscribe(() => this._layoutChange.next());
-        }
-    }
-    _containerTrackByFn(index, item) {
-        return item.widgetId;
-    }
-    _columnsTrackByFn(index, record) {
-        return record.column;
-    }
-    toggleDragging() {
-        this.widgetsDraggable = !this.widgetsDraggable;
-        this._cdr.detectChanges();
-    }
-    _resized(event) {
-        this._widthChange.next(event.size.width);
-    }
-}
-DashboardWidgetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetsComponent, deps: [{ token: DashboardWidgetsService }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: THESEAM_BASE_LAYOUT_REF, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DashboardWidgetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardWidgetsComponent, selector: "seam-dashboard-widgets", inputs: { gapSize: "gapSize", widgetsDraggable: "widgetsDraggable", dragToggleVisible: "dragToggleVisible", numColumns: "numColumns", widgets: "widgets" }, outputs: { widgetsChange: "widgetsChange" }, providers: [
-        {
-            provide: THESEAM_WIDGET_ACCESSOR,
-            // tslint:disable-next-line:no-use-before-declare
-            useExisting: forwardRef(() => DashboardWidgetsComponent)
-        },
-        {
-            provide: THESEAM_DASHBOARD_WIDGETS_ACCESSOR,
-            // tslint:disable-next-line:no-use-before-declare
-            useExisting: forwardRef(() => DashboardWidgetsComponent)
-        },
-    ], viewQueries: [{ propertyName: "_toggleBtnTpl", first: true, predicate: ["toggleBtnTpl"], descendants: true, static: true }, { propertyName: "containers", predicate: DashboardWidgetContainerComponent, descendants: true }, { propertyName: "cdkDragDirectives", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<!--\n  This is an ugly trick I am using to render the component into an <ng-content>\n  wrapped in an <ng-template> to move the component to different outlets without\n  reinitializing it. This way the widget won't reload when moving between\n  columns. When I remember how I programatically did this I will remove this\n  weirdness.\n -->\n <seam-dashboard-widget-container *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\" [def]=\"$any(item)\">\n  <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n  <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n  style=\"flex: 1410px;\"\n  [style.padding.px]=\"_gapStyleSize$ | async\"\n  (seamElemResized)=\"_resized($event)\"\n  cdkDropListGroup>\n  <div *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n    class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n    cdkDropList\n    [cdkDropListData]=\"col.items\"\n    (cdkDropListDropped)=\"drop($any($event))\">\n    <div *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n      class=\"dashboard-widgets-list-item\"\n      [attr.data-widget-id]=\"item.widgetId\"\n      cdkDrag\n      [cdkDragDisabled]=\"!widgetsDraggable\">\n      <div [style.margin.px]=\"_gapStyleSize$ | async\">\n        <seam-dashboard-widget-template-container [item]=\"item\"></seam-dashboard-widget-template-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n  <button seamButton theme=\"baselayout-action\" title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\" (click)=\"toggleDragging()\">\n    <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n  </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i4$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i6.ElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"] }, { kind: "component", type: DashboardWidgetContainerComponent, selector: "seam-dashboard-widget-container", inputs: ["def"] }, { kind: "component", type: DashboardWidgetTemplateContainerComponent, selector: "seam-dashboard-widget-template-container", inputs: ["item"] }, { kind: "directive", type: DashboardWidgetPortalOutletDirective, selector: "[seamDashboardWidgetPortalOutlet]", inputs: ["seamDashboardWidgetPortalOutlet"], outputs: ["attached"], exportAs: ["seamDashboardWidgetPortalOutlet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-__decorate([
-    InputBoolean()
-], DashboardWidgetsComponent.prototype, "widgetsDraggable", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'seam-dashboard-widgets', providers: [
-                        {
-                            provide: THESEAM_WIDGET_ACCESSOR,
-                            // tslint:disable-next-line:no-use-before-declare
-                            useExisting: forwardRef(() => DashboardWidgetsComponent)
-                        },
-                        {
-                            provide: THESEAM_DASHBOARD_WIDGETS_ACCESSOR,
-                            // tslint:disable-next-line:no-use-before-declare
-                            useExisting: forwardRef(() => DashboardWidgetsComponent)
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n  This is an ugly trick I am using to render the component into an <ng-content>\n  wrapped in an <ng-template> to move the component to different outlets without\n  reinitializing it. This way the widget won't reload when moving between\n  columns. When I remember how I programatically did this I will remove this\n  weirdness.\n -->\n <seam-dashboard-widget-container *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\" [def]=\"$any(item)\">\n  <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n  <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n  style=\"flex: 1410px;\"\n  [style.padding.px]=\"_gapStyleSize$ | async\"\n  (seamElemResized)=\"_resized($event)\"\n  cdkDropListGroup>\n  <div *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n    class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n    cdkDropList\n    [cdkDropListData]=\"col.items\"\n    (cdkDropListDropped)=\"drop($any($event))\">\n    <div *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n      class=\"dashboard-widgets-list-item\"\n      [attr.data-widget-id]=\"item.widgetId\"\n      cdkDrag\n      [cdkDragDisabled]=\"!widgetsDraggable\">\n      <div [style.margin.px]=\"_gapStyleSize$ | async\">\n        <seam-dashboard-widget-template-container [item]=\"item\"></seam-dashboard-widget-template-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n  <button seamButton theme=\"baselayout-action\" title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\" (click)=\"toggleDragging()\">\n    <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n  </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: DashboardWidgetsService }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [THESEAM_BASE_LAYOUT_REF]
-                    }] }];
-    }, propDecorators: { gapSize: [{
-                type: Input
-            }], widgetsDraggable: [{
-                type: Input
-            }], dragToggleVisible: [{
-                type: Input
-            }], numColumns: [{
-                type: Input
-            }], widgets: [{
-                type: Input
-            }], containers: [{
-                type: ViewChildren,
-                args: [DashboardWidgetContainerComponent]
-            }], cdkDragDirectives: [{
-                type: ViewChildren,
-                args: [CdkDrag]
-            }], _toggleBtnTpl: [{
-                type: ViewChild,
-                args: ['toggleBtnTpl', { static: true }]
-            }], widgetsChange: [{
-                type: Output
-            }] } });
-
-class DashboardComponent {
-    constructor() {
-        this.widgetsDraggable = true;
-    }
-}
-DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardComponent, selector: "seam-dashboard", inputs: { widgets: "widgets", widgetsDraggable: "widgetsDraggable" }, ngImport: i0, template: "<seam-dashboard-widgets [widgets]=\"widgets\" [widgetsDraggable]=\"widgetsDraggable\"></seam-dashboard-widgets>\n", styles: [""], dependencies: [{ kind: "component", type: DashboardWidgetsComponent, selector: "seam-dashboard-widgets", inputs: ["gapSize", "widgetsDraggable", "dragToggleVisible", "numColumns", "widgets"], outputs: ["widgetsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-__decorate([
-    InputBoolean()
-], DashboardComponent.prototype, "widgetsDraggable", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'seam-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<seam-dashboard-widgets [widgets]=\"widgets\" [widgetsDraggable]=\"widgetsDraggable\"></seam-dashboard-widgets>\n" }]
-        }], propDecorators: { widgets: [{
-                type: Input
-            }], widgetsDraggable: [{
-                type: Input
-            }] } });
-
-class TheSeamDashboardModule {
-}
-TheSeamDashboardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheSeamDashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TheSeamDashboardModule, declarations: [DashboardComponent,
-        DashboardWidgetsComponent,
-        DashboardWidgetContainerComponent,
-        DashboardWidgetTemplateContainerComponent,
-        DashboardWidgetPortalOutletDirective], imports: [CommonModule,
-        PortalModule,
-        DragDropModule,
-        TheSeamButtonsModule,
-        TheSeamIconModule,
-        TheSeamSharedModule], exports: [DashboardComponent,
-        DashboardWidgetsComponent,
-        DashboardWidgetPortalOutletDirective] });
-TheSeamDashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamDashboardModule, imports: [CommonModule,
-        PortalModule,
-        DragDropModule,
-        TheSeamButtonsModule,
-        TheSeamIconModule,
-        TheSeamSharedModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamDashboardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        DashboardComponent,
-                        DashboardWidgetsComponent,
-                        DashboardWidgetContainerComponent,
-                        DashboardWidgetTemplateContainerComponent,
-                        DashboardWidgetPortalOutletDirective
-                    ],
-                    imports: [
-                        CommonModule,
-                        PortalModule,
-                        DragDropModule,
-                        TheSeamButtonsModule,
-                        TheSeamIconModule,
-                        TheSeamSharedModule
-                    ],
-                    exports: [
-                        DashboardComponent,
-                        DashboardWidgetsComponent,
-                        DashboardWidgetPortalOutletDirective
-                    ]
-                }]
-        }] });
-
-const THESEAM_SIDE_NAV_ACCESSOR = new InjectionToken('THESEAM_SIDE_NAV_ACCESSOR');
-const 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 {
-    set link(value) { this._link.next(value); }
-    get link() { return this._link.value; }
-    set expanded(value) { this._expanded.next(coerceBooleanProperty(value)); }
-    get expanded() { return this._expanded.value; }
-    set compact(value) { this._compact.next(coerceBooleanProperty(value)); }
-    get compact() { return this._compact.value; }
-    get badgeTooltip() { return this._badgeTooltip; }
-    set badgeTooltip(value) {
-        if (value !== null && value !== undefined) {
-            if (typeof value === 'string') {
-                this._badgeTooltip = {
-                    tooltip: value,
-                    placement: 'auto',
-                    container: 'body',
-                    disabled: false
-                };
-            }
-            else {
-                this._badgeTooltip = Object.assign(Object.assign({}, value), { placement: value.placement || 'auto', container: value.container || 'body', disabled: typeof (value === null || value === void 0 ? void 0 : value.disabled) === 'boolean'
-                        ? value.disabled
-                        : typeof value.tooltip === 'string' });
-            }
-        }
-        else {
-            this._badgeTooltip = undefined;
-        }
-    }
-    get _isActiveCssClass() { return this.active; }
-    get _isClickableWhenActiveCssClass() { return this.activeNavigatable; }
-    get _attrDataHierLevel() { return this.hierLevel; }
-    constructor(_sideNav) {
-        this._sideNav = _sideNav;
-        this._ngUnsubscribe = new Subject();
-        this.faAngleLeft = faAngleLeft;
-        this._linkHistoryState = { seamReload: true, triggeredByNavBar: true };
-        this.active = false;
-        this.activeNavigatable = false;
-        this._link = new BehaviorSubject(undefined);
-        this.link$ = this._link.asObservable();
-        this.hierLevel = 0;
-        this.indentSize = 10;
-        this._expanded = new BehaviorSubject(false);
-        this.expanded$ = this._expanded.asObservable();
-        this._compact = new BehaviorSubject(false);
-        this.compact$ = this._compact.asObservable();
-        this.badgeTheme = 'danger';
-        this.childGroupAnimState$ = this.expanded$
-            .pipe(map$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;
-    }
-}
-SideNavItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SideNavItemComponent, deps: [{ token: THESEAM_SIDE_NAV_ACCESSOR }], target: i0.ɵɵFactoryTarget.Component });
-SideNavItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\"\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    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\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        [ngbTooltip]=\"label\"\n        [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n        [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n        [container]=\"$any(menuItemTooltipConfig)?.container\"\n        [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\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      [ngbTooltip]=\"$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 #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"], dependencies: [{ kind: "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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i4$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], 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: "15.2.10", 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,
-                        NgbTooltipModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, 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    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\"\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    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\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        [ngbTooltip]=\"label\"\n        [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n        [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n        [container]=\"$any(menuItemTooltipConfig)?.container\"\n        [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\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      [ngbTooltip]=\"$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 #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [THESEAM_SIDE_NAV_ACCESSOR]
-                    }] }];
-    }, 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 {
-    constructor() {
-        this.expanded = false;
-        this.toggleExpand = new EventEmitter();
-    }
-    toggle() {
-        this.toggleExpand.emit();
-    }
-}
-SideNavToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SideNavToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideNavToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2$1.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-__decorate([
-    InputBoolean()
-], SideNavToggleComponent.prototype, "expanded", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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, standalone: true, 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) {
-    var _a, _b;
-    return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.active) !== null && _b !== void 0 ? _b : false;
-}
-function isExpanded(item) {
-    var _a, _b;
-    return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.expanded) !== null && _b !== void 0 ? _b : false;
-}
-function hasChildren(item) {
-    return canHaveChildren(item) && hasProperty(item, 'children') && item.children.length > 0;
-}
-function canHaveChildren(item) {
-    return isNavItemType(item, 'basic') || isNavItemType(item, 'link');
-}
-function hasActiveChild(item) {
-    if (!hasChildren(item)) {
-        return false;
-    }
-    for (const child of item.children) {
-        if (getItemStateProp(child, 'active')) {
-            return true;
-        }
-    }
-    return false;
-}
-function hasExpandedChild(item) {
-    if (!hasChildren(item)) {
-        return false;
-    }
-    for (const child of item.children) {
-        if (getItemStateProp(child, 'expanded')) {
-            return true;
-        }
-    }
-    return false;
-}
-function canBeActive(item) {
-    return isNavItemType(item, '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 {
-    constructor(_router) {
-        this._router = _router;
-        this._updatingCount = new BehaviorSubject(0);
-        this.itemChanged = new Subject();
-        this.loading$ = this._updatingCount.pipe(map(count => count > 0), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
-    }
-    createItemsObservable(items) {
-        return defer(() => {
-            this.updateItemsStates(items);
-            return new Observable((subscriber) => {
-                const stateChangeSub = this.itemChanged.pipe(switchMap(() => this.loading$.pipe(filter(loading => !loading)))).subscribe(() => {
-                    subscriber.next(items);
-                });
-                try {
-                    this.updateItemsStates(items);
-                }
-                catch (err) {
-                    subscriber.error(err);
-                }
-                // const linkItems = findLinkItems(items)
-                const routeChangeSub = this._router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
-                    try {
-                        this.updateItemsStates(items);
-                    }
-                    catch (err) {
-                        subscriber.error(err);
-                    }
-                });
-                return () => {
-                    stateChangeSub.unsubscribe();
-                    routeChangeSub.unsubscribe();
-                };
-            }).pipe(startWith(items));
-        });
-    }
-    _incUpdatingCount() {
-        this._updatingCount.next(this._updatingCount.value + 1);
-    }
-    _decrUpdatingCount() {
-        this._updatingCount.next(this._updatingCount.value - 1);
-    }
-    updateItemsStates(items) {
-        this._incUpdatingCount();
-        try {
-            for (const item of items) {
-                if (hasChildren(item)) {
-                    this.updateItemsStates(item.children);
-                }
-                this.updateItemState(item);
-            }
-            this._decrUpdatingCount();
-        }
-        catch (err) {
-            this._decrUpdatingCount();
-            throw err;
-        }
-    }
-    updateItemState(item) {
-        this._incUpdatingCount();
-        try {
-            setDefaultState(item);
-            if (isNavItemType(item, 'link')) {
-                const url = this._getUrl(item);
-                if (notNullOrUndefined(url)) {
-                    const opts = this._getMatchOptions(item);
-                    this.setItemStateProp(item, 'active', this._router.isActive(url, opts));
-                }
-            }
-            // TODO: Implement this in a more optimized way. Unless our apps start
-            // having large side-navs constantly updating their state, this shouldn't
-            // have much impact on performance.
-            this._updateItemExpandedState(item);
-            this._decrUpdatingCount();
-        }
-        catch (err) {
-            this._decrUpdatingCount();
-            throw err;
-        }
-    }
-    _updateItemsExpandedState(items) {
-        for (const item of items) {
-            if (hasChildren(item)) {
-                this._updateItemsExpandedState(item.children);
-            }
-            this._updateItemExpandedState(item);
-        }
-    }
-    _updateItemExpandedState(item) {
-        if (!canExpand(item)) {
-            if (getItemStateProp(item, 'expanded')) {
-                this.setItemStateProp(item, 'expanded', false);
-            }
-            return;
-        }
-        if (hasChildren(item)) {
-            this._updateItemsExpandedState(item.children);
-        }
-        if (hasActiveChild(item) || hasExpandedChild(item)) {
-            if (!getItemStateProp(item, 'expanded')) {
-                this.setItemStateProp(item, 'expanded', true);
-            }
-        }
-        else {
-            if (getItemStateProp(item, 'expanded')) {
-                this.setItemStateProp(item, 'expanded', false);
-            }
-        }
-    }
-    _getNavExtras(item) {
-        const navigationExtras = {};
-        if (hasProperty(item, 'queryParams')) {
-            navigationExtras.queryParams = item.queryParams;
-        }
-        if (hasProperty(item, 'fragment')) {
-            navigationExtras.fragment = item.fragment;
-        }
-        if (hasProperty(item, 'queryParamsHandling')) {
-            navigationExtras.queryParamsHandling = item.queryParamsHandling;
-        }
-        if (hasProperty(item, 'preserveFragment')) {
-            navigationExtras.preserveFragment = item.preserveFragment;
-        }
-        return navigationExtras;
-    }
-    _getUrl(item) {
-        const link = item.link;
-        if (typeof link === 'string') {
-            return this._router.createUrlTree([link], this._getNavExtras(item)).toString();
-        }
-        else if (Array.isArray(link)) {
-            return this._router.createUrlTree(link, this._getNavExtras(item)).toString();
-        }
-        return null;
-    }
-    _getMatchOptions(item) {
-        const defaultMatchOpts = {
-            paths: 'subset',
-            queryParams: 'subset',
-            fragment: 'ignored',
-            matrixParams: 'ignored'
-        };
-        if (hasProperty(item, 'matchOptions')) {
-            return Object.assign(Object.assign({}, defaultMatchOpts), item.matchOptions);
-        }
-        return defaultMatchOpts;
-    }
-    setItemStateProp(item, prop, value) {
-        const currentValue = getItemStateProp(item, prop);
-        if (currentValue !== value) {
-            setItemStateProp(item, prop, value);
-            const changed = {
-                item,
-                prop,
-                prevValue: currentValue,
-                newValue: value
-            };
-            this.itemChanged.next(changed);
-        }
-    }
-}
-TheSeamSideNavService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSideNavService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-TheSeamSideNavService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSideNavService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSideNavService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }]; } });
-
-const EXPANDED_STATE = 'expanded';
-const COLLAPSED_STATE = 'collapsed';
-const EXPANDED_OVERLAY_STATE = 'expanded-overlay';
-const COLLAPSED_OVERLAY_STATE = 'collapsed-overlay';
-const EXPANDED_STATES = [EXPANDED_STATE, EXPANDED_OVERLAY_STATE];
-const COLLAPSED_STATES = [COLLAPSED_STATE, COLLAPSED_OVERLAY_STATE];
-const EXPAND_STATES = [...EXPANDED_STATES, ...COLLAPSED_STATES];
-function sideNavExpandStateChangeFn(fromState, toState) {
-    // console.log({ fromState, toState })
-    return fromState !== toState &&
-        (
-        // NOTE: The current way the side nav is being used it causes the
-        // component to sometimes get placed in the wrong location initially. It
-        // is fast enough to not be noticed without an initial animation usually,
-        // so it is commented out below until the initial placement issue it
-        // fixed.
-        //
-        // (
-        //   fromState === 'void' && EXPAND_STATES.indexOf(toState) !== -1
-        //   ||
-        //   toState === 'void' && EXPAND_STATES.indexOf(fromState) !== -1
-        // )
-        // ||
-        ((EXPANDED_STATES.indexOf(fromState) !== -1 && COLLAPSED_STATES.indexOf(toState) !== -1) ||
-            (EXPANDED_STATES.indexOf(toState) !== -1 && COLLAPSED_STATES.indexOf(fromState) !== -1)));
-}
-class SideNavComponent {
-    get items() { return this._items.value; }
-    set items(value) { this._items.next(value); }
-    get expanded() { return this._expanded.value; }
-    set expanded(value) {
-        const expanded = coerceBooleanProperty(value);
-        const emit = expanded !== this.expanded;
-        this._expanded.next(expanded);
-        if (emit) {
-            this.toggleExpand.emit(coerceBooleanProperty(value));
-        }
-    }
-    get overlay() { return this._overlay.value; }
-    set overlay(value) { this._overlay.next(coerceBooleanProperty(value)); }
-    get menuItemTooltipConfig() { return this._menuItemTooltipConfig; }
-    set menuItemTooltipConfig(value) {
-        this._menuItemTooltipConfig = {
-            class: value === null || value === void 0 ? void 0 : value.class,
-            placement: (value === null || value === void 0 ? void 0 : value.placement) || this._menuItemTooltipConfig.placement,
-            container: (value === null || value === void 0 ? void 0 : value.container) || this._menuItemTooltipConfig.container,
-            behavior: (value === null || value === void 0 ? void 0 : value.behavior) || this._menuItemTooltipConfig.behavior
-        };
-    }
-    constructor(_viewContainerRef, _layout, _sideNav, _config, _baseLayoutRef) {
-        this._viewContainerRef = _viewContainerRef;
-        this._layout = _layout;
-        this._sideNav = _sideNav;
-        this._config = _config;
-        this._baseLayoutRef = _baseLayoutRef;
-        this._ngUnsubscribe = new Subject();
-        this.faBars = faBars;
-        // @HostBinding('@sideNavExpand') _sideNavExpand = EXPANDED_STATE
-        // _sideNavExpand = EXPANDED_STATE
-        // @HostBinding('@sideNavAnim') _sideNavExpand = EXPANDED_STATE
-        this._sideNavExpand = 'initial';
-        this.hasHeaderToggle = true;
-        this.toggleIcon = faBars;
-        this._items = new BehaviorSubject([]);
-        this.indentSize = 10;
-        this._expanded = new BehaviorSubject(true);
-        this.expanded$ = this._expanded.asObservable();
-        this.expandOrigin = 'left';
-        this.expandHeight = '100%';
-        this.expandWidth = 'calc(100vw - 50px)';
-        this._overlay = new BehaviorSubject(false);
-        this.overlay$ = this._overlay.asObservable();
-        this._menuItemTooltipConfig = {
-            placement: 'right',
-            container: 'body',
-            behavior: 'always'
-        };
-        this.toggleExpand = new EventEmitter();
-        this._backdropHidden = new BehaviorSubject(true);
-        const config = Object.assign(Object.assign({}, 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]) => {
-            var _a, _b, _c;
-            // never display tooltip on mobile, it breaks the layout
-            if (overlay) {
-                return true;
-            }
-            return ((_a = this.menuItemTooltipConfig) === null || _a === void 0 ? void 0 : _a.behavior) === 'always' ? false
-                : ((_b = this.menuItemTooltipConfig) === null || _b === void 0 ? void 0 : _b.behavior) === 'never' ? true
-                    : ((_c = this.menuItemTooltipConfig) === null || _c === void 0 ? void 0 : _c.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;
-        }
-    }
-}
-SideNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SideNavComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.TheSeamLayoutService }, { token: TheSeamSideNavService }, { token: THESEAM_SIDE_NAV_CONFIG, optional: true }, { token: THESEAM_BASE_LAYOUT_REF, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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\"\r\n  [@sideNavBackdrop]=\"_sideNavExpand\"\r\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"\r\n  (click)=\"collapse()\"></div>\r\n\r\n<div\r\n  class=\"side-nav-inner-wrapper\"\r\n  [@sideNavExpand]=\"{\r\n    value: _sideNavExpand,\r\n    params: {\r\n      origin: expandOriginTransform,\r\n      height: expandHeight,\r\n      width: expandWidth\r\n    }\r\n  }\"\r\n  (@sideNavExpand.start)=\"animateStart()\"\r\n  (@sideNavExpand.done)=\"animateEnd()\">\r\n  <nav class=\"nav side-nav-content\">\r\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\r\n      [toggleIcon]=\"toggleIcon\"\r\n      [toggleTpl]=\"toggleTpl\"\r\n      [expanded]=\"expanded$ | async\"\r\n      (toggleExpand)=\"toggle()\">\r\n      <ng-template [cdkPortalOutlet]=\"_sideBarHeaderPortal\"></ng-template>\r\n    </seam-side-nav-toggle>\r\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\r\n      <div class=\"side-nav--group side-nav--group--level-0\">\r\n        <seam-side-nav-item *ngFor=\"let item of items$ | async\"\r\n          [compact]=\"!(expanded$ | async)\"\r\n          [isMobile]=\"isMobile$ | async\"\r\n          [itemType]=\"$any(item)?.itemType\"\r\n          [icon]=\"$any(item)?.icon\"\r\n          [label]=\"$any(item)?.label\"\r\n          [link]=\"$any(item)?.link\"\r\n          [badgeText]=\"$any(item)?.badge?.text\"\r\n          [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\r\n          [badgeSrContent]=\"$any(item)?.badge?.srContent\"\r\n          [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\r\n          [queryParams]=\"$any(item)?.queryParams\"\r\n          [children]=\"$any(item)?.children\"\r\n          [active]=\"$any(item).__state?.active\"\r\n          [expanded]=\"$any(item).__state?.expanded\"\r\n          [hideEmptyIcon]=\"hideEmptyIcon\"\r\n          [indentSize]=\"indentSize\"\r\n          [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\r\n          [menuItemTooltipDisabled]=\"menuItemTooltipDisabled$ | async\">\r\n          [activeNavigatable]=\"$any(item).activeNavigatable\">\r\n        </seam-side-nav-item>\r\n      </div>\r\n    </div>\r\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\r\n  </nav>\r\n</div>\r\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: TheSeamScrollbarModule }, { kind: "directive", type: i4.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "ngmodule", type: TheSeamLayoutModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "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"] }], 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: "15.2.10", 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,
-                        TheSeamScrollbarModule,
-                        TheSeamLayoutModule,
-                        PortalModule,
-                        SideNavItemComponent,
-                        SideNavToggleComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\r\n  [@sideNavBackdrop]=\"_sideNavExpand\"\r\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"\r\n  (click)=\"collapse()\"></div>\r\n\r\n<div\r\n  class=\"side-nav-inner-wrapper\"\r\n  [@sideNavExpand]=\"{\r\n    value: _sideNavExpand,\r\n    params: {\r\n      origin: expandOriginTransform,\r\n      height: expandHeight,\r\n      width: expandWidth\r\n    }\r\n  }\"\r\n  (@sideNavExpand.start)=\"animateStart()\"\r\n  (@sideNavExpand.done)=\"animateEnd()\">\r\n  <nav class=\"nav side-nav-content\">\r\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\r\n      [toggleIcon]=\"toggleIcon\"\r\n      [toggleTpl]=\"toggleTpl\"\r\n      [expanded]=\"expanded$ | async\"\r\n      (toggleExpand)=\"toggle()\">\r\n      <ng-template [cdkPortalOutlet]=\"_sideBarHeaderPortal\"></ng-template>\r\n    </seam-side-nav-toggle>\r\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\r\n      <div class=\"side-nav--group side-nav--group--level-0\">\r\n        <seam-side-nav-item *ngFor=\"let item of items$ | async\"\r\n          [compact]=\"!(expanded$ | async)\"\r\n          [isMobile]=\"isMobile$ | async\"\r\n          [itemType]=\"$any(item)?.itemType\"\r\n          [icon]=\"$any(item)?.icon\"\r\n          [label]=\"$any(item)?.label\"\r\n          [link]=\"$any(item)?.link\"\r\n          [badgeText]=\"$any(item)?.badge?.text\"\r\n          [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\r\n          [badgeSrContent]=\"$any(item)?.badge?.srContent\"\r\n          [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\r\n          [queryParams]=\"$any(item)?.queryParams\"\r\n          [children]=\"$any(item)?.children\"\r\n          [active]=\"$any(item).__state?.active\"\r\n          [expanded]=\"$any(item).__state?.expanded\"\r\n          [hideEmptyIcon]=\"hideEmptyIcon\"\r\n          [indentSize]=\"indentSize\"\r\n          [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\r\n          [menuItemTooltipDisabled]=\"menuItemTooltipDisabled$ | async\">\r\n          [activeNavigatable]=\"$any(item).activeNavigatable\">\r\n        </seam-side-nav-item>\r\n      </div>\r\n    </div>\r\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\r\n  </nav>\r\n</div>\r\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ViewContainerRef }, { type: i1.TheSeamLayoutService }, { type: TheSeamSideNavService }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [THESEAM_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 {
-}
-TheSeamSideNavModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheSeamSideNavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSideNavModule, imports: [SideNavItemComponent,
-        SideNavComponent,
-        SideNavToggleComponent], exports: [SideNavItemComponent,
-        SideNavComponent,
-        SideNavToggleComponent] });
-TheSeamSideNavModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSideNavModule, imports: [SideNavItemComponent,
-        SideNavComponent,
-        SideNavToggleComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 {
-    constructor() {
-        super(...arguments);
-        this.faAngleDown = faAngleDown;
-        this.compact = false;
-    }
-    get _hasCompactClass() { return this.compact; }
-    get _hasPadding0Class() { return this.compact; }
-    get _hasRoundedClass() { return this.compact; }
-    get _hasBtnLinkClass() { return !this.compact; }
-}
-TopBarMenuButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TopBarMenuButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TopBarMenuButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TopBarMenuButtonComponent, 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-__decorate([
-    InputBoolean()
-], TopBarMenuButtonComponent.prototype, "compact", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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, 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 {
-}
-TopBarTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TopBarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TopBarTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TopBarTitleComponent, selector: "seam-top-bar-title", inputs: { titleText: "titleText", subTitleText: "subTitleText" }, ngImport: i0, template: "<h2 class=\"mb-0\" [ngStyle]=\"{ 'font-size.px': 32 }\" [ngStyle.lt-md]=\"{ 'font-size.px': 26 }\" [ngStyle.lt-sm]=\"{ 'font-size.px': 20, 'line-height': 1 }\">\n  {{ titleText }}\n  <br fxHide.gt-sm>\n  <small *ngIf=\"subTitleText\" class=\"text-muted\">{{ subTitleText }}</small>\n</h2>\n", styles: ["seam-top-bar-title{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i2$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TopBarTitleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'seam-top-bar-title', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<h2 class=\"mb-0\" [ngStyle]=\"{ 'font-size.px': 32 }\" [ngStyle.lt-md]=\"{ 'font-size.px': 26 }\" [ngStyle.lt-sm]=\"{ 'font-size.px': 20, 'line-height': 1 }\">\n  {{ titleText }}\n  <br fxHide.gt-sm>\n  <small *ngIf=\"subTitleText\" class=\"text-muted\">{{ subTitleText }}</small>\n</h2>\n", styles: ["seam-top-bar-title{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}\n"] }]
-        }], propDecorators: { titleText: [{
-                type: Input
-            }], subTitleText: [{
-                type: Input
-            }] } });
-
-class TopBarCompactMenuBtnDetailDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-TopBarCompactMenuBtnDetailDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TopBarCompactMenuBtnDetailDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TopBarCompactMenuBtnDetailDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TopBarCompactMenuBtnDetailDirective, selector: "[seamTopBarCompactMenuBtnDetail]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TopBarCompactMenuBtnDetailDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[seamTopBarCompactMenuBtnDetail]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
-class TopBarNavToggleBtnDetailDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-TopBarNavToggleBtnDetailDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TopBarNavToggleBtnDetailDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TopBarNavToggleBtnDetailDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TopBarNavToggleBtnDetailDirective, selector: "[seamTopBarNavToggleBtnDetail]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TopBarNavToggleBtnDetailDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[seamTopBarNavToggleBtnDetail]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
-class TopBarItemDirective {
-    set seamTopBarItem(value) {
-        this.position = value;
-    }
-    constructor(template) {
-        this.template = template;
-        this.position = 'right';
-    }
-}
-TopBarItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TopBarItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TopBarItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TopBarItemDirective, selector: "[seamTopBarItem]", inputs: { seamTopBarItem: "seamTopBarItem" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TopBarItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[seamTopBarItem]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { seamTopBarItem: [{
-                type: Input
-            }] } });
-
-class TopBarMenuBtnDetailDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-TopBarMenuBtnDetailDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TopBarMenuBtnDetailDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TopBarMenuBtnDetailDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TopBarMenuBtnDetailDirective, selector: "[seamTopBarMenuBtnDetail]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TopBarMenuBtnDetailDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[seamTopBarMenuBtnDetail]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
-class TopBarMenuDirective {
-    constructor(menu) {
-        this.menu = menu;
-    }
-}
-TopBarMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TopBarMenuDirective, deps: [{ token: i3$2.MenuComponent, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-TopBarMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TopBarMenuDirective, selector: "seam-menu[seamTopBarMenu]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TopBarMenuDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'seam-menu[seamTopBarMenu]'
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i3$2.MenuComponent, decorators: [{
-                        type: Self
-                    }] }];
-    } });
-
-/**
- * Top bar of an app.
- *
- * The top bar is fairly opinionated, so most parts are not intended to be
- * customized unless there is an input.
- *
- * > If you have to make a change and apply it externally with a css class or js
- * > make sure there is an issue to get the feature changed, so we don't have
- * > different modifications across our apps. Also, this will help make sure
- * > your change should have even been done.
- */
-class TheSeamTopBarComponent {
-    constructor(_layout) {
-        this._layout = _layout;
-        /** @ignore */
-        this._ngUnsubscribe = new Subject();
-        /** @ignore */
-        this.faBars = faBars;
-        /** Link target used when `logoHref` is specified. Defaults to `"_blank"` */
-        this.logoHrefTarget = '_blank';
-        /** Route to link to when `logo` is clicked. Defaults to `/`. */
-        this.logoRoute = '/';
-        /** Determines if the title should be displayed. */
-        this.hasTitle = false;
-        /** Determines if the top bar button should be displayed. */
-        this.hasTopBarMenuButton = true;
-        /** Icon to display on mobile to activate profile dropdown. Defaults to faUserCircle. */
-        this.profileIcon = faUserCircle;
-        /** Icon to display for mobile nav toggle. Defaults to faBars. */
-        this.toggleIcon = faBars;
-        /** Display nav toggle on either left or right side of top bar. Defaults to left. */
-        this.navToggleAlign = 'left';
-        /** @ignore */
-        this._leftItems = new BehaviorSubject([]);
-        /** Additional templates to display on left side of top bar */
-        this.leftItems$ = this._leftItems.asObservable();
-        /** @ignore */
-        this._centerItems = new BehaviorSubject([]);
-        /** Additional templates to display in center of top bar */
-        this.centerItems$ = this._centerItems.asObservable();
-        /** @ignore */
-        this._rightItems = new BehaviorSubject([]);
-        /** Additional templates to display on right side of top bar */
-        this.rightItems$ = this._rightItems.asObservable();
-        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), takeUntil(this._ngUnsubscribe), map(() => {
-                var _a;
-                const items = ((_a = this._topBarItems) === null || _a === void 0 ? void 0 : _a.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 })).subscribe();
-        }
-    }
-}
-TheSeamTopBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamTopBarComponent, deps: [{ token: i1.TheSeamLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamTopBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TheSeamTopBarComponent, 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:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar--left{flex-grow:1}.top-bar-items{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.DefaultImgSrcDirective, selector: "  img[src.xs],    img[src.sm],    img[src.md],    img[src.lg],   img[src.xl],  img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl],  img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]", inputs: ["src.xs", "src.sm", "src.md", "src.lg", "src.xl", "src.lt-sm", "src.lt-md", "src.lt-lg", "src.lt-xl", "src.gt-xs", "src.gt-sm", "src.gt-md", "src.gt-lg"] }, { kind: "component", type: i4$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "component", type: i2$1.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "directive", type: BaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: ["type", "aria-label"], exportAs: ["seamBaseLayoutNavToggle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TopBarTitleComponent, selector: "seam-top-bar-title", inputs: ["titleText", "subTitleText"] }, { kind: "component", type: TopBarMenuButtonComponent, selector: "button[seamTopBarMenuButton]", inputs: ["disabled", "detailTpl", "compactDetailTpl", "compact", "profileIcon"], exportAs: ["seamButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-__decorate([
-    InputBoolean()
-], TheSeamTopBarComponent.prototype, "hasTitle", void 0);
-__decorate([
-    InputBoolean()
-], TheSeamTopBarComponent.prototype, "hasTopBarMenuButton", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamTopBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'seam-top-bar', encapsulation: ViewEncapsulation.None, exportAs: 'seamTopBar', changeDetection: ChangeDetectionStrategy.OnPush, 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:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar--left{flex-grow:1}.top-bar-items{display:flex;align-items:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.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 {
-}
-TheSeamTopBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamTopBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheSeamTopBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TheSeamTopBarModule, declarations: [TheSeamTopBarComponent,
-        TopBarTitleComponent,
-        TopBarMenuButtonComponent,
-        TopBarMenuDirective,
-        TopBarItemDirective,
-        TopBarMenuBtnDetailDirective,
-        TopBarCompactMenuBtnDetailDirective,
-        TopBarNavToggleBtnDetailDirective], imports: [CommonModule,
-        TheSeamLayoutModule,
-        TheSeamButtonsModule,
-        TheSeamIconModule,
-        TheSeamMenuModule,
-        TheSeamBaseLayoutModule,
-        RouterModule], exports: [TheSeamTopBarComponent,
-        TopBarMenuButtonComponent,
-        TopBarMenuDirective,
-        TheSeamMenuModule,
-        TopBarItemDirective,
-        TopBarMenuBtnDetailDirective,
-        TopBarCompactMenuBtnDetailDirective,
-        TopBarNavToggleBtnDetailDirective] });
-TheSeamTopBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamTopBarModule, imports: [CommonModule,
-        TheSeamLayoutModule,
-        TheSeamButtonsModule,
-        TheSeamIconModule,
-        TheSeamMenuModule,
-        TheSeamBaseLayoutModule,
-        RouterModule, TheSeamMenuModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamTopBarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        TheSeamTopBarComponent,
-                        TopBarTitleComponent,
-                        TopBarMenuButtonComponent,
-                        TopBarMenuDirective,
-                        TopBarItemDirective,
-                        TopBarMenuBtnDetailDirective,
-                        TopBarCompactMenuBtnDetailDirective,
-                        TopBarNavToggleBtnDetailDirective
-                    ],
-                    imports: [
-                        CommonModule,
-                        TheSeamLayoutModule,
-                        TheSeamButtonsModule,
-                        TheSeamIconModule,
-                        TheSeamMenuModule,
-                        TheSeamBaseLayoutModule,
-                        RouterModule
-                    ],
-                    exports: [
-                        TheSeamTopBarComponent,
-                        TopBarMenuButtonComponent,
-                        TopBarMenuDirective,
-                        TheSeamMenuModule,
-                        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 {
-    constructor(_route, _router) {
-        this._route = _route;
-        this._router = _router;
-        this._uid = _uid++;
-        this._ngUnsubscribe = new Subject();
-        this.animState = 'isRight';
-        // animState = ''
-        this.outletActive = false;
-        this.ngContentVisible = true;
-        this._router.events.pipe(filter(event => event instanceof NavigationEnd), 
-        // tap(v => console.log(`_hasChildren()[${this._uid}]`, this._hasChildren())),
-        takeUntil(this._ngUnsubscribe))
-            .subscribe();
-        // routeChanges(this._router)
-        //   .pipe(
-        //     untilDestroyed(this),
-        //     tap(() => {
-        //       // if (this._hasChildren()) {
-        //       //   this.animState = 'isLeft'
-        //       // } else {
-        //       //   this.animState = 'isRight'
-        //       // }
-        //     })
-        //   )
-        //   .subscribe(v => console.log(`routeChanges[${this._uid}]`, v))
-    }
-    ngOnDestroy() {
-        this._ngUnsubscribe.next(undefined);
-        this._ngUnsubscribe.complete();
-    }
-    _hasChildren() {
-        const count = this._route.pathFromRoot.length - 1;
-        let countFull = 0;
-        if (this._router.parseUrl(this._router.url).root.children.primary) {
-            countFull = this._router.parseUrl(this._router.url).root.children.primary.segments.length;
-        }
-        // console.log(`_hasChildren[${this._uid}]`, { count, countFull })
-        return countFull > count;
-    }
-    prepareRoute(outlet) {
-        // console.log(`outlet[${this._uid}]`, outlet, this.animState, this._hasChildren(), this.outletActive)
-        if (outlet.isActivated) {
-            // console.log(outlet.isActivated)
-            // console.log(outlet.component)
-            // console.log(this.animState)
-            return this.animState;
-        }
-        else {
-            return undefined;
-        }
-        // console.log(`prepareRoute[${this._uid}]`, this.animState, this._hasChildren())
-        // console.log('activatedRouteData', outlet && outlet.activatedRouteData)
-        // if (outlet && outlet.isActivated) {
-        //   console.log('activatedRoute', outlet.activatedRoute && outlet.activatedRoute.snapshot.url)
-        // }
-        // return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']
-        // console.log('')
-        // return this.animState
-    }
-    outletActivate(event) {
-        // console.log(`outletActivate[${this._uid}]`, event)
-        this.outletActive = true;
-    }
-    outletDeactivate(event) {
-        // console.log(`outletDeactivate[${this._uid}]`, event)
-        this.outletActive = false;
-    }
-    routeAnimationsStart(event) {
-        // console.log('routeAnimationsStart', event)
-        this.ngContentVisible = true;
-    }
-    routeAnimationsDone(event) {
-        // console.log('routeAnimationsDone', event)
-        this.ngContentVisible = !this.outletActive;
-    }
-}
-HierarchyRouterOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyRouterOutletComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-HierarchyRouterOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HierarchyRouterOutletComponent, selector: "seam-hierarchy-router-outlet", ngImport: i0, template: "<div class=\"h-100\"\n  [@routeAnimations]=\"prepareRoute(outlet)\"\n  (@routeAnimations.start)=\"routeAnimationsStart($event)\"\n  (@routeAnimations.done)=\"routeAnimationsDone($event)\">\n  <div class=\"hierarchy-router-outlet--content h-100\" *ngIf=\"ngContentVisible\">\n    <!-- {{ animState }} -->\n    <div class=\"border border-info h-100\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div class=\"router-container\"\n    [class.h-100]=\"!ngContentVisible\"\n    >\n  <!-- <div [@routeAnimations]=\"animState\"> -->\n  <!-- <div class=\"hierarchy-router-outlet--route-content\"> -->\n    <router-outlet #outlet=\"outlet\"\n      (activate)=\"outletActivate($event)\"\n      (deactivate)=\"outletDeactivate($event)\">\n    </router-outlet>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}:host ::ng-deep router-outlet+*{background-color:#fff;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], animations: [
-        // fader,
-        slider,
-        // transformer,
-        // stepper,
-        // sideToSide
-        // contentLeave
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyRouterOutletComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'seam-hierarchy-router-outlet', animations: [
-                        // fader,
-                        slider,
-                        // transformer,
-                        // stepper,
-                        // sideToSide
-                        // contentLeave
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"h-100\"\n  [@routeAnimations]=\"prepareRoute(outlet)\"\n  (@routeAnimations.start)=\"routeAnimationsStart($event)\"\n  (@routeAnimations.done)=\"routeAnimationsDone($event)\">\n  <div class=\"hierarchy-router-outlet--content h-100\" *ngIf=\"ngContentVisible\">\n    <!-- {{ animState }} -->\n    <div class=\"border border-info h-100\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div class=\"router-container\"\n    [class.h-100]=\"!ngContentVisible\"\n    >\n  <!-- <div [@routeAnimations]=\"animState\"> -->\n  <!-- <div class=\"hierarchy-router-outlet--route-content\"> -->\n    <router-outlet #outlet=\"outlet\"\n      (activate)=\"outletActivate($event)\"\n      (deactivate)=\"outletDeactivate($event)\">\n    </router-outlet>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}:host ::ng-deep router-outlet+*{background-color:#fff;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }]; } });
-
-class HierarchyLevelResolver {
-    resolve(route, state) {
-        // console.log('[HierarchyLevelResolver]', route)
-        // console.log('[HierarchyLevelResolver]', state)
-        return this._getMaxHierLevel(route);
-    }
-    _getMaxHierLevel(route) {
-        let curr = route;
-        while (curr.parent) {
-            curr = curr.parent;
-            if (curr.data['hierLevel']) {
-                return curr.data['hierLevel'] + 1;
-            }
-        }
-        return 0;
-    }
-}
-HierarchyLevelResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyLevelResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-HierarchyLevelResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyLevelResolver, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyLevelResolver, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class TheSeamDynamicRouterModule {
-}
-TheSeamDynamicRouterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamDynamicRouterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheSeamDynamicRouterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TheSeamDynamicRouterModule, declarations: [HierarchyRouterOutletComponent], imports: [CommonModule,
-        RouterModule], exports: [HierarchyRouterOutletComponent] });
-TheSeamDynamicRouterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamDynamicRouterModule, imports: [CommonModule,
-        RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamDynamicRouterModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        HierarchyRouterOutletComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        RouterModule
-                    ],
-                    exports: [
-                        HierarchyRouterOutletComponent
-                    ]
-                }]
-        }] });
-
-class TheSeamSchemaFormCheckboxComponent {
-    constructor(_jsf) {
-        this._jsf = _jsf;
-        this.controlDisabled = false;
-        this.boundControl = false;
-        this.trueValue = true;
-        this.falseValue = false;
-    }
-    ngOnInit() {
-        var _a, _b;
-        this.options = ((_a = this.layoutNode) === null || _a === void 0 ? void 0 : _a.options) || {};
-        this._jsf.initializeControl(this);
-        if (this.controlValue === null || this.controlValue === undefined) {
-            this.controlValue = (_b = this.options) === null || _b === void 0 ? void 0 : _b.title;
-        }
-    }
-    updateValue(event) {
-        event.preventDefault();
-        this._jsf.updateValue(this, event.target.checked ? this.trueValue : this.falseValue);
-    }
-    get isChecked() {
-        return this._jsf.getFormControlValue(this) === this.trueValue;
-    }
-}
-TheSeamSchemaFormCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSchemaFormCheckboxComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "component", type: TheSeamCheckboxComponent, selector: "seam-checkbox", inputs: ["tabIndex", "id", "aria-label", "aria-labelledby", "required", "checked", "disabled", "indeterminate", "name", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["seamCheckbox"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
-
-class TheSeamSchemaFormInputComponent {
-    constructor(_jsf) {
-        this._jsf = _jsf;
-        this.controlDisabled = false;
-        this.boundControl = false;
-        this.autoCompleteList = [];
-    }
-    ngOnInit() {
-        var _a;
-        this.options = ((_a = this.layoutNode) === null || _a === void 0 ? void 0 : _a.options) || {};
-        this._jsf.initializeControl(this);
-    }
-    updateValue(event) {
-        this._jsf.updateValue(this, event.target.value);
-    }
-}
-TheSeamSchemaFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSchemaFormInputComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$3.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
-
-class TheSeamSchemaFormNumberComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
-        this.controlDisabled = false;
-        this.boundControl = false;
-        this.allowNegative = true;
-        this.allowDecimal = true;
-        this.allowExponents = false;
-        this.lastValidNumber = '';
-    }
-    ngOnInit() {
-        var _a, _b;
-        this.options = ((_a = this.layoutNode) === null || _a === void 0 ? void 0 : _a.options) || {};
-        this.jsf.initializeControl(this);
-        if (((_b = this.layoutNode) === null || _b === void 0 ? void 0 : _b.dataType) === 'integer') {
-            this.allowDecimal = false;
-        }
-    }
-    updateValue(event) {
-        this.jsf.updateValue(this, event.target.value);
-    }
-}
-TheSeamSchemaFormNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSchemaFormNumberComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$3.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
-
-class TheSeamSchemaFormSelectComponent {
-    constructor(_jsf) {
-        this._jsf = _jsf;
-        this.controlDisabled = false;
-        this.boundControl = false;
-        this.selectList = [];
-        this.isArray = isArray;
-    }
-    ngOnInit() {
-        var _a;
-        this.options = ((_a = this.layoutNode) === null || _a === void 0 ? void 0 : _a.options) || {};
-        this.selectList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, !!this.options.required, !!this.options.flatList);
-        this._jsf.initializeControl(this);
-    }
-    updateValue(event) {
-        this._jsf.updateValue(this, event.value);
-    }
-}
-TheSeamSchemaFormSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSchemaFormSelectComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$3.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5$1.ɵf, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5$1.ɵh, selector: "[ng-label-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
-
-// NOTE: This component is a little hacky, because I am basically creating a
-// data widget that acts like a data and 'submit' widget at the same time.
-//
-// TODO: Try and think of a nicer way to implement this, but still make sense
-// from a schema definition. The library may need to me forked to actually
-// support this in the way I expect, but maybe there is another way.
-class TheSeamSchemaFormSubmitSplitComponent {
-    constructor(_jsf) {
-        this._jsf = _jsf;
-        /** @ignore */
-        this._ngUnsubscribe = new Subject();
-        this.controlDisabled = false;
-        this.boundControl = false;
-        this._buttonLabel = '';
-        this._dropdownDisabled = false;
-        this._selectList = [];
-    }
-    /** @ignore */
-    ngOnInit() {
-        var _a;
-        this.options = ((_a = this.layoutNode) === null || _a === void 0 ? void 0 : _a.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) {
-        var _a;
-        if (typeof ((_a = this.options) === null || _a === void 0 ? void 0 : _a.onClick) === 'function') {
-            this.options.onClick(event);
-        }
-        else {
-            this._jsf.updateValue(this, event.target.value);
-        }
-    }
-    _initDropdown() {
-        var _a, _b, _c, _d, _e;
-        if (!hasOwn(this.layoutNode, 'items') || !(((_a = this.layoutNode) === null || _a === void 0 ? void 0 : _a.items) || []).length) {
-            return;
-        }
-        if (isDevMode()) {
-            if (((_b = this.layoutNode) === null || _b === void 0 ? void 0 : _b.items) && ((_c = this.layoutNode) === null || _c === void 0 ? void 0 : _c.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 = ((_d = this.layoutNode) === null || _d === void 0 ? void 0 : _d.items)[idx] || {};
-        this._dropdownObj = {
-            layoutNode: item,
-            layoutIndex: (this.layoutIndex || []).concat(idx),
-            dataIndex: ((_e = this.layoutNode) === null || _e === void 0 ? void 0 : _e.dataType) === 'array' ? (this.dataIndex || []).concat(idx) : this.dataIndex,
-            options: item.options || {}
-        };
-        this._jsf.initializeControl(this._dropdownObj);
-        const items = buildTitleMap(this._dropdownObj.options.titleMap || this._dropdownObj.options.enumNames, this._dropdownObj.options.enum, !!this._dropdownObj.options.required, !!this._dropdownObj.options.flatList);
-        this._selectList = items;
-        // TODO: Should this be checking if the control is bound?
-        const dropdownControl = this._getDropdownControl();
-        if (!dropdownControl) {
-            return;
-        }
-        observeControlValue(dropdownControl).pipe(takeUntil(this._ngUnsubscribe)).subscribe(value => {
-            this._setSelectListCheckedProp(value);
-            this._selectedItem = this._getSelectedItem();
-        });
-        observeControlStatus(dropdownControl).pipe(takeUntil(this._ngUnsubscribe)).subscribe(value => {
-            this._dropdownDisabled = dropdownControl.disabled;
-        });
-    }
-    _getDropdownControl() {
-        return this._dropdownObj.formControl;
-    }
-    _setSelectListCheckedProp(value) {
-        const items = this._selectList;
-        for (const item of items) {
-            if (item.value === value) {
-                item.checked = true;
-            }
-            else if (item.checked) {
-                item.checked = false;
-            }
-        }
-        this._selectList = [...items];
-    }
-    _getSelectedItem() {
-        return (this._selectList || []).find(x => x.checked === true);
-    }
-    _setDropdownValue(value) {
-        const formControl = this._getDropdownControl();
-        formControl === null || formControl === void 0 ? void 0 : formControl.setValue(value);
-    }
-}
-TheSeamSchemaFormSubmitSplitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormSubmitSplitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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$2.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i3$2.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i4$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
-
-class TheSeamSchemaFormDividerComponent {
-    ngOnInit() {
-        this.options = this.layoutNode.options || {};
-    }
-}
-TheSeamSchemaFormDividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSchemaFormDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormDividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", 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 {
-    constructor(_jsf) {
-        this._jsf = _jsf;
-        this.controlDisabled = false;
-        this.boundControl = false;
-        this.autoCompleteList = [];
-    }
-    ngOnInit() {
-        var _a, _b;
-        this.options = ((_a = this.layoutNode) === null || _a === void 0 ? void 0 : _a.options) || {};
-        this._jsf.initializeControl(this);
-        console.log(this.controlValue);
-        console.log((_b = this.formControl) === null || _b === void 0 ? void 0 : _b.value);
-    }
-    updateValue(event) {
-        this._jsf.updateValue(this, event.target.value);
-    }
-}
-TheSeamSchemaFormTelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSchemaFormTelComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormTelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$3.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "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: "15.2.10", 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: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
-
-class TheSeamSchemaFormTiledSelectComponent {
-    constructor(_jsf, _platform) {
-        this._jsf = _jsf;
-        this._platform = _platform;
-        this.controlDisabled = false;
-        this.boundControl = false;
-        this.tiles = [];
-        this.layout = 'grid';
-        this.multiple = false;
-        this.selectionToggleable = true;
-        this.tileBackdrop = false;
-        this.showSelectedIcon = true;
-        this.animationsDisabled = this._platform.IOS;
-    }
-    ngOnInit() {
-        var _a;
-        this.options = ((_a = this.layoutNode) === null || _a === void 0 ? void 0 : _a.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);
-    }
-}
-TheSeamSchemaFormTiledSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSchemaFormTiledSelectComponent, deps: [{ token: i1$3.JsonSchemaFormService }, { token: i2$3.Platform }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormTiledSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$3.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "ngmodule", type: TheSeamTiledSelectModule }, { kind: "component", type: i6$1.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: "15.2.10", 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" }]
-        }], ctorParameters: function () { return [{ type: i1$3.JsonSchemaFormService }, { type: i2$3.Platform }]; }, propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
-
-class TheSeamSchemaFormFrameworkComponent {
-}
-TheSeamSchemaFormFrameworkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSchemaFormFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormFrameworkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TheSeamSchemaFormFrameworkComponent, 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: "component", type: i1$3.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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',
-                    }, 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 = Object.assign(Object.assign({}, toExtend.widgets), override.widgets);
-            }
-            if (hasProperty(override, 'stylesheets')) {
-                toExtend.stylesheets = Object.assign(Object.assign({}, toExtend.stylesheets), override.stylesheets);
-            }
-            if (hasProperty(override, 'scripts')) {
-                toExtend.scripts = Object.assign(Object.assign({}, toExtend.scripts), override.scripts);
-            }
-        }
-    }
-}
-class TheSeamFramework extends Framework {
-    constructor(_overrides) {
-        super();
-        this.name = 'seam-framework';
-        this.framework = TheSeamSchemaFormFrameworkComponent;
-        this.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
-        };
-        // console.log('TheSeamFramework', _overrides, this)
-        if (_overrides) {
-            for (const override of _overrides) {
-                // console.log('override', override)
-                if (hasProperty(override, 'widgets')) {
-                    this.widgets = Object.assign(Object.assign({}, this.widgets), override.widgets);
-                }
-            }
-        }
-    }
-}
-TheSeamFramework.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamFramework, deps: [{ token: THESEAM_SCHEMA_FRAMEWORK_OVERRIDES, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-TheSeamFramework.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamFramework });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamFramework, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [THESEAM_SCHEMA_FRAMEWORK_OVERRIDES]
-                    }] }];
-    } });
-
-class TheSeamSchemaFormModule {
-}
-TheSeamSchemaFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheSeamSchemaFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSchemaFormModule, declarations: [TheSeamSchemaFormFrameworkComponent], imports: [CommonModule,
-        JsonSchemaFormModule,
-        WidgetLibraryModule], exports: [TheSeamSchemaFormFrameworkComponent,
-        JsonSchemaFormModule] });
-TheSeamSchemaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSchemaFormModule, providers: [
-        JsonSchemaFormService,
-        FrameworkLibraryService,
-        WidgetLibraryService,
-        { provide: Framework, useClass: TheSeamFramework, multi: true }
-    ], imports: [CommonModule,
-        JsonSchemaFormModule,
-        WidgetLibraryModule, JsonSchemaFormModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamSchemaFormModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        TheSeamSchemaFormFrameworkComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        JsonSchemaFormModule,
-                        WidgetLibraryModule,
-                    ],
-                    providers: [
-                        JsonSchemaFormService,
-                        FrameworkLibraryService,
-                        WidgetLibraryService,
-                        { provide: Framework, useClass: TheSeamFramework, multi: true }
-                    ],
-                    exports: [
-                        TheSeamSchemaFormFrameworkComponent,
-                        JsonSchemaFormModule
-                    ],
-                }]
-        }] });
-
-function isHorizontalNavItemType(item, type) {
-    return item.itemType === type;
-}
-function isHorizontalNavItemActive(item) {
-    var _a, _b;
-    return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.active) !== null && _b !== void 0 ? _b : false;
-}
-function isHorizontalNavItemExpanded(item) {
-    var _a, _b;
-    return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.expanded) !== null && _b !== void 0 ? _b : false;
-}
-function isHorizontalNavItemFocused(item) {
-    var _a, _b;
-    return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.focused) !== null && _b !== void 0 ? _b : false;
-}
-function horizontalNavItemHasChildren(item) {
-    return horizontalNavItemCanHaveChildren(item) && 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 {
-    constructor(_router) {
-        this._router = _router;
-        this._updatingCount = new BehaviorSubject(0);
-        this.itemChanged = new Subject();
-        this.loading$ = this._updatingCount.pipe(map(count => count > 0), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
-    }
-    createItemsObservable(items) {
-        return defer(() => {
-            this.updateItemsStates(items);
-            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 Object.assign(Object.assign({}, 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);
-        }
-    }
-}
-TheSeamNavService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamNavService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-TheSeamNavService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamNavService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamNavService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }]; } });
-
-class NavItemComponent {
-    set link(value) { this._link.next(value); }
-    get link() { return this._link.value; }
-    set expanded(value) {
-        this._expanded.next(coerceBooleanProperty(value));
-    }
-    get expanded() { return this._expanded.value; }
-    set compact(value) { this._compact.next(coerceBooleanProperty(value)); }
-    get compact() { return this._compact.value; }
-    get badgeTooltip() { return this._badgeTooltip; }
-    set badgeTooltip(value) {
-        if (value !== null && value !== undefined) {
-            if (typeof value === 'string') {
-                this._badgeTooltip = {
-                    tooltip: value,
-                    placement: 'auto',
-                    disabled: false
-                };
-            }
-            else {
-                this._badgeTooltip = Object.assign(Object.assign({}, value), { placement: value.placement || 'auto', disabled: typeof (value === null || value === void 0 ? void 0 : value.disabled) === 'boolean'
-                        ? value.disabled
-                        : typeof value.tooltip !== 'string' });
-            }
-        }
-        else {
-            this._badgeTooltip = undefined;
-        }
-    }
-    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; }
-    constructor(_nav) {
-        this._nav = _nav;
-        this._ngUnsubscribe = new Subject();
-        this.faAngleLeft = faAngleLeft;
-        this.active = false;
-        this._link = new BehaviorSubject(undefined);
-        this.link$ = this._link.asObservable();
-        this.hierLevel = 0;
-        this.indentSize = 10;
-        this._expanded = new BehaviorSubject(false);
-        this.expanded$ = this._expanded.asObservable();
-        this._compact = new BehaviorSubject(false);
-        this.compact$ = this._compact.asObservable();
-        this.focused = false;
-        this.badgeTheme = 'danger';
-        this.childAction = 'menu';
-        this.expandAction = 'toggle';
-        this.navItemExpanded = new EventEmitter();
-    }
-    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;
-    }
-}
-NavItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavItemComponent, deps: [{ token: TheSeamNavService }], target: i0.ɵɵFactoryTarget.Component });
-NavItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NavItemComponent, 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      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n\n<seam-menu #menu *ngIf=\"hasMenuToggle\">\n  <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n</seam-menu>\n\n<ng-template #navChildren>\n  <seam-nav-item *ngFor=\"let child of children\"\n    [item]=\"child\"\n    [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n    [compact]=\"compact\"\n    [itemType]=\"$any(child).itemType\"\n    [icon]=\"$any(child).icon\"\n    [label]=\"$any(child).label\"\n    [link]=\"$any(child).link\"\n    [badgeText]=\"$any(child).badge?.text\"\n    [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n    [badgeSrContent]=\"$any(child).badge?.srContent\"\n    [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n    [queryParams]=\"$any(child).queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    [children]=\"$any(child)?.children\"\n    [active]=\"$any(child).__state?.active\"\n    [expanded]=\"$any(child).__state?.expanded\"\n    [focused]=\"$any(child).__state?.focused\"\n    childAction=\"expand\"\n    [hideEmptyIcon]=\"hideEmptyIcon\">\n  </seam-nav-item>\n</ng-template>\n\n", 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 #dae0e5;width:100%}seam-nav-item .nav-item--title{color:#000;font-size:24px;padding-left:10px}seam-nav-item .sr-only{top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i4$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3$2.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { 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: i2.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: "15.2.10", 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, template: "<div class=\"d-flex flex-row h-100\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasExpandingChildren\">\n  <div class=\"nav--group nav--group--level-{{ hierLevel + 1 }}\"\n    *ngIf=\"expanded$ | async\" @childGroupAnim>\n    <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"nav-item btn nav-btn p-0 d-flex align-items-stretch flex-row text-decoration-none w-100\"\n    cdkMonitorElementFocus\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\">\n    <div class=\"nav-link d-flex flex-row align-items-center w-100\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn nav-btn nav-item--toggle-btn-container d-flex align-items-center\">\n      <seam-icon\n        class=\"nav-item--toggle-btn\"\n        [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"nav-item nav-link d-flex flex-row w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\">\n    <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n      <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"nav-item nav-link d-flex flex-row w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn nav-btn nav-item--toggle-btn-container\"\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"nav-item--toggle-btn\"\n      [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"nav-item--title pt-1\" nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"nav-item--badge\"\n      [class.nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n\n<seam-menu #menu *ngIf=\"hasMenuToggle\">\n  <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n</seam-menu>\n\n<ng-template #navChildren>\n  <seam-nav-item *ngFor=\"let child of children\"\n    [item]=\"child\"\n    [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n    [compact]=\"compact\"\n    [itemType]=\"$any(child).itemType\"\n    [icon]=\"$any(child).icon\"\n    [label]=\"$any(child).label\"\n    [link]=\"$any(child).link\"\n    [badgeText]=\"$any(child).badge?.text\"\n    [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n    [badgeSrContent]=\"$any(child).badge?.srContent\"\n    [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n    [queryParams]=\"$any(child).queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    [children]=\"$any(child)?.children\"\n    [active]=\"$any(child).__state?.active\"\n    [expanded]=\"$any(child).__state?.expanded\"\n    [focused]=\"$any(child).__state?.focused\"\n    childAction=\"expand\"\n    [hideEmptyIcon]=\"hideEmptyIcon\">\n  </seam-nav-item>\n</ng-template>\n\n", 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 #dae0e5;width:100%}seam-nav-item .nav-item--title{color:#000;font-size:24px;padding-left:10px}seam-nav-item .sr-only{top:0;left:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: TheSeamNavService }]; }, 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 {
-    get items() { return this._items.value; }
-    set items(value) {
-        this._items.next(value);
-    }
-    constructor(_nav) {
-        this._nav = _nav;
-        this._ngUnsubscribe = new Subject();
-        this._items = new BehaviorSubject([]);
-        this.hideEmptyIcon = true;
-        this.hierLevel = 0;
-        this.childAction = 'menu';
-        this.expandAction = 'toggle';
-        this.navItemExpanded = new EventEmitter();
-        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 });
-    }
-}
-HorizontalNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HorizontalNavComponent, deps: [{ token: TheSeamNavService }], target: i0.ɵɵFactoryTarget.Component });
-HorizontalNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HorizontalNavComponent, 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:rgba(52,58,64,.6);width:100vw;height:100vh}seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden,.seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-horizontal-nav .nav-content,.seam-horizontal-nav .nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-horizontal-nav .nav-items-container,.seam-horizontal-nav .nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}seam-horizontal-nav .nav-items-row,.seam-horizontal-nav .nav-items-row{height:100%;display:flex;padding:.25rem .5rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, 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: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HorizontalNavComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'seam-horizontal-nav', providers: [
-                        TheSeamNavService
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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:rgba(52,58,64,.6);width:100vw;height:100vh}seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden,.seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-horizontal-nav .nav-content,.seam-horizontal-nav .nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-horizontal-nav .nav-items-container,.seam-horizontal-nav .nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}seam-horizontal-nav .nav-items-row,.seam-horizontal-nav .nav-items-row{height:100%;display:flex;padding:.25rem .5rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: TheSeamNavService }]; }, propDecorators: { items: [{
-                type: Input
-            }], hideEmptyIcon: [{
-                type: Input
-            }], hierLevel: [{
-                type: Input
-            }], childAction: [{
-                type: Input
-            }], expandAction: [{
-                type: Input
-            }], navItemExpanded: [{
-                type: Output
-            }] } });
-
-class TheSeamNavModule {
-}
-TheSeamNavModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheSeamNavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TheSeamNavModule, declarations: [NavItemComponent,
-        HorizontalNavComponent], imports: [CommonModule,
-        RouterModule,
-        TheSeamIconModule,
-        A11yModule,
-        TheSeamScrollbarModule,
-        TheSeamLayoutModule,
-        NgbTooltipModule,
-        PortalModule,
-        TheSeamMenuModule], exports: [NavItemComponent,
-        HorizontalNavComponent] });
-TheSeamNavModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamNavModule, providers: [
-        TheSeamNavService,
-    ], imports: [CommonModule,
-        RouterModule,
-        TheSeamIconModule,
-        A11yModule,
-        TheSeamScrollbarModule,
-        TheSeamLayoutModule,
-        NgbTooltipModule,
-        PortalModule,
-        TheSeamMenuModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamNavModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        NavItemComponent,
-                        HorizontalNavComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        TheSeamIconModule,
-                        A11yModule,
-                        TheSeamScrollbarModule,
-                        TheSeamLayoutModule,
-                        NgbTooltipModule,
-                        PortalModule,
-                        TheSeamMenuModule
-                    ],
-                    exports: [
-                        NavItemComponent,
-                        HorizontalNavComponent,
-                    ],
-                    providers: [
-                        TheSeamNavService,
-                    ]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutNavToggleDirective, 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, 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