onshore-forms 0.0.13 → 0.0.15

package/fesm2015/onshore-forms.mjs

@@ -3,43 +3,48 @@ import { Injectable, Component, ChangeDetectionStrategy, Input, Self, Optional,
 import * as i1$1 from '@angular/forms';
 import { FormGroup, FormControl, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Subject, debounceTime, distinctUntilChanged, skip } from 'rxjs';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3$1 from 'primeng/inputnumber';
+import * as i3$2 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import * as i4 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i5 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
-import * as i2$1 from 'primeng/tooltip';
+import * as i2 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import * as i3 from 'primeng/togglebutton';
+import * as i3$1 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
-import * as i1 from '@ngx-translate/core';
+import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i2$2 from 'primeng/inputswitch';
+import * as i2$1 from 'primeng/inputswitch';
 import { InputSwitchModule } from 'primeng/inputswitch';
 import * as i2$3 from 'primeng/dynamicdialog';
-import * as i5$1 from 'primeng/button';
+import { DialogService } from 'primeng/dynamicdialog';
+import * as i2$2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i6 from 'primeng/ripple';
-import { RippleModule } from 'primeng/ripple';
-import * as i3$2 from 'primeng/dropdown';
+import * as i6 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import * as i3$3 from 'primeng/api';
+import * as i4$1 from 'ngx-image-cropper';
+import { ImageCropperModule } from 'ngx-image-cropper';
+import * as i5$1 from 'ngx-webcam';
+import { WebcamModule } from 'ngx-webcam';
+import * as i3$4 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
-import * as i4$1 from 'primeng/multiselect';
+import * as i4$2 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i2$4 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
 import * as i2$5 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import { __awaiter } from 'tslib';
-import * as i3$3 from 'primeng/autocomplete';
+import * as i3$5 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
-import * as i4$2 from 'primeng/api';
-import { DialogModule } from 'primeng/dialog';
-import { SelectButtonModule } from 'primeng/selectbutton';
 import * as i2$6 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
+import { RippleModule } from 'primeng/ripple';
+import { SelectButtonModule } from 'primeng/selectbutton';
 
 var OnshoreFormTemplateType;
 (function (OnshoreFormTemplateType) {
@@ -277,12 +282,12 @@ class OnshoreFormValidationOutputComponent {
         this.cdr.markForCheck();
     }
 }
-OnshoreFormValidationOutputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormValidationOutputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormValidationOutputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: { validationErrors: "validationErrors", validationItems: "validationItems" }, usesOnChanges: true, ngImport: i0, template: "<small class=\"onshore-color-danger\"\n       *ngIf=\"validationTranslation\"\n      [innerHTML]=\"validationTranslation\">\n</small>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormValidationOutputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormValidationOutputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+OnshoreFormValidationOutputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: { validationErrors: "validationErrors", validationItems: "validationItems" }, usesOnChanges: true, ngImport: i0, template: "<small class=\"onshore-color-danger\"\n       *ngIf=\"validationTranslation\"\n      [innerHTML]=\"validationTranslation\">\n</small>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormValidationOutputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onshore-form-validation-output', changeDetection: ChangeDetectionStrategy.OnPush, template: "<small class=\"onshore-color-danger\"\n       *ngIf=\"validationTranslation\"\n      [innerHTML]=\"validationTranslation\">\n</small>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }]; }, propDecorators: { validationErrors: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i3.TranslateService }]; }, propDecorators: { validationErrors: [{
                 type: Input
             }], validationItems: [{
                 type: Input
@@ -337,7 +342,7 @@ class OnshoreFormItemContainer {
     }
 }
 OnshoreFormItemContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormItemContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: { formTemplate: "formTemplate", ngControl: "ngControl" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4\">\n  <div class=\"flex w-full\"\n       [class.flex-column]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\"\n       [class.flex-row]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n       [class.justify-content-between]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\">\n\n    <div #formLabel\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n      <b [class.mr-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mb-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\">\n        {{formTemplate.label}}\n        <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n      </b>\n\n      <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n    </div>\n\n    <div class=\"flex w-full\">\n      <p-toggleButton\n        *ngIf=\"formTemplate.locked\"\n        (onChange)=\"enabled($event.checked)\"\n        onIcon=\"fa fa-lock-open\"\n        offIcon=\"fa fa-lock\"\n        class=\"mr-2\"\n        [style]=\"{height: '36px'}\">\n      </p-toggleButton>\n\n      <ng-content></ng-content>\n    </div>\n\n    <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n  </div>\n\n  <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\">\n    </onshore-form-validation-output>\n  </div>\n\n  <div [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3.ToggleButton, selector: "p-toggleButton", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "iconPos"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormItemContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: { formTemplate: "formTemplate", ngControl: "ngControl" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4\">\n  <div class=\"flex w-full\"\n       [class.flex-column]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\"\n       [class.flex-row]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n       [class.justify-content-between]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\">\n\n    <div #formLabel\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n      <b [class.mr-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mb-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\">\n        {{formTemplate.label}}\n        <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n      </b>\n\n      <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n    </div>\n\n    <div class=\"flex w-full\">\n      <p-toggleButton\n        *ngIf=\"formTemplate.locked\"\n        (onChange)=\"enabled($event.checked)\"\n        onIcon=\"fa fa-lock-open\"\n        offIcon=\"fa fa-lock\"\n        class=\"mr-2\"\n        [style]=\"{height: '36px'}\">\n      </p-toggleButton>\n\n      <ng-content></ng-content>\n    </div>\n\n    <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n  </div>\n\n  <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\">\n    </onshore-form-validation-output>\n  </div>\n\n  <div [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3$1.ToggleButton, selector: "p-toggleButton", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "iconPos"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, decorators: [{
             type: Component,
             args: [{ selector: 'onshore-form-item-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-4\">\n  <div class=\"flex w-full\"\n       [class.flex-column]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\"\n       [class.flex-row]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n       [class.justify-content-between]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\">\n\n    <div #formLabel\n         class=\"flex justify-content-between\"\n         [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n      <b [class.mr-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n         [class.mb-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\">\n        {{formTemplate.label}}\n        <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n      </b>\n\n      <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n    </div>\n\n    <div class=\"flex w-full\">\n      <p-toggleButton\n        *ngIf=\"formTemplate.locked\"\n        (onChange)=\"enabled($event.checked)\"\n        onIcon=\"fa fa-lock-open\"\n        offIcon=\"fa fa-lock\"\n        class=\"mr-2\"\n        [style]=\"{height: '36px'}\">\n      </p-toggleButton>\n\n      <ng-content></ng-content>\n    </div>\n\n    <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n  </div>\n\n  <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <onshore-form-validation-output\n      [validationItems]=\"formTemplate.validationItems\"\n      [validationErrors]=\"ngControl.control.errors\">\n    </onshore-form-validation-output>\n  </div>\n\n  <div [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n    <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n  </div>\n\n</div>\n" }]
@@ -385,7 +390,7 @@ class OnshoreFormInputItemComponent {
     }
 }
 OnshoreFormInputItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormInputItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormInputItemComponent, selector: "onshore-form-input-item", inputs: { formTemplate: "formTemplate", step: "step", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <span class=\"p-inputgroup w-full\">\n\n      <textarea  *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n               class=\"w-full\"\n               [name]=\"formTemplate.name\"\n               [placeholder]=\"formTemplate.placeholder ?? ''\"\n               [disabled]=\"disabled\"\n               [rows]=\"3\"\n               [cols]=\"30\"\n               pInputTextarea\n               [autoResize]=\"true\"\n               [formControl]=\"ngControl.control\"\n               [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n               [minLength]=\"minLength\"\n               [maxLength]=\"maxLength\"></textarea>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n             class=\"w-full\"\n             [type]=\"formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n             class=\"w-full\"\n             [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n                     class=\"w-full\"\n                     [name]=\"formTemplate.name\"\n                     [placeholder]=\"formTemplate.placeholder ?? 0\"\n                     [disabled]=\"disabled\"\n                     [formControl]=\"ngControl.control\"\n                     [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n                     [showButtons]=\"true\"\n                     [step]=\"step ?? 1\"\n                     [min]=\"min\"\n                     [max]=\"max\">\n      </p-inputNumber>\n\n      <span class=\"p-inputgroup-addon\" *ngIf=\"!disabled\">\n        <i class=\"fa\"\n          [class.fa-check]=\"formTemplate.required && (ngControl.control.valid || ngControl.control.untouched)\"\n          [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n          [class.onshore-color-gray-3]=\"ngControl.control.untouched\"\n          [class.onshore-color-success]=\"ngControl.control.touched && ngControl.control.valid\"\n          [class.onshore-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\">\n        </i>\n      </span>\n\n      <span *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n          (click)=\"passwordVisible = !passwordVisible\"\n          class=\"p-inputgroup-addon cursor-pointer\">\n        <i class=\"fa\"\n           [class.fa-eye-slash]=\"passwordVisible\"\n           [class.fa-eye]=\"!passwordVisible\"\n        ></i>\n      </span>\n\n  </span>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormInputItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormInputItemComponent, selector: "onshore-form-input-item", inputs: { formTemplate: "formTemplate", step: "step", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <span class=\"p-inputgroup w-full\">\n\n      <textarea  *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n               class=\"w-full\"\n               [name]=\"formTemplate.name\"\n               [placeholder]=\"formTemplate.placeholder ?? ''\"\n               [disabled]=\"disabled\"\n               [rows]=\"3\"\n               [cols]=\"30\"\n               pInputTextarea\n               [autoResize]=\"true\"\n               [formControl]=\"ngControl.control\"\n               [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n               [minLength]=\"minLength\"\n               [maxLength]=\"maxLength\"></textarea>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n             class=\"w-full\"\n             [type]=\"formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n             class=\"w-full\"\n             [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n                     class=\"w-full\"\n                     [name]=\"formTemplate.name\"\n                     [placeholder]=\"formTemplate.placeholder ?? 0\"\n                     [disabled]=\"disabled\"\n                     [formControl]=\"ngControl.control\"\n                     [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n                     [showButtons]=\"true\"\n                     [step]=\"step ?? 1\"\n                     [min]=\"min\"\n                     [max]=\"max\">\n      </p-inputNumber>\n\n      <span class=\"p-inputgroup-addon\" *ngIf=\"!disabled\">\n        <i class=\"fa\"\n          [class.fa-check]=\"formTemplate.required && (ngControl.control.valid || ngControl.control.untouched)\"\n          [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n          [class.onshore-color-gray-3]=\"ngControl.control.untouched\"\n          [class.onshore-color-success]=\"ngControl.control.touched && ngControl.control.valid\"\n          [class.onshore-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\">\n        </i>\n      </span>\n\n      <span *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n          (click)=\"passwordVisible = !passwordVisible\"\n          class=\"p-inputgroup-addon cursor-pointer\">\n        <i class=\"fa\"\n           [class.fa-eye-slash]=\"passwordVisible\"\n           [class.fa-eye]=\"!passwordVisible\"\n        ></i>\n      </span>\n\n  </span>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onshore-form-input-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <span class=\"p-inputgroup w-full\">\n\n      <textarea  *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n               class=\"w-full\"\n               [name]=\"formTemplate.name\"\n               [placeholder]=\"formTemplate.placeholder ?? ''\"\n               [disabled]=\"disabled\"\n               [rows]=\"3\"\n               [cols]=\"30\"\n               pInputTextarea\n               [autoResize]=\"true\"\n               [formControl]=\"ngControl.control\"\n               [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n               [minLength]=\"minLength\"\n               [maxLength]=\"maxLength\"></textarea>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n             class=\"w-full\"\n             [type]=\"formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n             class=\"w-full\"\n             [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n             [name]=\"formTemplate.name\"\n             [placeholder]=\"formTemplate.placeholder ?? ''\"\n             [disabled]=\"disabled\"\n             pInputText\n             [formControl]=\"ngControl.control\"\n             [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n             [minLength]=\"minLength\"\n             [maxLength]=\"maxLength\"/>\n\n      <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n                     class=\"w-full\"\n                     [name]=\"formTemplate.name\"\n                     [placeholder]=\"formTemplate.placeholder ?? 0\"\n                     [disabled]=\"disabled\"\n                     [formControl]=\"ngControl.control\"\n                     [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n                     [showButtons]=\"true\"\n                     [step]=\"step ?? 1\"\n                     [min]=\"min\"\n                     [max]=\"max\">\n      </p-inputNumber>\n\n      <span class=\"p-inputgroup-addon\" *ngIf=\"!disabled\">\n        <i class=\"fa\"\n          [class.fa-check]=\"formTemplate.required && (ngControl.control.valid || ngControl.control.untouched)\"\n          [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n          [class.onshore-color-gray-3]=\"ngControl.control.untouched\"\n          [class.onshore-color-success]=\"ngControl.control.touched && ngControl.control.valid\"\n          [class.onshore-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\">\n        </i>\n      </span>\n\n      <span *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n          (click)=\"passwordVisible = !passwordVisible\"\n          class=\"p-inputgroup-addon cursor-pointer\">\n        <i class=\"fa\"\n           [class.fa-eye-slash]=\"passwordVisible\"\n           [class.fa-eye]=\"!passwordVisible\"\n        ></i>\n      </span>\n\n  </span>\n</onshore-form-item-container>\n" }]
@@ -444,7 +449,7 @@ class OnshoreFormSwitchItemComponent {
     }
 }
 OnshoreFormSwitchItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormSwitchItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormSwitchItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormSwitchItemComponent, selector: "onshore-form-switch-item", inputs: { formTemplate: "formTemplate" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <p-inputSwitch [name]=\"formTemplate.name\"\n                 [formControl]=\"ngControl.control\"\n                 [disabled]=\"disabled\"\n                 [inputId]=\"formTemplate.name\" class=\"align-self-center\">\n  </p-inputSwitch>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormSwitchItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormSwitchItemComponent, selector: "onshore-form-switch-item", inputs: { formTemplate: "formTemplate" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <p-inputSwitch [name]=\"formTemplate.name\"\n                 [formControl]=\"ngControl.control\"\n                 [disabled]=\"disabled\"\n                 [inputId]=\"formTemplate.name\" class=\"align-self-center\">\n  </p-inputSwitch>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormSwitchItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onshore-form-switch-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <p-inputSwitch [name]=\"formTemplate.name\"\n                 [formControl]=\"ngControl.control\"\n                 [disabled]=\"disabled\"\n                 [inputId]=\"formTemplate.name\" class=\"align-self-center\">\n  </p-inputSwitch>\n</onshore-form-item-container>\n" }]
