@theseam/ui-common 0.4.11 → 0.4.12-beta.1

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

@@ -1,8 +1,9 @@
 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, SkipSelf, Host, Self, ContentChildren } 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, defer, Observable } from 'rxjs';
+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';
@@ -14,8 +15,7 @@ import * as i4$1 from '@theseam/ui-common/buttons';
 import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
 import * as i2$1 from '@theseam/ui-common/icon';
 import { TheSeamIconModule } from '@theseam/ui-common/icon';
-import { map, startWith, switchMap, shareReplay, tap, mapTo, take, auditTime, debounceTime, takeUntil, distinctUntilChanged, finalize, filter } from 'rxjs/operators';
-import { hasProperty, notNullOrUndefined, observeControlValue, observeControlStatus } from '@theseam/ui-common/utils';
+import { 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';
@@ -25,27 +25,31 @@ import { THESEAM_WIDGET_DATA, THESEAM_WIDGET_ACCESSOR } from '@theseam/ui-common
 import * as i1$1 from '@theseam/ui-common/dynamic-component-loader';
 import * as i6 from '@theseam/ui-common/shared';
 import { TheSeamSharedModule } from '@theseam/ui-common/shared';
-import { trigger, state, style, transition, animate, group, query, animateChild, keyframes } from '@angular/animations';
 import * as i1$2 from '@angular/router';
-import { NavigationEnd, RouterModule, NavigationStart } from '@angular/router';
+import { 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 } 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 { isArray, buildTitleMap, hasOwn, Framework, JsonSchemaFormModule, WidgetLibraryModule, JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService } 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 '@theseam/ui-common/checkbox';
-import { TheSeamCheckboxModule } from '@theseam/ui-common/checkbox';
-import * as i5$2 from '@ng-select/ng-select';
+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) {
@@ -102,22 +106,31 @@ class BaseLayoutNavToggleDirective {
             this.baseLayout.registeredNav.toggle();
         }
     }
-    constructor(_baseLayout) {
+    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() {
+        this.baseLayout?.registeredNav?.expanded$.pipe(tap(exp => {
+            this._expandedClass = exp;
+            this._cdr.markForCheck();
+        })).subscribe();
+    }
 }
-BaseLayoutNavToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BaseLayoutNavToggleDirective, deps: [{ token: THESEAM_BASE_LAYOUT_REF, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-BaseLayoutNavToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: BaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: { type: "type", ariaLabel: ["aria-label", "ariaLabel"] }, host: { listeners: { "click": "_onClick()" }, properties: { "attr.type": "this._attrType", "attr.aria-label": "this._attrAriaLabel" } }, exportAs: ["seamBaseLayoutNavToggle"], ngImport: i0 });
+BaseLayoutNavToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", 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.7", 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.7", ngImport: i0, type: BaseLayoutNavToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[seamBaseLayoutNavToggle]',
                     exportAs: 'seamBaseLayoutNavToggle'
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -133,6 +146,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             }], 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']
@@ -180,6 +199,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
+class BaseLayoutSideBarHeaderDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}
+BaseLayoutSideBarHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BaseLayoutSideBarHeaderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaseLayoutSideBarHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: BaseLayoutSideBarHeaderDirective, selector: "[seamBaseLayoutSideBarHeader]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", 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
@@ -195,6 +228,7 @@ class TheSeamBaseLayoutComponent {
         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();
@@ -204,12 +238,17 @@ class TheSeamBaseLayoutComponent {
         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);
-            this._hasSideBar.next(true);
+            if (this.showSidebar) {
+                this._hasSideBar.next(true);
+            }
         }
         if (this._contentTpl) {
             this._contentPortal = new TemplatePortal(this._contentTpl, this._viewContainerRef);
@@ -265,12 +304,16 @@ class TheSeamBaseLayoutComponent {
     }
 }
 TheSeamBaseLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", 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.7", type: TheSeamBaseLayoutComponent, selector: "seam-base-layout", inputs: { overlayNav: "overlayNav" }, providers: [THE_SEAM_BASE_LAYOUT], queries: [{ propertyName: "_topBarTpl", first: true, predicate: BaseLayoutTopBarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_sideBarTpl", first: true, predicate: BaseLayoutSideBarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentTpl", first: true, predicate: BaseLayoutContentDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentHeaderTpl", first: true, predicate: BaseLayoutContentHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_contentFooterTpl", first: true, predicate: BaseLayoutContentFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header\">\n      <!-- <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template> -->\n\n      <div class=\"d-flex d-flex-row\">\n        <div class=\"flex-grow-1\">\n          <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n        </div>\n        <div class=\"d-flex\">\n          <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n            <div>\n              <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;float:left;z-index:9999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .base-layout-content-container-header{margin:.25rem;padding:0;background:none;border-radius:0;overflow:hidden}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i4.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TheSeamBaseLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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.7", ngImport: i0, type: TheSeamBaseLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-base-layout', providers: [THE_SEAM_BASE_LAYOUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header\">\n      <!-- <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template> -->\n\n      <div class=\"d-flex d-flex-row\">\n        <div class=\"flex-grow-1\">\n          <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n        </div>\n        <div class=\"d-flex\">\n          <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n            <div>\n              <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;float:left;z-index:9999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .base-layout-content-container-header{margin:.25rem;padding:0;background:none;border-radius:0;overflow:hidden}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"] }]
+            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 }]
@@ -295,6 +338,7 @@ TheSeamBaseLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         BaseLayoutContentDirective,
         BaseLayoutSideBarDirective,
         BaseLayoutSideBarFooterDirective,
+        BaseLayoutSideBarHeaderDirective,
         BaseLayoutTopBarDirective,
         BaseLayoutNavToggleDirective,
         BaseLayoutContentHeaderDirective,
@@ -306,6 +350,7 @@ TheSeamBaseLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         BaseLayoutContentDirective,
         BaseLayoutSideBarDirective,
         BaseLayoutSideBarFooterDirective,
+        BaseLayoutSideBarHeaderDirective,
         BaseLayoutTopBarDirective,
         BaseLayoutNavToggleDirective,
         BaseLayoutContentHeaderDirective,
@@ -323,6 +368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         BaseLayoutContentDirective,
                         BaseLayoutSideBarDirective,
                         BaseLayoutSideBarFooterDirective,
+                        BaseLayoutSideBarHeaderDirective,
                         BaseLayoutTopBarDirective,
                         BaseLayoutNavToggleDirective,
                         BaseLayoutContentHeaderDirective,
@@ -340,6 +386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         BaseLayoutContentDirective,
                         BaseLayoutSideBarDirective,
                         BaseLayoutSideBarFooterDirective,
+                        BaseLayoutSideBarHeaderDirective,
                         BaseLayoutTopBarDirective,
                         BaseLayoutNavToggleDirective,
                         BaseLayoutContentHeaderDirective,
@@ -1098,8 +1145,6 @@ const THESEAM_SIDE_NAV_ACCESSOR = new InjectionToken('THESEAM_SIDE_NAV_ACCESSOR'
 
 const EXPANDED_STATE$1 = 'expanded';
 const COLLAPSED_STATE$1 = 'collapsed';
-const FULL_STATE = 'full';
-const COMPACT_STATE = 'compact';
 class SideNavItemComponent {
     set link(value) { this._link.next(value); }
     get link() { return this._link.value; }
@@ -1125,7 +1170,7 @@ class SideNavItemComponent {
                     container: value.container || 'body',
                     disabled: typeof value?.disabled === 'boolean'
                         ? value.disabled
-                        : typeof value.tooltip !== 'string'
+                        : typeof value.tooltip === 'string',
                 };
             }
         }
@@ -1135,9 +1180,8 @@ class SideNavItemComponent {
     }
     get _isActiveCssClass() { return this.active; }
     get _attrDataHierLevel() { return this.hierLevel; }
