onshore-forms 0.0.14 → 0.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -187,6 +187,16 @@ class OnshoreFormsService {
187
187
  }));
188
188
  });
189
189
  }
190
+ lock() {
191
+ this._formTemplate.forEach((item) => {
192
+ item.locked = true;
193
+ });
194
+ }
195
+ unlock() {
196
+ this._formTemplate.forEach((item) => {
197
+ item.locked = false;
198
+ });
199
+ }
190
200
  iterateNestedForm(form, formTemplate) {
191
201
  formTemplate.forEach((item) => {
192
202
  if (item.type === OnshoreFormTemplateType.subform) {
@@ -445,7 +455,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
445
455
 
446
456
  class OnshoreImagePlaceholderComponent {
447
457
  constructor() {
448
- this.placeholder = '';
458
+ this.placeholderIcon = '';
459
+ this.placeholderImage = '';
449
460
  this.image = '';
450
461
  this.imageStyle = '';
451
462
  this.placeholderStyle = '';
@@ -462,11 +473,13 @@ class OnshoreImagePlaceholderComponent {
462
473
  }
463
474
  }
464
475
  OnshoreImagePlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImagePlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
465
- OnshoreImagePlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreImagePlaceholderComponent, selector: "onshore-image-placeholder", inputs: { placeholder: "placeholder", image: "image", imageStyle: "imageStyle", placeholderStyle: "placeholderStyle", showLoader: "showLoader" }, ngImport: i0, template: "<div class=\"w-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 p-2 onshore-background-color-gray-2\" [style]=\"placeholderStyle\">\n <i [class]=\"'text-muted fa ' + placeholder\" [class.opacity-20]=\"showLoader && image\"></i>\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 });
476
+ 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 });
466
477
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImagePlaceholderComponent, decorators: [{
467
478
  type: Component,
468
- args: [{ selector: 'onshore-image-placeholder', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-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 p-2 onshore-background-color-gray-2\" [style]=\"placeholderStyle\">\n <i [class]=\"'text-muted fa ' + placeholder\" [class.opacity-20]=\"showLoader && image\"></i>\n <i *ngIf=\"showLoader && image\" class=\"fas fa-circle-notch fa-spin fa-2x absolute\"></i>\n</div>\n" }]
469
- }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
479
+ 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" }]
480
+ }], ctorParameters: function () { return []; }, propDecorators: { placeholderIcon: [{
481
+ type: Input
482
+ }], placeholderImage: [{
470
483
  type: Input
471
484
  }], image: [{
472
485
  type: Input
@@ -666,22 +679,24 @@ class OnshoreFormImageItemComponent {
666
679
  this.ngControl = ngControl;
667
680
  this.dialogService = dialogService;
668
681
  this.translate = translate;
669
- // Image updload params
670
- this.imageWidth = 400;
671
- this.imageHeight = 400;
672
- this.containWithinAspectRatio = false;
673
- this.aspectRatio = 1 / 1;
674
- this.disableImageSelection = false;
675
- this.disableWebcamSelection = false;
676
- this.disableMediaSelection = false;
677
- this.disableDelete = false;
678
- this.imagePlaceholder = '';
679
- this.mediaType = '';
680
682
  this.imageDeleted = new EventEmitter();
681
683
  this.imageCleared = new EventEmitter();
684
+ this.imageReady = new EventEmitter();
682
685
  this.selectFromMedia = new EventEmitter();
683
- //Output() imageSelectedFromMedia: EventEmitter<any> = new EventEmitter();
686
+ this.isLoading = new EventEmitter();
684
687
  this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
688
+ this.defaultImageSettings = {
689
+ imageWidth: 400,
690
+ imageHeight: 400,
691
+ containWithinAspectRatio: false,
692
+ aspectRatio: 1 / 1,
693
+ imageSelectionEnabled: true,
694
+ webcamSelectionEnabled: true,
695
+ mediaSelectionEnabled: true,
696
+ deleteEnabled: true,
697
+ placeholderImage: '',
698
+ placeholderIcon: 'fa fa-image fa-10x'
699
+ };
685
700
  this.image = '';
686
701
  this.disabled = false;
687
702
  this.webcamDialogVisible = false;
@@ -697,6 +712,7 @@ class OnshoreFormImageItemComponent {
697
712
  this.cdr.markForCheck();
698
713
  this.ngControl?.control?.setValue(this.image);
699
714
  this.ngControl?.control?.markAsDirty();
715
+ this.imageReady.emit(this.image);
700
716
  }, 500);
701
717
  }
702
718
  }
@@ -708,6 +724,7 @@ class OnshoreFormImageItemComponent {
708
724
  this.cdr.markForCheck();
709
725
  this.ngControl?.control?.setValue(this.image);
710
726
  this.ngControl?.control?.markAsDirty();
727
+ this.imageReady.emit(this.image);
711
728
  }, 500);
712
729
  }
713
730
  }
@@ -729,6 +746,7 @@ class OnshoreFormImageItemComponent {
729
746
  if (obj == null) {
730
747
  this.image = '';
731
748
  }
749
+ this.imageReady.emit(this.image);
732
750
  this.cdr.markForCheck();
733
751
  }