@@ -460,27 +465,251 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Output
             }] } });
 
+class OnshoreImagePlaceholderComponent {
+    constructor() {
+        this.placeholderIcon = '';
+        this.placeholderImage = '';
+        this.image = '';
+        this.imageStyle = '';
+        this.placeholderStyle = '';
+        this.showLoader = true;
+        this.imageLoaded = false;
+    }
+    loadReady() {
+        this.imageLoaded = true;
+        this.showLoader = false;
+    }
+    abort() {
+        this.imageLoaded = false;
+        this.showLoader = false;
+    }
+}
+OnshoreImagePlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImagePlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OnshoreImagePlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreImagePlaceholderComponent, selector: "onshore-image-placeholder", inputs: { placeholderIcon: "placeholderIcon", placeholderImage: "placeholderImage", image: "image", imageStyle: "imageStyle", placeholderStyle: "placeholderStyle", showLoader: "showLoader" }, ngImport: i0, template: "<div class=\"h-full\" [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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImagePlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-image-placeholder', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"h-full\" [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: function () { return []; }, propDecorators: { placeholderIcon: [{
+                type: Input
+            }], placeholderImage: [{
+                type: Input
+            }], image: [{
+                type: Input
+            }], imageStyle: [{
+                type: Input
+            }], placeholderStyle: [{
+                type: Input
+            }], showLoader: [{
+                type: Input
+            }] } });
+
+class OnshoreImageChooserComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.drag = false;
+        this.image = '';
+        this.finalImage = '';
+        this.imageErrorType = OnshoreImageError;
+        this.imageError = OnshoreImageError.none;
+        this.imageQuality = 100;
+        this.resizeToHeight = 400;
+        this.resizeToWidth = 400;
+        this.backgroundColor = 'white';
+        this.format = 'png';
+        this.alignImage = 'center';
+        this.containWithinAspectRatio = false;
+        this.aspectRatio = 1 / 1;
+        this.cropperPreviewHeight = 200;
+        this.cropperPreviewWidth = 200;
+        this.circleCropper = false;
+        this.autoSave = true;
+        this.inverseColor = false;
+        this.choosen = new EventEmitter();
+        this.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 === null || target === void 0 ? void 0 : target.files) ? target === null || target === void 0 ? void 0 : target.files[0] : null;
+        if ((file === null || file === void 0 ? void 0 : file.type) != 'image/png' && (file === null || file === void 0 ? void 0 : file.type) != 'image/jpeg' && (file === null || file === void 0 ? void 0 : file.type) != 'image/webp') {
+            this.imageError = OnshoreImageError.fileType;
+            return;
+        }
+        if ((file === null || file === void 0 ? void 0 : file.size) > 6400000) {
+            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 = () => {
+                    var _a;
+                    const originalWidth = img.width;
+                    const originalHeight = img.height;
+                    if (originalWidth >= this.resizeToWidth && originalHeight >= this.resizeToHeight) {
+                        this.image = ((_a = reader.result) === null || _a === void 0 ? void 0 : _a.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();
+    }
+}
+OnshoreImageChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImageChooserComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+OnshoreImageChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreImageChooserComponent, selector: "onshore-image-chooser", inputs: { imageQuality: "imageQuality", resizeToHeight: "resizeToHeight", resizeToWidth: "resizeToWidth", backgroundColor: "backgroundColor", format: "format", alignImage: "alignImage", containWithinAspectRatio: "containWithinAspectRatio", aspectRatio: "aspectRatio", cropperPreviewHeight: "cropperPreviewHeight", cropperPreviewWidth: "cropperPreviewWidth", circleCropper: "circleCropper", autoSave: "autoSave", inverseColor: "inverseColor" }, 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 style=\"max-width: 400px\" class=\"pt-4\">\n      <app-info-box title=\"Hinweis\"\n                    [description]=\"'Die Bilddatei muss mindestens ' + resizeToWidth + 'px x ' + resizeToHeight + 'px betragen, darf maximal 6,4 MB gro\u00DF sein und muss im Dateiformat JPG oder PNG vorliegen.'\"\n                    icon=\"fa-info-circle\"\n                    backgroud=\"navy\"\n                    iconPosition=\"bottom\"\n                    [descriptionWrap]=\"true\">\n      </app-info-box>\n    </div>-->\n\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    <!--<div style=\"max-width: 400px\" class=\"pt-4\">\n      <app-info-box title=\"Hinweis\"\n                    description=\"W\u00E4hle einen Bereich der vom Bild verwendet werden soll.\"\n                    icon=\"fa-info-circle\"\n                    backgroud=\"navy\"\n                    iconPosition=\"bottom\"\n                    [descriptionWrap]=\"true\">\n      </app-info-box>\n    </div>-->\n\n    <image-cropper\n      class=\"onshore-image-cropper m-3\"\n      [class.onshore-cropper-circle]=\"circleCropper\"\n      (imageCropped)=\"imageCropped($event)\"\n      [imageBase64]=\"image\"\n      [imageQuality]=\"imageQuality\"\n      [alignImage]=\"alignImage\"\n      [backgroundColor]=\"backgroundColor\"\n      [containWithinAspectRatio]=\"containWithinAspectRatio\"\n      [format]=\"format\"\n      [aspectRatio]=\"aspectRatio\"\n      [resizeToHeight]=\"resizeToHeight\"\n      [resizeToWidth]=\"resizeToWidth\">\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, resizeToHeight} }}</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-light\"\n            icon=\"fa fa-check\"\n            (click)=\"imageCroppedReady()\">\n    </button>\n  </div>\n</p-footer>\n\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i3$3.Footer, selector: "p-footer" }, { kind: "component", type: i4$1.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImageChooserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-image-chooser', changeDetection: ChangeDetectionStrategy.OnPush, 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 style=\"max-width: 400px\" class=\"pt-4\">\n      <app-info-box title=\"Hinweis\"\n                    [description]=\"'Die Bilddatei muss mindestens ' + resizeToWidth + 'px x ' + resizeToHeight + 'px betragen, darf maximal 6,4 MB gro\u00DF sein und muss im Dateiformat JPG oder PNG vorliegen.'\"\n                    icon=\"fa-info-circle\"\n                    backgroud=\"navy\"\n                    iconPosition=\"bottom\"\n                    [descriptionWrap]=\"true\">\n      </app-info-box>\n    </div>-->\n\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    <!--<div style=\"max-width: 400px\" class=\"pt-4\">\n      <app-info-box title=\"Hinweis\"\n                    description=\"W\u00E4hle einen Bereich der vom Bild verwendet werden soll.\"\n                    icon=\"fa-info-circle\"\n                    backgroud=\"navy\"\n                    iconPosition=\"bottom\"\n                    [descriptionWrap]=\"true\">\n      </app-info-box>\n    </div>-->\n\n    <image-cropper\n      class=\"onshore-image-cropper m-3\"\n      [class.onshore-cropper-circle]=\"circleCropper\"\n      (imageCropped)=\"imageCropped($event)\"\n      [imageBase64]=\"image\"\n      [imageQuality]=\"imageQuality\"\n      [alignImage]=\"alignImage\"\n      [backgroundColor]=\"backgroundColor\"\n      [containWithinAspectRatio]=\"containWithinAspectRatio\"\n      [format]=\"format\"\n      [aspectRatio]=\"aspectRatio\"\n      [resizeToHeight]=\"resizeToHeight\"\n      [resizeToWidth]=\"resizeToWidth\">\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, resizeToHeight} }}</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-light\"\n            icon=\"fa fa-check\"\n            (click)=\"imageCroppedReady()\">\n    </button>\n  </div>\n</p-footer>\n\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { imageQuality: [{
+                type: Input
+            }], resizeToHeight: [{
+                type: Input
+            }], resizeToWidth: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], alignImage: [{
+                type: Input
+            }], containWithinAspectRatio: [{
+                type: Input
+            }], aspectRatio: [{
+                type: Input
+            }], cropperPreviewHeight: [{
+                type: Input
+            }], cropperPreviewWidth: [{
+                type: Input
+            }], circleCropper: [{
+                type: Input
+            }], autoSave: [{
+                type: Input
+            }], inverseColor: [{
+                type: Input
+            }], choosen: [{
+                type: Output
+            }], canceled: [{
+                type: Output
+            }] } });
+
+class WebcamComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.inverseColor = false;
+        this.imageQuality = 100;
+        this.resizeToHeight = 400;
+        this.resizeToWidth = 400;
+        this.backgroundColor = 'white';
+        this.format = 'png';
+        this.alignImage = 'center';
+        this.containWithinAspectRatio = false;
+        this.aspectRatio = 1 / 1;
+        this.cropperPreviewHeight = 200;
+        this.cropperPreviewWidth = 200;
+        this.circleCropper = false;
+        this.shot = new EventEmitter();
+        this.canceled = new EventEmitter();
+        this.image = '';
+        this.finalImage = '';
+        this.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();
+    }
+}
+WebcamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: WebcamComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+WebcamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: WebcamComponent, selector: "onshore-webcam", inputs: { inverseColor: "inverseColor", imageQuality: "imageQuality", resizeToHeight: "resizeToHeight", resizeToWidth: "resizeToWidth", backgroundColor: "backgroundColor", format: "format", alignImage: "alignImage", containWithinAspectRatio: "containWithinAspectRatio", aspectRatio: "aspectRatio", cropperPreviewHeight: "cropperPreviewHeight", cropperPreviewWidth: "cropperPreviewWidth", circleCropper: "circleCropper" }, outputs: { shot: "shot", canceled: "canceled" }, ngImport: i0, template: "<div class=\"flex w-full justify-content-center align-items-center overflow-hidden p-2\" [class.onshore-inverse-color]=\"inverseColor\">\n  <webcam *ngIf=\"!image || image == ''\"\n          [mirrorImage]=\"'never'\"\n          [height]=\"400\"\n          [allowCameraSwitch]=\"true\"\n          [trigger]=\"triggerObservable\"\n          (imageCapture)=\"camImageShot($event)\">\n  </webcam>\n\n  <!--<div class=\"onshore-webcam-border position-absolute w-100 h-100\"></div>-->\n\n  <image-cropper *ngIf=\"image && image != ''\"\n    class=\"onshore-image-cropper m-3\"\n    [class.onshore-cropper-circle]=\"circleCropper\"\n    (imageCropped)=\"imageCropped($event)\"\n    [imageBase64]=\"image\"\n    [imageQuality]=\"imageQuality\"\n    [alignImage]=\"alignImage\"\n    [backgroundColor]=\"backgroundColor\"\n    [containWithinAspectRatio]=\"containWithinAspectRatio\"\n    [format]=\"format\"\n    [aspectRatio]=\"aspectRatio\"\n    [resizeToHeight]=\"resizeToHeight\"\n    [resizeToWidth]=\"resizeToWidth\">\n  </image-cropper>\n</div>\n\n<p-footer>\n  <div class=\"flex justify-content-end align-items-center mt-2\" [class.onshore-inverse-color]=\"inverseColor\">\n\n    <button pButton\n            type=\"button\"\n            icon=\"fa fa-times\"\n            [label]=\"'global.cancel' | translate\"\n            class=\"onshore-button-primary 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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i3$3.Footer, selector: "p-footer" }, { kind: "component", type: i4$1.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: i5$1.WebcamComponent, selector: "webcam", inputs: ["width", "height", "videoOptions", "allowCameraSwitch", "mirrorImage", "captureImageData", "imageType", "imageQuality", "trigger", "switchCamera"], outputs: ["imageCapture", "initError", "imageClick", "cameraSwitched"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: WebcamComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onshore-webcam', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex w-full justify-content-center align-items-center overflow-hidden p-2\" [class.onshore-inverse-color]=\"inverseColor\">\n  <webcam *ngIf=\"!image || image == ''\"\n          [mirrorImage]=\"'never'\"\n          [height]=\"400\"\n          [allowCameraSwitch]=\"true\"\n          [trigger]=\"triggerObservable\"\n          (imageCapture)=\"camImageShot($event)\">\n  </webcam>\n\n  <!--<div class=\"onshore-webcam-border position-absolute w-100 h-100\"></div>-->\n\n  <image-cropper *ngIf=\"image && image != ''\"\n    class=\"onshore-image-cropper m-3\"\n    [class.onshore-cropper-circle]=\"circleCropper\"\n    (imageCropped)=\"imageCropped($event)\"\n    [imageBase64]=\"image\"\n    [imageQuality]=\"imageQuality\"\n    [alignImage]=\"alignImage\"\n    [backgroundColor]=\"backgroundColor\"\n    [containWithinAspectRatio]=\"containWithinAspectRatio\"\n    [format]=\"format\"\n    [aspectRatio]=\"aspectRatio\"\n    [resizeToHeight]=\"resizeToHeight\"\n    [resizeToWidth]=\"resizeToWidth\">\n  </image-cropper>\n</div>\n\n<p-footer>\n  <div class=\"flex justify-content-end align-items-center mt-2\" [class.onshore-inverse-color]=\"inverseColor\">\n\n    <button pButton\n            type=\"button\"\n            icon=\"fa fa-times\"\n            [label]=\"'global.cancel' | translate\"\n            class=\"onshore-button-primary 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: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { inverseColor: [{
+                type: Input
+            }], imageQuality: [{
+                type: Input
+            }], resizeToHeight: [{
+                type: Input
+            }], resizeToWidth: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], alignImage: [{
+                type: Input
+            }], containWithinAspectRatio: [{
+                type: Input
+            }], aspectRatio: [{
+                type: Input
+            }], cropperPreviewHeight: [{
+                type: Input
+            }], cropperPreviewWidth: [{
+                type: Input
+            }], circleCropper: [{
+                type: Input
+            }], shot: [{
+                type: Output
+            }], canceled: [{
+                type: Output
+            }] } });
+
 class OnshoreFormImageItemComponent {
     constructor(cdr, ngControl, dialogService, translate) {
         this.cdr = cdr;
         this.ngControl = ngControl;
         this.dialogService = dialogService;
         this.translate = translate;
-        this.inverseColor = false;
-        // Image updload params
-        this.imageWidth = 400;
-        this.imageHeight = 400;
-        this.containWithinAspectRatio = false;
-        this.aspectRatio = 1 / 1;
-        this.disableImageSelection = false;
-        this.disableWebcamSelection = false;
-        this.disableMediaSelection = false;
-        this.disableDelete = false;
-        this.imagePlaceholder = '';
-        this.mediaType = '';
         this.imageDeleted = new EventEmitter();
         this.imageCleared = new EventEmitter();
-        this.imageSelectedFromMedia = new EventEmitter();
+        this.imageReady = new EventEmitter();
+        this.selectFromMedia = new EventEmitter();
+        this.isLoading = new EventEmitter();
+        this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
+        this.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'
+        };
         this.image = '';
         this.disabled = false;
         this.webcamDialogVisible = false;
@@ -497,6 +726,7 @@ class OnshoreFormImageItemComponent {
                 this.cdr.markForCheck();
                 (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.setValue(this.image);
                 (_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.markAsDirty();
+                this.imageReady.emit(this.image);
             }, 500);
         }
     }
