onshore-forms 0.0.38 → 0.0.39

package/fesm2020/onshore-forms.mjs

@@ -110,6 +110,14 @@ class OnshoreFormsService {
         this._form = null;
         this._formTemplate = null;
     }
+    resetFormControl(name, touched = false) {
+        this._form?.get(name).reset();
+        if (touched) {
+            this._form?.get(name).markAsTouched();
+            this._form?.get(name).markAsDirty();
+        }
+        this._form?.get(name).updateValueAndValidity({ onlySelf: false, emitEvent: true });
+    }
     generateForm(formTemplate) {
         this._formTemplate = formTemplate;
         this._form = new FormGroup({}, { updateOn: 'change' });
@@ -407,10 +415,10 @@ 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" }, outputs: { actionButtonClick: "actionButtonClick" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class.mb-4]=\"!formTemplate.noGap\" #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         [hidden]=\"!formTemplate.label || formTemplate.label == ''\"\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n      <span *ngIf=\"formTemplate.label && formTemplate.label != ''\" [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mt-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      </span>\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': '37px'}\"\n        [disabled]=\"!formTemplate.enabled\">\n      </p-toggleButton>\n\n      <div class=\"w-full overflow-hidden align-self-center\">\n        <ng-content></ng-content>\n      </div>\n\n      <button *ngIf=\"formTemplate.actionButton\"\n              class=\"ml-2 onshore-button-light\"\n              [style]=\"{'height': '37px', 'min-width': '38px'}\"\n              pButton\n              [disabled]=\"disabled\"\n              [icon]=\"formTemplate.actionButtonIcon\"\n              (click)=\"actionButtonClick.emit()\">\n      </button>\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 || ngControl.control.dirty\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 48 : 0)) + 'px' : (formTemplate.locked ? 48 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '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 *ngIf=\"formTemplate.description\" class=\"mt-2\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 48 : 0)) + 'px' : (formTemplate.locked ? 48 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '0px'}\">\n    <small class=\"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.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i4.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" }, outputs: { actionButtonClick: "actionButtonClick" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class.mb-4]=\"!formTemplate.noGap\" #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         [hidden]=\"!formTemplate.label || formTemplate.label == ''\"\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n      <span *ngIf=\"formTemplate.label && formTemplate.label != ''\" [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.align-items-center]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mb-2]=\"layout == OnshoreFormTemplateLayout.vertical\">\n        {{formTemplate.label}}\n        <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n      </span>\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': '37px'}\"\n        [disabled]=\"!formTemplate.enabled\">\n      </p-toggleButton>\n\n      <div class=\"w-full overflow-hidden align-self-center\">\n        <ng-content></ng-content>\n      </div>\n\n      <button *ngIf=\"formTemplate.actionButton\"\n              class=\"ml-2 onshore-button-light\"\n              [style]=\"{'height': '37px', 'min-width': '38px'}\"\n              pButton\n              [disabled]=\"disabled\"\n              [icon]=\"formTemplate.actionButtonIcon\"\n              (click)=\"actionButtonClick.emit()\">\n      </button>\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 || ngControl.control.dirty\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 48 : 0)) + 'px' : (formTemplate.locked ? 48 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '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 *ngIf=\"formTemplate.description\" class=\"mt-2\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 48 : 0)) + 'px' : (formTemplate.locked ? 48 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '0px'}\">\n    <small class=\"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.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i4.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]=\"!formTemplate.noGap\" #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         [hidden]=\"!formTemplate.label || formTemplate.label == ''\"\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n      <span *ngIf=\"formTemplate.label && formTemplate.label != ''\" [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mt-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      </span>\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': '37px'}\"\n        [disabled]=\"!formTemplate.enabled\">\n      </p-toggleButton>\n\n      <div class=\"w-full overflow-hidden align-self-center\">\n        <ng-content></ng-content>\n      </div>\n\n      <button *ngIf=\"formTemplate.actionButton\"\n              class=\"ml-2 onshore-button-light\"\n              [style]=\"{'height': '37px', 'min-width': '38px'}\"\n              pButton\n              [disabled]=\"disabled\"\n              [icon]=\"formTemplate.actionButtonIcon\"\n              (click)=\"actionButtonClick.emit()\">\n      </button>\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 || ngControl.control.dirty\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 48 : 0)) + 'px' : (formTemplate.locked ? 48 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '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 *ngIf=\"formTemplate.description\" class=\"mt-2\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 48 : 0)) + 'px' : (formTemplate.locked ? 48 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '0px'}\">\n    <small class=\"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]=\"!formTemplate.noGap\" #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         [hidden]=\"!formTemplate.label || formTemplate.label == ''\"\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n      <span *ngIf=\"formTemplate.label && formTemplate.label != ''\" [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.align-items-center]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mb-2]=\"layout == OnshoreFormTemplateLayout.vertical\">\n        {{formTemplate.label}}\n        <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n      </span>\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': '37px'}\"\n        [disabled]=\"!formTemplate.enabled\">\n      </p-toggleButton>\n\n      <div class=\"w-full overflow-hidden align-self-center\">\n        <ng-content></ng-content>\n      </div>\n\n      <button *ngIf=\"formTemplate.actionButton\"\n              class=\"ml-2 onshore-button-light\"\n              [style]=\"{'height': '37px', 'min-width': '38px'}\"\n              pButton\n              [disabled]=\"disabled\"\n              [icon]=\"formTemplate.actionButtonIcon\"\n              (click)=\"actionButtonClick.emit()\">\n      </button>\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 || ngControl.control.dirty\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 48 : 0)) + 'px' : (formTemplate.locked ? 48 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '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 *ngIf=\"formTemplate.description\" class=\"mt-2\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 48 : 0)) + 'px' : (formTemplate.locked ? 48 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '0px'}\">\n    <small class=\"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: [{
@@ -518,10 +526,10 @@ class OnshoreFormSwitchItemComponent {
     }
 }
 OnshoreFormSwitchItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormSwitchItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormSwitchItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormSwitchItemComponent, selector: "onshore-form-switch-item", inputs: { formTemplate: "formTemplate" }, outputs: { valueChange: "valueChange", actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\n  <div class=\"align-items-center mt-1\">\n    <p-inputSwitch [name]=\"formTemplate.name\"\n                   [formControl]=\"ngControl.control\"\n                   [disabled]=\"disabled\"\n                   [inputId]=\"formTemplate.name\">\n    </p-inputSwitch>\n  </div>\n\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"], outputs: ["actionButtonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormSwitchItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormSwitchItemComponent, selector: "onshore-form-switch-item", inputs: { formTemplate: "formTemplate" }, outputs: { valueChange: "valueChange", actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\n  <div class=\"h-full align-items-center mt-1\">\n    <p-inputSwitch [name]=\"formTemplate.name\"\n                   [formControl]=\"ngControl.control\"\n                   [disabled]=\"disabled\"\n                   [inputId]=\"formTemplate.name\">\n    </p-inputSwitch>\n  </div>\n\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"], outputs: ["actionButtonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormSwitchItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-switch-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\n  <div class=\"align-items-center mt-1\">\n    <p-inputSwitch [name]=\"formTemplate.name\"\n                   [formControl]=\"ngControl.control\"\n                   [disabled]=\"disabled\"\n                   [inputId]=\"formTemplate.name\">\n    </p-inputSwitch>\n  </div>\n\n</onshore-form-item-container>\n" }]