-    constructor(_sideNav, _parent) {
+    constructor(_sideNav) {
         this._sideNav = _sideNav;
-        this._parent = _parent;
         this._ngUnsubscribe = new Subject();
         this.faAngleLeft = faAngleLeft;
         this.active = false;
@@ -1151,9 +1195,7 @@ class SideNavItemComponent {
         this.compact$ = this._compact.asObservable();
         this.badgeTheme = 'danger';
         this.childGroupAnimState$ = this.expanded$
-            .pipe(map(expanded => expanded ? EXPANDED_STATE$1 : COLLAPSED_STATE$1));
-        this.compactAnimState$ = this.compact$
-            .pipe(map(compact => compact ? COMPACT_STATE : FULL_STATE));
+            .pipe(map$1(expanded => expanded ? EXPANDED_STATE$1 : COLLAPSED_STATE$1));
     }
     ngOnDestroy() {
         this._ngUnsubscribe.next(undefined);
@@ -1171,36 +1213,17 @@ class SideNavItemComponent {
             this._sideNav.collapse();
         }
     }
+    get showIconBlock() {
+        return notNullOrUndefined(this.icon) || this.hideEmptyIcon !== true;
+    }
 }
-SideNavItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SideNavItemComponent, deps: [{ token: THESEAM_SIDE_NAV_ACCESSOR }, { token: SideNavItemComponent, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-SideNavItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: { itemType: "itemType", icon: "icon", label: "label", active: "active", link: "link", queryParams: "queryParams", children: "children", hierLevel: "hierLevel", indentSize: "indentSize", expanded: "expanded", compact: "compact", isMobile: "isMobile", badgeText: "badgeText", badgeTheme: "badgeTheme", badgeSrContent: "badgeSrContent", badgeTooltip: "badgeTooltip", menuItemTooltipConfig: "menuItemTooltipConfig", menuItemTooltipDisabled: "menuItemTooltipDisabled" }, host: { properties: { "class.seam-side-nav-item--active": "this._isActiveCssClass", "attr.data-hier-level": "this._attrDataHierLevel" } }, exportAs: ["seamSideNavItem"], ngImport: i0, template: "<div class=\"d-flex flex-row\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [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      [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n      [menuItemTooltipDisabled]=\"menuItemTooltipDisabled\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <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      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      (click)=\"_linkClicked()\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </a>\n\n    <ng-template #noLink>\n      <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\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 .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#2f71a9;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn{color:#fff}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i4$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "isMobile", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "menuItemTooltipConfig", "menuItemTooltipDisabled"], exportAs: ["seamSideNavItem"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
+SideNavItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", 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.7", type: SideNavItemComponent, isStandalone: true, selector: "seam-side-nav-item", inputs: { itemType: "itemType", icon: "icon", hideEmptyIcon: "hideEmptyIcon", label: "label", active: "active", 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", "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    </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    <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      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      (click)=\"_linkClicked()\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </a>\n\n    <ng-template #noLink>\n      <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\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{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#fff;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"], dependencies: [{ kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "hideEmptyIcon", "label", "active", "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, 'overflow-y': 'hidden', visibility: 'hidden' })),
+            state(COLLAPSED_STATE$1, style({ height: 0, visibility: 'hidden' })),
             transition(`${EXPANDED_STATE$1} <=> ${COLLAPSED_STATE$1}`, animate('0.2s ease-in-out')),
         ]),
-        trigger('compactAnim', [
-        // transition('* <=> *', [
-        //   query(':enter', [
-        //     style({ opacity: '0' }),
-        //     animate('5.2s ease-in-out', style({ opacity: '1' }))
-        //   ], { optional: true }),
-        //   query(':leave', [
-        //     style({ opacity: '1' }),
-        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
-        //   ], { optional: true })
-        // ])
-        // state(FULL_STATE, style({ opacity: '1' })),
-        // state(COMPACT_STATE, style({ opacity: '0' })),
-        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, animate('5.2s ease-in-out')),
-        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, [
-        // transition('* <=> *', [
-        //   query(':leave', [
-        //     style({ opacity: '1' }),
-        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
-        //   ], { optional: true })
-        // ]),
-        ])
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     InputBoolean()
@@ -1216,45 +1239,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             args: [{ selector: 'seam-side-nav-item', exportAs: 'seamSideNavItem', animations: [
                         trigger('childGroupAnim', [
                             state(EXPANDED_STATE$1, style({ height: '*' })),
-                            state(COLLAPSED_STATE$1, style({ height: 0, 'overflow-y': 'hidden', visibility: 'hidden' })),
+                            state(COLLAPSED_STATE$1, style({ height: 0, visibility: 'hidden' })),
                             transition(`${EXPANDED_STATE$1} <=> ${COLLAPSED_STATE$1}`, animate('0.2s ease-in-out')),
                         ]),
-                        trigger('compactAnim', [
-                        // transition('* <=> *', [
-                        //   query(':enter', [
-                        //     style({ opacity: '0' }),
-                        //     animate('5.2s ease-in-out', style({ opacity: '1' }))
-                        //   ], { optional: true }),
-                        //   query(':leave', [
-                        //     style({ opacity: '1' }),
-                        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
-                        //   ], { optional: true })
-                        // ])
-                        // state(FULL_STATE, style({ opacity: '1' })),
-                        // state(COMPACT_STATE, style({ opacity: '0' })),
-                        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, animate('5.2s ease-in-out')),
-                        // transition(`${FULL_STATE} <=> ${COMPACT_STATE}`, [
-                        // transition('* <=> *', [
-                        //   query(':leave', [
-                        //     style({ opacity: '1' }),
-                        //     animate('5.2s ease-in-out', style({ opacity: '0' }))
-                        //   ], { optional: true })
-                        // ]),
-                        ])
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"d-flex flex-row\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [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      [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n      [menuItemTooltipDisabled]=\"menuItemTooltipDisabled\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <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      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      (click)=\"_linkClicked()\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </a>\n\n    <ng-template #noLink>\n      <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\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 .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#2f71a9;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn{color:#fff}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"] }]
+                    ], 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    </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    <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      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      (click)=\"_linkClicked()\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </a>\n\n    <ng-template #noLink>\n      <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\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{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#fff;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [THESEAM_SIDE_NAV_ACCESSOR]
-                }] }, { type: SideNavItemComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }, {
-                    type: Host
                 }] }]; }, propDecorators: { itemType: [{
                 type: Input
             }], icon: [{
                 type: Input
+            }], hideEmptyIcon: [{
+                type: Input
             }], label: [{
                 type: Input
             }], active: [{
@@ -1297,7 +1300,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 
 class SideNavToggleComponent {
     constructor() {
-        this.faBars = faBars;
         this.expanded = false;
         this.toggleExpand = new EventEmitter();
     }
@@ -1306,7 +1308,7 @@ class SideNavToggleComponent {
     }
 }
 SideNavToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SideNavToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideNavToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SideNavToggleComponent, selector: "seam-side-nav-toggle", inputs: { expanded: "expanded" }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "class.side-nav-toggle--compact": "!expanded" } }, ngImport: i0, template: "<div class=\"side-nav-toggle--content\" *ngIf=\"expanded\">\n  <ng-content></ng-content>\n</div>\n<button seamIconBtn [icon]=\"faBars\"\n  iconType=\"borderless-styled-square\"\n  btnSize=\"sm\"\n  class=\"side-nav-toggle--btn ml-1\"\n  (click)=\"toggle()\">\n  <span class=\"sr-only\">Toggle sidebar</span>\n</button>\n", styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{position:absolute;top:0;right:5px;color:#fff}seam-side-nav-toggle .side-nav-toggle--btn seam-icon{padding:5px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SideNavToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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);
@@ -1314,9 +1316,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             type: Component,
             args: [{ selector: 'seam-side-nav-toggle', host: {
                         '[class.side-nav-toggle--compact]': '!expanded'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"side-nav-toggle--content\" *ngIf=\"expanded\">\n  <ng-content></ng-content>\n</div>\n<button seamIconBtn [icon]=\"faBars\"\n  iconType=\"borderless-styled-square\"\n  btnSize=\"sm\"\n  class=\"side-nav-toggle--btn ml-1\"\n  (click)=\"toggle()\">\n  <span class=\"sr-only\">Toggle sidebar</span>\n</button>\n", styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{position:absolute;top:0;right:5px;color:#fff}seam-side-nav-toggle .side-nav-toggle--btn seam-icon{padding:5px}\n"] }]
+                    }, 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
             }] } });