@@ -509,27 +739,10 @@ class OnshoreFormImageItemComponent {
                 this.cdr.markForCheck();
                 (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.setValue(this.image);
                 (_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.markAsDirty();
+                this.imageReady.emit(this.image);
             }, 500);
         }
     }
-    /*searchMedia() {
-      this.dialogService.open(SearchMediaComponent,{
-        styleClass: 'p-dialog-background-white',
-        modal: true,
-        header: this.translate.instant('search.media.dialogTitle'),
-        data: { targetType: this.mediaType }
-      }).onClose.subscribe((result) => {
-        if(result) {
-          this.image = result.url;
-          setTimeout(() => {
-            this.cdr.markForCheck();
-            this.ngControl?.control?.setValue(this.image);
-            this.ngControl?.control?.markAsDirty();
-            this.imageSelectedFromMedia.next(result);
-          }, 500);
-        }
-      });
-    }*/
     removeImage() {
         var _a, _b, _c, _d;
         if (this.image && !this.image.includes('base64')) {
@@ -549,6 +762,7 @@ class OnshoreFormImageItemComponent {
         if (obj == null) {
             this.image = '';
         }
+        this.imageReady.emit(this.image);
         this.cdr.markForCheck();
     }
     registerOnChange(fn) {
@@ -563,59 +777,69 @@ class OnshoreFormImageItemComponent {
         this.cdr.markForCheck();
     }
     ngOnInit() {
-        if (this.ngControl.control.value == '' && this.formTemplate.default != undefined) {
-            this.ngControl.control.setValue(this.formTemplate.default);
+        var _a, _b, _c, _d;
+        if (((_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.value) == '' && this.formTemplate.default != undefined) {
+            (_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.setValue(this.formTemplate.default);
             this.cdr.markForCheck();
         }
     }
     ngOnDestroy() {
+        var _a, _b;
         this.subscriptions.forEach((subscription) => {
             subscription.unsubscribe();
         });
-        this.ngControl.control.disable();
+        (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.disable();
         this.image = null;
     }
+    ngOnChanges(changes) {
+        var _a;
+        const imageSettings = (_a = changes['imageSettings']) === null || _a === void 0 ? void 0 : _a.currentValue;
+        if (imageSettings) {
+            if (!imageSettings.imageWidth || !imageSettings.imageHeight) {
+                this.imageSettings.imageWidth = this.defaultImageSettings.imageWidth;
+                this.imageSettings.imageHeight = this.defaultImageSettings.imageHeight;
+            }
+            if (!imageSettings.placeholderIcon)
+                this.imageSettings.placeholderIcon = this.defaultImageSettings.placeholderIcon;
+            if (!imageSettings.aspectRatio)
+                this.imageSettings.aspectRatio = this.defaultImageSettings.aspectRatio;
+            if (!imageSettings.containWithinAspectRatio)
+                this.imageSettings.containWithinAspectRatio = this.defaultImageSettings.containWithinAspectRatio;
+            if (!imageSettings.imageSelectionEnabled)
+                this.imageSettings.imageSelectionEnabled = this.defaultImageSettings.imageSelectionEnabled;
+            if (!imageSettings.mediaSelectionEnabled)
+                this.imageSettings.mediaSelectionEnabled = this.defaultImageSettings.mediaSelectionEnabled;
+            if (!imageSettings.webcamSelectionEnabled)
+                this.imageSettings.webcamSelectionEnabled = this.defaultImageSettings.webcamSelectionEnabled;
+            if (!imageSettings.deleteEnabled)
+                this.imageSettings.deleteEnabled = this.defaultImageSettings.deleteEnabled;
+        }
+    }
 }
-OnshoreFormImageItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i2$3.DialogService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormImageItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormImageItemComponent, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", inverseColor: "inverseColor", imageWidth: "imageWidth", imageHeight: "imageHeight", containWithinAspectRatio: "containWithinAspectRatio", aspectRatio: "aspectRatio", disableImageSelection: "disableImageSelection", disableWebcamSelection: "disableWebcamSelection", disableMediaSelection: "disableMediaSelection", disableDelete: "disableDelete", imagePlaceholder: "imagePlaceholder", mediaType: "mediaType" }, outputs: { imageDeleted: "imageDeleted", imageCleared: "imageCleared", imageSelectedFromMedia: "imageSelectedFromMedia" }, ngImport: i0, template: "<div class=\"flex flex-column mb-3\" style=\"max-width: 500px\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <div class=\"w-100\">\n\n      <div class=\"position-relative flex justify-content-center align-items-center\" style=\"background-color: white\">\n        <!--<app-image-placeholder class=\"w-100\" [image]=\"image\" imageStyle=\"position: absolut; height: 250px; width: 250px\" [placeholder]=\"fimagePlaceholder ? imagePlaceholder + ' fa-10x' : 'fa-image fa-10x'\" placeholderStyle=\"width: 250px; height: 250px\"></app-image-placeholder>-->\n      </div>\n\n      <div class=\"flex flex-column mt-4 w-100\">\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"disableImageSelection\"\n                icon=\"fa fa-image\"\n                label=\"Bild hochladen\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"imageChooserDialogVisible = true\">\n        </button>\n\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"disableWebcamSelection\"\n                icon=\"fa fa-camera\"\n                label=\"Foto aufnehmen\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"webcamDialogVisible = true\">\n        </button>\n\n        <!--<button pButton pRipple type=\"button\"\n                [hidden]=\"disableMediaSelection\"\n                icon=\"fa fa-photo-video\"\n                label=\"Medienverwaltung\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"searchMedia()\">\n        </button>-->\n\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"disableDelete\"\n                icon=\"fa fa-eraser\"\n                label=\"Entfernen\"\n                (click)=\"removeImage()\"\n                [disabled]=\"!image || disabled\"\n                class=\"p-button-rounded p-button-outlined text-secondary\">\n        </button>\n\n      </div>\n\n  </div>\n\n  <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n</div>\n\n<!--\n<p-dialog [header]=\"'Bild ausw\u00E4hlen'\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <app-image-chooser buttonLabel=\"Ausw\u00E4hlen\"\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [inverseColor]=\"inverseColor\"\n                     [resizeToWidth]=\"imageWidth\"\n                     [resizeToHeight]=\"imageHeight\"\n                     [containWithinAspectRatio]=\"containWithinAspectRatio\"\n                     [aspectRatio]=\"aspectRatio\"\n                     backgroundColor=\"transparent\"></app-image-chooser>\n</p-dialog>\n-->\n\n<!--\n<p-dialog [header]=\"'Foto aufnehmen'\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <app-webcam *ngIf=\"webcamDialogVisible\" buttonLabel=\"Smile\" (shot)=\"getWebcamImage($event)\" (canceled)=\"webcamDialogVisible = false\" [inverseColor]=\"inverseColor\"></app-webcam>\n</p-dialog>\n-->\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i6.Ripple, selector: "[pRipple]" }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormImageItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i2$3.DialogService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+OnshoreFormImageItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormImageItemComponent, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", imageSettings: "imageSettings" }, 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 flex-wrap\">\n\n    <div class=\"position-relative flex justify-content-center align-items-center onshore-border-gray-4 border-solid border-1\" style=\"background-color: white\">\n      <onshore-image-placeholder\n        class=\"w-full\"\n        [image]=\"image\"\n        imageStyle=\"position: absolut; height: 250px; width: 250px\"\n        [placeholderIcon]=\"imageSettings.placeholderIcon\"\n        [placeholderImage]=\"imageSettings.placeholderImage\"\n        placeholderStyle=\"width: 250px; height: 250px\">\n      </onshore-image-placeholder>\n    </div>\n\n    <div class=\"flex flex-column m-4\">\n      <button pButton\n              type=\"button\"\n              [hidden]=\"!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              [hidden]=\"!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              [hidden]=\"!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              [hidden]=\"!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'}\">\n  <onshore-image-chooser\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [resizeToWidth]=\"imageSettings.imageWidth\"\n                     [resizeToHeight]=\"imageSettings.imageHeight\"\n                     [containWithinAspectRatio]=\"imageSettings.containWithinAspectRatio\"\n                     [aspectRatio]=\"imageSettings.aspectRatio\"\n                     backgroundColor=\"transparent\">\n  </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <onshore-webcam *ngIf=\"webcamDialogVisible\" (shot)=\"getWebcamImage($event)\" (canceled)=\"webcamDialogVisible = false\"></onshore-webcam>\n</p-dialog>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { 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", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: OnshoreImagePlaceholderComponent, selector: "onshore-image-placeholder", inputs: ["placeholderIcon", "placeholderImage", "image", "imageStyle", "placeholderStyle", "showLoader"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }, { kind: "component", type: OnshoreImageChooserComponent, selector: "onshore-image-chooser", inputs: ["imageQuality", "resizeToHeight", "resizeToWidth", "backgroundColor", "format", "alignImage", "containWithinAspectRatio", "aspectRatio", "cropperPreviewHeight", "cropperPreviewWidth", "circleCropper", "autoSave", "inverseColor"], outputs: ["choosen", "canceled"] }, { kind: "component", type: WebcamComponent, selector: "onshore-webcam", inputs: ["inverseColor", "imageQuality", "resizeToHeight", "resizeToWidth", "backgroundColor", "format", "alignImage", "containWithinAspectRatio", "aspectRatio", "cropperPreviewHeight", "cropperPreviewWidth", "circleCropper"], outputs: ["shot", "canceled"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-image-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\" style=\"max-width: 500px\">\n  <div class=\"flex justify-content-between align-items-center\">\n    <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n      {{formTemplate.label}}\n      <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n    </b>\n    <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n  </div>\n\n  <div class=\"w-100\">\n\n      <div class=\"position-relative flex justify-content-center align-items-center\" style=\"background-color: white\">\n        <!--<app-image-placeholder class=\"w-100\" [image]=\"image\" imageStyle=\"position: absolut; height: 250px; width: 250px\" [placeholder]=\"fimagePlaceholder ? imagePlaceholder + ' fa-10x' : 'fa-image fa-10x'\" placeholderStyle=\"width: 250px; height: 250px\"></app-image-placeholder>-->\n      </div>\n\n      <div class=\"flex flex-column mt-4 w-100\">\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"disableImageSelection\"\n                icon=\"fa fa-image\"\n                label=\"Bild hochladen\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"imageChooserDialogVisible = true\">\n        </button>\n\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"disableWebcamSelection\"\n                icon=\"fa fa-camera\"\n                label=\"Foto aufnehmen\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"webcamDialogVisible = true\">\n        </button>\n\n        <!--<button pButton pRipple type=\"button\"\n                [hidden]=\"disableMediaSelection\"\n                icon=\"fa fa-photo-video\"\n                label=\"Medienverwaltung\"\n                class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n                [disabled]=\"disabled\"\n                (click)=\"searchMedia()\">\n        </button>-->\n\n        <button pButton pRipple type=\"button\"\n                [hidden]=\"disableDelete\"\n                icon=\"fa fa-eraser\"\n                label=\"Entfernen\"\n                (click)=\"removeImage()\"\n                [disabled]=\"!image || disabled\"\n                class=\"p-button-rounded p-button-outlined text-secondary\">\n        </button>\n\n      </div>\n\n  </div>\n\n  <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n</div>\n\n<!--\n<p-dialog [header]=\"'Bild ausw\u00E4hlen'\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <app-image-chooser buttonLabel=\"Ausw\u00E4hlen\"\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [inverseColor]=\"inverseColor\"\n                     [resizeToWidth]=\"imageWidth\"\n                     [resizeToHeight]=\"imageHeight\"\n                     [containWithinAspectRatio]=\"containWithinAspectRatio\"\n                     [aspectRatio]=\"aspectRatio\"\n                     backgroundColor=\"transparent\"></app-image-chooser>\n</p-dialog>\n-->\n\n<!--\n<p-dialog [header]=\"'Foto aufnehmen'\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <app-webcam *ngIf=\"webcamDialogVisible\" buttonLabel=\"Smile\" (shot)=\"getWebcamImage($event)\" (canceled)=\"webcamDialogVisible = false\" [inverseColor]=\"inverseColor\"></app-webcam>\n</p-dialog>\n-->\n" }]
+            args: [{ selector: 'onshore-form-image-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <div class=\"w-full flex align-items-center flex-wrap\">\n\n    <div class=\"position-relative flex justify-content-center align-items-center onshore-border-gray-4 border-solid border-1\" style=\"background-color: white\">\n      <onshore-image-placeholder\n        class=\"w-full\"\n        [image]=\"image\"\n        imageStyle=\"position: absolut; height: 250px; width: 250px\"\n        [placeholderIcon]=\"imageSettings.placeholderIcon\"\n        [placeholderImage]=\"imageSettings.placeholderImage\"\n        placeholderStyle=\"width: 250px; height: 250px\">\n      </onshore-image-placeholder>\n    </div>\n\n    <div class=\"flex flex-column m-4\">\n      <button pButton\n              type=\"button\"\n              [hidden]=\"!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              [hidden]=\"!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              [hidden]=\"!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              [hidden]=\"!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'}\">\n  <onshore-image-chooser\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [resizeToWidth]=\"imageSettings.imageWidth\"\n                     [resizeToHeight]=\"imageSettings.imageHeight\"\n                     [containWithinAspectRatio]=\"imageSettings.containWithinAspectRatio\"\n                     [aspectRatio]=\"imageSettings.aspectRatio\"\n                     backgroundColor=\"transparent\">\n  </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n  <onshore-webcam *ngIf=\"webcamDialogVisible\" (shot)=\"getWebcamImage($event)\" (canceled)=\"webcamDialogVisible = false\"></onshore-webcam>\n</p-dialog>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
                         type: Self
                     }, {
                         type: Optional
-                    }] }, { type: i2$3.DialogService }, { type: i1.TranslateService }];
+                    }] }, { type: i2$3.DialogService }, { type: i3.TranslateService }];
     }, propDecorators: { formTemplate: [{
                 type: Input
-            }], inverseColor: [{
-                type: Input
-            }], imageWidth: [{
-                type: Input
-            }], imageHeight: [{
-                type: Input
-            }], containWithinAspectRatio: [{
-                type: Input
-            }], aspectRatio: [{
-                type: Input
-            }], disableImageSelection: [{
-                type: Input
-            }], disableWebcamSelection: [{
-                type: Input
-            }], disableMediaSelection: [{
-                type: Input
-            }], disableDelete: [{
-                type: Input
-            }], imagePlaceholder: [{
-                type: Input
-            }], mediaType: [{
+            }], imageSettings: [{
                 type: Input
             }], imageDeleted: [{
                 type: Output
             }], imageCleared: [{
                 type: Output
-            }], imageSelectedFromMedia: [{
+            }], imageReady: [{
+                type: Output
+            }], selectFromMedia: [{
+                type: Output
+            }], isLoading: [{
                 type: Output
             }] } });
 
