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

package/fesm2022/theseam-ui-common-form-field.mjs

@@ -30,10 +30,10 @@ class TheSeamFormFieldHarness extends ComponentHarness {
     // private readonly _input = this.locatorFor('input')
     /** Creates a `HarnessPredicate` used to locate a particular `TheSeamFormFieldHarness`. */
     static with(options) {
-        return new HarnessPredicate(TheSeamFormFieldHarness, options)
+        return (new HarnessPredicate(TheSeamFormFieldHarness, options)
             // .addOption('field name', options.name,
             //     (harness, name) => HarnessPredicate.stringMatches(harness.getName(), name))
-            .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label));
+            .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label)));
     }
     async getLabel() {
         return (await this._label()).text();
@@ -46,25 +46,29 @@ class TheSeamFormFieldHarness extends ComponentHarness {
 class FormFieldErrorDirective {
     template;
     static ngAcceptInputType_external;
-    get validatorName() { return this._validatorName || this.seamFormFieldError; }
-    set validatorName(value) { this._validatorName = value; }
+    get validatorName() {
+        return this._validatorName || this.seamFormFieldError;
+    }
+    set validatorName(value) {
+        this._validatorName = value;
+    }
     _validatorName;
     seamFormFieldError;
     external = false;
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormFieldErrorDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: FormFieldErrorDirective, isStandalone: false, selector: "[seamFormFieldError]", inputs: { validatorName: "validatorName", seamFormFieldError: "seamFormFieldError", external: "external" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FormFieldErrorDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: FormFieldErrorDirective, isStandalone: false, selector: "[seamFormFieldError]", inputs: { validatorName: "validatorName", seamFormFieldError: "seamFormFieldError", external: "external" }, ngImport: i0 });
 }
 __decorate([
     InputBoolean()
 ], FormFieldErrorDirective.prototype, "external", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormFieldErrorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FormFieldErrorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamFormFieldError]',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { validatorName: [{
                 type: Input
@@ -79,14 +83,14 @@ class FormFieldHelpTextDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormFieldHelpTextDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: FormFieldHelpTextDirective, isStandalone: false, selector: "[seamFormFieldHelpText]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FormFieldHelpTextDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: FormFieldHelpTextDirective, isStandalone: false, selector: "[seamFormFieldHelpText]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormFieldHelpTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FormFieldHelpTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamFormFieldHelpText]',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
@@ -95,14 +99,14 @@ class FormFieldLabelTplDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormFieldLabelTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: FormFieldLabelTplDirective, isStandalone: false, selector: "[seamFormFieldLabelTpl]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FormFieldLabelTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: FormFieldLabelTplDirective, isStandalone: false, selector: "[seamFormFieldLabelTpl]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormFieldLabelTplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FormFieldLabelTplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamFormFieldLabelTpl]',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
@@ -131,8 +135,8 @@ class FormFieldRequiredIndicatorComponent {
             this._requiredChange.next(this.required);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormFieldRequiredIndicatorComponent, deps: [{ token: FORM_FIELD_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: FormFieldRequiredIndicatorComponent, isStandalone: false, selector: "seam-form-field-required-indicator", inputs: { required: "required" }, host: { classAttribute: "text-danger" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FormFieldRequiredIndicatorComponent, deps: [{ token: FORM_FIELD_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: FormFieldRequiredIndicatorComponent, isStandalone: false, selector: "seam-form-field-required-indicator", inputs: { required: "required" }, host: { classAttribute: "text-danger" }, usesOnChanges: true, ngImport: i0, template: `
     <ng-container *ngIf="_controlRequired$; else noControl">
       <ng-container *ngIf="_controlRequired$ | async">*</ng-container>
     </ng-container>
@@ -144,7 +148,7 @@ class FormFieldRequiredIndicatorComponent {
 __decorate([
     InputBoolean()
 ], FormFieldRequiredIndicatorComponent.prototype, "required", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormFieldRequiredIndicatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FormFieldRequiredIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-form-field-required-indicator', template: `
     <ng-container *ngIf="_controlRequired$; else noControl">
@@ -154,7 +158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
       <ng-container *ngIf="required">*</ng-container>
     </ng-template>
   `, host: {
-                        'class': 'text-danger'
+                        class: 'text-danger',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -185,24 +189,38 @@ class InputDirective {
         return this._isFormControl && this.seamInputSize === 'sm';
     }
     get _isInvalid() {
-        return this.ngControl && this.ngControl.invalid && (this.ngControl.dirty || this.ngControl.touched);
+        return (this.ngControl &&
+            this.ngControl.invalid &&
+            (this.ngControl.dirty || this.ngControl.touched));
+    }
+    get _attrId() {
+        return this._isNgSelect() ? undefined : this.id;
+    }
+    get _attrPlaceholder() {
+        return this.placeholder;
     }
-    get _attrId() { return this._isNgSelect() ? undefined : this.id; }
-    get _attrPlaceholder() { return this.placeholder; }
     ariaDescribedBy;
     seamInputSize = 'normal';
-    get id() { return this._id; }
-    set id(value) { this._id = value || this._uid; }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
     _id;
     /** Input type of the element. */
-    get type() { return this._type; }
+    get type() {
+        return this._type;
+    }
     set type(value) {
         this._type = value || 'text';
         // this._validateType()
         // When using Angular inputs, developers are no longer able to set the properties on the native
         // input element. To ensure that bindings for `type` work, we need to sync the setter
         // with the native property. Textarea elements don't support the type property or attribute.
-        if ((!this._isTextarea() && !this._isNgSelect()) /* && getSupportedInputTypes().has(this._type) */) {
+        if (!this._isTextarea() &&
+            !this._isNgSelect() /* && getSupportedInputTypes().has(this._type) */) {
+            ;
             this._elementRef.nativeElement.type = this._type;
         }
     }
@@ -242,7 +260,7 @@ class InputDirective {
     _readonlyChange = new Subject();
     requiredChange = this._requiredChange.asObservable();
     disabledChange = this._disabledChange.asObservable();
-    readonlyChange = this._readonlyChange.asObservable;
+    readonlyChange = this._readonlyChange.asObservable();
     constructor(_elementRef, ngControl, _parentForm, _parentFormGroup, 
     // 3rd party support
     _ngSelect) {
@@ -271,7 +289,14 @@ class InputDirective {
     }
     ngDoCheck() {
         if (this._isNgSelect()) {
-            this._ngSelect.labelForId = this.id;
+            // this._ngSelect.labelForId = this.id // No longer possible, do to inputs being signals.
+            // More flaky and less performant than old way of just using the input, but should still work.
+            if (this._ngSelect.labelForId() === null) {
+                const inputElement = this._elementRef.nativeElement.querySelector('.ng-input > input');
+                if (inputElement) {
+                    inputElement.id = this.id || '';
+                }
+            }
             this._ngSelect.setDisabledState(this.disabled);
         }
         else {
@@ -281,11 +306,11 @@ class InputDirective {
     }
     /** Should only be textual inputs, but initially our app added to all form controls. */
     _shouldHaveFormControlCssClass() {
-        return !this._isSeamCheckbox() &&
+        return (!this._isSeamCheckbox() &&
             !this._isRadioInput() &&
             !this._isTelInput() &&
             !this._isQuillEditor() &&
-            !this._isRichTextEditor();
+            !this._isRichTextEditor());
     }
     /** Determines if the component host is a textarea. */
     _isTextarea() {
@@ -297,21 +322,21 @@ class InputDirective {
     }
     /** Determines if the component host is a seam-checkbox. */
     _isSeamCheckbox() {
-        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'seam-checkbox';
+        return (this._elementRef.nativeElement.nodeName.toLowerCase() === 'seam-checkbox');
     }
     /** Determines if the component host is a radio input. */
     _isRadioInput() {
-        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'input' &&
-            this._elementRef.nativeElement.type.toLowerCase() === 'radio';
+        return (this._elementRef.nativeElement.nodeName.toLowerCase() === 'input' &&
+            this._elementRef.nativeElement.type.toLowerCase() === 'radio');
     }
     _isTelInput() {
-        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'seam-tel-input';
+        return (this._elementRef.nativeElement.nodeName.toLowerCase() === 'seam-tel-input');
     }
     _isQuillEditor() {
-        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'quill-editor';
+        return (this._elementRef.nativeElement.nodeName.toLowerCase() === 'quill-editor');
     }
     _isRichTextEditor() {
-        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'seam-rich-text';
+        return (this._elementRef.nativeElement.nodeName.toLowerCase() === 'seam-rich-text');
     }
     /** Focuses the input. */
     focus() {
@@ -329,8 +354,8 @@ class InputDirective {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InputDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.NgForm, optional: true }, { token: i1$1.FormGroupDirective, optional: true }, { token: i2.NgSelectComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: InputDirective, isStandalone: false, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: { seamInputSize: "seamInputSize", id: "id", type: "type", placeholder: "placeholder", required: "required", disabled: "disabled", readonly: "readonly" }, host: { properties: { "class.form-control": "this._isFormControl", "class.form-control-sm": "this._isFormControlSmall", "class.is-invalid": "this._isInvalid", "attr.id": "this._attrId", "attr.placeholder": "this._attrPlaceholder", "attr.aria-describedby": "this.ariaDescribedBy" } }, exportAs: ["seamInput"], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: InputDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.NgForm, optional: true }, { token: i1$1.FormGroupDirective, optional: true }, { token: i2.NgSelectComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: InputDirective, isStandalone: false, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: { seamInputSize: "seamInputSize", id: "id", type: "type", placeholder: "placeholder", required: "required", disabled: "disabled", readonly: "readonly" }, host: { properties: { "class.form-control": "this._isFormControl", "class.form-control-sm": "this._isFormControlSmall", "class.is-invalid": "this._isInvalid", "attr.id": "this._attrId", "attr.placeholder": "this._attrPlaceholder", "attr.aria-describedby": "this.ariaDescribedBy" } }, exportAs: ["seamInput"], usesOnChanges: true, ngImport: i0 });
 }
 __decorate([
     InputBoolean()
@@ -338,14 +363,14 @@ __decorate([
 __decorate([
     InputBoolean()
 ], InputDirective.prototype, "readonly", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: InputDirective, decorators: [{
             type: Directive,
             args: [{
                     // TODO: Consider removing restriction and instead adding a dev warning. A few
                     // inputs in the app need to be changed for this first.
                     selector: 'input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]',
                     exportAs: 'seamInput',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
                     type: Optional
@@ -408,7 +433,9 @@ class TheSeamFormFieldComponent {
     /** @ignore */
     _errorPadding = '0px';
     /** @ignore */
-    get _displayStyle() { return this.inline ? 'inline-block' : 'block'; }
+    get _displayStyle() {
+        return this.inline ? 'inline-block' : 'block';
+    }
     /**
      * Used to declare an inline element.
      *
@@ -443,14 +470,20 @@ class TheSeamFormFieldComponent {
      * `id` attribute to add to the label element. This should not be needed in
      * most situations, because a unique id will be generated if not provided.
      */
-    get labelId() { return this._labelId; }
-    set labelId(value) { this._labelId = value || this._labelUid; }
+    get labelId() {
+        return this._labelId;
+    }
+    set labelId(value) {
+        this._labelId = value || this._labelUid;
+    }
     /** @ignore */
     _labelId;
     /**
      * Help text added below the control.
      */
-    get helpText() { return this._helpTextStrSubject.value; }
+    get helpText() {
+        return this._helpTextStrSubject.value;
+    }
     set helpText(value) {
         this._helpTextStrSubject.next(value || undefined);
     }
@@ -458,22 +491,34 @@ class TheSeamFormFieldComponent {
      * `id` attribute to add to the label element. This should not be needed in
      * most situations, because a unique id will be generated if not provided.
      */
-    get helpTextId() { return this._helpTextId; }
-    set helpTextId(value) { this._helpTextId = value || this._helpTextUid; }
+    get helpTextId() {
+        return this._helpTextId;
+    }
+    set helpTextId(value) {
+        this._helpTextId = value || this._helpTextUid;
+    }
     /** @ignore */
     _helpTextId;
     /** @ignore */
-    get helpTextTpl() { return this._helpTextTplSubject.value; }
+    get helpTextTpl() {
+        return this._helpTextTplSubject.value;
+    }
     set helpTextTpl(value) {
         this._helpTextTplSubject.next(value || undefined);
     }
     /** @ignore */
     labelTpl;
     /** @ignore */
-    get contentInput() { return this._contentInputSubject.value; }
-    set contentInput(value) { this._contentInputSubject.next(value || undefined); }
+    get contentInput() {
+        return this._contentInputSubject.value;
+    }
+    set contentInput(value) {
+        this._contentInputSubject.next(value || undefined);
+    }
     /** @ignore */
-    get fieldErrors() { return this._fieldErrors; }
+    get fieldErrors() {
+        return this._fieldErrors;
+    }
     set fieldErrors(value) {
         this._fieldErrors = value;
         if (this._sub) {
@@ -482,8 +527,8 @@ class TheSeamFormFieldComponent {
         if (this.fieldErrors) {
             this._sub = this.fieldErrors.changes
                 .pipe(startWith$1(this.fieldErrors))
-                .pipe(map(v => v.toArray()))
-                .pipe(tap(v => {
+                .pipe(map((v) => v.toArray()))
+                .pipe(tap((v) => {
                 const records = [];
                 for (const item of v) {
                     if (item.validatorName) {
@@ -491,13 +536,13 @@ class TheSeamFormFieldComponent {
                             validatorName: item.validatorName,
                             error: null,
                             template: item.template,
-                            external: item.external
+                            external: item.external,
                         });
                     }
                 }
                 this._fieldErrorsSubject2.next(records);
             }))
-                .subscribe(v => this._fieldErrorsSubject.next(v));
+                .subscribe((v) => this._fieldErrorsSubject.next(v));
         }
     }
     /** @ignore */
@@ -513,12 +558,18 @@ class TheSeamFormFieldComponent {
     /** @ignore */
     fieldErrors2$ = this._fieldErrorsSubject2.asObservable();
     get isPasswordInput() {
-        return this.contentInput && this.contentInput.type && this.contentInput.type === 'password';
+        return (this.contentInput &&
+            this.contentInput.type &&
+            this.contentInput.type === 'password');
     }
     get passwordInputElement() {
-        return this.contentInput && this.contentInput._elementRef && this.contentInput._elementRef.nativeElement;
+        return (this.contentInput &&
+            this.contentInput._elementRef &&
+            this.contentInput._elementRef.nativeElement);
+    }
+    get hasHelpText() {
+        return !!this._helpTextStrSubject.value || !!this._helpTextTplSubject.value;
     }
-    get hasHelpText() { return !!this._helpTextStrSubject.value || !!this._helpTextTplSubject.value; }
     // get hasHelpText() { return !!this.helpText || !!this._helpTextTpl }
     _helpTextSub = Subscription.EMPTY;
     /** @ignore */
@@ -527,14 +578,16 @@ class TheSeamFormFieldComponent {
     }
     /** @ignore */
     ngOnInit() {
-        this._helpTextSub = this._contentInputSubject.pipe(filter(contentInput => !!contentInput), switchMap$1(contentInput => combineLatest([
+        this._helpTextSub = this._contentInputSubject
+            .pipe(filter((contentInput) => !!contentInput), switchMap$1((contentInput) => combineLatest([
             this._helpTextStrSubject,
-            this._helpTextTplSubject
+            this._helpTextTplSubject,
         ]).pipe(map(() => this.hasHelpText), distinctUntilChanged(), tap(() => {
             if (contentInput) {
                 contentInput.ariaDescribedBy = this._helpTextId || undefined;
             }
-        })))).subscribe();
+        }))))
+            .subscribe();
     }
     /** @ignore */
     ngOnDestroy() {
@@ -564,25 +617,25 @@ class TheSeamFormFieldComponent {
     getElement() {
         return this._elementRef.nativeElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamFormFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamFormFieldComponent, isStandalone: false, selector: "seam-form-field", inputs: { inline: "inline", label: "label", labelPosition: "labelPosition", labelClass: "labelClass", maxErrors: "maxErrors", numPaddingErrors: "numPaddingErrors", labelId: "labelId", helpText: "helpText", helpTextId: "helpTextId" }, host: { properties: { "style.display": "this._displayStyle" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamFormFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamFormFieldComponent, isStandalone: false, selector: "seam-form-field", inputs: { inline: "inline", label: "label", labelPosition: "labelPosition", labelClass: "labelClass", maxErrors: "maxErrors", numPaddingErrors: "numPaddingErrors", labelId: "labelId", helpText: "helpText", helpTextId: "helpTextId" }, host: { properties: { "style.display": "this._displayStyle" } }, providers: [
             {
                 provide: FORM_FIELD_COMPONENT,
                 useExisting: TheSeamFormFieldComponent,
-            }
-        ], queries: [{ propertyName: "helpTextTpl", first: true, predicate: FormFieldHelpTextDirective, descendants: true, static: true }, { propertyName: "labelTpl", first: true, predicate: FormFieldLabelTplDirective, descendants: true, static: true }, { propertyName: "contentInput", first: true, predicate: InputDirective, descendants: true, static: true }, { propertyName: "fieldErrors", predicate: FormFieldErrorDirective }], ngImport: i0, template: "<div>\n  <div [class.seam-form-field-inline]=\"inline\">\n    <label *ngIf=\"label || labelTpl\"\n      #labelElem\n      [attr.id]=\"labelId\"\n      [attr.for]=\"contentInput?.id\"\n      class=\"control-label {{ labelClass }}\"\n      (seamElemResized)=\"_labelElemResized(labelElem)\">\n      <ng-container *ngIf=\"labelTpl; else noLabelTpl\">\n        <ng-template [ngTemplateOutlet]=\"labelTpl.template\" [ngTemplateOutletContext]=\"{ $implicit: label, label: label, required: contentInput?.required || false }\"></ng-template>\n      </ng-container>\n      <ng-template #noLabelTpl>\n        {{ label }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n      </ng-template>\n    </label>\n    <ng-container *ngIf=\"!isPasswordInput\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isPasswordInput\">\n      <div class=\"position-relative\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        <seam-password-input-reveal [inputRef]=\"$any(passwordInputElement)\"></seam-password-input-reveal>\n      </div>\n    </ng-container>\n  </div>\n  <!-- Need `.d-block` to make errors show without input sibling selector -->\n  <ng-container *ngIf=\"contentInput\">\n    <seam-form-field-error-list *ngIf=\"fieldErrors$ | async as fieldErrors\"\n      [style.paddingLeft]=\"(label || labelTpl) && inline ? _errorPadding : undefined\"\n      [control]=\"contentInput.ngControl\"\n      [errors]=\"fieldErrors2$ | async\"\n      [maxErrors]=\"maxErrors\"\n      [numPaddingErrors]=\"numPaddingErrors\"\n      class=\"invalid-feedback\">\n    </seam-form-field-error-list>\n  </ng-container>\n</div>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n", styles: [".seam-form-field-inline{display:flex;flex-direction:row}.seam-form-field-inline .control-label{margin-bottom:0;display:flex;flex-direction:column;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.FormFieldErrorListComponent, selector: "seam-form-field-error-list", inputs: ["errors", "showValidatorName", "numPaddingErrors", "listItemTpls", "maxErrors", "control", "showErrors"] }, { kind: "directive", type: i3.TheSeamElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"], exportAs: ["seamElemResized"] }, { kind: "component", type: i3.TheSeamPasswordInputRevealComponent, selector: "seam-password-input-reveal", inputs: ["inputRef", "passwordVisible"] }, { kind: "component", type: FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+            },
+        ], queries: [{ propertyName: "helpTextTpl", first: true, predicate: FormFieldHelpTextDirective, descendants: true, static: true }, { propertyName: "labelTpl", first: true, predicate: FormFieldLabelTplDirective, descendants: true, static: true }, { propertyName: "contentInput", first: true, predicate: InputDirective, descendants: true, static: true }, { propertyName: "fieldErrors", predicate: FormFieldErrorDirective }], ngImport: i0, template: "<div>\n  <div [class.seam-form-field-inline]=\"inline\">\n    <label\n      *ngIf=\"label || labelTpl\"\n      #labelElem\n      [attr.id]=\"labelId\"\n      [attr.for]=\"contentInput?.id\"\n      class=\"control-label {{ labelClass }}\"\n      (seamElemResized)=\"_labelElemResized(labelElem)\"\n    >\n      <ng-container *ngIf=\"labelTpl; else noLabelTpl\">\n        <ng-template\n          [ngTemplateOutlet]=\"labelTpl.template\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: label,\n            label: label,\n            required: contentInput?.required || false,\n          }\"\n        ></ng-template>\n      </ng-container>\n      <ng-template #noLabelTpl>\n        {{ label\n        }}<seam-form-field-required-indicator\n          class=\"pl-1\"\n        ></seam-form-field-required-indicator>\n      </ng-template>\n    </label>\n    <ng-container *ngIf=\"!isPasswordInput\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isPasswordInput\">\n      <div class=\"position-relative\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        <seam-password-input-reveal\n          [inputRef]=\"$any(passwordInputElement)\"\n        ></seam-password-input-reveal>\n      </div>\n    </ng-container>\n  </div>\n  <!-- Need `.d-block` to make errors show without input sibling selector -->\n  <ng-container *ngIf=\"contentInput\">\n    <seam-form-field-error-list\n      *ngIf=\"fieldErrors$ | async as fieldErrors\"\n      [style.paddingLeft]=\"\n        (label || labelTpl) && inline ? _errorPadding : undefined\n      \"\n      [control]=\"contentInput.ngControl\"\n      [errors]=\"fieldErrors2$ | async\"\n      [maxErrors]=\"maxErrors\"\n      [numPaddingErrors]=\"numPaddingErrors\"\n      class=\"invalid-feedback\"\n    >\n    </seam-form-field-error-list>\n  </ng-container>\n</div>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n", styles: [".seam-form-field-inline{display:flex;flex-direction:row}.seam-form-field-inline .control-label{margin-bottom:0;display:flex;flex-direction:column;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.FormFieldErrorListComponent, selector: "seam-form-field-error-list", inputs: ["errors", "showValidatorName", "numPaddingErrors", "listItemTpls", "maxErrors", "control", "showErrors"] }, { kind: "directive", type: i3.TheSeamElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"], exportAs: ["seamElemResized"] }, { kind: "component", type: i3.TheSeamPasswordInputRevealComponent, selector: "seam-password-input-reveal", inputs: ["inputRef", "passwordVisible"] }, { kind: "component", type: FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: ["required"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 __decorate([
     InputBoolean()
 ], TheSeamFormFieldComponent.prototype, "inline", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamFormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-form-field', providers: [
                         {
                             provide: FORM_FIELD_COMPONENT,
                             useExisting: TheSeamFormFieldComponent,
-                        }
-                    ], standalone: false, template: "<div>\n  <div [class.seam-form-field-inline]=\"inline\">\n    <label *ngIf=\"label || labelTpl\"\n      #labelElem\n      [attr.id]=\"labelId\"\n      [attr.for]=\"contentInput?.id\"\n      class=\"control-label {{ labelClass }}\"\n      (seamElemResized)=\"_labelElemResized(labelElem)\">\n      <ng-container *ngIf=\"labelTpl; else noLabelTpl\">\n        <ng-template [ngTemplateOutlet]=\"labelTpl.template\" [ngTemplateOutletContext]=\"{ $implicit: label, label: label, required: contentInput?.required || false }\"></ng-template>\n      </ng-container>\n      <ng-template #noLabelTpl>\n        {{ label }}<seam-form-field-required-indicator class=\"pl-1\"></seam-form-field-required-indicator>\n      </ng-template>\n    </label>\n    <ng-container *ngIf=\"!isPasswordInput\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isPasswordInput\">\n      <div class=\"position-relative\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        <seam-password-input-reveal [inputRef]=\"$any(passwordInputElement)\"></seam-password-input-reveal>\n      </div>\n    </ng-container>\n  </div>\n  <!-- Need `.d-block` to make errors show without input sibling selector -->\n  <ng-container *ngIf=\"contentInput\">\n    <seam-form-field-error-list *ngIf=\"fieldErrors$ | async as fieldErrors\"\n      [style.paddingLeft]=\"(label || labelTpl) && inline ? _errorPadding : undefined\"\n      [control]=\"contentInput.ngControl\"\n      [errors]=\"fieldErrors2$ | async\"\n      [maxErrors]=\"maxErrors\"\n      [numPaddingErrors]=\"numPaddingErrors\"\n      class=\"invalid-feedback\">\n    </seam-form-field-error-list>\n  </ng-container>\n</div>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n", styles: [".seam-form-field-inline{display:flex;flex-direction:row}.seam-form-field-inline .control-label{margin-bottom:0;display:flex;flex-direction:column;justify-content:center}\n"] }]
+                        },
+                    ], standalone: false, template: "<div>\n  <div [class.seam-form-field-inline]=\"inline\">\n    <label\n      *ngIf=\"label || labelTpl\"\n      #labelElem\n      [attr.id]=\"labelId\"\n      [attr.for]=\"contentInput?.id\"\n      class=\"control-label {{ labelClass }}\"\n      (seamElemResized)=\"_labelElemResized(labelElem)\"\n    >\n      <ng-container *ngIf=\"labelTpl; else noLabelTpl\">\n        <ng-template\n          [ngTemplateOutlet]=\"labelTpl.template\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: label,\n            label: label,\n            required: contentInput?.required || false,\n          }\"\n        ></ng-template>\n      </ng-container>\n      <ng-template #noLabelTpl>\n        {{ label\n        }}<seam-form-field-required-indicator\n          class=\"pl-1\"\n        ></seam-form-field-required-indicator>\n      </ng-template>\n    </label>\n    <ng-container *ngIf=\"!isPasswordInput\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isPasswordInput\">\n      <div class=\"position-relative\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        <seam-password-input-reveal\n          [inputRef]=\"$any(passwordInputElement)\"\n        ></seam-password-input-reveal>\n      </div>\n    </ng-container>\n  </div>\n  <!-- Need `.d-block` to make errors show without input sibling selector -->\n  <ng-container *ngIf=\"contentInput\">\n    <seam-form-field-error-list\n      *ngIf=\"fieldErrors$ | async as fieldErrors\"\n      [style.paddingLeft]=\"\n        (label || labelTpl) && inline ? _errorPadding : undefined\n      \"\n      [control]=\"contentInput.ngControl\"\n      [errors]=\"fieldErrors2$ | async\"\n      [maxErrors]=\"maxErrors\"\n      [numPaddingErrors]=\"numPaddingErrors\"\n      class=\"invalid-feedback\"\n    >\n    </seam-form-field-error-list>\n  </ng-container>\n</div>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n", styles: [".seam-form-field-inline{display:flex;flex-direction:row}.seam-form-field-inline .control-label{margin-bottom:0;display:flex;flex-direction:column;justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { _displayStyle: [{
                 type: HostBinding,
                 args: ['style.display']
@@ -619,8 +672,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class TheSeamFormFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamFormFieldModule, declarations: [TheSeamFormFieldComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: TheSeamFormFieldModule, declarations: [TheSeamFormFieldComponent,
             InputDirective,
             FormFieldErrorDirective,
             FormFieldLabelTplDirective,
@@ -634,12 +687,12 @@ class TheSeamFormFieldModule {
             FormFieldLabelTplDirective,
             FormFieldRequiredIndicatorComponent,
             FormFieldHelpTextDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamFormFieldModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamFormFieldModule, imports: [CommonModule,
             ReactiveFormsModule,
             TheSeamFormFieldErrorModule,
             TheSeamSharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamFormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamFormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -648,13 +701,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         FormFieldErrorDirective,
                         FormFieldLabelTplDirective,
                         FormFieldRequiredIndicatorComponent,
-                        FormFieldHelpTextDirective
+                        FormFieldHelpTextDirective,
                     ],
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         TheSeamFormFieldErrorModule,
-                        TheSeamSharedModule
+                        TheSeamSharedModule,
                     ],
                     exports: [
                         TheSeamFormFieldComponent,
@@ -662,8 +715,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         FormFieldErrorDirective,
                         FormFieldLabelTplDirective,
                         FormFieldRequiredIndicatorComponent,
-                        FormFieldHelpTextDirective
-                    ]
+                        FormFieldHelpTextDirective,
+                    ],
                 }]
         }] });