734
752
  registerOnChange(fn) {
@@ -755,44 +773,53 @@ class OnshoreFormImageItemComponent {
755
773
  this.ngControl?.control?.disable();
756
774
  this.image = null;
757
775
  }
776
+ ngOnChanges(changes) {
777
+ const imageSettings = changes['imageSettings']?.currentValue;
778
+ if (imageSettings) {
779
+ if (!imageSettings.imageWidth || !imageSettings.imageHeight) {
780
+ this.imageSettings.imageWidth = this.defaultImageSettings.imageWidth;
781
+ this.imageSettings.imageHeight = this.defaultImageSettings.imageHeight;
782
+ }
783
+ if (!imageSettings.placeholderIcon && !imageSettings.placeholderImage)
784
+ this.imageSettings.placeholderIcon = this.defaultImageSettings.placeholderIcon;
785
+ if (!imageSettings.aspectRatio)
786
+ this.imageSettings.aspectRatio = this.defaultImageSettings.aspectRatio;
787
+ if (!imageSettings.containWithinAspectRatio)
788
+ this.imageSettings.containWithinAspectRatio = this.defaultImageSettings.containWithinAspectRatio;
789
+ if (!imageSettings.imageSelectionEnabled)
790
+ this.imageSettings.imageSelectionEnabled = this.defaultImageSettings.imageSelectionEnabled;
791
+ if (!imageSettings.mediaSelectionEnabled)
792
+ this.imageSettings.mediaSelectionEnabled = this.defaultImageSettings.mediaSelectionEnabled;
793
+ if (!imageSettings.webcamSelectionEnabled)
794
+ this.imageSettings.webcamSelectionEnabled = this.defaultImageSettings.webcamSelectionEnabled;
795
+ if (!imageSettings.deleteEnabled)
796
+ this.imageSettings.deleteEnabled = this.defaultImageSettings.deleteEnabled;
797
+ }
798
+ }
758
799
  }
759
800
  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 });
760
- OnshoreFormImageItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormImageItemComponent, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", 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", selectFromMedia: "selectFromMedia" }, 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 [placeholder]=\"imagePlaceholder ? imagePlaceholder + ' fa-10x' : 'fa-image fa-10x'\"\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]=\"disableImageSelection\"\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]=\"disableWebcamSelection\"\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]=\"disableMediaSelection\"\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]=\"disableDelete\"\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]=\"imageWidth\"\n [resizeToHeight]=\"imageHeight\"\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\n [aspectRatio]=\"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: ["placeholder", "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 });
801
+ 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 });
761
802
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
762
803
  type: Component,
763
- 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 [placeholder]=\"imagePlaceholder ? imagePlaceholder + ' fa-10x' : 'fa-image fa-10x'\"\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]=\"disableImageSelection\"\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]=\"disableWebcamSelection\"\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]=\"disableMediaSelection\"\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]=\"disableDelete\"\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]=\"imageWidth\"\n [resizeToHeight]=\"imageHeight\"\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\n [aspectRatio]=\"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" }]
804
+ 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" }]
764
805
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
765
806
  type: Self
766
807
  }, {
767
808
  type: Optional
768
809
  }] }, { type: i2$3.DialogService }, { type: i3.TranslateService }]; }, propDecorators: { formTemplate: [{
769
810
  type: Input
770
- }], imageWidth: [{
771
- type: Input
772
- }], imageHeight: [{
773
- type: Input
774
- }], containWithinAspectRatio: [{
775
- type: Input
776
- }], aspectRatio: [{
777
- type: Input
778
- }], disableImageSelection: [{
779
- type: Input
780
- }], disableWebcamSelection: [{
781
- type: Input
782
- }], disableMediaSelection: [{
783
- type: Input
784
- }], disableDelete: [{
785
- type: Input
786
- }], imagePlaceholder: [{
787
- type: Input
788
- }], mediaType: [{
811
+ }], imageSettings: [{
789
812
  type: Input
790
813
  }], imageDeleted: [{
791
814
  type: Output
792
815
  }], imageCleared: [{
793
816
  type: Output
817
+ }], imageReady: [{
818
+ type: Output
794
819
  }], selectFromMedia: [{
795
820
  type: Output
821
+ }], isLoading: [{
822
+ type: Output
796
823
  }] } });
797
824
 
798
825
  class OnshoreFormDropdownItemComponent {
@@ -1215,7 +1242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
1215
1242
  class OnshoreValidators {
1216
1243
  }
1217
1244
  OnshoreValidators.slug = (control) => {
1218
- return /^[a-zA-Z0-9_.+-].{1,}/.test(control.value) ? null : { slug: true };
1245
+ return /^[A-Za-z0-9\._-]{2,20}$/.test(control.value) ? null : { slug: true };
1219
1246
  };
1220
1247
  OnshoreValidators.numeric = (control) => {
1221
1248
  return /^[0-9]*$/.test(control.value) ? null : { numeric: true };