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
|
@@ -586,19 +586,6 @@ class OnshoreImageChooserComponent {
|
|
|
586
586
|
this.finalImage = '';
|
|
587
587
|
this.imageErrorType = OnshoreImageError;
|
|
588
588
|
this.imageError = OnshoreImageError.none;
|
|
589
|
-
this.imageQuality = 100;
|
|
590
|
-
this.resizeToHeight = 400;
|
|
591
|
-
this.resizeToWidth = 400;
|
|
592
|
-
this.backgroundColor = 'white';
|
|
593
|
-
this.format = 'png';
|
|
594
|
-
this.alignImage = 'center';
|
|
595
|
-
this.containWithinAspectRatio = false;
|
|
596
|
-
this.aspectRatio = 1 / 1;
|
|
597
|
-
this.cropperPreviewHeight = 200;
|
|
598
|
-
this.cropperPreviewWidth = 200;
|
|
599
|
-
this.circleCropper = false;
|
|
600
|
-
this.autoSave = true;
|
|
601
|
-
this.inverseColor = false;
|
|
602
589
|
this.choosen = new EventEmitter();
|
|
603
590
|
this.canceled = new EventEmitter();
|
|
604
591
|
}
|
|
@@ -615,7 +602,7 @@ class OnshoreImageChooserComponent {
|
|
|
615
602
|
this.imageError = OnshoreImageError.fileType;
|
|
616
603
|
return;
|
|
617
604
|
}
|
|
618
|
-
if ((file === null || file === void 0 ? void 0 : file.size) >
|
|
605
|
+
if ((file === null || file === void 0 ? void 0 : file.size) > this.imageSettings.maxFileSize) {
|
|
619
606
|
this.imageError = OnshoreImageError.size;
|
|
620
607
|
return;
|
|
621
608
|
}
|
|
@@ -629,7 +616,7 @@ class OnshoreImageChooserComponent {
|
|
|
629
616
|
var _a;
|
|
630
617
|
const originalWidth = img.width;
|
|
631
618
|
const originalHeight = img.height;
|
|
632
|
-
if (originalWidth >= this.
|
|
619
|
+
if (originalWidth >= this.imageSettings.imageWidth && originalHeight >= this.imageSettings.imageHeight) {
|
|
633
620
|
this.image = ((_a = reader.result) === null || _a === void 0 ? void 0 : _a.toString()) || '';
|
|
634
621
|
}
|
|
635
622
|
else {
|
|
@@ -651,35 +638,11 @@ class OnshoreImageChooserComponent {
|
|
|
651
638
|
}
|
|
652
639
|
}
|
|
653
640
|
OnshoreImageChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImageChooserComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
654
|
-
OnshoreImageChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreImageChooserComponent, selector: "onshore-image-chooser", inputs: {
|
|
641
|
+
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 });
|
|
655
642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImageChooserComponent, decorators: [{
|
|
656
643
|
type: Component,
|
|
657
|
-
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
|
|
658
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: {
|
|
659
|
-
type: Input
|
|
660
|
-
}], resizeToHeight: [{
|
|
661
|
-
type: Input
|
|
662
|
-
}], resizeToWidth: [{
|
|
663
|
-
type: Input
|
|
664
|
-
}], backgroundColor: [{
|
|
665
|
-
type: Input
|
|
666
|
-
}], format: [{
|
|
667
|
-
type: Input
|
|
668
|
-
}], alignImage: [{
|
|
669
|
-
type: Input
|
|
670
|
-
}], containWithinAspectRatio: [{
|
|
671
|
-
type: Input
|
|
672
|
-
}], aspectRatio: [{
|
|
673
|
-
type: Input
|
|
674
|
-
}], cropperPreviewHeight: [{
|
|
675
|
-
type: Input
|
|
676
|
-
}], cropperPreviewWidth: [{
|
|
677
|
-
type: Input
|
|
678
|
-
}], circleCropper: [{
|
|
679
|
-
type: Input
|
|
680
|
-
}], autoSave: [{
|
|
681
|
-
type: Input
|
|
682
|
-
}], inverseColor: [{
|
|
644
|
+
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" }]
|
|
645
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { imageSettings: [{
|
|
683
646
|
type: Input
|
|
684
647
|
}], choosen: [{
|
|
685
648
|
type: Output
|
|
@@ -690,18 +653,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
|
|
|
690
653
|
class WebcamComponent {
|
|
691
654
|
constructor(cdr) {
|
|
692
655
|
this.cdr = cdr;
|
|
693
|
-
this.inverseColor = false;
|
|
694
|
-
this.imageQuality = 100;
|
|
695
|
-
this.resizeToHeight = 400;
|
|
696
|
-
this.resizeToWidth = 400;
|
|
697
|
-
this.backgroundColor = 'white';
|
|
698
|
-
this.format = 'png';
|
|
699
|
-
this.alignImage = 'center';
|
|
700
|
-
this.containWithinAspectRatio = false;
|
|
701
|
-
this.aspectRatio = 1 / 1;
|
|
702
|
-
this.cropperPreviewHeight = 200;
|
|
703
|
-
this.cropperPreviewWidth = 200;
|
|
704
|
-
this.circleCropper = false;
|
|
705
656
|
this.shot = new EventEmitter();
|
|
706
657
|
this.canceled = new EventEmitter();
|
|
707
658
|
this.image = '';
|
|
@@ -727,33 +678,11 @@ class WebcamComponent {
|
|
|
727
678
|
}
|
|
728
679
|
}
|
|
729
680
|
WebcamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: WebcamComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
730
|
-
WebcamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: WebcamComponent, selector: "onshore-webcam", inputs: {
|
|
681
|
+
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 });
|
|
731
682
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: WebcamComponent, decorators: [{
|
|
732
683
|
type: Component,
|
|
733
|
-
args: [{ selector: 'onshore-webcam', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex w-full justify-content-center align-items-center overflow-hidden p-2\"
|
|
734
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: {
|
|
735
|
-
type: Input
|
|
736
|
-
}], imageQuality: [{
|
|
737
|
-
type: Input
|
|
738
|
-
}], resizeToHeight: [{
|
|
739
|
-
type: Input
|
|
740
|
-
}], resizeToWidth: [{
|
|
741
|
-
type: Input
|
|
742
|
-
}], backgroundColor: [{
|
|
743
|
-
type: Input
|
|
744
|
-
}], format: [{
|
|
745
|
-
type: Input
|
|
746
|
-
}], alignImage: [{
|
|
747
|
-
type: Input
|
|
748
|
-
}], containWithinAspectRatio: [{
|
|
749
|
-
type: Input
|
|
750
|
-
}], aspectRatio: [{
|
|
751
|
-
type: Input
|
|
752
|
-
}], cropperPreviewHeight: [{
|
|
753
|
-
type: Input
|
|
754
|
-
}], cropperPreviewWidth: [{
|
|
755
|
-
type: Input
|
|
756
|
-
}], circleCropper: [{
|
|
684
|
+
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" }]
|
|
685
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { imageSettings: [{
|
|
757
686
|
type: Input
|
|
758
687
|
}], shot: [{
|
|
759
688
|
type: Output
|
|
@@ -772,6 +701,7 @@ class OnshoreFormImageItemComponent {
|
|
|
772
701
|
this.imageReady = new EventEmitter();
|
|
773
702
|
this.selectFromMedia = new EventEmitter();
|
|
774
703
|
this.isLoading = new EventEmitter();
|
|
704
|
+
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
775
705
|
this.defaultImageSettings = {
|
|
776
706
|
imageWidth: 400,
|
|
777
707
|
imageHeight: 400,
|
|
@@ -782,7 +712,19 @@ class OnshoreFormImageItemComponent {
|
|
|
782
712
|
mediaSelectionEnabled: true,
|
|
783
713
|
deleteEnabled: true,
|
|
784
714
|
placeholderImage: '',
|
|
785
|
-
placeholderIcon: 'fa fa-image fa-10x'
|
|
715
|
+
placeholderIcon: 'fa fa-image fa-10x',
|
|
716
|
+
containerWidth: 250,
|
|
717
|
+
containerHeight: 250,
|
|
718
|
+
imageQuality: 100,
|
|
719
|
+
format: 'png',
|
|
720
|
+
alignImage: 'center',
|
|
721
|
+
cropperPreviewWidth: 400,
|
|
722
|
+
cropperPreviewHeight: 400,
|
|
723
|
+
webcamWidth: 400,
|
|
724
|
+
webcamHeight: 400,
|
|
725
|
+
circleCropper: false,
|
|
726
|
+
maxFileSize: 6400000,
|
|
727
|
+
backgroundColor: 'white'
|
|
786
728
|
};
|
|
787
729
|
this.image = '';
|
|
788
730
|
this.disabled = false;
|
|
@@ -879,22 +821,48 @@ class OnshoreFormImageItemComponent {
|
|
|
879
821
|
this.imageSettings.aspectRatio = this.defaultImageSettings.aspectRatio;
|
|
880
822
|
if (!imageSettings.containWithinAspectRatio)
|
|
881
823
|
this.imageSettings.containWithinAspectRatio = this.defaultImageSettings.containWithinAspectRatio;
|
|
882
|
-
if (
|
|
824
|
+
if (imageSettings.imageSelectionEnabled == null)
|
|
883
825
|
this.imageSettings.imageSelectionEnabled = this.defaultImageSettings.imageSelectionEnabled;
|
|
884
|
-
if (
|
|
826
|
+
if (imageSettings.mediaSelectionEnabled == null)
|
|
885
827
|
this.imageSettings.mediaSelectionEnabled = this.defaultImageSettings.mediaSelectionEnabled;
|
|
886
|
-
if (
|
|
828
|
+
if (imageSettings.webcamSelectionEnabled == null)
|
|
887
829
|
this.imageSettings.webcamSelectionEnabled = this.defaultImageSettings.webcamSelectionEnabled;
|
|
888
|
-
if (
|
|
830
|
+
if (imageSettings.deleteEnabled == null)
|
|
889
831
|
this.imageSettings.deleteEnabled = this.defaultImageSettings.deleteEnabled;
|
|
832
|
+
if (imageSettings.containerWidth == null)
|
|
833
|
+
this.imageSettings.containerWidth = this.defaultImageSettings.containerWidth;
|
|
834
|
+
if (imageSettings.containerHeight == null)
|
|
835
|
+
this.imageSettings.containerHeight = this.defaultImageSettings.containerHeight;
|
|
836
|
+
if (imageSettings.imageQuality == null)
|
|
837
|
+
this.imageSettings.imageQuality = this.defaultImageSettings.imageQuality;
|
|
838
|
+
if (imageSettings.format == null)
|
|
839
|
+
this.imageSettings.format = this.defaultImageSettings.format;
|
|
840
|
+
if (imageSettings.alignImage == null)
|
|
841
|
+
this.imageSettings.alignImage = this.defaultImageSettings.alignImage;
|
|
842
|
+
if (imageSettings.cropperPreviewWidth == null)
|
|
843
|
+
this.imageSettings.cropperPreviewWidth = this.defaultImageSettings.cropperPreviewWidth;
|
|
844
|
+
if (imageSettings.cropperPreviewHeight == null)
|
|
845
|
+
this.imageSettings.cropperPreviewHeight = this.defaultImageSettings.cropperPreviewHeight;
|
|
846
|
+
if (imageSettings.circleCropper == null)
|
|
847
|
+
this.imageSettings.circleCropper = this.defaultImageSettings.circleCropper;
|
|
848
|
+
if (imageSettings.maxFileSize == null)
|
|
849
|
+
this.imageSettings.maxFileSize = this.defaultImageSettings.maxFileSize;
|
|
850
|
+
if (imageSettings.backgroundColor == null)
|
|
851
|
+
this.imageSettings.backgroundColor = this.defaultImageSettings.backgroundColor;
|
|
852
|
+
if (imageSettings.webcamWidth == null)
|
|
853
|
+
this.imageSettings.webcamWidth = this.defaultImageSettings.webcamWidth;
|
|
854
|
+
if (imageSettings.webcamHeight == null)
|
|
855
|
+
this.imageSettings.webcamHeight = this.defaultImageSettings.webcamHeight;
|
|
890
856
|
}
|
|
857
|
+
this.removeImage();
|
|
858
|
+
this.cdr.markForCheck();
|
|
891
859
|
}
|
|
892
860
|
}
|
|
893
861
|
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 });
|
|
894
|
-
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;
|
|
862
|
+
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 });
|
|
895
863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
|
|
896
864
|
type: Component,
|
|
897
|
-
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;
|
|
865
|
+
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" }]
|
|
898
866
|
}], ctorParameters: function () {
|
|
899
867
|
return [{ type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
|
|
900
868
|
type: Self
|