@@ -657,7 +881,7 @@ class OnshoreFormDropdownItemComponent {
     }
 }
 OnshoreFormDropdownItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormDropdownItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormDropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormDropdownItemComponent, selector: "onshore-form-dropdown-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", showClear: "showClear" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <p-dropdown *ngIf=\"!multiple\"\n              class=\"w-full\"\n              [options]=\"formTemplate?.options\"\n              [formControl]=\"ngControl.control\"\n              [name]=\"formTemplate?.name\"\n              [placeholder]=\"formTemplate?.placeholder\"\n              [disabled]=\"disabled\"\n              [dataKey]=\"formTemplate?.optionDataKey\"\n              [showClear]=\"showClear && formTemplate?.placeholder\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n  </p-dropdown>\n\n  <p-multiSelect *ngIf=\"multiple\"\n                 class=\"w-full\"\n                 [options]=\"formTemplate?.options\"\n                 [formControl]=\"ngControl.control\"\n                 [name]=\"formTemplate?.name\"\n                 [placeholder]=\"formTemplate?.placeholder\"\n                 [disabled]=\"disabled\"\n                 [dataKey]=\"formTemplate?.optionDataKey\"\n                 [showClear]=\"showClear\"\n                 (onClear)=\"clearSelection()\"\n                 display=\"chip\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\"></p-multiSelect>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "itemSize", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$1.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormDropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormDropdownItemComponent, selector: "onshore-form-dropdown-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", showClear: "showClear" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <p-dropdown *ngIf=\"!multiple\"\n              class=\"w-full\"\n              [options]=\"formTemplate?.options\"\n              [formControl]=\"ngControl.control\"\n              [name]=\"formTemplate?.name\"\n              [placeholder]=\"formTemplate?.placeholder\"\n              [disabled]=\"disabled\"\n              [dataKey]=\"formTemplate?.optionDataKey\"\n              [showClear]=\"showClear && formTemplate?.placeholder\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n  </p-dropdown>\n\n  <p-multiSelect *ngIf=\"multiple\"\n                 class=\"w-full\"\n                 [options]=\"formTemplate?.options\"\n                 [formControl]=\"ngControl.control\"\n                 [name]=\"formTemplate?.name\"\n                 [placeholder]=\"formTemplate?.placeholder\"\n                 [disabled]=\"disabled\"\n                 [dataKey]=\"formTemplate?.optionDataKey\"\n                 [showClear]=\"showClear\"\n                 (onClear)=\"clearSelection()\"\n                 display=\"chip\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\"></p-multiSelect>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$4.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "itemSize", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$2.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormDropdownItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onshore-form-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <p-dropdown *ngIf=\"!multiple\"\n              class=\"w-full\"\n              [options]=\"formTemplate?.options\"\n              [formControl]=\"ngControl.control\"\n              [name]=\"formTemplate?.name\"\n              [placeholder]=\"formTemplate?.placeholder\"\n              [disabled]=\"disabled\"\n              [dataKey]=\"formTemplate?.optionDataKey\"\n              [showClear]=\"showClear && formTemplate?.placeholder\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n  </p-dropdown>\n\n  <p-multiSelect *ngIf=\"multiple\"\n                 class=\"w-full\"\n                 [options]=\"formTemplate?.options\"\n                 [formControl]=\"ngControl.control\"\n                 [name]=\"formTemplate?.name\"\n                 [placeholder]=\"formTemplate?.placeholder\"\n                 [disabled]=\"disabled\"\n                 [dataKey]=\"formTemplate?.optionDataKey\"\n                 [showClear]=\"showClear\"\n                 (onClear)=\"clearSelection()\"\n                 display=\"chip\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\"></p-multiSelect>\n</onshore-form-item-container>\n" }]