@@ -1625,14 +1634,20 @@ class SideNavComponent {
         this._sideNav = _sideNav;
         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 = {
@@ -1642,7 +1657,7 @@ class SideNavComponent {
         };
         this.toggleExpand = new EventEmitter();
         this._backdropHidden = new BehaviorSubject(true);
-        this.items$ = this._items.asObservable().pipe(switchMap(items => this._sideNav.createItemsObservable(items)), shareReplay({ bufferSize: 1, refCount: true }));
+        this.items$ = this._items.asObservable().pipe(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
@@ -1667,6 +1682,9 @@ class SideNavComponent {
         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);
         }
@@ -1697,16 +1715,32 @@ class SideNavComponent {
             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.7", ngImport: i0, type: SideNavComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.TheSeamLayoutService }, { token: TheSeamSideNavService }, { token: THESEAM_BASE_LAYOUT_REF, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SideNavComponent, selector: "seam-side-nav", inputs: { hasHeaderToggle: "hasHeaderToggle", items: "items", expanded: "expanded", overlay: "overlay", menuItemTooltipConfig: "menuItemTooltipConfig" }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "@sideNavAnim": "this._sideNavExpand" } }, providers: [
+SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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,
-            // tslint:disable-next-line:no-use-before-declare
-            useExisting: forwardRef(() => SideNavComponent)
+            useExisting: SideNavComponent
         },
-    ], queries: [{ propertyName: "_sideBarFooterTpl", first: true, predicate: BaseLayoutSideBarFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"></div>\n\n<div class=\"side-nav-inner-wrapper\" [@sideNavExpand]=\"_sideNavExpand\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n        [compact]=\"!(expanded$ | async)\"\n        [isMobile]=\"isMobile$ | async\"\n        [itemType]=\"$any(item)?.itemType\"\n        [icon]=\"$any(item)?.icon\"\n        [label]=\"$any(item)?.label\"\n        [link]=\"$any(item)?.link\"\n        [badgeText]=\"$any(item)?.badge?.text\"\n        [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n        [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n        [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n        [queryParams]=\"$any(item)?.queryParams\"\n        [children]=\"$any(item)?.children\"\n        [active]=\"$any(item).__state.active\"\n        [expanded]=\"$any(item).__state.expanded\"\n        [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n        [menuItemTooltipDisabled]=\"menuItemTooltipDisabled$ | async\">\n      </seam-side-nav-item>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "isMobile", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "menuItemTooltipConfig", "menuItemTooltipDisabled"], exportAs: ["seamSideNavItem"] }, { kind: "component", type: SideNavToggleComponent, selector: "seam-side-nav-toggle", inputs: ["expanded"], outputs: ["toggleExpand"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
+    ], queries: [{ propertyName: "_sideBarHeaderTpl", first: true, predicate: BaseLayoutSideBarHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_sideBarFooterTpl", first: true, predicate: BaseLayoutSideBarFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"\n  (click)=\"collapse()\"></div>\n\n<div\n  class=\"side-nav-inner-wrapper\"\n  [@sideNavExpand]=\"{\n    value: _sideNavExpand,\n    params: {\n      origin: expandOriginTransform,\n      height: expandHeight,\n      width: expandWidth\n    }\n  }\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [toggleIcon]=\"toggleIcon\"\n      [toggleTpl]=\"toggleTpl\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarHeaderPortal\"></ng-template>\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <div class=\"side-nav--group side-nav--group--level-0\">\n        <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n          [compact]=\"!(expanded$ | async)\"\n          [isMobile]=\"isMobile$ | async\"\n          [itemType]=\"$any(item)?.itemType\"\n          [icon]=\"$any(item)?.icon\"\n          [label]=\"$any(item)?.label\"\n          [link]=\"$any(item)?.link\"\n          [badgeText]=\"$any(item)?.badge?.text\"\n          [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n          [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n          [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n          [queryParams]=\"$any(item)?.queryParams\"\n          [children]=\"$any(item)?.children\"\n          [active]=\"$any(item).__state?.active\"\n          [expanded]=\"$any(item).__state?.expanded\"\n          [hideEmptyIcon]=\"hideEmptyIcon\"\n          [indentSize]=\"indentSize\"\n          [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n          [menuItemTooltipDisabled]=\"menuItemTooltipDisabled$ | async\">\n        </seam-side-nav-item>\n      </div>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background: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", "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.
@@ -1729,32 +1763,42 @@ SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
             transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
         ]),
         trigger('sideNavExpand', [
-            // TODO: Make width configurable.
+            // 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,
-                height: '100%',
                 bottom: 0,
                 left: 0,
-                float: 'left',
+                height: '{{ height }}',
+                width: '{{ width }}',
+                transform: '{{ origin }}',
                 zIndex: '9999',
-                width: 'calc(100vw - 50px)',
-                transform: 'translateX(0)'
-            })),
+            }), {
+                params: {
+                    origin: 'translateX(100%)',
+                    height: '100%',
+                    width: 'calc(100vw - 50px)',
+                }
+            }),
             state(COLLAPSED_OVERLAY_STATE, style({
                 position: 'absolute',
                 top: 0,
-                height: '100%',
                 bottom: 0,
                 left: 0,
-                float: 'left',
+                height: '{{ height }}',
+                width: '{{ width }}',
+                transform: '{{ origin }}',
+                'overflow-x': 'hidden',
                 zIndex: '9999',
-                width: 'calc(100vw - 50px)',
-                transform: 'translateX(calc(-100vw + 50px))',
-                'overflow-x': 'hidden'
-            })),
+            }), {
+                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}`, [
@@ -1772,14 +1816,16 @@ SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
 __decorate([
     InputBoolean()
 ], SideNavComponent.prototype, "hasHeaderToggle", void 0);
+__decorate([
+    InputNumber(10)
+], SideNavComponent.prototype, "indentSize", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SideNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-side-nav', providers: [
                         TheSeamSideNavService,
                         {
                             provide: THESEAM_SIDE_NAV_ACCESSOR,
-                            // tslint:disable-next-line:no-use-before-declare
-                            useExisting: forwardRef(() => SideNavComponent)
+                            useExisting: SideNavComponent
                         },
                     ], animations: [
                         //
@@ -1804,32 +1850,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                             transition(sideNavExpandStateChangeFn, animate('0.2s ease-in-out')),
                         ]),
                         trigger('sideNavExpand', [
-                            // TODO: Make width configurable.
+                            // 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,
-                                height: '100%',
                                 bottom: 0,
                                 left: 0,
-                                float: 'left',
+                                height: '{{ height }}',
+                                width: '{{ width }}',
+                                transform: '{{ origin }}',
                                 zIndex: '9999',
-                                width: 'calc(100vw - 50px)',
-                                transform: 'translateX(0)'
-                            })),
+                            }), {
+                                params: {
+                                    origin: 'translateX(100%)',
+                                    height: '100%',
+                                    width: 'calc(100vw - 50px)',
+                                }
+                            }),
                             state(COLLAPSED_OVERLAY_STATE, style({
                                 position: 'absolute',
                                 top: 0,
-                                height: '100%',
                                 bottom: 0,
                                 left: 0,
-                                float: 'left',
+                                height: '{{ height }}',
+                                width: '{{ width }}',
+                                transform: '{{ origin }}',
+                                'overflow-x': 'hidden',
                                 zIndex: '9999',
-                                width: 'calc(100vw - 50px)',
-                                transform: 'translateX(calc(-100vw + 50px))',
-                                'overflow-x': 'hidden'
-                            })),
+                            }), {
+                                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}`, [
@@ -1843,7 +1899,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                             //   ])
                             // ]),
                         ])
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"></div>\n\n<div class=\"side-nav-inner-wrapper\" [@sideNavExpand]=\"_sideNavExpand\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n        [compact]=\"!(expanded$ | async)\"\n        [isMobile]=\"isMobile$ | async\"\n        [itemType]=\"$any(item)?.itemType\"\n        [icon]=\"$any(item)?.icon\"\n        [label]=\"$any(item)?.label\"\n        [link]=\"$any(item)?.link\"\n        [badgeText]=\"$any(item)?.badge?.text\"\n        [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n        [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n        [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n        [queryParams]=\"$any(item)?.queryParams\"\n        [children]=\"$any(item)?.children\"\n        [active]=\"$any(item).__state.active\"\n        [expanded]=\"$any(item).__state.expanded\"\n        [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n        [menuItemTooltipDisabled]=\"menuItemTooltipDisabled$ | async\">\n      </seam-side-nav-item>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"] }]
+                    ], 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\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"\n  (click)=\"collapse()\"></div>\n\n<div\n  class=\"side-nav-inner-wrapper\"\n  [@sideNavExpand]=\"{\n    value: _sideNavExpand,\n    params: {\n      origin: expandOriginTransform,\n      height: expandHeight,\n      width: expandWidth\n    }\n  }\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [toggleIcon]=\"toggleIcon\"\n      [toggleTpl]=\"toggleTpl\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarHeaderPortal\"></ng-template>\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <div class=\"side-nav--group side-nav--group--level-0\">\n        <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n          [compact]=\"!(expanded$ | async)\"\n          [isMobile]=\"isMobile$ | async\"\n          [itemType]=\"$any(item)?.itemType\"\n          [icon]=\"$any(item)?.icon\"\n          [label]=\"$any(item)?.label\"\n          [link]=\"$any(item)?.link\"\n          [badgeText]=\"$any(item)?.badge?.text\"\n          [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n          [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n          [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n          [queryParams]=\"$any(item)?.queryParams\"\n          [children]=\"$any(item)?.children\"\n          [active]=\"$any(item).__state?.active\"\n          [expanded]=\"$any(item).__state?.expanded\"\n          [hideEmptyIcon]=\"hideEmptyIcon\"\n          [indentSize]=\"indentSize\"\n          [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n          [menuItemTooltipDisabled]=\"menuItemTooltipDisabled$ | async\">\n        </seam-side-nav-item>\n      </div>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background: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
                 }, {
@@ -1854,16 +1918,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 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 }]
@@ -1872,48 +1953,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 class TheSeamSideNavModule {
 }
 TheSeamSideNavModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheSeamSideNavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSideNavModule, declarations: [SideNavItemComponent,
+TheSeamSideNavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSideNavModule, imports: [SideNavItemComponent,
         SideNavComponent,
-        SideNavToggleComponent], imports: [CommonModule,
-        RouterModule,
-        TheSeamIconModule,
-        A11yModule,
-        TheSeamScrollbarModule,
-        TheSeamLayoutModule,
-        NgbTooltipModule,
-        PortalModule], exports: [SideNavItemComponent,
+        SideNavToggleComponent], exports: [SideNavItemComponent,
+        SideNavComponent,
+        SideNavToggleComponent] });
+TheSeamSideNavModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSideNavModule, imports: [SideNavItemComponent,
         SideNavComponent,
         SideNavToggleComponent] });
-TheSeamSideNavModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSideNavModule, imports: [CommonModule,
-        RouterModule,
-        TheSeamIconModule,
-        A11yModule,
-        TheSeamScrollbarModule,
-        TheSeamLayoutModule,
-        NgbTooltipModule,
-        PortalModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSideNavModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
+                    imports: [
                         SideNavItemComponent,
                         SideNavComponent,
-                        SideNavToggleComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        TheSeamIconModule,
-                        A11yModule,
-                        TheSeamScrollbarModule,
-                        TheSeamLayoutModule,
-                        NgbTooltipModule,
-                        PortalModule
+                        SideNavToggleComponent,
                     ],
                     exports: [
                         SideNavItemComponent,
                         SideNavComponent,
-                        SideNavToggleComponent
+                        SideNavToggleComponent,
                     ]
                 }]
         }] });
@@ -1933,7 +1992,7 @@ class TopBarMenuButtonComponent extends _TopBarMenuButtonMixinBase {
     get _hasBtnLinkClass() { return !this.compact; }
 }
 TopBarMenuButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TopBarMenuButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TopBarMenuButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TopBarMenuButtonComponent, selector: "button[seamTopBarMenuButton]", inputs: { disabled: "disabled", detailTpl: "detailTpl", compact: "compact", profileIcon: "profileIcon" }, host: { attributes: { "attr.type": "button" }, properties: { "attr.aria-disabled": "disabled.toString()", "attr.disabled": "disabled || null", "class.top-bar-menu-button--compact": "this._hasCompactClass", "class.p-0": "this._hasPadding0Class", "class.rounded": "this._hasRoundedClass", "class.btn-link": "this._hasBtnLinkClass" }, classAttribute: "btn border text-decoration-none py-0" }, exportAs: ["seamButton"], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-row\" *ngIf=\"!compact; else compactTpl\">\n  <div class=\"text-left flex-grow-1 text-truncate\">\n    <ng-template [ngTemplateOutlet]=\"$any(detailTpl)\"></ng-template>\n  </div>\n  <!-- Arrow Button -->\n  <div class=\"pl-2 d-flex flex-column\">\n    <div class=\"flex-grow-1\"></div>\n    <seam-icon class=\"d-block\" [icon]=\"faAngleDown\"></seam-icon>\n    <div class=\"flex-grow-1\"></div>\n  </div>\n</div>\n<ng-template #compactTpl>\n  <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n</ng-template>\n", styles: ["button[seamTopBarMenuButton]{min-width:200px;border-radius:0;border-top:0!important;border-bottom:0!important;border-right:0!important}button[seamTopBarMenuButton].top-bar-menu-button--compact{min-width:40px;border-left:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TopBarMenuButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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);
@@ -1941,12 +2000,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             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',
+                        '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  <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n</ng-template>\n", styles: ["button[seamTopBarMenuButton]{min-width:200px;border-radius:0;border-top:0!important;border-bottom:0!important;border-right:0!important}button[seamTopBarMenuButton].top-bar-menu-button--compact{min-width:40px;border-left:0!important}\n"] }]
+                    }, 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: [{
@@ -1978,19 +2039,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }] } });
 
+class TopBarCompactMenuBtnDetailDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+TopBarCompactMenuBtnDetailDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TopBarCompactMenuBtnDetailDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TopBarCompactMenuBtnDetailDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: TopBarCompactMenuBtnDetailDirective, selector: "[seamTopBarCompactMenuBtnDetail]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", 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.7", ngImport: i0, type: TopBarNavToggleBtnDetailDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TopBarNavToggleBtnDetailDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: TopBarNavToggleBtnDetailDirective, selector: "[seamTopBarNavToggleBtnDetail]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", 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.7", ngImport: i0, type: TopBarItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TopBarItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: TopBarItemDirective, selector: "[seamTopBarItem]", ngImport: i0 });
+TopBarItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: TopBarItemDirective, selector: "[seamTopBarItem]", inputs: { seamTopBarItem: "seamTopBarItem" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TopBarItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamTopBarItem]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { seamTopBarItem: [{
+                type: Input
+            }] } });
 
 class TopBarMenuBtnDetailDirective {
     constructor(template) {
@@ -2046,8 +2141,26 @@ class TheSeamTopBarComponent {
         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 */
@@ -2058,18 +2171,29 @@ class TheSeamTopBarComponent {
     /** @ignore */
     ngAfterContentInit() {
         if (this._topBarItems) {
-            this._items$ = this._topBarItems.changes.pipe(startWith(undefined), takeUntil(this._ngUnsubscribe), map(() => this._topBarItems?.toArray() || []), shareReplay({ bufferSize: 1, refCount: true }));
+            this._topBarItems.changes.pipe(startWith(undefined), takeUntil(this._ngUnsubscribe), map(() => {
+                const items = this._topBarItems?.toArray() || [];
+                const left = items.filter(i => i.position === 'left');
+                const right = items.filter(i => i.position === 'right');
+                const center = items.filter(i => i.position === 'center');
+                this._leftItems.next(left);
+                this._rightItems.next(right);
+                this._centerItems.next(center);
+            }), shareReplay({ bufferSize: 1, refCount: true })).subscribe();
         }
     }
 }
 TheSeamTopBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamTopBarComponent, deps: [{ token: i1.TheSeamLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamTopBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamTopBarComponent, selector: "seam-top-bar", inputs: { logo: "logo", logoSm: "logoSm", logoHref: "logoHref", logoHrefTarget: "logoHrefTarget", logoRoute: "logoRoute", hasTitle: "hasTitle", titleText: "titleText", subTitleText: "subTitleText", profileIcon: "profileIcon" }, queries: [{ propertyName: "_topBarMenu", first: true, predicate: TopBarMenuDirective, descendants: true, static: true }, { propertyName: "_topBarMenuBtnDetailTpl", first: true, predicate: TopBarMenuBtnDetailDirective, descendants: true }, { propertyName: "_topBarItems", predicate: TopBarItemDirective }], exportAs: ["seamTopBar"], ngImport: i0, template: "<!-- Nav Toggle -->\n<div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n  <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"faBars\" iconType=\"borderless-styled-square\"></button>\n</div>\n\n<!-- Logo -->\n<div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n  [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n  <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </a>\n</div>\n\n<ng-template #useLogoRoute>\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </div>\n</ng-template>\n\n<!-- Title -->\n<div class=\"d-flex flex-column flex-grow-1\">\n  <seam-top-bar-title *ngIf=\"hasTitle\"\n    [titleText]=\"titleText\"\n    [subTitleText]=\"subTitleText\"\n    [class.ml-2]=\"isMobile$ | async\">\n  </seam-top-bar-title>\n</div>\n\n<!-- Items -->\n<div class=\"top-bar-icon-container mr-2\">\n  <ng-container *ngFor=\"let item of _items$ | async\">\n    <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n  </ng-container>\n</div>\n\n<!-- Menu -->\n<button seamTopBarMenuButton\n  [seamMenuToggle]=\"_topBarMenu?.menu\"\n  [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n  [compact]=\"isMobile$ | async\"\n  [profileIcon]=\"profileIcon\">\n</button>\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar-icon-container{margin:auto 0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.DefaultImgSrcDirective, selector: "  img[src.xs],    img[src.sm],    img[src.md],    img[src.lg],   img[src.xl],  img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl],  img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]", inputs: ["src.xs", "src.sm", "src.md", "src.lg", "src.xl", "src.lt-sm", "src.lt-md", "src.lt-lg", "src.lt-xl", "src.gt-xs", "src.gt-sm", "src.gt-md", "src.gt-lg"] }, { kind: "component", type: i2$1.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["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", "compact", "profileIcon"], exportAs: ["seamButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TheSeamTopBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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.7", ngImport: i0, type: TheSeamTopBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-top-bar', encapsulation: ViewEncapsulation.None, exportAs: 'seamTopBar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Nav Toggle -->\n<div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n  <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"faBars\" iconType=\"borderless-styled-square\"></button>\n</div>\n\n<!-- Logo -->\n<div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n  [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n  <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </a>\n</div>\n\n<ng-template #useLogoRoute>\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </div>\n</ng-template>\n\n<!-- Title -->\n<div class=\"d-flex flex-column flex-grow-1\">\n  <seam-top-bar-title *ngIf=\"hasTitle\"\n    [titleText]=\"titleText\"\n    [subTitleText]=\"subTitleText\"\n    [class.ml-2]=\"isMobile$ | async\">\n  </seam-top-bar-title>\n</div>\n\n<!-- Items -->\n<div class=\"top-bar-icon-container mr-2\">\n  <ng-container *ngFor=\"let item of _items$ | async\">\n    <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n  </ng-container>\n</div>\n\n<!-- Menu -->\n<button seamTopBarMenuButton\n  [seamMenuToggle]=\"_topBarMenu?.menu\"\n  [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n  [compact]=\"isMobile$ | async\"\n  [profileIcon]=\"profileIcon\">\n</button>\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar-icon-container{margin:auto 0}\n"] }]
