onshore-forms 0.0.8 → 0.0.10

package/fesm2015/onshore-forms.mjs

@@ -5,32 +5,41 @@ import { FormGroup, FormControl, FormArray, FormsModule, ReactiveFormsModule } f
 import { Subject, debounceTime, distinctUntilChanged, skip } from 'rxjs';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from 'primeng/tooltip';
-import { TooltipModule } from 'primeng/tooltip';
-import * as i4 from 'primeng/inputnumber';
+import * as i3$1 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
-import * as i5 from 'primeng/inputtext';
+import * as i4 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
+import * as i5 from 'primeng/inputtextarea';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import * as i2$1 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i3 from 'primeng/togglebutton';
+import { ToggleButtonModule } from 'primeng/togglebutton';
 import * as i1 from '@ngx-translate/core';
-import * as i4$1 from 'primeng/inputswitch';
+import * as i2$2 from 'primeng/inputswitch';
 import { InputSwitchModule } from 'primeng/inputswitch';
-import * as i4$2 from 'primeng/inputtextarea';
-import { InputTextareaModule } from 'primeng/inputtextarea';
-import * as i2$1 from 'primeng/dynamicdialog';
+import * as i2$3 from 'primeng/dynamicdialog';
 import * as i5$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i6 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
-import * as i3$1 from 'primeng/dropdown';
+import * as i3$2 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
-import * as i4$3 from 'primeng/multiselect';
+import * as i4$1 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
-import * as i3$2 from 'primeng/colorpicker';
+import * as i2$4 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
-import * as i3$3 from 'primeng/checkbox';
+import * as i2$5 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
+import { __awaiter } from 'tslib';
+import * as i3$3 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
+import * as i4$2 from 'primeng/api';
 import { DialogModule } from 'primeng/dialog';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import * as i2$6 from 'primeng/calendar';
+import { CalendarModule } from 'primeng/calendar';
 
 var OnshoreFormTemplateType;
 (function (OnshoreFormTemplateType) {
@@ -43,13 +52,22 @@ var OnshoreFormTemplateType;
     OnshoreFormTemplateType["phone"] = "phone";
     OnshoreFormTemplateType["regexp"] = "regexp";
     OnshoreFormTemplateType["select"] = "select";
+    OnshoreFormTemplateType["switch"] = "switch";
     OnshoreFormTemplateType["check"] = "check";
     OnshoreFormTemplateType["radio"] = "radio";
     OnshoreFormTemplateType["image"] = "image";
     OnshoreFormTemplateType["autocomplete"] = "autocomplete";
     OnshoreFormTemplateType["color"] = "color";
+    OnshoreFormTemplateType["date"] = "date";
+    OnshoreFormTemplateType["time"] = "time";
+    OnshoreFormTemplateType["datetime"] = "datetime";
     OnshoreFormTemplateType["subform"] = "subform";
 })(OnshoreFormTemplateType || (OnshoreFormTemplateType = {}));
