@bnsights/bbsf-controls 1.2.17 → 1.2.18

package/README.md

@@ -393,9 +393,18 @@ If the issue persists, consider using a different HTML editor component that's c
 ---
 
 ## Change Log
+
+## 1.2.18 / 09-04-2026
+
+=====================
+
+- Fix `BBSF-FileUpload` `(OnChange)` emitting stale/undefined value on first file selection (emit after value is updated; async emits after upload completes).
+- Fix `BBSF-ImageUpload` / `BBSF-ProfileImageUploader` not working in consuming apps by adding missing `NgxDropzoneModule` import for standalone components.
+
 ## 1.2.17 / 07-04-2026
 
 =====================
+
 - Removed duplicated max file count validation in file upload
 
 ## 1.2.16 / 24-03-2026

package/fesm2022/bnsights-bbsf-controls.mjs

@@ -43,15 +43,16 @@ import * as i6$2 from '@kolkov/angular-editor';
 import { AngularEditorModule } from '@kolkov/angular-editor';
 import * as i5$2 from 'ngx-script-loader';
 import { ScriptLoaderModule } from 'ngx-script-loader';
+import * as i7$4 from 'ngx-dropzone';
 import { NgxDropzoneModule } from 'ngx-dropzone';
-import * as i7$4 from 'angular-cropperjs';
+import * as i8 from 'angular-cropperjs';
 import { AngularCropperjsModule } from 'angular-cropperjs';
 import * as i5$3 from 'ng2-file-upload';
 import { FileUploader, FileUploadModule } from 'ng2-file-upload';
 import { takeUntil, switchMap as switchMap$1, map, tap } from 'rxjs/operators';
 import * as i7$5 from '@fullcalendar/angular';
 import { FullCalendarModule } from '@fullcalendar/angular';
-import * as i8 from '@angular/google-maps';
+import * as i8$1 from '@angular/google-maps';
 import { GoogleMapsModule } from '@angular/google-maps';
 import * as i9 from 'angular-ng-autocomplete';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
@@ -7656,6 +7657,7 @@ class FileUploadComponent {
                                     this.fileUploadModel = new FileUploadModel();
                                     this.fileUploadModel.file = AddedFile;
                                     this.setValuePreservingErrors(this.fileUploadModel, this.pendingValidationErrors);
+                                    this.emitPatchedChange(this.group.get(this.options.name).value);
                                 }
                                 else {
                                     FilesArray.push(AddedFile);
@@ -7669,6 +7671,7 @@ class FileUploadComponent {
                                         this.options.value?.correlationID_GUID;
                                     this.setValuePreservingErrors(this.multipleFileUploadModel, this.pendingValidationErrors);
                                     this.isUploadComplete.emit(true);
+                                    this.emitPatchedChange(this.group.get(this.options.name).value);
                                 }
                             }
                         }
@@ -7708,14 +7711,8 @@ class FileUploadComponent {
                                 this.options.value?.correlationID_GUID;
                             this.setValuePreservingErrors(this.multipleFileUploadModel, this.pendingValidationErrors);
                         }
+                        this.emitPatchedChange(this.group.get(this.options.name).value);
                     };
-                    let originalValue = this.group.get(this.options.name).value;
-                    if (this.options.patchFunction &&
-                        this.options.patchPath &&
-                        this.group.get(this.options.name).valid) {
-                        this.controlUtility.patchControlValue(originalValue, this.options.patchFunction, this.options.patchPath);
-                    }
-                    this.OnChange.emit(originalValue);
                 }
             }
         }
@@ -7892,6 +7889,14 @@ class FileUploadComponent {
         // Update the options value for two-way binding
         this.options.value = value;
     }