@@ -846,7 +1070,7 @@ class OnshoreFormAutocompleteItemComponent {
     }
 }
 OnshoreFormAutocompleteItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-OnshoreFormAutocompleteItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormAutocompleteItemComponent, selector: "onshore-form-autocomplete-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", searchedData: "searchedData" }, outputs: { onSearch: "onSearch", onSelect: "onSelect", onClear: "onClear" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n                  appendTo=\"body\"\n                  [formControl]=\"this.ngControl.control\"\n                  (onSelect)=\"selected($event)\"\n                  (onUnselect)=\"selected($event)\"\n                  (onClear)=\"searchClear()\"\n                  [suggestions]=\"searchedData\"\n                  (completeMethod)=\"searchPrepare($event)\"\n                  [disabled]=\"disabled\"\n                  [size]=\"30\"\n                  [minLength]=\"2\"\n                  [multiple]=\"multiple\"\n                  [delay]=\"1000\"\n                  [unique]=\"true\"\n                  field=\"firstLineLabel\"\n                  dataKey=\"data\"\n                  class=\"w-full\">\n    <ng-template let-item pTemplate=\"item\">\n      <div *ngIf=\"item.firstLineLabel\">\n        <span class=\"mr-1\">\n          <b>{{item.firstLineLabel}}</b><br>\n        </span>\n      </div>\n      <div *ngIf=\"item.secondLineLabel\"><span>{{item.secondLineLabel}} </span></div>\n      <div *ngIf=\"item.thirdLineLabel\"><span>{{item.thirdLineLabel}} </span></div>\n    </ng-template>\n  </p-autoComplete>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "itemSize", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OnshoreFormAutocompleteItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormAutocompleteItemComponent, selector: "onshore-form-autocomplete-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", searchedData: "searchedData" }, outputs: { onSearch: "onSearch", onSelect: "onSelect", onClear: "onClear" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n                  appendTo=\"body\"\n                  [formControl]=\"this.ngControl.control\"\n                  (onSelect)=\"selected($event)\"\n                  (onUnselect)=\"selected($event)\"\n                  (onClear)=\"searchClear()\"\n                  [suggestions]=\"searchedData\"\n                  (completeMethod)=\"searchPrepare($event)\"\n                  [disabled]=\"disabled\"\n                  [size]=\"30\"\n                  [minLength]=\"2\"\n                  [multiple]=\"multiple\"\n                  [delay]=\"1000\"\n                  [unique]=\"true\"\n                  field=\"firstLineLabel\"\n                  dataKey=\"data\"\n                  class=\"w-full\">\n    <ng-template let-item pTemplate=\"item\">\n      <div *ngIf=\"item.firstLineLabel\">\n        <span class=\"mr-1\">\n          <b>{{item.firstLineLabel}}</b><br>\n        </span>\n      </div>\n      <div *ngIf=\"item.secondLineLabel\"><span>{{item.secondLineLabel}} </span></div>\n      <div *ngIf=\"item.thirdLineLabel\"><span>{{item.thirdLineLabel}} </span></div>\n    </ng-template>\n  </p-autoComplete>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$5.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "itemSize", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onshore-form-autocomplete-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n  <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n                  appendTo=\"body\"\n                  [formControl]=\"this.ngControl.control\"\n                  (onSelect)=\"selected($event)\"\n                  (onUnselect)=\"selected($event)\"\n                  (onClear)=\"searchClear()\"\n                  [suggestions]=\"searchedData\"\n                  (completeMethod)=\"searchPrepare($event)\"\n                  [disabled]=\"disabled\"\n                  [size]=\"30\"\n                  [minLength]=\"2\"\n                  [multiple]=\"multiple\"\n                  [delay]=\"1000\"\n                  [unique]=\"true\"\n                  field=\"firstLineLabel\"\n                  dataKey=\"data\"\n                  class=\"w-full\">\n    <ng-template let-item pTemplate=\"item\">\n      <div *ngIf=\"item.firstLineLabel\">\n        <span class=\"mr-1\">\n          <b>{{item.firstLineLabel}}</b><br>\n        </span>\n      </div>\n      <div *ngIf=\"item.secondLineLabel\"><span>{{item.secondLineLabel}} </span></div>\n      <div *ngIf=\"item.thirdLineLabel\"><span>{{item.thirdLineLabel}} </span></div>\n    </ng-template>\n  </p-autoComplete>\n</onshore-form-item-container>\n" }]
