@theseam/ui-common 0.3.11 → 0.4.0-beta.0

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

@@ -0,0 +1,593 @@
+import { ComponentHarness } from '@angular/cdk/testing';
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { Directive, Input, InjectionToken, Component, ChangeDetectionStrategy, Optional, Inject, Self, HostBinding, forwardRef, ContentChild, ContentChildren, NgModule } from '@angular/core';
+import { InputBoolean } from '@theseam/ui-common/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { Subject, BehaviorSubject, ReplaySubject, Subscription, combineLatest } from 'rxjs';
+import { startWith, map, tap, filter, switchMap, distinctUntilChanged } from 'rxjs/operators';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { toggleAttribute } from '@theseam/ui-common/utils';
+import * as i1$1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@ng-select/ng-select';
+import * as i2$1 from '@theseam/ui-common/form-field-error';
+import { TheSeamFormFieldErrorModule } from '@theseam/ui-common/form-field-error';
+import * as i3 from '@theseam/ui-common/shared';
+import { TheSeamSharedModule } from '@theseam/ui-common/shared';
+
+class TheSeamFormFieldRequiredIndicatorHarness extends ComponentHarness {
+    async isIndicatorVisible() {
+        return (await (await this.host()).text()) === '*';
+    }
+}
+TheSeamFormFieldRequiredIndicatorHarness.hostSelector = 'seam-form-field-required-indicator';
+
+class FormFieldErrorDirective {
+    constructor(template) {
+        this.template = template;
+        this.external = false;
+    }
+    get validatorName() { return this._validatorName || this.seamFormFieldError; }
+    set validatorName(value) { this._validatorName = value; }
+}
+FormFieldErrorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: FormFieldErrorDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FormFieldErrorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: FormFieldErrorDirective, 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: "15.2.3", ngImport: i0, type: FormFieldErrorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamFormFieldError]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { validatorName: [{
+                type: Input
+            }], seamFormFieldError: [{
+                type: Input
+            }], external: [{
+                type: Input
+            }] } });
+
+class FormFieldHelpTextDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+FormFieldHelpTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: FormFieldHelpTextDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FormFieldHelpTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: FormFieldHelpTextDirective, selector: "[seamFormFieldHelpText]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: FormFieldHelpTextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamFormFieldHelpText]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class FormFieldLabelTplDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+FormFieldLabelTplDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: FormFieldLabelTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FormFieldLabelTplDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: FormFieldLabelTplDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamFormFieldLabelTpl]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+const FORM_FIELD_COMPONENT = new InjectionToken('FORM_FIELD_COMPONENT');
+
+class FormFieldRequiredIndicatorComponent {
+    constructor(_formField) {
+        this._formField = _formField;
+        /** Used if a form control is not found. */
+        this.required = false;
+    }
+}
+FormFieldRequiredIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: FormFieldRequiredIndicatorComponent, deps: [{ token: FORM_FIELD_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+FormFieldRequiredIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: FormFieldRequiredIndicatorComponent, selector: "seam-form-field-required-indicator", inputs: { required: "required" }, host: { classAttribute: "text-danger" }, ngImport: i0, template: `
+    <ng-container *ngIf="_formField?.contentInput; else noControl">
+      <ng-container *ngIf="_formField?.contentInput?.required">*</ng-container>
+    </ng-container>
+    <ng-template #noControl>
+      <ng-container *ngIf="required">*</ng-container>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+__decorate([
+    InputBoolean()
+], FormFieldRequiredIndicatorComponent.prototype, "required", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: FormFieldRequiredIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-form-field-required-indicator', template: `
+    <ng-container *ngIf="_formField?.contentInput; else noControl">
+      <ng-container *ngIf="_formField?.contentInput?.required">*</ng-container>
+    </ng-container>
+    <ng-template #noControl>
+      <ng-container *ngIf="required">*</ng-container>
+    </ng-template>
+  `, host: {
+                        'class': 'text-danger'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FORM_FIELD_COMPONENT]
+                }] }]; }, propDecorators: { required: [{
+                type: Input
+            }] } });
+
+// NOTE: Partially based on mat-input: https://github.com/angular/material2/blob/master/src/lib/input/input.ts
+let nextUniqueId = 0;
+class InputDirective {
+    constructor(_elementRef, ngControl, _parentForm, _parentFormGroup, 
+    // 3rd party support
+    _ngSelect) {
+        this._elementRef = _elementRef;
+        this.ngControl = ngControl;
+        this._parentForm = _parentForm;
+        this._parentFormGroup = _parentFormGroup;
+        this._ngSelect = _ngSelect;
+        this._uid = `lib-input-${nextUniqueId++}`;
+        // TODO: Remove this being added to all seamInput elements or break this
+        // directive up. Some elements in our app already have worked around this
+        // class being there, so some refactoring will be required before removal.
+        this._isFormControl = true;
+        this.seamInputSize = 'normal';
+        this._type = 'text';
+        /**
+         * Implemented as part of MatFormFieldControl.
+         * @docs-private
+         */
+        this.required = false;
+        this._disabled = false;
+        this.focused = false;
+        this.stateChanges = new Subject();
+        // @Input()
+        // get value(): string { return this._inputValueAccessor.value; }
+        // set value(value: string) {
+        //   if (value !== this.value) {
+        //     this._inputValueAccessor.value = value;
+        //     this.stateChanges.next();
+        //   }
+        // }
+        /** Whether the element is readonly. */
+        this.readonly = false;
+        // Force setter to be called in case id was not specified.
+        this.id = this.id;
+        if (!this._shouldHaveFormControlCssClass()) {
+            this._isFormControl = false;
+        }
+    }
+    get _isFormControlSmall() {
+        return this._isFormControl && this.seamInputSize === 'sm';
+    }
+    get _isInvalid() {
+        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 id() { return this._id; }
+    set id(value) { this._id = value || this._uid; }
+    /** Input type of the element. */
+    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) */) {
+            this._elementRef.nativeElement.type = this._type;
+        }
+    }
+    /**
+     * Implemented as part of MatFormFieldControl.
+     * @docs-private
+     */
+    get disabled() {
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            return this.ngControl.disabled;
+        }
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        // Browsers may not fire the blur event if the input is disabled too quickly.
+        // Reset from here to ensure that the element doesn't become stuck.
+        if (this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
+    }
+    ngDoCheck() {
+        if (this._isNgSelect()) {
+            this._ngSelect.labelForId = this.id;
+            this._ngSelect.setDisabledState(this.disabled);
+        }
+        else {
+            toggleAttribute(this._elementRef.nativeElement, 'required', this.required);
+            toggleAttribute(this._elementRef.nativeElement, 'disabled', this.disabled);
+        }
+    }
+    /** Should only be textual inputs, but initially our app added to all form controls. */
+    _shouldHaveFormControlCssClass() {
+        return !this._isSeamCheckbox()
+            && !this._isRadioInput()
+            && !this._isNgbRadioGroup()
+            && !this._isTelInput()
+            && !this._isQuillEditor();
+    }
+    /** Determines if the component host is a textarea. */
+    _isTextarea() {
+        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'textarea';
+    }
+    /** Determines if the component host is a ng-select. */
+    _isNgSelect() {
+        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'ng-select';
+    }
+    /** Determines if the component host is a seam-checkbox. */
+    _isSeamCheckbox() {
+        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';
+    }
+    _isNgbRadioGroup() {
+        return this._elementRef.nativeElement.getAttribute('ngbRadioGroup') !== null;
+    }
+    _isTelInput() {
+        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'seam-tel-input';
+    }
+    _isQuillEditor() {
+        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'quill-editor';
+    }
+    /** Make sure the input is a supported type. */
+    // protected _validateType() {
+    //   if (MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1) {
+    //     throw getMatInputUnsupportedTypeError(this._type)
+    //   }
+    // }
+    /** Focuses the input. */
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /** Unfocuses the input. */
+    blur() {
+        this._elementRef.nativeElement.blur();
+    }
+    setValue(value) {
+        if (this.ngControl) {
+            const control = this.ngControl.control;
+            if (control) {
+                control.setValue(value);
+            }
+        }
+    }
+}
+InputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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 });
+InputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: 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: "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"], ngImport: i0 });
+__decorate([
+    InputBoolean()
+], InputDirective.prototype, "required", void 0);
+__decorate([
+    InputBoolean()
+], InputDirective.prototype, "readonly", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", 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-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput]',
+                    exportAs: 'seamInput',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i1$1.NgForm, decorators: [{
+                    type: Optional
+                }] }, { type: i1$1.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i2.NgSelectComponent, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { _isFormControl: [{
+                type: HostBinding,
+                args: ['class.form-control']
+            }], _isFormControlSmall: [{
+                type: HostBinding,
+                args: ['class.form-control-sm']
+            }], _isInvalid: [{
+                type: HostBinding,
+                args: ['class.is-invalid']
+            }], _attrId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], _attrPlaceholder: [{
+                type: HostBinding,
+                args: ['attr.placeholder']
+            }], ariaDescribedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], seamInputSize: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }] } });
+
+let nextLabelUniqueId = 0;
+/**
+ * Should wrap all form controls.
+ */
+class TheSeamFormFieldComponent {
+    /** @ignore */
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        this._helpTextStrSubject = new BehaviorSubject(undefined);
+        this._helpTextTplSubject = new BehaviorSubject(undefined);
+        this._contentInputSubject = new BehaviorSubject(undefined);
+        /** @ignore */
+        this._labelUid = `seam-label-${nextLabelUniqueId++}`;
+        /** @ignore */
+        this._helpTextUid = `seam-help-text-${nextLabelUniqueId++}`;
+        /** @ignore */
+        this._errorPadding = '0px';
+        /**
+         * Used to declare an inline element.
+         *
+         * NOTE: Not well tested or supported, so it may have some issues currently
+         * and could change.
+         */
+        this.inline = false;
+        /**
+         * The label can be on top or inline.
+         *
+         * > Only supports `ltr` direction, so inline will only place the label on the
+         * > left.
+         */
+        this.labelPosition = 'top';
+        /** Max errors to display. */
+        this.maxErrors = -1;
+        /**
+         * A padding error is an always allocated space equivalent to a single line
+         * error string.
+         */
+        this.numPaddingErrors = 1;
+        /** @ignore */
+        this._fieldErrorsSubject = new ReplaySubject(1);
+        /** @ignore */
+        this.fieldErrors$ = this._fieldErrorsSubject.asObservable();
+        /** @ignore */
+        this._fieldErrorsSubject2 = new ReplaySubject(1);
+        /** @ignore */
+        this.fieldErrors2$ = this._fieldErrorsSubject2.asObservable();
+        // get hasHelpText() { return !!this.helpText || !!this._helpTextTpl }
+        this._helpTextSub = Subscription.EMPTY;
+    }
+    /** @ignore */
+    get _displayStyle() { return this.inline ? 'inline-block' : 'block'; }
+    /**
+     * `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; }
+    /**
+     * Help text added below the control.
+     */
+    get helpText() { return this._helpTextStrSubject.value; }
+    set helpText(value) {
+        this._helpTextStrSubject.next(value || undefined);
+    }
+    /**
+     * `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; }
+    /** @ignore */
+    get helpTextTpl() { return this._helpTextTplSubject.value; }
+    set helpTextTpl(value) {
+        this._helpTextTplSubject.next(value || undefined);
+    }
+    /** @ignore */
+    get contentInput() { return this._contentInputSubject.value; }
+    set contentInput(value) { this._contentInputSubject.next(value || undefined); }
+    /** @ignore */
+    get fieldErrors() { return this._fieldErrors; }
+    set fieldErrors(value) {
+        this._fieldErrors = value;
+        if (this._sub) {
+            this._sub.unsubscribe();
+        }
+        if (this.fieldErrors) {
+            this._sub = this.fieldErrors.changes
+                .pipe(startWith(this.fieldErrors))
+                .pipe(map(v => v.toArray()))
+                .pipe(tap(v => {
+                const records = [];
+                for (const item of v) {
+                    if (item.validatorName) {
+                        records.push({
+                            validatorName: item.validatorName,
+                            error: null,
+                            template: item.template,
+                            external: item.external
+                        });
+                    }
+                }
+                this._fieldErrorsSubject2.next(records);
+            }))
+                .subscribe(v => this._fieldErrorsSubject.next(v));
+        }
+    }
+    get isPasswordInput() {
+        return this.contentInput && this.contentInput.type && this.contentInput.type === 'password';
+    }
+    get passwordInputElement() {
+        return this.contentInput && this.contentInput._elementRef && this.contentInput._elementRef.nativeElement;
+    }
+    get hasHelpText() { return !!this._helpTextStrSubject.value || !!this._helpTextTplSubject.value; }
+    /** @ignore */
+    ngOnInit() {
+        this._helpTextSub = this._contentInputSubject.pipe(filter(contentInput => !!contentInput), switchMap(contentInput => combineLatest([
+            this._helpTextStrSubject,
+            this._helpTextTplSubject
+        ]).pipe(map(() => this.hasHelpText), distinctUntilChanged(), tap(() => {
+            if (!!contentInput) {
+                contentInput.ariaDescribedBy = this._helpTextId || undefined;
+            }
+        })))).subscribe();
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._sub?.unsubscribe();
+        this._helpTextSub?.unsubscribe();
+    }
+    /** @ignore */
+    isValidatorMatch(validatorName, tplValidatorName, errors) {
+        const tplValidatorNames = tplValidatorName.split(' ');
+        for (let i = 0; i < tplValidatorNames.length; i++) {
+            const name = tplValidatorNames[i];
+            if (name === validatorName && i === 0) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /** @ignore */
+    _labelElemResized(labelElem) {
+        if (labelElem) {
+            this._errorPadding = `${labelElem.getBoundingClientRect().width}px`;
+        }
+        else {
+            this._errorPadding = '0px';
+        }
+    }
+    getElement() {
+        return this._elementRef.nativeElement;
+    }
+}
+TheSeamFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamFormFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TheSeamFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TheSeamFormFieldComponent, 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,
+            useClass: forwardRef(() => 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.ElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"] }, { kind: "component", type: i3.PasswordInputRevealComponent, 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: "15.2.3", ngImport: i0, type: TheSeamFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-form-field', providers: [
+                        {
+                            provide: FORM_FIELD_COMPONENT,
+                            useClass: forwardRef(() => TheSeamFormFieldComponent),
+                        }
+                    ], 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { _displayStyle: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], inline: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], maxErrors: [{
+                type: Input
+            }], numPaddingErrors: [{
+                type: Input
+            }], labelId: [{
+                type: Input
+            }], helpText: [{
+                type: Input
+            }], helpTextId: [{
+                type: Input
+            }], helpTextTpl: [{
+                type: ContentChild,
+                args: [FormFieldHelpTextDirective, { static: true }]
+            }], labelTpl: [{
+                type: ContentChild,
+                args: [FormFieldLabelTplDirective, { static: true }]
+            }], contentInput: [{
+                type: ContentChild,
+                args: [InputDirective, { static: true }]
+            }], fieldErrors: [{
+                type: ContentChildren,
+                args: [FormFieldErrorDirective]
+            }] } });
+
+class TheSeamFormFieldModule {
+}
+TheSeamFormFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamFormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: TheSeamFormFieldModule, declarations: [TheSeamFormFieldComponent,
+        InputDirective,
+        FormFieldErrorDirective,
+        FormFieldLabelTplDirective,
+        FormFieldRequiredIndicatorComponent,
+        FormFieldHelpTextDirective], imports: [CommonModule,
+        ReactiveFormsModule,
+        TheSeamFormFieldErrorModule,
+        TheSeamSharedModule], exports: [TheSeamFormFieldComponent,
+        InputDirective,
+        FormFieldErrorDirective,
+        FormFieldLabelTplDirective,
+        FormFieldRequiredIndicatorComponent,
+        FormFieldHelpTextDirective] });
+TheSeamFormFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamFormFieldModule, imports: [CommonModule,
+        ReactiveFormsModule,
+        TheSeamFormFieldErrorModule,
+        TheSeamSharedModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamFormFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TheSeamFormFieldComponent,
+                        InputDirective,
+                        FormFieldErrorDirective,
+                        FormFieldLabelTplDirective,
+                        FormFieldRequiredIndicatorComponent,
+                        FormFieldHelpTextDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TheSeamFormFieldErrorModule,
+                        TheSeamSharedModule
+                    ],
+                    exports: [
+                        TheSeamFormFieldComponent,
+                        InputDirective,
+                        FormFieldErrorDirective,
+                        FormFieldLabelTplDirective,
+                        FormFieldRequiredIndicatorComponent,
+                        FormFieldHelpTextDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FORM_FIELD_COMPONENT, FormFieldErrorDirective, FormFieldHelpTextDirective, FormFieldLabelTplDirective, FormFieldRequiredIndicatorComponent, InputDirective, TheSeamFormFieldComponent, TheSeamFormFieldModule, TheSeamFormFieldRequiredIndicatorHarness };
+//# sourceMappingURL=theseam-ui-common-form-field.mjs.map