onshore-forms 0.0.21 → 0.0.23

package/fesm2020/onshore-forms.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ChangeDetectionStrategy, Input, HostListener, Self, Optional, EventEmitter, Output, NgModule } from '@angular/core';
+import { Injectable, Component, ChangeDetectionStrategy, Input, ViewChild, HostListener, Self, Optional, EventEmitter, Output, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Subject, debounceTime, distinctUntilChanged, skip } from 'rxjs';
@@ -213,6 +213,7 @@ class OnshoreFormsService {
                 if (item.subformArray) {
                     form.controls[item.name] = new FormArray([]);
                     form.controls[item.name].setParent(form);
+                    this.subscribeNestedFormArray(form.controls[item.name]);
                 }
                 if (item.subformObject) {
                     form.controls[item.name] = new FormGroup({});
@@ -229,6 +230,14 @@ class OnshoreFormsService {
         });
         return form;
     }
+    subscribeNestedFormArray(nestedFormItem) {
+        this.subscriptions.push(nestedFormItem.valueChanges.subscribe(() => {
+            this.form?.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+        }));
+        this.subscriptions.push(nestedFormItem.statusChanges.subscribe(() => {
+            this.form?.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+        }));
+    }
     subscribeNestedFormGroup(nestedFormItem) {
         this.subscriptions.push(nestedFormItem.valueChanges.subscribe(() => {
             this.form?.updateValueAndValidity({ onlySelf: true, emitEvent: false });
@@ -328,14 +337,15 @@ class OnshoreFormItemContainer {
         this.cdr.markForCheck();
     }
     onWindowResize() {
-        if (window.innerWidth > 500 && this.formTemplate.layout === OnshoreFormTemplateLayout.auto) {
+        const conatinerWidth = this.formContainer?.nativeElement.offsetWidth;
+        if (conatinerWidth > 500 && this.formTemplate.layout === OnshoreFormTemplateLayout.auto && this.layout !== OnshoreFormTemplateLayout.horizontal) {
             this.layout = OnshoreFormTemplateLayout.horizontal;
+            this.cdr.markForCheck();
         }
-        if (window.innerWidth <= 500 && this.formTemplate.layout === OnshoreFormTemplateLayout.auto) {
+        if (conatinerWidth <= 500 && this.formTemplate.layout === OnshoreFormTemplateLayout.auto && this.layout !== OnshoreFormTemplateLayout.vertical) {
             this.layout = OnshoreFormTemplateLayout.vertical;
+            this.cdr.markForCheck();
         }
-        console.log("resize", window.innerWidth, this.layout);
-        this.cdr.markForCheck();
     }
     ngOnInit() {
         this.ngControl?.control?.valueChanges.subscribe(() => {
@@ -375,14 +385,17 @@ class OnshoreFormItemContainer {
     }
 }
 OnshoreFormItemContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormItemContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: { formTemplate: "formTemplate", ngControl: "ngControl" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4\">\n  <div class=\"flex w-full\"\n       [class.flex-column]=\"layout == OnshoreFormTemplateLayout.vertical\"\n       [class.flex-row]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n       [class.justify-content-between]=\"layout == OnshoreFormTemplateLayout.horizontal\">\n\n    <div #formLabel\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n      <b [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mb-2]=\"layout == OnshoreFormTemplateLayout.vertical\">\n        {{formTemplate.label}}\n        <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n      </b>\n\n      <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n    </div>\n\n    <div class=\"flex w-full\">\n      <p-toggleButton\n        *ngIf=\"formTemplate.locked\"\n        (onChange)=\"lockChanged($event.checked)\"\n        onIcon=\"fa fa-lock-open\"\n        offIcon=\"fa fa-lock\"\n        class=\"mr-2\"\n        [style]=\"{height: '36px'}\"\n        [disabled]=\"!formTemplate.enabled\">\n      </p-toggleButton>\n\n      <ng-content></ng-content>\n    </div>\n\n    <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n  </div>\n\n  <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\">\n    </onshore-form-validation-output>\n  </div>\n\n  <div [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3$1.ToggleButton, selector: "p-toggleButton", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "iconPos"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormItemContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: { formTemplate: "formTemplate", ngControl: "ngControl" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4\" #formContainer>\n  <div class=\"flex w-full\"\n       [class.flex-column]=\"layout == OnshoreFormTemplateLayout.vertical\"\n       [class.flex-row]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n       [class.justify-content-between]=\"layout == OnshoreFormTemplateLayout.horizontal\">\n\n    <div #formLabel\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n      <b [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mb-2]=\"layout == OnshoreFormTemplateLayout.vertical\">\n        {{formTemplate.label}}\n        <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n      </b>\n\n      <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n    </div>\n\n    <div class=\"flex w-full\">\n      <p-toggleButton\n        *ngIf=\"formTemplate.locked\"\n        (onChange)=\"lockChanged($event.checked)\"\n        onIcon=\"fa fa-lock-open\"\n        offIcon=\"fa fa-lock\"\n        class=\"mr-2\"\n        [style]=\"{height: '36px'}\"\n        [disabled]=\"!formTemplate.enabled\">\n      </p-toggleButton>\n\n      <ng-content></ng-content>\n    </div>\n\n    <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n  </div>\n\n  <div *ngIf=\"ngControl.control.dirty\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\">\n    </onshore-form-validation-output>\n  </div>\n\n  <div [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3$1.ToggleButton, selector: "p-toggleButton", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "iconPos"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-item-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-4\">\n  <div class=\"flex w-full\"\n       [class.flex-column]=\"layout == OnshoreFormTemplateLayout.vertical\"\n       [class.flex-row]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n       [class.justify-content-between]=\"layout == OnshoreFormTemplateLayout.horizontal\">\n\n    <div #formLabel\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n      <b [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mb-2]=\"layout == OnshoreFormTemplateLayout.vertical\">\n        {{formTemplate.label}}\n        <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n      </b>\n\n      <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n    </div>\n\n    <div class=\"flex w-full\">\n      <p-toggleButton\n        *ngIf=\"formTemplate.locked\"\n        (onChange)=\"lockChanged($event.checked)\"\n        onIcon=\"fa fa-lock-open\"\n        offIcon=\"fa fa-lock\"\n        class=\"mr-2\"\n        [style]=\"{height: '36px'}\"\n        [disabled]=\"!formTemplate.enabled\">\n      </p-toggleButton>\n\n      <ng-content></ng-content>\n    </div>\n\n    <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n  </div>\n\n  <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\">\n    </onshore-form-validation-output>\n  </div>\n\n  <div [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n  </div>\n\n</div>\n" }]
+            args: [{ selector: 'onshore-form-item-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-4\" #formContainer>\n  <div class=\"flex w-full\"\n       [class.flex-column]=\"layout == OnshoreFormTemplateLayout.vertical\"\n       [class.flex-row]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n       [class.justify-content-between]=\"layout == OnshoreFormTemplateLayout.horizontal\">\n\n    <div #formLabel\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n      <b [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mb-2]=\"layout == OnshoreFormTemplateLayout.vertical\">\n        {{formTemplate.label}}\n        <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n      </b>\n\n      <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n    </div>\n\n    <div class=\"flex w-full\">\n      <p-toggleButton\n        *ngIf=\"formTemplate.locked\"\n        (onChange)=\"lockChanged($event.checked)\"\n        onIcon=\"fa fa-lock-open\"\n        offIcon=\"fa fa-lock\"\n        class=\"mr-2\"\n        [style]=\"{height: '36px'}\"\n        [disabled]=\"!formTemplate.enabled\">\n      </p-toggleButton>\n\n      <ng-content></ng-content>\n    </div>\n\n    <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n  </div>\n\n  <div *ngIf=\"ngControl.control.dirty\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\">\n    </onshore-form-validation-output>\n  </div>\n\n  <div [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n  </div>\n\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
                 type: Input
             }], ngControl: [{
                 type: Input
+            }], formContainer: [{
+                type: ViewChild,
+                args: ['formContainer']
             }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -423,10 +436,10 @@ class OnshoreFormInputItemComponent {
     }
 }
 OnshoreFormInputItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormInputItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormInputItemComponent, selector: "onshore-form-input-item", inputs: { formTemplate: "formTemplate", step: "step", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <span class=\"p-inputgroup w-full\">\n\n      <textarea  *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n               class=\"w-full\"\n               [name]=\"formTemplate.name\"\n               [placeholder]=\"formTemplate.placeholder ?? ''\"\n               [disabled]=\"disabled\"\n               [rows]=\"3\"\n               [cols]=\"30\"\n               pInputTextarea\n               [autoResize]=\"true\"\n               [formControl]=\"ngControl.control\"\n               [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n               [minLength]=\"minLength\"\n               [maxLength]=\"maxLength\"></textarea>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n             class=\"w-full\"\n             [type]=\"formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n             class=\"w-full\"\n             [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n                     class=\"w-full\"\n                     [name]=\"formTemplate.name\"\n                     [placeholder]=\"formTemplate.placeholder ?? 0\"\n                     [disabled]=\"disabled\"\n                     [formControl]=\"ngControl.control\"\n                     [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n                     [showButtons]=\"true\"\n                     [step]=\"step ?? 1\"\n                     [min]=\"min\"\n                     [max]=\"max\">\n      </p-inputNumber>\n\n      <span class=\"p-inputgroup-addon\" *ngIf=\"!disabled\">\n        <i class=\"fa\"\n          [class.fa-check]=\"formTemplate.required && (ngControl.control.valid || ngControl.control.untouched)\"\n          [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n          [class.onshore-color-gray-3]=\"ngControl.control.untouched\"\n          [class.onshore-color-success]=\"ngControl.control.touched && ngControl.control.valid\"\n          [class.onshore-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\">\n        </i>\n      </span>\n\n      <span *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n          (click)=\"passwordVisible = !passwordVisible\"\n          class=\"p-inputgroup-addon cursor-pointer\">\n        <i class=\"fa\"\n           [class.fa-eye-slash]=\"passwordVisible\"\n           [class.fa-eye]=\"!passwordVisible\"\n        ></i>\n      </span>\n\n  </span>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormInputItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormInputItemComponent, selector: "onshore-form-input-item", inputs: { formTemplate: "formTemplate", step: "step", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <span class=\"p-inputgroup w-full\">\n\n      <textarea  *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n               class=\"w-full\"\n               [name]=\"formTemplate.name\"\n               [placeholder]=\"formTemplate.placeholder ?? ''\"\n               [disabled]=\"disabled\"\n               [rows]=\"3\"\n               [cols]=\"30\"\n               pInputTextarea\n               [autoResize]=\"true\"\n               [formControl]=\"ngControl.control\"\n               [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n               [minLength]=\"minLength\"\n               [maxLength]=\"maxLength\"></textarea>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n             class=\"w-full\"\n             [type]=\"formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n             class=\"w-full\"\n             [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n                     class=\"w-full\"\n                     [name]=\"formTemplate.name\"\n                     [placeholder]=\"formTemplate.placeholder ?? 0\"\n                     [disabled]=\"disabled\"\n                     [formControl]=\"ngControl.control\"\n                     [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n                     [showButtons]=\"true\"\n                     [step]=\"step ?? 1\"\n                     [min]=\"min\"\n                     [max]=\"max\">\n      </p-inputNumber>\n\n      <span class=\"p-inputgroup-addon\" *ngIf=\"!disabled\">\n        <i class=\"fa\"\n          [class.fa-check]=\"formTemplate.required && (ngControl.control.valid || !ngControl.control.dirty)\"\n          [class.fa-exclamation-triangle]=\"ngControl.control.dirty && ngControl.control.invalid\"\n          [class.onshore-color-gray-3]=\"!ngControl.control.dirty\"\n          [class.onshore-color-success]=\"ngControl.control.dirty && ngControl.control.valid\"\n          [class.onshore-color-danger]=\"ngControl.control.dirty && ngControl.control.invalid\">\n        </i>\n      </span>\n\n      <span *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n          (click)=\"passwordVisible = !passwordVisible\"\n          class=\"p-inputgroup-addon cursor-pointer\">\n        <i class=\"fa\"\n           [class.fa-eye-slash]=\"passwordVisible\"\n           [class.fa-eye]=\"!passwordVisible\"\n        ></i>\n      </span>\n\n  </span>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-input-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <span class=\"p-inputgroup w-full\">\n\n      <textarea  *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n               class=\"w-full\"\n               [name]=\"formTemplate.name\"\n               [placeholder]=\"formTemplate.placeholder ?? ''\"\n               [disabled]=\"disabled\"\n               [rows]=\"3\"\n               [cols]=\"30\"\n               pInputTextarea\n               [autoResize]=\"true\"\n               [formControl]=\"ngControl.control\"\n               [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n               [minLength]=\"minLength\"\n               [maxLength]=\"maxLength\"></textarea>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n             class=\"w-full\"\n             [type]=\"formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n             class=\"w-full\"\n             [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n                     class=\"w-full\"\n                     [name]=\"formTemplate.name\"\n                     [placeholder]=\"formTemplate.placeholder ?? 0\"\n                     [disabled]=\"disabled\"\n                     [formControl]=\"ngControl.control\"\n                     [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n                     [showButtons]=\"true\"\n                     [step]=\"step ?? 1\"\n                     [min]=\"min\"\n                     [max]=\"max\">\n      </p-inputNumber>\n\n      <span class=\"p-inputgroup-addon\" *ngIf=\"!disabled\">\n        <i class=\"fa\"\n          [class.fa-check]=\"formTemplate.required && (ngControl.control.valid || ngControl.control.untouched)\"\n          [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n          [class.onshore-color-gray-3]=\"ngControl.control.untouched\"\n          [class.onshore-color-success]=\"ngControl.control.touched && ngControl.control.valid\"\n          [class.onshore-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\">\n        </i>\n      </span>\n\n      <span *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n          (click)=\"passwordVisible = !passwordVisible\"\n          class=\"p-inputgroup-addon cursor-pointer\">\n        <i class=\"fa\"\n           [class.fa-eye-slash]=\"passwordVisible\"\n           [class.fa-eye]=\"!passwordVisible\"\n        ></i>\n      </span>\n\n  </span>\n</onshore-form-item-container>\n" }]
+            args: [{ selector: 'onshore-form-input-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <span class=\"p-inputgroup w-full\">\n\n      <textarea  *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n               class=\"w-full\"\n               [name]=\"formTemplate.name\"\n               [placeholder]=\"formTemplate.placeholder ?? ''\"\n               [disabled]=\"disabled\"\n               [rows]=\"3\"\n               [cols]=\"30\"\n               pInputTextarea\n               [autoResize]=\"true\"\n               [formControl]=\"ngControl.control\"\n               [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n               [minLength]=\"minLength\"\n               [maxLength]=\"maxLength\"></textarea>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n             class=\"w-full\"\n             [type]=\"formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n             class=\"w-full\"\n             [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n                     class=\"w-full\"\n                     [name]=\"formTemplate.name\"\n                     [placeholder]=\"formTemplate.placeholder ?? 0\"\n                     [disabled]=\"disabled\"\n                     [formControl]=\"ngControl.control\"\n                     [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n                     [showButtons]=\"true\"\n                     [step]=\"step ?? 1\"\n                     [min]=\"min\"\n                     [max]=\"max\">\n      </p-inputNumber>\n\n      <span class=\"p-inputgroup-addon\" *ngIf=\"!disabled\">\n        <i class=\"fa\"\n          [class.fa-check]=\"formTemplate.required && (ngControl.control.valid || !ngControl.control.dirty)\"\n          [class.fa-exclamation-triangle]=\"ngControl.control.dirty && ngControl.control.invalid\"\n          [class.onshore-color-gray-3]=\"!ngControl.control.dirty\"\n          [class.onshore-color-success]=\"ngControl.control.dirty && ngControl.control.valid\"\n          [class.onshore-color-danger]=\"ngControl.control.dirty && ngControl.control.invalid\">\n        </i>\n      </span>\n\n      <span *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n          (click)=\"passwordVisible = !passwordVisible\"\n          class=\"p-inputgroup-addon cursor-pointer\">\n        <i class=\"fa\"\n           [class.fa-eye-slash]=\"passwordVisible\"\n           [class.fa-eye]=\"!passwordVisible\"\n        ></i>\n      </span>\n\n  </span>\n</onshore-form-item-container>\n" }]
         }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {