@theseam/ui-common 1.0.2-beta.45 → 1.0.2-beta.48

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

@@ -6,7 +6,7 @@ import { isEmptyInputValue, hasProperty, notNullOrUndefined, observeControlValue
 import { firstValueFrom, isObservable, BehaviorSubject, of, merge, from, Subject, combineLatest, map as map$1, defer, Observable } from 'rxjs';
 import { take, map, switchMap, startWith, distinctUntilChanged, auditTime, tap, shareReplay, mapTo, debounceTime, takeUntil, finalize, filter } from 'rxjs/operators';
 import * as i2$1 from '@angular/common';
-import { AsyncPipe, NgIf, NgFor, NgTemplateOutlet, CommonModule, NgStyle } from '@angular/common';
+import { AsyncPipe, NgIf, NgFor, NgTemplateOutlet, CommonModule } from '@angular/common';
 import { faCheck, faTimes, faAngleDoubleRight, faAngleDoubleLeft, faLock, faUnlock, faAngleLeft, faBars, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 import * as i2 from '@theseam/ui-common/icon';
 import { TheSeamIconModule } from '@theseam/ui-common/icon';
@@ -14,7 +14,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/cdk/portal';
 import { TemplatePortal, PortalModule, BasePortalOutlet, ComponentPortal } from '@angular/cdk/portal';
 import * as i1$3 from '@theseam/ui-common/layout';
-import { TheSeamLayoutService, TheSeamLayoutModule } from '@theseam/ui-common/layout';
+import { TheSeamLayoutService } from '@theseam/ui-common/layout';
 import { TheSeamOverlayScrollbarDirective } from '@theseam/ui-common/scrollbar';
 import { __decorate } from 'tslib';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -33,12 +33,10 @@ import * as i4 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i5 from '@theseam/ui-common/tooltip';
 import { TheSeamTooltipModule } from '@theseam/ui-common/tooltip';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import * as i1$4 from '@angular/flex-layout/extended';
 import * as i3$1 from '@theseam/ui-common/menu';
 import { MenuComponent, TheSeamMenuModule } from '@theseam/ui-common/menu';
 import { faUserCircle } from '@fortawesome/free-regular-svg-icons';
-import * as i1$5 from '@ajsf/core';
+import * as i1$4 from '@ajsf/core';
 import { JsonSchemaFormModule, isArray, buildTitleMap, hasOwn, JsonSchemaFormService, Framework, WidgetLibraryModule, FrameworkLibraryService, WidgetLibraryService } from '@ajsf/core';
 import { TheSeamCheckboxComponent } from '@theseam/ui-common/checkbox';
 import * as i4$1 from '@theseam/ui-common/form-field';
@@ -2422,7 +2420,7 @@ class SideNavComponent {
                 provide: THESEAM_SIDE_NAV_ACCESSOR,
                 useExisting: SideNavComponent,
             },
-        ], queries: [{ propertyName: "_sideBarHeaderTpl", first: true, predicate: BaseLayoutSideBarHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_sideBarFooterTpl", first: true, predicate: BaseLayoutSideBarFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div\n  class=\"side-nav-backdrop\"\n  *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"\n  (click)=\"collapse()\"\n></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>\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle\n      *ngIf=\"hasHeaderToggle\"\n      [toggleIcon]=\"toggleIcon\"\n      [toggleTpl]=\"toggleTpl\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\"\n    >\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\n          *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        >\n          [activeNavigatable]=\"$any(item).activeNavigatable\">\n        </seam-side-nav-item>\n      </div>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:#343a4099;width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TheSeamOverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "ngmodule", type: TheSeamLayoutModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "hideEmptyIcon", "label", "active", "activeNavigatable", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "isMobile", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "menuItemTooltipConfig", "menuItemTooltipDisabled"], exportAs: ["seamSideNavItem"] }, { kind: "component", type: SideNavToggleComponent, selector: "seam-side-nav-toggle", inputs: ["expanded", "toggleIcon", "toggleTpl"], outputs: ["toggleExpand"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], animations: [
+        ], 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\n  class=\"side-nav-backdrop\"\n  *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"\n  (click)=\"collapse()\"\n></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>\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle\n      *ngIf=\"hasHeaderToggle\"\n      [toggleIcon]=\"toggleIcon\"\n      [toggleTpl]=\"toggleTpl\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\"\n    >\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\n          *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        >\n          [activeNavigatable]=\"$any(item).activeNavigatable\">\n        </seam-side-nav-item>\n      </div>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:#343a4099;width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TheSeamOverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "hideEmptyIcon", "label", "active", "activeNavigatable", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "isMobile", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "menuItemTooltipConfig", "menuItemTooltipDisabled"], exportAs: ["seamSideNavItem"] }, { kind: "component", type: SideNavToggleComponent, selector: "seam-side-nav-toggle", inputs: ["expanded", "toggleIcon", "toggleTpl"], outputs: ["toggleExpand"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], animations: [
             //
             // TODO: This animation code turned into a mess. Clean it up and make it
             // more smooth.
@@ -2586,7 +2584,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         CommonModule,
                         A11yModule,
                         TheSeamOverlayScrollbarDirective,
-                        TheSeamLayoutModule,
                         PortalModule,
                         SideNavItemComponent,
                         SideNavToggleComponent,
@@ -2722,11 +2719,11 @@ class TopBarTitleComponent {
     titleText;
     subTitleText;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TopBarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TopBarTitleComponent, isStandalone: true, selector: "seam-top-bar-title", inputs: { titleText: "titleText", subTitleText: "subTitleText" }, ngImport: i0, template: "<h2\n  class=\"mb-0\"\n  [ngStyle]=\"{ 'font-size.px': 32 }\"\n  [ngStyle.lt-md]=\"{ 'font-size.px': 26 }\"\n  [ngStyle.lt-sm]=\"{ 'font-size.px': 20, 'line-height': 1 }\"\n>\n  {{ titleText }}\n  <br fxHide.gt-sm />\n  <small *ngIf=\"subTitleText\" class=\"text-muted\">{{ subTitleText }}</small>\n</h2>\n", styles: ["seam-top-bar-title{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$4.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i1$4.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TopBarTitleComponent, isStandalone: true, selector: "seam-top-bar-title", inputs: { titleText: "titleText", subTitleText: "subTitleText" }, ngImport: i0, template: "<h2 class=\"mb-0 top-bar-title__heading\">\n  {{ titleText }}\n  <br class=\"top-bar-title__break\" />\n  <small *ngIf=\"subTitleText\" class=\"text-muted\">{{ subTitleText }}</small>\n</h2>\n", styles: ["seam-top-bar-title{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}.top-bar-title__heading{font-size:32px}.top-bar-title__break{display:none}@media screen and (max-width:959px){.top-bar-title__break{display:block}}@media screen and (max-width:959px){.top-bar-title__heading{font-size:26px}}@media screen and (max-width:599px){.top-bar-title__heading{font-size:20px;line-height:1}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TopBarTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-top-bar-title', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, NgStyle, FlexLayoutModule], template: "<h2\n  class=\"mb-0\"\n  [ngStyle]=\"{ 'font-size.px': 32 }\"\n  [ngStyle.lt-md]=\"{ 'font-size.px': 26 }\"\n  [ngStyle.lt-sm]=\"{ 'font-size.px': 20, 'line-height': 1 }\"\n>\n  {{ titleText }}\n  <br fxHide.gt-sm />\n  <small *ngIf=\"subTitleText\" class=\"text-muted\">{{ subTitleText }}</small>\n</h2>\n", styles: ["seam-top-bar-title{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}\n"] }]
+            args: [{ selector: 'seam-top-bar-title', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf], template: "<h2 class=\"mb-0 top-bar-title__heading\">\n  {{ titleText }}\n  <br class=\"top-bar-title__break\" />\n  <small *ngIf=\"subTitleText\" class=\"text-muted\">{{ subTitleText }}</small>\n</h2>\n", styles: ["seam-top-bar-title{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}.top-bar-title__heading{font-size:32px}.top-bar-title__break{display:none}@media screen and (max-width:959px){.top-bar-title__break{display:block}}@media screen and (max-width:959px){.top-bar-title__heading{font-size:26px}}@media screen and (max-width:599px){.top-bar-title__heading{font-size:20px;line-height:1}}\n"] }]
         }], propDecorators: { titleText: [{
                 type: Input
             }], subTitleText: [{
@@ -2896,7 +2893,7 @@ class TheSeamTopBarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamTopBarComponent, deps: [{ token: i1$3.TheSeamLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamTopBarComponent, isStandalone: true, selector: "seam-top-bar", inputs: { logo: "logo", logoSm: "logoSm", logoHref: "logoHref", logoHrefTarget: "logoHrefTarget", logoRoute: "logoRoute", hasTitle: "hasTitle", titleText: "titleText", subTitleText: "subTitleText", hasTopBarMenuButton: "hasTopBarMenuButton", profileIcon: "profileIcon", toggleIcon: "toggleIcon", navToggleAlign: "navToggleAlign" }, queries: [{ propertyName: "_topBarMenu", first: true, predicate: TopBarMenuDirective, descendants: true, static: true }, { propertyName: "_topBarMenuBtnDetailTpl", first: true, predicate: TopBarMenuBtnDetailDirective, descendants: true }, { propertyName: "_topBarCompactMenuBtnDetailTpl", first: true, predicate: TopBarCompactMenuBtnDetailDirective, descendants: true }, { propertyName: "_topBarNavToggleBtnDetailTpl", first: true, predicate: TopBarNavToggleBtnDetailDirective, descendants: true }, { propertyName: "_topBarItems", predicate: TopBarItemDirective }], exportAs: ["seamTopBar"], ngImport: i0, template: "<div class=\"top-bar--left d-flex\">\n  <!-- Nav Toggle -->\n  <ng-container *ngIf=\"navToggleAlign === 'left'\">\n    <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n  </ng-container>\n\n  <!-- Logo -->\n  <div\n    class=\"top-bar--logo d-flex flex-column justify-content-center\"\n    *ngIf=\"logoHref; else useLogoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\"\n  >\n    <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </a>\n  </div>\n\n  <ng-template #useLogoRoute>\n    <div\n      class=\"top-bar--logo d-flex flex-column justify-content-center\"\n      [routerLink]=\"logoRoute\"\n      [class.top-bar--logo-mobile]=\"isMobile$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </div>\n  </ng-template>\n\n  <ng-template #logoTpl>\n    <div>\n      <img\n        *ngIf=\"logo\"\n        [src]=\"logo\"\n        [src.lt-md]=\"logoSm ? logoSm : logo\"\n        alt=\"Logo\"\n      />\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    >\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\n    class=\"d-flex flex-column justify-content-center pr-2\"\n    *ngIf=\"isMobile$ | async\"\n  >\n    <ng-container *ngIf=\"_topBarNavToggleBtnDetailTpl; else iconBtn\">\n      <button seamButton seamBaseLayoutNavToggle>\n        <ng-template\n          [ngTemplateOutlet]=\"_topBarNavToggleBtnDetailTpl?.template || null\"\n        ></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #iconBtn>\n      <button\n        seamBaseLayoutNavToggle\n        seamIconBtn\n        [icon]=\"toggleIcon\"\n        iconType=\"borderless-styled-square\"\n      ></button>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:#fff;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar--left{flex-grow:1}.top-bar-items{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i3.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }, { kind: "ngmodule", type: TheSeamMenuModule }, { kind: "directive", type: i3$1.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "ngmodule", type: TheSeamBaseLayoutModule }, { kind: "directive", type: TheSeamBaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: ["type", "aria-label"], exportAs: ["seamBaseLayoutNavToggle"] }, { kind: "ngmodule", type: TheSeamLayoutModule }, { kind: "directive", type: i1$4.DefaultImgSrcDirective, selector: "  img[src.xs],    img[src.sm],    img[src.md],    img[src.lg],   img[src.xl],  img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl],  img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]", inputs: ["src.xs", "src.sm", "src.md", "src.lg", "src.xl", "src.lt-sm", "src.lt-md", "src.lt-lg", "src.lt-xl", "src.gt-xs", "src.gt-sm", "src.gt-md", "src.gt-lg"] }, { kind: "component", type: TopBarTitleComponent, selector: "seam-top-bar-title", inputs: ["titleText", "subTitleText"] }, { kind: "component", type: TopBarMenuButtonComponent, selector: "button[seamTopBarMenuButton]", inputs: ["disabled", "detailTpl", "compactDetailTpl", "compact", "profileIcon"], exportAs: ["seamButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamTopBarComponent, isStandalone: true, selector: "seam-top-bar", inputs: { logo: "logo", logoSm: "logoSm", logoHref: "logoHref", logoHrefTarget: "logoHrefTarget", logoRoute: "logoRoute", hasTitle: "hasTitle", titleText: "titleText", subTitleText: "subTitleText", hasTopBarMenuButton: "hasTopBarMenuButton", profileIcon: "profileIcon", toggleIcon: "toggleIcon", navToggleAlign: "navToggleAlign" }, queries: [{ propertyName: "_topBarMenu", first: true, predicate: TopBarMenuDirective, descendants: true, static: true }, { propertyName: "_topBarMenuBtnDetailTpl", first: true, predicate: TopBarMenuBtnDetailDirective, descendants: true }, { propertyName: "_topBarCompactMenuBtnDetailTpl", first: true, predicate: TopBarCompactMenuBtnDetailDirective, descendants: true }, { propertyName: "_topBarNavToggleBtnDetailTpl", first: true, predicate: TopBarNavToggleBtnDetailDirective, descendants: true }, { propertyName: "_topBarItems", predicate: TopBarItemDirective }], exportAs: ["seamTopBar"], ngImport: i0, template: "<div class=\"top-bar--left d-flex\">\n  <!-- Nav Toggle -->\n  <ng-container *ngIf=\"navToggleAlign === 'left'\">\n    <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n  </ng-container>\n\n  <!-- Logo -->\n  <div\n    class=\"top-bar--logo d-flex flex-column justify-content-center\"\n    *ngIf=\"logoHref; else useLogoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\"\n  >\n    <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </a>\n  </div>\n\n  <ng-template #useLogoRoute>\n    <div\n      class=\"top-bar--logo d-flex flex-column justify-content-center\"\n      [routerLink]=\"logoRoute\"\n      [class.top-bar--logo-mobile]=\"isMobile$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </div>\n  </ng-template>\n\n  <ng-template #logoTpl>\n    <div>\n      <picture *ngIf=\"logo\">\n        <source\n          *ngIf=\"logoSm\"\n          [attr.srcset]=\"logoSm\"\n          media=\"(max-width: 959px)\"\n        />\n        <img [src]=\"logo\" alt=\"Logo\" />\n      </picture>\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    >\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\n    class=\"d-flex flex-column justify-content-center pr-2\"\n    *ngIf=\"isMobile$ | async\"\n  >\n    <ng-container *ngIf=\"_topBarNavToggleBtnDetailTpl; else iconBtn\">\n      <button seamButton seamBaseLayoutNavToggle>\n        <ng-template\n          [ngTemplateOutlet]=\"_topBarNavToggleBtnDetailTpl?.template || null\"\n        ></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #iconBtn>\n      <button\n        seamBaseLayoutNavToggle\n        seamIconBtn\n        [icon]=\"toggleIcon\"\n        iconType=\"borderless-styled-square\"\n      ></button>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:#fff;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar--left{flex-grow:1}.top-bar-items{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i3.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }, { kind: "ngmodule", type: TheSeamMenuModule }, { kind: "directive", type: i3$1.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "ngmodule", type: TheSeamBaseLayoutModule }, { kind: "directive", type: TheSeamBaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: ["type", "aria-label"], exportAs: ["seamBaseLayoutNavToggle"] }, { kind: "component", type: TopBarTitleComponent, selector: "seam-top-bar-title", inputs: ["titleText", "subTitleText"] }, { kind: "component", type: TopBarMenuButtonComponent, selector: "button[seamTopBarMenuButton]", inputs: ["disabled", "detailTpl", "compactDetailTpl", "compact", "profileIcon"], exportAs: ["seamButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 __decorate([
     InputBoolean()
@@ -2916,11 +2913,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         TheSeamIconModule,
                         TheSeamMenuModule,
                         TheSeamBaseLayoutModule,
-                        TheSeamLayoutModule,
                         TopBarTitleComponent,
                         TopBarMenuButtonComponent,
                         // TheSeamBaseLayoutNavToggleDirective,
-                    ], template: "<div class=\"top-bar--left d-flex\">\n  <!-- Nav Toggle -->\n  <ng-container *ngIf=\"navToggleAlign === 'left'\">\n    <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n  </ng-container>\n\n  <!-- Logo -->\n  <div\n    class=\"top-bar--logo d-flex flex-column justify-content-center\"\n    *ngIf=\"logoHref; else useLogoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\"\n  >\n    <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </a>\n  </div>\n\n  <ng-template #useLogoRoute>\n    <div\n      class=\"top-bar--logo d-flex flex-column justify-content-center\"\n      [routerLink]=\"logoRoute\"\n      [class.top-bar--logo-mobile]=\"isMobile$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </div>\n  </ng-template>\n\n  <ng-template #logoTpl>\n    <div>\n      <img\n        *ngIf=\"logo\"\n        [src]=\"logo\"\n        [src.lt-md]=\"logoSm ? logoSm : logo\"\n        alt=\"Logo\"\n      />\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    >\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\n    class=\"d-flex flex-column justify-content-center pr-2\"\n    *ngIf=\"isMobile$ | async\"\n  >\n    <ng-container *ngIf=\"_topBarNavToggleBtnDetailTpl; else iconBtn\">\n      <button seamButton seamBaseLayoutNavToggle>\n        <ng-template\n          [ngTemplateOutlet]=\"_topBarNavToggleBtnDetailTpl?.template || null\"\n        ></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #iconBtn>\n      <button\n        seamBaseLayoutNavToggle\n        seamIconBtn\n        [icon]=\"toggleIcon\"\n        iconType=\"borderless-styled-square\"\n      ></button>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:#fff;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar--left{flex-grow:1}.top-bar-items{display:flex;align-items:center}\n"] }]
+                    ], 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\n    class=\"top-bar--logo d-flex flex-column justify-content-center\"\n    *ngIf=\"logoHref; else useLogoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\"\n  >\n    <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </a>\n  </div>\n\n  <ng-template #useLogoRoute>\n    <div\n      class=\"top-bar--logo d-flex flex-column justify-content-center\"\n      [routerLink]=\"logoRoute\"\n      [class.top-bar--logo-mobile]=\"isMobile$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n    </div>\n  </ng-template>\n\n  <ng-template #logoTpl>\n    <div>\n      <picture *ngIf=\"logo\">\n        <source\n          *ngIf=\"logoSm\"\n          [attr.srcset]=\"logoSm\"\n          media=\"(max-width: 959px)\"\n        />\n        <img [src]=\"logo\" alt=\"Logo\" />\n      </picture>\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    >\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\n    class=\"d-flex flex-column justify-content-center pr-2\"\n    *ngIf=\"isMobile$ | async\"\n  >\n    <ng-container *ngIf=\"_topBarNavToggleBtnDetailTpl; else iconBtn\">\n      <button seamButton seamBaseLayoutNavToggle>\n        <ng-template\n          [ngTemplateOutlet]=\"_topBarNavToggleBtnDetailTpl?.template || null\"\n        ></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #iconBtn>\n      <button\n        seamBaseLayoutNavToggle\n        seamIconBtn\n        [icon]=\"toggleIcon\"\n        iconType=\"borderless-styled-square\"\n      ></button>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:#fff;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar--left{flex-grow:1}.top-bar-items{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.TheSeamLayoutService }], propDecorators: { _topBarMenu: [{
                 type: ContentChild,
                 args: [TopBarMenuDirective, { static: true }]
