@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
|
@@ -3542,14 +3542,14 @@
|
|
|
3542
3542
|
this.modalService = modalService;
|
|
3543
3543
|
this.files = [];
|
|
3544
3544
|
this.OnChange = new i0.EventEmitter();
|
|
3545
|
-
this.ValidationMessage =
|
|
3546
|
-
this.AcceptedType =
|
|
3545
|
+
this.ValidationMessage = '';
|
|
3546
|
+
this.AcceptedType = '';
|
|
3547
3547
|
this.AcceptedTypeArray = [];
|
|
3548
3548
|
this.ToolTipTypeArray = [];
|
|
3549
3549
|
this.imgUrl = null;
|
|
3550
3550
|
this.config = null;
|
|
3551
|
-
this.imageUrl =
|
|
3552
|
-
this.imgwUrl =
|
|
3551
|
+
this.imageUrl = '';
|
|
3552
|
+
this.imgwUrl = '';
|
|
3553
3553
|
this.mdlSampleIsOpen = false;
|
|
3554
3554
|
this.markAllAsTouched = false;
|
|
3555
3555
|
this.validationRules = [];
|
|
@@ -3609,16 +3609,18 @@
|
|
|
3609
3609
|
width: this.options.ImageCropperWidth,
|
|
3610
3610
|
height: this.options.ImageCropperHeight,
|
|
3611
3611
|
cropBoxResizable: false,
|
|
3612
|
-
autoCrop: true
|
|
3612
|
+
autoCrop: true,
|
|
3613
3613
|
};
|
|
3614
3614
|
}
|
|
3615
3615
|
if (this.options.FileUploadAcceptsTypes != null) {
|
|
3616
3616
|
this.options.FileUploadAcceptsTypes;
|
|
3617
3617
|
}
|
|
3618
3618
|
if (this.options.Value != null) {
|
|
3619
|
-
var imgURL = this.options.Value[
|
|
3620
|
-
if (imgURL !=
|
|
3619
|
+
var imgURL = this.options.Value['fileURL'];
|
|
3620
|
+
if (imgURL != '' && imgURL != undefined && imgURL != null) {
|
|
3621
3621
|
this.ImageSource = imgURL;
|
|
3622
|
+
this.imageUrl = imgURL;
|
|
3623
|
+
}
|
|
3622
3624
|
var element = this.options.Value;
|
|
3623
3625
|
this.FileLikeObject = new ng2FileUpload.FileLikeObject({
|
|
3624
3626
|
name: element.FileName,
|
|
@@ -3629,29 +3631,36 @@
|
|
|
3629
3631
|
}
|
|
3630
3632
|
if (this.options.FileMaxSizeInMB)
|
|
3631
3633
|
this.maxFileSize = this.options.FileMaxSizeInMB * 1000 * 1000;
|
|
3632
|
-
if (this.options.FileUploadAcceptsTypes != null &&
|
|
3634
|
+
if (this.options.FileUploadAcceptsTypes != null &&
|
|
3635
|
+
this.options.FileUploadAcceptsTypes.length > 0) {
|
|
3633
3636
|
for (var index = 0; index < this.options.FileUploadAcceptsTypes.length; index++) {
|
|
3634
3637
|
var Type = this.options.FileUploadAcceptsTypes[index];
|
|
3635
3638
|
this.AcceptedType = this.AcceptedType + Type;
|
|
3636
3639
|
}
|
|
3637
|
-
this.AcceptedTypeArray = this.AcceptedType.split(
|
|
3640
|
+
this.AcceptedTypeArray = this.AcceptedType.split(',');
|
|
3638
3641
|
for (var index = 0; index < this.AcceptedTypeArray.length; index++) {
|
|
3639
3642
|
var element = this.AcceptedTypeArray[index];
|
|
3640
3643
|
var TypeToolTipe = element.split('/')[1];
|
|
3641
3644
|
this.ToolTipTypeArray.push(TypeToolTipe);
|
|
3642
3645
|
}
|
|
3643
|
-
this.ValidationMessage =
|
|
3646
|
+
this.ValidationMessage =
|
|
3647
|
+
this.ValidationMessage +
|
|
3648
|
+
this.UtilityService.getResourceValue('AllowedTypes') +
|
|
3649
|
+
(" (" + this.ToolTipTypeArray + ") ");
|
|
3644
3650
|
}
|
|
3645
3651
|
if (this.options.FileMaxSizeInMB > 0) {
|
|
3646
|
-
this.ValidationMessage =
|
|
3652
|
+
this.ValidationMessage =
|
|
3653
|
+
this.ValidationMessage +
|
|
3654
|
+
(" <br /> " + this.UtilityService.getResourceValue('FileMaxSizeInMB') + " " + this.options.FileMaxSizeInMB);
|
|
3647
3655
|
}
|
|
3648
|
-
if (this.options.FileUploadAcceptsTypes != null &&
|
|
3656
|
+
if (this.options.FileUploadAcceptsTypes != null &&
|
|
3657
|
+
this.options.FileUploadAcceptsTypes.length > 0) {
|
|
3649
3658
|
}
|
|
3650
3659
|
this.group.addControl(this.options.Name, new forms.FormControl(''));
|
|
3651
3660
|
this.ImageUploadFormControl = this.group.controls[this.options.Name]; // new FormControl('',validationRules);
|
|
3652
|
-
if (this.options.Value != null)
|
|
3653
|
-
|
|
3654
|
-
if (this.options.LabelKey != null && this.options.LabelKey !=
|
|
3661
|
+
// if (this.options.Value != null)
|
|
3662
|
+
// this.group.get(this.options.Name).setValue(this.options.Value);
|
|
3663
|
+
if (this.options.LabelKey != null && this.options.LabelKey != '')
|
|
3655
3664
|
this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
|
|
3656
3665
|
if (this.options.CustomValidation.length > 0) {
|
|
3657
3666
|
var Validations = this.options.CustomValidation;
|
|
@@ -3703,12 +3712,17 @@
|
|
|
3703
3712
|
var fileType = file.type;
|
|
3704
3713
|
if (file.size > maxFileSize) {
|
|
3705
3714
|
var formControl = this.ImageUploadFormControl;
|
|
3706
|
-
formControl.setErrors({
|
|
3715
|
+
formControl.setErrors({
|
|
3716
|
+
FileMaxSizeInMB: this.options.FileMaxSizeInMB + 'M',
|
|
3717
|
+
});
|
|
3707
3718
|
formControl.markAsTouched();
|
|
3708
3719
|
this.uploader.queue = [];
|
|
3709
3720
|
return;
|
|
3710
3721
|
}
|
|
3711
|
-
if (this.options.FileUploadAcceptsTypes != null &&
|
|
3722
|
+
if (this.options.FileUploadAcceptsTypes != null &&
|
|
3723
|
+
this.options.FileUploadAcceptsTypes.length > 0 &&
|
|
3724
|
+
!(this.AcceptedTypeArray.includes(fileType.toUpperCase()) ||
|
|
3725
|
+
this.AcceptedTypeArray.includes(fileType.toLowerCase()))) {
|
|
3712
3726
|
var formControl = this.ImageUploadFormControl;
|
|
3713
3727
|
formControl.setErrors({ ToolTipTypeError: this.ToolTipTypeArray });
|
|
3714
3728
|
formControl.markAsTouched();
|
|
@@ -3726,7 +3740,9 @@
|
|
|
3726
3740
|
var fileType = file.type;
|
|
3727
3741
|
if (file.size > maxFileSize_1) {
|
|
3728
3742
|
var formControl = this_1.ImageUploadFormControl;
|
|
3729
|
-
formControl.setErrors({
|
|
3743
|
+
formControl.setErrors({
|
|
3744
|
+
FileMaxSizeInMB: this_1.options.FileMaxSizeInMB + 'M',
|
|
3745
|
+
});
|
|
3730
3746
|
formControl.markAsTouched();
|
|
3731
3747
|
this_1.uploader.queue = [];
|
|
3732
3748
|
return { value: void 0 };
|
|
@@ -3745,18 +3761,23 @@
|
|
|
3745
3761
|
FileName: file.name,
|
|
3746
3762
|
FileType: file.type,
|
|
3747
3763
|
FileBase64: reader_1.result.toString().split(',')[1],
|
|
3748
|
-
FileSizeInMB:
|
|
3749
|
-
NameWithExtension: file.name
|
|
3764
|
+
FileSizeInMB: file.size / 1000 / 1000,
|
|
3765
|
+
NameWithExtension: file.name,
|
|
3750
3766
|
};
|
|
3767
|
+
_this.options.Value = FileObject_1;
|
|
3751
3768
|
FilesArray.push(FileObject_1);
|
|
3752
3769
|
_this.group.get(_this.options.Name).setValue(FileObject_1);
|
|
3753
3770
|
_this.files = [];
|
|
3754
3771
|
(_a = _this.files).push.apply(_a, __spreadArray([], __read(event.addedFiles)));
|
|
3755
3772
|
}
|
|
3756
3773
|
var originalValue = _this.ImageUploadFormControl.value;
|
|
3757
|
-
if (_this.options.PatchFunction &&
|
|
3774
|
+
if (_this.options.PatchFunction &&
|
|
3775
|
+
_this.options.PatchPath &&
|
|
3776
|
+
_this.ImageUploadFormControl.valid) {
|
|
3758
3777
|
_this.controlUtility.patchControlValue(originalValue, _this.options.PatchFunction, _this.options.PatchPath);
|
|
3759
3778
|
}
|
|
3779
|
+
//Use this line to enable two way binding.
|
|
3780
|
+
_this.options.Value = originalValue;
|
|
3760
3781
|
_this.OnChange.emit(originalValue);
|
|
3761
3782
|
};
|
|
3762
3783
|
}
|
|
@@ -3774,13 +3795,15 @@
|
|
|
3774
3795
|
ItemList = null;
|
|
3775
3796
|
//Set Img src by default image (upload)
|
|
3776
3797
|
this.ImageSource = this.options.DefaultImageSrc;
|
|
3777
|
-
if (
|
|
3798
|
+
if (this.files.length == 0 && this.options.IsRequired) {
|
|
3778
3799
|
this.ImageUploadFormControl.markAsTouched();
|
|
3779
3800
|
this.ImageUploadFormControl.setErrors(forms.Validators.required);
|
|
3780
3801
|
this.ImageUploadFormControl.invalid;
|
|
3781
3802
|
}
|
|
3782
3803
|
this.group.get(this.options.Name).setValue(ItemList);
|
|
3783
3804
|
this.OnChange.emit(this.group.get(this.options.Name).value);
|
|
3805
|
+
//Use this line to enable two way binding.
|
|
3806
|
+
this.options.Value = this.group.get(this.options.Name).value;
|
|
3784
3807
|
};
|
|
3785
3808
|
ImageUploaderComponent.prototype.cropImage = function () {
|
|
3786
3809
|
var _this = this;
|
|
@@ -3808,12 +3831,13 @@
|
|
|
3808
3831
|
FileName: _this.EventFile.name,
|
|
3809
3832
|
FileType: _this.EventFile.type,
|
|
3810
3833
|
FileBase64: reader.result.toString().split(',')[1],
|
|
3811
|
-
FileSizeInMB:
|
|
3812
|
-
NameWithExtension: _this.EventFile.name
|
|
3834
|
+
FileSizeInMB: BlobFile.size / 1000 / 1000,
|
|
3835
|
+
NameWithExtension: _this.EventFile.name,
|
|
3813
3836
|
};
|
|
3814
3837
|
BlobFile.name = _this.EventFile.name;
|
|
3815
3838
|
FilesArray.push(FileObject);
|
|
3816
3839
|
_this.group.get(_this.options.Name).setValue(FileObject);
|
|
3840
|
+
_this.options.Value = FileObject;
|
|
3817
3841
|
_this.files = [];
|
|
3818
3842
|
_this.files.push(BlobFile);
|
|
3819
3843
|
_this.openModal(false);
|
|
@@ -3837,7 +3861,7 @@
|
|
|
3837
3861
|
ImageUploaderComponent.decorators = [
|
|
3838
3862
|
{ type: i0.Component, args: [{
|
|
3839
3863
|
selector: 'BBSF-ImageUpload',
|
|
3840
|
-
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\"
|
|
3864
|
+
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"
|
|
3841
3865
|
},] }
|
|
3842
3866
|
];
|
|
3843
3867
|
ImageUploaderComponent.ctorParameters = function () { return [
|