+            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 }]
@@ -2079,6 +2203,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             }], _topBarMenuBtnDetailTpl: [{
                 type: ContentChild,
                 args: [TopBarMenuBtnDetailDirective]
+            }], _topBarCompactMenuBtnDetailTpl: [{
+                type: ContentChild,
+                args: [TopBarCompactMenuBtnDetailDirective]
+            }], _topBarNavToggleBtnDetailTpl: [{
+                type: ContentChild,
+                args: [TopBarNavToggleBtnDetailDirective]
             }], logo: [{
                 type: Input
             }], logoSm: [{
@@ -2095,8 +2225,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], subTitleText: [{
                 type: Input
+            }], hasTopBarMenuButton: [{
+                type: Input
             }], profileIcon: [{
                 type: Input
+            }], toggleIcon: [{
+                type: Input
+            }], navToggleAlign: [{
+                type: Input
             }] } });
 
 class TheSeamTopBarModule {
@@ -2107,7 +2243,9 @@ TheSeamTopBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         TopBarMenuButtonComponent,
         TopBarMenuDirective,
         TopBarItemDirective,
-        TopBarMenuBtnDetailDirective], imports: [CommonModule,
+        TopBarMenuBtnDetailDirective,
+        TopBarCompactMenuBtnDetailDirective,
+        TopBarNavToggleBtnDetailDirective], imports: [CommonModule,
         TheSeamLayoutModule,
         TheSeamButtonsModule,
         TheSeamIconModule,
@@ -2118,7 +2256,9 @@ TheSeamTopBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         TopBarMenuDirective,
         TheSeamMenuModule,
         TopBarItemDirective,
-        TopBarMenuBtnDetailDirective] });
+        TopBarMenuBtnDetailDirective,
+        TopBarCompactMenuBtnDetailDirective,
+        TopBarNavToggleBtnDetailDirective] });
 TheSeamTopBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamTopBarModule, imports: [CommonModule,
         TheSeamLayoutModule,
         TheSeamButtonsModule,
@@ -2135,7 +2275,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         TopBarMenuButtonComponent,
                         TopBarMenuDirective,
                         TopBarItemDirective,
-                        TopBarMenuBtnDetailDirective
+                        TopBarMenuBtnDetailDirective,
+                        TopBarCompactMenuBtnDetailDirective,
+                        TopBarNavToggleBtnDetailDirective
                     ],
                     imports: [
                         CommonModule,
@@ -2152,7 +2294,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         TopBarMenuDirective,
                         TheSeamMenuModule,
                         TopBarItemDirective,
-                        TopBarMenuBtnDetailDirective
+                        TopBarMenuBtnDetailDirective,
+                        TopBarCompactMenuBtnDetailDirective,
+                        TopBarNavToggleBtnDetailDirective
                     ]
                 }]
         }] });
@@ -2568,33 +2712,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
         }] });
 
 class TheSeamSchemaFormCheckboxComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor(_jsf) {
+        this._jsf = _jsf;
         this.controlDisabled = false;
         this.boundControl = false;
         this.trueValue = true;
         this.falseValue = false;
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
-        this.jsf.initializeControl(this);
+        this.options = this.layoutNode?.options || {};
+        this._jsf.initializeControl(this);
         if (this.controlValue === null || this.controlValue === undefined) {
-            this.controlValue = this.options.title;
+            this.controlValue = this.options?.title;
         }
     }
     updateValue(event) {
         event.preventDefault();
-        this.jsf.updateValue(this, event.target.checked ? this.trueValue : this.falseValue);
+        this._jsf.updateValue(this, event.target.checked ? this.trueValue : this.falseValue);
     }
     get isChecked() {
-        return this.jsf.getFormControlValue(this) === this.trueValue;
+        return this._jsf.getFormControlValue(this) === this.trueValue;
     }
 }
 TheSeamSchemaFormCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormCheckboxComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamSchemaFormCheckboxComponent, selector: "seam-schema-form-checkbox", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div class=\"mb-3\">\n  <seam-form-field *ngIf=\"boundControl\">\n    <seam-checkbox seamInput\n      [formControl]=\"$any(formControl)\"\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n\n  <seam-form-field *ngIf=\"!boundControl\">\n    <seam-checkbox seamInput\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\"\n      [value]=\"controlValue\"\n      (change)=\"updateValue($event)\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "component", type: i5$1.TheSeamCheckboxComponent, selector: "seam-checkbox", inputs: ["tabIndex", "id", "aria-label", "aria-labelledby", "required", "checked", "disabled", "indeterminate", "name", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["seamCheckbox"] }] });
+TheSeamSchemaFormCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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.7", ngImport: i0, type: TheSeamSchemaFormCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-schema-form-checkbox', template: "<div class=\"mb-3\">\n  <seam-form-field *ngIf=\"boundControl\">\n    <seam-checkbox seamInput\n      [formControl]=\"$any(formControl)\"\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n\n  <seam-form-field *ngIf=\"!boundControl\">\n    <seam-checkbox seamInput\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\"\n      [value]=\"controlValue\"\n      (change)=\"updateValue($event)\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [required]=\"options?.required\"></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n</div>\n" }]
+            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: [{
@@ -2604,25 +2754,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             }] } });
 
 class TheSeamSchemaFormInputComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor(_jsf) {
+        this._jsf = _jsf;
         this.controlDisabled = false;
         this.boundControl = false;
         this.autoCompleteList = [];
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
-        this.jsf.initializeControl(this);
+        this.options = this.layoutNode?.options || {};
+        this._jsf.initializeControl(this);
     }
     updateValue(event) {
-        this.jsf.updateValue(this, event.target.value);
+        this._jsf.updateValue(this, event.target.value);
     }
 }
 TheSeamSchemaFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormInputComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamSchemaFormInputComponent, selector: "seam-schema-form-input", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type\">\n  <datalist *ngIf=\"options?.typeahead?.source\"\n    [id]=\"'control' + layoutNode?._id + 'Autocomplete'\">\n    <option *ngFor=\"let word of options?.typeahead?.source\" [value]=\"word\">\n  </datalist>\n</seam-form-field>\n\n<seam-form-field *ngIf=\"!boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n    [value]=\"controlValue\"\n    (input)=\"updateValue($event)\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type\"\n    [disabled]=\"controlDisabled\">\n  <datalist *ngIf=\"options?.typeahead?.source\"\n    [id]=\"'control' + layoutNode?._id + 'Autocomplete'\">\n    <option *ngFor=\"let word of options?.typeahead?.source\" [value]=\"word\">\n  </datalist>\n</seam-form-field>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$3.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheSeamSchemaFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamSchemaFormInputComponent, isStandalone: true, selector: "seam-schema-form-input", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\" [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", 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]", 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.7", ngImport: i0, type: TheSeamSchemaFormInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-schema-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type\">\n  <datalist *ngIf=\"options?.typeahead?.source\"\n    [id]=\"'control' + layoutNode?._id + 'Autocomplete'\">\n    <option *ngFor=\"let word of options?.typeahead?.source\" [value]=\"word\">\n  </datalist>\n</seam-form-field>\n\n<seam-form-field *ngIf=\"!boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n    [value]=\"controlValue\"\n    (input)=\"updateValue($event)\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type\"\n    [disabled]=\"controlDisabled\">\n  <datalist *ngIf=\"options?.typeahead?.source\"\n    [id]=\"'control' + layoutNode?._id + 'Autocomplete'\">\n    <option *ngFor=\"let word of options?.typeahead?.source\" [value]=\"word\">\n  </datalist>\n</seam-form-field>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'seam-schema-form-input', 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\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", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -2642,9 +2797,9 @@ class TheSeamSchemaFormNumberComponent {
         this.lastValidNumber = '';
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
+        this.options = this.layoutNode?.options || {};
         this.jsf.initializeControl(this);
-        if (this.layoutNode.dataType === 'integer') {
+        if (this.layoutNode?.dataType === 'integer') {
             this.allowDecimal = false;
         }
     }
@@ -2653,10 +2808,15 @@ class TheSeamSchemaFormNumberComponent {
     }
 }
 TheSeamSchemaFormNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormNumberComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamSchemaFormNumberComponent, selector: "seam-schema-form-number", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n    [attr.max]=\"options?.maximum\"\n    [attr.min]=\"options?.minimum\"\n    [attr.step]=\"options?.multipleOf || options?.step || 'any'\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type === 'range' ? 'range' : 'number'\">\n  <span *ngIf=\"layoutNode?.type === 'range'\" [innerHTML]=\"controlValue\"></span>\n</seam-form-field>\n\n<seam-form-field *ngIf=\"!boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n    [attr.max]=\"options?.maximum\"\n    [attr.min]=\"options?.minimum\"\n    [attr.step]=\"options?.multipleOf || options?.step || 'any'\"\n    [value]=\"controlValue\"\n    (input)=\"updateValue($event)\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type === 'range' ? 'range' : 'number'\"\n    [disabled]=\"controlDisabled\">\n  <span *ngIf=\"layoutNode?.type === 'range'\" [innerHTML]=\"controlValue\"></span>\n</seam-form-field>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$3.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheSeamSchemaFormNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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]", 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.7", ngImport: i0, type: TheSeamSchemaFormNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-schema-form-number', changeDetection: ChangeDetectionStrategy.OnPush, template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n    [attr.max]=\"options?.maximum\"\n    [attr.min]=\"options?.minimum\"\n    [attr.step]=\"options?.multipleOf || options?.step || 'any'\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type === 'range' ? 'range' : 'number'\">\n  <span *ngIf=\"layoutNode?.type === 'range'\" [innerHTML]=\"controlValue\"></span>\n</seam-form-field>\n\n<seam-form-field *ngIf=\"!boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [required]=\"options?.required\"\n    [attr.max]=\"options?.maximum\"\n    [attr.min]=\"options?.minimum\"\n    [attr.step]=\"options?.multipleOf || options?.step || 'any'\"\n    [value]=\"controlValue\"\n    (input)=\"updateValue($event)\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    [attr.maxlength]=\"options?.maxLength\"\n    [attr.minlength]=\"options?.minLength\"\n    [attr.pattern]=\"options?.pattern\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? 'readonly' : null\"\n    [type]=\"layoutNode?.type === 'range' ? 'range' : 'number'\"\n    [disabled]=\"controlDisabled\">\n  <span *ngIf=\"layoutNode?.type === 'range'\" [innerHTML]=\"controlValue\"></span>\n</seam-form-field>\n", styles: [":host{display:block}\n"] }]
