onshore-forms 0.0.24 → 0.0.25
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.
- package/esm2020/lib/components/form-image-item/form-image-item.component.mjs +48 -8
- package/esm2020/lib/components/image-chooser/image-chooser.component.mjs +6 -43
- package/esm2020/lib/components/webcam/webcam.component.mjs +4 -38
- package/esm2020/lib/models/form.models.mjs +1 -1
- package/fesm2015/onshore-forms.mjs +54 -86
- package/fesm2015/onshore-forms.mjs.map +1 -1
- package/fesm2020/onshore-forms.mjs +54 -86
- package/fesm2020/onshore-forms.mjs.map +1 -1
- package/lib/components/form-image-item/form-image-item.component.d.ts +2 -0
- package/lib/components/image-chooser/image-chooser.component.d.ts +3 -14
- package/lib/components/webcam/webcam.component.d.ts +3 -13
- package/lib/models/form.models.d.ts +12 -0
- package/package.json +1 -1
- package/styles/scss/main.css +1 -1
- package/styles/scss/theme1.css +1 -1
|
@@ -560,19 +560,6 @@ class OnshoreImageChooserComponent {
|
|
|
560
560
|
this.finalImage = '';
|
|
561
561
|
this.imageErrorType = OnshoreImageError;
|
|
562
562
|
this.imageError = OnshoreImageError.none;
|
|
563
|
-
this.imageQuality = 100;
|
|
564
|
-
this.resizeToHeight = 400;
|
|
565
|
-
this.resizeToWidth = 400;
|
|
566
|
-
this.backgroundColor = 'white';
|
|
567
|
-
this.format = 'png';
|
|
568
|
-
this.alignImage = 'center';
|
|
569
|
-
this.containWithinAspectRatio = false;
|
|
570
|
-
this.aspectRatio = 1 / 1;
|
|
571
|
-
this.cropperPreviewHeight = 200;
|
|
572
|
-
this.cropperPreviewWidth = 200;
|
|
573
|
-
this.circleCropper = false;
|
|
574
|
-
this.autoSave = true;
|
|
575
|
-
this.inverseColor = false;
|
|
576
563
|
this.choosen = new EventEmitter();
|
|
577
564
|
this.canceled = new EventEmitter();
|
|
578
565
|
}
|
|
@@ -589,7 +576,7 @@ class OnshoreImageChooserComponent {
|
|
|
589
576
|
this.imageError = OnshoreImageError.fileType;
|
|
590
577
|
return;
|
|
591
578
|
}
|
|
592
|
-
if (file?.size >
|
|
579
|
+
if (file?.size > this.imageSettings.maxFileSize) {
|
|
593
580
|
this.imageError = OnshoreImageError.size;
|
|
594
581
|
return;
|
|
595
582
|
}
|
|
@@ -602,7 +589,7 @@ class OnshoreImageChooserComponent {
|
|
|
602
589
|
img.onload = () => {
|
|
603
590
|
const originalWidth = img.width;
|
|
604
591
|
const originalHeight = img.height;
|
|
605
|
-
if (originalWidth >= this.
|
|
592
|
+
if (originalWidth >= this.imageSettings.imageWidth && originalHeight >= this.imageSettings.imageHeight) {
|
|
606
593
|
this.image = reader.result?.toString() || '';
|
|
607
594
|
}
|
|
608
595
|
else {
|
|
@@ -624,35 +611,11 @@ class OnshoreImageChooserComponent {
|
|
|
624
611
|
}
|
|
625
612
|
}
|
|
626
613
|
OnshoreImageChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImageChooserComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
627
|
-
OnshoreImageChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreImageChooserComponent, selector: "onshore-image-chooser", inputs: {
|
|
614
|
+
OnshoreImageChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreImageChooserComponent, selector: "onshore-image-chooser", inputs: { imageSettings: "imageSettings" }, outputs: { choosen: "choosen", canceled: "canceled" }, ngImport: i0, template: "<div class=\"flex flex-column justify-content-center align-items-center w-full\">\n\n <div *ngIf=\"!image\" class=\"flex justify-content-center flex-column align-items-center w-full\">\n <!--<div 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 <image-cropper\n class=\"m-3\" [style]=\"'height: ' + imageSettings.cropperPreviewHeight + 'px; width: ' + imageSettings.cropperPreviewWidth + 'px'\"\n [class.onshore-cropper-circle]=\"this.imageSettings.circleCropper\"\n (imageCropped)=\"imageCropped($event)\"\n [imageBase64]=\"image\"\n [imageQuality]=\"this.imageSettings.imageQuality\"\n [alignImage]=\"this.imageSettings.alignImage\"\n [backgroundColor]=\"this.imageSettings.backgroundColor\"\n [containWithinAspectRatio]=\"this.imageSettings.containWithinAspectRatio\"\n [format]=\"this.imageSettings.format\"\n [aspectRatio]=\"this.imageSettings.aspectRatio\"\n [resizeToHeight]=\"this.imageSettings.imageWidth\"\n [resizeToWidth]=\"this.imageSettings.imageHeight\">\n </image-cropper>\n </div>\n\n <div *ngIf=\"imageError\"class=\"pb-2 text-wrap text-center onshore-color-danger\">\n <small *ngIf=\"imageError == imageErrorType.ratio\">{{'form.imageControl.imageErrorRatio' | translate: {resizeToWidth: this.imageSettings.imageWidth, resizeToHeight: this.imageSettings.imageHeight} }}</small>\n <small *ngIf=\"imageError == imageErrorType.fileType\">{{'form.imageControl.imageErrorFileType' | translate}}</small>\n <small *ngIf=\"imageError == imageErrorType.size\">{{'form.imageControl.imageErrorSize' | translate}}</small>\n </div>\n</div>\n\n\n<p-footer>\n <div class=\"flex justify-content-end align-items-center mt-2\">\n <button pButton\n type=\"button\"\n icon=\"fa fa-times\"\n [label]=\"'form.imageControl.imageChooserCancelButton' | translate\"\n class=\"onshore-button-light mr-2\"\n (click)=\"clear(); canceled.emit(true)\">\n </button>\n\n <button pButton\n type=\"button\"\n [label]=\"'form.imageControl.imageChooserSelectButton' | translate\"\n class=\"onshore-button-light\"\n icon=\"fa fa-check\"\n (click)=\"imageCroppedReady()\">\n </button>\n </div>\n</p-footer>\n\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.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 });
|
|
628
615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImageChooserComponent, decorators: [{
|
|
629
616
|
type: Component,
|
|
630
|
-
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
|
|
631
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: {
|
|
632
|
-
type: Input
|
|
633
|
-
}], resizeToHeight: [{
|
|
634
|
-
type: Input
|
|
635
|
-
}], resizeToWidth: [{
|
|
636
|
-
type: Input
|
|
637
|
-
}], backgroundColor: [{
|
|
638
|
-
type: Input
|
|
639
|
-
}], format: [{
|
|
640
|
-
type: Input
|
|
641
|
-
}], alignImage: [{
|
|
642
|
-
type: Input
|
|
643
|
-
}], containWithinAspectRatio: [{
|
|
644
|
-
type: Input
|
|
645
|
-
}], aspectRatio: [{
|
|
646
|
-
type: Input
|
|
647
|
-
}], cropperPreviewHeight: [{
|
|
648
|
-
type: Input
|
|
649
|
-
}], cropperPreviewWidth: [{
|
|
650
|
-
type: Input
|
|
651
|
-
}], circleCropper: [{
|
|
652
|
-
type: Input
|
|
653
|
-
}], autoSave: [{
|
|
654
|
-
type: Input
|
|
655
|
-
}], inverseColor: [{
|
|
617
|
+
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 <image-cropper\n class=\"m-3\" [style]=\"'height: ' + imageSettings.cropperPreviewHeight + 'px; width: ' + imageSettings.cropperPreviewWidth + 'px'\"\n [class.onshore-cropper-circle]=\"this.imageSettings.circleCropper\"\n (imageCropped)=\"imageCropped($event)\"\n [imageBase64]=\"image\"\n [imageQuality]=\"this.imageSettings.imageQuality\"\n [alignImage]=\"this.imageSettings.alignImage\"\n [backgroundColor]=\"this.imageSettings.backgroundColor\"\n [containWithinAspectRatio]=\"this.imageSettings.containWithinAspectRatio\"\n [format]=\"this.imageSettings.format\"\n [aspectRatio]=\"this.imageSettings.aspectRatio\"\n [resizeToHeight]=\"this.imageSettings.imageWidth\"\n [resizeToWidth]=\"this.imageSettings.imageHeight\">\n </image-cropper>\n </div>\n\n <div *ngIf=\"imageError\"class=\"pb-2 text-wrap text-center onshore-color-danger\">\n <small *ngIf=\"imageError == imageErrorType.ratio\">{{'form.imageControl.imageErrorRatio' | translate: {resizeToWidth: this.imageSettings.imageWidth, resizeToHeight: this.imageSettings.imageHeight} }}</small>\n <small *ngIf=\"imageError == imageErrorType.fileType\">{{'form.imageControl.imageErrorFileType' | translate}}</small>\n <small *ngIf=\"imageError == imageErrorType.size\">{{'form.imageControl.imageErrorSize' | translate}}</small>\n </div>\n</div>\n\n\n<p-footer>\n <div class=\"flex justify-content-end align-items-center mt-2\">\n <button pButton\n type=\"button\"\n icon=\"fa fa-times\"\n [label]=\"'form.imageControl.imageChooserCancelButton' | translate\"\n class=\"onshore-button-light mr-2\"\n (click)=\"clear(); canceled.emit(true)\">\n </button>\n\n <button pButton\n type=\"button\"\n [label]=\"'form.imageControl.imageChooserSelectButton' | translate\"\n class=\"onshore-button-light\"\n icon=\"fa fa-check\"\n (click)=\"imageCroppedReady()\">\n </button>\n </div>\n</p-footer>\n\n" }]
|
|
618
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { imageSettings: [{
|
|
656
619
|
type: Input
|
|
657
620
|
}], choosen: [{
|
|
658
621
|
type: Output
|
|
@@ -663,18 +626,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
|
|
|
663
626
|
class WebcamComponent {
|
|
664
627
|
constructor(cdr) {
|
|
665
628
|
this.cdr = cdr;
|
|
666
|
-
this.inverseColor = false;
|
|
667
|
-
this.imageQuality = 100;
|
|
668
|
-
this.resizeToHeight = 400;
|
|
669
|
-
this.resizeToWidth = 400;
|
|
670
|
-
this.backgroundColor = 'white';
|
|
671
|
-
this.format = 'png';
|
|
672
|
-
this.alignImage = 'center';
|
|
673
|
-
this.containWithinAspectRatio = false;
|
|
674
|
-
this.aspectRatio = 1 / 1;
|
|
675
|
-
this.cropperPreviewHeight = 200;
|
|
676
|
-
this.cropperPreviewWidth = 200;
|
|
677
|
-
this.circleCropper = false;
|
|
678
629
|
this.shot = new EventEmitter();
|
|
679
630
|
this.canceled = new EventEmitter();
|
|
680
631
|
this.image = '';
|
|
@@ -700,33 +651,11 @@ class WebcamComponent {
|
|
|
700
651
|
}
|
|
701
652
|
}
|
|
702
653
|
WebcamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: WebcamComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
703
|
-
WebcamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: WebcamComponent, selector: "onshore-webcam", inputs: {
|
|
654
|
+
WebcamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: WebcamComponent, selector: "onshore-webcam", inputs: { imageSettings: "imageSettings" }, outputs: { shot: "shot", canceled: "canceled" }, ngImport: i0, template: "<div class=\"flex w-full justify-content-center align-items-center overflow-hidden p-2\">\n <webcam *ngIf=\"!image || image == ''\"\n [mirrorImage]=\"'never'\"\n [height]=\"imageSettings.webcamWidth\"\n [width]=\"imageSettings.webcamHeight\"\n [allowCameraSwitch]=\"true\"\n [trigger]=\"triggerObservable\"\n [imageQuality]=\"imageSettings.imageQuality / 100\"\n (imageCapture)=\"camImageShot($event)\">\n </webcam>\n\n <image-cropper *ngIf=\"image && image != ''\"\n class=\"m-3\" [style]=\"'height: ' + imageSettings.cropperPreviewWidth + 'px; width: ' + imageSettings.cropperPreviewHeight + 'px'\"\n [class.onshore-cropper-circle]=\"imageSettings.circleCropper\"\n (imageCropped)=\"imageCropped($event)\"\n [imageBase64]=\"image\"\n [imageQuality]=\"imageSettings.imageQuality\"\n [alignImage]=\"imageSettings.alignImage\"\n [backgroundColor]=\"imageSettings.backgroundColor\"\n [containWithinAspectRatio]=\"imageSettings.containWithinAspectRatio\"\n [format]=\"imageSettings.format\"\n [aspectRatio]=\"imageSettings.aspectRatio\"\n [resizeToHeight]=\"imageSettings.imageHeight\"\n [resizeToWidth]=\"imageSettings.imageWidth\">\n </image-cropper>\n</div>\n\n<p-footer>\n <div class=\"flex justify-content-end align-items-center mt-2\">\n\n <button pButton\n type=\"button\"\n icon=\"fa fa-times\"\n [label]=\"'global.cancel' | translate\"\n class=\"onshore-button-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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.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 });
|
|
704
655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: WebcamComponent, decorators: [{
|
|
705
656
|
type: Component,
|
|
706
|
-
args: [{ selector: 'onshore-webcam', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex w-full justify-content-center align-items-center overflow-hidden p-2\"
|
|
707
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: {
|
|
708
|
-
type: Input
|
|
709
|
-
}], imageQuality: [{
|
|
710
|
-
type: Input
|
|
711
|
-
}], resizeToHeight: [{
|
|
712
|
-
type: Input
|
|
713
|
-
}], resizeToWidth: [{
|
|
714
|
-
type: Input
|
|
715
|
-
}], backgroundColor: [{
|
|
716
|
-
type: Input
|
|
717
|
-
}], format: [{
|
|
718
|
-
type: Input
|
|
719
|
-
}], alignImage: [{
|
|
720
|
-
type: Input
|
|
721
|
-
}], containWithinAspectRatio: [{
|
|
722
|
-
type: Input
|
|
723
|
-
}], aspectRatio: [{
|
|
724
|
-
type: Input
|
|
725
|
-
}], cropperPreviewHeight: [{
|
|
726
|
-
type: Input
|
|
727
|
-
}], cropperPreviewWidth: [{
|
|
728
|
-
type: Input
|
|
729
|
-
}], circleCropper: [{
|
|
657
|
+
args: [{ selector: 'onshore-webcam', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex w-full justify-content-center align-items-center overflow-hidden p-2\">\n <webcam *ngIf=\"!image || image == ''\"\n [mirrorImage]=\"'never'\"\n [height]=\"imageSettings.webcamWidth\"\n [width]=\"imageSettings.webcamHeight\"\n [allowCameraSwitch]=\"true\"\n [trigger]=\"triggerObservable\"\n [imageQuality]=\"imageSettings.imageQuality / 100\"\n (imageCapture)=\"camImageShot($event)\">\n </webcam>\n\n <image-cropper *ngIf=\"image && image != ''\"\n class=\"m-3\" [style]=\"'height: ' + imageSettings.cropperPreviewWidth + 'px; width: ' + imageSettings.cropperPreviewHeight + 'px'\"\n [class.onshore-cropper-circle]=\"imageSettings.circleCropper\"\n (imageCropped)=\"imageCropped($event)\"\n [imageBase64]=\"image\"\n [imageQuality]=\"imageSettings.imageQuality\"\n [alignImage]=\"imageSettings.alignImage\"\n [backgroundColor]=\"imageSettings.backgroundColor\"\n [containWithinAspectRatio]=\"imageSettings.containWithinAspectRatio\"\n [format]=\"imageSettings.format\"\n [aspectRatio]=\"imageSettings.aspectRatio\"\n [resizeToHeight]=\"imageSettings.imageHeight\"\n [resizeToWidth]=\"imageSettings.imageWidth\">\n </image-cropper>\n</div>\n\n<p-footer>\n <div class=\"flex justify-content-end align-items-center mt-2\">\n\n <button pButton\n type=\"button\"\n icon=\"fa fa-times\"\n [label]=\"'global.cancel' | translate\"\n class=\"onshore-button-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" }]
|
|
658
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { imageSettings: [{
|
|
730
659
|
type: Input
|
|
731
660
|
}], shot: [{
|
|
732
661
|
type: Output
|
|
@@ -745,6 +674,7 @@ class OnshoreFormImageItemComponent {
|
|
|
745
674
|
this.imageReady = new EventEmitter();
|
|
746
675
|
this.selectFromMedia = new EventEmitter();
|
|
747
676
|
this.isLoading = new EventEmitter();
|
|
677
|
+
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
748
678
|
this.defaultImageSettings = {
|
|
749
679
|
imageWidth: 400,
|
|
750
680
|
imageHeight: 400,
|
|
@@ -755,7 +685,19 @@ class OnshoreFormImageItemComponent {
|
|
|
755
685
|
mediaSelectionEnabled: true,
|
|
756
686
|
deleteEnabled: true,
|
|
757
687
|
placeholderImage: '',
|
|
758
|
-
placeholderIcon: 'fa fa-image fa-10x'
|
|
688
|
+
placeholderIcon: 'fa fa-image fa-10x',
|
|
689
|
+
containerWidth: 250,
|
|
690
|
+
containerHeight: 250,
|
|
691
|
+
imageQuality: 100,
|
|
692
|
+
format: 'png',
|
|
693
|
+
alignImage: 'center',
|
|
694
|
+
cropperPreviewWidth: 400,
|
|
695
|
+
cropperPreviewHeight: 400,
|
|
696
|
+
webcamWidth: 400,
|
|
697
|
+
webcamHeight: 400,
|
|
698
|
+
circleCropper: false,
|
|
699
|
+
maxFileSize: 6400000,
|
|
700
|
+
backgroundColor: 'white'
|
|
759
701
|
};
|
|
760
702
|
this.image = '';
|
|
761
703
|
this.disabled = false;
|
|
@@ -846,22 +788,48 @@ class OnshoreFormImageItemComponent {
|
|
|
846
788
|
this.imageSettings.aspectRatio = this.defaultImageSettings.aspectRatio;
|
|
847
789
|
if (!imageSettings.containWithinAspectRatio)
|
|
848
790
|
this.imageSettings.containWithinAspectRatio = this.defaultImageSettings.containWithinAspectRatio;
|
|
849
|
-
if (
|
|
791
|
+
if (imageSettings.imageSelectionEnabled == null)
|
|
850
792
|
this.imageSettings.imageSelectionEnabled = this.defaultImageSettings.imageSelectionEnabled;
|
|
851
|
-
if (
|
|
793
|
+
if (imageSettings.mediaSelectionEnabled == null)
|
|
852
794
|
this.imageSettings.mediaSelectionEnabled = this.defaultImageSettings.mediaSelectionEnabled;
|
|
853
|
-
if (
|
|
795
|
+
if (imageSettings.webcamSelectionEnabled == null)
|
|
854
796
|
this.imageSettings.webcamSelectionEnabled = this.defaultImageSettings.webcamSelectionEnabled;
|
|
855
|
-
if (
|
|
797
|
+
if (imageSettings.deleteEnabled == null)
|
|
856
798
|
this.imageSettings.deleteEnabled = this.defaultImageSettings.deleteEnabled;
|
|
799
|
+
if (imageSettings.containerWidth == null)
|
|
800
|
+
this.imageSettings.containerWidth = this.defaultImageSettings.containerWidth;
|
|
801
|
+
if (imageSettings.containerHeight == null)
|
|
802
|
+
this.imageSettings.containerHeight = this.defaultImageSettings.containerHeight;
|
|
803
|
+
if (imageSettings.imageQuality == null)
|
|
804
|
+
this.imageSettings.imageQuality = this.defaultImageSettings.imageQuality;
|
|
805
|
+
if (imageSettings.format == null)
|
|
806
|
+
this.imageSettings.format = this.defaultImageSettings.format;
|
|
807
|
+
if (imageSettings.alignImage == null)
|
|
808
|
+
this.imageSettings.alignImage = this.defaultImageSettings.alignImage;
|
|
809
|
+
if (imageSettings.cropperPreviewWidth == null)
|
|
810
|
+
this.imageSettings.cropperPreviewWidth = this.defaultImageSettings.cropperPreviewWidth;
|
|
811
|
+
if (imageSettings.cropperPreviewHeight == null)
|
|
812
|
+
this.imageSettings.cropperPreviewHeight = this.defaultImageSettings.cropperPreviewHeight;
|
|
813
|
+
if (imageSettings.circleCropper == null)
|
|
814
|
+
this.imageSettings.circleCropper = this.defaultImageSettings.circleCropper;
|
|
815
|
+
if (imageSettings.maxFileSize == null)
|
|
816
|
+
this.imageSettings.maxFileSize = this.defaultImageSettings.maxFileSize;
|
|
817
|
+
if (imageSettings.backgroundColor == null)
|
|
818
|
+
this.imageSettings.backgroundColor = this.defaultImageSettings.backgroundColor;
|
|
819
|
+
if (imageSettings.webcamWidth == null)
|
|
820
|
+
this.imageSettings.webcamWidth = this.defaultImageSettings.webcamWidth;
|
|
821
|
+
if (imageSettings.webcamHeight == null)
|
|
822
|
+
this.imageSettings.webcamHeight = this.defaultImageSettings.webcamHeight;
|
|
857
823
|
}
|
|
824
|
+
this.removeImage();
|
|
825
|
+
this.cdr.markForCheck();
|
|
858
826
|
}
|
|
859
827
|
}
|
|
860
828
|
OnshoreFormImageItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i2$4.DialogService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
861
|
-
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;
|
|
829
|
+
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\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\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; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\"\n [placeholderIcon]=\"imageSettings.placeholderIcon\"\n [placeholderImage]=\"imageSettings.placeholderImage\"\n [placeholderStyle]=\"'width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n </onshore-image-placeholder>\n </div>\n\n <div class=\"flex flex-column m-4\">\n <button pButton\n type=\"button\"\n *ngIf=\"imageSettings.imageSelectionEnabled\"\n icon=\"fa fa-image\"\n [label]=\"'form.imageControl.uploadImageButton' | translate\"\n class=\"onshore-button-primary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n </button>\n\n <button pButton\n type=\"button\"\n *ngIf=\"imageSettings.webcamSelectionEnabled\"\n icon=\"fa fa-camera\"\n [label]=\"'form.imageControl.webcamImageButton' | translate\"\n class=\"onshore-button-light mb-2\"\n [disabled]=\"disabled\"\n (click)=\"webcamDialogVisible = true\">\n </button>\n\n <button pButton\n type=\"button\"\n *ngIf=\"imageSettings.mediaSelectionEnabled\"\n icon=\"fa fa-photo-video\"\n [label]=\"'form.imageControl.mediaImageButton' | translate\"\n class=\"onshore-button-light mb-2\"\n [disabled]=\"disabled\"\n (click)=\"selectFromMedia.emit()\">\n </button>\n\n <button pButton\n type=\"button\"\n *ngIf=\"imageSettings.deleteEnabled\"\n icon=\"fa fa-eraser\"\n [label]=\"'form.imageControl.removeImageButton' | translate\"\n class=\"onshore-button-light\"\n (click)=\"removeImage()\"\n [disabled]=\"!image || disabled\">\n </button>\n\n </div>\n\n </div>\n</onshore-form-item-container>\n\n<p-dialog [header]=\"'form.imageControl.uploadImageTitle' | translate\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" >\n <onshore-image-chooser\n (choosen)=\"getFileImage($event)\"\n (canceled)=\"imageChooserDialogVisible = false\"\n [imageSettings]=\"imageSettings\">\n </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n <onshore-webcam\n *ngIf=\"webcamDialogVisible\"\n (shot)=\"getWebcamImage($event)\"\n (canceled)=\"webcamDialogVisible = false\"\n [imageSettings]=\"imageSettings\"></onshore-webcam>\n</p-dialog>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.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: ["imageSettings"], outputs: ["choosen", "canceled"] }, { kind: "component", type: WebcamComponent, selector: "onshore-webcam", inputs: ["imageSettings"], outputs: ["shot", "canceled"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
862
830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
|
|
863
831
|
type: Component,
|
|
864
|
-
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;
|
|
832
|
+
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\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\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; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\"\n [placeholderIcon]=\"imageSettings.placeholderIcon\"\n [placeholderImage]=\"imageSettings.placeholderImage\"\n [placeholderStyle]=\"'width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n </onshore-image-placeholder>\n </div>\n\n <div class=\"flex flex-column m-4\">\n <button pButton\n type=\"button\"\n *ngIf=\"imageSettings.imageSelectionEnabled\"\n icon=\"fa fa-image\"\n [label]=\"'form.imageControl.uploadImageButton' | translate\"\n class=\"onshore-button-primary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n </button>\n\n <button pButton\n type=\"button\"\n *ngIf=\"imageSettings.webcamSelectionEnabled\"\n icon=\"fa fa-camera\"\n [label]=\"'form.imageControl.webcamImageButton' | translate\"\n class=\"onshore-button-light mb-2\"\n [disabled]=\"disabled\"\n (click)=\"webcamDialogVisible = true\">\n </button>\n\n <button pButton\n type=\"button\"\n *ngIf=\"imageSettings.mediaSelectionEnabled\"\n icon=\"fa fa-photo-video\"\n [label]=\"'form.imageControl.mediaImageButton' | translate\"\n class=\"onshore-button-light mb-2\"\n [disabled]=\"disabled\"\n (click)=\"selectFromMedia.emit()\">\n </button>\n\n <button pButton\n type=\"button\"\n *ngIf=\"imageSettings.deleteEnabled\"\n icon=\"fa fa-eraser\"\n [label]=\"'form.imageControl.removeImageButton' | translate\"\n class=\"onshore-button-light\"\n (click)=\"removeImage()\"\n [disabled]=\"!image || disabled\">\n </button>\n\n </div>\n\n </div>\n</onshore-form-item-container>\n\n<p-dialog [header]=\"'form.imageControl.uploadImageTitle' | translate\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" >\n <onshore-image-chooser\n (choosen)=\"getFileImage($event)\"\n (canceled)=\"imageChooserDialogVisible = false\"\n [imageSettings]=\"imageSettings\">\n </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n <onshore-webcam\n *ngIf=\"webcamDialogVisible\"\n (shot)=\"getWebcamImage($event)\"\n (canceled)=\"webcamDialogVisible = false\"\n [imageSettings]=\"imageSettings\"></onshore-webcam>\n</p-dialog>\n" }]
|
|
865
833
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
|
|
866
834
|
type: Self
|
|
867
835
|
}, {
|