@bnsights/bbsf-controls 1.0.74 → 1.0.75
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/README.md +4 -2
- package/bnsights-bbsf-controls-1.0.75.tgz +0 -0
- package/bnsights-bbsf-controls.metadata.json +1 -1
- package/bundles/bnsights-bbsf-controls.umd.js +49 -25
- package/bundles/bnsights-bbsf-controls.umd.js.map +1 -1
- package/esm2015/lib/controls/ImageUpload/ImageUpload.component.js +53 -29
- package/fesm2015/bnsights-bbsf-controls.js +49 -25
- package/fesm2015/bnsights-bbsf-controls.js.map +1 -1
- package/package.json +1 -1
- package/bnsights-bbsf-controls-1.0.74.tgz +0 -0
|
@@ -3155,14 +3155,14 @@ class ImageUploaderComponent {
|
|
|
3155
3155
|
this.modalService = modalService;
|
|
3156
3156
|
this.files = [];
|
|
3157
3157
|
this.OnChange = new EventEmitter();
|
|
3158
|
-
this.ValidationMessage =
|
|
3159
|
-
this.AcceptedType =
|
|
3158
|
+
this.ValidationMessage = '';
|
|
3159
|
+
this.AcceptedType = '';
|
|
3160
3160
|
this.AcceptedTypeArray = [];
|
|
3161
3161
|
this.ToolTipTypeArray = [];
|
|
3162
3162
|
this.imgUrl = null;
|
|
3163
3163
|
this.config = null;
|
|
3164
|
-
this.imageUrl =
|
|
3165
|
-
this.imgwUrl =
|
|
3164
|
+
this.imageUrl = '';
|
|
3165
|
+
this.imgwUrl = '';
|
|
3166
3166
|
this.mdlSampleIsOpen = false;
|
|
3167
3167
|
this.markAllAsTouched = false;
|
|
3168
3168
|
this.validationRules = [];
|
|
@@ -3221,16 +3221,18 @@ class ImageUploaderComponent {
|
|
|
3221
3221
|
width: this.options.ImageCropperWidth,
|
|
3222
3222
|
height: this.options.ImageCropperHeight,
|
|
3223
3223
|
cropBoxResizable: false,
|
|
3224
|
-
autoCrop: true
|
|
3224
|
+
autoCrop: true,
|
|
3225
3225
|
};
|
|
3226
3226
|
}
|
|
3227
3227
|
if (this.options.FileUploadAcceptsTypes != null) {
|
|
3228
3228
|
this.options.FileUploadAcceptsTypes;
|
|
3229
3229
|
}
|
|
3230
3230
|
if (this.options.Value != null) {
|
|
3231
|
-
let imgURL = this.options.Value[
|
|
3232
|
-
if (imgURL !=
|
|
3231
|
+
let imgURL = this.options.Value['fileURL'];
|
|
3232
|
+
if (imgURL != '' && imgURL != undefined && imgURL != null) {
|
|
3233
3233
|
this.ImageSource = imgURL;
|
|
3234
|
+
this.imageUrl = imgURL;
|
|
3235
|
+
}
|
|
3234
3236
|
let element = this.options.Value;
|
|
3235
3237
|
this.FileLikeObject = new FileLikeObject({
|
|
3236
3238
|
name: element.FileName,
|
|
@@ -3241,29 +3243,36 @@ class ImageUploaderComponent {
|
|
|
3241
3243
|
}
|
|
3242
3244
|
if (this.options.FileMaxSizeInMB)
|
|
3243
3245
|
this.maxFileSize = this.options.FileMaxSizeInMB * 1000 * 1000;
|
|
3244
|
-
if (this.options.FileUploadAcceptsTypes != null &&
|
|
3246
|
+
if (this.options.FileUploadAcceptsTypes != null &&
|
|
3247
|
+
this.options.FileUploadAcceptsTypes.length > 0) {
|
|
3245
3248
|
for (let index = 0; index < this.options.FileUploadAcceptsTypes.length; index++) {
|
|
3246
3249
|
const Type = this.options.FileUploadAcceptsTypes[index];
|
|
3247
3250
|
this.AcceptedType = this.AcceptedType + Type;
|
|
3248
3251
|
}
|
|
3249
|
-
this.AcceptedTypeArray = this.AcceptedType.split(
|
|
3252
|
+
this.AcceptedTypeArray = this.AcceptedType.split(',');
|
|
3250
3253
|
for (let index = 0; index < this.AcceptedTypeArray.length; index++) {
|
|
3251
3254
|
const element = this.AcceptedTypeArray[index];
|
|
3252
3255
|
const TypeToolTipe = element.split('/')[1];
|
|
3253
3256
|
this.ToolTipTypeArray.push(TypeToolTipe);
|
|
3254
3257
|
}
|
|
3255
|
-
this.ValidationMessage =
|
|
3258
|
+
this.ValidationMessage =
|
|
3259
|
+
this.ValidationMessage +
|
|
3260
|
+
this.UtilityService.getResourceValue('AllowedTypes') +
|
|
3261
|
+
` (${this.ToolTipTypeArray}) `;
|
|
3256
3262
|
}
|
|
3257
3263
|
if (this.options.FileMaxSizeInMB > 0) {
|
|
3258
|
-
this.ValidationMessage =
|
|
3264
|
+
this.ValidationMessage =
|
|
3265
|
+
this.ValidationMessage +
|
|
3266
|
+
` <br /> ${this.UtilityService.getResourceValue('FileMaxSizeInMB')} ${this.options.FileMaxSizeInMB}`;
|
|
3259
3267
|
}
|
|
3260
|
-
if (this.options.FileUploadAcceptsTypes != null &&
|
|
3268
|
+
if (this.options.FileUploadAcceptsTypes != null &&
|
|
3269
|
+
this.options.FileUploadAcceptsTypes.length > 0) {
|
|
3261
3270
|
}
|
|
3262
3271
|
this.group.addControl(this.options.Name, new FormControl(''));
|
|
3263
3272
|
this.ImageUploadFormControl = this.group.controls[this.options.Name]; // new FormControl('',validationRules);
|
|
3264
|
-
if (this.options.Value != null)
|
|
3265
|
-
|
|
3266
|
-
if (this.options.LabelKey != null && this.options.LabelKey !=
|
|
3273
|
+
// if (this.options.Value != null)
|
|
3274
|
+
// this.group.get(this.options.Name).setValue(this.options.Value);
|
|
3275
|
+
if (this.options.LabelKey != null && this.options.LabelKey != '')
|
|
3267
3276
|
this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
|
|
3268
3277
|
if (this.options.CustomValidation.length > 0) {
|
|
3269
3278
|
let Validations = this.options.CustomValidation;
|
|
@@ -3314,12 +3323,17 @@ class ImageUploaderComponent {
|
|
|
3314
3323
|
const fileType = file.type;
|
|
3315
3324
|
if (file.size > maxFileSize) {
|
|
3316
3325
|
const formControl = this.ImageUploadFormControl;
|
|
3317
|
-
formControl.setErrors({
|
|
3326
|
+
formControl.setErrors({
|
|
3327
|
+
FileMaxSizeInMB: this.options.FileMaxSizeInMB + 'M',
|
|
3328
|
+
});
|
|
3318
3329
|
formControl.markAsTouched();
|
|
3319
3330
|
this.uploader.queue = [];
|
|
3320
3331
|
return;
|
|
3321
3332
|
}
|
|
3322
|
-
if (this.options.FileUploadAcceptsTypes != null &&
|
|
3333
|
+
if (this.options.FileUploadAcceptsTypes != null &&
|
|
3334
|
+
this.options.FileUploadAcceptsTypes.length > 0 &&
|
|
3335
|
+
!(this.AcceptedTypeArray.includes(fileType.toUpperCase()) ||
|
|
3336
|
+
this.AcceptedTypeArray.includes(fileType.toLowerCase()))) {
|
|
3323
3337
|
const formControl = this.ImageUploadFormControl;
|
|
3324
3338
|
formControl.setErrors({ ToolTipTypeError: this.ToolTipTypeArray });
|
|
3325
3339
|
formControl.markAsTouched();
|
|
@@ -3337,7 +3351,9 @@ class ImageUploaderComponent {
|
|
|
3337
3351
|
const fileType = file.type;
|
|
3338
3352
|
if (file.size > maxFileSize) {
|
|
3339
3353
|
const formControl = this.ImageUploadFormControl;
|
|
3340
|
-
formControl.setErrors({
|
|
3354
|
+
formControl.setErrors({
|
|
3355
|
+
FileMaxSizeInMB: this.options.FileMaxSizeInMB + 'M',
|
|
3356
|
+
});
|
|
3341
3357
|
formControl.markAsTouched();
|
|
3342
3358
|
this.uploader.queue = [];
|
|
3343
3359
|
return;
|
|
@@ -3355,18 +3371,23 @@ class ImageUploaderComponent {
|
|
|
3355
3371
|
FileName: file.name,
|
|
3356
3372
|
FileType: file.type,
|
|
3357
3373
|
FileBase64: reader.result.toString().split(',')[1],
|
|
3358
|
-
FileSizeInMB:
|
|
3359
|
-
NameWithExtension: file.name
|
|
3374
|
+
FileSizeInMB: file.size / 1000 / 1000,
|
|
3375
|
+
NameWithExtension: file.name,
|
|
3360
3376
|
};
|
|
3377
|
+
this.options.Value = FileObject;
|
|
3361
3378
|
FilesArray.push(FileObject);
|
|
3362
3379
|
this.group.get(this.options.Name).setValue(FileObject);
|
|
3363
3380
|
this.files = [];
|
|
3364
3381
|
this.files.push(...event.addedFiles);
|
|
3365
3382
|
}
|
|
3366
3383
|
let originalValue = this.ImageUploadFormControl.value;
|
|
3367
|
-
if (this.options.PatchFunction &&
|
|
3384
|
+
if (this.options.PatchFunction &&
|
|
3385
|
+
this.options.PatchPath &&
|
|
3386
|
+
this.ImageUploadFormControl.valid) {
|
|
3368
3387
|
this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
|
|
3369
3388
|
}
|
|
3389
|
+
//Use this line to enable two way binding.
|
|
3390
|
+
this.options.Value = originalValue;
|
|
3370
3391
|
this.OnChange.emit(originalValue);
|
|
3371
3392
|
};
|
|
3372
3393
|
}
|
|
@@ -3378,13 +3399,15 @@ class ImageUploaderComponent {
|
|
|
3378
3399
|
ItemList = null;
|
|
3379
3400
|
//Set Img src by default image (upload)
|
|
3380
3401
|
this.ImageSource = this.options.DefaultImageSrc;
|
|
3381
|
-
if (
|
|
3402
|
+
if (this.files.length == 0 && this.options.IsRequired) {
|
|
3382
3403
|
this.ImageUploadFormControl.markAsTouched();
|
|
3383
3404
|
this.ImageUploadFormControl.setErrors(Validators.required);
|
|
3384
3405
|
this.ImageUploadFormControl.invalid;
|
|
3385
3406
|
}
|
|
3386
3407
|
this.group.get(this.options.Name).setValue(ItemList);
|
|
3387
3408
|
this.OnChange.emit(this.group.get(this.options.Name).value);
|
|
3409
|
+
//Use this line to enable two way binding.
|
|
3410
|
+
this.options.Value = this.group.get(this.options.Name).value;
|
|
3388
3411
|
}
|
|
3389
3412
|
cropImage() {
|
|
3390
3413
|
let ImageCropperObject = this.angularCropper.cropper.getCroppedCanvas({
|
|
@@ -3410,12 +3433,13 @@ class ImageUploaderComponent {
|
|
|
3410
3433
|
FileName: this.EventFile.name,
|
|
3411
3434
|
FileType: this.EventFile.type,
|
|
3412
3435
|
FileBase64: reader.result.toString().split(',')[1],
|
|
3413
|
-
FileSizeInMB:
|
|
3414
|
-
NameWithExtension: this.EventFile.name
|
|
3436
|
+
FileSizeInMB: BlobFile.size / 1000 / 1000,
|
|
3437
|
+
NameWithExtension: this.EventFile.name,
|
|
3415
3438
|
};
|
|
3416
3439
|
BlobFile.name = this.EventFile.name;
|
|
3417
3440
|
FilesArray.push(FileObject);
|
|
3418
3441
|
this.group.get(this.options.Name).setValue(FileObject);
|
|
3442
|
+
this.options.Value = FileObject;
|
|
3419
3443
|
this.files = [];
|
|
3420
3444
|
this.files.push(BlobFile);
|
|
3421
3445
|
this.openModal(false);
|
|
@@ -3438,7 +3462,7 @@ ImageUploaderComponent.controlContainerstatic = null;
|
|
|
3438
3462
|
ImageUploaderComponent.decorators = [
|
|
3439
3463
|
{ type: Component, args: [{
|
|
3440
3464
|
selector: 'BBSF-ImageUpload',
|
|
3441
|
-
template: "<div class=\"form-group bbsf-control bbsf-image-upload\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--Allow dropZone-->\r\n <div *ngIf=\"options.AllowDropZone\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n ngx-dropzone\r\n [disabled]=\"options.IsDisabled\"\r\n [accept]=\"AcceptedType\"\r\n [multiple]=\"options.IsMultiple\"\r\n (change)=\"onFileChange($event)\"\r\n ngDefaultControl\r\n formControlName=\"{{options.Name}}\"\r\n [maxFileSize]=\"maxFileSize\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n <ngx-dropzone-label class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n </div>\r\n </ngx-dropzone-label>\r\n <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n <!--Not allowed dropZone-->\r\n <div *ngIf=\"!options.AllowDropZone\">\r\n <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n <div #element (click)=\"showImageUploader(element)\">\r\n <img [src]=\"ImageSource\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n <div class=\"d-none {{options.ExtraClasses}}\"\r\n ngx-dropzone\r\n [disabled]=\"options.IsDisabled\"\r\n [accept]=\"AcceptedType\"\r\n [multiple]=\"options.IsMultiple\"\r\n (change)=\"onFileChange($event)\"\r\n ngDefaultControl\r\n formControlName=\"{{options.Name}}\"\r\n [maxFileSize]=\"maxFileSize\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n </div>\r\n <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n </ngx-dropzone-image-preview>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- required text-->\r\n <div class=\"bbsf-validation\"\r\n *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n {{getErrorValidation(ImageUploadFormControl.errors|keyvalue)}}\r\n </div>\r\n\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n </div>\r\n <!-- image cropper modal-->\r\n <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n <div class=\"modal-dialog modal-lg\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\">\r\n {{UtilityService.getResourceValue(\"CropImage\")}}\r\n </h4>\r\n <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <div *ngIf=\"imageUrl\">\r\n <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n </angular-cropper>\r\n <img [src]=\"imgwUrl\" />\r\n </div>\r\n <div class=\"cropper-btns\">\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom in\">\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-search-plus\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom out\">\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-search-minus\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move left\">\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-arrow-left\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move right\"
|
|
3465
|
+
template: "<div class=\"form-group bbsf-control bbsf-image-upload\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--Allow dropZone-->\r\n <div *ngIf=\"options.AllowDropZone\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n ngx-dropzone\r\n [disabled]=\"options.IsDisabled\"\r\n [accept]=\"AcceptedType\"\r\n [multiple]=\"options.IsMultiple\"\r\n (change)=\"onFileChange($event)\"\r\n ngDefaultControl\r\n formControlName=\"{{options.Name}}\"\r\n [maxFileSize]=\"maxFileSize\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n <ngx-dropzone-label class=\"dropzone-label\">\r\n <img *ngIf=\"ImageSource\" [src]=\"ImageSource\" style=\"align-items: center;border-radius: 5px;display: flex;height: 100px;justify-content: center;margin: 10px;max-width: 180px;min-height: 100px;min-width: 180px;padding: 0px 20px;position: relative;\" />\r\n <div class=\"svg-and-validation\" *ngIf=\"!ImageSource\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n </div>\r\n </ngx-dropzone-label>\r\n <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n <!--Not allowed dropZone-->\r\n <div *ngIf=\"!options.AllowDropZone\">\r\n <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n <div #element (click)=\"showImageUploader(element)\">\r\n <img [src]=\"ImageSource\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n <div class=\"d-none {{options.ExtraClasses}}\"\r\n ngx-dropzone\r\n [disabled]=\"options.IsDisabled\"\r\n [accept]=\"AcceptedType\"\r\n [multiple]=\"options.IsMultiple\"\r\n (change)=\"onFileChange($event)\"\r\n ngDefaultControl\r\n formControlName=\"{{options.Name}}\"\r\n [maxFileSize]=\"maxFileSize\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n </div>\r\n <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n </ngx-dropzone-image-preview>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- required text-->\r\n <div class=\"bbsf-validation\"\r\n *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n {{getErrorValidation(ImageUploadFormControl.errors|keyvalue)}}\r\n </div>\r\n\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n </div>\r\n <!-- image cropper modal-->\r\n <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n <div class=\"modal-dialog modal-lg\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\">\r\n {{UtilityService.getResourceValue(\"CropImage\")}}\r\n </h4>\r\n <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <div *ngIf=\"imageUrl\">\r\n <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n </angular-cropper>\r\n <img [src]=\"imgwUrl\" />\r\n </div>\r\n <div class=\"cropper-btns\">\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom in\">\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-search-plus\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom out\">\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-search-minus\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move left\">\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-arrow-left\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move right\">\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-arrow-right\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" ngbTooltip=\"Move up\">\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-arrow-up\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" ngbTooltip=\"Move down\">\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-arrow-down\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" ngbTooltip=\"Rotate left\">\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-undo-alt\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" ngbTooltip=\"Rotate right\">\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-redo-alt\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\" align=\"right\">\r\n <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n </button>\r\n <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n {{UtilityService.getResourceValue(\"Crop\")}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n"
|
|
3442
3466
|
},] }
|
|
3443
3467
|
];
|
|
3444
3468
|
ImageUploaderComponent.ctorParameters = () => [
|