+            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: [{
@@ -2666,27 +2826,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             }] } });
 
 class TheSeamSchemaFormSelectComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor(_jsf) {
+        this._jsf = _jsf;
         this.controlDisabled = false;
         this.boundControl = false;
         this.selectList = [];
         this.isArray = isArray;
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
+        this.options = this.layoutNode?.options || {};
         this.selectList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, !!this.options.required, !!this.options.flatList);
-        this.jsf.initializeControl(this);
+        this._jsf.initializeControl(this);
     }
     updateValue(event) {
-        this.jsf.updateValue(this, event.value);
+        this._jsf.updateValue(this, event.value);
     }
 }
 TheSeamSchemaFormSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormSelectComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamSchemaFormSelectComponent, selector: "seam-schema-form-select", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <ng-select seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [required]=\"options?.required\"\n    [items]=\"selectList\"\n    bindLabel=\"name\"\n    bindValue=\"value\"\n    [clearable]=\"false\"\n    appendTo=\"body\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? true : false\">\n    <ng-template ng-label-tmp let-item=\"item\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n  </ng-select>\n</seam-form-field>\n\n<seam-form-field *ngIf=\"!boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <ng-select seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [required]=\"options?.required\"\n    [items]=\"selectList\"\n    bindLabel=\"name\"\n    bindValue=\"value\"\n    [clearable]=\"false\"\n    (change)=\"updateValue($event)\"\n    appendTo=\"body\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? true : false\"\n    [disabled]=\"controlDisabled\">\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n  </ng-select>\n</seam-form-field>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$3.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$3.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "component", type: i5$2.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5$2.ɵf, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5$2.ɵh, selector: "[ng-label-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheSeamSchemaFormSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamSchemaFormSelectComponent, isStandalone: true, selector: "seam-schema-form-select", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <ng-select seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [required]=\"options?.required\"\n    [items]=\"selectList\"\n    bindLabel=\"name\"\n    bindValue=\"value\"\n    [clearable]=\"false\"\n    appendTo=\"body\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? true : false\">\n    <ng-template ng-label-tmp let-item=\"item\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n  </ng-select>\n</seam-form-field>\n\n<seam-form-field *ngIf=\"!boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <ng-select seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [required]=\"options?.required\"\n    [items]=\"selectList\"\n    bindLabel=\"name\"\n    bindValue=\"value\"\n    [clearable]=\"false\"\n    (change)=\"updateValue($event)\"\n    appendTo=\"body\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? true : false\"\n    [disabled]=\"controlDisabled\">\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n  </ng-select>\n</seam-form-field>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "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]", 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.7", ngImport: i0, type: TheSeamSchemaFormSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-schema-form-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <ng-select seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [required]=\"options?.required\"\n    [items]=\"selectList\"\n    bindLabel=\"name\"\n    bindValue=\"value\"\n    [clearable]=\"false\"\n    appendTo=\"body\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? true : false\">\n    <ng-template ng-label-tmp let-item=\"item\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n  </ng-select>\n</seam-form-field>\n\n<seam-form-field *ngIf=\"!boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <ng-select seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [required]=\"options?.required\"\n    [items]=\"selectList\"\n    bindLabel=\"name\"\n    bindValue=\"value\"\n    [clearable]=\"false\"\n    (change)=\"updateValue($event)\"\n    appendTo=\"body\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? true : false\"\n    [disabled]=\"controlDisabled\">\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n  </ng-select>\n</seam-form-field>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'seam-schema-form-select', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        JsonSchemaFormModule,
+                        TheSeamFormFieldModule,
+                        NgSelectModule,
+                    ], template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <ng-select seamInput\n    [formControl]=\"$any(formControl)\"\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [required]=\"options?.required\"\n    [items]=\"selectList\"\n    bindLabel=\"name\"\n    bindValue=\"value\"\n    [clearable]=\"false\"\n    appendTo=\"body\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? true : false\">\n    <ng-template ng-label-tmp let-item=\"item\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n  </ng-select>\n</seam-form-field>\n\n<seam-form-field *ngIf=\"!boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <ng-select seamInput\n    [ngClass]=\"options?.fieldHtmlClass\"\n    [id]=\"'control' + layoutNode?._id\"\n    [required]=\"options?.required\"\n    [items]=\"selectList\"\n    bindLabel=\"name\"\n    bindValue=\"value\"\n    [clearable]=\"false\"\n    (change)=\"updateValue($event)\"\n    appendTo=\"body\"\n\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.placeholder]=\"options?.placeholder\"\n    [attr.required]=\"options?.required\"\n    [readonly]=\"options?.readonly ? true : false\"\n    [disabled]=\"controlDisabled\">\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n      <span [innerHTML]=\"item.name\"></span>\n    </ng-template>\n  </ng-select>\n</seam-form-field>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -2702,8 +2868,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 // 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;
+    constructor(_jsf) {
+        this._jsf = _jsf;
         /** @ignore */
         this._ngUnsubscribe = new Subject();
         this.controlDisabled = false;
@@ -2714,8 +2880,8 @@ class TheSeamSchemaFormSubmitSplitComponent {
     }
     /** @ignore */
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
-        this.jsf.initializeControl(this);
+        this.options = this.layoutNode?.options || {};
+        this._jsf.initializeControl(this);
         // NOTE: This is commented out, because there is a bug with submit widgets
         // manually defined in layout. All nodes initialized from the provided
         // layout have their options populated from the defaults and 'disabled' is
@@ -2732,9 +2898,9 @@ class TheSeamSchemaFormSubmitSplitComponent {
         //   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._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;
@@ -2751,33 +2917,33 @@ class TheSeamSchemaFormSubmitSplitComponent {
         this._ngUnsubscribe.complete();
     }
     updateValue(event) {
-        if (typeof this.options.onClick === 'function') {
+        if (typeof this.options?.onClick === 'function') {
             this.options.onClick(event);
         }
         else {
-            this.jsf.updateValue(this, event.target.value);
+            this._jsf.updateValue(this, event.target.value);
         }
     }
     _initDropdown() {
-        if (!hasOwn(this.layoutNode, 'items') || !(this.layoutNode.items || []).length) {
+        if (!hasOwn(this.layoutNode, 'items') || !(this.layoutNode?.items || []).length) {
             return;
         }
         if (isDevMode()) {
-            if (this.layoutNode.items.length > 1) {
+            if (this.layoutNode?.items && this.layoutNode?.items.length > 1) {
                 // eslint-disable-next-line no-console
                 console.warn(`TheSeamSchemaFormSubmitSplitComponent only supports one item.` +
                     ` items after index 0 will be ignored.`);
             }
         }
         const idx = 0;
-        const item = this.layoutNode.items[idx];
+        const item = (this.layoutNode?.items)[idx] || {};
         this._dropdownObj = {
             layoutNode: item,
             layoutIndex: (this.layoutIndex || []).concat(idx),
             dataIndex: this.layoutNode?.dataType === 'array' ? (this.dataIndex || []).concat(idx) : this.dataIndex,
             options: item.options || {}
         };
-        this.jsf.initializeControl(this._dropdownObj);
+        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?
@@ -2817,10 +2983,17 @@ class TheSeamSchemaFormSubmitSplitComponent {
     }
 }
 TheSeamSchemaFormSubmitSplitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormSubmitSplitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamSchemaFormSubmitSplitComponent, selector: "seam-schema-form-submit-split", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button seamButton theme=\"primary\" type=\"submit\"\n      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n      [attr.required]=\"options?.required\"\n      [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n      [disabled]=\"controlDisabled\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [value]=\"controlValue\"\n      (click)=\"updateValue($event)\">\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\">\n        [{{ _selectedItem.name }}]\n      </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\" seamButton theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\">\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\">\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i3$2.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i4$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }] });
+TheSeamSchemaFormSubmitSplitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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.7", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-schema-form-submit-split', template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button seamButton theme=\"primary\" type=\"submit\"\n      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n      [attr.required]=\"options?.required\"\n      [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n      [disabled]=\"controlDisabled\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [value]=\"controlValue\"\n      (click)=\"updateValue($event)\">\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\">\n        [{{ _selectedItem.name }}]\n      </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\" seamButton theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\">\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\">\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+            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: [{
@@ -2829,13 +3002,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }] } });
 
