onshore-forms 0.0.14 → 0.0.15

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.
@@ -445,7 +445,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
445
445
 
446
446
  class OnshoreImagePlaceholderComponent {
447
447
  constructor() {
448
- this.placeholder = '';
448
+ this.placeholderIcon = '';
449
+ this.placeholderImage = '';
449
450
  this.image = '';
450
451
  this.imageStyle = '';
451
452
  this.placeholderStyle = '';
@@ -462,11 +463,13 @@ class OnshoreImagePlaceholderComponent {
462
463
  }
463
464
  }
464
465
  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 });
466
+ 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
467
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImagePlaceholderComponent, decorators: [{
467
468
  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: [{
469
+ 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" }]
470
+ }], ctorParameters: function () { return []; }, propDecorators: { placeholderIcon: [{
471
+ type: Input
472
+ }], placeholderImage: [{
470
473
  type: Input
471
474
  }], image: [{
472
475
  type: Input
@@ -666,22 +669,24 @@ class OnshoreFormImageItemComponent {
666
669
  this.ngControl = ngControl;
667
670
  this.dialogService = dialogService;
668
671
  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
672
  this.imageDeleted = new EventEmitter();
681
673
  this.imageCleared = new EventEmitter();
674
+ this.imageReady = new EventEmitter();
682
675
  this.selectFromMedia = new EventEmitter();
683
- //Output() imageSelectedFromMedia: EventEmitter<any> = new EventEmitter();
676
+ this.isLoading = new EventEmitter();
684
677
  this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
678
+ this.defaultImageSettings = {
679
+ imageWidth: 400,
680
+ imageHeight: 400,
681
+ containWithinAspectRatio: false,
682
+ aspectRatio: 1 / 1,
683
+ imageSelectionEnabled: true,
684
+ webcamSelectionEnabled: true,
685
+ mediaSelectionEnabled: true,
686
+ deleteEnabled: true,
687
+ placeholderImage: '',
688
+ placeholderIcon: 'fa fa-image fa-10x'
689
+ };
685
690
  this.image = '';
686
691
  this.disabled = false;
687
692
  this.webcamDialogVisible = false;
@@ -697,6 +702,7 @@ class OnshoreFormImageItemComponent {
697
702
  this.cdr.markForCheck();
698
703
  this.ngControl?.control?.setValue(this.image);
699
704
  this.ngControl?.control?.markAsDirty();
705
+ this.imageReady.emit(this.image);
700
706
  }, 500);
701
707
  }
702
708
  }
@@ -708,6 +714,7 @@ class OnshoreFormImageItemComponent {
708
714
  this.cdr.markForCheck();
709
715
  this.ngControl?.control?.setValue(this.image);
710
716
  this.ngControl?.control?.markAsDirty();
717
+ this.imageReady.emit(this.image);
711
718
  }, 500);
712
719
  }
713
720
  }
@@ -729,6 +736,7 @@ class OnshoreFormImageItemComponent {
729
736
  if (obj == null) {
730
737
  this.image = '';
731
738
  }
739
+ this.imageReady.emit(this.image);
732
740
  this.cdr.markForCheck();
733
741
  }
734
742
  registerOnChange(fn) {
@@ -755,44 +763,53 @@ class OnshoreFormImageItemComponent {
755
763
  this.ngControl?.control?.disable();
756
764
  this.image = null;
757
765
  }
766
+ ngOnChanges(changes) {
767
+ const imageSettings = changes['imageSettings']?.currentValue;
768
+ if (imageSettings) {
769
+ if (!imageSettings.imageWidth || !imageSettings.imageHeight) {
770
+ this.imageSettings.imageWidth = this.defaultImageSettings.imageWidth;
771
+ this.imageSettings.imageHeight = this.defaultImageSettings.imageHeight;
772
+ }
773
+ if (!imageSettings.placeholderIcon)
774
+ this.imageSettings.placeholderIcon = this.defaultImageSettings.placeholderIcon;
775
+ if (!imageSettings.aspectRatio)
776
+ this.imageSettings.aspectRatio = this.defaultImageSettings.aspectRatio;
777
+ if (!imageSettings.containWithinAspectRatio)
778
+ this.imageSettings.containWithinAspectRatio = this.defaultImageSettings.containWithinAspectRatio;
779
+ if (!imageSettings.imageSelectionEnabled)
780
+ this.imageSettings.imageSelectionEnabled = this.defaultImageSettings.imageSelectionEnabled;
781
+ if (!imageSettings.mediaSelectionEnabled)
782
+ this.imageSettings.mediaSelectionEnabled = this.defaultImageSettings.mediaSelectionEnabled;
783
+ if (!imageSettings.webcamSelectionEnabled)
784
+ this.imageSettings.webcamSelectionEnabled = this.defaultImageSettings.webcamSelectionEnabled;
785
+ if (!imageSettings.deleteEnabled)
786
+ this.imageSettings.deleteEnabled = this.defaultImageSettings.deleteEnabled;
787
+ }
788
+ }
758
789
  }
759
790
  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 });
791
+ 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
792
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
762
793
  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" }]
794
+ 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
795
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
765
796
  type: Self
766
797
  }, {
767
798
  type: Optional
768
799
  }] }, { type: i2$3.DialogService }, { type: i3.TranslateService }]; }, propDecorators: { formTemplate: [{
769
800
  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: [{
801
+ }], imageSettings: [{
789
802
  type: Input
790
803
  }], imageDeleted: [{
791
804
  type: Output
792
805
  }], imageCleared: [{
793
806
  type: Output
807
+ }], imageReady: [{
808
+ type: Output
794
809
  }], selectFromMedia: [{
795
810
  type: Output
811
+ }], isLoading: [{
812
+ type: Output
796
813
  }] } });
797
814
 
798
815
  class OnshoreFormDropdownItemComponent {
@@ -1215,7 +1232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
1215
1232
  class OnshoreValidators {
1216
1233
  }
1217
1234
  OnshoreValidators.slug = (control) => {
1218
- return /^[a-zA-Z0-9_.+-].{1,}/.test(control.value) ? null : { slug: true };
1235
+ return /^[A-Za-z0-9\._-]{2,20}$/.test(control.value) ? null : { slug: true };
1219
1236
  };
1220
1237
  OnshoreValidators.numeric = (control) => {
1221
1238
  return /^[0-9]*$/.test(control.value) ? null : { numeric: true };