@@ -2979,7 +2975,6 @@ class TheSeamTopBarModule {
             TopBarCompactMenuBtnDetailDirective,
             TopBarNavToggleBtnDetailDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamTopBarModule, imports: [TheSeamTopBarComponent,
-            TopBarTitleComponent,
             TopBarMenuButtonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamTopBarModule, decorators: [{
@@ -3423,7 +3418,7 @@ class TheSeamSchemaFormCheckboxComponent {
     get isChecked() {
         return this._jsf.getFormControlValue(this) === this.trueValue;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormCheckboxComponent, deps: [{ token: i1$5.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormCheckboxComponent, deps: [{ token: i1$4.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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\n      seamInput\n      [formControl]=\"$any(formControl)\"\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\"\n    >\n      {{ options?.title\n      }}<seam-form-field-required-indicator\n        class=\"pl-1\"\n        [required]=\"options?.required\"\n      ></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n\n  <seam-form-field *ngIf=\"!boundControl\">\n    <seam-checkbox\n      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    >\n      {{ options?.title\n      }}<seam-form-field-required-indicator\n        class=\"pl-1\"\n        [required]=\"options?.required\"\n      ></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "component", type: i4$1.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "component", type: TheSeamCheckboxComponent, selector: "seam-checkbox", inputs: ["tabIndex", "id", "aria-label", "aria-labelledby", "required", "checked", "disabled", "indeterminate", "name", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["seamCheckbox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormCheckboxComponent, decorators: [{
@@ -3435,7 +3430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         TheSeamFormFieldModule,
                         TheSeamCheckboxComponent,
                     ], template: "<div class=\"mb-3\">\n  <seam-form-field *ngIf=\"boundControl\">\n    <seam-checkbox\n      seamInput\n      [formControl]=\"$any(formControl)\"\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\"\n    >\n      {{ options?.title\n      }}<seam-form-field-required-indicator\n        class=\"pl-1\"\n        [required]=\"options?.required\"\n      ></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n\n  <seam-form-field *ngIf=\"!boundControl\">\n    <seam-checkbox\n      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    >\n      {{ options?.title\n      }}<seam-form-field-required-indicator\n        class=\"pl-1\"\n        [required]=\"options?.required\"\n      ></seam-form-field-required-indicator>\n    </seam-checkbox>\n  </seam-form-field>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$5.JsonSchemaFormService }], propDecorators: { layoutNode: [{
+        }], ctorParameters: () => [{ type: i1$4.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
                 type: Input
@@ -3467,7 +3462,7 @@ class TheSeamSchemaFormInputComponent {
     updateValue(event) {
         this._jsf.updateValue(this, event.target.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormInputComponent, deps: [{ token: i1$5.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormInputComponent, deps: [{ token: i1$4.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamSchemaFormInputComponent, isStandalone: true, selector: "seam-schema-form-input", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div [class]=\"options?.htmlClass || ''\">\n  <seam-form-field *ngIf=\"boundControl\">\n    <ng-template seamFormFieldLabelTpl let-required=\"required\">\n      <ng-container *ngIf=\"!options?.notitle\">\n        {{ options?.title\n        }}<seam-form-field-required-indicator\n          class=\"pl-1\"\n          [required]=\"options?.required\"\n        ></seam-form-field-required-indicator>\n      </ng-container>\n    </ng-template>\n    <input\n      seamInput\n      [formControl]=\"$any(formControl)\"\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\"\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    />\n    <datalist\n      *ngIf=\"options?.typeahead?.source\"\n      [id]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    >\n      <option\n        *ngFor=\"let word of options?.typeahead?.source\"\n        [value]=\"word\"\n      ></option>\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\n        }}<seam-form-field-required-indicator\n          class=\"pl-1\"\n          [required]=\"options?.required\"\n        ></seam-form-field-required-indicator>\n      </ng-container>\n    </ng-template>\n    <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      [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    />\n    <datalist\n      *ngIf=\"options?.typeahead?.source\"\n      [id]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    >\n      <option\n        *ngFor=\"let word of options?.typeahead?.source\"\n        [value]=\"word\"\n      ></option>\n    </datalist>\n  </seam-form-field>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$1.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormInputComponent, decorators: [{
@@ -3478,7 +3473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         JsonSchemaFormModule,
                         TheSeamFormFieldModule,
                     ], template: "<div [class]=\"options?.htmlClass || ''\">\n  <seam-form-field *ngIf=\"boundControl\">\n    <ng-template seamFormFieldLabelTpl let-required=\"required\">\n      <ng-container *ngIf=\"!options?.notitle\">\n        {{ options?.title\n        }}<seam-form-field-required-indicator\n          class=\"pl-1\"\n          [required]=\"options?.required\"\n        ></seam-form-field-required-indicator>\n      </ng-container>\n    </ng-template>\n    <input\n      seamInput\n      [formControl]=\"$any(formControl)\"\n      [ngClass]=\"options?.fieldHtmlClass\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [required]=\"options?.required\"\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    />\n    <datalist\n      *ngIf=\"options?.typeahead?.source\"\n      [id]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    >\n      <option\n        *ngFor=\"let word of options?.typeahead?.source\"\n        [value]=\"word\"\n      ></option>\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\n        }}<seam-form-field-required-indicator\n          class=\"pl-1\"\n          [required]=\"options?.required\"\n        ></seam-form-field-required-indicator>\n      </ng-container>\n    </ng-template>\n    <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      [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    />\n    <datalist\n      *ngIf=\"options?.typeahead?.source\"\n      [id]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n    >\n      <option\n        *ngFor=\"let word of options?.typeahead?.source\"\n        [value]=\"word\"\n      ></option>\n    </datalist>\n  </seam-form-field>\n</div>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.JsonSchemaFormService }], propDecorators: { layoutNode: [{
+        }], ctorParameters: () => [{ type: i1$4.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
                 type: Input
@@ -3516,7 +3511,7 @@ class TheSeamSchemaFormNumberComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormNumberComponent, deps: [{ token: i1$5.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormNumberComponent, deps: [{ token: i1$4.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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\n      }}<seam-form-field-required-indicator\n        class=\"pl-1\"\n        [required]=\"options?.required\"\n      ></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input\n    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    [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  />\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\n      }}<seam-form-field-required-indicator\n        class=\"pl-1\"\n        [required]=\"options?.required\"\n      ></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input\n    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    [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  />\n  <span *ngIf=\"layoutNode?.type === 'range'\" [innerHTML]=\"controlValue\"></span>\n</seam-form-field>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$1.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormNumberComponent, decorators: [{
@@ -3527,7 +3522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         JsonSchemaFormModule,
                         TheSeamFormFieldModule,
                     ], template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title\n      }}<seam-form-field-required-indicator\n        class=\"pl-1\"\n        [required]=\"options?.required\"\n      ></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input\n    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    [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  />\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\n      }}<seam-form-field-required-indicator\n        class=\"pl-1\"\n        [required]=\"options?.required\"\n      ></seam-form-field-required-indicator>\n    </ng-container>\n  </ng-template>\n  <input\n    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    [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  />\n  <span *ngIf=\"layoutNode?.type === 'range'\" [innerHTML]=\"controlValue\"></span>\n</seam-form-field>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.JsonSchemaFormService }], propDecorators: { layoutNode: [{
+        }], ctorParameters: () => [{ type: i1$4.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
                 type: Input
@@ -3561,7 +3556,7 @@ class TheSeamSchemaFormSelectComponent {
     updateValue(event) {
         this._jsf.updateValue(this, event.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormSelectComponent, deps: [{ token: i1$5.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormSelectComponent, deps: [{ token: i1$4.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamSchemaFormSelectComponent, isStandalone: true, selector: "seam-schema-form-select", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div [class]=\"options?.htmlClass || ''\">\n  <seam-form-field *ngIf=\"boundControl\">\n    <ng-template seamFormFieldLabelTpl let-required=\"required\">\n      <ng-container *ngIf=\"!options?.notitle\">\n        {{ options?.title\n        }}<seam-form-field-required-indicator\n          class=\"pl-1\"\n        ></seam-form-field-required-indicator>\n      </ng-container>\n    </ng-template>\n    <ng-select\n      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      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.placeholder]=\"options?.placeholder\"\n      [attr.required]=\"options?.required\"\n      [readonly]=\"options?.readonly ? true : false\"\n    >\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\n        }}<seam-form-field-required-indicator\n          class=\"pl-1\"\n        ></seam-form-field-required-indicator>\n      </ng-container>\n    </ng-template>\n    <ng-select\n      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      [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    >\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n        <span [innerHTML]=\"item.name\"></span>\n      </ng-template>\n    </ng-select>\n  </seam-form-field>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$1.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i5$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormSelectComponent, decorators: [{
@@ -3573,7 +3568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         TheSeamFormFieldModule,
                         NgSelectModule,
                     ], template: "<div [class]=\"options?.htmlClass || ''\">\n  <seam-form-field *ngIf=\"boundControl\">\n    <ng-template seamFormFieldLabelTpl let-required=\"required\">\n      <ng-container *ngIf=\"!options?.notitle\">\n        {{ options?.title\n        }}<seam-form-field-required-indicator\n          class=\"pl-1\"\n        ></seam-form-field-required-indicator>\n      </ng-container>\n    </ng-template>\n    <ng-select\n      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      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.placeholder]=\"options?.placeholder\"\n      [attr.required]=\"options?.required\"\n      [readonly]=\"options?.readonly ? true : false\"\n    >\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\n        }}<seam-form-field-required-indicator\n          class=\"pl-1\"\n        ></seam-form-field-required-indicator>\n      </ng-container>\n    </ng-template>\n    <ng-select\n      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      [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    >\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n        <span [innerHTML]=\"item.name\"></span>\n      </ng-template>\n    </ng-select>\n  </seam-form-field>\n</div>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.JsonSchemaFormService }], propDecorators: { layoutNode: [{
+        }], ctorParameters: () => [{ type: i1$4.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
                 type: Input
@@ -3720,7 +3715,7 @@ class TheSeamSchemaFormSubmitSplitComponent {
         const formControl = this._getDropdownControl();
         formControl?.setValue(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, deps: [{ token: i1$5.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, deps: [{ token: i1$4.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamSchemaFormSubmitSplitComponent, isStandalone: true, selector: "seam-schema-form-submit-split", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button\n      seamButton\n      theme=\"primary\"\n      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    >\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\"> [{{ _selectedItem.name }}] </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\"\n        seamButton\n        theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\"\n      >\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button\n            seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\"\n          >\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "ngmodule", type: TheSeamMenuModule }, { kind: "component", type: i3$1.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i3$1.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i3$1.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i3.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, decorators: [{
@@ -3733,7 +3728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         TheSeamMenuModule,
                         TheSeamButtonsModule,
                     ], template: "<div [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button\n      seamButton\n      theme=\"primary\"\n      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    >\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\"> [{{ _selectedItem.name }}] </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\"\n        seamButton\n        theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\"\n      >\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button\n            seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\"\n          >\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.JsonSchemaFormService }], propDecorators: { layoutNode: [{
+        }], ctorParameters: () => [{ type: i1$4.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
                 type: Input
@@ -3787,7 +3782,7 @@ class TheSeamSchemaFormTelComponent {
     updateValue(event) {
         this._jsf.updateValue(this, event.target.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormTelComponent, deps: [{ token: i1$5.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormTelComponent, deps: [{ token: i1$4.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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\n      }}<seam-form-field-required-indicator\n        class=\"pl-1\"\n        [required]=\"options?.required\"\n      ></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  >\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\n      }}<seam-form-field-required-indicator\n        class=\"pl-1\"\n        [required]=\"options?.required\"\n      ></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  >\n  </seam-tel-input>\n</seam-form-field>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "component", type: i4$1.FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "ngmodule", type: TheSeamTelInputModule }, { kind: "component", type: i5$2.TheSeamTelInputComponent, selector: "seam-tel-input", inputs: ["required", "disabled", "tabIndex", "name", "value"], outputs: ["change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormTelComponent, decorators: [{
@@ -3799,7 +3794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         TheSeamFormFieldModule,
                         TheSeamTelInputModule,
                     ], template: "<seam-form-field *ngIf=\"boundControl\">\n  <ng-template seamFormFieldLabelTpl let-required=\"required\">\n    <ng-container *ngIf=\"!options?.notitle\">\n      {{ options?.title\n      }}<seam-form-field-required-indicator\n        class=\"pl-1\"\n        [required]=\"options?.required\"\n      ></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  >\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\n      }}<seam-form-field-required-indicator\n        class=\"pl-1\"\n        [required]=\"options?.required\"\n      ></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  >\n  </seam-tel-input>\n</seam-form-field>\n" }]
-        }], ctorParameters: () => [{ type: i1$5.JsonSchemaFormService }], propDecorators: { layoutNode: [{
+        }], ctorParameters: () => [{ type: i1$4.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
                 type: Input
@@ -3861,7 +3856,7 @@ class TheSeamSchemaFormFrameworkComponent {
     layoutIndex;
     dataIndex;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamSchemaFormFrameworkComponent, isStandalone: true, selector: "seam-schema-form-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, host: { properties: { "attr.data-name": "layoutNode?.node", "attr.data-data-pointer": "layoutNode?.dataPointer" } }, ngImport: i0, template: "<select-widget-widget\n  [dataIndex]=\"$any(dataIndex)\"\n  [layoutIndex]=\"$any(layoutIndex)\"\n  [layoutNode]=\"layoutNode\"\n>\n</select-widget-widget>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "component", type: i1$5.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamSchemaFormFrameworkComponent, isStandalone: true, selector: "seam-schema-form-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, host: { properties: { "attr.data-name": "layoutNode?.node", "attr.data-data-pointer": "layoutNode?.dataPointer" } }, ngImport: i0, template: "<select-widget-widget\n  [dataIndex]=\"$any(dataIndex)\"\n  [layoutIndex]=\"$any(layoutIndex)\"\n  [layoutNode]=\"layoutNode\"\n>\n</select-widget-widget>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: JsonSchemaFormModule }, { kind: "component", type: i1$4.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSchemaFormFrameworkComponent, decorators: [{
             type: Component,