+    emitPatchedChange(value) {
+        if (this.options.patchFunction &&
+            this.options.patchPath &&
+            this.group.get(this.options.name).valid) {
+            this.controlUtility.patchControlValue(value, this.options.patchFunction, this.options.patchPath);
+        }
+        this.OnChange.emit(value);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FileUploadComponent, deps: [{ token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: FileUploadComponent, isStandalone: true, selector: "BBSF-FileUpload", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange", isUploadComplete: "isUploadComplete" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-file-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) && !options.isReadonly\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div ng2FileDrop class=\"bbsf-input-container {{ options.extraClasses }}\"\r\n      *ngIf=\"options.isDropZone && !(options.isMultipleFile == false && uploader.queue.length > 0) && !options.isReadonly\"\r\n      [ngClass]=\"{ 'another-file-over-class': hasAnotherDropZoneOver }\" (onFileDrop)=\"onFileChange()\"\r\n      (fileOver)=\"fileOverAnother($event)\" [uploader]=\"uploader\" [accept]=\"acceptedType\" id=\"{{ options.name }}\"\r\n      multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\" aria-invalid=\"true\" type=\"file\"\r\n      [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\"\r\n      (click)=\"fileInputDropZone.click()\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n              stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg validation-msg-header text-center\">\r\n            {{ UtilityService.getResourceValue('DragAndDropHere') }}\r\n          </div>\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n        </div>\r\n      </div>\r\n      <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\" name=\"file\" type=\"file\" value=\"\" autocomplete=\"off\"\r\n        (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n        aria-invalid=\"true\" #fileInputDropZone\r\n        [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div class=\"bbsf-input-container\" *ngIf=\"!options.isDropZone && !isHideInput() && !options.isReadonly\"\r\n      (click)=\"fileInput.click()\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n              stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg text-center\">{{ UtilityService.getResourceValue('Upload') }}</div>\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n        </div>\r\n      </div>\r\n      <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\" name=\"file\" type=\"file\" value=\"\" autocomplete=\"off\"\r\n        (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n        aria-invalid=\"true\" #fileInput\r\n        [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly && !options.value\">\r\n      <span class=\"readonly-view\">{{ UtilityService.getResourceValue('NA') }}</span>\r\n    </div>\r\n  </div>\r\n  <!--items uploaded-->\r\n  <div class=\"uploaded-items\">\r\n    <div class=\"btn-group\" *ngFor=\"let item of uploader.queue\">\r\n      <ng-container *ngIf=\"item?.progress == 100 && options.isUploadFileAsync\">\r\n        <a *ngIf=\"item?.file?.rawFile['url']\" href=\"{{ item?.file?.rawFile['url'] }}\"\r\n          class=\"btn-download-file btn-sm btn-progress-upload\" download>\r\n          <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n        </a>\r\n        <a *ngIf=\"item?.file?.rawFile['url'] == null\" class=\"btn-download-file btn-sm btn-progress-upload\">\r\n          <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm\"\r\n          (click)=\"item.remove(); removeFromControlValue(item)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M9.33301 3.70584V3.26663C9.33301 2.65166 9.33301 2.34419 9.20587 2.1093C9.09405 1.9027 8.91555 1.73471 8.69604 1.62944C8.44647 1.50977 8.11977 1.50977 7.46638 1.50977H6.53305C5.87965 1.50977 5.55296 1.50977 5.30339 1.62944C5.08387 1.73471 4.90539 1.9027 4.79354 2.1093C4.66638 2.34419 4.66638 2.65166 4.66638 3.26663V3.70584\"\r\n              stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path\r\n              d=\"M1.75 3.70605H12.25M11.0834 3.70605V9.8551C11.0834 10.7775 11.0834 11.2387 10.8926 11.591C10.7248 11.901 10.4571 12.1529 10.1278 12.3109C9.75345 12.4904 9.26345 12.4904 8.28334 12.4904H5.71666C4.73658 12.4904 4.24653 12.4904 3.87218 12.3109C3.5429 12.1529 3.27519 11.901 3.10741 11.591C2.91666 11.2387 2.91666 10.7775 2.91666 9.8551V3.70605\"\r\n              stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        </button>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!options.isUploadFileAsync\">\r\n        <a href=\"{{ item?.file?.rawFile['url'] }}\" *ngIf=\"item?.file?.rawFile['url']\" class=\"btn btn-download-file btn-sm\" download>\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M21 22H3C2.4 22 2 21.6 2 21C2 20.4 2.4 20 3 20H21C21.6 20 22 20.4 22 21C22 21.6 21.6 22 21 22ZM13 13.4V3C13 2.4 12.6 2 12 2C11.4 2 11 2.4 11 3V13.4H13Z\"\r\n              fill=\"currentColor\"></path>\r\n            <path opacity=\"0.3\" d=\"M7 13.4H17L12.7 17.7C12.3 18.1 11.7 18.1 11.3 17.7L7 13.4Z\" fill=\"currentColor\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n        </a>\r\n         <a *ngIf=\"item?.file?.rawFile['url'] == null\" class=\"btn-download-file btn-sm btn-progress-upload\">\r\n          <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm btn-danger\"\r\n          (click)=\"item.remove(); removeFromControlValue(item)\">\r\n          <i class=\"fa fa-times px-0\"></i>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <!--progress bar file upload-->\r\n  <div *ngFor=\"let item of uploader.queue\">\r\n    <div class=\"upload-items\" [ngClass]=\"{ 'mt-4': options.isMultipleFile == true }\"\r\n      *ngIf=\"item?.progress < 100 && options.isUploadFileAsync\">\r\n      <div class=\"upload-items-toolbar\">\r\n        <h4>{{ item?.file?.name }}</h4>\r\n        <span (click)=\"item.remove(); removeFromControlValue(item)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <g clip-path=\"url(#clip0_1324_13216)\">\r\n              <path opacity=\"0.4\"\r\n                d=\"M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z\"\r\n                stroke=\"#DBE1F0\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              <path d=\"M11.25 6.75L6.75 11.25M6.75 6.75L11.25 11.25\" stroke=\"#DBE1F0\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </g>\r\n            <defs>\r\n              <clipPath id=\"clip0_1324_13216\">\r\n                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n              </clipPath>\r\n            </defs>\r\n          </svg>\r\n        </span>\r\n      </div>\r\n      <div class=\"progress\">\r\n        <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n          [class.file-uploaded]=\"item?.progress < 100\" [style.width.%]=\"item?.progress\" *ngIf=\"item?.progress > 0\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\" *ngIf=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n      {{ getErrorValidation(fileUploadFormControl.errors | keyvalue) }}\r\n    </div>\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)\">\r\n      {{ resetError() }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "directive", type: i5$3.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i5$3.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { kind: "ngmodule", type: NgxDropzoneModule }] }); }
 }
@@ -8237,7 +8242,7 @@ class ImageUploaderComponent {
         this.mdlSampleIsOpen = open;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ImageUploaderComponent, deps: [{ token: i0.NgZone }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i3$2.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: ImageUploaderComponent, isStandalone: true, selector: "BBSF-ImageUpload", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "angularCropper", first: true, predicate: ["angularCropper"], descendants: true }], ngImport: i0, 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))&&!options.isReadonly\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.allowDropZone&&!options.isReadonly\" class=\"bbsf-input-container {{options.extraClasses}}\"\r\n      ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\" [multiple]=\"options.isMultiple\"\r\n      (change)=\"onFileChange($event)\" ngDefaultControl formControlName=\"{{options.name}}\" [maxFileSize]=\"maxFileSize\"\r\n      id=\"{{options.name}}\" [class.is-invalid]=\"imageUploadFormControl.invalid && imageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <img *ngIf=\"imageSource\" [src]=\"imageSource\"\r\n          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\"\r\n            style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\"\r\n              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\"\r\n              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\"\r\n              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\"\r\n        (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&&!options.isReadonly\">\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}}\" ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\"\r\n        [multiple]=\"options.isMultiple\" (change)=\"onFileChange($event)\" ngDefaultControl\r\n        formControlName=\"{{options.name}}\" [maxFileSize]=\"maxFileSize\" 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\"\r\n        (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\r\n    <ngx-dropzone-label *ngIf=\"files.length==0&&options.isReadonly\">\r\n      <div *ngIf=\"imageSource\" #element>\r\n        <img [src]=\"imageSource\" />\r\n      </div>\r\n      <div *ngIf=\"!imageSource\">\r\n        <span class=\"readonly-view\">{{utilityService.getResourceValue('NA')}}</span>\r\n      </div>\r\n    </ngx-dropzone-label>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\" *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) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\"\r\n    [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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"ZoomIn\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"ZoomOut\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveLeft\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveRight\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveUp\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveDown\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"RotateLeft\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"RotateRight\")}}'>\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\r\n  <!-- readonly -->\r\n\r\n\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: AngularCropperjsModule }, { kind: "component", type: i7$4.CropperComponent, selector: "angular-cropper", inputs: ["imageUrl", "settings", "cropbox", "loadImageErrorText", "cropperOptions"], outputs: ["export", "ready"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: ImageUploaderComponent, isStandalone: true, selector: "BBSF-ImageUpload", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "angularCropper", first: true, predicate: ["angularCropper"], descendants: true }], ngImport: i0, 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))&&!options.isReadonly\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.allowDropZone&&!options.isReadonly\" class=\"bbsf-input-container {{options.extraClasses}}\"\r\n      ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\" [multiple]=\"options.isMultiple\"\r\n      (change)=\"onFileChange($event)\" ngDefaultControl formControlName=\"{{options.name}}\" [maxFileSize]=\"maxFileSize\"\r\n      id=\"{{options.name}}\" [class.is-invalid]=\"imageUploadFormControl.invalid && imageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <img *ngIf=\"imageSource\" [src]=\"imageSource\"\r\n          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\"\r\n            style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\"\r\n              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\"\r\n              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\"\r\n              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\"\r\n        (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&&!options.isReadonly\">\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}}\" ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\"\r\n        [multiple]=\"options.isMultiple\" (change)=\"onFileChange($event)\" ngDefaultControl\r\n        formControlName=\"{{options.name}}\" [maxFileSize]=\"maxFileSize\" 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\"\r\n        (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\r\n    <ngx-dropzone-label *ngIf=\"files.length==0&&options.isReadonly\">\r\n      <div *ngIf=\"imageSource\" #element>\r\n        <img [src]=\"imageSource\" />\r\n      </div>\r\n      <div *ngIf=\"!imageSource\">\r\n        <span class=\"readonly-view\">{{utilityService.getResourceValue('NA')}}</span>\r\n      </div>\r\n    </ngx-dropzone-label>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\" *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) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\"\r\n    [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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"ZoomIn\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"ZoomOut\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveLeft\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveRight\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveUp\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveDown\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"RotateLeft\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"RotateRight\")}}'>\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\r\n  <!-- readonly -->\r\n\r\n\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: NgxDropzoneModule }, { kind: "component", type: i7$4.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "processDirectoryDrop", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }, { kind: "directive", type: i7$4.NgxDropzoneLabelDirective, selector: "ngx-dropzone-label" }, { kind: "component", type: i7$4.NgxDropzoneImagePreviewComponent, selector: "ngx-dropzone-image-preview", inputs: ["file"] }, { kind: "ngmodule", type: AngularCropperjsModule }, { kind: "component", type: i8.CropperComponent, selector: "angular-cropper", inputs: ["imageUrl", "settings", "cropbox", "loadImageErrorText", "cropperOptions"], outputs: ["export", "ready"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ImageUploaderComponent, decorators: [{
             type: Component,
