onshore-forms 0.0.23 → 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/esm2020/lib/onshore-forms.service.mjs +11 -1
- package/fesm2015/onshore-forms.mjs +64 -86
- package/fesm2015/onshore-forms.mjs.map +1 -1
- package/fesm2020/onshore-forms.mjs +64 -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
|
@@ -200,11 +200,21 @@ class OnshoreFormsService {
|
|
|
200
200
|
lock() {
|
|
201
201
|
this._formTemplate.forEach((item) => {
|
|
202
202
|
item.locked = true;
|
|
203
|
+
if (item.subformArray) {
|
|
204
|
+
item.subformArray.forEach(subitem => {
|
|
205
|
+
subitem.locked = true;
|
|
206
|
+
});
|
|
207
|
+
}
|
|
203
208
|
});
|
|
204
209
|
}
|
|
205
210
|
unlock() {
|
|
206
211
|
this._formTemplate.forEach((item) => {
|
|
207
212
|
item.locked = false;
|
|
213
|
+
if (item.subformArray) {
|
|
214
|
+
item.subformArray.forEach(subitem => {
|
|
215
|
+
subitem.locked = false;
|
|
216
|
+
});
|
|
217
|
+
}
|
|
208
218
|
});
|
|
209
219
|
}
|
|
210
220
|
iterateNestedForm(form, formTemplate) {
|
|
@@ -550,19 +560,6 @@ class OnshoreImageChooserComponent {
|
|
|
550
560
|
this.finalImage = '';
|
|
551
561
|
this.imageErrorType = OnshoreImageError;
|
|
552
562
|
this.imageError = OnshoreImageError.none;
|
|
553
|
-
this.imageQuality = 100;
|
|
554
|
-
this.resizeToHeight = 400;
|
|
555
|
-
this.resizeToWidth = 400;
|
|
556
|
-
this.backgroundColor = 'white';
|
|
557
|
-
this.format = 'png';
|
|
558
|
-
this.alignImage = 'center';
|
|
559
|
-
this.containWithinAspectRatio = false;
|
|
560
|
-
this.aspectRatio = 1 / 1;
|
|
561
|
-
this.cropperPreviewHeight = 200;
|
|
562
|
-
this.cropperPreviewWidth = 200;
|
|
563
|
-
this.circleCropper = false;
|
|
564
|
-
this.autoSave = true;
|
|
565
|
-
this.inverseColor = false;
|
|
566
563
|
this.choosen = new EventEmitter();
|
|
567
564
|
this.canceled = new EventEmitter();
|
|
568
565
|
}
|
|
@@ -579,7 +576,7 @@ class OnshoreImageChooserComponent {
|
|
|
579
576
|
this.imageError = OnshoreImageError.fileType;
|
|
580
577
|
return;
|
|
581
578
|
}
|
|
582
|
-
if (file?.size >
|
|
579
|
+
if (file?.size > this.imageSettings.maxFileSize) {
|
|
583
580
|
this.imageError = OnshoreImageError.size;
|
|
584
581
|
return;
|
|
585
582
|
}
|
|
@@ -592,7 +589,7 @@ class OnshoreImageChooserComponent {
|
|
|
592
589
|
img.onload = () => {
|
|
593
590
|
const originalWidth = img.width;
|
|
594
591
|
const originalHeight = img.height;
|
|
595
|
-
if (originalWidth >= this.
|
|
592
|
+
if (originalWidth >= this.imageSettings.imageWidth && originalHeight >= this.imageSettings.imageHeight) {
|
|
596
593
|
this.image = reader.result?.toString() || '';
|
|
597
594
|
}
|
|
598
595
|
else {
|
|
@@ -614,35 +611,11 @@ class OnshoreImageChooserComponent {
|
|
|
614
611
|
}
|
|
615
612
|
}
|
|
616
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 });
|
|
617
|
-
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 });
|
|
618
615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreImageChooserComponent, decorators: [{
|
|
619
616
|
type: Component,
|
|
620
|
-
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
|
|
621
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: {
|
|
622
|
-
type: Input
|
|
623
|
-
}], resizeToHeight: [{
|
|
624
|
-
type: Input
|
|
625
|
-
}], resizeToWidth: [{
|
|
626
|
-
type: Input
|
|
627
|
-
}], backgroundColor: [{
|
|
628
|
-
type: Input
|
|
629
|
-
}], format: [{
|
|
630
|
-
type: Input
|
|
631
|
-
}], alignImage: [{
|
|
632
|
-
type: Input
|
|
633
|
-
}], containWithinAspectRatio: [{
|
|
634
|
-
type: Input
|
|
635
|
-
}], aspectRatio: [{
|
|
636
|
-
type: Input
|
|
637
|
-
}], cropperPreviewHeight: [{
|
|
638
|
-
type: Input
|
|
639
|
-
}], cropperPreviewWidth: [{
|
|
640
|
-
type: Input
|
|
641
|
-
}], circleCropper: [{
|
|
642
|
-
type: Input
|
|
643
|
-
}], autoSave: [{
|
|
644
|
-
type: Input
|
|
645
|
-
}], 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: [{
|
|
646
619
|
type: Input
|
|
647
620
|
}], choosen: [{
|
|
648
621
|
type: Output
|
|
@@ -653,18 +626,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
|
|
|
653
626
|
class WebcamComponent {
|
|
654
627
|
constructor(cdr) {
|
|
655
628
|
this.cdr = cdr;
|
|
656
|
-
this.inverseColor = false;
|
|
657
|
-
this.imageQuality = 100;
|
|
658
|
-
this.resizeToHeight = 400;
|
|
659
|
-
this.resizeToWidth = 400;
|
|
660
|
-
this.backgroundColor = 'white';
|
|
661
|
-
this.format = 'png';
|
|
662
|
-
this.alignImage = 'center';
|
|
663
|
-
this.containWithinAspectRatio = false;
|
|
664
|
-
this.aspectRatio = 1 / 1;
|
|
665
|
-
this.cropperPreviewHeight = 200;
|
|
666
|
-
this.cropperPreviewWidth = 200;
|
|
667
|
-
this.circleCropper = false;
|
|
668
629
|
this.shot = new EventEmitter();
|
|
669
630
|
this.canceled = new EventEmitter();
|
|
670
631
|
this.image = '';
|
|
@@ -690,33 +651,11 @@ class WebcamComponent {
|
|
|
690
651
|
}
|
|
691
652
|
}
|
|
692
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 });
|
|
693
|
-
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 });
|
|
694
655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: WebcamComponent, decorators: [{
|
|
695
656
|
type: Component,
|
|
696
|
-
args: [{ selector: 'onshore-webcam', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex w-full justify-content-center align-items-center overflow-hidden p-2\"
|
|
697
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: {
|
|
698
|
-
type: Input
|
|
699
|
-
}], imageQuality: [{
|
|
700
|
-
type: Input
|
|
701
|
-
}], resizeToHeight: [{
|
|
702
|
-
type: Input
|
|
703
|
-
}], resizeToWidth: [{
|
|
704
|
-
type: Input
|
|
705
|
-
}], backgroundColor: [{
|
|
706
|
-
type: Input
|
|
707
|
-
}], format: [{
|
|
708
|
-
type: Input
|
|
709
|
-
}], alignImage: [{
|
|
710
|
-
type: Input
|
|
711
|
-
}], containWithinAspectRatio: [{
|
|
712
|
-
type: Input
|
|
713
|
-
}], aspectRatio: [{
|
|
714
|
-
type: Input
|
|
715
|
-
}], cropperPreviewHeight: [{
|
|
716
|
-
type: Input
|
|
717
|
-
}], cropperPreviewWidth: [{
|
|
718
|
-
type: Input
|
|
719
|
-
}], 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: [{
|
|
720
659
|
type: Input
|
|
721
660
|
}], shot: [{
|
|
722
661
|
type: Output
|
|
@@ -735,6 +674,7 @@ class OnshoreFormImageItemComponent {
|
|
|
735
674
|
this.imageReady = new EventEmitter();
|
|
736
675
|
this.selectFromMedia = new EventEmitter();
|
|
737
676
|
this.isLoading = new EventEmitter();
|
|
677
|
+
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
738
678
|
this.defaultImageSettings = {
|
|
739
679
|
imageWidth: 400,
|
|
740
680
|
imageHeight: 400,
|
|
@@ -745,7 +685,19 @@ class OnshoreFormImageItemComponent {
|
|
|
745
685
|
mediaSelectionEnabled: true,
|
|
746
686
|
deleteEnabled: true,
|
|
747
687
|
placeholderImage: '',
|
|
748
|
-
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'
|
|
749
701
|
};
|
|
750
702
|
this.image = '';
|
|
751
703
|
this.disabled = false;
|
|
@@ -836,22 +788,48 @@ class OnshoreFormImageItemComponent {
|
|
|
836
788
|
this.imageSettings.aspectRatio = this.defaultImageSettings.aspectRatio;
|
|
837
789
|
if (!imageSettings.containWithinAspectRatio)
|
|
838
790
|
this.imageSettings.containWithinAspectRatio = this.defaultImageSettings.containWithinAspectRatio;
|
|
839
|
-
if (
|
|
791
|
+
if (imageSettings.imageSelectionEnabled == null)
|
|
840
792
|
this.imageSettings.imageSelectionEnabled = this.defaultImageSettings.imageSelectionEnabled;
|
|
841
|
-
if (
|
|
793
|
+
if (imageSettings.mediaSelectionEnabled == null)
|
|
842
794
|
this.imageSettings.mediaSelectionEnabled = this.defaultImageSettings.mediaSelectionEnabled;
|
|
843
|
-
if (
|
|
795
|
+
if (imageSettings.webcamSelectionEnabled == null)
|
|
844
796
|
this.imageSettings.webcamSelectionEnabled = this.defaultImageSettings.webcamSelectionEnabled;
|
|
845
|
-
if (
|
|
797
|
+
if (imageSettings.deleteEnabled == null)
|
|
846
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;
|
|
847
823
|
}
|
|
824
|
+
this.removeImage();
|
|
825
|
+
this.cdr.markForCheck();
|
|
848
826
|
}
|
|
849
827
|
}
|
|
850
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 });
|
|
851
|
-
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 });
|
|
852
830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
|
|
853
831
|
type: Component,
|
|
854
|
-
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" }]
|
|
855
833
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
|
|
856
834
|
type: Self
|
|
857
835
|
}, {
|