+var OnshoreFormTemplateLayout;
+(function (OnshoreFormTemplateLayout) {
+    OnshoreFormTemplateLayout["vertical"] = "vertical";
+    OnshoreFormTemplateLayout["horizontal"] = "horizontal";
+})(OnshoreFormTemplateLayout || (OnshoreFormTemplateLayout = {}));
 var OnshoreImageError;
 (function (OnshoreImageError) {
     OnshoreImageError["none"] = "";
@@ -221,14 +239,14 @@ class OnshoreFormsComponent {
 OnshoreFormsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 OnshoreFormsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormsComponent, selector: "lib-onshore-forms", ngImport: i0, template: `
     <p>
-      onshore-forms works 2!
+      onshore-forms works!
     </p>
   `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-onshore-forms', template: `
     <p>
-      onshore-forms works 2!
+      onshore-forms works!
     </p>
   ` }]
         }], ctorParameters: function () { return []; } });
@@ -242,9 +260,10 @@ class OnshoreFormValidationOutputComponent {
     }
     ngOnChanges(changes) {
         this.validationTranslation = '';
-        if (changes['validationErrors'].currentValue) {
+        if (changes['validationErrors'].currentValue && this.validationErrors) {
             Object.keys(this.validationErrors).forEach(error => {
-                const exists = Object.values(this.validationItems).filter(validationItem => validationItem.key == error);
+                var _a;
+                const exists = Object.values((_a = this.validationItems) !== null && _a !== void 0 ? _a : []).filter(validationItem => validationItem.key == error);
                 if (exists && exists.length > 0) {
                     this.validationTranslation += this.translate.instant('request.error.' + error) + '<br>';
                 }
@@ -258,10 +277,10 @@ class OnshoreFormValidationOutputComponent {
     }
 }
 OnshoreFormValidationOutputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormValidationOutputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormValidationOutputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: { validationErrors: "validationErrors", externValidationPattern: "externValidationPattern", validationItems: "validationItems" }, usesOnChanges: true, ngImport: i0, template: "<small *ngIf=\"validationErrors && validationErrors['pattern']\" [innerHTML]=\"externValidationPattern\"></small>\n<small *ngIf=\"validationTranslation\" [innerHTML]=\"validationTranslation\"></small>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormValidationOutputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: { validationErrors: "validationErrors", externValidationPattern: "externValidationPattern", validationItems: "validationItems" }, usesOnChanges: true, ngImport: i0, template: "<small class=\"onshore-color-danger\"\n      *ngIf=\"validationErrors && validationErrors['pattern']\"\n      [innerHTML]=\"externValidationPattern\">\n</small>\n<small class=\"onshore-color-danger\"\n       *ngIf=\"validationTranslation\"\n      [innerHTML]=\"validationTranslation\">\n</small>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormValidationOutputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-validation-output', changeDetection: ChangeDetectionStrategy.OnPush, template: "<small *ngIf=\"validationErrors && validationErrors['pattern']\" [innerHTML]=\"externValidationPattern\"></small>\n<small *ngIf=\"validationTranslation\" [innerHTML]=\"validationTranslation\"></small>\n" }]
+            args: [{ selector: 'onshore-form-validation-output', changeDetection: ChangeDetectionStrategy.OnPush, template: "<small class=\"onshore-color-danger\"\n      *ngIf=\"validationErrors && validationErrors['pattern']\"\n      [innerHTML]=\"externValidationPattern\">\n</small>\n<small class=\"onshore-color-danger\"\n       *ngIf=\"validationTranslation\"\n      [innerHTML]=\"validationTranslation\">\n</small>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }]; }, propDecorators: { validationErrors: [{
                 type: Input
             }], externValidationPattern: [{
@@ -270,69 +289,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Input
             }] } });
 
-class OnshoreFormInputItemComponent {
-    constructor(ngControl, cdr) {
-        this.ngControl = ngControl;
+class OnshoreFormItemContainer {
+    constructor(cdr) {
         this.cdr = cdr;
-        this.FormTemplateItemType = OnshoreFormTemplateType;
-        this.passwordVisible = false;
-        this.disabled = false;
-        this.ngControl.valueAccessor = this;
+        this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
     }
-    // ControlValueAccessor interface
-    writeValue(obj) { }
-    registerOnChange(fn) { }
-    registerOnTouched(fn) { }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    enabled(enable) {
+        setTimeout(() => {
+            if (enable) {
+                this.ngControl.control.enable();
+            }
+            else {
+                this.ngControl.control.disable();
+            }
+            this.cdr.markForCheck();
+        }, 100);
     }
     ngOnInit() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b;
         (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.valueChanges.subscribe(() => {
             this.cdr.markForCheck();
         });
         (_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.statusChanges.subscribe(() => {
             this.cdr.markForCheck();
         });
-        if (((_c = this.ngControl.control) === null || _c === void 0 ? void 0 : _c.value) == '' && this.formTemplate.default != undefined) {
-            (_d = this.ngControl.control) === null || _d === void 0 ? void 0 : _d.setValue(this.formTemplate.default);
-            this.cdr.markForCheck();
-        }
-        if (this.formTemplate.enabled) {
-            (_e = this.ngControl.control) === null || _e === void 0 ? void 0 : _e.enable();
-        }
-        else {
-            (_f = this.ngControl.control) === null || _f === void 0 ? void 0 : _f.disable();
+        this.enabled(this.formTemplate.enabled);
+        if (this.formTemplate.locked) {
+            this.enabled(false);
         }
     }
     ngOnChanges(changes) {
-        this.cdr.markForCheck();
-    }
-    ngOnDestroy() {
-        var _a;
-        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.disable();
+        const previousValue = changes['formTemplate'].previousValue;
+        const currentValue = changes['formTemplate'].currentValue;
+        if (currentValue) {
+            if ((previousValue === null || previousValue === void 0 ? void 0 : previousValue.enabled) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.enabled)) {
+                this.enabled(currentValue === null || currentValue === void 0 ? void 0 : currentValue.enabled);
+            }
+            if ((previousValue === null || previousValue === void 0 ? void 0 : previousValue.locked) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.locked)) {
+                if (currentValue.locked) {
+                    this.enabled(false);
+                }
+                else {
+                    this.enabled(currentValue.enabled);
+                }
+            }
+            this.cdr.markForCheck();
+        }
     }
 }
-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 });
-OnshoreFormInputItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormInputItemComponent, selector: "onshore-form-input-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column mb-3\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <span class=\"p-inputgroup w-100\">\n\n    <container-element [ngSwitch]=\"formTemplate.type\" class=\"w-100\" style=\"width: 100%\">\n\n       <input *ngSwitchDefault\n              class=\"w-100\"\n              type=\"text\"\n              [name]=\"formTemplate.name\"\n              [placeholder]=\"formTemplate.placeholder ?? ''\"\n              pInputText\n              [formControl]=\"ngControl.control\"\n              [class.p-invalid]=\"ngControl.control.touched && ngControl.control.invalid\"\n              [autocomplete]=\"'prevent-template-' + formTemplate.name\"/>\n\n      <input *ngSwitchCase=\"'password'\"\n             class=\"w-100\"\n             [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [class.p-invalid]=\"ngControl.control.touched && ngControl.control.invalid\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"/>\n\n      <p-inputNumber *ngSwitchCase=\"'number'\"\n                     class=\"w-100\"\n                     [name]=\"formTemplate.name\"\n                     [placeholder]=\"formTemplate.placeholder ?? 0\"\n                     [formControl]=\"ngControl.control\"\n                     [class.p-invalid]=\"ngControl.control.touched && ngControl.control.invalid\"\n                     [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n                     [step]=\"formTemplate.settings?.step ?? 1\"\n                     [min]=\"formTemplate.settings?.min ?? null\"\n                     [max]=\"formTemplate.settings?.max ?? null\">\n      </p-inputNumber>\n      <!--\n                     [showButtons]=\"true\"\n                     buttonLayout=\"horizontal\"\n                     spinnerMode=\"horizontal\"\n                     decrementButtonClass=\"p-button-outlined text-black-50\"\n                     incrementButtonClass=\"p-button-outlined text-black-50\"\n      -->\n    </container-element>\n\n    <span class=\"p-inputgroup-addon\">\n      <i *ngIf=\"formTemplate.type != FormTemplateItemType.password\" class=\"fa\"\n         [class.tl-color-black]=\"ngControl.control.untouched\"\n         [class.fa-check]=\"formTemplate.required && ngControl.control.valid\"\n         [class.tl-color-primary1]=\"ngControl.control.touched && ngControl.control.valid\"\n         [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n         [class.tl-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\"\n      ></i>\n      <i *ngIf=\"formTemplate.type == FormTemplateItemType.password\" class=\"fa tl-color-black\"\n         [class.fa-eye-slash]=\"passwordVisible\"\n         [class.fa-eye]=\"!passwordVisible\"\n         (click)=\"passwordVisible = !passwordVisible\"\n      ></i>\n    </span>\n\n  </span>\n\n  <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n  <div *ngIf=\"ngControl.control.touched\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\"\n      [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n</div>\n", styles: [".p-inputtext{border-color:var(--color-primary)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: "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.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: i5.InputText, selector: "[pInputText]" }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "externValidationPattern", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, decorators: [{
+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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4\">\n  <div class=\"flex w-full\"\n       [class.flex-column]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\"\n       [class.flex-row]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n       [class.justify-content-between]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\">\n\n    <div #formLabel\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n      <b [class.mr-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mb-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\">\n        {{formTemplate.label}}\n        <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n      </b>\n\n      <div *ngIf=\"formTemplate.tooltip && formTemplate.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)=\"enabled($event.checked)\"\n        onIcon=\"fa fa-lock-open\"\n        offIcon=\"fa fa-lock\"\n        class=\"mr-2\"\n        [style]=\"{height: '36px'}\">\n      </p-toggleButton>\n\n      <ng-content></ng-content>\n    </div>\n\n    <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n  </div>\n\n  <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\"\n      [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n  <div [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3.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", "externValidationPattern", "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-input-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <span class=\"p-inputgroup w-100\">\n\n    <container-element [ngSwitch]=\"formTemplate.type\" class=\"w-100\" style=\"width: 100%\">\n\n       <input *ngSwitchDefault\n              class=\"w-100\"\n              type=\"text\"\n              [name]=\"formTemplate.name\"\n              [placeholder]=\"formTemplate.placeholder ?? ''\"\n              pInputText\n              [formControl]=\"ngControl.control\"\n              [class.p-invalid]=\"ngControl.control.touched && ngControl.control.invalid\"\n              [autocomplete]=\"'prevent-template-' + formTemplate.name\"/>\n\n      <input *ngSwitchCase=\"'password'\"\n             class=\"w-100\"\n             [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [class.p-invalid]=\"ngControl.control.touched && ngControl.control.invalid\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"/>\n\n      <p-inputNumber *ngSwitchCase=\"'number'\"\n                     class=\"w-100\"\n                     [name]=\"formTemplate.name\"\n                     [placeholder]=\"formTemplate.placeholder ?? 0\"\n                     [formControl]=\"ngControl.control\"\n                     [class.p-invalid]=\"ngControl.control.touched && ngControl.control.invalid\"\n                     [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n                     [step]=\"formTemplate.settings?.step ?? 1\"\n                     [min]=\"formTemplate.settings?.min ?? null\"\n                     [max]=\"formTemplate.settings?.max ?? null\">\n      </p-inputNumber>\n      <!--\n                     [showButtons]=\"true\"\n                     buttonLayout=\"horizontal\"\n                     spinnerMode=\"horizontal\"\n                     decrementButtonClass=\"p-button-outlined text-black-50\"\n                     incrementButtonClass=\"p-button-outlined text-black-50\"\n      -->\n    </container-element>\n\n    <span class=\"p-inputgroup-addon\">\n      <i *ngIf=\"formTemplate.type != FormTemplateItemType.password\" class=\"fa\"\n         [class.tl-color-black]=\"ngControl.control.untouched\"\n         [class.fa-check]=\"formTemplate.required && ngControl.control.valid\"\n         [class.tl-color-primary1]=\"ngControl.control.touched && ngControl.control.valid\"\n         [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n         [class.tl-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\"\n      ></i>\n      <i *ngIf=\"formTemplate.type == FormTemplateItemType.password\" class=\"fa tl-color-black\"\n         [class.fa-eye-slash]=\"passwordVisible\"\n         [class.fa-eye]=\"!passwordVisible\"\n         (click)=\"passwordVisible = !passwordVisible\"\n      ></i>\n    </span>\n\n  </span>\n\n  <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n  <div *ngIf=\"ngControl.control.touched\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\"\n      [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n</div>\n", styles: [".p-inputtext{border-color:var(--color-primary)!important}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: i1$1.NgControl, decorators: [{
-                        type: Self
-                    }, {
-                        type: Optional
-                    }] }, { type: i0.ChangeDetectorRef }];
-    }, propDecorators: { formTemplate: [{
+            args: [{ selector: 'onshore-form-item-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-4\">\n  <div class=\"flex w-full\"\n       [class.flex-column]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\"\n       [class.flex-row]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n       [class.justify-content-between]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\">\n\n    <div #formLabel\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n      <b [class.mr-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mb-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\">\n        {{formTemplate.label}}\n        <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n      </b>\n\n      <div *ngIf=\"formTemplate.tooltip && formTemplate.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)=\"enabled($event.checked)\"\n        onIcon=\"fa fa-lock-open\"\n        offIcon=\"fa fa-lock\"\n        class=\"mr-2\"\n        [style]=\"{height: '36px'}\">\n      </p-toggleButton>\n\n      <ng-content></ng-content>\n    </div>\n\n    <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n  </div>\n\n  <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\"\n      [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n  <div [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n  </div>\n\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
+                type: Input
+            }], ngControl: [{
                 type: Input
             }] } });
 
-class OnshoreFormSwitchItemComponent {
+class OnshoreFormInputItemComponent {
     constructor(ngControl, cdr) {
         this.ngControl = ngControl;
         this.cdr = cdr;
-        this.valueChange = new EventEmitter();
+        this.OnshoreFormTemplateType = OnshoreFormTemplateType;
+        this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
+        this.passwordVisible = false;
         this.disabled = false;
         this.ngControl.valueAccessor = this;
     }
@@ -344,27 +366,11 @@ class OnshoreFormSwitchItemComponent {
         this.disabled = isDisabled;
     }
     ngOnInit() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), skip(1)).subscribe(newValue => {
-            var _a;
-            this.valueChange.emit((_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.value);
-        });
-        (_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.valueChanges.subscribe(() => {
-            this.cdr.markForCheck();
-        });
-        (_c = this.ngControl.control) === null || _c === void 0 ? void 0 : _c.statusChanges.subscribe(() => {
-            this.cdr.markForCheck();
-        });
-        if (((_d = this.ngControl.control) === null || _d === void 0 ? void 0 : _d.value) == undefined && this.formTemplate.default != undefined) {
-            (_e = this.ngControl.control) === null || _e === void 0 ? void 0 : _e.setValue(this.formTemplate.default);
+        var _a, _b;
+        if (((_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.value) == '' && this.formTemplate.default != undefined) {
+            (_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.setValue(this.formTemplate.default);
             this.cdr.markForCheck();
         }
-        if (this.formTemplate.enabled) {
-            (_f = this.ngControl.control) === null || _f === void 0 ? void 0 : _f.enable();
-        }
-        else {
-            (_g = this.ngControl.control) === null || _g === void 0 ? void 0 : _g.disable();
-        }
     }
     ngOnChanges(changes) {
         this.cdr.markForCheck();
@@ -374,11 +380,11 @@ class OnshoreFormSwitchItemComponent {
         (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.disable();
     }
 }
-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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column pt-1\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <p-inputSwitch [name]=\"formTemplate.name\" [formControl]=\"ngControl.control\" [inputId]=\"formTemplate.name\"></p-inputSwitch>\n\n</div>\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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$1.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormSwitchItemComponent, decorators: [{
+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 });
+OnshoreFormInputItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormInputItemComponent, selector: "onshore-form-input-item", inputs: { formTemplate: "formTemplate", step: "step", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <span class=\"p-inputgroup w-full\">\n\n      <textarea  *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n               class=\"w-full\"\n               [name]=\"formTemplate.name\"\n               [placeholder]=\"formTemplate.placeholder ?? ''\"\n               [disabled]=\"disabled\"\n               [rows]=\"3\"\n               [cols]=\"30\"\n               pInputTextarea\n               [autoResize]=\"true\"\n               [formControl]=\"ngControl.control\"\n               [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n               [minLength]=\"minLength ?? null\"\n               [maxLength]=\"maxLength ?? null\"></textarea>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text\"\n             class=\"w-full\"\n             type=\"text\"\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 ?? null\"\n             [maxLength]=\"maxLength ?? null\"/>\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 ?? null\"\n             [maxLength]=\"maxLength ?? null\"/>\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 ?? null\"\n                     [max]=\"max ?? null\">\n      </p-inputNumber>\n\n      <span class=\"p-inputgroup-addon\" *ngIf=\"!disabled\">\n        <i class=\"fa\"\n          [class.fa-check]=\"formTemplate.required && (ngControl.control.valid || ngControl.control.untouched)\"\n          [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n          [class.onshore-color-gray-3]=\"ngControl.control.untouched\"\n          [class.onshore-color-success]=\"ngControl.control.touched && ngControl.control.valid\"\n          [class.onshore-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\">\n        </i>\n      </span>\n\n      <span *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n          (click)=\"passwordVisible = !passwordVisible\"\n          class=\"p-inputgroup-addon cursor-pointer\">\n        <i class=\"fa\"\n           [class.fa-eye-slash]=\"passwordVisible\"\n           [class.fa-eye]=\"!passwordVisible\"\n        ></i>\n      </span>\n\n  </span>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$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.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-switch-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column pt-1\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <p-inputSwitch [name]=\"formTemplate.name\" [formControl]=\"ngControl.control\" [inputId]=\"formTemplate.name\"></p-inputSwitch>\n\n</div>\n" }]
+            args: [{ selector: 'onshore-form-input-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <span class=\"p-inputgroup w-full\">\n\n      <textarea  *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n               class=\"w-full\"\n               [name]=\"formTemplate.name\"\n               [placeholder]=\"formTemplate.placeholder ?? ''\"\n               [disabled]=\"disabled\"\n               [rows]=\"3\"\n               [cols]=\"30\"\n               pInputTextarea\n               [autoResize]=\"true\"\n               [formControl]=\"ngControl.control\"\n               [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n               [minLength]=\"minLength ?? null\"\n               [maxLength]=\"maxLength ?? null\"></textarea>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text\"\n             class=\"w-full\"\n             type=\"text\"\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 ?? null\"\n             [maxLength]=\"maxLength ?? null\"/>\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 ?? null\"\n             [maxLength]=\"maxLength ?? null\"/>\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 ?? null\"\n                     [max]=\"max ?? null\">\n      </p-inputNumber>\n\n      <span class=\"p-inputgroup-addon\" *ngIf=\"!disabled\">\n        <i class=\"fa\"\n          [class.fa-check]=\"formTemplate.required && (ngControl.control.valid || ngControl.control.untouched)\"\n          [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n          [class.onshore-color-gray-3]=\"ngControl.control.untouched\"\n          [class.onshore-color-success]=\"ngControl.control.touched && ngControl.control.valid\"\n          [class.onshore-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\">\n        </i>\n      </span>\n\n      <span *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n          (click)=\"passwordVisible = !passwordVisible\"\n          class=\"p-inputgroup-addon cursor-pointer\">\n        <i class=\"fa\"\n           [class.fa-eye-slash]=\"passwordVisible\"\n           [class.fa-eye]=\"!passwordVisible\"\n        ></i>\n      </span>\n\n  </span>\n</onshore-form-item-container>\n" }]
         }], ctorParameters: function () {
         return [{ type: i1$1.NgControl, decorators: [{
                         type: Self
@@ -387,15 +393,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                     }] }, { type: i0.ChangeDetectorRef }];
     }, propDecorators: { formTemplate: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
+            }], step: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
             }] } });
 
-class OnshoreFormTextareaItemComponent {
+class OnshoreFormSwitchItemComponent {
     constructor(ngControl, cdr) {
         this.ngControl = ngControl;
         this.cdr = cdr;
-        this.FormTemplateItemType = OnshoreFormTemplateType;
+        this.valueChange = new EventEmitter();
         this.disabled = false;
         this.ngControl.valueAccessor = this;
     }
@@ -407,37 +421,29 @@ class OnshoreFormTextareaItemComponent {
         this.disabled = isDisabled;
     }
     ngOnInit() {
-        var _a, _b, _c, _d, _e, _f;
-        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.valueChanges.subscribe(() => {
-            this.cdr.markForCheck();
-        });
-        (_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.statusChanges.subscribe(() => {
-            this.cdr.markForCheck();
+        var _a, _b, _c;
+        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), skip(1)).subscribe(newValue => {
+            var _a;
+            this.valueChange.emit((_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.value);
         });
-        if (((_c = this.ngControl.control) === null || _c === void 0 ? void 0 : _c.value) == '' && this.formTemplate.default != undefined) {
-            (_d = this.ngControl.control) === null || _d === void 0 ? void 0 : _d.setValue(this.formTemplate.default);
+        if (((_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.value) == undefined && this.formTemplate.default != undefined) {
+            (_c = this.ngControl.control) === null || _c === void 0 ? void 0 : _c.setValue(this.formTemplate.default);
             this.cdr.markForCheck();
         }
-        if (this.formTemplate.enabled) {
-            (_e = this.ngControl.control) === null || _e === void 0 ? void 0 : _e.enable();
-        }
-        else {
-            (_f = this.ngControl.control) === null || _f === void 0 ? void 0 : _f.disable();
-        }
+    }
+    ngOnChanges(changes) {
+        this.cdr.markForCheck();
     }
     ngOnDestroy() {
         var _a;
         (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.disable();
     }
-    ngOnChanges(changes) {
-        this.cdr.markForCheck();
-    }
 }
-OnshoreFormTextareaItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormTextareaItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormTextareaItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormTextareaItemComponent, selector: "onshore-form-textarea-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column mb-3\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <span class=\"p-input-icon-right\">\n    <i class=\"fa\"\n       [class.tl-color-black]=\"ngControl.control?.untouched\"\n       [class.fa-check]=\"ngControl.control?.touched && ngControl.control?.valid\"\n       [class.text-primary]=\"ngControl.control?.touched && ngControl.control?.valid\"\n       [class.fa-exclamation-triangle]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n       [class.tl-color-danger]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n    ></i>\n    <textarea  class=\"w-100\"\n              [name]=\"formTemplate.name\"\n              [placeholder]=\"formTemplate.label\"\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\"></textarea>\n  </span>\n\n  <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n  <div *ngIf=\"ngControl.control?.touched\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control?.errors\"\n      [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n</div>\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: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i4$2.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "externValidationPattern", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormTextareaItemComponent, decorators: [{
+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" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\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"] }], 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-textarea-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <span class=\"p-input-icon-right\">\n    <i class=\"fa\"\n       [class.tl-color-black]=\"ngControl.control?.untouched\"\n       [class.fa-check]=\"ngControl.control?.touched && ngControl.control?.valid\"\n       [class.text-primary]=\"ngControl.control?.touched && ngControl.control?.valid\"\n       [class.fa-exclamation-triangle]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n       [class.tl-color-danger]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n    ></i>\n    <textarea  class=\"w-100\"\n              [name]=\"formTemplate.name\"\n              [placeholder]=\"formTemplate.label\"\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\"></textarea>\n  </span>\n\n  <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n  <div *ngIf=\"ngControl.control?.touched\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control?.errors\"\n      [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n</div>\n" }]
+            args: [{ selector: 'onshore-form-switch-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\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" }]
         }], ctorParameters: function () {
         return [{ type: i1$1.NgControl, decorators: [{
                         type: Self
@@ -446,6 +452,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                     }] }, { type: i0.ChangeDetectorRef }];
     }, propDecorators: { formTemplate: [{
                 type: Input
+            }], valueChange: [{
+                type: Output
             }] } });
 
 class OnshoreFormImageItemComponent {
@@ -460,6 +468,12 @@ class OnshoreFormImageItemComponent {
         this.imageHeight = 400;
         this.containWithinAspectRatio = false;
         this.aspectRatio = 1 / 1;
+        this.disableImageSelection = false;
+        this.disableWebcamSelection = false;
+        this.disableMediaSelection = false;
+        this.disableDelete = false;
+        this.imagePlaceholder = '';
+        this.mediaType = '';
         this.imageDeleted = new EventEmitter();
         this.imageCleared = new EventEmitter();
         this.imageSelectedFromMedia = new EventEmitter();
@@ -499,7 +513,7 @@ class OnshoreFormImageItemComponent {
         styleClass: 'p-dialog-background-white',
         modal: true,
         header: this.translate.instant('search.media.dialogTitle'),
-        data: { targetType: this.formSettings.mediaType }
+        data: { targetType: this.mediaType }
       }).onClose.subscribe((result) => {
         if(result) {
           this.image = result.url;
@@ -545,25 +559,10 @@ class OnshoreFormImageItemComponent {
         this.cdr.markForCheck();
     }
     ngOnInit() {
-        this.ngControl.control.valueChanges.subscribe((value) => {
-            this.cdr.markForCheck();
-        });
-        this.ngControl.control.statusChanges.subscribe((status) => {
-            this.cdr.markForCheck();
-        });
         if (this.ngControl.control.value == '' && this.formTemplate.default != undefined) {
             this.ngControl.control.setValue(this.formTemplate.default);
             this.cdr.markForCheck();
         }
-        if (this.formTemplate.enabled) {
-            this.ngControl.control.enable();
-        }
-        else {
-            this.ngControl.control.disable();
-        }
-        if (this.formTemplate.settings) {
-            this.formSettings = this.formTemplate.settings;
-        }
     }
     ngOnDestroy() {
         this.subscriptions.forEach((subscription) => {
@@ -573,17 +572,17 @@ class OnshoreFormImageItemComponent {
         this.image = null;
     }
 }
-OnshoreFormImageItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i2$1.DialogService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormImageItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormImageItemComponent, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", inverseColor: "inverseColor", imageWidth: "imageWidth", imageHeight: "imageHeight", containWithinAspectRatio: "containWithinAspectRatio", aspectRatio: "aspectRatio" }, outputs: { imageDeleted: "imageDeleted", imageCleared: "imageCleared", imageSelectedFromMedia: "imageSelectedFromMedia" }, ngImport: i0, template: "<div class=\"flex flex-column mb-3\" style=\"max-width: 500px\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <div class=\"w-100\">\n\n      <div class=\"position-relative flex justify-content-center align-items-center\" style=\"background-color: white\">\n        <!--<app-image-placeholder class=\"w-100\" [image]=\"image\" imageStyle=\"position: absolut; height: 250px; width: 250px\" [placeholder]=\"formSettings?.imagePlaceholder ? formSettings?.imagePlaceholder + ' fa-10x' : 'fa-image fa-10x'\" placeholderStyle=\"width: 250px; height: 250px\"></app-image-placeholder>-->\n      </div>\n\n      <div class=\"flex flex-column mt-4 w-100\">\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"formSettings?.disableImageSelection\"\n                icon=\"fa fa-image\"\n                label=\"Bild hochladen\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"imageChooserDialogVisible = true\">\n        </button>\n\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"formSettings?.disableWebcamSelection\"\n                icon=\"fa fa-camera\"\n                label=\"Foto aufnehmen\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"webcamDialogVisible = true\">\n        </button>\n\n        <!--<button pButton pRipple type=\"button\"\n                [hidden]=\"formSettings?.disableMediaSelection\"\n                icon=\"fa fa-photo-video\"\n                label=\"Medienverwaltung\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"searchMedia()\">\n        </button>-->\n\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"formSettings?.disableDelete\"\n                icon=\"fa fa-eraser\"\n                label=\"Entfernen\"\n                (click)=\"removeImage()\"\n                [disabled]=\"!image || disabled\"\n                class=\"p-button-rounded p-button-outlined text-secondary\">\n        </button>\n\n      </div>\n\n  </div>\n\n  <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n</div>\n\n<!--\n<p-dialog [header]=\"'Bild ausw\u00E4hlen'\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <app-image-chooser buttonLabel=\"Ausw\u00E4hlen\"\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [inverseColor]=\"inverseColor\"\n                     [resizeToWidth]=\"imageWidth\"\n                     [resizeToHeight]=\"imageHeight\"\n                     [containWithinAspectRatio]=\"containWithinAspectRatio\"\n                     [aspectRatio]=\"aspectRatio\"\n                     backgroundColor=\"transparent\"></app-image-chooser>\n</p-dialog>\n-->\n\n<!--\n<p-dialog [header]=\"'Foto aufnehmen'\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <app-webcam *ngIf=\"webcamDialogVisible\" buttonLabel=\"Smile\" (shot)=\"getWebcamImage($event)\" (canceled)=\"webcamDialogVisible = false\" [inverseColor]=\"inverseColor\"></app-webcam>\n</p-dialog>\n-->\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i6.Ripple, selector: "[pRipple]" }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormImageItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i2$3.DialogService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+OnshoreFormImageItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormImageItemComponent, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", inverseColor: "inverseColor", imageWidth: "imageWidth", imageHeight: "imageHeight", containWithinAspectRatio: "containWithinAspectRatio", aspectRatio: "aspectRatio", disableImageSelection: "disableImageSelection", disableWebcamSelection: "disableWebcamSelection", disableMediaSelection: "disableMediaSelection", disableDelete: "disableDelete", imagePlaceholder: "imagePlaceholder", mediaType: "mediaType" }, outputs: { imageDeleted: "imageDeleted", imageCleared: "imageCleared", imageSelectedFromMedia: "imageSelectedFromMedia" }, ngImport: i0, template: "<div class=\"flex flex-column mb-3\" style=\"max-width: 500px\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <div class=\"w-100\">\n\n      <div class=\"position-relative flex justify-content-center align-items-center\" style=\"background-color: white\">\n        <!--<app-image-placeholder class=\"w-100\" [image]=\"image\" imageStyle=\"position: absolut; height: 250px; width: 250px\" [placeholder]=\"fimagePlaceholder ? imagePlaceholder + ' fa-10x' : 'fa-image fa-10x'\" placeholderStyle=\"width: 250px; height: 250px\"></app-image-placeholder>-->\n      </div>\n\n      <div class=\"flex flex-column mt-4 w-100\">\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"disableImageSelection\"\n                icon=\"fa fa-image\"\n                label=\"Bild hochladen\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"imageChooserDialogVisible = true\">\n        </button>\n\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"disableWebcamSelection\"\n                icon=\"fa fa-camera\"\n                label=\"Foto aufnehmen\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"webcamDialogVisible = true\">\n        </button>\n\n        <!--<button pButton pRipple type=\"button\"\n                [hidden]=\"disableMediaSelection\"\n                icon=\"fa fa-photo-video\"\n                label=\"Medienverwaltung\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"searchMedia()\">\n        </button>-->\n\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"disableDelete\"\n                icon=\"fa fa-eraser\"\n                label=\"Entfernen\"\n                (click)=\"removeImage()\"\n                [disabled]=\"!image || disabled\"\n                class=\"p-button-rounded p-button-outlined text-secondary\">\n        </button>\n\n      </div>\n\n  </div>\n\n  <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n</div>\n\n<!--\n<p-dialog [header]=\"'Bild ausw\u00E4hlen'\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <app-image-chooser buttonLabel=\"Ausw\u00E4hlen\"\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [inverseColor]=\"inverseColor\"\n                     [resizeToWidth]=\"imageWidth\"\n                     [resizeToHeight]=\"imageHeight\"\n                     [containWithinAspectRatio]=\"containWithinAspectRatio\"\n                     [aspectRatio]=\"aspectRatio\"\n                     backgroundColor=\"transparent\"></app-image-chooser>\n</p-dialog>\n-->\n\n<!--\n<p-dialog [header]=\"'Foto aufnehmen'\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <app-webcam *ngIf=\"webcamDialogVisible\" buttonLabel=\"Smile\" (shot)=\"getWebcamImage($event)\" (canceled)=\"webcamDialogVisible = false\" [inverseColor]=\"inverseColor\"></app-webcam>\n</p-dialog>\n-->\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i6.Ripple, selector: "[pRipple]" }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-image-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\" style=\"max-width: 500px\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <div class=\"w-100\">\n\n      <div class=\"position-relative flex justify-content-center align-items-center\" style=\"background-color: white\">\n        <!--<app-image-placeholder class=\"w-100\" [image]=\"image\" imageStyle=\"position: absolut; height: 250px; width: 250px\" [placeholder]=\"formSettings?.imagePlaceholder ? formSettings?.imagePlaceholder + ' fa-10x' : 'fa-image fa-10x'\" placeholderStyle=\"width: 250px; height: 250px\"></app-image-placeholder>-->\n      </div>\n\n      <div class=\"flex flex-column mt-4 w-100\">\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"formSettings?.disableImageSelection\"\n                icon=\"fa fa-image\"\n                label=\"Bild hochladen\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"imageChooserDialogVisible = true\">\n        </button>\n\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"formSettings?.disableWebcamSelection\"\n                icon=\"fa fa-camera\"\n                label=\"Foto aufnehmen\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"webcamDialogVisible = true\">\n        </button>\n\n        <!--<button pButton pRipple type=\"button\"\n                [hidden]=\"formSettings?.disableMediaSelection\"\n                icon=\"fa fa-photo-video\"\n                label=\"Medienverwaltung\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"searchMedia()\">\n        </button>-->\n\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"formSettings?.disableDelete\"\n                icon=\"fa fa-eraser\"\n                label=\"Entfernen\"\n                (click)=\"removeImage()\"\n                [disabled]=\"!image || disabled\"\n                class=\"p-button-rounded p-button-outlined text-secondary\">\n        </button>\n\n      </div>\n\n  </div>\n\n  <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n</div>\n\n<!--\n<p-dialog [header]=\"'Bild ausw\u00E4hlen'\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <app-image-chooser buttonLabel=\"Ausw\u00E4hlen\"\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [inverseColor]=\"inverseColor\"\n                     [resizeToWidth]=\"imageWidth\"\n                     [resizeToHeight]=\"imageHeight\"\n                     [containWithinAspectRatio]=\"containWithinAspectRatio\"\n                     [aspectRatio]=\"aspectRatio\"\n                     backgroundColor=\"transparent\"></app-image-chooser>\n</p-dialog>\n-->\n\n<!--\n<p-dialog [header]=\"'Foto aufnehmen'\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <app-webcam *ngIf=\"webcamDialogVisible\" buttonLabel=\"Smile\" (shot)=\"getWebcamImage($event)\" (canceled)=\"webcamDialogVisible = false\" [inverseColor]=\"inverseColor\"></app-webcam>\n</p-dialog>\n-->\n" }]
+            args: [{ selector: 'onshore-form-image-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\" style=\"max-width: 500px\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <div class=\"w-100\">\n\n      <div class=\"position-relative flex justify-content-center align-items-center\" style=\"background-color: white\">\n        <!--<app-image-placeholder class=\"w-100\" [image]=\"image\" imageStyle=\"position: absolut; height: 250px; width: 250px\" [placeholder]=\"fimagePlaceholder ? imagePlaceholder + ' fa-10x' : 'fa-image fa-10x'\" placeholderStyle=\"width: 250px; height: 250px\"></app-image-placeholder>-->\n      </div>\n\n      <div class=\"flex flex-column mt-4 w-100\">\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"disableImageSelection\"\n                icon=\"fa fa-image\"\n                label=\"Bild hochladen\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"imageChooserDialogVisible = true\">\n        </button>\n\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"disableWebcamSelection\"\n                icon=\"fa fa-camera\"\n                label=\"Foto aufnehmen\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"webcamDialogVisible = true\">\n        </button>\n\n        <!--<button pButton pRipple type=\"button\"\n                [hidden]=\"disableMediaSelection\"\n                icon=\"fa fa-photo-video\"\n                label=\"Medienverwaltung\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"searchMedia()\">\n        </button>-->\n\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"disableDelete\"\n                icon=\"fa fa-eraser\"\n                label=\"Entfernen\"\n                (click)=\"removeImage()\"\n                [disabled]=\"!image || disabled\"\n                class=\"p-button-rounded p-button-outlined text-secondary\">\n        </button>\n\n      </div>\n\n  </div>\n\n  <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n</div>\n\n<!--\n<p-dialog [header]=\"'Bild ausw\u00E4hlen'\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <app-image-chooser buttonLabel=\"Ausw\u00E4hlen\"\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [inverseColor]=\"inverseColor\"\n                     [resizeToWidth]=\"imageWidth\"\n                     [resizeToHeight]=\"imageHeight\"\n                     [containWithinAspectRatio]=\"containWithinAspectRatio\"\n                     [aspectRatio]=\"aspectRatio\"\n                     backgroundColor=\"transparent\"></app-image-chooser>\n</p-dialog>\n-->\n\n<!--\n<p-dialog [header]=\"'Foto aufnehmen'\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <app-webcam *ngIf=\"webcamDialogVisible\" buttonLabel=\"Smile\" (shot)=\"getWebcamImage($event)\" (canceled)=\"webcamDialogVisible = false\" [inverseColor]=\"inverseColor\"></app-webcam>\n</p-dialog>\n-->\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
                         type: Self
                     }, {
                         type: Optional
-                    }] }, { type: i2$1.DialogService }, { type: i1.TranslateService }];
+                    }] }, { type: i2$3.DialogService }, { type: i1.TranslateService }];
     }, propDecorators: { formTemplate: [{
                 type: Input
             }], inverseColor: [{
@@ -596,6 +595,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Input
             }], aspectRatio: [{
                 type: Input
+            }], disableImageSelection: [{
+                type: Input
+            }], disableWebcamSelection: [{
+                type: Input
+            }], disableMediaSelection: [{
+                type: Input
+            }], disableDelete: [{
+                type: Input
+            }], imagePlaceholder: [{
+                type: Input
+            }], mediaType: [{
+                type: Input
             }], imageDeleted: [{
                 type: Output
             }], imageCleared: [{
@@ -608,8 +619,9 @@ class OnshoreFormDropdownItemComponent {
     constructor(ngControl, cdr) {
         this.ngControl = ngControl;
         this.cdr = cdr;
-        this.disabled = false;
         this.multiple = false;
+        this.showClear = false;
+        this.disabled = false;
         this.ngControl.valueAccessor = this;
     }
     // ControlValueAccessor interface
@@ -621,27 +633,16 @@ class OnshoreFormDropdownItemComponent {
     }
     clearSelection() {
         var _a;
-        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.setValue(null);
+        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.reset();
+        //this.ngControl.control?.setValue(this.multiple ? [] : '');
+        this.cdr.markForCheck();
     }
     ngOnInit() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.valueChanges.subscribe(() => {
-            this.cdr.markForCheck();
-        });
-        (_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.statusChanges.subscribe(() => {
-            this.cdr.markForCheck();
-        });
-        if (((_c = this.ngControl.control) === null || _c === void 0 ? void 0 : _c.value) == '' && this.formTemplate.default != undefined) {
-            (_d = this.ngControl.control) === null || _d === void 0 ? void 0 : _d.setValue(this.formTemplate.default);
+        var _a, _b;
+        if (((_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.value) == '' && this.formTemplate.default != undefined) {
+            (_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.setValue(this.formTemplate.default);
             this.cdr.markForCheck();
         }
-        if (this.formTemplate.enabled) {
-            (_e = this.ngControl.control) === null || _e === void 0 ? void 0 : _e.enable();
-        }
-        else {
-            (_f = this.ngControl.control) === null || _f === void 0 ? void 0 : _f.disable();
-        }
-        this.multiple = (_g = this.formTemplate.settings) === null || _g === void 0 ? void 0 : _g.multiple;
     }
     ngOnDestroy() {
         var _a;
@@ -652,10 +653,10 @@ 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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column mb-3\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate?.label}}\n      <span *ngIf=\"formTemplate?.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate?.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate?.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <p-dropdown *ngIf=\"!multiple\"\n              class=\"w-100\"\n              [options]=\"formTemplate?.options\"\n              [formControl]=\"ngControl.control\"\n              [name]=\"formTemplate?.name\"\n              [placeholder]=\"formTemplate?.placeholder\"\n              [disabled]=\"disabled\"\n              [dataKey]=\"formTemplate?.optionDataKey\"\n              [showClear]=\"formTemplate?.settings?.showClear\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n  </p-dropdown>\n\n  <p-multiSelect *ngIf=\"multiple\"\n               class=\"w-100\"\n               [options]=\"formTemplate?.options\"\n               [formControl]=\"ngControl.control\"\n               [name]=\"formTemplate?.name\"\n               [placeholder]=\"formTemplate?.placeholder\"\n               [disabled]=\"disabled\"\n               [dataKey]=\"formTemplate?.optionDataKey\"\n               display=\"chip\"\n               optionDisabled=\"disabled\"\n               appendTo=\"body\"></p-multiSelect>\n\n  <div *ngIf=\"ngControl.control.touched\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\"\n      [externValidationPattern]=\"formTemplate?.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n</div>\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.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: "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: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "externValidationPattern", "validationItems"] }], 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" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\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              [dataKey]=\"formTemplate?.optionDataKey\"\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                 [dataKey]=\"formTemplate?.optionDataKey\"\n                 [showClear]=\"showClear\"\n                 (onClear)=\"clearSelection()\"\n                 display=\"chip\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\"></p-multiSelect>\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.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$1.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"] }], 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: "<div class=\"flex flex-column mb-3\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate?.label}}\n      <span *ngIf=\"formTemplate?.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate?.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate?.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <p-dropdown *ngIf=\"!multiple\"\n              class=\"w-100\"\n              [options]=\"formTemplate?.options\"\n              [formControl]=\"ngControl.control\"\n              [name]=\"formTemplate?.name\"\n              [placeholder]=\"formTemplate?.placeholder\"\n              [disabled]=\"disabled\"\n              [dataKey]=\"formTemplate?.optionDataKey\"\n              [showClear]=\"formTemplate?.settings?.showClear\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n  </p-dropdown>\n\n  <p-multiSelect *ngIf=\"multiple\"\n               class=\"w-100\"\n               [options]=\"formTemplate?.options\"\n               [formControl]=\"ngControl.control\"\n               [name]=\"formTemplate?.name\"\n               [placeholder]=\"formTemplate?.placeholder\"\n               [disabled]=\"disabled\"\n               [dataKey]=\"formTemplate?.optionDataKey\"\n               display=\"chip\"\n               optionDisabled=\"disabled\"\n               appendTo=\"body\"></p-multiSelect>\n\n  <div *ngIf=\"ngControl.control.touched\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\"\n      [externValidationPattern]=\"formTemplate?.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n</div>\n" }]
+            args: [{ selector: 'onshore-form-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\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              [dataKey]=\"formTemplate?.optionDataKey\"\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                 [dataKey]=\"formTemplate?.optionDataKey\"\n                 [showClear]=\"showClear\"\n                 (onClear)=\"clearSelection()\"\n                 display=\"chip\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\"></p-multiSelect>\n</onshore-form-item-container>\n" }]
         }], ctorParameters: function () {
         return [{ type: i1$1.NgControl, decorators: [{
                         type: Self
@@ -664,6 +665,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                     }] }, { type: i0.ChangeDetectorRef }];
     }, propDecorators: { formTemplate: [{
                 type: Input
+            }], multiple: [{
+                type: Input
+            }], showClear: [{
+                type: Input
             }] } });
 
 class OnshoreFormColorpickerItemComponent {
@@ -690,24 +695,12 @@ class OnshoreFormColorpickerItemComponent {
         this.colorPickerValue = (_a = input.target) === null || _a === void 0 ? void 0 : _a.value;
     }
     ngOnInit() {
-        var _a, _b, _c, _d, _e, _f;
-        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.valueChanges.subscribe(() => {
-            this.cdr.markForCheck();
-        });
-        (_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.statusChanges.subscribe(() => {
-            this.cdr.markForCheck();
-        });
-        if (((_c = this.ngControl.control) === null || _c === void 0 ? void 0 : _c.value) == '' && this.formTemplate.default != undefined) {
-            (_d = this.ngControl.control) === null || _d === void 0 ? void 0 : _d.setValue(this.formTemplate.default);
+        var _a, _b;
+        if (((_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.value) == '' && this.formTemplate.default != undefined) {
+            (_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.setValue(this.formTemplate.default);
             this.colorPickerValue = this.formTemplate.default;
             this.cdr.markForCheck();
         }
-        if (this.formTemplate.enabled) {
-            (_e = this.ngControl.control) === null || _e === void 0 ? void 0 : _e.enable();
-        }
-        else {
-            (_f = this.ngControl.control) === null || _f === void 0 ? void 0 : _f.disable();
-        }
     }
     ngOnDestroy() {
         var _a;
@@ -720,10 +713,10 @@ class OnshoreFormColorpickerItemComponent {
     }
 }
 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 });
-OnshoreFormColorpickerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormColorpickerItemComponent, selector: "onshore-form-colorpicker-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column mb-3\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}:\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <div class=\"flex w-100\">\n    <p-colorPicker [(ngModel)]=\"colorPickerValue\" format=\"hex\" [inline]=\"false\" appendTo=\"body\" [baseZIndex]=\"99999\" (onChange)=\"changeColor()\"></p-colorPicker>\n    <input class=\"w-100 ml-2\"\n           type=\"text\"\n           [name]=\"formTemplate.name\"\n           [placeholder]=\"formTemplate.label\"\n           [formControl]=\"ngControl.control\"\n           pInputText\n           [value]=\"ngControl.control.value\"\n           (input)=\"changeInput($event)\"/>\n  </div>\n\n  <div *ngIf=\"ngControl.control.touched\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\"\n      [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n</div>\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.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: i3$2.ColorPicker, selector: "p-colorPicker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { 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: "directive", type: i5.InputText, selector: "[pInputText]" }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "externValidationPattern", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormColorpickerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormColorpickerItemComponent, selector: "onshore-form-colorpicker-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\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.InputText, selector: "[pInputText]" }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormColorpickerItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-colorpicker-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}:\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <div class=\"flex w-100\">\n    <p-colorPicker [(ngModel)]=\"colorPickerValue\" format=\"hex\" [inline]=\"false\" appendTo=\"body\" [baseZIndex]=\"99999\" (onChange)=\"changeColor()\"></p-colorPicker>\n    <input class=\"w-100 ml-2\"\n           type=\"text\"\n           [name]=\"formTemplate.name\"\n           [placeholder]=\"formTemplate.label\"\n           [formControl]=\"ngControl.control\"\n           pInputText\n           [value]=\"ngControl.control.value\"\n           (input)=\"changeInput($event)\"/>\n  </div>\n\n  <div *ngIf=\"ngControl.control.touched\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\"\n      [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n</div>\n" }]
+            args: [{ selector: 'onshore-form-colorpicker-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\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" }]
         }], ctorParameters: function () {
         return [{ type: i1$1.NgControl, decorators: [{
                         type: Self
@@ -753,22 +746,10 @@ class OnshoreFormCheckboxItemComponent {
         (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.setValue(value.checked);
     }
     ngOnInit() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.valueChanges.subscribe(() => {
+        var _a, _b, _c;
+        if (((_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.value) !== true && ((_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.value) !== false && this.formTemplate.default != undefined) {
+            (_c = this.ngControl.control) === null || _c === void 0 ? void 0 : _c.setValue(this.formTemplate.default);
             this.cdr.markForCheck();
-        });
-        (_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.statusChanges.subscribe(() => {
-            this.cdr.markForCheck();
-        });
-        if (((_c = this.ngControl.control) === null || _c === void 0 ? void 0 : _c.value) !== true && ((_d = this.ngControl.control) === null || _d === void 0 ? void 0 : _d.value) !== false && this.formTemplate.default != undefined) {
-            (_e = this.ngControl.control) === null || _e === void 0 ? void 0 : _e.setValue(this.formTemplate.default);
-            this.cdr.markForCheck();
-        }
-        if (this.formTemplate.enabled) {
-            (_f = this.ngControl.control) === null || _f === void 0 ? void 0 : _f.enable();
-        }
-        else {
-            (_g = this.ngControl.control) === null || _g === void 0 ? void 0 : _g.disable();
         }
     }
     ngOnChanges(changes) {
@@ -780,10 +761,10 @@ class OnshoreFormCheckboxItemComponent {
     }
 }
 OnshoreFormCheckboxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormCheckboxItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormCheckboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormCheckboxItemComponent, selector: "onshore-form-checkbox-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column mb-3\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <div class=\"p-field-checkbox flex\">\n    <p-checkbox class=\"align-self-start mt-1\" [name]=\"formTemplate.name\" [formControl]=\"ngControl.control\" [binary]=\"true\" [inputId]=\"formTemplate.name\" [value]=\"ngControl.control.value\" (onChange)=\"changeCheck($event)\"></p-checkbox>\n    <label class=\"mb-0 ml-2\" [for]=\"formTemplate.name\">{{formTemplate.description}}</label>\n  </div>\n\n  <div *ngIf=\"ngControl.control.touched\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\"\n      [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n</div>\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$3.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { 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: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "externValidationPattern", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormCheckboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormCheckboxItemComponent, selector: "onshore-form-checkbox-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n\n  <div class=\"p-field-checkbox flex\">\n    <p-checkbox\n      class=\"align-self-start mt-1\"\n      [name]=\"formTemplate.name\"\n      [formControl]=\"ngControl.control\"\n      [binary]=\"true\"\n      [disabled]=\"disabled\"\n      [inputId]=\"formTemplate.name\"\n      [value]=\"ngControl.control.value\"\n      (onChange)=\"changeCheck($event)\">\n    </p-checkbox>\n\n    <label class=\"mb-0 ml-2 onshore-color-gray-5\"\n           [for]=\"formTemplate.name\">\n      {{formTemplate.description}}\n    </label>\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$5.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormCheckboxItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-checkbox-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <div class=\"p-field-checkbox flex\">\n    <p-checkbox class=\"align-self-start mt-1\" [name]=\"formTemplate.name\" [formControl]=\"ngControl.control\" [binary]=\"true\" [inputId]=\"formTemplate.name\" [value]=\"ngControl.control.value\" (onChange)=\"changeCheck($event)\"></p-checkbox>\n    <label class=\"mb-0 ml-2\" [for]=\"formTemplate.name\">{{formTemplate.description}}</label>\n  </div>\n\n  <div *ngIf=\"ngControl.control.touched\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\"\n      [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n</div>\n" }]
+            args: [{ selector: 'onshore-form-checkbox-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n\n  <div class=\"p-field-checkbox flex\">\n    <p-checkbox\n      class=\"align-self-start mt-1\"\n      [name]=\"formTemplate.name\"\n      [formControl]=\"ngControl.control\"\n      [binary]=\"true\"\n      [disabled]=\"disabled\"\n      [inputId]=\"formTemplate.name\"\n      [value]=\"ngControl.control.value\"\n      (onChange)=\"changeCheck($event)\">\n    </p-checkbox>\n\n    <label class=\"mb-0 ml-2 onshore-color-gray-5\"\n           [for]=\"formTemplate.name\">\n      {{formTemplate.description}}\n    </label>\n  </div>\n\n</onshore-form-item-container>\n" }]
         }], ctorParameters: function () {
         return [{ type: i1$1.NgControl, decorators: [{
                         type: Self
@@ -795,13 +776,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
             }] } });
 
 class OnshoreFormAutocompleteItemComponent {
+    constructor(cdr, ngControl) {
+        this.cdr = cdr;
+        this.ngControl = ngControl;
+        this.multiple = false;
+        this.searchedData = [];
+        this.onSearch = new EventEmitter();
+        this.onSelect = new EventEmitter();
+        this.onClear = new EventEmitter();
+        this.disabled = false;
+        this.ngControl.valueAccessor = this;
+    }
+    selected(selectedItem) {
+        this.onSelect.emit(selectedItem.data);
+        this.cdr.markForCheck();
+    }
+    searchClear() {
+        this.searchedData = [];
+        this.ngControl.reset();
+        this.onClear.emit();
+    }
+    searchPrepare(term) {
+        if (term.query != '') {
+            this.search(term.query);
+        }
+        else {
+            this.searchedData = [];
+            this.ngControl.reset();
+            this.onClear.emit();
+        }
+    }
+    search(searchTerm) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.onSearch.emit(searchTerm);
+            this.cdr.markForCheck();
+        });
+    }
+    writeValue(obj) {
+        if (obj) {
+            this.cdr.markForCheck();
+        }
+    }
+    registerOnChange(fn) {
+        if (this.ngControl.value) {
+            this.cdr.markForCheck();
+        }
+    }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngOnInit() {
+        var _a, _b;
+        if (((_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.value) == '' && this.formTemplate.default != undefined) {
+            (_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.setValue(this.formTemplate.default);
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.disable();
+    }
+    ngOnChanges(changes) {
+        this.cdr.markForCheck();
+    }
 }
-OnshoreFormAutocompleteItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormAutocompleteItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormAutocompleteItemComponent, selector: "onshore-form-autocomplete-item", ngImport: i0, template: "<!--<div class=\"flex flex-column mb-3\">\n  <div *ngIf=\"formTemplate.label\" class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n                  appendTo=\"body\"\n                  [formControl]=\"this.ngControl.control\"\n                  (onSelect)=\"selected($event)\"\n                  (onUnselect)=\"selected($event)\"\n                  (onClear)=\"searchClear()\"\n                  [suggestions]=\"dataSearch\"\n                  (completeMethod)=\"searchPrepare($event)\"\n                  [size]=\"30\"\n                  [minLength]=\"2\"\n                  [multiple]=\"multiple\"\n                  [delay]=\"1000\"\n                  [unique]=\"true\"\n                  [field]=\"selectedField\"\n                  class=\"w-100\">\n    <ng-template let-item pTemplate=\"item\">\n      <div *ngIf=\"suggestionsHighlightedField\">\n        <span class=\"mr-1\">\n          <b>{{item[suggestionsHighlightedField]}}</b><br>\n        </span>\n      </div>\n      <div [hidden]=\"suggestionsLineOneFields.length <= 0\"><span *ngFor=\"let field of suggestionsLineOneFields\">{{item[field]}} </span></div>\n      <div [hidden]=\"suggestionsLineTwoFields.length <= 0\"><span *ngFor=\"let field of suggestionsLineTwoFields\">{{item[field]}} </span></div>\n    </ng-template>\n  </p-autoComplete>\n\n  <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n  <div *ngIf=\"ngControl.control.touched\">\n    <onshore-form-validation-output\n      [validationErrors]=\"ngControl.control.errors\"\n      [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n</div>\n-->\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormAutocompleteItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+OnshoreFormAutocompleteItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormAutocompleteItemComponent, selector: "onshore-form-autocomplete-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", searchedData: "searchedData" }, outputs: { onSearch: "onSearch", onSelect: "onSelect", onClear: "onClear" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n                  appendTo=\"body\"\n                  [formControl]=\"this.ngControl.control\"\n                  (onSelect)=\"selected($event)\"\n                  (onUnselect)=\"selected($event)\"\n                  (onClear)=\"searchClear()\"\n                  [suggestions]=\"searchedData\"\n                  (completeMethod)=\"searchPrepare($event)\"\n                  [disabled]=\"disabled\"\n                  [size]=\"30\"\n                  [minLength]=\"2\"\n                  [multiple]=\"multiple\"\n                  [delay]=\"1000\"\n                  [unique]=\"true\"\n                  field=\"firstLineLabel\"\n                  dataKey=\"data\"\n                  class=\"w-full\">\n    <ng-template let-item pTemplate=\"item\">\n      <div *ngIf=\"item.firstLineLabel\">\n        <span class=\"mr-1\">\n          <b>{{item.firstLineLabel}}</b><br>\n        </span>\n      </div>\n      <div *ngIf=\"item.secondLineLabel\"><span>{{item.secondLineLabel}} </span></div>\n      <div *ngIf=\"item.thirdLineLabel\"><span>{{item.thirdLineLabel}} </span></div>\n    </ng-template>\n  </p-autoComplete>\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "itemSize", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-autocomplete-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--<div class=\"flex flex-column mb-3\">\n  <div *ngIf=\"formTemplate.label\" class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n                  appendTo=\"body\"\n                  [formControl]=\"this.ngControl.control\"\n                  (onSelect)=\"selected($event)\"\n                  (onUnselect)=\"selected($event)\"\n                  (onClear)=\"searchClear()\"\n                  [suggestions]=\"dataSearch\"\n                  (completeMethod)=\"searchPrepare($event)\"\n                  [size]=\"30\"\n                  [minLength]=\"2\"\n                  [multiple]=\"multiple\"\n                  [delay]=\"1000\"\n                  [unique]=\"true\"\n                  [field]=\"selectedField\"\n                  class=\"w-100\">\n    <ng-template let-item pTemplate=\"item\">\n      <div *ngIf=\"suggestionsHighlightedField\">\n        <span class=\"mr-1\">\n          <b>{{item[suggestionsHighlightedField]}}</b><br>\n        </span>\n      </div>\n      <div [hidden]=\"suggestionsLineOneFields.length <= 0\"><span *ngFor=\"let field of suggestionsLineOneFields\">{{item[field]}} </span></div>\n      <div [hidden]=\"suggestionsLineTwoFields.length <= 0\"><span *ngFor=\"let field of suggestionsLineTwoFields\">{{item[field]}} </span></div>\n    </ng-template>\n  </p-autoComplete>\n\n  <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n  <div *ngIf=\"ngControl.control.touched\">\n    <onshore-form-validation-output\n      [validationErrors]=\"ngControl.control.errors\"\n      [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n    </onshore-form-validation-output>\n  </div>\n\n</div>\n-->\n" }]
-        }] });
+            args: [{ selector: 'onshore-form-autocomplete-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n                  appendTo=\"body\"\n                  [formControl]=\"this.ngControl.control\"\n                  (onSelect)=\"selected($event)\"\n                  (onUnselect)=\"selected($event)\"\n                  (onClear)=\"searchClear()\"\n                  [suggestions]=\"searchedData\"\n                  (completeMethod)=\"searchPrepare($event)\"\n                  [disabled]=\"disabled\"\n                  [size]=\"30\"\n                  [minLength]=\"2\"\n                  [multiple]=\"multiple\"\n                  [delay]=\"1000\"\n                  [unique]=\"true\"\n                  field=\"firstLineLabel\"\n                  dataKey=\"data\"\n                  class=\"w-full\">\n    <ng-template let-item pTemplate=\"item\">\n      <div *ngIf=\"item.firstLineLabel\">\n        <span class=\"mr-1\">\n          <b>{{item.firstLineLabel}}</b><br>\n        </span>\n      </div>\n      <div *ngIf=\"item.secondLineLabel\"><span>{{item.secondLineLabel}} </span></div>\n      <div *ngIf=\"item.thirdLineLabel\"><span>{{item.thirdLineLabel}} </span></div>\n    </ng-template>\n  </p-autoComplete>\n</onshore-form-item-container>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { formTemplate: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], searchedData: [{
+                type: Input
+            }], onSearch: [{
+                type: Output
+            }], onSelect: [{
+                type: Output
+            }], onClear: [{
+                type: Output
+            }] } });
+
+class OnshoreFormDatetimeItemComponent {
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.OnshoreFormTemplateType = OnshoreFormTemplateType;
+        this.disabled = false;
+        this.ngControl.valueAccessor = this;
+    }
+    // ControlValueAccessor interface
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    selectDate(date) {
+        console.log(date);
+    }
+    selectTime(time) {
+        console.log(time);
+    }
+    ngOnInit() {
+        var _a, _b, _c;
+        if (((_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.value) !== true && ((_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.value) !== false && this.formTemplate.default != undefined) {
+            (_c = this.ngControl.control) === null || _c === void 0 ? void 0 : _c.setValue(this.formTemplate.default);
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnChanges(changes) {
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.disable();
+    }
+}
+OnshoreFormDatetimeItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormDatetimeItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+OnshoreFormDatetimeItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormDatetimeItemComponent, selector: "onshore-form-datetime-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n\n  <p-calendar class=\"w-full\"\n              [name]=\"formTemplate.name\"\n              [placeholder]=\"formTemplate.placeholder ?? 0\"\n              [disabled]=\"disabled\"\n              [formControl]=\"ngControl.control\"\n              dateFormat=\"dd.mm.yy\"\n              dataType=\"string\"\n              hourFormat=\"24\"\n              [timeOnly]=\"formTemplate.type == OnshoreFormTemplateType.time ? true : false\"\n              [showTime]=\"formTemplate.type == OnshoreFormTemplateType.datetime ? true : false\"\n              [defaultDate]=\"formTemplate.default\"\n              (onSelect)=\"selectDate($event)\">\n  </p-calendar>\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$6.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormDatetimeItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-form-datetime-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n\n  <p-calendar class=\"w-full\"\n              [name]=\"formTemplate.name\"\n              [placeholder]=\"formTemplate.placeholder ?? 0\"\n              [disabled]=\"disabled\"\n              [formControl]=\"ngControl.control\"\n              dateFormat=\"dd.mm.yy\"\n              dataType=\"string\"\n              hourFormat=\"24\"\n              [timeOnly]=\"formTemplate.type == OnshoreFormTemplateType.time ? true : false\"\n              [showTime]=\"formTemplate.type == OnshoreFormTemplateType.datetime ? true : false\"\n              [defaultDate]=\"formTemplate.default\"\n              (onSelect)=\"selectDate($event)\">\n  </p-calendar>\n\n</onshore-form-item-container>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { formTemplate: [{
+                type: Input
+            }] } });
 
 class OnshoreFormsModule {
 }
@@ -809,13 +923,15 @@ OnshoreFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 OnshoreFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, declarations: [OnshoreFormsComponent,
         OnshoreFormInputItemComponent,
         OnshoreFormSwitchItemComponent,
-        OnshoreFormTextareaItemComponent,
         OnshoreFormValidationOutputComponent,
         OnshoreFormImageItemComponent,
         OnshoreFormDropdownItemComponent,
         OnshoreFormColorpickerItemComponent,
         OnshoreFormCheckboxItemComponent,
-        OnshoreFormAutocompleteItemComponent], imports: [CommonModule,
+        OnshoreFormAutocompleteItemComponent,
+        OnshoreFormItemContainer,
+        OnshoreFormDatetimeItemComponent], imports: [CommonModule,
+        BrowserAnimationsModule,
         FormsModule,
         ReactiveFormsModule,
         ButtonModule,
@@ -830,19 +946,24 @@ OnshoreFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         InputSwitchModule,
         InputTextModule,
         InputTextareaModule,
-        DialogModule], exports: [OnshoreFormsComponent,
+        DialogModule,
+        SelectButtonModule,
+        ToggleButtonModule,
+        CalendarModule], exports: [OnshoreFormsComponent,
         OnshoreFormInputItemComponent,
         OnshoreFormSwitchItemComponent,
-        OnshoreFormTextareaItemComponent,
         OnshoreFormValidationOutputComponent,
         OnshoreFormImageItemComponent,
         OnshoreFormDropdownItemComponent,
         OnshoreFormColorpickerItemComponent,
         OnshoreFormCheckboxItemComponent,
-        OnshoreFormAutocompleteItemComponent] });
+        OnshoreFormAutocompleteItemComponent,
+        OnshoreFormItemContainer,
+        OnshoreFormDatetimeItemComponent] });
 OnshoreFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, providers: [
         OnshoreFormsService
     ], imports: [CommonModule,
+        BrowserAnimationsModule,
         FormsModule,
         ReactiveFormsModule,
         ButtonModule,
@@ -857,7 +978,10 @@ OnshoreFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
         InputSwitchModule,
         InputTextModule,
         InputTextareaModule,
-        DialogModule] });
+        DialogModule,
+        SelectButtonModule,
+        ToggleButtonModule,
+        CalendarModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -865,16 +989,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                         OnshoreFormsComponent,
                         OnshoreFormInputItemComponent,
                         OnshoreFormSwitchItemComponent,
-                        OnshoreFormTextareaItemComponent,
                         OnshoreFormValidationOutputComponent,
                         OnshoreFormImageItemComponent,
                         OnshoreFormDropdownItemComponent,
                         OnshoreFormColorpickerItemComponent,
                         OnshoreFormCheckboxItemComponent,
-                        OnshoreFormAutocompleteItemComponent
+                        OnshoreFormAutocompleteItemComponent,
+                        OnshoreFormItemContainer,
+                        OnshoreFormDatetimeItemComponent
                     ],
                     imports: [
                         CommonModule,
+                        BrowserAnimationsModule,
                         FormsModule,
                         ReactiveFormsModule,
                         ButtonModule,
@@ -889,19 +1015,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                         InputSwitchModule,
                         InputTextModule,
                         InputTextareaModule,
-                        DialogModule
+                        DialogModule,
+                        SelectButtonModule,
+                        ToggleButtonModule,
+                        CalendarModule
                     ],
                     exports: [
                         OnshoreFormsComponent,
                         OnshoreFormInputItemComponent,
                         OnshoreFormSwitchItemComponent,
-                        OnshoreFormTextareaItemComponent,
                         OnshoreFormValidationOutputComponent,
                         OnshoreFormImageItemComponent,
                         OnshoreFormDropdownItemComponent,
                         OnshoreFormColorpickerItemComponent,
                         OnshoreFormCheckboxItemComponent,
-                        OnshoreFormAutocompleteItemComponent
+                        OnshoreFormAutocompleteItemComponent,
+                        OnshoreFormItemContainer,
+                        OnshoreFormDatetimeItemComponent
                     ],
                     providers: [
                         OnshoreFormsService
@@ -917,5 +1047,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormSwitchItemComponent, OnshoreFormTemplateType, OnshoreFormTextareaItemComponent, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsModule, OnshoreFormsService, OnshoreImageError };
+export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDatetimeItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormItemContainer, OnshoreFormSwitchItemComponent, OnshoreFormTemplateLayout, OnshoreFormTemplateType, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsModule, OnshoreFormsService, OnshoreImageError };
 //# sourceMappingURL=onshore-forms.mjs.map