@@ -8246,6 +8251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         FileUploadModule,
+                        NgxDropzoneModule,
                         AngularCropperjsModule,
                         NgbModule
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], 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))&&!options.isReadonly\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.allowDropZone&&!options.isReadonly\" class=\"bbsf-input-container {{options.extraClasses}}\"\r\n      ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\" [multiple]=\"options.isMultiple\"\r\n      (change)=\"onFileChange($event)\" ngDefaultControl formControlName=\"{{options.name}}\" [maxFileSize]=\"maxFileSize\"\r\n      id=\"{{options.name}}\" [class.is-invalid]=\"imageUploadFormControl.invalid && imageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <img *ngIf=\"imageSource\" [src]=\"imageSource\"\r\n          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\"\r\n            style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\"\r\n              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\"\r\n              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\"\r\n              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\"\r\n        (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&&!options.isReadonly\">\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}}\" ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\"\r\n        [multiple]=\"options.isMultiple\" (change)=\"onFileChange($event)\" ngDefaultControl\r\n        formControlName=\"{{options.name}}\" [maxFileSize]=\"maxFileSize\" 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\"\r\n        (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\r\n    <ngx-dropzone-label *ngIf=\"files.length==0&&options.isReadonly\">\r\n      <div *ngIf=\"imageSource\" #element>\r\n        <img [src]=\"imageSource\" />\r\n      </div>\r\n      <div *ngIf=\"!imageSource\">\r\n        <span class=\"readonly-view\">{{utilityService.getResourceValue('NA')}}</span>\r\n      </div>\r\n    </ngx-dropzone-label>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\" *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) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\"\r\n    [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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"ZoomIn\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"ZoomOut\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveLeft\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveRight\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveUp\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveDown\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"RotateLeft\")}}'>\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\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"RotateRight\")}}'>\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\r\n  <!-- readonly -->\r\n\r\n\r\n</div>" }]
@@ -8612,7 +8618,7 @@ class ProfileImageUploaderComponent {
         this.mdlSampleIsOpen = open;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ProfileImageUploaderComponent, deps: [{ token: i0.NgZone }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: ProfileImageUploaderComponent, isStandalone: true, selector: "BBSF-ProfileImageUploader", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "angularCropper", first: true, predicate: ["angularCropper"], descendants: true }], ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-profile-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))&&!options.isReadonly\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.allowDropZone&&!options.isReadonly\" class=\"bbsf-input-container {{options.extraClasses}}\"\r\n      ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\" (change)=\"onFileChange($event)\"\r\n      aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.name}}\"\r\n      id=\"{{options.name}}\"\r\n      [class.is-invalid]=\"profileImageUploadFormControl.invalid && profileImageUploadFormControl.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\"\r\n            style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\"\r\n              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\"\r\n              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\"\r\n              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\"\r\n        (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&&!options.isReadonly\" style=\"width:fit-content\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"imageSource\" class=\"profile-upload-img\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.extraClasses}}\" ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\"\r\n        (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl\r\n        formControlName=\"{{options.name}}\" id=\"{{options.name}}\"\r\n        [class.is-invalid]=\"profileImageUploadFormControl.invalid && profileImageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\"\r\n        (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\r\n    <ngx-dropzone-label *ngIf=\"files.length==0&&options.isReadonly\">\r\n      <div #element>\r\n        <img [src]=\"imageSource\" />\r\n      </div>\r\n    </ngx-dropzone-label>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n      *ngIf=\"(profileImageUploadFormControl.invalid && profileImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(profileImageUploadFormControl.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) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\"\r\n    [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>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: AngularCropperjsModule }, { kind: "component", type: i7$4.CropperComponent, selector: "angular-cropper", inputs: ["imageUrl", "settings", "cropbox", "loadImageErrorText", "cropperOptions"], outputs: ["export", "ready"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: ProfileImageUploaderComponent, isStandalone: true, selector: "BBSF-ProfileImageUploader", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "angularCropper", first: true, predicate: ["angularCropper"], descendants: true }], ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-profile-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))&&!options.isReadonly\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.allowDropZone&&!options.isReadonly\" class=\"bbsf-input-container {{options.extraClasses}}\"\r\n      ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\" (change)=\"onFileChange($event)\"\r\n      aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.name}}\"\r\n      id=\"{{options.name}}\"\r\n      [class.is-invalid]=\"profileImageUploadFormControl.invalid && profileImageUploadFormControl.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\"\r\n            style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\"\r\n              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\"\r\n              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\"\r\n              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\"\r\n        (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&&!options.isReadonly\" style=\"width:fit-content\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"imageSource\" class=\"profile-upload-img\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.extraClasses}}\" ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\"\r\n        (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl\r\n        formControlName=\"{{options.name}}\" id=\"{{options.name}}\"\r\n        [class.is-invalid]=\"profileImageUploadFormControl.invalid && profileImageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\"\r\n        (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\r\n    <ngx-dropzone-label *ngIf=\"files.length==0&&options.isReadonly\">\r\n      <div #element>\r\n        <img [src]=\"imageSource\" />\r\n      </div>\r\n    </ngx-dropzone-label>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n      *ngIf=\"(profileImageUploadFormControl.invalid && profileImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(profileImageUploadFormControl.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) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\"\r\n    [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>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: NgxDropzoneModule }, { kind: "component", type: i7$4.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "processDirectoryDrop", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }, { kind: "directive", type: i7$4.NgxDropzoneLabelDirective, selector: "ngx-dropzone-label" }, { kind: "component", type: i7$4.NgxDropzoneImagePreviewComponent, selector: "ngx-dropzone-image-preview", inputs: ["file"] }, { kind: "ngmodule", type: AngularCropperjsModule }, { kind: "component", type: i8.CropperComponent, selector: "angular-cropper", inputs: ["imageUrl", "settings", "cropbox", "loadImageErrorText", "cropperOptions"], outputs: ["export", "ready"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ProfileImageUploaderComponent, decorators: [{
             type: Component,