+            args: [{ selector: 'onshore-form-switch-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\n  <div class=\"h-full align-items-center mt-1\">\n    <p-inputSwitch [name]=\"formTemplate.name\"\n                   [formControl]=\"ngControl.control\"\n                   [disabled]=\"disabled\"\n                   [inputId]=\"formTemplate.name\">\n    </p-inputSwitch>\n  </div>\n\n</onshore-form-item-container>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -843,13 +851,22 @@ class OnshoreFormDropdownItemComponent {
         this.optionLabel = '';
         this.optionGroupLabel = '';
         this.dataKey = '';
+        this.valueChange = new EventEmitter();
         this.actionButtonClick = new EventEmitter();
         this.disabled = false;
         this.ngControl.valueAccessor = this;
     }
     // ControlValueAccessor interface
-    writeValue(obj) { }
-    registerOnChange(fn) { }
+    writeValue(obj) {
+        if (obj) {
+            this.cdr.markForCheck();
+        }
+    }
+    registerOnChange(fn) {
+        if (this.ngControl.value) {
+            this.cdr.markForCheck();
+        }
+    }
     registerOnTouched(fn) { }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
@@ -860,6 +877,9 @@ class OnshoreFormDropdownItemComponent {
         this.cdr.markForCheck();
     }
     ngOnInit() {
+        this.ngControl.control?.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), skip(1)).subscribe(newValue => {
+            this.valueChange.emit(this.ngControl.control?.value);
+        });
         if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
             this.ngControl.control?.setValue(this.formTemplate.default);
             this.cdr.markForCheck();
