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.
@@ -196,6 +196,16 @@ class OnshoreFormsService {
196
196
  }));
197
197
  });
198
198
  }
199
+ lock() {
200
+ this._formTemplate.forEach((item) => {
201
+ item.locked = true;
202
+ });
203
+ }
204
+ unlock() {
205
+ this._formTemplate.forEach((item) => {
206
+ item.locked = false;
207
+ });
208
+ }
199
209
  iterateNestedForm(form, formTemplate) {
200
210
  formTemplate.forEach((item) => {
201
211
  if (item.type === OnshoreFormTemplateType.subform) {
@@ -467,7 +477,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
467
477
 
468
478
  class OnshoreImagePlaceholderComponent {
469
479
  constructor() {
470
- this.placeholder = '';
480
+ this.placeholderIcon = '';
481
+ this.placeholderImage = '';
471
482
  this.image = '';
472
483
  this.imageStyle = '';
473
484
  this.placeholderStyle = '';
@@ -484,11 +495,13 @@ class OnshoreImagePlaceholderComponent {
484
495
  }
485
496
  }
486
497
  OnshoreImagePlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImagePlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
487
- 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 });
498
+ 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 });
488
499
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImagePlaceholderComponent, decorators: [{
489
500
  type: Component,
490
- 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" }]
491
- }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
501
+ 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" }]
502
+ }], ctorParameters: function () { return []; }, propDecorators: { placeholderIcon: [{
503
+ type: Input
504
+ }], placeholderImage: [{
492
505
  type: Input
493
506
  }], image: [{
494
507
  type: Input
@@ -689,22 +702,24 @@ class OnshoreFormImageItemComponent {
689
702
  this.ngControl = ngControl;
690
703
  this.dialogService = dialogService;
691
704
  this.translate = translate;
692
- // Image updload params
693
- this.imageWidth = 400;
694
- this.imageHeight = 400;
695
- this.containWithinAspectRatio = false;
696
- this.aspectRatio = 1 / 1;
697
- this.disableImageSelection = false;
698
- this.disableWebcamSelection = false;
699
- this.disableMediaSelection = false;
700
- this.disableDelete = false;
701
- this.imagePlaceholder = '';
702
- this.mediaType = '';
703
705
  this.imageDeleted = new EventEmitter();
704
706
  this.imageCleared = new EventEmitter();
707
+ this.imageReady = new EventEmitter();
705
708
  this.selectFromMedia = new EventEmitter();
706
- //Output() imageSelectedFromMedia: EventEmitter<any> = new EventEmitter();
709
+ this.isLoading = new EventEmitter();
707
710
  this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
711
+ this.defaultImageSettings = {
712
+ imageWidth: 400,
713
+ imageHeight: 400,
714
+ containWithinAspectRatio: false,
715
+ aspectRatio: 1 / 1,
716
+ imageSelectionEnabled: true,
717
+ webcamSelectionEnabled: true,
718
+ mediaSelectionEnabled: true,
719
+ deleteEnabled: true,
720
+ placeholderImage: '',
721
+ placeholderIcon: 'fa fa-image fa-10x'
722
+ };
708
723
  this.image = '';
709
724
  this.disabled = false;
710
725
  this.webcamDialogVisible = false;
@@ -721,6 +736,7 @@ class OnshoreFormImageItemComponent {
721
736
  this.cdr.markForCheck();
722
737
  (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.setValue(this.image);
723
738
  (_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.markAsDirty();
739
+ this.imageReady.emit(this.image);
724
740
  }, 500);
725
741
  }
726
742
  }
@@ -733,6 +749,7 @@ class OnshoreFormImageItemComponent {
733
749
  this.cdr.markForCheck();
734
750
  (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.setValue(this.image);
735
751
  (_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.markAsDirty();
752
+ this.imageReady.emit(this.image);
736
753
  }, 500);
737
754
  }
738
755
  }
@@ -755,6 +772,7 @@ class OnshoreFormImageItemComponent {
755
772
  if (obj == null) {
756
773
  this.image = '';
757
774
  }
775
+ this.imageReady.emit(this.image);
758
776
  this.cdr.markForCheck();
759
777
  }
760
778
  registerOnChange(fn) {
@@ -783,12 +801,36 @@ class OnshoreFormImageItemComponent {
783
801
  (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.disable();
784
802
  this.image = null;
785
803
  }
804
+ ngOnChanges(changes) {
805
+ var _a;
806
+ const imageSettings = (_a = changes['imageSettings']) === null || _a === void 0 ? void 0 : _a.currentValue;
807
+ if (imageSettings) {
808
+ if (!imageSettings.imageWidth || !imageSettings.imageHeight) {
809
+ this.imageSettings.imageWidth = this.defaultImageSettings.imageWidth;
810
+ this.imageSettings.imageHeight = this.defaultImageSettings.imageHeight;
811
+ }
812
+ if (!imageSettings.placeholderIcon && !imageSettings.placeholderImage)
813
+ this.imageSettings.placeholderIcon = this.defaultImageSettings.placeholderIcon;
814
+ if (!imageSettings.aspectRatio)
815
+ this.imageSettings.aspectRatio = this.defaultImageSettings.aspectRatio;
816
+ if (!imageSettings.containWithinAspectRatio)
817
+ this.imageSettings.containWithinAspectRatio = this.defaultImageSettings.containWithinAspectRatio;
818
+ if (!imageSettings.imageSelectionEnabled)
819
+ this.imageSettings.imageSelectionEnabled = this.defaultImageSettings.imageSelectionEnabled;
820
+ if (!imageSettings.mediaSelectionEnabled)
821
+ this.imageSettings.mediaSelectionEnabled = this.defaultImageSettings.mediaSelectionEnabled;
822
+ if (!imageSettings.webcamSelectionEnabled)
823
+ this.imageSettings.webcamSelectionEnabled = this.defaultImageSettings.webcamSelectionEnabled;
824
+ if (!imageSettings.deleteEnabled)
825
+ this.imageSettings.deleteEnabled = this.defaultImageSettings.deleteEnabled;
826
+ }
827
+ }
786
828
  }
787
829
  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 });
788
- 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 });
830
+ 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 });
789
831
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
790
832
  type: Component,
