@theseam/ui-common 0.4.13 → 0.4.15

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

@@ -1,5 +1,5 @@
 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, SkipSelf, Host, Self, ContentChildren, inject } from '@angular/core';
 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';
@@ -37,15 +37,19 @@ import * as i3$2 from '@theseam/ui-common/menu';
 import { TheSeamMenuModule } 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) {
@@ -2568,33 +2572,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 +2614,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 +2657,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 +2668,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 +2686,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 +2728,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 +2740,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 +2758,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 +2777,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 +2843,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: ["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 +2862,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 +2880,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,75 +2916,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }] } });
 
-const controls = [
-    TheSeamSchemaFormCheckboxComponent,
-    TheSeamSchemaFormSubmitComponent,
-    TheSeamSchemaFormSelectComponent,
-    TheSeamSchemaFormInputComponent,
-    TheSeamSchemaFormNumberComponent,
-    TheSeamSchemaFormSubmitSplitComponent
-];
-class TheSeamSchemaFormControlsModule {
+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);
+    }
 }
-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: [
+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 TheSeamSchemaFormFrameworkComponent {
+}
+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,
-        TheSeamSchemaFormControlsModule,
         WidgetLibraryModule], exports: [TheSeamSchemaFormFrameworkComponent,
         JsonSchemaFormModule] });
 TheSeamSchemaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormModule, providers: [
@@ -2985,7 +3064,6 @@ TheSeamSchemaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         { 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 +3074,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     imports: [
                         CommonModule,
                         JsonSchemaFormModule,
-                        TheSeamSchemaFormControlsModule,
                         WidgetLibraryModule,
                     ],
                     providers: [
@@ -3009,9 +3086,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         TheSeamSchemaFormFrameworkComponent,
                         JsonSchemaFormModule
                     ],
-                    entryComponents: [
-                        TheSeamSchemaFormFrameworkComponent
-                    ]
                 }]
         }] });
 
@@ -3019,5 +3093,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, BaseLayoutTopBarDirective, DashboardComponent, DashboardWidgetContainerComponent, DashboardWidgetPortalOutletDirective, DashboardWidgetTemplateContainerComponent, DashboardWidgetsComponent, DashboardWidgetsPreferencesService, DashboardWidgetsService, HierarchyLevelResolver, HierarchyRouterOutletComponent, 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, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarTitleComponent, canBeActive, canExpand, canHaveChildren, extendFramework, fader, findLinkItems, getItemStateProp, hasActiveChild, hasChildren, hasExpandedChild, isExpanded, isNavItemActive, isNavItemType, routeChanges, setDefaultState, setItemStateProp, sideNavExpandStateChangeFn, sideToSide, slider, stepper, transformer };
 //# sourceMappingURL=theseam-ui-common-framework.mjs.map