-class TheSeamSchemaFormFrameworkComponent {
+class TheSeamSchemaFormDividerComponent {
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+    }
 }
-TheSeamSchemaFormFrameworkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormFrameworkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamSchemaFormFrameworkComponent, selector: "seam-schema-form-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<select-widget-widget\n  [dataIndex]=\"$any(dataIndex)\"\n  [layoutIndex]=\"$any(layoutIndex)\"\n  [layoutNode]=\"layoutNode\">\n</select-widget-widget>\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormFrameworkComponent, decorators: [{
+TheSeamSchemaFormDividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheSeamSchemaFormDividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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.7", ngImport: i0, type: TheSeamSchemaFormDividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-schema-form-framework', template: "<select-widget-widget\n  [dataIndex]=\"$any(dataIndex)\"\n  [layoutIndex]=\"$any(layoutIndex)\"\n  [layoutNode]=\"layoutNode\">\n</select-widget-widget>\n" }]
+            args: [{ selector: 'seam-schema-form-divider', template: `<hr [class]="options?.htmlClass" />`, standalone: true, styles: [":host{display:block}\n"] }]
         }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -2844,61 +3020,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }] } });
 
-class TheSeamFramework extends Framework {
-    constructor() {
-        super(...arguments);
-        this.name = 'seam-framework';
-        this.framework = TheSeamSchemaFormFrameworkComponent;
-        this.widgets = {
-            'checkbox': TheSeamSchemaFormCheckboxComponent,
-            // 'submit': TheSeamSchemaFormSubmitComponent,
-            'submit': TheSeamSchemaFormSubmitSplitComponent,
-            'text': TheSeamSchemaFormInputComponent,
-            'number': TheSeamSchemaFormNumberComponent,
-            'select': TheSeamSchemaFormSelectComponent
-        };
-    }
-}
-TheSeamFramework.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-TheSeamFramework.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamFramework });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamFramework, decorators: [{
-            type: Injectable
-        }] });
-
-class TheSeamSchemaFormSubmitComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+class TheSeamSchemaFormTelComponent {
+    constructor(_jsf) {
+        this._jsf = _jsf;
         this.controlDisabled = false;
         this.boundControl = false;
+        this.autoCompleteList = [];
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
-        this.jsf.initializeControl(this);
-        if (hasOwn(this.options, 'disabled')) {
-            this.controlDisabled = this.options.disabled;
-        }
-        else if (this.jsf.formOptions.disableInvalidSubmit) {
-            this.controlDisabled = !this.jsf.isValid;
-            this.jsf.isValidChanges.subscribe(isValid => this.controlDisabled = !isValid);
-        }
-        if (this.controlValue === null || this.controlValue === undefined) {
-            this.controlValue = this.options.title;
-        }
+        this.options = this.layoutNode?.options || {};
+        this._jsf.initializeControl(this);
+        console.log(this.controlValue);
+        console.log(this.formControl?.value);
     }
     updateValue(event) {
-        if (typeof this.options.onClick === 'function') {
-            this.options.onClick(event);
-        }
-        else {
-            this.jsf.updateValue(this, event.target.value);
-        }
+        this._jsf.updateValue(this, event.target.value);
     }
 }
-TheSeamSchemaFormSubmitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormSubmitComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormSubmitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamSchemaFormSubmitComponent, selector: "seam-schema-form-submit", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <input\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n    [attr.required]=\"options?.required\"\n    [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n    [disabled]=\"controlDisabled\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [type]=\"layoutNode?.type\"\n    [value]=\"controlValue\"\n    (click)=\"updateValue($event)\">\n</div>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormSubmitComponent, decorators: [{
+TheSeamSchemaFormTelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormTelComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+TheSeamSchemaFormTelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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]", 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.7", ngImport: i0, type: TheSeamSchemaFormTelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-schema-form-submit', template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <input\n    [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n    [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n    [attr.required]=\"options?.required\"\n    [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n    [disabled]=\"controlDisabled\"\n    [id]=\"'control' + layoutNode?._id\"\n    [name]=\"controlName\"\n    [type]=\"layoutNode?.type\"\n    [value]=\"controlValue\"\n    (click)=\"updateValue($event)\">\n</div>\n" }]
+            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: [{
@@ -2907,85 +3056,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }] } });
 
-const controls = [
-    TheSeamSchemaFormCheckboxComponent,
-    TheSeamSchemaFormSubmitComponent,
-    TheSeamSchemaFormSelectComponent,
-    TheSeamSchemaFormInputComponent,
-    TheSeamSchemaFormNumberComponent,
-    TheSeamSchemaFormSubmitSplitComponent
-];
-class TheSeamSchemaFormControlsModule {
-}
-TheSeamSchemaFormControlsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheSeamSchemaFormControlsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormControlsModule, declarations: [TheSeamSchemaFormCheckboxComponent,
-        TheSeamSchemaFormSubmitComponent,
-        TheSeamSchemaFormSelectComponent,
-        TheSeamSchemaFormInputComponent,
-        TheSeamSchemaFormNumberComponent,
-        TheSeamSchemaFormSubmitSplitComponent], imports: [CommonModule,
-        ReactiveFormsModule,
-        JsonSchemaFormModule,
-        TheSeamFormFieldModule,
-        TheSeamCheckboxModule,
-        TheSeamMenuModule,
-        TheSeamButtonsModule,
-        NgSelectModule], exports: [TheSeamSchemaFormCheckboxComponent,
-        TheSeamSchemaFormSubmitComponent,
-        TheSeamSchemaFormSelectComponent,
-        TheSeamSchemaFormInputComponent,
-        TheSeamSchemaFormNumberComponent,
-        TheSeamSchemaFormSubmitSplitComponent, JsonSchemaFormModule] });
-TheSeamSchemaFormControlsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormControlsModule, imports: [CommonModule,
-        ReactiveFormsModule,
-        JsonSchemaFormModule,
-        TheSeamFormFieldModule,
-        TheSeamCheckboxModule,
-        TheSeamMenuModule,
-        TheSeamButtonsModule,
-        NgSelectModule, JsonSchemaFormModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormControlsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ...controls
-                    ],
-                    imports: [
+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() {
+        this.options = this.layoutNode?.options || {};
+        this._jsf.initializeControl(this);
+        console.log(this.options);
+        console.log(this.layoutNode);
+        this.tiles = this.options.tiles || [];
+    }
+    updateValue(event) {
+        this._jsf.updateValue(this, event.target.value);
+    }
+}
+TheSeamSchemaFormTiledSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", 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.7", 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.7", ngImport: i0, type: TheSeamSchemaFormTiledSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-schema-form-tiled-select', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         JsonSchemaFormModule,
                         TheSeamFormFieldModule,
