onshore-forms 0.0.7 → 0.0.8

package/fesm2015/onshore-forms.mjs

@@ -0,0 +1,921 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, ChangeDetectionStrategy, Input, Self, Optional, EventEmitter, Output, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { FormGroup, FormControl, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
+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 { InputNumberModule } from 'primeng/inputnumber';
+import * as i5 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i1 from '@ngx-translate/core';
+import * as i4$1 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 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 { DropdownModule } from 'primeng/dropdown';
+import * as i4$3 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import * as i3$2 from 'primeng/colorpicker';
+import { ColorPickerModule } from 'primeng/colorpicker';
+import * as i3$3 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { DialogModule } from 'primeng/dialog';
+
+var OnshoreFormTemplateType;
+(function (OnshoreFormTemplateType) {
+    OnshoreFormTemplateType["text"] = "text";
+    OnshoreFormTemplateType["textarea"] = "textarea";
+    OnshoreFormTemplateType["editor"] = "editor";
+    OnshoreFormTemplateType["password"] = "password";
+    OnshoreFormTemplateType["number"] = "number";
+    OnshoreFormTemplateType["email"] = "email";
+    OnshoreFormTemplateType["phone"] = "phone";
+    OnshoreFormTemplateType["regexp"] = "regexp";
+    OnshoreFormTemplateType["select"] = "select";
+    OnshoreFormTemplateType["check"] = "check";
+    OnshoreFormTemplateType["radio"] = "radio";
+    OnshoreFormTemplateType["image"] = "image";
+    OnshoreFormTemplateType["autocomplete"] = "autocomplete";
+    OnshoreFormTemplateType["color"] = "color";
+    OnshoreFormTemplateType["subform"] = "subform";
+})(OnshoreFormTemplateType || (OnshoreFormTemplateType = {}));
+var OnshoreImageError;
+(function (OnshoreImageError) {
+    OnshoreImageError["none"] = "";
+    OnshoreImageError["fileType"] = "fileType";
+    OnshoreImageError["ratio"] = "ratio";
+    OnshoreImageError["size"] = "size";
+})(OnshoreImageError || (OnshoreImageError = {}));
+
+class OnshoreFormsService {
+    constructor() {
+        this._formValidations = [];
+        this.subscriptions = [];
+        this.isLoading$ = new Subject();
+        this._form = new FormGroup({}, { updateOn: 'change' });
+        this._formTemplate = [];
+    }
+    get form() {
+        return this._form;
+    }
+    get formValues() {
+        var _a;
+        return (_a = this._form) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    patchForm(value) {
+        var _a;
+        (_a = this._form) === null || _a === void 0 ? void 0 : _a.patchValue(value);
+    }
+    resetForm() {
+        var _a, _b;
+        (_a = this._form) === null || _a === void 0 ? void 0 : _a.reset();
+        (_b = this._form) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+        this.subscriptions.forEach((subscription) => {
+            subscription.unsubscribe();
+        });
+        this._form = null;
+        this._formTemplate = null;
+    }
+    generateForm(formTemplate) {
+        this._formTemplate = formTemplate;
+        this._form = new FormGroup({}, { updateOn: 'change' });
+        this._form = this.iterateNestedForm(this._form, formTemplate);
+        return this._form;
+    }
+    formTemplate(name, formTemplate = this._formTemplate) {
+        let template;
+        if (formTemplate) {
+            for (let i = 0; i < (formTemplate === null || formTemplate === void 0 ? void 0 : formTemplate.length); i++) {
+                const item = formTemplate[i];
+                if (item.name === name) {
+                    template = item;
+                    i = formTemplate.length;
+                }
+                else if (item.subformArray) {
+                    const arrayTemplate = this.formTemplate(name, item.subformArray);
+                    if (arrayTemplate)
+                        template = arrayTemplate;
+                }
+                else if (item.subformObject) {
+                    const objectTemplate = this.formTemplate(name, item.subformObject);
+                    if (objectTemplate)
+                        template = objectTemplate;
+                }
+            }
+        }
+        return template;
+    }
+    formControl(name, formGroup = this._form) {
+        return formGroup === null || formGroup === void 0 ? void 0 : formGroup.get(name);
+    }
+    formArray(name) {
+        var _a;
+        return (_a = this._form) === null || _a === void 0 ? void 0 : _a.get(name);
+    }
+    formGroup(form, name) {
+        return form.get(name);
+    }
+    addFormArrayItem(name, item) {
+        var _a;
+        let formControls = {};
+        if (item) {
+            (_a = item.subformArray) === null || _a === void 0 ? void 0 : _a.forEach((subitem) => {
+                formControls[subitem.name] = new FormControl(subitem.default !== undefined ? subitem.default : '', {
+                    validators: subitem.validators || [],
+                    updateOn: 'change'
+                });
+            });
+        }
+        const formGroup = new FormGroup(formControls);
+        formGroup.setParent(this.formArray(name));
+        this.formArray(name).push(formGroup);
+        this.subscribeNestedFormGroup(formGroup);
+    }
+    removeFormArrayItem(form, index) {
+        form.removeAt(index);
+    }
+    setFormValidations(validations = []) {
+        this._formValidations = validations;
+    }
+    enable() {
+        setTimeout(() => {
+            var _a;
+            (_a = this._form) === null || _a === void 0 ? void 0 : _a.enable({ onlySelf: true, emitEvent: false });
+        }, 100);
+    }
+    disable() {
+        setTimeout(() => {
+            var _a;
+            (_a = this._form) === null || _a === void 0 ? void 0 : _a.disable({ onlySelf: true, emitEvent: false });
+        }, 100);
+    }
+    setError(control, error) {
+        this.formControl(control).setErrors(error);
+    }
+    setLoader(loaders$) {
+        loaders$.forEach($loader => {
+            this.subscriptions.push($loader.subscribe(isLoading => {
+                isLoading ? this.disable() : this.enable();
+                this.isLoading$.next(isLoading);
+            }));
+        });
+    }
+    iterateNestedForm(form, formTemplate) {
+        formTemplate.forEach((item) => {
+            if (item.type === OnshoreFormTemplateType.subform) {
+                if (item.subformArray) {
+                    form.controls[item.name] = new FormArray([]);
+                    form.controls[item.name].setParent(form);
+                }
+                if (item.subformObject) {
+                    form.controls[item.name] = new FormGroup({});
+                    form.controls[item.name] = this.iterateNestedForm(form.controls[item.name], item.subformObject);
+                    this.subscribeNestedFormGroup(form.controls[item.name]);
+                }
+            }
+            else {
+                form.addControl(item.name, new FormControl(item.default !== undefined ? item.default : '', {
+                    validators: item.validators || [],
+                    updateOn: 'change'
+                }));
+            }
+        });
+        return form;
+    }
+    subscribeNestedFormGroup(nestedFormItem) {
+        this.subscriptions.push(nestedFormItem.valueChanges.subscribe(() => {
+            var _a;
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+        }));
+        this.subscriptions.push(nestedFormItem.statusChanges.subscribe(() => {
+            var _a;
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+        }));
+    }
+}
+OnshoreFormsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+OnshoreFormsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class OnshoreFormsComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+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!
+    </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!
+    </p>
+  ` }]
+        }], ctorParameters: function () { return []; } });
+
+class OnshoreFormValidationOutputComponent {
+    constructor(cdr, translate) {
+        this.cdr = cdr;
+        this.translate = translate;
+        this.externValidationPattern = "";
+        this.validationTranslation = '';
+    }
+    ngOnChanges(changes) {
+        this.validationTranslation = '';
+        if (changes['validationErrors'].currentValue) {
+            Object.keys(this.validationErrors).forEach(error => {
+                const exists = Object.values(this.validationItems).filter(validationItem => validationItem.key == error);
+                if (exists && exists.length > 0) {
+                    this.validationTranslation += this.translate.instant('request.error.' + error) + '<br>';
+                }
+                else {
+                    const errorValues = this.validationErrors[error];
+                    this.validationTranslation += this.translate.instant('form.validation.' + error, errorValues) + '<br>';
+                }
+            });
+        }
+        this.cdr.markForCheck();
+    }
+}
+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 });
+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" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }]; }, propDecorators: { validationErrors: [{
+                type: Input
+            }], externValidationPattern: [{
+                type: Input
+            }], validationItems: [{
+                type: Input
+            }] } });
+
+class OnshoreFormInputItemComponent {
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.FormTemplateItemType = OnshoreFormTemplateType;
+        this.passwordVisible = false;
+        this.disabled = false;
+        this.ngControl.valueAccessor = this;
+    }
+    // ControlValueAccessor interface
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        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();
+        });
+        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();
+        }
+    }
+    ngOnChanges(changes) {
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.disable();
+    }
+}
+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: [{
+            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: [{
+                type: Input
+            }] } });
+
+class OnshoreFormSwitchItemComponent {
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.valueChange = new EventEmitter();
+        this.disabled = false;
+        this.ngControl.valueAccessor = this;
+    }
+    // ControlValueAccessor interface
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        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);
+            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();
+    }
+    ngOnDestroy() {
+        var _a;
+        (_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: [{
+            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" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { formTemplate: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class OnshoreFormTextareaItemComponent {
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.FormTemplateItemType = OnshoreFormTemplateType;
+        this.disabled = false;
+        this.ngControl.valueAccessor = this;
+    }
+    // ControlValueAccessor interface
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        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();
+        });
+        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();
+        }
+    }
+    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: [{
+            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" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { formTemplate: [{
+                type: Input
+            }] } });
+
+class OnshoreFormImageItemComponent {
+    constructor(cdr, ngControl, dialogService, translate) {
+        this.cdr = cdr;
+        this.ngControl = ngControl;
+        this.dialogService = dialogService;
+        this.translate = translate;
+        this.inverseColor = false;
+        // Image updload params
+        this.imageWidth = 400;
+        this.imageHeight = 400;
+        this.containWithinAspectRatio = false;
+        this.aspectRatio = 1 / 1;
+        this.imageDeleted = new EventEmitter();
+        this.imageCleared = new EventEmitter();
+        this.imageSelectedFromMedia = new EventEmitter();
+        this.image = '';
+        this.disabled = false;
+        this.webcamDialogVisible = false;
+        this.imageChooserDialogVisible = false;
+        this.subscriptions = [];
+        this.ngControl.valueAccessor = this;
+    }
+    getFileImage(image) {
+        this.imageChooserDialogVisible = false;
+        if (image) {
+            this.image = image;
+            setTimeout(() => {
+                var _a, _b, _c, _d;
+                this.cdr.markForCheck();
+                (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.setValue(this.image);
+                (_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.markAsDirty();
+            }, 500);
+        }
+    }
+    getWebcamImage(image) {
+        this.webcamDialogVisible = false;
+        if (image) {
+            this.image = image;
+            setTimeout(() => {
+                var _a, _b, _c, _d;
+                this.cdr.markForCheck();
+                (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.setValue(this.image);
+                (_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.markAsDirty();
+            }, 500);
+        }
+    }
+    /*searchMedia() {
+      this.dialogService.open(SearchMediaComponent,{
+        styleClass: 'p-dialog-background-white',
+        modal: true,
+        header: this.translate.instant('search.media.dialogTitle'),
+        data: { targetType: this.formSettings.mediaType }
+      }).onClose.subscribe((result) => {
+        if(result) {
+          this.image = result.url;
+          setTimeout(() => {
+            this.cdr.markForCheck();
+            this.ngControl?.control?.setValue(this.image);
+            this.ngControl?.control?.markAsDirty();
+            this.imageSelectedFromMedia.next(result);
+          }, 500);
+        }
+      });
+    }*/
+    removeImage() {
+        var _a, _b, _c, _d;
+        if (this.image && !this.image.includes('base64')) {
+            this.imageDeleted.emit(this.image);
+        }
+        else {
+            this.imageCleared.emit();
+        }
+        (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.setValue(null);
+        (_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.markAsDirty();
+        this.image = '';
+    }
+    writeValue(obj) {
+        if (obj && !obj.includes('base64')) {
+            this.image = obj;
+        }
+        if (obj == null) {
+            this.image = '';
+        }
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        if (this.ngControl.value) {
+            this.image = this.ngControl.value;
+            this.cdr.markForCheck();
+        }
+    }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        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) => {
+            subscription.unsubscribe();
+        });
+        this.ngControl.control.disable();
+        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 });
+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" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }, { type: i2$1.DialogService }, { type: i1.TranslateService }];
+    }, propDecorators: { formTemplate: [{
+                type: Input
+            }], inverseColor: [{
+                type: Input
+            }], imageWidth: [{
+                type: Input
+            }], imageHeight: [{
+                type: Input
+            }], containWithinAspectRatio: [{
+                type: Input
+            }], aspectRatio: [{
+                type: Input
+            }], imageDeleted: [{
+                type: Output
+            }], imageCleared: [{
+                type: Output
+            }], imageSelectedFromMedia: [{
+                type: Output
+            }] } });
+
+class OnshoreFormDropdownItemComponent {
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.disabled = false;
+        this.multiple = false;
+        this.ngControl.valueAccessor = this;
+    }
+    // ControlValueAccessor interface
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    clearSelection() {
+        var _a;
+        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.setValue(null);
+    }
+    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);
+            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;
+        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.disable();
+    }
+    ngOnChanges(changes) {
+        this.cdr.markForCheck();
+    }
+}
+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 });
+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" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { formTemplate: [{
+                type: Input
+            }] } });
+
+class OnshoreFormColorpickerItemComponent {
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.disabled = false;
+        this.colorPickerValue = '';
+        this.ngControl.valueAccessor = this;
+    }
+    // ControlValueAccessor interface
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    changeColor() {
+        var _a;
+        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.setValue(this.colorPickerValue);
+    }
+    changeInput(input) {
+        var _a;
+        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);
+            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;
+        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.disable();
+    }
+    ngOnChanges(changes) {
+        var _a;
+        this.colorPickerValue = (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.value;
+        this.cdr.markForCheck();
+    }
+}
+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 });
+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" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { formTemplate: [{
+                type: Input
+            }] } });
+
+class OnshoreFormCheckboxItemComponent {
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.disabled = false;
+        this.ngControl.valueAccessor = this;
+    }
+    // ControlValueAccessor interface
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    changeCheck(value) {
+        var _a;
+        (_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(() => {
+            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) {
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.disable();
+    }
+}
+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 });
+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" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { formTemplate: [{
+                type: Input
+            }] } });
+
+class OnshoreFormAutocompleteItemComponent {
+}
+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 });
+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" }]
+        }] });
+
+class OnshoreFormsModule {
+}
+OnshoreFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+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,
+        FormsModule,
+        ReactiveFormsModule,
+        ButtonModule,
+        RippleModule,
+        AutoCompleteModule,
+        CheckboxModule,
+        ColorPickerModule,
+        DropdownModule,
+        MultiSelectModule,
+        TooltipModule,
+        InputNumberModule,
+        InputSwitchModule,
+        InputTextModule,
+        InputTextareaModule,
+        DialogModule], exports: [OnshoreFormsComponent,
+        OnshoreFormInputItemComponent,
+        OnshoreFormSwitchItemComponent,
+        OnshoreFormTextareaItemComponent,
+        OnshoreFormValidationOutputComponent,
+        OnshoreFormImageItemComponent,
+        OnshoreFormDropdownItemComponent,
+        OnshoreFormColorpickerItemComponent,
+        OnshoreFormCheckboxItemComponent,
+        OnshoreFormAutocompleteItemComponent] });
+OnshoreFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, providers: [
+        OnshoreFormsService
+    ], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ButtonModule,
+        RippleModule,
+        AutoCompleteModule,
+        CheckboxModule,
+        ColorPickerModule,
+        DropdownModule,
+        MultiSelectModule,
+        TooltipModule,
+        InputNumberModule,
+        InputSwitchModule,
+        InputTextModule,
+        InputTextareaModule,
+        DialogModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        OnshoreFormsComponent,
+                        OnshoreFormInputItemComponent,
+                        OnshoreFormSwitchItemComponent,
+                        OnshoreFormTextareaItemComponent,
+                        OnshoreFormValidationOutputComponent,
+                        OnshoreFormImageItemComponent,
+                        OnshoreFormDropdownItemComponent,
+                        OnshoreFormColorpickerItemComponent,
+                        OnshoreFormCheckboxItemComponent,
+                        OnshoreFormAutocompleteItemComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        ButtonModule,
+                        RippleModule,
+                        AutoCompleteModule,
+                        CheckboxModule,
+                        ColorPickerModule,
+                        DropdownModule,
+                        MultiSelectModule,
+                        TooltipModule,
+                        InputNumberModule,
+                        InputSwitchModule,
+                        InputTextModule,
+                        InputTextareaModule,
+                        DialogModule
+                    ],
+                    exports: [
+                        OnshoreFormsComponent,
+                        OnshoreFormInputItemComponent,
+                        OnshoreFormSwitchItemComponent,
+                        OnshoreFormTextareaItemComponent,
+                        OnshoreFormValidationOutputComponent,
+                        OnshoreFormImageItemComponent,
+                        OnshoreFormDropdownItemComponent,
+                        OnshoreFormColorpickerItemComponent,
+                        OnshoreFormCheckboxItemComponent,
+                        OnshoreFormAutocompleteItemComponent
+                    ],
+                    providers: [
+                        OnshoreFormsService
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of onshore-forms
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormSwitchItemComponent, OnshoreFormTemplateType, OnshoreFormTextareaItemComponent, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsModule, OnshoreFormsService, OnshoreImageError };
+//# sourceMappingURL=onshore-forms.mjs.map