@@ -925,6 +1149,7 @@ class OnshoreFormsModule {
 }
 OnshoreFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 OnshoreFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, declarations: [OnshoreFormsComponent,
+        OnshoreImagePlaceholderComponent,
         OnshoreFormInputItemComponent,
         OnshoreFormSwitchItemComponent,
         OnshoreFormValidationOutputComponent,
@@ -934,7 +1159,9 @@ OnshoreFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         OnshoreFormCheckboxItemComponent,
         OnshoreFormAutocompleteItemComponent,
         OnshoreFormItemContainer,
-        OnshoreFormDatetimeItemComponent], imports: [CommonModule,
+        OnshoreFormDatetimeItemComponent,
+        OnshoreImageChooserComponent,
+        WebcamComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         ButtonModule,
@@ -953,7 +1180,10 @@ OnshoreFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         SelectButtonModule,
         ToggleButtonModule,
         CalendarModule,
-        TranslateModule], exports: [OnshoreFormsComponent,
+        TranslateModule,
+        ImageCropperModule,
+        WebcamModule], exports: [OnshoreFormsComponent,
+        OnshoreImagePlaceholderComponent,
         OnshoreFormInputItemComponent,
         OnshoreFormSwitchItemComponent,
         OnshoreFormValidationOutputComponent,
@@ -963,9 +1193,12 @@ OnshoreFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         OnshoreFormCheckboxItemComponent,
         OnshoreFormAutocompleteItemComponent,
         OnshoreFormItemContainer,
-        OnshoreFormDatetimeItemComponent] });
+        OnshoreFormDatetimeItemComponent,
+        OnshoreImageChooserComponent,
+        WebcamComponent] });
 OnshoreFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, providers: [
-        OnshoreFormsService
+        OnshoreFormsService,
+        DialogService
     ], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -985,12 +1218,15 @@ OnshoreFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
         SelectButtonModule,
         ToggleButtonModule,
         CalendarModule,