@@ -878,7 +898,7 @@ class OnshoreFormDropdownItemComponent {
     }
 }
 OnshoreFormDropdownItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormDropdownItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormDropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormDropdownItemComponent, selector: "onshore-form-dropdown-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", showClear: "showClear", group: "group", selectionLimit: "selectionLimit", minLength: "minLength", optionLabel: "optionLabel", optionGroupLabel: "optionGroupLabel", dataKey: "dataKey" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\n\n  <p-dropdown *ngIf=\"!multiple\"\n              class=\"w-full\"\n              [options]=\"formTemplate?.options\"\n              [formControl]=\"ngControl.control\"\n              [name]=\"formTemplate?.name\"\n              [placeholder]=\"formTemplate?.placeholder\"\n              [disabled]=\"disabled\"\n              [optionLabel]=\"optionLabel\"\n              [dataKey]=\"dataKey\"\n              [optionGroupLabel]=\"optionGroupLabel\"\n              [group]=\"group\"\n              [showClear]=\"showClear && formTemplate?.placeholder\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n  </p-dropdown>\n\n  <p-multiSelect *ngIf=\"multiple\"\n                 class=\"w-full\"\n                 [options]=\"formTemplate?.options\"\n                 [formControl]=\"ngControl.control\"\n                 [name]=\"formTemplate?.name\"\n                 [placeholder]=\"formTemplate?.placeholder\"\n                 [disabled]=\"disabled\"\n                 [showClear]=\"showClear\"\n                 [selectionLimit]=\"selectionLimit\"\n                 [minlength]=\"minLength\"\n                 [optionLabel]=\"optionLabel\"\n                 [dataKey]=\"dataKey\"\n                 [optionGroupLabel]=\"optionGroupLabel\"\n                 [group]=\"group\"\n                 (onClear)=\"clearSelection()\"\n                 [selectedItemsLabel]=\"'form.dropdownControl.selectedItems' | translate\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\"></p-multiSelect>\n\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$3.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "itemSize", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$3.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"], outputs: ["actionButtonClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormDropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormDropdownItemComponent, selector: "onshore-form-dropdown-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", showClear: "showClear", group: "group", selectionLimit: "selectionLimit", minLength: "minLength", optionLabel: "optionLabel", optionGroupLabel: "optionGroupLabel", dataKey: "dataKey" }, outputs: { valueChange: "valueChange", actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\n\n  <p-dropdown *ngIf=\"!multiple\"\n              class=\"w-full\"\n              [options]=\"formTemplate?.options\"\n              [formControl]=\"ngControl.control\"\n              [name]=\"formTemplate?.name\"\n              [placeholder]=\"formTemplate?.placeholder\"\n              [disabled]=\"disabled\"\n              [optionLabel]=\"optionLabel\"\n              [dataKey]=\"dataKey\"\n              [optionGroupLabel]=\"optionGroupLabel\"\n              [group]=\"group\"\n              [showClear]=\"showClear && formTemplate?.placeholder\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n  </p-dropdown>\n\n  <p-multiSelect *ngIf=\"multiple\"\n                 class=\"w-full\"\n                 [options]=\"formTemplate?.options\"\n                 [formControl]=\"ngControl.control\"\n                 [name]=\"formTemplate?.name\"\n                 [placeholder]=\"formTemplate?.placeholder\"\n                 [disabled]=\"disabled\"\n                 [showClear]=\"showClear\"\n                 [selectionLimit]=\"selectionLimit\"\n                 [minlength]=\"minLength\"\n                 [optionLabel]=\"optionLabel\"\n                 [dataKey]=\"dataKey\"\n                 [optionGroupLabel]=\"optionGroupLabel\"\n                 [group]=\"group\"\n                 (onClear)=\"clearSelection()\"\n                 [selectedItemsLabel]=\"'form.dropdownControl.selectedItems' | translate\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\"></p-multiSelect>\n\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$3.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "itemSize", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$3.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"], outputs: ["actionButtonClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormDropdownItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onshore-form-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\n\n  <p-dropdown *ngIf=\"!multiple\"\n              class=\"w-full\"\n              [options]=\"formTemplate?.options\"\n              [formControl]=\"ngControl.control\"\n              [name]=\"formTemplate?.name\"\n              [placeholder]=\"formTemplate?.placeholder\"\n              [disabled]=\"disabled\"\n              [optionLabel]=\"optionLabel\"\n              [dataKey]=\"dataKey\"\n              [optionGroupLabel]=\"optionGroupLabel\"\n              [group]=\"group\"\n              [showClear]=\"showClear && formTemplate?.placeholder\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n  </p-dropdown>\n\n  <p-multiSelect *ngIf=\"multiple\"\n                 class=\"w-full\"\n                 [options]=\"formTemplate?.options\"\n                 [formControl]=\"ngControl.control\"\n                 [name]=\"formTemplate?.name\"\n                 [placeholder]=\"formTemplate?.placeholder\"\n                 [disabled]=\"disabled\"\n                 [showClear]=\"showClear\"\n                 [selectionLimit]=\"selectionLimit\"\n                 [minlength]=\"minLength\"\n                 [optionLabel]=\"optionLabel\"\n                 [dataKey]=\"dataKey\"\n                 [optionGroupLabel]=\"optionGroupLabel\"\n                 [group]=\"group\"\n                 (onClear)=\"clearSelection()\"\n                 [selectedItemsLabel]=\"'form.dropdownControl.selectedItems' | translate\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\"></p-multiSelect>\n\n</onshore-form-item-container>\n" }]
@@ -904,6 +924,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Input
             }], dataKey: [{
                 type: Input
+            }], valueChange: [{
+                type: Output
             }], actionButtonClick: [{
                 type: Output
             }] } });