791
- 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" }]
833
+ 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" }]
792
834
  }], ctorParameters: function () {
793
835
  return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
794
836
  type: Self
@@ -797,32 +839,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
797
839
  }] }, { type: i2$3.DialogService }, { type: i3.TranslateService }];
798
840
  }, propDecorators: { formTemplate: [{
799
841
  type: Input
800
- }], imageWidth: [{
801
- type: Input
802
- }], imageHeight: [{
803
- type: Input
804
- }], containWithinAspectRatio: [{
805
- type: Input
806
- }], aspectRatio: [{
807
- type: Input
808
- }], disableImageSelection: [{
809
- type: Input
810
- }], disableWebcamSelection: [{
811
- type: Input
812
- }], disableMediaSelection: [{
813
- type: Input
814
- }], disableDelete: [{
815
- type: Input
816
- }], imagePlaceholder: [{
817
- type: Input
818
- }], mediaType: [{
842
+ }], imageSettings: [{
819
843
  type: Input
820
844
  }], imageDeleted: [{
821
845
  type: Output
822
846
  }], imageCleared: [{
823
847
  type: Output
848
+ }], imageReady: [{
849
+ type: Output
824
850
  }], selectFromMedia: [{
825
851
  type: Output
852
+ }], isLoading: [{
853
+ type: Output
826
854
  }] } });
827
855
 
828
856
  class OnshoreFormDropdownItemComponent {
@@ -1272,7 +1300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
1272
1300
  class OnshoreValidators {
1273
1301
  }
1274
1302
  OnshoreValidators.slug = (control) => {
1275
- return /^[a-zA-Z0-9_.+-].{1,}/.test(control.value) ? null : { slug: true };
1303
+ return /^[A-Za-z0-9\._-]{2,20}$/.test(control.value) ? null : { slug: true };
1276
1304
  };
1277
1305
  OnshoreValidators.numeric = (control) => {
1278
1306
  return /^[0-9]*$/.test(control.value) ? null : { numeric: true };