onshore-forms 0.0.58 → 1.0.0

package/fesm2022/onshore-forms.mjs

@@ -0,0 +1,1399 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, ViewChild, HostListener, Self, Optional } from '@angular/core';
+import * as i1$2 from '@angular/forms';
+import { FormGroup, FormArray, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Subject, debounceTime, distinctUntilChanged, skip } from 'rxjs';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i2 from 'primeng/togglebutton';
+import { ToggleButtonModule } from 'primeng/togglebutton';
+import * as i3 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i3$1 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i3$2 from 'primeng/autocomplete';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import * as i4 from 'primeng/api';
+import * as i2$1 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
+import * as i2$2 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i3$3 from 'primeng/colorpicker';
+import { ColorPickerModule } from 'primeng/colorpicker';
+import * as i4$1 from 'primeng/dropdown';
+import { DropdownModule } from 'primeng/dropdown';
+import * as i5 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import * as i6 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import { ImageCropperComponent } from 'ngx-image-cropper';
+import * as i5$1 from 'ngx-webcam';
+import { WebcamModule } from 'ngx-webcam';
+import * as i2$3 from 'primeng/dynamicdialog';
+import * as i3$4 from 'primeng/textarea';
+import { TextareaModule } from 'primeng/textarea';
+import * as i5$2 from 'primeng/inputnumber';
+import { InputNumberModule } from 'primeng/inputnumber';
+import * as i6$1 from 'primeng/inputgroup';
+import { InputGroupModule } from 'primeng/inputgroup';
+import * as i7 from 'primeng/inputgroupaddon';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import * as i2$4 from 'primeng/inputswitch';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import * as i2$5 from 'primeng/calendar';
+import { CalendarModule } from 'primeng/calendar';
+
+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["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["sort"] = "sort";
+    OnshoreFormTemplateType["subform"] = "subform";
+})(OnshoreFormTemplateType || (OnshoreFormTemplateType = {}));
+var OnshoreFormTemplateLayout;
+(function (OnshoreFormTemplateLayout) {
+    OnshoreFormTemplateLayout["vertical"] = "vertical";
+    OnshoreFormTemplateLayout["horizontal"] = "horizontal";
+    OnshoreFormTemplateLayout["auto"] = "auto";
+})(OnshoreFormTemplateLayout || (OnshoreFormTemplateLayout = {}));
+var OnshoreImageError;
+(function (OnshoreImageError) {
+    OnshoreImageError["none"] = "";
+    OnshoreImageError["fileType"] = "fileType";
+    OnshoreImageError["ratio"] = "ratio";
+    OnshoreImageError["size"] = "size";
+})(OnshoreImageError || (OnshoreImageError = {}));
+
+class OnshoreFormsService {
+    _form;
+    _formTemplate;
+    _formValidations = [];
+    subscriptions = [];
+    isLoading$ = new Subject();
+    constructor() {
+        this._form = new FormGroup({}, { updateOn: 'change' });
+        this._formTemplate = [];
+    }
+    get form() {
+        return this._form;
+    }
+    get formValues() {
+        return this._form?.value;
+    }
+    patchForm(value) {
+        this._form?.patchValue(value);
+    }
+    resetForm() {
+        this._form?.reset();
+        this._form?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+        this.subscriptions.forEach((subscription) => {
+            subscription.unsubscribe();
+        });
+        this._form = null;
+        this._formTemplate = null;
+    }
+    resetFormControl(name, touched = false) {
+        this._form?.get(name)?.reset();
+        if (touched) {
+            this._form?.get(name)?.markAsTouched();
+            this._form?.get(name)?.markAsDirty();
+        }
+        this._form?.get(name)?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+    }
+    generateForm(formTemplate) {
+        this._formTemplate = formTemplate;
+        this._form = new FormGroup({}, { updateOn: 'change' });
+        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?.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?.get(name);
+    }
+    formArray(name) {
+        return this._form?.get(name);
+    }
+    formGroup(form, name) {
+        return form.get(name);
+    }
+    addFormArrayItem(formArray, item, defaultValues) {
+        let formControls = {};
+        if (item) {
+            item.subformArray?.forEach((subitem) => {
+                if (subitem.type == OnshoreFormTemplateType.subform) {
+                    if (item.subformArray) {
+                        formControls[subitem.name] = new FormArray([]);
+                        formControls[subitem.name].setParent(formControls[subitem.name]);
+                        this.subscribeNestedFormArray(formControls[subitem.name]);
+                    }
+                    if (item.subformObject) {
+                        formControls[subitem.name] = new FormGroup({});
+                        this.subscribeNestedFormGroup(formControls[subitem.name]);
+                    }
+                }
+                else {
+                    const defaultValue = defaultValues?.find(value => value.name === subitem.name)?.value;
+                    if (defaultValue)
+                        subitem.default = defaultValue.value;
+                    formControls[subitem.name] = new FormControl(defaultValue ?? (subitem.default !== undefined ? subitem.default : ''), {
+                        validators: subitem.validators || [],
+                        updateOn: 'change'
+                    });
+                    formControls[subitem.name].updateValueAndValidity({ onlySelf: false, emitEvent: true });
+                }
+            });
+        }
+        const formGroup = new FormGroup(formControls);
+        formGroup.setParent(formArray);
+        formArray.push(formGroup);
+        this.subscribeNestedFormGroup(formGroup);
+        return formGroup;
+    }
+    removeFormArrayItem(form, index) {
+        form.removeAt(index);
+    }
+    setFormValidations(validations = []) {
+        this._formValidations = validations;
+    }
+    enable() {
+        this._formTemplate.forEach((item) => {
+            item.enabled = true;
+        });
+        setTimeout(() => {
+            this._form?.enable({ onlySelf: true, emitEvent: false });
+        }, 100);
+    }
+    disable() {
+        this._formTemplate.forEach((item) => {
+            item.enabled = false;
+        });
+        setTimeout(() => {
+            this._form?.disable({ onlySelf: true, emitEvent: false });
+        }, 100);
+    }
+    setError(control, error) {
+        const errors = { ...this.formControl(control).errors ?? {}, ...error };
+        this.formControl(control).setErrors(errors);
+    }
+    setLoader(loaders$) {
+        loaders$.forEach($loader => {
+            this.subscriptions.push($loader.subscribe(isLoading => {
+                isLoading ? this.disable() : this.enable();
+                this.isLoading$.next(isLoading);
+            }));
+        });
+    }
+    lock(lockSubfields = true) {
+        this._formTemplate.forEach((item) => {
+            item.locked = true;
+            if (item.subformArray && lockSubfields) {
+                item.subformArray.forEach(subitem => {
+                    subitem.locked = true;
+                });
+            }
+        });
+    }
+    unlock() {
+        this._formTemplate.forEach((item) => {
+            item.locked = false;
+            if (item.subformArray) {
+                item.subformArray.forEach(subitem => {
+                    subitem.locked = false;
+                });
+            }
+        });
+    }
+    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);
+                    this.subscribeNestedFormArray(form.controls[item.name]);
+                }
+                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;
+    }
+    subscribeNestedFormArray(nestedFormItem) {
+        this.subscriptions.push(nestedFormItem.valueChanges.subscribe(() => {
+            this.form?.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+        }));
+        this.subscriptions.push(nestedFormItem.statusChanges.subscribe(() => {
+            this.form?.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+        }));
+    }
+    subscribeNestedFormGroup(nestedFormItem) {
+        this.subscriptions.push(nestedFormItem.valueChanges.subscribe(() => {
+            this.form?.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+        }));
+        this.subscriptions.push(nestedFormItem.statusChanges.subscribe(() => {
+            this.form?.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class OnshoreFormsComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreFormsComponent, isStandalone: true, selector: "lib-onshore-forms", ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-onshore-forms', template: '', standalone: true }]
+        }], ctorParameters: () => [] });
+
+class OnshoreValidators {
+    static slug = (control) => {
+        return /^[A-Za-z0-9\._-]{2,20}$/.test(control.value) ? null : { slug: true };
+    };
+    static numeric = (control) => {
+        return /^[0-9]*$/.test(control.value) ? null : { numeric: true };
+    };
+    static email = (control) => {
+        return /^([\w-\.]+@([\w-]+\.)+[\w-]{2,10})?$/.test(control.value) ? null : { email: true };
+    };
+    static cleanComment = (control) => {
+        return /[A-Z]{5}\d{4}[A-Z]{1}/.test(control.value) ? null : { cleanComment: true };
+    };
+}
+
+class OnshoreFormValidationOutputComponent {
+    cdr;
+    translate;
+    validationErrors;
+    validationItems;
+    validationTranslation = '';
+    ngOnChanges(changes) {
+        this.validationTranslation = '';
+        if (changes['validationErrors'].currentValue && this.validationErrors) {
+            Object.keys(this.validationErrors).forEach(error => {
+                const exists = Object.values(this.validationItems ?? []).filter(validationItem => validationItem == error);
+                if (exists && exists.length > 0) {
+                    this.validationTranslation += this.translate.instant('form.validation.' + error) + '<br>';
+                }
+                else {
+                    const errorValues = this.validationErrors[error];
+                    this.validationTranslation += this.translate.instant('form.validation.' + error, errorValues) + '<br>';
+                }
+            });
+        }
+        this.cdr.markForCheck();
+    }
+    constructor(cdr, translate) {
+        this.cdr = cdr;
+        this.translate = translate;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormValidationOutputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreFormValidationOutputComponent, isStandalone: true, selector: "onshore-form-validation-output", inputs: { validationErrors: "validationErrors", validationItems: "validationItems" }, usesOnChanges: true, ngImport: i0, template: "<small class=\"onshore-color-danger\"\n       *ngIf=\"validationTranslation\"\n      [innerHTML]=\"validationTranslation\">\n</small>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormValidationOutputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-form-validation-output', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<small class=\"onshore-color-danger\"\n       *ngIf=\"validationTranslation\"\n      [innerHTML]=\"validationTranslation\">\n</small>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }], propDecorators: { validationErrors: [{
+                type: Input
+            }], validationItems: [{
+                type: Input
+            }] } });
+
+class OnshoreFormItemContainer {
+    cdr;
+    formTemplate;
+    ngControl;
+    actionButtonDisabled = false;
+    actionButtonClick = new EventEmitter();
+    lockIsChanged = new EventEmitter();
+    formContainer;
+    disabled = false;
+    tempLockValue;
+    OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
+    layout = OnshoreFormTemplateLayout.auto;
+    enabled(enable = true) {
+        setTimeout(() => {
+            if (enable) {
+                this.ngControl?.control?.enable();
+            }
+            else {
+                this.ngControl?.control?.disable();
+            }
+            this.disabled = !enable;
+            this.cdr.markForCheck();
+        }, 100);
+    }
+    lockChanged(unlocked) {
+        if (unlocked && this.formTemplate.enabled) {
+            this.tempLockValue = this.ngControl?.control?.value;
+            this.enabled(true);
+            this.disabled = false;
+            this.lockIsChanged.emit(unlocked);
+        }
+        else {
+            this.enabled(false);
+            this.disabled = true;
+            this.ngControl?.control?.setValue(this.tempLockValue);
+            this.tempLockValue = null;
+            this.lockIsChanged.emit(unlocked);
+        }
+        this.cdr.markForCheck();
+    }
+    onWindowResize() {
+        const conatinerWidth = this.formContainer?.nativeElement.offsetWidth;
+        if (conatinerWidth > 500 && this.formTemplate.layout === OnshoreFormTemplateLayout.auto && this.layout !== OnshoreFormTemplateLayout.horizontal) {
+            this.layout = OnshoreFormTemplateLayout.horizontal;
+            this.cdr.markForCheck();
+        }
+        if (conatinerWidth <= 500 && this.formTemplate.layout === OnshoreFormTemplateLayout.auto && this.layout !== OnshoreFormTemplateLayout.vertical) {
+            this.layout = OnshoreFormTemplateLayout.vertical;
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnInit() {
+        this.ngControl?.control?.valueChanges.subscribe(value => {
+            this.cdr.markForCheck();
+        });
+        this.ngControl?.control?.statusChanges.subscribe(status => {
+            this.cdr.markForCheck();
+        });
+        this.enabled(this.formTemplate.enabled);
+        this.disabled = !this.formTemplate.enabled;
+        if (this.formTemplate.locked) {
+            this.enabled(false);
+            this.disabled = true;
+        }
+        this.layout = this.formTemplate.layout;
+        setTimeout(() => {
+            this.cdr.markForCheck();
+        }, 100);
+    }
+    ngAfterViewInit() {
+        this.onWindowResize();
+    }
+    ngOnChanges(changes) {
+        const previousValue = changes['formTemplate']?.previousValue;
+        const currentValue = changes['formTemplate']?.currentValue;
+        if (currentValue) {
+            if (previousValue?.enabled !== currentValue?.enabled) {
+                this.enabled(currentValue?.enabled);
+                this.disabled = !currentValue?.enabled;
+            }
+            if (previousValue?.locked !== currentValue?.locked) {
+                if (currentValue.locked) {
+                    this.enabled(false);
+                    this.disabled = true;
+                }
+                else {
+                    this.enabled(currentValue.enabled);
+                    this.disabled = currentValue.enabled;
+                }
+            }
+            if (previousValue?.layout !== currentValue?.layout) {
+                this.layout = this.formTemplate.layout;
+                this.onWindowResize();
+            }
+            if (previousValue?.labelStyle !== currentValue?.labelStyle) {
+                this.onWindowResize();
+            }
+            this.cdr.markForCheck();
+        }
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormItemContainer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreFormItemContainer, isStandalone: true, selector: "onshore-form-item-container", inputs: { formTemplate: "formTemplate", ngControl: "ngControl", actionButtonDisabled: "actionButtonDisabled" }, outputs: { actionButtonClick: "actionButtonClick", lockIsChanged: "lockIsChanged" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class.mb-4]=\"!formTemplate.noGap\" #formContainer>\n  <div class=\"flex w-full\"\n       [class.flex-column]=\"layout == OnshoreFormTemplateLayout.vertical\"\n       [class.flex-row]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n       [class.justify-content-between]=\"layout == OnshoreFormTemplateLayout.horizontal\">\n\n    <div #formLabel\n         [hidden]=\"!formTemplate.label || formTemplate.label == ''\"\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px; max-height: 36px'\">\n\n      <span *ngIf=\"formTemplate.label && formTemplate.label != ''\" [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.align-self-center]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mb-2]=\"layout == OnshoreFormTemplateLayout.vertical\">\n        {{formTemplate.label}}\n        <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n      </span>\n\n      <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" [tooltipPosition]=\"'left'\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n    </div>\n\n    <div class=\"flex w-full\">\n      <p-toggleButton\n        *ngIf=\"formTemplate.locked\"\n        (onChange)=\"lockChanged($event.checked)\"\n        onIcon=\"fa fa-lock-open\"\n        offIcon=\"fa fa-lock\"\n        class=\"mr-2\"\n        [disabled]=\"!formTemplate.enabled\">\n      </p-toggleButton>\n\n      <div class=\"w-full overflow-hidden align-self-center\">\n        <ng-content></ng-content>\n      </div>\n\n      <button *ngIf=\"formTemplate.actionButton\"\n              class=\"ml-2 onshore-button-light\"\n              [style]=\"{'height': '37px', 'min-width': '38px'}\"\n              pButton\n              [disabled]=\"actionButtonDisabled\"\n              [icon]=\"formTemplate.actionButtonIcon\"\n              (click)=\"actionButtonClick.emit()\">\n      </button>\n    </div>\n\n    <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [tooltipPosition]=\"'left'\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n  </div>\n\n  <div *ngIf=\"ngControl.control.touched || ngControl.control.dirty\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 60 : 0)) + 'px' : (formTemplate.locked ? 60 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '0px'}\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\">\n    </onshore-form-validation-output>\n  </div>\n\n  <div *ngIf=\"formTemplate.description\" class=\"mt-2\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 60 : 0)) + 'px' : (formTemplate.locked ? 60 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '0px'}\">\n    <small class=\"onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n  </div>\n\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "validationItems"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i2.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormItemContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-form-item-container', imports: [CommonModule, OnshoreFormValidationOutputComponent, TranslateModule, ToggleButtonModule, TooltipModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div [class.mb-4]=\"!formTemplate.noGap\" #formContainer>\n  <div class=\"flex w-full\"\n       [class.flex-column]=\"layout == OnshoreFormTemplateLayout.vertical\"\n       [class.flex-row]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n       [class.justify-content-between]=\"layout == OnshoreFormTemplateLayout.horizontal\">\n\n    <div #formLabel\n         [hidden]=\"!formTemplate.label || formTemplate.label == ''\"\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px; max-height: 36px'\">\n\n      <span *ngIf=\"formTemplate.label && formTemplate.label != ''\" [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.align-self-center]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mb-2]=\"layout == OnshoreFormTemplateLayout.vertical\">\n        {{formTemplate.label}}\n        <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n      </span>\n\n      <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" [tooltipPosition]=\"'left'\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n    </div>\n\n    <div class=\"flex w-full\">\n      <p-toggleButton\n        *ngIf=\"formTemplate.locked\"\n        (onChange)=\"lockChanged($event.checked)\"\n        onIcon=\"fa fa-lock-open\"\n        offIcon=\"fa fa-lock\"\n        class=\"mr-2\"\n        [disabled]=\"!formTemplate.enabled\">\n      </p-toggleButton>\n\n      <div class=\"w-full overflow-hidden align-self-center\">\n        <ng-content></ng-content>\n      </div>\n\n      <button *ngIf=\"formTemplate.actionButton\"\n              class=\"ml-2 onshore-button-light\"\n              [style]=\"{'height': '37px', 'min-width': '38px'}\"\n              pButton\n              [disabled]=\"actionButtonDisabled\"\n              [icon]=\"formTemplate.actionButtonIcon\"\n              (click)=\"actionButtonClick.emit()\">\n      </button>\n    </div>\n\n    <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [tooltipPosition]=\"'left'\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n  </div>\n\n  <div *ngIf=\"ngControl.control.touched || ngControl.control.dirty\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 60 : 0)) + 'px' : (formTemplate.locked ? 60 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '0px'}\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\">\n    </onshore-form-validation-output>\n  </div>\n\n  <div *ngIf=\"formTemplate.description\" class=\"mt-2\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 60 : 0)) + 'px' : (formTemplate.locked ? 60 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '0px'}\">\n    <small class=\"onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n  </div>\n\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formTemplate: [{
+                type: Input
+            }], ngControl: [{
+                type: Input
+            }], actionButtonDisabled: [{
+                type: Input
+            }], actionButtonClick: [{
+                type: Output
+            }], lockIsChanged: [{
+                type: Output
+            }], formContainer: [{
+                type: ViewChild,
+                args: ['formContainer']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class OnshoreFormAutocompleteItemComponent {
+    cdr;
+    ngControl;
+    formTemplate;
+    multiple = false;
+    searchedData = [];
+    actionButtonDisabled = false;
+    onSearch = new EventEmitter();
+    onSelect = new EventEmitter();
+    onClear = new EventEmitter();
+    actionButtonClick = new EventEmitter();
+    disabled = false;
+    selected(event) {
+        const selectedItem = event.value;
+        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();
+        }
+    }
+    async search(searchTerm) {
+        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() {
+        if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
+            this.ngControl.control?.setValue(this.formTemplate.default);
+            this.cdr.markForCheck();
+        }
+    }
+    get formControl() {
+        return this.ngControl.control;
+    }
+    ngOnDestroy() {
+        this.ngControl.control?.disable();
+    }
+    ngOnChanges(changes) {
+        this.cdr.markForCheck();
+    }
+    constructor(cdr, ngControl) {
+        this.cdr = cdr;
+        this.ngControl = ngControl;
+        this.ngControl.valueAccessor = this;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreFormAutocompleteItemComponent, isStandalone: true, selector: "onshore-form-autocomplete-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", searchedData: "searchedData", actionButtonDisabled: "actionButtonDisabled" }, outputs: { onSearch: "onSearch", onSelect: "onSelect", onClear: "onClear", actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n  <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n                  appendTo=\"body\"\n                  [formControl]=\"formControl\"\n                  (onSelect)=\"selected($event)\"\n                  (onUnselect)=\"selected($event)\"\n                  (onClear)=\"searchClear()\"\n                  [suggestions]=\"searchedData\"\n                  (completeMethod)=\"searchPrepare($event)\"\n                  [disabled]=\"disabled\"\n                  size=\"small\"\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i3$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", 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", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-form-autocomplete-item', imports: [CommonModule, OnshoreFormItemContainer, AutoCompleteModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n  <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n                  appendTo=\"body\"\n                  [formControl]=\"formControl\"\n                  (onSelect)=\"selected($event)\"\n                  (onUnselect)=\"selected($event)\"\n                  (onClear)=\"searchClear()\"\n                  [suggestions]=\"searchedData\"\n                  (completeMethod)=\"searchPrepare($event)\"\n                  [disabled]=\"disabled\"\n                  size=\"small\"\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: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }], propDecorators: { formTemplate: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], searchedData: [{
+                type: Input
+            }], actionButtonDisabled: [{
+                type: Input
+            }], onSearch: [{
+                type: Output
+            }], onSelect: [{
+                type: Output
+            }], onClear: [{
+                type: Output
+            }], actionButtonClick: [{
+                type: Output
+            }] } });
+
+class OnshoreFormCheckboxItemComponent {
+    ngControl;
+    cdr;
+    formTemplate;
+    actionButtonDisabled = false;
+    actionButtonClick = new EventEmitter();
+    disabled = false;
+    // ControlValueAccessor interface
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    changeCheck(value) {
+        this.ngControl.control?.setValue(value.checked);
+    }
+    get formControl() {
+        return this.ngControl.control;
+    }
+    ngOnInit() {
+        if (this.ngControl.control?.value !== true && this.ngControl.control?.value !== false && this.formTemplate.default != undefined) {
+            this.ngControl.control?.setValue(this.formTemplate.default);
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnChanges(changes) {
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        this.ngControl.control?.disable();
+    }
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.ngControl.valueAccessor = this;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormCheckboxItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreFormCheckboxItemComponent, isStandalone: true, selector: "onshore-form-checkbox-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n\n  <div class=\"p-field-checkbox flex\">\n    <p-checkbox\n      class=\"align-self-start mt-1\"\n      [name]=\"formTemplate.name\"\n      [formControl]=\"formControl\"\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: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormCheckboxItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-form-checkbox-item', imports: [CommonModule, OnshoreFormItemContainer, CheckboxModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n\n  <div class=\"p-field-checkbox flex\">\n    <p-checkbox\n      class=\"align-self-start mt-1\"\n      [name]=\"formTemplate.name\"\n      [formControl]=\"formControl\"\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: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { formTemplate: [{
+                type: Input
+            }], actionButtonDisabled: [{
+                type: Input
+            }], actionButtonClick: [{
+                type: Output
+            }] } });
+
+class OnshoreFormColorpickerItemComponent {
+    ngControl;
+    cdr;
+    formTemplate;
+    actionButtonDisabled = false;
+    actionButtonClick = new EventEmitter();
+    disabled = false;
+    colorPickerValue = '';
+    // ControlValueAccessor interface
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    changeColor() {
+        this.ngControl.control?.setValue(this.colorPickerValue);
+        this.ngControl?.control?.markAsDirty();
+        this.cdr.markForCheck();
+    }
+    changeInput(input) {
+        this.colorPickerValue = input.target?.value;
+    }
+    get formControl() {
+        return this.ngControl.control;
+    }
+    ngOnInit() {
+        if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
+            this.ngControl.control?.setValue(this.formTemplate.default);
+            this.colorPickerValue = this.formTemplate.default;
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        this.ngControl.control?.disable();
+    }
+    ngOnChanges(changes) {
+        this.colorPickerValue = this.ngControl.control?.value;
+        this.cdr.markForCheck();
+    }
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.ngControl.valueAccessor = this;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormColorpickerItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreFormColorpickerItemComponent, isStandalone: true, selector: "onshore-form-colorpicker-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n  <div class=\"flex w-full\">\n\n    <input class=\"w-full mr-2\"\n           type=\"text\"\n           [name]=\"formTemplate.name\"\n           [placeholder]=\"formTemplate.placeholder ?? ''\"\n           [formControl]=\"formControl\"\n           [disabled]=\"disabled\"\n           pInputText\n           [value]=\"ngControl.control.value\"\n           (input)=\"changeInput($event)\"/>\n\n    <p-colorPicker [(ngModel)]=\"colorPickerValue\"\n                   format=\"hex\" [inline]=\"false\"\n                   appendTo=\"body\"\n                   [disabled]=\"disabled\"\n                   [baseZIndex]=\"99999\"\n                   (onChange)=\"changeColor()\">\n    </p-colorPicker>\n  </div>\n</onshore-form-item-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i3$3.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormColorpickerItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-form-colorpicker-item', imports: [CommonModule, OnshoreFormItemContainer, InputTextModule, ColorPickerModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n  <div class=\"flex w-full\">\n\n    <input class=\"w-full mr-2\"\n           type=\"text\"\n           [name]=\"formTemplate.name\"\n           [placeholder]=\"formTemplate.placeholder ?? ''\"\n           [formControl]=\"formControl\"\n           [disabled]=\"disabled\"\n           pInputText\n           [value]=\"ngControl.control.value\"\n           (input)=\"changeInput($event)\"/>\n\n    <p-colorPicker [(ngModel)]=\"colorPickerValue\"\n                   format=\"hex\" [inline]=\"false\"\n                   appendTo=\"body\"\n                   [disabled]=\"disabled\"\n                   [baseZIndex]=\"99999\"\n                   (onChange)=\"changeColor()\">\n    </p-colorPicker>\n  </div>\n</onshore-form-item-container>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { formTemplate: [{
+                type: Input
+            }], actionButtonDisabled: [{
+                type: Input
+            }], actionButtonClick: [{
+                type: Output
+            }] } });
+
+class OnshoreFormDropdownItemComponent {
+    ngControl;
+    cdr;
+    formTemplate;
+    multiple = false;
+    showClear = false;
+    group = false;
+    selectionLimit = 0;
+    minLength = 0;
+    optionLabel = '';
+    optionGroupLabel = '';
+    dataKey = '';
+    actionButtonDisabled = false;
+    options = [];
+    valueChange = new EventEmitter();
+    actionButtonClick = new EventEmitter();
+    disabled = false;
+    // ControlValueAccessor interface
+    writeValue(obj) {
+        if (obj) {
+            this.cdr.markForCheck();
+        }
+    }
+    registerOnChange(fn) {
+        if (this.ngControl.value) {
+            this.cdr.markForCheck();
+        }
+    }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    clearSelection() {
+        this.ngControl.control?.reset();
+        this.ngControl.control?.setValue(this.multiple ? [] : '');
+        this.cdr.markForCheck();
+    }
+    get formControl() {
+        return this.ngControl.control;
+    }
+    ngOnInit() {
+        if ((!this.ngControl.control?.value || this.ngControl.control?.value == '' || this.ngControl.control?.value == undefined) && !this.multiple) {
+            this.ngControl.control?.setValue(this.formTemplate.default);
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        this.ngControl.control?.disable();
+    }
+    ngOnChanges(changes) {
+        const currentOptions = changes['options']?.currentValue ?? changes['formTemplate']?.currentValue?.options;
+        //const previousOptions =  changes['options']?.previousValue ?? changes['formTemplate']?.previousValue?.options;
+        if (!this.options && currentOptions) {
+            this.options = currentOptions;
+        }
+        this.cdr.markForCheck();
+    }
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.ngControl.valueAccessor = this;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormDropdownItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreFormDropdownItemComponent, isStandalone: true, selector: "onshore-form-dropdown-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", showClear: "showClear", group: "group", selectionLimit: "selectionLimit", minLength: "minLength", optionLabel: "optionLabel", optionGroupLabel: "optionGroupLabel", dataKey: "dataKey", actionButtonDisabled: "actionButtonDisabled", options: "options" }, outputs: { valueChange: "valueChange", actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n\n  <p-dropdown *ngIf=\"!multiple\"\n              class=\"w-full\"\n              [options]=\"options\"\n              [formControl]=\"formControl\"\n              [name]=\"formTemplate?.name\"\n              [placeholder]=\"formTemplate?.placeholder\"\n              [disabled]=\"disabled\"\n              [optionLabel]=\"optionLabel\"\n              [dataKey]=\"dataKey\"\n              [optionGroupLabel]=\"optionGroupLabel\"\n              [group]=\"group\"\n              [showClear]=\"showClear && formTemplate?.placeholder\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n  </p-dropdown>\n\n  <p-multiSelect *ngIf=\"multiple\"\n                 class=\"w-full\"\n                 [options]=\"options\"\n                 [formControl]=\"formControl\"\n                 [name]=\"formTemplate?.name\"\n                 [placeholder]=\"formTemplate?.placeholder\"\n                 [disabled]=\"disabled\"\n                 [showClear]=\"showClear\"\n                 [selectionLimit]=\"selectionLimit\"\n                 [minlength]=\"minLength\"\n                 [optionLabel]=\"optionLabel\"\n                 [dataKey]=\"dataKey\"\n                 [optionGroupLabel]=\"optionGroupLabel\"\n                 [group]=\"group\"\n                 (onClear)=\"clearSelection()\"\n                 [selectedItemsLabel]=\"'form.dropdownControl.selectedItems' | translate\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\"></p-multiSelect>\n\n</onshore-form-item-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormDropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-form-dropdown-item', imports: [CommonModule, OnshoreFormItemContainer, TranslateModule, DropdownModule, MultiSelectModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n\n  <p-dropdown *ngIf=\"!multiple\"\n              class=\"w-full\"\n              [options]=\"options\"\n              [formControl]=\"formControl\"\n              [name]=\"formTemplate?.name\"\n              [placeholder]=\"formTemplate?.placeholder\"\n              [disabled]=\"disabled\"\n              [optionLabel]=\"optionLabel\"\n              [dataKey]=\"dataKey\"\n              [optionGroupLabel]=\"optionGroupLabel\"\n              [group]=\"group\"\n              [showClear]=\"showClear && formTemplate?.placeholder\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n  </p-dropdown>\n\n  <p-multiSelect *ngIf=\"multiple\"\n                 class=\"w-full\"\n                 [options]=\"options\"\n                 [formControl]=\"formControl\"\n                 [name]=\"formTemplate?.name\"\n                 [placeholder]=\"formTemplate?.placeholder\"\n                 [disabled]=\"disabled\"\n                 [showClear]=\"showClear\"\n                 [selectionLimit]=\"selectionLimit\"\n                 [minlength]=\"minLength\"\n                 [optionLabel]=\"optionLabel\"\n                 [dataKey]=\"dataKey\"\n                 [optionGroupLabel]=\"optionGroupLabel\"\n                 [group]=\"group\"\n                 (onClear)=\"clearSelection()\"\n                 [selectedItemsLabel]=\"'form.dropdownControl.selectedItems' | translate\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\"></p-multiSelect>\n\n</onshore-form-item-container>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { formTemplate: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], selectionLimit: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], optionGroupLabel: [{
+                type: Input
+            }], dataKey: [{
+                type: Input
+            }], actionButtonDisabled: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], actionButtonClick: [{
+                type: Output
+            }] } });
+
+class OnshoreImagePlaceholderComponent {
+    placeholderIcon = '';
+    placeholderImage = '';
+    image = '';
+    imageStyle = '';
+    placeholderStyle = '';
+    showLoader = true;
+    imageLoaded = false;
+    loadReady() {
+        this.imageLoaded = true;
+        this.showLoader = false;
+    }
+    abort() {
+        this.imageLoaded = false;
+        this.showLoader = false;
+    }
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreImagePlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreImagePlaceholderComponent, isStandalone: true, selector: "onshore-image-placeholder", inputs: { placeholderIcon: "placeholderIcon", placeholderImage: "placeholderImage", image: "image", imageStyle: "imageStyle", placeholderStyle: "placeholderStyle", showLoader: "showLoader" }, ngImport: i0, template: "<div [hidden]=\"!imageLoaded || !image\">\n  <img [style]=\"imageStyle\" [src]=\"image\" (load)=\"loadReady()\" (abort)=\"abort()\" />\n</div>\n\n<div *ngIf=\"!imageLoaded || !image\" class=\"flex justify-content-center align-items-center\" [style]=\"placeholderStyle\" [class.bg-gray-200]=\"placeholderIcon\" [class.p-2]=\"placeholderIcon\">\n  <i *ngIf=\"placeholderIcon\" [class]=\"'text-muted fa ' + placeholderIcon\" [class.opacity-20]=\"showLoader && image\"></i>\n  <img *ngIf=\"placeholderImage\" [src]=\"placeholderImage\" [class.opacity-20]=\"showLoader && image\" class=\"h-full\" />\n  <i *ngIf=\"showLoader && image\" class=\"fas fa-circle-notch fa-spin fa-2x absolute\"></i>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreImagePlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-image-placeholder', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div [hidden]=\"!imageLoaded || !image\">\n  <img [style]=\"imageStyle\" [src]=\"image\" (load)=\"loadReady()\" (abort)=\"abort()\" />\n</div>\n\n<div *ngIf=\"!imageLoaded || !image\" class=\"flex justify-content-center align-items-center\" [style]=\"placeholderStyle\" [class.bg-gray-200]=\"placeholderIcon\" [class.p-2]=\"placeholderIcon\">\n  <i *ngIf=\"placeholderIcon\" [class]=\"'text-muted fa ' + placeholderIcon\" [class.opacity-20]=\"showLoader && image\"></i>\n  <img *ngIf=\"placeholderImage\" [src]=\"placeholderImage\" [class.opacity-20]=\"showLoader && image\" class=\"h-full\" />\n  <i *ngIf=\"showLoader && image\" class=\"fas fa-circle-notch fa-spin fa-2x absolute\"></i>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { placeholderIcon: [{
+                type: Input
+            }], placeholderImage: [{
+                type: Input
+            }], image: [{
+                type: Input
+            }], imageStyle: [{
+                type: Input
+            }], placeholderStyle: [{
+                type: Input
+            }], showLoader: [{
+                type: Input
+            }] } });
+
+class OnshoreImageChooserComponent {
+    cdr;
+    drag = false;
+    image = '';
+    finalImage = '';
+    imageErrorType = OnshoreImageError;
+    imageError = OnshoreImageError.none;
+    imageSettings = undefined;
+    choosen = new EventEmitter();
+    canceled = new EventEmitter();
+    clear() {
+        this.image = '';
+        this.finalImage = '';
+        this.imageError = OnshoreImageError.none;
+    }
+    fileChange(event) {
+        this.imageError = OnshoreImageError.none;
+        const target = event.target;
+        const file = target?.files ? target?.files[0] : null;
+        const maxFileSize = this.imageSettings?.maxFileSize || 0;
+        const imageWidth = this.imageSettings?.imageWidth || 0;
+        const imageHeight = this.imageSettings?.imageHeight || 0;
+        if (file?.type != 'image/png' && file?.type != 'image/jpeg' && file?.type != 'image/webp') {
+            this.imageError = OnshoreImageError.fileType;
+            return;
+        }
+        if (file?.size > maxFileSize) {
+            this.imageError = OnshoreImageError.size;
+            return;
+        }
+        if (file) {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const img = new Image();
+                img.src = window.URL.createObjectURL(file);
+                img.onload = () => {
+                    const originalWidth = img.width;
+                    const originalHeight = img.height;
+                    if (originalWidth >= imageWidth && originalHeight >= imageHeight) {
+                        this.image = reader.result?.toString() || '';
+                    }
+                    else {
+                        this.imageError = OnshoreImageError.ratio;
+                    }
+                    this.cdr.markForCheck();
+                };
+            };
+        }
+    }
+    imageCropped(event) {
+        // ToDo: Check needed base64 format
+        //this.finalImage = event.base64.split(',')[1];
+        this.finalImage = event.base64 || '';
+    }
+    imageCroppedReady() {
+        this.choosen.emit(this.finalImage);
+        this.clear();
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreImageChooserComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreImageChooserComponent, isStandalone: true, selector: "onshore-image-chooser", inputs: { imageSettings: "imageSettings" }, outputs: { choosen: "choosen", canceled: "canceled" }, ngImport: i0, template: "<div class=\"flex flex-column justify-content-center align-items-center w-full\">\n\n  <div *ngIf=\"!image\" class=\"flex justify-content-center flex-column align-items-center w-full\">\n    <div\n      class=\"onshore-image-upload flex flex-column justify-content-between align-items-center rounded-lg p-4 relative m-3\"\n      [class.onshore-border-gray-3]=\"drag\"\n      [class.onshore-border-danger]=\"imageError != imageErrorType.none\">\n      <i class=\"fa fa-image fa-5x onshore-color-gray-4\"></i>\n      <small class=\"onshore-color-gray-4 mb-2\">{{'form.imageControl.dropImageLabel' | translate}}</small>\n\n      <button pButton\n              type=\"button\"\n              icon=\"fa fa-file\"\n              [label]=\"'form.imageControl.imageChooserFileButton' | translate\"\n              class=\"onshore-button-primary mr-2\">\n      </button>\n\n      <input\n        (change)=\"fileChange($event)\"\n        *ngIf=\"!image\"\n        accept=\"image/png, image/jpeg, image/webp\"\n        class=\"onshore-image-input absolute w-full h-full\"\n        type=\"file\"\n        (dragenter)=\"drag = true\"\n        (dragleave)=\"drag = false\"\n        (dragend)=\"drag = false\"\n      />\n    </div>\n  </div>\n\n  <div class=\"flex flex-column relative align-items-center w-full\" *ngIf=\"image\">\n    <image-cropper\n      class=\"m-3\"\n      [style]=\"'align-items: center; height: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewWidth * this.imageSettings.aspectRatio) + 'px'\"\n      [class.onshore-cropper-circle]=\"this.imageSettings.circleCropper\"\n      (imageCropped)=\"imageCropped($event)\"\n      [imageBase64]=\"image\"\n      [imageQuality]=\"this.imageSettings.imageQuality\"\n      [alignImage]=\"this.imageSettings.alignImage\"\n      [backgroundColor]=\"this.imageSettings.backgroundColor\"\n      [containWithinAspectRatio]=\"this.imageSettings.containWithinAspectRatio\"\n      [format]=\"this.imageSettings.format\"\n      [aspectRatio]=\"this.imageSettings.aspectRatio\"\n      [resizeToHeight]=\"this.imageSettings.imageWidth * this.imageSettings.aspectRatio\"\n      [resizeToWidth]=\"this.imageSettings.imageHeight * this.imageSettings.aspectRatio\">\n    </image-cropper>\n  </div>\n\n  <div *ngIf=\"imageError\"class=\"pb-2 text-wrap text-center onshore-color-danger\">\n    <small *ngIf=\"imageError == imageErrorType.ratio\">{{'form.imageControl.imageErrorRatio' | translate: {resizeToWidth: this.imageSettings.imageWidth, resizeToHeight: this.imageSettings.imageHeight} }}</small>\n    <small *ngIf=\"imageError == imageErrorType.fileType\">{{'form.imageControl.imageErrorFileType' | translate}}</small>\n    <small *ngIf=\"imageError == imageErrorType.size\">{{'form.imageControl.imageErrorSize' | translate}}</small>\n  </div>\n</div>\n\n\n<p-footer>\n  <div class=\"flex justify-content-end align-items-center mt-2\">\n    <button pButton\n            type=\"button\"\n            icon=\"fa fa-times\"\n            [label]=\"'form.imageControl.imageChooserCancelButton' | translate\"\n            class=\"onshore-button-light mr-2\"\n            (click)=\"clear(); canceled.emit(true)\">\n    </button>\n\n    <button pButton\n            type=\"button\"\n            [label]=\"'form.imageControl.imageChooserSelectButton' | translate\"\n            class=\"onshore-button-primary\"\n            icon=\"fa fa-check\"\n            [disabled]=\"!image\"\n            (click)=\"imageCroppedReady()\">\n    </button>\n  </div>\n</p-footer>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i4.Footer, selector: "p-footer" }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreImageChooserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-image-chooser', imports: [CommonModule, TranslateModule, ButtonModule, InputTextModule, ImageCropperComponent, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"flex flex-column justify-content-center align-items-center w-full\">\n\n  <div *ngIf=\"!image\" class=\"flex justify-content-center flex-column align-items-center w-full\">\n    <div\n      class=\"onshore-image-upload flex flex-column justify-content-between align-items-center rounded-lg p-4 relative m-3\"\n      [class.onshore-border-gray-3]=\"drag\"\n      [class.onshore-border-danger]=\"imageError != imageErrorType.none\">\n      <i class=\"fa fa-image fa-5x onshore-color-gray-4\"></i>\n      <small class=\"onshore-color-gray-4 mb-2\">{{'form.imageControl.dropImageLabel' | translate}}</small>\n\n      <button pButton\n              type=\"button\"\n              icon=\"fa fa-file\"\n              [label]=\"'form.imageControl.imageChooserFileButton' | translate\"\n              class=\"onshore-button-primary mr-2\">\n      </button>\n\n      <input\n        (change)=\"fileChange($event)\"\n        *ngIf=\"!image\"\n        accept=\"image/png, image/jpeg, image/webp\"\n        class=\"onshore-image-input absolute w-full h-full\"\n        type=\"file\"\n        (dragenter)=\"drag = true\"\n        (dragleave)=\"drag = false\"\n        (dragend)=\"drag = false\"\n      />\n    </div>\n  </div>\n\n  <div class=\"flex flex-column relative align-items-center w-full\" *ngIf=\"image\">\n    <image-cropper\n      class=\"m-3\"\n      [style]=\"'align-items: center; height: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewWidth * this.imageSettings.aspectRatio) + 'px'\"\n      [class.onshore-cropper-circle]=\"this.imageSettings.circleCropper\"\n      (imageCropped)=\"imageCropped($event)\"\n      [imageBase64]=\"image\"\n      [imageQuality]=\"this.imageSettings.imageQuality\"\n      [alignImage]=\"this.imageSettings.alignImage\"\n      [backgroundColor]=\"this.imageSettings.backgroundColor\"\n      [containWithinAspectRatio]=\"this.imageSettings.containWithinAspectRatio\"\n      [format]=\"this.imageSettings.format\"\n      [aspectRatio]=\"this.imageSettings.aspectRatio\"\n      [resizeToHeight]=\"this.imageSettings.imageWidth * this.imageSettings.aspectRatio\"\n      [resizeToWidth]=\"this.imageSettings.imageHeight * this.imageSettings.aspectRatio\">\n    </image-cropper>\n  </div>\n\n  <div *ngIf=\"imageError\"class=\"pb-2 text-wrap text-center onshore-color-danger\">\n    <small *ngIf=\"imageError == imageErrorType.ratio\">{{'form.imageControl.imageErrorRatio' | translate: {resizeToWidth: this.imageSettings.imageWidth, resizeToHeight: this.imageSettings.imageHeight} }}</small>\n    <small *ngIf=\"imageError == imageErrorType.fileType\">{{'form.imageControl.imageErrorFileType' | translate}}</small>\n    <small *ngIf=\"imageError == imageErrorType.size\">{{'form.imageControl.imageErrorSize' | translate}}</small>\n  </div>\n</div>\n\n\n<p-footer>\n  <div class=\"flex justify-content-end align-items-center mt-2\">\n    <button pButton\n            type=\"button\"\n            icon=\"fa fa-times\"\n            [label]=\"'form.imageControl.imageChooserCancelButton' | translate\"\n            class=\"onshore-button-light mr-2\"\n            (click)=\"clear(); canceled.emit(true)\">\n    </button>\n\n    <button pButton\n            type=\"button\"\n            [label]=\"'form.imageControl.imageChooserSelectButton' | translate\"\n            class=\"onshore-button-primary\"\n            icon=\"fa fa-check\"\n            [disabled]=\"!image\"\n            (click)=\"imageCroppedReady()\">\n    </button>\n  </div>\n</p-footer>\n\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { imageSettings: [{
+                type: Input
+            }], choosen: [{
+                type: Output
+            }], canceled: [{
+                type: Output
+            }] } });
+
+class WebcamComponent {
+    cdr;
+    imageSettings = undefined;
+    shot = new EventEmitter();
+    canceled = new EventEmitter();
+    image = '';
+    finalImage = '';
+    trigger = new Subject();
+    camImageShot(webcamImage) {
+        this.image = webcamImage.imageAsDataUrl;
+        this.cdr.markForCheck();
+    }
+    imageCropped(event) {
+        // ToDo: Check needed base64 format
+        this.finalImage = event.base64 || '';
+    }
+    imageCroppedReady() {
+        this.shot.emit(this.finalImage);
+    }
+    get triggerObservable() {
+        return this.trigger.asObservable();
+    }
+    triggerSnapshot() {
+        this.trigger.next();
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: WebcamComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: WebcamComponent, isStandalone: true, selector: "onshore-webcam", inputs: { imageSettings: "imageSettings" }, outputs: { shot: "shot", canceled: "canceled" }, ngImport: i0, template: "<div class=\"flex w-full justify-content-center align-items-center overflow-hidden p-2\">\n  <webcam *ngIf=\"!image || image == ''\"\n          [mirrorImage]=\"'never'\"\n          [height]=\"imageSettings.webcamWidth * this.imageSettings.aspectRatio\"\n          [width]=\"imageSettings.webcamHeight * this.imageSettings.aspectRatio\"\n          [allowCameraSwitch]=\"true\"\n          [trigger]=\"triggerObservable\"\n          [imageQuality]=\"imageSettings.imageQuality / 100\"\n          (imageCapture)=\"camImageShot($event)\">\n  </webcam>\n\n  <image-cropper *ngIf=\"image && image != ''\"\n    class=\"m-3\" [style]=\"'height: ' + (imageSettings.cropperPreviewWidth * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + 'px'\"\n    [class.onshore-cropper-circle]=\"imageSettings.circleCropper\"\n    (imageCropped)=\"imageCropped($event)\"\n    [imageBase64]=\"image\"\n    [imageQuality]=\"imageSettings.imageQuality\"\n    [alignImage]=\"imageSettings.alignImage\"\n    [backgroundColor]=\"imageSettings?.backgroundColor\"\n    [containWithinAspectRatio]=\"imageSettings?.containWithinAspectRatio\"\n    [format]=\"imageSettings.format\"\n    [aspectRatio]=\"imageSettings.aspectRatio\"\n    [resizeToHeight]=\"imageSettings.imageHeight * this.imageSettings.aspectRatio\"\n    [resizeToWidth]=\"this.imageSettings.imageWidth * this.imageSettings.aspectRatio\">\n  </image-cropper>\n</div>\n\n<p-footer>\n  <div class=\"flex justify-content-end align-items-center mt-2\">\n\n    <button pButton\n            type=\"button\"\n            icon=\"fa fa-times\"\n            [label]=\"'global.cancel' | translate\"\n            class=\"onshore-button-light mr-2\"\n            (click)=\"canceled.emit(true)\">\n    </button>\n\n    <button *ngIf=\"!image || image == ''\"\n            pButton\n            type=\"button\"\n            [label]=\"'form.imageControl.webcamSmileButton' | translate\"\n            class=\"onshore-button-primary\"\n            icon=\"fa fa-laugh-wink\"\n            (click)=\"triggerSnapshot()\">\n    </button>\n\n    <button *ngIf=\"image && image != ''\"\n            pButton\n            type=\"button\"\n            [label]=\"'global.use' | translate\"\n            class=\"onshore-button-primary\"\n            icon=\"fa fa-check\"\n            (click)=\"imageCroppedReady()\">\n    </button>\n  </div>\n</p-footer>\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i4.Footer, selector: "p-footer" }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: WebcamModule }, { kind: "component", type: i5$1.WebcamComponent, selector: "webcam", inputs: ["width", "height", "videoOptions", "allowCameraSwitch", "mirrorImage", "captureImageData", "imageType", "imageQuality", "trigger", "switchCamera"], outputs: ["imageCapture", "initError", "imageClick", "cameraSwitched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: WebcamComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-webcam', imports: [CommonModule, TranslateModule, ButtonModule, ImageCropperComponent, WebcamModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"flex w-full justify-content-center align-items-center overflow-hidden p-2\">\n  <webcam *ngIf=\"!image || image == ''\"\n          [mirrorImage]=\"'never'\"\n          [height]=\"imageSettings.webcamWidth * this.imageSettings.aspectRatio\"\n          [width]=\"imageSettings.webcamHeight * this.imageSettings.aspectRatio\"\n          [allowCameraSwitch]=\"true\"\n          [trigger]=\"triggerObservable\"\n          [imageQuality]=\"imageSettings.imageQuality / 100\"\n          (imageCapture)=\"camImageShot($event)\">\n  </webcam>\n\n  <image-cropper *ngIf=\"image && image != ''\"\n    class=\"m-3\" [style]=\"'height: ' + (imageSettings.cropperPreviewWidth * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + 'px'\"\n    [class.onshore-cropper-circle]=\"imageSettings.circleCropper\"\n    (imageCropped)=\"imageCropped($event)\"\n    [imageBase64]=\"image\"\n    [imageQuality]=\"imageSettings.imageQuality\"\n    [alignImage]=\"imageSettings.alignImage\"\n    [backgroundColor]=\"imageSettings?.backgroundColor\"\n    [containWithinAspectRatio]=\"imageSettings?.containWithinAspectRatio\"\n    [format]=\"imageSettings.format\"\n    [aspectRatio]=\"imageSettings.aspectRatio\"\n    [resizeToHeight]=\"imageSettings.imageHeight * this.imageSettings.aspectRatio\"\n    [resizeToWidth]=\"this.imageSettings.imageWidth * this.imageSettings.aspectRatio\">\n  </image-cropper>\n</div>\n\n<p-footer>\n  <div class=\"flex justify-content-end align-items-center mt-2\">\n\n    <button pButton\n            type=\"button\"\n            icon=\"fa fa-times\"\n            [label]=\"'global.cancel' | translate\"\n            class=\"onshore-button-light mr-2\"\n            (click)=\"canceled.emit(true)\">\n    </button>\n\n    <button *ngIf=\"!image || image == ''\"\n            pButton\n            type=\"button\"\n            [label]=\"'form.imageControl.webcamSmileButton' | translate\"\n            class=\"onshore-button-primary\"\n            icon=\"fa fa-laugh-wink\"\n            (click)=\"triggerSnapshot()\">\n    </button>\n\n    <button *ngIf=\"image && image != ''\"\n            pButton\n            type=\"button\"\n            [label]=\"'global.use' | translate\"\n            class=\"onshore-button-primary\"\n            icon=\"fa fa-check\"\n            (click)=\"imageCroppedReady()\">\n    </button>\n  </div>\n</p-footer>\n\n\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { imageSettings: [{
+                type: Input
+            }], shot: [{
+                type: Output
+            }], canceled: [{
+                type: Output
+            }] } });
+
+class OnshoreFormImageItemComponent {
+    cdr;
+    ngControl;
+    dialogService;
+    formTemplate;
+    imageSettings = undefined;
+    actionButtonDisabled = false;
+    imageDeleted = new EventEmitter();
+    imageCleared = new EventEmitter();
+    imageReady = new EventEmitter();
+    selectFromMedia = new EventEmitter();
+    isLoading = new EventEmitter();
+    OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
+    defaultImageSettings = {
+        imageWidth: 400,
+        imageHeight: 400,
+        containWithinAspectRatio: false,
+        aspectRatio: 1 / 1,
+        imageSelectionEnabled: true,
+        webcamSelectionEnabled: true,
+        mediaSelectionEnabled: true,
+        deleteEnabled: true,
+        placeholderImage: '',
+        placeholderIcon: 'fa fa-image fa-10x',
+        containerWidth: 250,
+        containerHeight: 250,
+        imageQuality: 100,
+        format: 'png',
+        alignImage: 'center',
+        cropperPreviewWidth: 400,
+        cropperPreviewHeight: 400,
+        webcamWidth: 400,
+        webcamHeight: 400,
+        circleCropper: false,
+        maxFileSize: 6400000,
+        backgroundColor: 'white'
+    };
+    image = '';
+    disabled = false;
+    webcamDialogVisible = false;
+    imageChooserDialogVisible = false;
+    subscriptions = [];
+    getFileImage(image) {
+        this.imageChooserDialogVisible = false;
+        if (image) {
+            this.image = image;
+            setTimeout(() => {
+                this.ngControl?.control?.setValue(this.image);
+                this.ngControl?.control?.markAsDirty();
+                this.imageReady.emit(this.image);
+                this.cdr.markForCheck();
+            }, 500);
+        }
+    }
+    getWebcamImage(image) {
+        this.webcamDialogVisible = false;
+        if (image) {
+            this.image = image;
+            setTimeout(() => {
+                this.ngControl?.control?.setValue(this.image);
+                this.ngControl?.control?.markAsDirty();
+                this.imageReady.emit(this.image);
+                this.cdr.markForCheck();
+            }, 500);
+        }
+    }
+    removeImage() {
+        if (this.image && !this.image.includes('base64')) {
+            this.imageDeleted.emit(this.image);
+        }
+        else {
+            this.imageCleared.emit();
+        }
+        this.ngControl?.control?.setValue(null);
+        this.ngControl?.control?.markAsDirty();
+        this.image = '';
+        this.cdr.markForCheck();
+    }
+    writeValue(obj) {
+        if (obj && !obj.includes('base64')) {
+            this.image = obj;
+        }
+        if (obj == null) {
+            this.image = '';
+        }
+        this.imageReady.emit(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() {
+        if (this.ngControl?.control?.value == '' && this.formTemplate.default != undefined) {
+            this.ngControl?.control?.setValue(this.formTemplate.default);
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((subscription) => {
+            subscription.unsubscribe();
+        });
+        this.ngControl?.control?.disable();
+        this.image = undefined;
+    }
+    ngOnChanges(changes) {
+        const imageSettings = changes['imageSettings']?.currentValue;
+        this.imageSettings = {
+            ...this.defaultImageSettings,
+            ...imageSettings,
+            placeholderIcon: imageSettings?.placeholderImage ? '' : (imageSettings?.placeholderIcon ?? this.defaultImageSettings.placeholderIcon)
+        };
+        //this.removeImage();
+        this.cdr.markForCheck();
+    }
+    constructor(cdr, ngControl, dialogService) {
+        this.cdr = cdr;
+        this.ngControl = ngControl;
+        this.dialogService = dialogService;
+        this.ngControl.valueAccessor = this;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormImageItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }, { token: i2$3.DialogService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreFormImageItemComponent, isStandalone: true, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", imageSettings: "imageSettings", actionButtonDisabled: "actionButtonDisabled" }, outputs: { imageDeleted: "imageDeleted", imageCleared: "imageCleared", imageReady: "imageReady", selectFromMedia: "selectFromMedia", isLoading: "isLoading" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <div class=\"w-full flex align-items-center\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\n\n    <div class=\"onshore-border-gray-4 border-solid border-1 overflow-hidden\"\n         [style]=\"'background-color: white; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n      <onshore-image-placeholder\n        class=\"w-full\"\n        [image]=\"image\"\n        [imageStyle]=\"'width: 100%; height: 100%'\"\n        [placeholderIcon]=\"imageSettings.placeholderIcon\"\n        [placeholderImage]=\"imageSettings.placeholderImage\"\n        [placeholderStyle]=\"'width: 100%; height: 100%'\">\n      </onshore-image-placeholder>\n    </div>\n\n    <div class=\"flex flex-column m-4\">\n      <button pButton\n              type=\"button\"\n              *ngIf=\"imageSettings.imageSelectionEnabled\"\n              icon=\"fa fa-image\"\n              [label]=\"'form.imageControl.uploadImageButton' | translate\"\n              class=\"onshore-button-primary mb-2\"\n              [disabled]=\"disabled\"\n              (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n      </button>\n\n      <button pButton\n              type=\"button\"\n              *ngIf=\"imageSettings.webcamSelectionEnabled\"\n              icon=\"fa fa-camera\"\n              [label]=\"'form.imageControl.webcamImageButton' | translate\"\n              class=\"onshore-button-light mb-2\"\n              [disabled]=\"disabled\"\n              (click)=\"webcamDialogVisible = true\">\n      </button>\n\n      <button pButton\n              type=\"button\"\n              *ngIf=\"imageSettings.mediaSelectionEnabled\"\n              icon=\"fa fa-photo-video\"\n              [label]=\"'form.imageControl.mediaImageButton' | translate\"\n              class=\"onshore-button-light mb-2\"\n              [disabled]=\"disabled\"\n              (click)=\"selectFromMedia.emit()\">\n      </button>\n\n      <button pButton\n              type=\"button\"\n              *ngIf=\"imageSettings.deleteEnabled\"\n              icon=\"fa fa-eraser\"\n              [label]=\"'form.imageControl.removeImageButton' | translate\"\n              class=\"onshore-button-light\"\n              (click)=\"removeImage()\"\n              [disabled]=\"!image || disabled\">\n      </button>\n\n    </div>\n\n  </div>\n</onshore-form-item-container>\n\n<p-dialog [header]=\"'form.imageControl.uploadImageTitle' | translate\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n  <onshore-image-chooser\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [imageSettings]=\"imageSettings\">\n  </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n  <onshore-webcam\n    *ngIf=\"webcamDialogVisible\"\n    (shot)=\"getWebcamImage($event)\"\n    (canceled)=\"webcamDialogVisible = false\"\n    [imageSettings]=\"imageSettings\"></onshore-webcam>\n</p-dialog>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "component", type: OnshoreImagePlaceholderComponent, selector: "onshore-image-placeholder", inputs: ["placeholderIcon", "placeholderImage", "image", "imageStyle", "placeholderStyle", "showLoader"] }, { kind: "component", type: OnshoreImageChooserComponent, selector: "onshore-image-chooser", inputs: ["imageSettings"], outputs: ["choosen", "canceled"] }, { kind: "component", type: WebcamComponent, selector: "onshore-webcam", inputs: ["imageSettings"], outputs: ["shot", "canceled"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-form-image-item', imports: [CommonModule, OnshoreFormItemContainer, OnshoreImagePlaceholderComponent, OnshoreImageChooserComponent, WebcamComponent, TranslateModule, ButtonModule, DialogModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <div class=\"w-full flex align-items-center\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\n\n    <div class=\"onshore-border-gray-4 border-solid border-1 overflow-hidden\"\n         [style]=\"'background-color: white; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n      <onshore-image-placeholder\n        class=\"w-full\"\n        [image]=\"image\"\n        [imageStyle]=\"'width: 100%; height: 100%'\"\n        [placeholderIcon]=\"imageSettings.placeholderIcon\"\n        [placeholderImage]=\"imageSettings.placeholderImage\"\n        [placeholderStyle]=\"'width: 100%; height: 100%'\">\n      </onshore-image-placeholder>\n    </div>\n\n    <div class=\"flex flex-column m-4\">\n      <button pButton\n              type=\"button\"\n              *ngIf=\"imageSettings.imageSelectionEnabled\"\n              icon=\"fa fa-image\"\n              [label]=\"'form.imageControl.uploadImageButton' | translate\"\n              class=\"onshore-button-primary mb-2\"\n              [disabled]=\"disabled\"\n              (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n      </button>\n\n      <button pButton\n              type=\"button\"\n              *ngIf=\"imageSettings.webcamSelectionEnabled\"\n              icon=\"fa fa-camera\"\n              [label]=\"'form.imageControl.webcamImageButton' | translate\"\n              class=\"onshore-button-light mb-2\"\n              [disabled]=\"disabled\"\n              (click)=\"webcamDialogVisible = true\">\n      </button>\n\n      <button pButton\n              type=\"button\"\n              *ngIf=\"imageSettings.mediaSelectionEnabled\"\n              icon=\"fa fa-photo-video\"\n              [label]=\"'form.imageControl.mediaImageButton' | translate\"\n              class=\"onshore-button-light mb-2\"\n              [disabled]=\"disabled\"\n              (click)=\"selectFromMedia.emit()\">\n      </button>\n\n      <button pButton\n              type=\"button\"\n              *ngIf=\"imageSettings.deleteEnabled\"\n              icon=\"fa fa-eraser\"\n              [label]=\"'form.imageControl.removeImageButton' | translate\"\n              class=\"onshore-button-light\"\n              (click)=\"removeImage()\"\n              [disabled]=\"!image || disabled\">\n      </button>\n\n    </div>\n\n  </div>\n</onshore-form-item-container>\n\n<p-dialog [header]=\"'form.imageControl.uploadImageTitle' | translate\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n  <onshore-image-chooser\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [imageSettings]=\"imageSettings\">\n  </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n  <onshore-webcam\n    *ngIf=\"webcamDialogVisible\"\n    (shot)=\"getWebcamImage($event)\"\n    (canceled)=\"webcamDialogVisible = false\"\n    [imageSettings]=\"imageSettings\"></onshore-webcam>\n</p-dialog>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i2$3.DialogService }], propDecorators: { formTemplate: [{
+                type: Input
+            }], imageSettings: [{
+                type: Input
+            }], actionButtonDisabled: [{
+                type: Input
+            }], imageDeleted: [{
+                type: Output
+            }], imageCleared: [{
+                type: Output
+            }], imageReady: [{
+                type: Output
+            }], selectFromMedia: [{
+                type: Output
+            }], isLoading: [{
+                type: Output
+            }] } });
+
+class OnshoreFormInputItemComponent {
+    ngControl;
+    cdr;
+    formTemplate;
+    step = 1;
+    min = 0;
+    max = 999999;
+    minLength = 0;
+    maxLength = 999999;
+    actionButtonDisabled = false;
+    actionButtonClick = new EventEmitter();
+    OnshoreFormTemplateType = OnshoreFormTemplateType;
+    passwordVisible = false;
+    disabled = false;
+    // ControlValueAccessor interface
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngOnInit() {
+        if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
+            this.ngControl.control?.setValue(this.formTemplate.default);
+            this.cdr.markForCheck();
+        }
+    }
+    // @ts-ignore
+    onNumberInput(event) {
+        this.ngControl.control?.setValue(event.value);
+        this.ngControl?.control?.markAsDirty();
+        this.cdr.markForCheck();
+    }
+    get formControl() {
+        return this.ngControl.control;
+    }
+    ngOnChanges(changes) {
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        this.ngControl.control?.disable();
+    }
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.ngControl.valueAccessor = this;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormInputItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreFormInputItemComponent, isStandalone: true, selector: "onshore-form-input-item", inputs: { formTemplate: "formTemplate", step: "step", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", actionButtonDisabled: "actionButtonDisabled" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n  <p-inputgroup class=\"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               pTextarea\n               [autoResize]=\"true\"\n               [formControl]=\"formControl\"\n               [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n               [minLength]=\"minLength\"\n               [maxLength]=\"maxLength\"></textarea>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n             class=\"w-full\"\n             [type]=\"formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"formControl\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n             class=\"w-full\"\n             [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"formControl\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n                     class=\"w-full\"\n                     [name]=\"formTemplate.name\"\n                     [placeholder]=\"formTemplate.placeholder ?? ''\"\n                     [disabled]=\"disabled\"\n                     [formControl]=\"formControl\"\n                     [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n                     [showButtons]=\"true\"\n                     [step]=\"step ?? 1\"\n                     [min]=\"min\"\n                     [max]=\"max\"\n                     (onInput)=\"onNumberInput($event)\">\n      </p-inputNumber>\n\n      <p-inputgroup-addon *ngIf=\"formTemplate.inputAddon\">\n        <p-button [icon]=\"'fa ' + formTemplate.inputAddon\" severity=\"secondary\" />\n      </p-inputgroup-addon>\n\n      <p-inputgroup-addon *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n          (click)=\"passwordVisible = !passwordVisible\"\n          class=\"cursor-pointer\">\n        <p-button [icon]=\"passwordVisible ? 'fa fa-eye' : 'fa fa-eye-slash'\" severity=\"secondary\" />\n      </p-inputgroup-addon>\n\n  </p-inputgroup>\n</onshore-form-item-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$4.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i5$2.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6$1.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i7.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormInputItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-form-input-item', imports: [CommonModule, OnshoreFormItemContainer, TranslateModule, TextareaModule, InputTextModule, InputNumberModule, FormsModule, ReactiveFormsModule, InputGroupModule, InputGroupAddonModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n  <p-inputgroup class=\"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               pTextarea\n               [autoResize]=\"true\"\n               [formControl]=\"formControl\"\n               [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n               [minLength]=\"minLength\"\n               [maxLength]=\"maxLength\"></textarea>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n             class=\"w-full\"\n             [type]=\"formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"formControl\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n             class=\"w-full\"\n             [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"formControl\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n                     class=\"w-full\"\n                     [name]=\"formTemplate.name\"\n                     [placeholder]=\"formTemplate.placeholder ?? ''\"\n                     [disabled]=\"disabled\"\n                     [formControl]=\"formControl\"\n                     [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n                     [showButtons]=\"true\"\n                     [step]=\"step ?? 1\"\n                     [min]=\"min\"\n                     [max]=\"max\"\n                     (onInput)=\"onNumberInput($event)\">\n      </p-inputNumber>\n\n      <p-inputgroup-addon *ngIf=\"formTemplate.inputAddon\">\n        <p-button [icon]=\"'fa ' + formTemplate.inputAddon\" severity=\"secondary\" />\n      </p-inputgroup-addon>\n\n      <p-inputgroup-addon *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n          (click)=\"passwordVisible = !passwordVisible\"\n          class=\"cursor-pointer\">\n        <p-button [icon]=\"passwordVisible ? 'fa fa-eye' : 'fa fa-eye-slash'\" severity=\"secondary\" />\n      </p-inputgroup-addon>\n\n  </p-inputgroup>\n</onshore-form-item-container>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { formTemplate: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], actionButtonDisabled: [{
+                type: Input
+            }], actionButtonClick: [{
+                type: Output
+            }] } });
+
+class OnshoreFormSwitchItemComponent {
+    ngControl;
+    cdr;
+    formTemplate;
+    actionButtonDisabled = false;
+    valueChange = new EventEmitter();
+    actionButtonClick = new EventEmitter();
+    disabled = false;
+    // ControlValueAccessor interface
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    get formControl() {
+        return this.ngControl.control;
+    }
+    ngOnInit() {
+        this.ngControl.control?.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), skip(1)).subscribe(newValue => {
+            this.valueChange.emit(this.ngControl.control?.value);
+        });
+        if (this.ngControl.control?.value == undefined && this.formTemplate.default != undefined) {
+            this.ngControl.control?.setValue(this.formTemplate.default);
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnChanges(changes) {
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        this.ngControl.control?.disable();
+    }
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.ngControl.valueAccessor = this;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormSwitchItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreFormSwitchItemComponent, isStandalone: true, selector: "onshore-form-switch-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled" }, outputs: { valueChange: "valueChange", actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n  <div class=\"h-full align-items-center mt-1\">\n    <p-inputSwitch [name]=\"formTemplate.name\"\n                   [formControl]=\"formControl\"\n                   [disabled]=\"disabled\"\n                   [inputId]=\"formTemplate.name\">\n    </p-inputSwitch>\n  </div>\n\n</onshore-form-item-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i2$4.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormSwitchItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-form-switch-item', imports: [CommonModule, OnshoreFormItemContainer, TranslateModule, InputSwitchModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n  <div class=\"h-full align-items-center mt-1\">\n    <p-inputSwitch [name]=\"formTemplate.name\"\n                   [formControl]=\"formControl\"\n                   [disabled]=\"disabled\"\n                   [inputId]=\"formTemplate.name\">\n    </p-inputSwitch>\n  </div>\n\n</onshore-form-item-container>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { formTemplate: [{
+                type: Input
+            }], actionButtonDisabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], actionButtonClick: [{
+                type: Output
+            }] } });
+
+class OnshoreFormDatetimeItemComponent {
+    ngControl;
+    cdr;
+    formTemplate;
+    actionButtonDisabled = false;
+    actionButtonClick = new EventEmitter();
+    OnshoreFormTemplateType = OnshoreFormTemplateType;
+    disabled = false;
+    // ControlValueAccessor interface
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    selectDate(date) {
+        console.log(date);
+    }
+    selectTime(time) {
+        console.log(time);
+    }
+    get formControl() {
+        return this.ngControl.control;
+    }
+    ngOnInit() {
+        if (this.ngControl.control?.value !== true && this.ngControl.control?.value !== false && this.formTemplate.default != undefined) {
+            this.ngControl.control?.setValue(this.formTemplate.default);
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnChanges(changes) {
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        this.ngControl.control?.disable();
+    }
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.ngControl.valueAccessor = this;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormDatetimeItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreFormDatetimeItemComponent, isStandalone: true, selector: "onshore-form-datetime-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n\n  <p-calendar class=\"w-full\"\n              [name]=\"formTemplate.name\"\n              [placeholder]=\"formTemplate.placeholder ?? ''\"\n              [disabled]=\"disabled\"\n              [formControl]=\"formControl\"\n              dateFormat=\"dd.mm.yy\"\n              dataType=\"string\"\n              hourFormat=\"24\"\n              [timeOnly]=\"formTemplate.type == OnshoreFormTemplateType.time\"\n              [showTime]=\"formTemplate.type == OnshoreFormTemplateType.datetime\"\n              [defaultDate]=\"formTemplate.default\"\n              (onSelect)=\"selectDate($event)\"\n              appendTo=\"body\">\n  </p-calendar>\n\n</onshore-form-item-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$5.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormDatetimeItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-form-datetime-item', imports: [CommonModule, OnshoreFormItemContainer, CalendarModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\">\n\n  <p-calendar class=\"w-full\"\n              [name]=\"formTemplate.name\"\n              [placeholder]=\"formTemplate.placeholder ?? ''\"\n              [disabled]=\"disabled\"\n              [formControl]=\"formControl\"\n              dateFormat=\"dd.mm.yy\"\n              dataType=\"string\"\n              hourFormat=\"24\"\n              [timeOnly]=\"formTemplate.type == OnshoreFormTemplateType.time\"\n              [showTime]=\"formTemplate.type == OnshoreFormTemplateType.datetime\"\n              [defaultDate]=\"formTemplate.default\"\n              (onSelect)=\"selectDate($event)\"\n              appendTo=\"body\">\n  </p-calendar>\n\n</onshore-form-item-container>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { formTemplate: [{
+                type: Input
+            }], actionButtonDisabled: [{
+                type: Input
+            }], actionButtonClick: [{
+                type: Output
+            }] } });
+
+class OnshoreFormSortItemComponent {
+    ngControl;
+    cdr;
+    formTemplate;
+    actionButtonDisabled = false;
+    actionButtonClick = new EventEmitter();
+    sortItems = [];
+    tempLockValue = [];
+    OnshoreFormTemplateType = OnshoreFormTemplateType;
+    disabled = false;
+    sortItemsChanged(event) {
+        this.sortItems = event;
+        this.ngControl?.control?.setValue(event);
+        this.ngControl?.control?.markAsDirty();
+        this.cdr.markForCheck();
+    }
+    lockChanged(unlocked) {
+        if (unlocked && this.formTemplate.enabled) {
+            this.tempLockValue = this.ngControl?.control?.value;
+        }
+        else {
+            this.ngControl?.control?.setValue(this.tempLockValue);
+            this.sortItems = this.tempLockValue;
+            this.tempLockValue = undefined;
+        }
+        this.cdr.markForCheck();
+    }
+    // ControlValueAccessor interface
+    writeValue(obj) {
+        if (obj) {
+            this.cdr.markForCheck();
+        }
+    }
+    registerOnChange(fn) {
+        if (this.ngControl.value) {
+            this.cdr.markForCheck();
+        }
+    }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngOnInit() {
+        this.ngControl.control?.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), skip(1)).subscribe(newValue => {
+            this.ngControl?.control?.setValue(newValue);
+        });
+        if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
+            this.ngControl.control?.setValue(this.formTemplate.default);
+            this.sortItems = this.formTemplate.default;
+        }
+        else {
+            this.sortItems = this.ngControl.control?.value;
+        }
+        this.cdr.markForCheck();
+    }
+    ngOnChanges(changes) {
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        this.ngControl.control?.disable();
+    }
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.ngControl.valueAccessor = this;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormSortItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OnshoreFormSortItemComponent, isStandalone: true, selector: "onshore-form-sort-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             (lockIsChanged)=\"lockChanged($event)\">\n\n  <!--<div *ngIf=\"formTemplate.type == OnshoreFormTemplateType.sort\"\n       class=\"w-full\" [dragula]=\"ngControl.enabled\"\n       [dragulaModel]=\"sortItems\"\n       (dragulaModelChange)=\"sortItemsChanged($event)\">\n    <div [class.cursor-move]=\"ngControl.enabled\"\n         style=\"border-radius: 3px\"\n         class=\"onshore-sort-item flex justify-content-between align-items-center onshore-border-gray-4 border-solid border-1 p-2 mb-2 onshore-background-color-white\" *ngFor=\"let item of sortItems\">\n      <span [class.onshore-color-blocked]=\"!ngControl.enabled\">{{ item.label }}</span>\n      <i [class.onshore-color-blocked]=\"!ngControl.enabled\" class=\"fa fa-arrows-v\"></i>\n    </div>\n  </div>-->\n\n</onshore-form-item-container>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OnshoreFormSortItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-form-sort-item', imports: [CommonModule, OnshoreFormItemContainer, TranslateModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             (lockIsChanged)=\"lockChanged($event)\">\n\n  <!--<div *ngIf=\"formTemplate.type == OnshoreFormTemplateType.sort\"\n       class=\"w-full\" [dragula]=\"ngControl.enabled\"\n       [dragulaModel]=\"sortItems\"\n       (dragulaModelChange)=\"sortItemsChanged($event)\">\n    <div [class.cursor-move]=\"ngControl.enabled\"\n         style=\"border-radius: 3px\"\n         class=\"onshore-sort-item flex justify-content-between align-items-center onshore-border-gray-4 border-solid border-1 p-2 mb-2 onshore-background-color-white\" *ngFor=\"let item of sortItems\">\n      <span [class.onshore-color-blocked]=\"!ngControl.enabled\">{{ item.label }}</span>\n      <i [class.onshore-color-blocked]=\"!ngControl.enabled\" class=\"fa fa-arrows-v\"></i>\n    </div>\n  </div>-->\n\n</onshore-form-item-container>\n\n" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { formTemplate: [{
+                type: Input
+            }], actionButtonDisabled: [{
+                type: Input
+            }], actionButtonClick: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of onshore-forms
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDatetimeItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormItemContainer, OnshoreFormSortItemComponent, OnshoreFormSwitchItemComponent, OnshoreFormTemplateLayout, OnshoreFormTemplateType, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsService, OnshoreImageChooserComponent, OnshoreImageError, OnshoreImagePlaceholderComponent, OnshoreValidators, WebcamComponent };
+//# sourceMappingURL=onshore-forms.mjs.map