@@ -8621,6 +8627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         FileUploadModule,
+                        NgxDropzoneModule,
                         AngularCropperjsModule,
                         NgbModule
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "<div class=\"form-group bbsf-control bbsf-profile-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))&&!options.isReadonly\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.allowDropZone&&!options.isReadonly\" class=\"bbsf-input-container {{options.extraClasses}}\"\r\n      ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\" (change)=\"onFileChange($event)\"\r\n      aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.name}}\"\r\n      id=\"{{options.name}}\"\r\n      [class.is-invalid]=\"profileImageUploadFormControl.invalid && profileImageUploadFormControl.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\"\r\n            style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\"\r\n              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\"\r\n              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\"\r\n              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\"\r\n        (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&&!options.isReadonly\" style=\"width:fit-content\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"imageSource\" class=\"profile-upload-img\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.extraClasses}}\" ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\"\r\n        (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl\r\n        formControlName=\"{{options.name}}\" id=\"{{options.name}}\"\r\n        [class.is-invalid]=\"profileImageUploadFormControl.invalid && profileImageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\"\r\n        (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\r\n    <ngx-dropzone-label *ngIf=\"files.length==0&&options.isReadonly\">\r\n      <div #element>\r\n        <img [src]=\"imageSource\" />\r\n      </div>\r\n    </ngx-dropzone-label>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n      *ngIf=\"(profileImageUploadFormControl.invalid && profileImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(profileImageUploadFormControl.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) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\"\r\n    [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>" }]
@@ -9362,7 +9369,7 @@ class MapAutoCompleteComponent {
         this.closeMapModal();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: MapAutoCompleteComponent, deps: [{ token: i0.NgZone }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i4.BBSFTranslateService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i5$2.ScriptService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: MapAutoCompleteComponent, isStandalone: true, selector: "BBSF-MapAutoComplete", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["mapSearch"], descendants: true }, { propertyName: "advancedMapModal", first: true, predicate: ["advancedMapModal"], descendants: true }, { propertyName: "setLocationSearch", first: true, predicate: ["setLocationSearch"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"showMap\">\r\n  <div class=\"form-group bbsf-control bbsf-maps\" [formGroup]=\"group\">\r\n    <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n      <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n        {{options.labelValue}}\r\n        <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n          class=\"text-danger\">*</span>\r\n      </label>\r\n\r\n      <!--#region input-->\r\n      <div class=\"input-group bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n        <input class=\"form-control input-icon-o {{options.extraClasses}}\" [value]=\"mapAutoCompleteModel.text\"\r\n          [address]=\"mapAutoCompleteModel.text\" value=\"{{mapAutoCompleteModel.text}}\"\r\n          aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n          [class.is-invalid]=\"mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched\"\r\n          [placeholder]=\"options.placeholder\" [id]=\"options.name\" (keyup)=\"GermanAddressMapped($event)\" #mapSearch />\r\n        <button *ngIf=\"options.showAdvancedMap\" class=\"border-0 btn-secondary btn-icon-o\"\r\n          ngbTooltip=\"{{translateValue('SetLocation')}}\" type=\"button\" (click)=\"openMapModal()\">\r\n\r\n          <span class=\"svg-icon svg-icon-1\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z\"\r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              <path\r\n                d=\"M12 22C16 18 20 14.4183 20 10C20 5.58172 16.4183 2 12 2C7.58172 2 4 5.58172 4 10C4 14.4183 8 18 12 22Z\"\r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n          </span>\r\n\r\n        </button>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n      <!-- #region readonly -->\r\n      <div *ngIf=\"options.isReadonly\">\r\n        <a href=\"{{mapAutoCompleteModel.googleMapsURL}}\" target=\"_blank\">{{mapAutoCompleteModel.text}}</a>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n    </div>\r\n\r\n    <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" *ngIf=\"(mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched)\">\r\n        {{getErrorValidation(mapAutoCompleteFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">\r\n      {{resetError()}} </div>\r\n\r\n  </div>\r\n\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngClass]=\"{'bbsf-blur': modalIsOpen}\"\r\n    [ngStyle]=\"{'display': modalIsOpen ? '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            {{translateValue('SetLocationOnMap')}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"closeMapModal()\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <input class=\"form-control mt-3 mb-3\" id=\"setLocationSearch\" #setLocationSearch type=\"text\"\r\n            placeholder=\"{{translateValue('SetLocation')}}\">\r\n          <div class=\"google-map-container\">\r\n            <google-map [zoom]=\"zoomLevel\" [center]=\"mapCenter\" [width]=\"null\" [height]=\"null\" #googleMap (mapClick)=\"onMapClick($event)\">\r\n              <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n            </google-map>\r\n          </div>\r\n          <div class=\"text-danger\" *ngIf=\"(options.validateLocationWithinCity && options.city && invalidLocationWithinCity)\">\r\n            {{translateValue('InvalidLocationWithinCity').replace('{0}', options.city)}}\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"closeMapModal()\">\r\n            {{translateValue(\"Cancel\")}}\r\n          </button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-brand\" (click)=\"submitSetLocation()\">\r\n            {{translateValue('Confirm')}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ScriptLoaderModule }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i8.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i8.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: MapAutoCompleteComponent, isStandalone: true, selector: "BBSF-MapAutoComplete", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["mapSearch"], descendants: true }, { propertyName: "advancedMapModal", first: true, predicate: ["advancedMapModal"], descendants: true }, { propertyName: "setLocationSearch", first: true, predicate: ["setLocationSearch"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"showMap\">\r\n  <div class=\"form-group bbsf-control bbsf-maps\" [formGroup]=\"group\">\r\n    <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n      <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n        {{options.labelValue}}\r\n        <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n          class=\"text-danger\">*</span>\r\n      </label>\r\n\r\n      <!--#region input-->\r\n      <div class=\"input-group bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n        <input class=\"form-control input-icon-o {{options.extraClasses}}\" [value]=\"mapAutoCompleteModel.text\"\r\n          [address]=\"mapAutoCompleteModel.text\" value=\"{{mapAutoCompleteModel.text}}\"\r\n          aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n          [class.is-invalid]=\"mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched\"\r\n          [placeholder]=\"options.placeholder\" [id]=\"options.name\" (keyup)=\"GermanAddressMapped($event)\" #mapSearch />\r\n        <button *ngIf=\"options.showAdvancedMap\" class=\"border-0 btn-secondary btn-icon-o\"\r\n          ngbTooltip=\"{{translateValue('SetLocation')}}\" type=\"button\" (click)=\"openMapModal()\">\r\n\r\n          <span class=\"svg-icon svg-icon-1\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z\"\r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              <path\r\n                d=\"M12 22C16 18 20 14.4183 20 10C20 5.58172 16.4183 2 12 2C7.58172 2 4 5.58172 4 10C4 14.4183 8 18 12 22Z\"\r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n          </span>\r\n\r\n        </button>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n      <!-- #region readonly -->\r\n      <div *ngIf=\"options.isReadonly\">\r\n        <a href=\"{{mapAutoCompleteModel.googleMapsURL}}\" target=\"_blank\">{{mapAutoCompleteModel.text}}</a>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n    </div>\r\n\r\n    <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" *ngIf=\"(mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched)\">\r\n        {{getErrorValidation(mapAutoCompleteFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">\r\n      {{resetError()}} </div>\r\n\r\n  </div>\r\n\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngClass]=\"{'bbsf-blur': modalIsOpen}\"\r\n    [ngStyle]=\"{'display': modalIsOpen ? '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            {{translateValue('SetLocationOnMap')}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"closeMapModal()\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <input class=\"form-control mt-3 mb-3\" id=\"setLocationSearch\" #setLocationSearch type=\"text\"\r\n            placeholder=\"{{translateValue('SetLocation')}}\">\r\n          <div class=\"google-map-container\">\r\n            <google-map [zoom]=\"zoomLevel\" [center]=\"mapCenter\" [width]=\"null\" [height]=\"null\" #googleMap (mapClick)=\"onMapClick($event)\">\r\n              <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n            </google-map>\r\n          </div>\r\n          <div class=\"text-danger\" *ngIf=\"(options.validateLocationWithinCity && options.city && invalidLocationWithinCity)\">\r\n            {{translateValue('InvalidLocationWithinCity').replace('{0}', options.city)}}\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"closeMapModal()\">\r\n            {{translateValue(\"Cancel\")}}\r\n          </button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-brand\" (click)=\"submitSetLocation()\">\r\n            {{translateValue('Confirm')}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ScriptLoaderModule }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i8$1.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i8$1.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: MapAutoCompleteComponent, decorators: [{
             type: Component,