onshore-forms 0.0.37 → 0.0.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -110,6 +110,14 @@ class OnshoreFormsService {
110
110
  this._form = null;
111
111
  this._formTemplate = null;
112
112
  }
113
+ resetFormControl(name, touched = false) {
114
+ this._form?.get(name).reset();
115
+ if (touched) {
116
+ this._form?.get(name).markAsTouched();
117
+ this._form?.get(name).markAsDirty();
118
+ }
119
+ this._form?.get(name).updateValueAndValidity({ onlySelf: false, emitEvent: true });
120
+ }
113
121
  generateForm(formTemplate) {
114
122
  this._formTemplate = formTemplate;
115
123
  this._form = new FormGroup({}, { updateOn: 'change' });
@@ -376,6 +384,8 @@ class OnshoreFormItemContainer {
376
384
  this.disabled = true;
377
385
  }
378
386
  this.layout = this.formTemplate.layout;
387
+ }
388
+ ngAfterViewInit() {
379
389
  this.onWindowResize();
380
390
  }
381
391
  ngOnChanges(changes) {
@@ -405,10 +415,10 @@ class OnshoreFormItemContainer {
405
415
  }
406
416
  }
407
417
  OnshoreFormItemContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
408
- 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 <b *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 </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 <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\"\n [style]=\"{'height': '36px', 'width': '40px', 'margin-top': '1px'}\"\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 + '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.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 });
418
+ 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 });
409
419
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, decorators: [{
410
420
  type: Component,
411
- 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 <b *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 </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 <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\"\n [style]=\"{'height': '36px', 'width': '40px', 'margin-top': '1px'}\"\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 + '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" }]
421
+ 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" }]
412
422
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
413
423
  type: Input
414
424
  }], ngControl: [{
@@ -459,10 +469,10 @@ class OnshoreFormInputItemComponent {
459
469
  }
460
470
  }
461
471
  OnshoreFormInputItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
462
- 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" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\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 && formTemplate.validators?.length > 0\">\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.inputAddon\" class=\"p-inputgroup-addon\">\n <i [class]=\"formTemplate.inputAddon\"></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$1.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$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: i3$1.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$1.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"], outputs: ["actionButtonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
472
+ 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" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\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 *ngIf=\"formTemplate.inputAddon\" class=\"p-inputgroup-addon\">\n <i [class]=\"formTemplate.inputAddon\"></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$1.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$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: i3$1.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$1.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"], outputs: ["actionButtonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
463
473
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, decorators: [{
464
474
  type: Component,
465
- args: [{ selector: 'onshore-form-input-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\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 && formTemplate.validators?.length > 0\">\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.inputAddon\" class=\"p-inputgroup-addon\">\n <i [class]=\"formTemplate.inputAddon\"></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" }]
475
+ args: [{ selector: 'onshore-form-input-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\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 *ngIf=\"formTemplate.inputAddon\" class=\"p-inputgroup-addon\">\n <i [class]=\"formTemplate.inputAddon\"></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" }]
466
476
  }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
467
477
  type: Self
468
478
  }, {
@@ -516,10 +526,10 @@ class OnshoreFormSwitchItemComponent {
516
526
  }
517
527
  }
518
528
  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 });
519
- 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 <p-inputSwitch [name]=\"formTemplate.name\"\n [formControl]=\"ngControl.control\"\n [disabled]=\"disabled\"\n [inputId]=\"formTemplate.name\" class=\"align-self-center\">\n </p-inputSwitch>\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 });
529
+ 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 });
520
530
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormSwitchItemComponent, decorators: [{
521
531
  type: Component,
522
- args: [{ selector: 'onshore-form-switch-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\n <p-inputSwitch [name]=\"formTemplate.name\"\n [formControl]=\"ngControl.control\"\n [disabled]=\"disabled\"\n [inputId]=\"formTemplate.name\" class=\"align-self-center\">\n </p-inputSwitch>\n</onshore-form-item-container>\n" }]
532
+ 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" }]
523
533
  }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
524
534
  type: Self
525
535
  }, {
@@ -841,13 +851,22 @@ class OnshoreFormDropdownItemComponent {
841
851
  this.optionLabel = '';
842
852
  this.optionGroupLabel = '';
843
853
  this.dataKey = '';
854
+ this.valueChange = new EventEmitter();
844
855
  this.actionButtonClick = new EventEmitter();
845
856
  this.disabled = false;
846
857
  this.ngControl.valueAccessor = this;
847
858
  }
848
859
  // ControlValueAccessor interface
849
- writeValue(obj) { }
850
- registerOnChange(fn) { }
860
+ writeValue(obj) {
861
+ if (obj) {
862
+ this.cdr.markForCheck();
863
+ }
864
+ }
865
+ registerOnChange(fn) {
866
+ if (this.ngControl.value) {
867
+ this.cdr.markForCheck();
868
+ }
869
+ }
851
870
  registerOnTouched(fn) { }
852
871
  setDisabledState(isDisabled) {
853
872
  this.disabled = isDisabled;
@@ -858,6 +877,9 @@ class OnshoreFormDropdownItemComponent {
858
877
  this.cdr.markForCheck();
859
878
  }
860
879
  ngOnInit() {
880
+ this.ngControl.control?.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), skip(1)).subscribe(newValue => {
881
+ this.valueChange.emit(this.ngControl.control?.value);
882
+ });
861
883
  if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
862
884
  this.ngControl.control?.setValue(this.formTemplate.default);
863
885
  this.cdr.markForCheck();
@@ -876,7 +898,7 @@ class OnshoreFormDropdownItemComponent {
876
898
  }
877
899
  }
878
900
  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 });
879
- 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 });
901
+ 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 });
880
902
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormDropdownItemComponent, decorators: [{
881
903
  type: Component,
882
904
  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" }]
@@ -902,6 +924,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
902
924
  type: Input
903
925
  }], dataKey: [{
904
926
  type: Input
927
+ }], valueChange: [{
928
+ type: Output
905
929
  }], actionButtonClick: [{
906
930
  type: Output
907
931
  }] } });
