onshore-forms 1.1.16 → 1.1.17
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.
|
@@ -39,6 +39,8 @@ import { TagModule } from 'primeng/tag';
|
|
|
39
39
|
import { ImageCropperComponent } from 'ngx-image-cropper';
|
|
40
40
|
import * as i4$2 from 'ngx-webcam';
|
|
41
41
|
import { WebcamModule } from 'ngx-webcam';
|
|
42
|
+
import * as i2$5 from 'primeng/toggleswitch';
|
|
43
|
+
import { ToggleSwitch, ToggleSwitchModule } from 'primeng/toggleswitch';
|
|
42
44
|
import * as i4$3 from 'primeng/textarea';
|
|
43
45
|
import { TextareaModule } from 'primeng/textarea';
|
|
44
46
|
import * as i6 from 'primeng/inputnumber';
|
|
@@ -49,8 +51,6 @@ import * as i8 from 'primeng/inputgroupaddon';
|
|
|
49
51
|
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
|
|
50
52
|
import * as i3$4 from 'primeng/keyfilter';
|
|
51
53
|
import { KeyFilterModule } from 'primeng/keyfilter';
|
|
52
|
-
import * as i2$5 from 'primeng/toggleswitch';
|
|
53
|
-
import { ToggleSwitchModule } from 'primeng/toggleswitch';
|
|
54
54
|
import * as i5$2 from 'primeng/inputotp';
|
|
55
55
|
import { InputOtpModule } from 'primeng/inputotp';
|
|
56
56
|
import * as i4$4 from 'primeng/popover';
|
|
@@ -909,12 +909,20 @@ class OnshoreFormDropdownItemComponent {
|
|
|
909
909
|
return result;
|
|
910
910
|
}
|
|
911
911
|
ngOnInit() {
|
|
912
|
-
if (
|
|
913
|
-
|
|
914
|
-
|
|
912
|
+
if (!this.ngControl.control?.value || this.ngControl.control?.value == '' || this.ngControl.control?.value == undefined) {
|
|
913
|
+
if (!this.multiple) {
|
|
914
|
+
this.ngControl.control?.setValue(this.formTemplate.default);
|
|
915
|
+
this.cdr.markForCheck();
|
|
916
|
+
}
|
|
917
|
+
else if (!this.ngControl.control?.value) {
|
|
918
|
+
this.ngControl.control?.setValue(this.multiple ? [] : undefined);
|
|
919
|
+
}
|
|
915
920
|
}
|
|
916
921
|
else {
|
|
917
|
-
this.ngControl.control?.setValue(this.
|
|
922
|
+
this.ngControl.control?.setValue(this.ngControl.control?.value);
|
|
923
|
+
this.ngControl?.control?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
|
|
924
|
+
this.ngControl?.control?.markAsDirty();
|
|
925
|
+
this.cdr.markForCheck();
|
|
918
926
|
}
|
|
919
927
|
}
|
|
920
928
|
ngOnDestroy() {
|
|
@@ -1071,6 +1079,7 @@ class OnshoreImageChooserComponent {
|
|
|
1071
1079
|
finalImage = '';
|
|
1072
1080
|
imageErrorType = OnshoreImageError;
|
|
1073
1081
|
imageError = OnshoreImageError.none;
|
|
1082
|
+
formTemplate;
|
|
1074
1083
|
imageSettings = undefined;
|
|
1075
1084
|
choosen = new EventEmitter();
|
|
1076
1085
|
canceled = new EventEmitter();
|
|
@@ -1138,12 +1147,14 @@ class OnshoreImageChooserComponent {
|
|
|
1138
1147
|
this.cdr = cdr;
|
|
1139
1148
|
}
|
|
1140
1149
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreImageChooserComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1141
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreImageChooserComponent, isStandalone: true, 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\n class=\"onshore-image-upload flex flex-column justify-content-between align-items-center rounded-lg px-4 pb-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 text-color\"></i>\n <small class=\"text-color mb-4\">{{'form.imageControl.dropImageLabel' | translate}}</small>\n\n <p-button [severity]=\"'primary'\"\n [label]=\"'form.imageControl.imageChooserFileButton' | translate\">\n </p-button>\n\n <input\n (change)=\"fileChange($event)\"\n *ngIf=\"!image\"\n accept=\"image/png, image/jpeg, image/webp\"\n class=\"absolute w-full h-full bottom-0 cursor-pointer\"\n style=\"opacity: 0\"\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\"\n [style]=\"'align-items: center; height: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewWidth * this.imageSettings.aspectRatio) + '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 * this.imageSettings.aspectRatio\"\n [resizeToWidth]=\"this.imageSettings.imageHeight * this.imageSettings.aspectRatio\">\n </image-cropper>\n </div>\n\n <div *ngIf=\"imageError\"class=\"pb-2 text-wrap text-center\"\n [style]=\"{color: 'var(--inputtext-invalid-placeholder-color)' }\">\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 gap-2\">\n <p-button [severity]=\"'secondary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n icon=\"fa fa-times\"\n [label]=\"'form.imageControl.imageChooserCancelButton' | translate\"\n (click)=\"clear(); canceled.emit(true)\">\n </p-button>\n\n <p-button [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [label]=\"'form.imageControl.imageChooserSelectButton' | translate\"\n icon=\"fa fa-check\"\n [disabled]=\"!image\"\n (click)=\"imageCroppedReady()\">\n </p-button>\n </div>\n</p-footer>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Footer, selector: "p-footer" }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1150
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreImageChooserComponent, isStandalone: true, selector: "onshore-image-chooser", inputs: { formTemplate: "formTemplate", 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\n class=\"onshore-image-upload flex flex-column justify-content-between align-items-center rounded-lg px-4 pb-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 text-color\"></i>\n <small class=\"text-color mb-4\">{{'form.imageControl.dropImageLabel' | translate}}</small>\n\n <p-button [severity]=\"'primary'\"\n [size]=\"formTemplate.size\"\n [label]=\"'form.imageControl.imageChooserFileButton' | translate\">\n </p-button>\n\n <input\n (change)=\"fileChange($event)\"\n *ngIf=\"!image\"\n accept=\"image/png, image/jpeg, image/webp\"\n class=\"absolute w-full h-full bottom-0 cursor-pointer\"\n style=\"opacity: 0\"\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\"\n [style]=\"'align-items: center; height: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewWidth * this.imageSettings.aspectRatio) + '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 * this.imageSettings.aspectRatio\"\n [resizeToWidth]=\"this.imageSettings.imageHeight * this.imageSettings.aspectRatio\">\n </image-cropper>\n </div>\n\n <div *ngIf=\"imageError\"class=\"pb-2 text-wrap text-center\"\n [style]=\"{color: 'var(--inputtext-invalid-placeholder-color)' }\">\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 gap-2\">\n <p-button [severity]=\"'secondary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n icon=\"fa fa-times\"\n [size]=\"formTemplate.size\"\n [label]=\"'form.imageControl.imageChooserCancelButton' | translate\"\n (click)=\"clear(); canceled.emit(true)\">\n </p-button>\n\n <p-button [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [size]=\"formTemplate.size\"\n [label]=\"'form.imageControl.imageChooserSelectButton' | translate\"\n icon=\"fa fa-check\"\n [disabled]=\"!image\"\n (click)=\"imageCroppedReady()\">\n </p-button>\n </div>\n</p-footer>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Footer, selector: "p-footer" }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1142
1151
|
}
|
|
1143
1152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreImageChooserComponent, decorators: [{
|
|
1144
1153
|
type: Component,
|
|
1145
|
-
args: [{ selector: 'onshore-image-chooser', imports: [CommonModule, TranslateModule, ButtonModule, InputTextModule, ImageCropperComponent, FormsModule, ReactiveFormsModule], 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\n class=\"onshore-image-upload flex flex-column justify-content-between align-items-center rounded-lg px-4 pb-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 text-color\"></i>\n <small class=\"text-color mb-4\">{{'form.imageControl.dropImageLabel' | translate}}</small>\n\n <p-button [severity]=\"'primary'\"\n [label]=\"'form.imageControl.imageChooserFileButton' | translate\">\n </p-button>\n\n <input\n (change)=\"fileChange($event)\"\n *ngIf=\"!image\"\n accept=\"image/png, image/jpeg, image/webp\"\n class=\"absolute w-full h-full bottom-0 cursor-pointer\"\n style=\"opacity: 0\"\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\"\n [style]=\"'align-items: center; height: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewWidth * this.imageSettings.aspectRatio) + '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 * this.imageSettings.aspectRatio\"\n [resizeToWidth]=\"this.imageSettings.imageHeight * this.imageSettings.aspectRatio\">\n </image-cropper>\n </div>\n\n <div *ngIf=\"imageError\"class=\"pb-2 text-wrap text-center\"\n [style]=\"{color: 'var(--inputtext-invalid-placeholder-color)' }\">\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 gap-2\">\n <p-button [severity]=\"'secondary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n icon=\"fa fa-times\"\n [label]=\"'form.imageControl.imageChooserCancelButton' | translate\"\n (click)=\"clear(); canceled.emit(true)\">\n </p-button>\n\n <p-button [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [label]=\"'form.imageControl.imageChooserSelectButton' | translate\"\n icon=\"fa fa-check\"\n [disabled]=\"!image\"\n (click)=\"imageCroppedReady()\">\n </p-button>\n </div>\n</p-footer>\n\n" }]
|
|
1146
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: {
|
|
1154
|
+
args: [{ selector: 'onshore-image-chooser', imports: [CommonModule, TranslateModule, ButtonModule, InputTextModule, ImageCropperComponent, FormsModule, ReactiveFormsModule], 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\n class=\"onshore-image-upload flex flex-column justify-content-between align-items-center rounded-lg px-4 pb-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 text-color\"></i>\n <small class=\"text-color mb-4\">{{'form.imageControl.dropImageLabel' | translate}}</small>\n\n <p-button [severity]=\"'primary'\"\n [size]=\"formTemplate.size\"\n [label]=\"'form.imageControl.imageChooserFileButton' | translate\">\n </p-button>\n\n <input\n (change)=\"fileChange($event)\"\n *ngIf=\"!image\"\n accept=\"image/png, image/jpeg, image/webp\"\n class=\"absolute w-full h-full bottom-0 cursor-pointer\"\n style=\"opacity: 0\"\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\"\n [style]=\"'align-items: center; height: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewWidth * this.imageSettings.aspectRatio) + '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 * this.imageSettings.aspectRatio\"\n [resizeToWidth]=\"this.imageSettings.imageHeight * this.imageSettings.aspectRatio\">\n </image-cropper>\n </div>\n\n <div *ngIf=\"imageError\"class=\"pb-2 text-wrap text-center\"\n [style]=\"{color: 'var(--inputtext-invalid-placeholder-color)' }\">\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 gap-2\">\n <p-button [severity]=\"'secondary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n icon=\"fa fa-times\"\n [size]=\"formTemplate.size\"\n [label]=\"'form.imageControl.imageChooserCancelButton' | translate\"\n (click)=\"clear(); canceled.emit(true)\">\n </p-button>\n\n <p-button [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [size]=\"formTemplate.size\"\n [label]=\"'form.imageControl.imageChooserSelectButton' | translate\"\n icon=\"fa fa-check\"\n [disabled]=\"!image\"\n (click)=\"imageCroppedReady()\">\n </p-button>\n </div>\n</p-footer>\n\n" }]
|
|
1155
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formTemplate: [{
|
|
1156
|
+
type: Input
|
|
1157
|
+
}], imageSettings: [{
|
|
1147
1158
|
type: Input
|
|
1148
1159
|
}], choosen: [{
|
|
1149
1160
|
type: Output
|
|
@@ -1153,6 +1164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1153
1164
|
|
|
1154
1165
|
class WebcamComponent {
|
|
1155
1166
|
cdr;
|
|
1167
|
+
formTemplate;
|
|
1156
1168
|
imageSettings = undefined;
|
|
1157
1169
|
shot = new EventEmitter();
|
|
1158
1170
|
canceled = new EventEmitter();
|
|
@@ -1191,12 +1203,14 @@ class WebcamComponent {
|
|
|
1191
1203
|
this.cdr = cdr;
|
|
1192
1204
|
}
|
|
1193
1205
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: WebcamComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1194
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: WebcamComponent, isStandalone: true, 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 * this.imageSettings.aspectRatio\"\n [width]=\"imageSettings.webcamHeight * this.imageSettings.aspectRatio\"\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 * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + '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 * this.imageSettings.aspectRatio\"\n [resizeToWidth]=\"this.imageSettings.imageWidth * this.imageSettings.aspectRatio\">\n </image-cropper>\n</div>\n\n<p-footer>\n <div class=\"flex justify-content-end align-items-center gap-2 mt-2\">\n\n <p-button [severity]=\"'secondary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n icon=\"fa fa-times\"\n [label]=\"'global.cancel' | translate\"\n (click)=\"canceled.emit(true)\">\n </p-button>\n\n <p-button *ngIf=\"!image || image == ''\"\n [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [label]=\"'form.imageControl.webcamSmileButton' | translate\"\n icon=\"fa fa-laugh-wink\"\n (click)=\"triggerSnapshot()\">\n </p-button>\n\n <p-button *ngIf=\"image && image != ''\"\n [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [label]=\"'global.use' | translate\"\n icon=\"fa fa-check\"\n (click)=\"imageCroppedReady()\">\n </p-button>\n </div>\n</p-footer>\n\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Footer, selector: "p-footer" }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: WebcamModule }, { kind: "component", type: i4$2.WebcamComponent, selector: "webcam", inputs: ["width", "height", "videoOptions", "allowCameraSwitch", "mirrorImage", "captureImageData", "imageType", "imageQuality", "trigger", "switchCamera"], outputs: ["imageCapture", "initError", "imageClick", "cameraSwitched"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1206
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: WebcamComponent, isStandalone: true, selector: "onshore-webcam", inputs: { formTemplate: "formTemplate", 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 * this.imageSettings.aspectRatio\"\n [width]=\"imageSettings.webcamHeight * this.imageSettings.aspectRatio\"\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 * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + '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 * this.imageSettings.aspectRatio\"\n [resizeToWidth]=\"this.imageSettings.imageWidth * this.imageSettings.aspectRatio\">\n </image-cropper>\n</div>\n\n<p-footer>\n <div class=\"flex justify-content-end align-items-center gap-2 mt-2\">\n\n <p-button [severity]=\"'secondary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n icon=\"fa fa-times\"\n [size]=\"formTemplate.size\"\n [label]=\"'global.cancel' | translate\"\n (click)=\"canceled.emit(true)\">\n </p-button>\n\n <p-button *ngIf=\"!image || image == ''\"\n [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [size]=\"formTemplate.size\"\n [label]=\"'form.imageControl.webcamSmileButton' | translate\"\n icon=\"fa fa-laugh-wink\"\n (click)=\"triggerSnapshot()\">\n </p-button>\n\n <p-button *ngIf=\"image && image != ''\"\n [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [size]=\"formTemplate.size\"\n [label]=\"'global.use' | translate\"\n icon=\"fa fa-check\"\n (click)=\"imageCroppedReady()\">\n </p-button>\n </div>\n</p-footer>\n\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Footer, selector: "p-footer" }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: WebcamModule }, { kind: "component", type: i4$2.WebcamComponent, selector: "webcam", inputs: ["width", "height", "videoOptions", "allowCameraSwitch", "mirrorImage", "captureImageData", "imageType", "imageQuality", "trigger", "switchCamera"], outputs: ["imageCapture", "initError", "imageClick", "cameraSwitched"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1195
1207
|
}
|
|
1196
1208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: WebcamComponent, decorators: [{
|
|
1197
1209
|
type: Component,
|
|
1198
|
-
args: [{ selector: 'onshore-webcam', imports: [CommonModule, TranslateModule, ButtonModule, ImageCropperComponent, WebcamModule], 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 * this.imageSettings.aspectRatio\"\n [width]=\"imageSettings.webcamHeight * this.imageSettings.aspectRatio\"\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 * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + '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 * this.imageSettings.aspectRatio\"\n [resizeToWidth]=\"this.imageSettings.imageWidth * this.imageSettings.aspectRatio\">\n </image-cropper>\n</div>\n\n<p-footer>\n <div class=\"flex justify-content-end align-items-center gap-2 mt-2\">\n\n <p-button [severity]=\"'secondary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n icon=\"fa fa-times\"\n [label]=\"'global.cancel' | translate\"\n (click)=\"canceled.emit(true)\">\n </p-button>\n\n <p-button *ngIf=\"!image || image == ''\"\n [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [label]=\"'form.imageControl.webcamSmileButton' | translate\"\n icon=\"fa fa-laugh-wink\"\n (click)=\"triggerSnapshot()\">\n </p-button>\n\n <p-button *ngIf=\"image && image != ''\"\n [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [label]=\"'global.use' | translate\"\n icon=\"fa fa-check\"\n (click)=\"imageCroppedReady()\">\n </p-button>\n </div>\n</p-footer>\n\n\n" }]
|
|
1199
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: {
|
|
1210
|
+
args: [{ selector: 'onshore-webcam', imports: [CommonModule, TranslateModule, ButtonModule, ImageCropperComponent, WebcamModule, ToggleSwitch], 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 * this.imageSettings.aspectRatio\"\n [width]=\"imageSettings.webcamHeight * this.imageSettings.aspectRatio\"\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 * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + '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 * this.imageSettings.aspectRatio\"\n [resizeToWidth]=\"this.imageSettings.imageWidth * this.imageSettings.aspectRatio\">\n </image-cropper>\n</div>\n\n<p-footer>\n <div class=\"flex justify-content-end align-items-center gap-2 mt-2\">\n\n <p-button [severity]=\"'secondary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n icon=\"fa fa-times\"\n [size]=\"formTemplate.size\"\n [label]=\"'global.cancel' | translate\"\n (click)=\"canceled.emit(true)\">\n </p-button>\n\n <p-button *ngIf=\"!image || image == ''\"\n [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [size]=\"formTemplate.size\"\n [label]=\"'form.imageControl.webcamSmileButton' | translate\"\n icon=\"fa fa-laugh-wink\"\n (click)=\"triggerSnapshot()\">\n </p-button>\n\n <p-button *ngIf=\"image && image != ''\"\n [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [size]=\"formTemplate.size\"\n [label]=\"'global.use' | translate\"\n icon=\"fa fa-check\"\n (click)=\"imageCroppedReady()\">\n </p-button>\n </div>\n</p-footer>\n\n\n" }]
|
|
1211
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formTemplate: [{
|
|
1212
|
+
type: Input
|
|
1213
|
+
}], imageSettings: [{
|
|
1200
1214
|
type: Input
|
|
1201
1215
|
}], shot: [{
|
|
1202
1216
|
type: Output
|
|
@@ -1359,11 +1373,11 @@ class OnshoreFormImageItemComponent {
|
|
|
1359
1373
|
this.ngControl.valueAccessor = this;
|
|
1360
1374
|
}
|
|
1361
1375
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormImageItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1362
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormImageItemComponent, isStandalone: true, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", imageSettings: "imageSettings", actionButtonDisabled: "actionButtonDisabled", exclude: "exclude" }, outputs: { imageDeleted: "imageDeleted", imageCleared: "imageCleared", imageReady: "imageReady", selectFromMedia: "selectFromMedia", isLoading: "isLoading" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" [hidden]=\"exclude\">\n <div class=\"w-full flex align-items-center gap-2\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\n\n <div class=\"border-solid border-1 border-300 border-round-md overflow-hidden\"\n [style]=\"'background-color: white; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n <onshore-image-placeholder\n class=\"w-full\"\n [image]=\"image\"\n [imageStyle]=\"'width: 100%; height: 100%'\"\n [placeholderIcon]=\"imageSettings.placeholderIcon\"\n [placeholderImage]=\"imageSettings.placeholderImage\"\n [placeholderStyle]=\"'width: 100%; height: 100%'\">\n </onshore-image-placeholder>\n </div>\n\n <div>\n <p-fluid class=\"flex flex-column\">\n <p-button *ngIf=\"imageSettings.imageSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-image\"\n [label]=\"'form.imageControl.uploadImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.webcamSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-camera\"\n [label]=\"'form.imageControl.webcamImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"webcamDialogVisible = true\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.mediaSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-photo-video\"\n [label]=\"'form.imageControl.mediaImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"selectFromMedia.emit()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.deleteEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-eraser\"\n [label]=\"'form.imageControl.removeImageButton' | translate\"\n (click)=\"removeImage()\"\n class=\"w-full\"\n [disabled]=\"!image || disabled\">\n </p-button>\n </p-fluid>\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'}\" appendTo=\"body\">\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'}\" appendTo=\"body\">\n <onshore-webcam\n *ngIf=\"webcamDialogVisible\"\n (shot)=\"getWebcamImage($event)\"\n (canceled)=\"webcamDialogVisible = false\"\n [imageSettings]=\"imageSettings\"></onshore-webcam>\n</p-dialog>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i4.Fluid, selector: "p-fluid" }, { kind: "component", type: OnshoreImagePlaceholderComponent, selector: "onshore-image-placeholder", inputs: ["placeholderIcon", "placeholderImage", "image", "imageStyle", "placeholderStyle", "showLoader"] }, { 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: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1376
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormImageItemComponent, isStandalone: true, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", imageSettings: "imageSettings", actionButtonDisabled: "actionButtonDisabled", exclude: "exclude" }, outputs: { imageDeleted: "imageDeleted", imageCleared: "imageCleared", imageReady: "imageReady", selectFromMedia: "selectFromMedia", isLoading: "isLoading" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" [hidden]=\"exclude\">\n <div class=\"w-full flex align-items-center gap-2\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\n\n <div class=\"border-solid border-1 border-300 border-round-md overflow-hidden\"\n [style]=\"'background-color: white; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n <onshore-image-placeholder\n class=\"w-full\"\n [image]=\"image\"\n [imageStyle]=\"'width: 100%; height: 100%'\"\n [placeholderIcon]=\"imageSettings.placeholderIcon\"\n [placeholderImage]=\"imageSettings.placeholderImage\"\n [placeholderStyle]=\"'width: 100%; height: 100%'\">\n </onshore-image-placeholder>\n </div>\n\n <div>\n <p-fluid class=\"flex flex-column\">\n <p-button *ngIf=\"imageSettings.imageSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-image\"\n [label]=\"'form.imageControl.uploadImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n [size]=\"formTemplate.size\"\n (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.webcamSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-camera\"\n [label]=\"'form.imageControl.webcamImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n [size]=\"formTemplate.size\"\n (click)=\"webcamDialogVisible = true\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.mediaSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-photo-video\"\n [label]=\"'form.imageControl.mediaImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n [size]=\"formTemplate.size\"\n (click)=\"selectFromMedia.emit()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.deleteEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-eraser\"\n [label]=\"'form.imageControl.removeImageButton' | translate\"\n (click)=\"removeImage()\"\n class=\"w-full\"\n [size]=\"formTemplate.size\"\n [disabled]=\"!image || disabled\">\n </p-button>\n </p-fluid>\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'}\" appendTo=\"body\">\n <onshore-image-chooser\n (choosen)=\"getFileImage($event)\"\n (canceled)=\"imageChooserDialogVisible = false\"\n [imageSettings]=\"imageSettings\"\n [formTemplate]=\"formTemplate\">\n </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n <onshore-webcam\n *ngIf=\"webcamDialogVisible\"\n (shot)=\"getWebcamImage($event)\"\n (canceled)=\"webcamDialogVisible = false\"\n [imageSettings]=\"imageSettings\"\n [formTemplate]=\"formTemplate\"></onshore-webcam>\n</p-dialog>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i4.Fluid, selector: "p-fluid" }, { kind: "component", type: OnshoreImagePlaceholderComponent, selector: "onshore-image-placeholder", inputs: ["placeholderIcon", "placeholderImage", "image", "imageStyle", "placeholderStyle", "showLoader"] }, { kind: "component", type: OnshoreImageChooserComponent, selector: "onshore-image-chooser", inputs: ["formTemplate", "imageSettings"], outputs: ["choosen", "canceled"] }, { kind: "component", type: WebcamComponent, selector: "onshore-webcam", inputs: ["formTemplate", "imageSettings"], outputs: ["shot", "canceled"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1363
1377
|
}
|
|
1364
1378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
|
|
1365
1379
|
type: Component,
|
|
1366
|
-
args: [{ selector: 'onshore-form-image-item', imports: [CommonModule, OnshoreFormItemContainer, FluidModule, OnshoreImagePlaceholderComponent, OnshoreImageChooserComponent, WebcamComponent, TranslateModule, ButtonModule, DialogModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" [hidden]=\"exclude\">\n <div class=\"w-full flex align-items-center gap-2\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\n\n <div class=\"border-solid border-1 border-300 border-round-md overflow-hidden\"\n [style]=\"'background-color: white; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n <onshore-image-placeholder\n class=\"w-full\"\n [image]=\"image\"\n [imageStyle]=\"'width: 100%; height: 100%'\"\n [placeholderIcon]=\"imageSettings.placeholderIcon\"\n [placeholderImage]=\"imageSettings.placeholderImage\"\n [placeholderStyle]=\"'width: 100%; height: 100%'\">\n </onshore-image-placeholder>\n </div>\n\n <div>\n <p-fluid class=\"flex flex-column\">\n <p-button *ngIf=\"imageSettings.imageSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-image\"\n [label]=\"'form.imageControl.uploadImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.webcamSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-camera\"\n [label]=\"'form.imageControl.webcamImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"webcamDialogVisible = true\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.mediaSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-photo-video\"\n [label]=\"'form.imageControl.mediaImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"selectFromMedia.emit()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.deleteEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-eraser\"\n [label]=\"'form.imageControl.removeImageButton' | translate\"\n (click)=\"removeImage()\"\n class=\"w-full\"\n [disabled]=\"!image || disabled\">\n </p-button>\n </p-fluid>\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'}\" appendTo=\"body\">\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'}\" appendTo=\"body\">\n <onshore-webcam\n *ngIf=\"webcamDialogVisible\"\n (shot)=\"getWebcamImage($event)\"\n (canceled)=\"webcamDialogVisible = false\"\n [imageSettings]=\"imageSettings\"></onshore-webcam>\n</p-dialog>\n" }]
|
|
1380
|
+
args: [{ selector: 'onshore-form-image-item', imports: [CommonModule, OnshoreFormItemContainer, FluidModule, OnshoreImagePlaceholderComponent, OnshoreImageChooserComponent, WebcamComponent, TranslateModule, ButtonModule, DialogModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" [hidden]=\"exclude\">\n <div class=\"w-full flex align-items-center gap-2\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\n\n <div class=\"border-solid border-1 border-300 border-round-md overflow-hidden\"\n [style]=\"'background-color: white; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n <onshore-image-placeholder\n class=\"w-full\"\n [image]=\"image\"\n [imageStyle]=\"'width: 100%; height: 100%'\"\n [placeholderIcon]=\"imageSettings.placeholderIcon\"\n [placeholderImage]=\"imageSettings.placeholderImage\"\n [placeholderStyle]=\"'width: 100%; height: 100%'\">\n </onshore-image-placeholder>\n </div>\n\n <div>\n <p-fluid class=\"flex flex-column\">\n <p-button *ngIf=\"imageSettings.imageSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-image\"\n [label]=\"'form.imageControl.uploadImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n [size]=\"formTemplate.size\"\n (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.webcamSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-camera\"\n [label]=\"'form.imageControl.webcamImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n [size]=\"formTemplate.size\"\n (click)=\"webcamDialogVisible = true\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.mediaSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-photo-video\"\n [label]=\"'form.imageControl.mediaImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n [size]=\"formTemplate.size\"\n (click)=\"selectFromMedia.emit()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.deleteEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-eraser\"\n [label]=\"'form.imageControl.removeImageButton' | translate\"\n (click)=\"removeImage()\"\n class=\"w-full\"\n [size]=\"formTemplate.size\"\n [disabled]=\"!image || disabled\">\n </p-button>\n </p-fluid>\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'}\" appendTo=\"body\">\n <onshore-image-chooser\n (choosen)=\"getFileImage($event)\"\n (canceled)=\"imageChooserDialogVisible = false\"\n [imageSettings]=\"imageSettings\"\n [formTemplate]=\"formTemplate\">\n </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n <onshore-webcam\n *ngIf=\"webcamDialogVisible\"\n (shot)=\"getWebcamImage($event)\"\n (canceled)=\"webcamDialogVisible = false\"\n [imageSettings]=\"imageSettings\"\n [formTemplate]=\"formTemplate\"></onshore-webcam>\n</p-dialog>\n" }]
|
|
1367
1381
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
|
|
1368
1382
|
type: Self
|
|
1369
1383
|
}, {
|