-        TranslateModule] });
+        TranslateModule,
+        ImageCropperModule,
+        WebcamModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         OnshoreFormsComponent,
+                        OnshoreImagePlaceholderComponent,
                         OnshoreFormInputItemComponent,
                         OnshoreFormSwitchItemComponent,
                         OnshoreFormValidationOutputComponent,
@@ -1000,7 +1236,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                         OnshoreFormCheckboxItemComponent,
                         OnshoreFormAutocompleteItemComponent,
                         OnshoreFormItemContainer,
-                        OnshoreFormDatetimeItemComponent
+                        OnshoreFormDatetimeItemComponent,
+                        OnshoreImageChooserComponent,
+                        WebcamComponent
                     ],
                     imports: [
                         CommonModule,
@@ -1022,10 +1260,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                         SelectButtonModule,
                         ToggleButtonModule,
                         CalendarModule,
-                        TranslateModule
+                        TranslateModule,
+                        ImageCropperModule,
+                        WebcamModule
                     ],
                     exports: [
                         OnshoreFormsComponent,
+                        OnshoreImagePlaceholderComponent,
                         OnshoreFormInputItemComponent,
                         OnshoreFormSwitchItemComponent,
                         OnshoreFormValidationOutputComponent,
@@ -1035,10 +1276,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                         OnshoreFormCheckboxItemComponent,
                         OnshoreFormAutocompleteItemComponent,
                         OnshoreFormItemContainer,
-                        OnshoreFormDatetimeItemComponent
+                        OnshoreFormDatetimeItemComponent,
+                        OnshoreImageChooserComponent,
+                        WebcamComponent
                     ],
                     providers: [
-                        OnshoreFormsService
+                        OnshoreFormsService,
+                        DialogService
                     ]
                 }]
         }] });
@@ -1046,7 +1290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
 class OnshoreValidators {
 }
 OnshoreValidators.slug = (control) => {
-    return /^[a-zA-Z0-9_.+-].{1,}/.test(control.value) ? null : { slug: true };
+    return /^[A-Za-z0-9\._-]{2,20}$/.test(control.value) ? null : { slug: true };
 };
 OnshoreValidators.numeric = (control) => {
     return /^[0-9]*$/.test(control.value) ? null : { numeric: true };
@@ -1066,5 +1310,5 @@ OnshoreValidators.cleanComment = (control) => {
  * Generated bundle index. Do not edit.
  */
 
-export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDatetimeItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormItemContainer, OnshoreFormSwitchItemComponent, OnshoreFormTemplateLayout, OnshoreFormTemplateType, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsModule, OnshoreFormsService, OnshoreImageError, OnshoreValidators };
+export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDatetimeItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormItemContainer, OnshoreFormSwitchItemComponent, OnshoreFormTemplateLayout, OnshoreFormTemplateType, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsModule, OnshoreFormsService, OnshoreImageChooserComponent, OnshoreImageError, OnshoreImagePlaceholderComponent, OnshoreValidators, WebcamComponent };
 //# sourceMappingURL=onshore-forms.mjs.map