@@ -944,10 +968,10 @@ class OnshoreFormColorpickerItemComponent {
944
968
  }
945
969
  }
946
970
  OnshoreFormColorpickerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormColorpickerItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
947
- OnshoreFormColorpickerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormColorpickerItemComponent, selector: "onshore-form-colorpicker-item", inputs: { formTemplate: "formTemplate" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\n <div class=\"flex w-full\">\n\n <p-colorPicker [(ngModel)]=\"colorPickerValue\"\n format=\"hex\" [inline]=\"false\"\n appendTo=\"body\"\n [disabled]=\"disabled\"\n [baseZIndex]=\"99999\"\n (onChange)=\"changeColor()\">\n </p-colorPicker>\n\n <input class=\"w-full ml-2\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [formControl]=\"ngControl.control\"\n [disabled]=\"disabled\"\n pInputText\n [value]=\"ngControl.control.value\"\n (input)=\"changeInput($event)\"/>\n </div>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$4.ColorPicker, selector: "p-colorPicker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]" }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"], outputs: ["actionButtonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
971
+ OnshoreFormColorpickerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormColorpickerItemComponent, selector: "onshore-form-colorpicker-item", inputs: { formTemplate: "formTemplate" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\n <div class=\"flex w-full\">\n\n <input class=\"w-full mr-2\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [formControl]=\"ngControl.control\"\n [disabled]=\"disabled\"\n pInputText\n [value]=\"ngControl.control.value\"\n (input)=\"changeInput($event)\"/>\n\n <p-colorPicker [(ngModel)]=\"colorPickerValue\"\n format=\"hex\" [inline]=\"false\"\n appendTo=\"body\"\n [disabled]=\"disabled\"\n [baseZIndex]=\"99999\"\n (onChange)=\"changeColor()\">\n </p-colorPicker>\n </div>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$4.ColorPicker, selector: "p-colorPicker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]" }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"], outputs: ["actionButtonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
948
972
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormColorpickerItemComponent, decorators: [{
949
973
  type: Component,
950
- args: [{ selector: 'onshore-form-colorpicker-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\n <div class=\"flex w-full\">\n\n <p-colorPicker [(ngModel)]=\"colorPickerValue\"\n format=\"hex\" [inline]=\"false\"\n appendTo=\"body\"\n [disabled]=\"disabled\"\n [baseZIndex]=\"99999\"\n (onChange)=\"changeColor()\">\n </p-colorPicker>\n\n <input class=\"w-full ml-2\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [formControl]=\"ngControl.control\"\n [disabled]=\"disabled\"\n pInputText\n [value]=\"ngControl.control.value\"\n (input)=\"changeInput($event)\"/>\n </div>\n</onshore-form-item-container>\n" }]
974
+ args: [{ selector: 'onshore-form-colorpicker-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" (actionButtonClick)=\"actionButtonClick.emit()\">\n <div class=\"flex w-full\">\n\n <input class=\"w-full mr-2\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [formControl]=\"ngControl.control\"\n [disabled]=\"disabled\"\n pInputText\n [value]=\"ngControl.control.value\"\n (input)=\"changeInput($event)\"/>\n\n <p-colorPicker [(ngModel)]=\"colorPickerValue\"\n format=\"hex\" [inline]=\"false\"\n appendTo=\"body\"\n [disabled]=\"disabled\"\n [baseZIndex]=\"99999\"\n (onChange)=\"changeColor()\">\n </p-colorPicker>\n </div>\n</onshore-form-item-container>\n" }]
951
975
  }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
952
976
  type: Self
953
977
  }, {