-                        TheSeamCheckboxModule,
-                        TheSeamMenuModule,
-                        TheSeamButtonsModule,
-                        NgSelectModule
-                    ],
-                    exports: [
-                        ...controls,
-                        JsonSchemaFormModule
-                    ],
-                    entryComponents: [
-                        ...controls
-                    ]
-                }]
-        }] });
+                        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 TheSeamSchemaFormModule {
+class TheSeamSchemaFormFrameworkComponent {
 }
-TheSeamSchemaFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheSeamSchemaFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormModule, declarations: [TheSeamSchemaFormFrameworkComponent], imports: [CommonModule,
-        JsonSchemaFormModule,
-        TheSeamSchemaFormControlsModule,
-        WidgetLibraryModule], exports: [TheSeamSchemaFormFrameworkComponent,
-        JsonSchemaFormModule] });
-TheSeamSchemaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormModule, providers: [
-        JsonSchemaFormService,
-        FrameworkLibraryService,
-        WidgetLibraryService,
-        { provide: Framework, useClass: TheSeamFramework, multi: true }
+TheSeamSchemaFormFrameworkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheSeamSchemaFormFrameworkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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.7", 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 = { ...toExtend.widgets, ...override.widgets };
+            }
+            if (hasProperty(override, 'stylesheets')) {
+                toExtend.stylesheets = { ...toExtend.stylesheets, ...override.stylesheets };
+            }
+            if (hasProperty(override, 'scripts')) {
+                toExtend.scripts = { ...toExtend.scripts, ...override.scripts };
+            }
+        }
+    }
+}
+class TheSeamFramework extends Framework {
+    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
+            // 'file': // TODO: Implement
+            // 'date': // TODO: Implement
+            // 'map': // TODO: Implement
+            // 'wizard': // TODO: Implement
+            // 'image': // TODO: Implement
+            // 'tabs': // TODO: Implement
+            // 'card': // TODO: Implement
+            // 'richtext': // TODO: Implement
+        };
+        // console.log('TheSeamFramework', _overrides, this)
+        if (_overrides) {
+            for (const override of _overrides) {
+                // console.log('override', override)
+                if (hasProperty(override, 'widgets')) {
+                    this.widgets = { ...this.widgets, ...override.widgets };
+                }
+            }
+        }
+    }
+}
+TheSeamFramework.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", 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.7", ngImport: i0, type: TheSeamFramework });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", 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.7", ngImport: i0, type: TheSeamSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamSchemaFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormModule, declarations: [TheSeamSchemaFormFrameworkComponent], imports: [CommonModule,
+        JsonSchemaFormModule,
+        WidgetLibraryModule], exports: [TheSeamSchemaFormFrameworkComponent,
+        JsonSchemaFormModule] });
+TheSeamSchemaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormModule, providers: [
+        JsonSchemaFormService,
+        FrameworkLibraryService,
+        WidgetLibraryService,
+        { provide: Framework, useClass: TheSeamFramework, multi: true }
     ], imports: [CommonModule,
         JsonSchemaFormModule,
-        TheSeamSchemaFormControlsModule,
         WidgetLibraryModule, JsonSchemaFormModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormModule, decorators: [{
             type: NgModule,
@@ -2996,7 +3214,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     imports: [
                         CommonModule,
                         JsonSchemaFormModule,
-                        TheSeamSchemaFormControlsModule,
                         WidgetLibraryModule,
                     ],
                     providers: [
@@ -3009,8 +3226,616 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         TheSeamSchemaFormFrameworkComponent,
                         JsonSchemaFormModule
                     ],
-                    entryComponents: [
-                        TheSeamSchemaFormFrameworkComponent
+                }]
+        }] });
+
+function isHorizontalNavItemType(item, type) {
+    return item.itemType === type;
+}
+function isHorizontalNavItemActive(item) {
+    return item.__state?.active ?? false;
+}
+function isHorizontalNavItemExpanded(item) {
+    return item.__state?.expanded ?? false;
+}
+function isHorizontalNavItemFocused(item) {
+    return item.__state?.focused ?? false;
+}
+function horizontalNavItemHasChildren(item) {
+    return horizontalNavItemCanHaveChildren(item) && hasProperty(item, 'children') && item.children.length > 0;
+}
+function horizontalNavItemCanHaveChildren(item) {
+    return isHorizontalNavItemType(item, 'basic') || isHorizontalNavItemType(item, 'link');
+}
+function horizontalNavItemHasActiveChild(item) {
+    if (!horizontalNavItemHasChildren(item)) {
+        return false;
+    }
+    for (const child of item.children) {
+        if (getHorizontalNavItemStateProp(child, 'active') || horizontalNavItemHasActiveChild(child)) {
+            return true;
+        }
+    }
+    return false;
+}
+function horizontalNavItemHasExpandedChild(item) {
+    if (!horizontalNavItemHasChildren(item)) {
+        return false;
+    }
+    for (const child of item.children) {
+        if (getHorizontalNavItemStateProp(child, 'expanded')) {
+            return true;
+        }
+    }
+    return false;
+}
+function horizontalNavItemCanBeActive(item) {
+    return isHorizontalNavItemType(item, 'basic') || isHorizontalNavItemType(item, 'link');
+}
+function horizontalNavItemCanExpand(item) {
+    return horizontalNavItemCanHaveChildren(item);
+}
+function findHorizontalNavLinkItems(items) {
+    const linkItems = [];
+    const _fn = (_items) => {
+        for (const item of _items) {
+            if (isHorizontalNavItemType(item, 'link')) {
+                linkItems.push(item);
+            }
+            if (horizontalNavItemCanHaveChildren(item) && hasProperty(item, 'children')) {
+                _fn(item.children);
+            }
+        }
+    };
+    _fn(items);
+    return linkItems;
+}
+function setHorizontalNavItemStateProp(item, prop, value) {
+    if (hasProperty(item, '__state')) {
+        item.__state[prop] = value;
+    }
+}
+function getHorizontalNavItemStateProp(item, prop) {
+    return setDefaultHorizontalNavItemState(item).__state[prop];
+}
+function setDefaultHorizontalNavItemState(item) {
+    if (hasProperty(item, '__state')) {
+        return item;
+    }
+    item.__state = {
+        active: false,
+        expanded: false,
+        focused: false
+    };
+    // TODO: See if there is a nice way to fix the typing for this.
+    return item;
+}
+function areSameHorizontalNavItem(item1, item2) {
+    if (isNullOrUndefined(item1) || isNullOrUndefined(item2)) {
+        return false;
+    }
+    if (item1.itemType !== item2.itemType) {
+        return false;
+    }
+    if (isHorizontalNavItemType(item1, 'title') && isHorizontalNavItemType(item2, 'title')) {
+        return item1.label === item2.label;
+    }
+    else if (isHorizontalNavItemType(item1, 'divider') && isHorizontalNavItemType(item2, 'divider')) {
+        return item1.label === item2.label;
+    }
+    else if (isHorizontalNavItemType(item1, 'basic') && isHorizontalNavItemType(item2, 'basic')) {
+        return item1.label === item2.label;
+    }
+    else if (isHorizontalNavItemType(item1, 'link') && isHorizontalNavItemType(item2, 'link')) {
+        return item1.label === item2.label && item1.link === item2.link;
+    }
+    else if (isHorizontalNavItemType(item1, 'button') && isHorizontalNavItemType(item2, 'button')) {
+        return item1.onClick === item2.onClick;
+    }
+    return false;
+}
+
+class TheSeamNavService {
+    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 {
+                ...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.7", ngImport: i0, type: TheSeamNavService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+TheSeamNavService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamNavService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", 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 = {
+                    ...value,
+                    placement: value.placement || 'auto',
+                    disabled: typeof 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.7", ngImport: i0, type: NavItemComponent, deps: [{ token: TheSeamNavService }], target: i0.ɵɵFactoryTarget.Component });
+NavItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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.7", 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.7", ngImport: i0, type: HorizontalNavComponent, deps: [{ token: TheSeamNavService }], target: i0.ɵɵFactoryTarget.Component });
+HorizontalNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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.7", 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.7", ngImport: i0, type: TheSeamNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamNavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", 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.7", 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.7", 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,
                     ]
                 }]
         }] });
@@ -3019,5 +3844,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutNavToggleDirective, BaseLayoutSideBarDirective, BaseLayoutSideBarFooterDirective, BaseLayoutTopBarDirective, DashboardComponent, DashboardWidgetContainerComponent, DashboardWidgetPortalOutletDirective, DashboardWidgetTemplateContainerComponent, DashboardWidgetsComponent, DashboardWidgetsPreferencesService, DashboardWidgetsService, HierarchyLevelResolver, HierarchyRouterOutletComponent, SideNavComponent, SideNavItemComponent, SideNavToggleComponent, THESEAM_BASE_LAYOUT_REF, THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, THESEAM_SIDE_NAV_ACCESSOR, THE_SEAM_BASE_LAYOUT, TheSeamBaseLayoutComponent, TheSeamBaseLayoutModule, TheSeamDashboardModule, TheSeamDynamicRouterModule, TheSeamFramework, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarTitleComponent, canBeActive, canExpand, canHaveChildren, fader, findLinkItems, getItemStateProp, hasActiveChild, hasChildren, hasExpandedChild, isExpanded, isNavItemActive, isNavItemType, routeChanges, setDefaultState, setItemStateProp, sideNavExpandStateChangeFn, sideToSide, slider, stepper, transformer };
+export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutNavToggleDirective, BaseLayoutSideBarDirective, BaseLayoutSideBarFooterDirective, BaseLayoutSideBarHeaderDirective, BaseLayoutTopBarDirective, 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, THE_SEAM_BASE_LAYOUT, TheSeamBaseLayoutComponent, TheSeamBaseLayoutModule, TheSeamDashboardModule, TheSeamDynamicRouterModule, TheSeamFramework, TheSeamNavModule, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarCompactMenuBtnDetailDirective, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarNavToggleBtnDetailDirective, TopBarTitleComponent, 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