@bnsights/bbsf-controls 1.2.26 → 1.2.28

package/fesm2022/bnsights-bbsf-controls.mjs

@@ -4,9 +4,9 @@ import * as i5 from '@angular/common';
 import { CommonModule, DatePipe, KeyValuePipe } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { Validators, FormControl, FormsModule, ReactiveFormsModule, FormGroup, FormGroupDirective, ControlContainer, NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i3$3 from '@angular/router';
+import * as i3$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i3$2 from '@ng-bootstrap/ng-bootstrap';
+import * as i4$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbModule, NgbTooltip, NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import * as i1$1 from '@ngrx/store-devtools';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@@ -52,7 +52,7 @@ import * as i7$3 from 'ngx-dropzone';
 import { NgxDropzoneModule } from 'ngx-dropzone';
 import * as i8 from 'angular-cropperjs';
 import { AngularCropperjsModule } from 'angular-cropperjs';
-import * as i5$2 from 'ng2-file-upload';
+import * as i6$3 from 'ng2-file-upload';
 import { FileUploader, FileUploadModule } from 'ng2-file-upload';
 import { takeUntil, switchMap, map, tap } from 'rxjs/operators';
 import { ImageCropperComponent } from 'ngx-image-cropper';
@@ -60,7 +60,7 @@ import * as i7$4 from '@fullcalendar/angular';
 import { FullCalendarModule } from '@fullcalendar/angular';
 import * as i8$1 from '@angular/google-maps';
 import { GoogleMapsModule } from '@angular/google-maps';
-import * as i6$3 from 'ngx-script-loader';
+import * as i6$4 from 'ngx-script-loader';
 import { ScriptLoaderModule } from 'ngx-script-loader';
 import * as i9 from 'angular-ng-autocomplete';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
@@ -71,7 +71,7 @@ import interactionPlugin from '@fullcalendar/interaction';
 import listPlugin from '@fullcalendar/list';
 import enGbLocale from '@fullcalendar/core/locales/en-gb';
 import ArLocale from '@fullcalendar/core/locales/ar';
-import * as i3$4 from 'ngx-bootstrap/typeahead';
+import * as i3$3 from 'ngx-bootstrap/typeahead';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { Title } from '@angular/platform-browser';
 import { saveAs } from 'file-saver';
@@ -106,95 +106,95 @@ class ErrorMassageValidation {
         control.setErrors({ minlength: true });
         control.markAsTouched();
     }
-    getErrorMassageValidation(error) {
+    getErrorMassageValidation(error, options) {
         let result = '';
         switch (error.key) {
             case 'required':
-                result = this.utilityService.getResourceValue('RequiredValidationKey');
+                result = options?.requiredErrorMsg || this.utilityService.getResourceValue('RequiredValidationKey');
                 break;
             case 'email':
-                result = this.utilityService.getResourceValue('EmailValidationKey');
+                result = options?.emailErrorMsg || this.utilityService.getResourceValue('EmailValidationKey');
                 break;
             case 'EmailValidationKey':
-                result = this.utilityService.getResourceValue('EmailValidationKey');
+                result = options?.emailErrorMsg || this.utilityService.getResourceValue('EmailValidationKey');
                 break;
             case 'URLValidationKey':
-                result = this.utilityService.getResourceValue('urlValidationError');
+                result = options?.urlErrorMsg || this.utilityService.getResourceValue('urlValidationError');
                 break;
             case 'pattern':
-                result = this.utilityService.getResourceValue('NumberValidationKey');
+                result = options?.numberErrorMsg || this.utilityService.getResourceValue('NumberValidationKey');
                 break;
             case 'maxlength':
-                result = `${this.utilityService.getResourceValue('MaxLenghtValidationKey')} ${error.value.requiredLength}`;
+                result = `${options?.maxLengthErrorMsg || this.utilityService.getResourceValue('MaxLenghtValidationKey')} ${error.value.requiredLength}`;
                 break;
             case 'minlength':
-                result = `${this.utilityService.getResourceValue('MinLenghtValidationKey')} ${error.value.requiredLength}`;
+                result = `${options?.minLengthErrorMsg || this.utilityService.getResourceValue('MinLenghtValidationKey')} ${error.value.requiredLength}`;
                 break;
             case 'min':
-                result = `${this.utilityService.getResourceValue('MinValueValidationKey')} ${error.value.min}`;
+                result = `${options?.minValueErrorMsg || this.utilityService.getResourceValue('MinValueValidationKey')} ${error.value.min}`;
                 break;
             case 'max':
-                result = `${this.utilityService.getResourceValue('MaxValueValidationKey')} ${error.value.max}`;
+                result = `${options?.maxValueErrorMsg || this.utilityService.getResourceValue('MaxValueValidationKey')} ${error.value.max}`;
                 break;
             case 'IntegerNumberValidationKey':
-                result = this.utilityService.getResourceValue('IntegerNumberValidationKey');
+                result = options?.integerNumberErrorMsg || this.utilityService.getResourceValue('IntegerNumberValidationKey');
                 break;
             case 'PositiveNumberValidationKey':
-                result = this.utilityService.getResourceValue('PositiveNumberValidationKey');
+                result = options?.positiveNumberErrorMsg || this.utilityService.getResourceValue('PositiveNumberValidationKey');
                 break;
             case 'validatePhoneNumber':
-                result = this.utilityService.getResourceValue('PhoneNumberValidationKey');
+                result = options?.phoneNumberErrorMsg || this.utilityService.getResourceValue('PhoneNumberValidationKey');
                 break;
             case 'mask':
-                result = `${this.utilityService.getResourceValue('MaskValidationKey')} ${error.value.requiredMask}`;
+                result = `${options?.maskErrorMsg || this.utilityService.getResourceValue('MaskValidationKey')} ${error.value.requiredMask}`;
                 break;
             case 'passwordComplexityHasNumber':
-                result = this.utilityService.getResourceValue('PasswordComplexityHasNumber');
+                result = options?.passwordHasNumberErrorMsg || this.utilityService.getResourceValue('PasswordComplexityHasNumber');
                 break;
             case 'ArabicLetterOnly':
-                result = this.utilityService.getResourceValue('ArabicLetterOnly');
+                result = options?.arabicLetterOnlyErrorMsg || this.utilityService.getResourceValue('ArabicLetterOnly');
                 break;
             case 'EnglishLetterOnly':
-                result = this.utilityService.getResourceValue('EnglishLetterOnly');
+                result = options?.englishLetterOnlyErrorMsg || this.utilityService.getResourceValue('EnglishLetterOnly');
                 break;
             case 'ArabicIsRequiredAndOnly50CharactersEnglish':
-                result = this.utilityService.getResourceValue('VAL_ArabicIsRequiredAndOnly50CharactersEnglish');
+                result = options?.arabicRequiredAndEnglishMax50ErrorMsg || this.utilityService.getResourceValue('VAL_ArabicIsRequiredAndOnly50CharactersEnglish');
                 break;
             case 'passwordComplexityHasCapitalLetter':
-                result = this.utilityService.getResourceValue('PasswordComplexityHasCapitalLetter');
+                result = options?.passwordHasCapitalLetterErrorMsg || this.utilityService.getResourceValue('PasswordComplexityHasCapitalLetter');
                 break;
             case 'passwordComplexityHasSmallLetter':
-                result = this.utilityService.getResourceValue('PasswordComplexityHasSmallLetter');
+                result = options?.passwordHasSmallLetterErrorMsg || this.utilityService.getResourceValue('PasswordComplexityHasSmallLetter');
                 break;
             case 'passwordComplexityHasSpecialLetter':
-                result = this.utilityService.getResourceValue('PasswordComplexityHasSpecialLetter');
+                result = options?.passwordHasSpecialLetterErrorMsg || this.utilityService.getResourceValue('PasswordComplexityHasSpecialLetter');
                 break;
             case 'MaxWordCountValidationKey':
-                result = `${this.utilityService.getResourceValue('MaxWordCountValidationKey')} ${error.value}`;
+                result = `${options?.maxWordCountErrorMsg || this.utilityService.getResourceValue('MaxWordCountValidationKey')} ${error.value}`;
                 break;
             case 'NewSelectionValidationKey':
-                result = this.utilityService.getResourceValue('NewSelectionValidationKey');
+                result = options?.newSelectionErrorMsg || this.utilityService.getResourceValue('NewSelectionValidationKey');
                 break;
             case 'MaxFileCountValidationKey':
-                result = `${this.utilityService.getResourceValue('MaxFileCountValidationKey')} ${error.value}`;
+                result = `${options?.maxFileCountErrorMsg || this.utilityService.getResourceValue('MaxFileCountValidationKey')} ${error.value}`;
                 break;
             case 'MinFileCountValidationKey':
-                result = `${this.utilityService.getResourceValue('MinFileCountValidationKey')} ${error.value}`;
+                result = `${options?.minFileCountErrorMsg || this.utilityService.getResourceValue('MinFileCountValidationKey')} ${error.value}`;
                 break;
             case 'MaxSizeForAllFilesInMB':
-                result = `${this.utilityService.getResourceValue('MaxSizeForAllFilesInMB')} ${error.value}`;
+                result = `${options?.maxSizeTotalErrorMsg || this.utilityService.getResourceValue('MaxSizeForAllFilesInMB')} ${error.value}`;
                 break;
             case 'FileMaxSizeInMB':
-                result = `${this.utilityService.getResourceValue('FileMaxSizeInMB')} ${error.value}`;
+                result = `${options?.maxFileSizeErrorMsg || this.utilityService.getResourceValue('FileMaxSizeInMB')} ${error.value}`;
                 break;
             case 'ToolTipTypeError':
-                result = `${this.utilityService.getResourceValue('ToolTipTypeError')} ${error.value}`;
+                result = `${options?.toolTipTypeErrorMsg || this.utilityService.getResourceValue('ToolTipTypeError')} ${error.value}`;
                 break;
             case 'InvalidEndDate':
-                result = this.utilityService.getResourceValue('InvalidEndDate');
+                result = options?.invalidEndDateErrorMsg || this.utilityService.getResourceValue('InvalidEndDate');
                 break;
             case 'InvalidStartDate':
-                result = this.utilityService.getResourceValue('InvalidStartDate');
+                result = options?.invalidStartDateErrorMsg || this.utilityService.getResourceValue('InvalidStartDate');
                 break;
             case 'DuplicateFileError':
                 result = error.value;
@@ -219,7 +219,7 @@ class ControlUtility {
         this.controlValidationService = controlValidationService;
         this.utilityService = utilityService;
     }
-    getErrorValidation(ErrorsItem, customValidation) {
+    getErrorValidation(ErrorsItem, customValidation, options) {
         let result = '';
         ErrorsItem.forEach(element => {
             if (element.key === 'customerError' && ErrorsItem.length === 1) {
@@ -235,7 +235,7 @@ class ControlUtility {
                 result = element.value;
             }
             else {
-                result = this.ErrorHandler.getErrorMassageValidation(element);
+                result = this.ErrorHandler.getErrorMassageValidation(element, options);
             }
         });
         return result;
@@ -305,7 +305,7 @@ class ControlUtility {
         //   UtilityService.showGlobalError();
         //   this.scrollToGlobalErrorMassage()
         // }
-        return this.getErrorValidation(ErrorList, options.customValidation);
+        return this.getErrorValidation(ErrorList, options.customValidation, options);
     }
     scrollToGlobalErrorMassage() {
         let element = document.getElementById('errorId');
@@ -1374,7 +1374,7 @@ class TextAreaComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TextAreaComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true, skipSelf: true }, { token: i2.FormGroupDirective, optional: true }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i3.SpeechRecognitionService }, { token: i4.LanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: TextAreaComponent, isStandalone: true, selector: "BBSF-TextArea", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-textarea\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!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    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"{\r\n      'p-120px': options.enableSpeechRecognition && options.enableCopyToClipboard,\r\n      'p-80px': options.enableSpeechRecognition && !options.enableCopyToClipboard,\r\n      'p-40px': !options.enableSpeechRecognition && options.enableCopyToClipboard\r\n    }\">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n        [dir]=\"textDir\" [attr.aria-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        [attr.aria-describedby]=\"ariaDescribedBy\" [attr.aria-label]=\"options.labelValue || options.placeholder\"\r\n        formControlName=\"{{options.name}}\"\r\n        [class.is-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"trimControlValue()\" rows=\"{{options.rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.cols}}\"\r\n        [attr.minlength]=\"options.minLength\" [(ngModel)]=\"options.value\" (keydown)=\"onKeyDown($event)\"\r\n        [attr.maxlength]=\"options.maxLength\" role=\"textbox\" [attr.aria-multiline]=\"true\" #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <button type=\"button\" class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\"\r\n        (click)=\"copyInputMessage(TextAreainput)\" (keydown)=\"onCopyKeydown($event, TextAreainput)\"\r\n        [attr.aria-label]=\"utilityService.getResourceValue('CopyTextToClipboard')\" [ngbTooltip]=\"utilityService.getResourceValue('CopyTextToClipboard')\" tabindex=\"0\">\r\n        <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\r\n      </button>\r\n      <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\"\r\n        *ngIf=\"options.enableSpeechRecognition\" role=\"region\">\r\n\r\n        <!-- Start Speech Recognition Button -->\r\n        <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\" [class.focus-visible]=\"isMicFocusVisible\"\r\n          [inlineSVG]=\"options.iconMic || 'assets/bbsf-controls/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n          (keydown)=\"onMicKeydown($event, 'start')\" (focus)=\"onMicFocus(true)\" (blur)=\"onMicFocus(false)\"\r\n          *ngIf=\"options.enableSpeechRecognition && !isMicOn\"\r\n          [attr.aria-label]=\"utilityService.getResourceValue('StartSpeechRecognition')\" [ngbTooltip]=\"utilityService.getResourceValue('StartSpeechRecognition')\" tabindex=\"0\"\r\n          [attr.aria-pressed]=\"false\">\r\n        </button>\r\n\r\n        <!-- Stop Speech Recognition Button -->\r\n        <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\" [class.focus-visible]=\"isMicFocusVisible\"\r\n          [inlineSVG]=\"options.iconMicOff || 'assets/bbsf-controls/images/mic-off.svg'\"\r\n          (click)=\"stopSpeechRecognition()\" (keydown)=\"onMicKeydown($event, 'stop')\"\r\n          (focus)=\"onMicFocus(true)\" (blur)=\"onMicFocus(false)\"\r\n          *ngIf=\"options.enableSpeechRecognition && isMicOn\" [attr.aria-label]=\"utilityService.getResourceValue('StopSpeechRecognition')\"\r\n          [ngbTooltip]=\"utilityService.getResourceValue('StopSpeechRecognition')\" tabindex=\"0\" [attr.aria-pressed]=\"true\">\r\n        </button>\r\n\r\n        <div class=\"language-controls\" [class.focus-visible]=\"isLanguageSelectFocusVisible\">\r\n          <span class=\"language-text\" [attr.id]=\"options.name + '-language-display'\"\r\n            aria-live=\"polite\">{{ options.enableSpeechRecognition ? selectedSpeechLanguageDisplayText : '' }}</span>\r\n\r\n          <label [for]=\"'Language_'+options.name\" class=\"sr-only\">\r\n            Select speech recognition language\r\n          </label>\r\n          <select class=\"language-select\" [formControlName]=\"'Language_'+options.name\" [id]=\"'Language_'+options.name\"\r\n            (change)=\"onSpeechLanguageChange($event)\" (focus)=\"onLanguageSelectFocus(true)\"\r\n            (blur)=\"onLanguageSelectFocus(false)\" (keydown)=\"onLanguageSelectKeydown($event)\"\r\n            [attr.aria-describedby]=\"options.name + '-language-display'\" [attr.aria-label]=\"utilityService.getResourceValue('SelectSpeechRecognitionLanguage')\"\r\n            [ngbTooltip]=\"utilityService.getResourceValue('SelectSpeechRecognitionLanguage')\"\r\n            triggers=\"focus:blur\">\r\n            <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">\r\n              {{language.name}}\r\n            </option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{options.value}}</span>\r\n    </div>\r\n    <div class=\"subtext-container\">\r\n      <!--wordCount-->\r\n      <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowWordCount\" [attr.id]=\"wordCountId\"\r\n        aria-live=\"polite\" [attr.aria-label]=\"'Word count: ' + wordCount + ' of ' + options.maxWordCount + ' words'\">\r\n        {{wordCount}}/{{options.maxWordCount}} Words\r\n      </div>\r\n\r\n      <!-- CharsLimitMsg-->\r\n      <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [attr.id]=\"characterCountId\" aria-live=\"polite\"\r\n        [attr.aria-atomic]=\"true\"\r\n        [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n        {{maxLimitWarningMsg}}\r\n      </div>\r\n\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\" [attr.id]=\"options.name + '-description'\">\r\n        {{options.labelDescription}}\r\n      </div>\r\n\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\"\r\n        [attr.id]=\"errorMessageId\" role=\"alert\" aria-live=\"assertive\" [attr.aria-atomic]=\"true\">\r\n        {{getErrorValidation(textAreaFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</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: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: 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"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i7.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: TextAreaComponent, isStandalone: true, selector: "BBSF-TextArea", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-textarea\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!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    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"{\r\n      'p-120px': options.enableSpeechRecognition && options.enableCopyToClipboard,\r\n      'p-80px': options.enableSpeechRecognition && !options.enableCopyToClipboard,\r\n      'p-40px': !options.enableSpeechRecognition && options.enableCopyToClipboard\r\n    }\">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n        [dir]=\"textDir\" [attr.aria-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        [attr.aria-describedby]=\"ariaDescribedBy\" [attr.aria-label]=\"options.labelValue || options.placeholder\"\r\n        formControlName=\"{{options.name}}\"\r\n        [class.is-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"trimControlValue()\" rows=\"{{options.rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.cols}}\"\r\n        [attr.minlength]=\"options.minLength\" [(ngModel)]=\"options.value\" (keydown)=\"onKeyDown($event)\"\r\n        [attr.maxlength]=\"options.maxLength\" role=\"textbox\" [attr.aria-multiline]=\"true\" #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <button type=\"button\" class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\"\r\n        (click)=\"copyInputMessage(TextAreainput)\" (keydown)=\"onCopyKeydown($event, TextAreainput)\"\r\n        [attr.aria-label]=\"utilityService.getResourceValue('CopyTextToClipboard')\" [ngbTooltip]=\"utilityService.getResourceValue('CopyTextToClipboard')\" tabindex=\"0\">\r\n        <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\r\n      </button>\r\n      <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\"\r\n        *ngIf=\"options.enableSpeechRecognition\" role=\"region\">\r\n\r\n        <!-- Start Speech Recognition Button -->\r\n        <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\" [class.focus-visible]=\"isMicFocusVisible\"\r\n          [inlineSVG]=\"options.iconMic || 'assets/bbsf-controls/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n          (keydown)=\"onMicKeydown($event, 'start')\" (focus)=\"onMicFocus(true)\" (blur)=\"onMicFocus(false)\"\r\n          *ngIf=\"options.enableSpeechRecognition && !isMicOn\"\r\n          [attr.aria-label]=\"utilityService.getResourceValue('StartSpeechRecognition')\" [ngbTooltip]=\"utilityService.getResourceValue('StartSpeechRecognition')\" tabindex=\"0\"\r\n          [attr.aria-pressed]=\"false\">\r\n        </button>\r\n\r\n        <!-- Stop Speech Recognition Button -->\r\n        <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\" [class.focus-visible]=\"isMicFocusVisible\"\r\n          [inlineSVG]=\"options.iconMicOff || 'assets/bbsf-controls/images/mic-off.svg'\"\r\n          (click)=\"stopSpeechRecognition()\" (keydown)=\"onMicKeydown($event, 'stop')\"\r\n          (focus)=\"onMicFocus(true)\" (blur)=\"onMicFocus(false)\"\r\n          *ngIf=\"options.enableSpeechRecognition && isMicOn\" [attr.aria-label]=\"utilityService.getResourceValue('StopSpeechRecognition')\"\r\n          [ngbTooltip]=\"utilityService.getResourceValue('StopSpeechRecognition')\" tabindex=\"0\" [attr.aria-pressed]=\"true\">\r\n        </button>\r\n\r\n        <div class=\"language-controls\" [class.focus-visible]=\"isLanguageSelectFocusVisible\">\r\n          <span class=\"language-text\" [attr.id]=\"options.name + '-language-display'\"\r\n            aria-live=\"polite\">{{ options.enableSpeechRecognition ? selectedSpeechLanguageDisplayText : '' }}</span>\r\n\r\n          <label [for]=\"'Language_'+options.name\" class=\"sr-only\">\r\n            Select speech recognition language\r\n          </label>\r\n          <select class=\"language-select\" [formControlName]=\"'Language_'+options.name\" [id]=\"'Language_'+options.name\"\r\n            (change)=\"onSpeechLanguageChange($event)\" (focus)=\"onLanguageSelectFocus(true)\"\r\n            (blur)=\"onLanguageSelectFocus(false)\" (keydown)=\"onLanguageSelectKeydown($event)\"\r\n            [attr.aria-describedby]=\"options.name + '-language-display'\" [attr.aria-label]=\"utilityService.getResourceValue('SelectSpeechRecognitionLanguage')\"\r\n            [ngbTooltip]=\"utilityService.getResourceValue('SelectSpeechRecognitionLanguage')\"\r\n            triggers=\"focus:blur\">\r\n            <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">\r\n              {{language.name}}\r\n            </option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{options.value}}</span>\r\n    </div>\r\n    <div class=\"subtext-container\">\r\n      <!--wordCount-->\r\n      <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowWordCount\" [attr.id]=\"wordCountId\"\r\n        aria-live=\"polite\" [attr.aria-label]=\"'Word count: ' + wordCount + ' of ' + options.maxWordCount + ' words'\">\r\n        {{wordCount}}/{{options.maxWordCount}} Words\r\n      </div>\r\n\r\n      <!-- CharsLimitMsg-->\r\n      <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [attr.id]=\"characterCountId\" aria-live=\"polite\"\r\n        [attr.aria-atomic]=\"true\"\r\n        [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n        {{maxLimitWarningMsg}}\r\n      </div>\r\n\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\" [attr.id]=\"options.name + '-description'\">\r\n        {{options.labelDescription}}\r\n      </div>\r\n\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\"\r\n        [attr.id]=\"errorMessageId\" role=\"alert\" aria-live=\"assertive\" [attr.aria-atomic]=\"true\">\r\n        {{getErrorValidation(textAreaFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</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: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: NgbModule }, { kind: "directive", type: i4$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i7.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
@@ -2553,6 +2553,27 @@ class FileOptions {
     }
 }
 
+class FileUploadCropperPreset {
+    constructor(aspectRatio, cropperStaticWidth, cropperStaticHeight) {
+        this.aspectRatio = aspectRatio;
+        this.cropperStaticWidth = cropperStaticWidth;
+        this.cropperStaticHeight = cropperStaticHeight;
+    }
+}
+class FileUploadCropperOptions {
+    constructor() {
+        this.enabled = false;
+        this.defaultIsHorizontal = true;
+        this.modalSize = 'lg';
+        this.backdrop = 'static';
+        this.maintainAspectRatio = true;
+        this.onlyScaleDown = true;
+        this.cancelBehavior = 'clear';
+        this.horizontal = new FileUploadCropperPreset(3 / 1, 90, 45);
+        this.vertical = new FileUploadCropperPreset(3 / 2, 200, 66);
+    }
+}
+
 class FileUploadModel {
 }
 
@@ -3794,7 +3815,7 @@ class FormComponent {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FormComponent, deps: [{ token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: i3$2.NgbModal }, { token: i3$2.NgbActiveModal }, { token: i3$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FormComponent, deps: [{ token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: i4$1.NgbModal }, { token: i4$1.NgbActiveModal }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: FormComponent, isStandalone: true, selector: "BBSF-Form", inputs: { options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<form [id]=\"fromName\" [FormGroup]=\"options.formGroup\" (ngSubmit)=\"submit()\" (keydown.enter)=\"options.disableSubmitWithEnterPress?$event.preventDefault():''\">\r\n\r\n  <ng-template #content><ng-content></ng-content></ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</form>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgbModule }, { kind: "ngmodule", type: BlockUIModule }, { kind: "ngmodule", type: ToastrModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "ngmodule", type: BBSFUtilitiesModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FormComponent, decorators: [{
@@ -3809,7 +3830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                         InlineSVGModule,
                         BBSFUtilitiesModule
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "<form [id]=\"fromName\" [FormGroup]=\"options.formGroup\" (ngSubmit)=\"submit()\" (keydown.enter)=\"options.disableSubmitWithEnterPress?$event.preventDefault():''\">\r\n\r\n  <ng-template #content><ng-content></ng-content></ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</form>\r\n" }]
-        }], ctorParameters: () => [{ type: ControlUtility }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: i3$2.NgbModal }, { type: i3$2.NgbActiveModal }, { type: i3$3.Router }], propDecorators: { onChange: [{
+        }], ctorParameters: () => [{ type: ControlUtility }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: i4$1.NgbModal }, { type: i4$1.NgbActiveModal }, { type: i3$2.Router }], propDecorators: { onChange: [{
                 type: Output
             }], options: [{
                 type: Input
@@ -3934,13 +3955,13 @@ class ConfirmationModalComponent {
         }
         this.utilityService.stopBlockUI();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ConfirmationModalComponent, deps: [{ token: i3.UtilityService }, { token: i3$2.NgbModal }, { token: i3$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ConfirmationModalComponent, deps: [{ token: i3.UtilityService }, { token: i4$1.NgbModal }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: ConfirmationModalComponent, isStandalone: true, selector: "BBSF-ConfirmationModal", inputs: { options: "options" }, viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true }], ngImport: i0, template: "", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgbModule }, { kind: "ngmodule", type: SweetAlert2Module }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-ConfirmationModal', standalone: true, imports: [CommonModule, NgbModule, SweetAlert2Module], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "" }]
-        }], ctorParameters: () => [{ type: i3.UtilityService }, { type: i3$2.NgbModal }, { type: i3$3.Router }], propDecorators: { options: [{
+        }], ctorParameters: () => [{ type: i3.UtilityService }, { type: i4$1.NgbModal }, { type: i3$2.Router }], propDecorators: { options: [{
                 type: Input
             }], confirmationModal: [{
                 type: ViewChild,
@@ -4829,7 +4850,7 @@ class PagingComponent {
         }
         return filters;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: PagingComponent, deps: [{ token: i3.UtilityService }, { token: i1.HttpClient }, { token: i3$3.Router }, { token: i3$3.ActivatedRoute }, { token: i5.Location }, { token: OnPagingFiltersChangeService }, { token: i3$1.RequestHandlerService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: PagingComponent, deps: [{ token: i3.UtilityService }, { token: i1.HttpClient }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i5.Location }, { token: OnPagingFiltersChangeService }, { token: i3$1.RequestHandlerService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: PagingComponent, isStandalone: true, selector: "BBSF-Paging", inputs: { options: "options", group: "group" }, outputs: { Items: "Items", pageStateRestored: "pageStateRestored" }, host: { listeners: { "window:popstate": "onPopState($event)" } }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\" role=\"navigation\" [attr.aria-label]=\"utilityService.getResourceValue('Pagination')\">\r\n  <!--paging container-->\r\n  <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n    <!--items-->\r\n    <div class=\"bbsf-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n        (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n        [initialPage]=\"currentPage\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <!--page count-->\r\n    <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\" \r\n        [attr.aria-label]=\"utilityService.getResourceValue('SelectPageSize')\" \r\n        [ngbTooltip]=\"utilityService.getResourceValue('SelectPageSize')\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"bssf-items\" [attr.aria-label]=\"utilityService.getResourceValue('PageInfo')\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n          {{Pages}}</strong> {{pagesText}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--load more-->\r\n  <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n      [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n      (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n      [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-sm\" (click)=\"onScrollDown()\"\r\n      *ngIf=\"!(result.length==totalRow)\"\r\n      [attr.aria-label]=\"utilityService.getResourceValue('LoadMore')\"\r\n      [ngbTooltip]=\"utilityService.getResourceValue('LoadMore')\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: BlockUIModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: JwPaginationComponent, selector: "jw-pagination", inputs: ["items", "initialPage", "pageSize", "maxPages", "ShowFirstAndLast"], outputs: ["changePage"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: PagingComponent, decorators: [{
@@ -4843,7 +4864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                         InlineSVGModule,
                         JwPaginationComponent
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\" role=\"navigation\" [attr.aria-label]=\"utilityService.getResourceValue('Pagination')\">\r\n  <!--paging container-->\r\n  <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n    <!--items-->\r\n    <div class=\"bbsf-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n        (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n        [initialPage]=\"currentPage\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <!--page count-->\r\n    <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\" \r\n        [attr.aria-label]=\"utilityService.getResourceValue('SelectPageSize')\" \r\n        [ngbTooltip]=\"utilityService.getResourceValue('SelectPageSize')\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"bssf-items\" [attr.aria-label]=\"utilityService.getResourceValue('PageInfo')\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n          {{Pages}}</strong> {{pagesText}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--load more-->\r\n  <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n      [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n      (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n      [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-sm\" (click)=\"onScrollDown()\"\r\n      *ngIf=\"!(result.length==totalRow)\"\r\n      [attr.aria-label]=\"utilityService.getResourceValue('LoadMore')\"\r\n      [ngbTooltip]=\"utilityService.getResourceValue('LoadMore')\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: i3.UtilityService }, { type: i1.HttpClient }, { type: i3$3.Router }, { type: i3$3.ActivatedRoute }, { type: i5.Location }, { type: OnPagingFiltersChangeService }, { type: i3$1.RequestHandlerService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { Items: [{
+        }], ctorParameters: () => [{ type: i3.UtilityService }, { type: i1.HttpClient }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i5.Location }, { type: OnPagingFiltersChangeService }, { type: i3$1.RequestHandlerService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { Items: [{
                 type: Output
             }], pageStateRestored: [{
                 type: Output
@@ -4904,8 +4925,8 @@ class PageHeaderComponentComponent {
     ngOnInit() {
         this.EN = this.utilityService.isCurrentLanguageEnglish();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: PageHeaderComponentComponent, deps: [{ token: i3$3.Router }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: PageHeaderComponentComponent, isStandalone: true, selector: "bbsf-page-header-component", inputs: { group: "group", options: "options" }, ngImport: i0, template: "<!--toolbar-->\r\n<div class=\"toolbar\" style=\"overflow:hidden;position:relative;\">\r\n  <img class=\"pattern\" src=\"./src/assets/images/Bg-pattern.png\" />\r\n  <div class=\"container-xxl\">\r\n    <div class=\"d-flex justify-content-between align-items-center\">\r\n      <div class=\"page-title w-100\" [ngClass]=\"!options.listing? 'mb-0' : ''\">\r\n        <h3 *ngIf=\"options.titleKey||options.titleValue\">{{options.titleValue == null ? translate(options.titleKey) :\r\n          options.titleValue }}</h3>\r\n        <p class=\"sub-title\" *ngIf=\"options.listing\">\r\n          {{translate(options.subTitleKey)}}\r\n        </p>\r\n        <div class=\"d-flex justify-content-between align-items-end\">\r\n          <ul class=\"breadcrumb breadcrumb-dot\" *ngIf=\"options.breadCrumb.active\">\r\n            <ng-container *ngFor=\"let item of options.breadCrumb.breadCrumbItems\">\r\n              <li class=\"breadcrumb-item\" *ngIf=\"!item.active\">\r\n                <a *ngIf=\"item.route\" [routerLink]=\"item.route\">{{ item.label }}</a>\r\n                <a *ngIf=\"!item.route\" href=\"javascript: void(0);\">{{ item.label }}</a>\r\n              </li>\r\n              <li class=\"breadcrumb-item active\" *ngIf=\"item.active\">\r\n                <span>{{ item.label }}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n          <div class=\"page-subheader\" *ngIf=\"options.dropDownActions.active\">\r\n            <button [routerLink]=\"item.routerLink\" (click)='item.function?item.function():\"\"'\r\n              class=\"btn btn-light btn-sm subheader-btn export-btn\"\r\n              *ngFor=\"let item of options.dropDownActions.dropdownActionItems\">\r\n              <span class=\"svg-icon svg-icon-3\" [inlineSVG]=\"item.svg\"></span>\r\n              {{item.text}}\r\n            </button>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"page-subheader\">\r\n      <BBSF-TextBox *ngIf=\"options.searchTextBox.active\" [options]=\"options.searchTextBox.textSearchBoxOptions\"\r\n        [group]=\"group\">\r\n      </BBSF-TextBox>\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"subheader-btn list-grid\" *ngIf=\"options.gridView.active\">\r\n          <div class=\"list-grid-item\" [ngClass]=\"options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n            (click)=\"options.gridView.toggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Listing.svg'\">\r\n            </span>\r\n          </div>\r\n          <div class=\"list-grid-item\" [ngClass]=\"!options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n            (click)=\"options.gridView.toggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Grid.svg'\">\r\n            </span>\r\n          </div>\r\n        </div>\r\n        <button type=\"button\" *ngIf=\"options.exportButton.active\" (click)=\"options.exportButton.function()\"\r\n          class=\"btn btn-light btn-sm subheader-btn export-btn\">\r\n          <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/export.svg'\"></span>\r\n          {{translate(options.exportButton.buttonTextKey)}}\r\n        </button>\r\n\r\n\r\n        <div *ngIf=\"options.filtersButton.active\" ngbDropdown container=\"body\"\r\n          [placement]=\"EN ? 'bottom-right' : 'bottom-left'\" #dropdown=\"ngbDropdown\" class=\"subheader-btn\">\r\n          <button href=\"javascript:;\" (click)=\"options.filtersButton.function()\" ngbDropdownToggle\r\n            class=\"btn btn-light btn-sm filters-btn\">\r\n            <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/arrowdropdown.svg'\"></span>\r\n            {{translate(options.filtersButton.buttonTextKey)}}\r\n          </button>\r\n          <div ngbDropdownMenu class=\"dropdown-menu-custom filters-dropdown\">\r\n\r\n            <div [hidden]=\"options.filters.showLoadingInFiltersBox\">\r\n              <div class=\"filter-select\">\r\n                <span *ngFor=\"let control of options.filters.controlsOptions\">\r\n                  <span [ngSwitch]=\"control.key\">\r\n                    <span *ngSwitchCase=\"DataTypeEnum.SingleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.MulipleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Date\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.DateTime\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Time\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Boolean\">\r\n                      <BBSF-Toggleslide [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-Toggleslide>\r\n                    </span>\r\n                    <span *ngSwitchDefault>\r\n                      <BBSF-TagsInput [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-TagsInput>\r\n                    </span>\r\n                  </span>\r\n                </span>\r\n              </div>\r\n              <div class=\"dropdown-menu-buttons\">\r\n                <button class=\"btn btn-sm btn-light\" (click)=\"options.filters.restFunction(dropdown)\">\r\n                  {{translate(\"Reset\")}}\r\n                </button>\r\n                <button class=\"btn btn-brand btn-sm\" (click)=\"options.filters.applyFunction(dropdown)\">\r\n                  {{translate(\"Apply\")}}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.addButton.active\"\r\n          (click)=\"options.addButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.addButton.buttonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.editButton.active\"\r\n          (click)=\"options.editButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.editButton.buttonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.deleteButton.active\"\r\n          (click)=\"options.deleteButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.deleteButton.buttonTextKey)}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!--End toolbar-->", 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i3$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i3$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i7.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: PageHeaderComponentComponent, deps: [{ token: i3$2.Router }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: PageHeaderComponentComponent, isStandalone: true, selector: "bbsf-page-header-component", inputs: { group: "group", options: "options" }, ngImport: i0, template: "<!--toolbar-->\r\n<div class=\"toolbar\" style=\"overflow:hidden;position:relative;\">\r\n  <img class=\"pattern\" src=\"./src/assets/images/Bg-pattern.png\" />\r\n  <div class=\"container-xxl\">\r\n    <div class=\"d-flex justify-content-between align-items-center\">\r\n      <div class=\"page-title w-100\" [ngClass]=\"!options.listing? 'mb-0' : ''\">\r\n        <h3 *ngIf=\"options.titleKey||options.titleValue\">{{options.titleValue == null ? translate(options.titleKey) :\r\n          options.titleValue }}</h3>\r\n        <p class=\"sub-title\" *ngIf=\"options.listing\">\r\n          {{translate(options.subTitleKey)}}\r\n        </p>\r\n        <div class=\"d-flex justify-content-between align-items-end\">\r\n          <ul class=\"breadcrumb breadcrumb-dot\" *ngIf=\"options.breadCrumb.active\">\r\n            <ng-container *ngFor=\"let item of options.breadCrumb.breadCrumbItems\">\r\n              <li class=\"breadcrumb-item\" *ngIf=\"!item.active\">\r\n                <a *ngIf=\"item.route\" [routerLink]=\"item.route\">{{ item.label }}</a>\r\n                <a *ngIf=\"!item.route\" href=\"javascript: void(0);\">{{ item.label }}</a>\r\n              </li>\r\n              <li class=\"breadcrumb-item active\" *ngIf=\"item.active\">\r\n                <span>{{ item.label }}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n          <div class=\"page-subheader\" *ngIf=\"options.dropDownActions.active\">\r\n            <button [routerLink]=\"item.routerLink\" (click)='item.function?item.function():\"\"'\r\n              class=\"btn btn-light btn-sm subheader-btn export-btn\"\r\n              *ngFor=\"let item of options.dropDownActions.dropdownActionItems\">\r\n              <span class=\"svg-icon svg-icon-3\" [inlineSVG]=\"item.svg\"></span>\r\n              {{item.text}}\r\n            </button>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"page-subheader\">\r\n      <BBSF-TextBox *ngIf=\"options.searchTextBox.active\" [options]=\"options.searchTextBox.textSearchBoxOptions\"\r\n        [group]=\"group\">\r\n      </BBSF-TextBox>\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"subheader-btn list-grid\" *ngIf=\"options.gridView.active\">\r\n          <div class=\"list-grid-item\" [ngClass]=\"options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n            (click)=\"options.gridView.toggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Listing.svg'\">\r\n            </span>\r\n          </div>\r\n          <div class=\"list-grid-item\" [ngClass]=\"!options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n            (click)=\"options.gridView.toggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Grid.svg'\">\r\n            </span>\r\n          </div>\r\n        </div>\r\n        <button type=\"button\" *ngIf=\"options.exportButton.active\" (click)=\"options.exportButton.function()\"\r\n          class=\"btn btn-light btn-sm subheader-btn export-btn\">\r\n          <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/export.svg'\"></span>\r\n          {{translate(options.exportButton.buttonTextKey)}}\r\n        </button>\r\n\r\n\r\n        <div *ngIf=\"options.filtersButton.active\" ngbDropdown container=\"body\"\r\n          [placement]=\"EN ? 'bottom-right' : 'bottom-left'\" #dropdown=\"ngbDropdown\" class=\"subheader-btn\">\r\n          <button href=\"javascript:;\" (click)=\"options.filtersButton.function()\" ngbDropdownToggle\r\n            class=\"btn btn-light btn-sm filters-btn\">\r\n            <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/arrowdropdown.svg'\"></span>\r\n            {{translate(options.filtersButton.buttonTextKey)}}\r\n          </button>\r\n          <div ngbDropdownMenu class=\"dropdown-menu-custom filters-dropdown\">\r\n\r\n            <div [hidden]=\"options.filters.showLoadingInFiltersBox\">\r\n              <div class=\"filter-select\">\r\n                <span *ngFor=\"let control of options.filters.controlsOptions\">\r\n                  <span [ngSwitch]=\"control.key\">\r\n                    <span *ngSwitchCase=\"DataTypeEnum.SingleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.MulipleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Date\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.DateTime\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Time\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Boolean\">\r\n                      <BBSF-Toggleslide [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-Toggleslide>\r\n                    </span>\r\n                    <span *ngSwitchDefault>\r\n                      <BBSF-TagsInput [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-TagsInput>\r\n                    </span>\r\n                  </span>\r\n                </span>\r\n              </div>\r\n              <div class=\"dropdown-menu-buttons\">\r\n                <button class=\"btn btn-sm btn-light\" (click)=\"options.filters.restFunction(dropdown)\">\r\n                  {{translate(\"Reset\")}}\r\n                </button>\r\n                <button class=\"btn btn-brand btn-sm\" (click)=\"options.filters.applyFunction(dropdown)\">\r\n                  {{translate(\"Apply\")}}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.addButton.active\"\r\n          (click)=\"options.addButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.addButton.buttonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.editButton.active\"\r\n          (click)=\"options.editButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.editButton.buttonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.deleteButton.active\"\r\n          (click)=\"options.deleteButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.deleteButton.buttonTextKey)}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!--End toolbar-->", 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i4$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i7.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: PageHeaderComponentComponent, decorators: [{
             type: Component,
@@ -4916,7 +4937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                         NgbModule,
                         InlineSVGModule
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "<!--toolbar-->\r\n<div class=\"toolbar\" style=\"overflow:hidden;position:relative;\">\r\n  <img class=\"pattern\" src=\"./src/assets/images/Bg-pattern.png\" />\r\n  <div class=\"container-xxl\">\r\n    <div class=\"d-flex justify-content-between align-items-center\">\r\n      <div class=\"page-title w-100\" [ngClass]=\"!options.listing? 'mb-0' : ''\">\r\n        <h3 *ngIf=\"options.titleKey||options.titleValue\">{{options.titleValue == null ? translate(options.titleKey) :\r\n          options.titleValue }}</h3>\r\n        <p class=\"sub-title\" *ngIf=\"options.listing\">\r\n          {{translate(options.subTitleKey)}}\r\n        </p>\r\n        <div class=\"d-flex justify-content-between align-items-end\">\r\n          <ul class=\"breadcrumb breadcrumb-dot\" *ngIf=\"options.breadCrumb.active\">\r\n            <ng-container *ngFor=\"let item of options.breadCrumb.breadCrumbItems\">\r\n              <li class=\"breadcrumb-item\" *ngIf=\"!item.active\">\r\n                <a *ngIf=\"item.route\" [routerLink]=\"item.route\">{{ item.label }}</a>\r\n                <a *ngIf=\"!item.route\" href=\"javascript: void(0);\">{{ item.label }}</a>\r\n              </li>\r\n              <li class=\"breadcrumb-item active\" *ngIf=\"item.active\">\r\n                <span>{{ item.label }}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n          <div class=\"page-subheader\" *ngIf=\"options.dropDownActions.active\">\r\n            <button [routerLink]=\"item.routerLink\" (click)='item.function?item.function():\"\"'\r\n              class=\"btn btn-light btn-sm subheader-btn export-btn\"\r\n              *ngFor=\"let item of options.dropDownActions.dropdownActionItems\">\r\n              <span class=\"svg-icon svg-icon-3\" [inlineSVG]=\"item.svg\"></span>\r\n              {{item.text}}\r\n            </button>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"page-subheader\">\r\n      <BBSF-TextBox *ngIf=\"options.searchTextBox.active\" [options]=\"options.searchTextBox.textSearchBoxOptions\"\r\n        [group]=\"group\">\r\n      </BBSF-TextBox>\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"subheader-btn list-grid\" *ngIf=\"options.gridView.active\">\r\n          <div class=\"list-grid-item\" [ngClass]=\"options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n            (click)=\"options.gridView.toggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Listing.svg'\">\r\n            </span>\r\n          </div>\r\n          <div class=\"list-grid-item\" [ngClass]=\"!options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n            (click)=\"options.gridView.toggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Grid.svg'\">\r\n            </span>\r\n          </div>\r\n        </div>\r\n        <button type=\"button\" *ngIf=\"options.exportButton.active\" (click)=\"options.exportButton.function()\"\r\n          class=\"btn btn-light btn-sm subheader-btn export-btn\">\r\n          <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/export.svg'\"></span>\r\n          {{translate(options.exportButton.buttonTextKey)}}\r\n        </button>\r\n\r\n\r\n        <div *ngIf=\"options.filtersButton.active\" ngbDropdown container=\"body\"\r\n          [placement]=\"EN ? 'bottom-right' : 'bottom-left'\" #dropdown=\"ngbDropdown\" class=\"subheader-btn\">\r\n          <button href=\"javascript:;\" (click)=\"options.filtersButton.function()\" ngbDropdownToggle\r\n            class=\"btn btn-light btn-sm filters-btn\">\r\n            <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/arrowdropdown.svg'\"></span>\r\n            {{translate(options.filtersButton.buttonTextKey)}}\r\n          </button>\r\n          <div ngbDropdownMenu class=\"dropdown-menu-custom filters-dropdown\">\r\n\r\n            <div [hidden]=\"options.filters.showLoadingInFiltersBox\">\r\n              <div class=\"filter-select\">\r\n                <span *ngFor=\"let control of options.filters.controlsOptions\">\r\n                  <span [ngSwitch]=\"control.key\">\r\n                    <span *ngSwitchCase=\"DataTypeEnum.SingleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.MulipleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Date\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.DateTime\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Time\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Boolean\">\r\n                      <BBSF-Toggleslide [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-Toggleslide>\r\n                    </span>\r\n                    <span *ngSwitchDefault>\r\n                      <BBSF-TagsInput [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-TagsInput>\r\n                    </span>\r\n                  </span>\r\n                </span>\r\n              </div>\r\n              <div class=\"dropdown-menu-buttons\">\r\n                <button class=\"btn btn-sm btn-light\" (click)=\"options.filters.restFunction(dropdown)\">\r\n                  {{translate(\"Reset\")}}\r\n                </button>\r\n                <button class=\"btn btn-brand btn-sm\" (click)=\"options.filters.applyFunction(dropdown)\">\r\n                  {{translate(\"Apply\")}}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.addButton.active\"\r\n          (click)=\"options.addButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.addButton.buttonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.editButton.active\"\r\n          (click)=\"options.editButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.editButton.buttonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.deleteButton.active\"\r\n          (click)=\"options.deleteButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.deleteButton.buttonTextKey)}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!--End toolbar-->" }]
-        }], ctorParameters: () => [{ type: i3$3.Router }, { type: i3.UtilityService }], propDecorators: { group: [{
+        }], ctorParameters: () => [{ type: i3$2.Router }, { type: i3.UtilityService }], propDecorators: { group: [{
                 type: Input
             }], options: [{
                 type: Input
@@ -7321,9 +7342,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 }]
         }] });
 
+class LogoCropperComponent {
+    constructor(activeModal, utilityService) {
+        this.activeModal = activeModal;
+        this.utilityService = utilityService;
+        this.isHorizontal = true;
+        this.aspectRatio = 3 / 1;
+        this.maintainAspectRatio = true;
+        this.cropperStaticWidth = 0;
+        this.cropperStaticHeight = 0;
+        this.onlyScaleDown = true;
+        this.transform = { scale: 1 };
+        this.croppedBlob = null;
+        this.minScale = 1;
+        this.maxScale = 4;
+        this.scaleStep = 0.1;
+    }
+    ngOnInit() { }
+    translate(key) {
+        return this.utilityService.getResourceValue(key);
+    }
+    imageCropped(event) {
+        this.croppedBlob = event.blob ?? null;
+    }
+    zoomIn() {
+        this.setScale((this.transform.scale ?? 1) + this.scaleStep);
+    }
+    zoomOut() {
+        this.setScale((this.transform.scale ?? 1) - this.scaleStep);
+    }
+    resetZoom() {
+        this.setScale(1);
+    }
+    confirm() {
+        if (!this.croppedBlob)
+            return;
+        const croppedFile = new File([this.croppedBlob], this.imageFile?.name ?? 'logo.png', { type: 'image/png' });
+        this.activeModal.close(croppedFile);
+    }
+    dismiss() {
+        this.activeModal.dismiss();
+    }
+    setScale(scale) {
+        const clamped = Math.min(this.maxScale, Math.max(this.minScale, scale));
+        this.transform = { ...this.transform, scale: clamped };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: LogoCropperComponent, deps: [{ token: i4$1.NgbActiveModal }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: LogoCropperComponent, isStandalone: true, selector: "BBSF-LogoCropper", inputs: { imageFile: "imageFile", isHorizontal: "isHorizontal", aspectRatio: "aspectRatio", maintainAspectRatio: "maintainAspectRatio", cropperStaticWidth: "cropperStaticWidth", cropperStaticHeight: "cropperStaticHeight", onlyScaleDown: "onlyScaleDown" }, ngImport: i0, template: "<div class=\"bbsf-logo-cropper\">\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">{{ translate(\"CropImage\") }}</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body d-flex flex-column justify-content-center align-items-center py-0\" style=\"min-height: 200px;\">\n    <image-cropper [class.crop-horizontal]=\"isHorizontal\" [class.crop-vertical]=\"!isHorizontal\" [imageFile]=\"imageFile\"\n      [maintainAspectRatio]=\"maintainAspectRatio\" [aspectRatio]=\"aspectRatio\"\n      [cropperStaticWidth]=\"cropperStaticWidth\" [cropperStaticHeight]=\"cropperStaticHeight\"\n      [onlyScaleDown]=\"onlyScaleDown\" [transform]=\"transform\" format=\"png\" (imageCropped)=\"imageCropped($event)\">\n    </image-cropper>\n\n    <div class=\"d-flex justify-content-center align-items-center gap-2 mt-3\">\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomOut()\"\n        [title]=\"translate('ZoomOut')\">\n        <i class=\"fa fa-search-minus\"></i>\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"resetZoom()\"\n        [title]=\"translate('ResetZoom')\">\n        <i class=\"fa fa-undo\"></i>\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomIn()\" [title]=\"translate('ZoomIn')\">\n        <i class=\"fa fa-search-plus\"></i>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"dismiss()\"> Cancel </button>\n    <button type=\"button\" class=\"btn btn-sm btn-brand\" [disabled]=\"!croppedBlob\" (click)=\"confirm()\">\n      {{ translate(\"Crop\") }}\n    </button>\n  </div>\n</div>\n", styles: [".bbsf-logo-cropper image-cropper.crop-horizontal .ngx-ic-source-image{max-height:45px!important;max-width:none!important}.bbsf-logo-cropper image-cropper.crop-vertical .ngx-ic-source-image{max-width:200px!important;max-height:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: LogoCropperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-LogoCropper', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        CommonModule,
+                        ImageCropperComponent
+                    ], template: "<div class=\"bbsf-logo-cropper\">\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">{{ translate(\"CropImage\") }}</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body d-flex flex-column justify-content-center align-items-center py-0\" style=\"min-height: 200px;\">\n    <image-cropper [class.crop-horizontal]=\"isHorizontal\" [class.crop-vertical]=\"!isHorizontal\" [imageFile]=\"imageFile\"\n      [maintainAspectRatio]=\"maintainAspectRatio\" [aspectRatio]=\"aspectRatio\"\n      [cropperStaticWidth]=\"cropperStaticWidth\" [cropperStaticHeight]=\"cropperStaticHeight\"\n      [onlyScaleDown]=\"onlyScaleDown\" [transform]=\"transform\" format=\"png\" (imageCropped)=\"imageCropped($event)\">\n    </image-cropper>\n\n    <div class=\"d-flex justify-content-center align-items-center gap-2 mt-3\">\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomOut()\"\n        [title]=\"translate('ZoomOut')\">\n        <i class=\"fa fa-search-minus\"></i>\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"resetZoom()\"\n        [title]=\"translate('ResetZoom')\">\n        <i class=\"fa fa-undo\"></i>\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomIn()\" [title]=\"translate('ZoomIn')\">\n        <i class=\"fa fa-search-plus\"></i>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"dismiss()\"> Cancel </button>\n    <button type=\"button\" class=\"btn btn-sm btn-brand\" [disabled]=\"!croppedBlob\" (click)=\"confirm()\">\n      {{ translate(\"Crop\") }}\n    </button>\n  </div>\n</div>\n", styles: [".bbsf-logo-cropper image-cropper.crop-horizontal .ngx-ic-source-image{max-height:45px!important;max-width:none!important}.bbsf-logo-cropper image-cropper.crop-vertical .ngx-ic-source-image{max-width:200px!important;max-height:none!important}\n"] }]
+        }], ctorParameters: () => [{ type: i4$1.NgbActiveModal }, { type: i3.UtilityService }], propDecorators: { imageFile: [{
+                type: Input
+            }], isHorizontal: [{
+                type: Input
+            }], aspectRatio: [{
+                type: Input
+            }], maintainAspectRatio: [{
+                type: Input
+            }], cropperStaticWidth: [{
+                type: Input
+            }], cropperStaticHeight: [{
+                type: Input
+            }], onlyScaleDown: [{
+                type: Input
+            }] } });
+
 class FileUploadComponent {
     static { this.controlContainerStatic = null; }
-    constructor(controlContainer, MultipleFileUploadControlHost, controlUtility, UtilityService, controlValidationService, globalSettings, fileUploadService) {
+    constructor(controlContainer, MultipleFileUploadControlHost, controlUtility, UtilityService, controlValidationService, globalSettings, fileUploadService, modalService) {
         this.controlContainer = controlContainer;
         this.MultipleFileUploadControlHost = MultipleFileUploadControlHost;
         this.controlUtility = controlUtility;
@@ -7331,6 +7422,7 @@ class FileUploadComponent {
         this.controlValidationService = controlValidationService;
         this.globalSettings = globalSettings;
         this.fileUploadService = fileUploadService;
+        this.modalService = modalService;
         this.OnChange = new EventEmitter();
         this.isUploadComplete = new EventEmitter();
         this.validationMessage = '';
@@ -7663,7 +7755,7 @@ class FileUploadComponent {
             const formControl = this.fileUploadFormControl;
             const resourceValue = this.UtilityService.getResourceValue('DuplicateFileError');
             // If resource value is the same as the key, it means the resource wasn't found
-            const errorMessage = (resourceValue && resourceValue !== 'DuplicateFileError') ? resourceValue : 'File(s) already exist';
+            const errorMessage = this.options?.duplicateFileErrorMsg || ((resourceValue && resourceValue !== 'DuplicateFileError') ? resourceValue : 'File(s) already exist');
             const errorObj = {
                 DuplicateFileError: `${errorMessage}: ${duplicateFileNames}`
             };
@@ -7702,7 +7794,7 @@ class FileUploadComponent {
             //keep existing valid files, remove only extra ones
             this.uploader.queue = this.uploader.queue.slice(0, max);
             this.maxFilesReached = true;
-            this.maxFilesValidationMsg = this.UtilityService.getResourceValue('MaxFileCountValidationKey') + max;
+            this.maxFilesValidationMsg = (this.options.maxFileCountErrorMsg || this.UtilityService.getResourceValue('MaxFileCountValidationKey')) + max;
         }
         else {
             this.maxFilesReached = false;
@@ -7871,9 +7963,7 @@ class FileUploadComponent {
                             isNew: true
                         };
                         if (this.options.isMultipleFile == false) {
-                            this.fileUploadModel = new FileUploadModel();
-                            this.fileUploadModel.file = AddedFile;
-                            this.setValuePreservingErrors(this.fileUploadModel, this.pendingValidationErrors);
+                            this.applySingleFileUpload(AddedFile, fileObject);
                         }
                         else {
                             FilesArray.push(AddedFile);
@@ -7886,13 +7976,100 @@ class FileUploadComponent {
                             this.multipleFileUploadModel.correlationID_GUID =
                                 this.options.value?.correlationID_GUID;
                             this.setValuePreservingErrors(this.multipleFileUploadModel, this.pendingValidationErrors);
+                            this.emitPatchedChange(this.group.get(this.options.name).value);
                         }
-                        this.emitPatchedChange(this.group.get(this.options.name).value);
                     };
                 }
             }
         }
     }
+    applySingleFileUpload(addedFile, rawFile) {
+        if (!this.shouldCropAddedFile()) {
+            this.commitSingleFileUpload(addedFile);
+            return;
+        }
+        const cropperOptions = this.resolveCropperOptions();
+        const isHorizontal = this.resolveCropperOrientation(cropperOptions);
+        const preset = isHorizontal ? cropperOptions.horizontal : cropperOptions.vertical;
+        const modalRef = this.modalService.open(LogoCropperComponent, {
+            size: cropperOptions.modalSize,
+            backdrop: cropperOptions.backdrop
+        });
+        modalRef.componentInstance.imageFile = rawFile;
+        modalRef.componentInstance.isHorizontal = isHorizontal;
+        modalRef.componentInstance.aspectRatio = preset.aspectRatio;
+        modalRef.componentInstance.cropperStaticWidth = preset.cropperStaticWidth;
+        modalRef.componentInstance.cropperStaticHeight = preset.cropperStaticHeight;
+        modalRef.componentInstance.maintainAspectRatio = cropperOptions.maintainAspectRatio;
+        modalRef.componentInstance.onlyScaleDown = cropperOptions.onlyScaleDown;
+        modalRef.result.then((croppedFile) => {
+            this.readCroppedFile(addedFile, croppedFile);
+        }).catch(() => {
+            if (cropperOptions.cancelBehavior === 'clear') {
+                this.clearSingleFileUpload();
+            }
+        });
+    }
+    shouldCropAddedFile() {
+        return !!this.options.cropperOptions?.enabled &&
+            !this.options.isMultipleFile &&
+            !this.options.isUploadFileAsync;
+    }
+    resolveCropperOptions() {
+        const defaults = new FileUploadCropperOptions();
+        const configured = this.options.cropperOptions;
+        return {
+            ...defaults,
+            ...configured,
+            horizontal: {
+                ...defaults.horizontal,
+                ...configured?.horizontal
+            },
+            vertical: {
+                ...defaults.vertical,
+                ...configured?.vertical
+            }
+        };
+    }
+    resolveCropperOrientation(cropperOptions) {
+        if (!cropperOptions.orientationControlName) {
+            return cropperOptions.defaultIsHorizontal;
+        }
+        const orientationControl = this.group.get(cropperOptions.orientationControlName);
+        return orientationControl?.value ?? cropperOptions.defaultIsHorizontal;
+    }
+    readCroppedFile(originalFile, croppedFile) {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const croppedFileDTO = new FileDTO();
+            Object.assign(croppedFileDTO, originalFile);
+            croppedFileDTO.fileName = croppedFile.name;
+            croppedFileDTO.fileType = croppedFile.type;
+            croppedFileDTO.fileBase64 = reader.result.toString().split(',')[1];
+            croppedFileDTO.fileSizeInMB = croppedFile.size / (1024 * 1024);
+            croppedFileDTO.isNew = true;
+            croppedFileDTO.nameWithExtension = originalFile.nameWithExtension || croppedFile.name;
+            this.commitSingleFileUpload(croppedFileDTO);
+        };
+        reader.readAsDataURL(croppedFile);
+    }
+    commitSingleFileUpload(fileDTO) {
+        this.fileUploadModel = new FileUploadModel();
+        this.fileUploadModel.file = fileDTO;
+        this.setValuePreservingErrors(this.fileUploadModel, this.pendingValidationErrors);
+        this.emitPatchedChange(this.group.get(this.options.name).value);
+    }
+    clearSingleFileUpload() {
+        if (this.uploader) {
+            this.uploader.clearQueue();
+        }
+        this.fileUploadModel = null;
+        this.setValuePreservingErrors(null, this.pendingValidationErrors);
+        if (this.options.isRequired) {
+            this.fileUploadFormControl.markAsTouched();
+            this.fileUploadFormControl.updateValueAndValidity();
+        }
+    }
     removeFromControlValue(item) {
         if (this.options.isUploadFileAsync && item.progress == 100 && item._file['isNew']) {
             this.fileUploadService.deleteFile(item._file['iD_GUID'])
@@ -8079,8 +8256,8 @@ class FileUploadComponent {
         }
         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            {{ dropHeaderLabel }}\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\">{{ headerLabel }}</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=\"maxFilesReached\">\r\n      {{maxFilesValidationMsg}}\r\n    </div>\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$2.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i5$2.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { kind: "ngmodule", type: NgxDropzoneModule }] }); }
+    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 }, { token: i4$1.NgbModal }], 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            {{ dropHeaderLabel }}\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\">{{ headerLabel }}</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=\"maxFilesReached\">\r\n      {{maxFilesValidationMsg}}\r\n    </div>\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: i6$3.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i6$3.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { kind: "ngmodule", type: NgxDropzoneModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
@@ -8093,7 +8270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], 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            {{ dropHeaderLabel }}\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\">{{ headerLabel }}</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=\"maxFilesReached\">\r\n      {{maxFilesValidationMsg}}\r\n    </div>\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" }]
         }], ctorParameters: () => [{ type: i2.ControlContainer, decorators: [{
                     type: Optional
-                }] }, { type: i2.FormGroupDirective }, { type: ControlUtility }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: FileUploadService }], propDecorators: { fileInput: [{
+                }] }, { type: i2.FormGroupDirective }, { type: ControlUtility }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: FileUploadService }, { type: i4$1.NgbModal }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput', { static: false }]
             }], group: [{
@@ -8423,8 +8600,8 @@ class ImageUploaderComponent {
     openModal(open) {
         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: NgxDropzoneModule }, { kind: "component", type: i7$3.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$3.NgxDropzoneLabelDirective, selector: "ngx-dropzone-label" }, { kind: "component", type: i7$3.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"] }] }); }
+    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: i4$1.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: NgxDropzoneModule }, { kind: "component", type: i7$3.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$3.NgxDropzoneLabelDirective, selector: "ngx-dropzone-label" }, { kind: "component", type: i7$3.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: i4$1.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,
@@ -8439,7 +8616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                     ], 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>" }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
                     type: Optional
-                }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: i3$2.NgbModal }], propDecorators: { fileInput: [{
+                }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: i4$1.NgbModal }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput', { static: false }]
             }], group: [{
@@ -8800,7 +8977,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: NgxDropzoneModule }, { kind: "component", type: i7$3.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$3.NgxDropzoneLabelDirective, selector: "ngx-dropzone-label" }, { kind: "component", type: i7$3.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"] }] }); }
+    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$3.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$3.NgxDropzoneLabelDirective, selector: "ngx-dropzone-label" }, { kind: "component", type: i7$3.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: i4$1.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,
@@ -8829,76 +9006,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 args: ['angularCropper', { static: false }]
             }] } });
 
-class LogoCropperComponent {
-    constructor(activeModal, utilityService) {
-        this.activeModal = activeModal;
-        this.utilityService = utilityService;
-        this.isHorizontal = true;
-        this.aspectRatio = 3 / 1;
-        this.maintainAspectRatio = true;
-        this.cropperStaticWidth = 0;
-        this.cropperStaticHeight = 0;
-        this.onlyScaleDown = true;
-        this.transform = { scale: 1 };
-        this.croppedBlob = null;
-        this.minScale = 1;
-        this.maxScale = 4;
-        this.scaleStep = 0.1;
-    }
-    ngOnInit() { }
-    translate(key) {
-        return this.utilityService.getResourceValue(key);
-    }
-    imageCropped(event) {
-        this.croppedBlob = event.blob ?? null;
-    }
-    zoomIn() {
-        this.setScale((this.transform.scale ?? 1) + this.scaleStep);
-    }
-    zoomOut() {
-        this.setScale((this.transform.scale ?? 1) - this.scaleStep);
-    }
-    resetZoom() {
-        this.setScale(1);
-    }
-    confirm() {
-        if (!this.croppedBlob)
-            return;
-        const croppedFile = new File([this.croppedBlob], this.imageFile?.name ?? 'logo.png', { type: 'image/png' });
-        this.activeModal.close(croppedFile);
-    }
-    dismiss() {
-        this.activeModal.dismiss();
-    }
-    setScale(scale) {
-        const clamped = Math.min(this.maxScale, Math.max(this.minScale, scale));
-        this.transform = { ...this.transform, scale: clamped };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: LogoCropperComponent, deps: [{ token: i3$2.NgbActiveModal }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: LogoCropperComponent, isStandalone: true, selector: "BBSF-LogoCropper", inputs: { imageFile: "imageFile", isHorizontal: "isHorizontal", aspectRatio: "aspectRatio", maintainAspectRatio: "maintainAspectRatio", cropperStaticWidth: "cropperStaticWidth", cropperStaticHeight: "cropperStaticHeight", onlyScaleDown: "onlyScaleDown" }, ngImport: i0, template: "<div class=\"bbsf-logo-cropper\">\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">{{ translate(\"CropImage\") }}</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body d-flex flex-column justify-content-center align-items-center py-0\" style=\"min-height: 200px;\">\n    <image-cropper [class.crop-horizontal]=\"isHorizontal\" [class.crop-vertical]=\"!isHorizontal\" [imageFile]=\"imageFile\"\n      [maintainAspectRatio]=\"maintainAspectRatio\" [aspectRatio]=\"aspectRatio\"\n      [cropperStaticWidth]=\"cropperStaticWidth\" [cropperStaticHeight]=\"cropperStaticHeight\"\n      [onlyScaleDown]=\"onlyScaleDown\" [transform]=\"transform\" format=\"png\" (imageCropped)=\"imageCropped($event)\">\n    </image-cropper>\n\n    <div class=\"d-flex justify-content-center align-items-center gap-2 mt-3\">\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomOut()\"\n        [title]=\"translate('ZoomOut')\">\n        <i class=\"fa fa-search-minus\"></i>\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"resetZoom()\"\n        [title]=\"translate('ResetZoom')\">\n        <i class=\"fa fa-undo\"></i>\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomIn()\" [title]=\"translate('ZoomIn')\">\n        <i class=\"fa fa-search-plus\"></i>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"dismiss()\"> Cancel </button>\n    <button type=\"button\" class=\"btn btn-sm btn-brand\" [disabled]=\"!croppedBlob\" (click)=\"confirm()\">\n      {{ translate(\"Crop\") }}\n    </button>\n  </div>\n</div>\n", styles: [".bbsf-logo-cropper image-cropper.crop-horizontal .ngx-ic-source-image{max-height:45px!important;max-width:none!important}.bbsf-logo-cropper image-cropper.crop-vertical .ngx-ic-source-image{max-width:200px!important;max-height:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: LogoCropperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'BBSF-LogoCropper', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
-                        CommonModule,
-                        ImageCropperComponent
-                    ], template: "<div class=\"bbsf-logo-cropper\">\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">{{ translate(\"CropImage\") }}</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body d-flex flex-column justify-content-center align-items-center py-0\" style=\"min-height: 200px;\">\n    <image-cropper [class.crop-horizontal]=\"isHorizontal\" [class.crop-vertical]=\"!isHorizontal\" [imageFile]=\"imageFile\"\n      [maintainAspectRatio]=\"maintainAspectRatio\" [aspectRatio]=\"aspectRatio\"\n      [cropperStaticWidth]=\"cropperStaticWidth\" [cropperStaticHeight]=\"cropperStaticHeight\"\n      [onlyScaleDown]=\"onlyScaleDown\" [transform]=\"transform\" format=\"png\" (imageCropped)=\"imageCropped($event)\">\n    </image-cropper>\n\n    <div class=\"d-flex justify-content-center align-items-center gap-2 mt-3\">\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomOut()\"\n        [title]=\"translate('ZoomOut')\">\n        <i class=\"fa fa-search-minus\"></i>\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"resetZoom()\"\n        [title]=\"translate('ResetZoom')\">\n        <i class=\"fa fa-undo\"></i>\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomIn()\" [title]=\"translate('ZoomIn')\">\n        <i class=\"fa fa-search-plus\"></i>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"dismiss()\"> Cancel </button>\n    <button type=\"button\" class=\"btn btn-sm btn-brand\" [disabled]=\"!croppedBlob\" (click)=\"confirm()\">\n      {{ translate(\"Crop\") }}\n    </button>\n  </div>\n</div>\n", styles: [".bbsf-logo-cropper image-cropper.crop-horizontal .ngx-ic-source-image{max-height:45px!important;max-width:none!important}.bbsf-logo-cropper image-cropper.crop-vertical .ngx-ic-source-image{max-width:200px!important;max-height:none!important}\n"] }]
-        }], ctorParameters: () => [{ type: i3$2.NgbActiveModal }, { type: i3.UtilityService }], propDecorators: { imageFile: [{
-                type: Input
-            }], isHorizontal: [{
-                type: Input
-            }], aspectRatio: [{
-                type: Input
-            }], maintainAspectRatio: [{
-                type: Input
-            }], cropperStaticWidth: [{
-                type: Input
-            }], cropperStaticHeight: [{
-                type: Input
-            }], onlyScaleDown: [{
-                type: Input
-            }] } });
-
 /**
  * BBSF Uploads Module
  *
@@ -9625,7 +9732,7 @@ class MapAutoCompleteComponent {
         this.GermanAddressMapped(this.selectedPin);
         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: i6$3.ScriptService }], target: i0.ɵɵFactoryTarget.Component }); }
+    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: i6$4.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$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: [{
@@ -9639,7 +9746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], 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>" }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
                     type: Optional
-                }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i4.BBSFTranslateService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: i6$3.ScriptService }], propDecorators: { group: [{
+                }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i4.BBSFTranslateService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: i6$4.ScriptService }], propDecorators: { group: [{
                 type: Input
             }], options: [{
                 type: Input
@@ -10218,7 +10325,7 @@ class BTagsInputComponent {
         this.onBlurInput.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BTagsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: BTagsInputComponent, isStandalone: true, selector: "b-tags-input", inputs: { maxTags: "maxTags", removeLastOnBackspace: "removeLastOnBackspace", canDeleteTags: "canDeleteTags", canAddTags: "canAddTags", ViewMode: "ViewMode", placeholder: "placeholder", showDescription: "showDescription", options: "options", defaultImageURL: "defaultImageURL", minLengthBeforeOptions: "minLengthBeforeOptions", scrollableOptions: "scrollableOptions", scrollableOptionsInView: "scrollableOptionsInView" }, outputs: { onTagsChanged: "onTagsChanged", onMaxTagsReached: "onMaxTagsReached", onNoOptionsMatch: "onNoOptionsMatch", onBlurInput: "onBlurInput" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "\n\n<div class=\"tags-input\">\n<span class=\"tags-input__tag label label-primary badge badge-primary\" *ngFor=\"let tag of tags\">\n\n<span [ngSwitch]=\"ViewMode\">\n<span *ngSwitchCase=\"tagInputViewEnum.WithImage\">\n<img style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\"\nsrc=\"{{(tag.imageURL?tag.imageURL:defaultImageURL)}}\" />\n</span>\n\n<span *ngSwitchCase=\"tagInputViewEnum.WithInitial\">\n<div class=\"user-initials\">{{calculateInitials(tag.name)}}</div>\n</span>\n\n<span *ngSwitchDefault>\n</span>\n\n</span>\n  {{tag[displayField]}}\n  <span *ngIf=\"isDeleteable(tag)\" role=\"button\" class=\"tags-input__tag-remove-btn\" (click)=\"removeTag(tag)\"\n    (touch)=\"removeTag(tag)\">\n    <span aria-hidden=\"true\">&times;</span>\n    <span class=\"sr-only\">Close</span>\n  </span>\n</span>\n\n<input *ngIf=\"options === null; else withTypeahead\" class=\"tags-input__input-field\" type=\"text\"\n  [placeholder]=\"getPlaceholder()\" name=\"tags\" (keyup.enter)=\"addTag(tagInput)\"\n  (keydown.backspace)=\"removeLastTag(tagInput)\" [disabled]=\"!canAddTags || maximumOfTagsReached()\"\n  [hidden]=\"!canAddTags || maximumOfTagsReached()\" #tagInput />\n\n<ng-template #withTypeahead>\n  <span [ngSwitch]=\"ViewMode\">\n    <span *ngSwitchCase=\"tagInputViewEnum.WithImage\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithImage\" [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\"  autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchCase=\"tagInputViewEnum.WithoutImage\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutImage\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\" autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchCase=\"tagInputViewEnum.WithInitial\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutInitial\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\" autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchDefault>\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutImage\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\" autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n  </span>\n\n</ng-template>\n\n<ng-template #itemTemplateWithImage let-model=\"item\" let-index=\"index\">\n  <img\n    style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\"\n    src=\"{{(model.imageURL?model.imageURL:defaultImageURL)}}\" />\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n\n<ng-template #itemTemplateWithoutImage let-model=\"item\" let-index=\"index\">\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n\n<ng-template #itemTemplateWithoutInitial let-model=\"item\" let-index=\"index\">\n  <div class=\"user-image\">\n    <div class=\"user-initials\">{{calculateInitials(model.name)}}</div>\n  </div>\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n</div>\n", isInline: true, styles: [":host{overflow:auto;white-space:nowrap}.tags-input{align-items:center;display:flex;flex-wrap:wrap}.tags-input__tag{display:inline-block;margin-bottom:2px;margin-right:5px;padding-right:.3em}.tags-input__tag-remove-btn{cursor:pointer;display:inline-block;font-size:12px;margin:-3px 0 0 3px;padding:0;vertical-align:top}.tags-input__input-field{border:none;flex-grow:1;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TypeaheadModule }, { kind: "directive", type: i3$4.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: BTagsInputComponent, isStandalone: true, selector: "b-tags-input", inputs: { maxTags: "maxTags", removeLastOnBackspace: "removeLastOnBackspace", canDeleteTags: "canDeleteTags", canAddTags: "canAddTags", ViewMode: "ViewMode", placeholder: "placeholder", showDescription: "showDescription", options: "options", defaultImageURL: "defaultImageURL", minLengthBeforeOptions: "minLengthBeforeOptions", scrollableOptions: "scrollableOptions", scrollableOptionsInView: "scrollableOptionsInView" }, outputs: { onTagsChanged: "onTagsChanged", onMaxTagsReached: "onMaxTagsReached", onNoOptionsMatch: "onNoOptionsMatch", onBlurInput: "onBlurInput" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "\n\n<div class=\"tags-input\">\n<span class=\"tags-input__tag label label-primary badge badge-primary\" *ngFor=\"let tag of tags\">\n\n<span [ngSwitch]=\"ViewMode\">\n<span *ngSwitchCase=\"tagInputViewEnum.WithImage\">\n<img style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\"\nsrc=\"{{(tag.imageURL?tag.imageURL:defaultImageURL)}}\" />\n</span>\n\n<span *ngSwitchCase=\"tagInputViewEnum.WithInitial\">\n<div class=\"user-initials\">{{calculateInitials(tag.name)}}</div>\n</span>\n\n<span *ngSwitchDefault>\n</span>\n\n</span>\n  {{tag[displayField]}}\n  <span *ngIf=\"isDeleteable(tag)\" role=\"button\" class=\"tags-input__tag-remove-btn\" (click)=\"removeTag(tag)\"\n    (touch)=\"removeTag(tag)\">\n    <span aria-hidden=\"true\">&times;</span>\n    <span class=\"sr-only\">Close</span>\n  </span>\n</span>\n\n<input *ngIf=\"options === null; else withTypeahead\" class=\"tags-input__input-field\" type=\"text\"\n  [placeholder]=\"getPlaceholder()\" name=\"tags\" (keyup.enter)=\"addTag(tagInput)\"\n  (keydown.backspace)=\"removeLastTag(tagInput)\" [disabled]=\"!canAddTags || maximumOfTagsReached()\"\n  [hidden]=\"!canAddTags || maximumOfTagsReached()\" #tagInput />\n\n<ng-template #withTypeahead>\n  <span [ngSwitch]=\"ViewMode\">\n    <span *ngSwitchCase=\"tagInputViewEnum.WithImage\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithImage\" [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\"  autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchCase=\"tagInputViewEnum.WithoutImage\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutImage\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\" autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchCase=\"tagInputViewEnum.WithInitial\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutInitial\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\" autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchDefault>\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutImage\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\" autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n  </span>\n\n</ng-template>\n\n<ng-template #itemTemplateWithImage let-model=\"item\" let-index=\"index\">\n  <img\n    style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\"\n    src=\"{{(model.imageURL?model.imageURL:defaultImageURL)}}\" />\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n\n<ng-template #itemTemplateWithoutImage let-model=\"item\" let-index=\"index\">\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n\n<ng-template #itemTemplateWithoutInitial let-model=\"item\" let-index=\"index\">\n  <div class=\"user-image\">\n    <div class=\"user-initials\">{{calculateInitials(model.name)}}</div>\n  </div>\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n</div>\n", isInline: true, styles: [":host{overflow:auto;white-space:nowrap}.tags-input{align-items:center;display:flex;flex-wrap:wrap}.tags-input__tag{display:inline-block;margin-bottom:2px;margin-right:5px;padding-right:.3em}.tags-input__tag-remove-btn{cursor:pointer;display:inline-block;font-size:12px;margin:-3px 0 0 3px;padding:0;vertical-align:top}.tags-input__input-field{border:none;flex-grow:1;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TypeaheadModule }, { kind: "directive", type: i3$3.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BTagsInputComponent, decorators: [{
             type: Component,
@@ -12141,5 +12248,5 @@ var ToolbarButtons;
  * Generated bundle index. Do not edit.
  */
 
-export { AddButton, AppBaseComponent, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, BBSFCoreModule, BBSFDatePipe, BBSFDateTimeModule, BBSFDateTimePipe, BBSFDropdownModule, BBSFEditorsModule, BBSFFormsBasicModule, BBSFMultilingualModule, BBSFPhoneModule, BBSFSpecializedModule, BBSFUploadsModule, BBSFUtilityModule, BBSF_DATE_TIME_FORMATS, BTagsInputComponent, BreadCrumb, BreadCrumbModel, CalendarComponent, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxComponent, CheckBoxOptions, ConfirmationModalComponent, ConfirmationModalOptions, ControlFilterItem, ControlLayout, ControlOptionsBase, ControlUtility, Country, CustomValidation, CustomValidator, DataType, DateInputComponent, DatePickerOptions, DefaultIntl, DeleteButton, DropdownActionItem, DropdownActions, DropdownListComponent, DropdownListItem, DropdownOptions, EditButton, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, ExportButton, FileDTO, FileType, FileUploadComponent, FileUploadModel, FileUploadOptions, FilterItem, FilterOptions, FilterType, FiltersButton, FontSize, ForceDirection, FormComponent, FormOptions, GlobalSettings, GridViewModel, HtmlEditorComponent, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, ImageUploaderComponent, InputType, Insert, JwPaginationComponent, LanguageMode, LanguageValidation, LogoCropperComponent, MapAutoCompleteComponent, MapAutoCompleteOptions, MapAutocompleteDTO, MapSearchTypes, MapZoomLevel, MarkDownIcons, MarkdownEditorComponent, MarkdownEditorOptions, MarkdownMode, MenuListType, Misc, MultiLingualHtmlEditorComponent, MultiLingualHtmlEditorOptions, MultiLingualTextAreaComponent, MultiLingualTextAreaOptions, MultiLingualTextBoxComponent, MultiLingualTextBoxOptions, MultilingualControlOptionsBase, MultipleFileUploadModel, NgTemplateNameDirective, OnPagingFiltersChangeService, PageHeaderComponentComponent, PageHeaderOptions, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, PreventDoubleClickDirective, ProfileImageUploadOptions, ProfileImageUploaderComponent, ProfilePictureDTO, RadioButtonComponent, RadioButtonItem, RadioButtonOptions, RangeNumber, RecaptchaComponent, RecaptchaModel, RecaptchaOptions, RenderComponentService, RepeaterComponent, RepeaterField, RepeaterFieldBuilderComponent, RepeaterItemFieldComponent, RepeaterOptions, RepeaterTableComponent, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagInputView, TagsInputComponent, TagsInputDTO, TagsInputOptions, TextAreaComponent, TextAreaOptions, TextBoxModel, TextBoxOptions, TextboxComponent, ToggleSlideOptions, ToggleslideComponent, ToolbarButtons, UploadPersonalImage, environment, options };
+export { AddButton, AppBaseComponent, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, BBSFCoreModule, BBSFDatePipe, BBSFDateTimeModule, BBSFDateTimePipe, BBSFDropdownModule, BBSFEditorsModule, BBSFFormsBasicModule, BBSFMultilingualModule, BBSFPhoneModule, BBSFSpecializedModule, BBSFUploadsModule, BBSFUtilityModule, BBSF_DATE_TIME_FORMATS, BTagsInputComponent, BreadCrumb, BreadCrumbModel, CalendarComponent, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxComponent, CheckBoxOptions, ConfirmationModalComponent, ConfirmationModalOptions, ControlFilterItem, ControlLayout, ControlOptionsBase, ControlUtility, Country, CustomValidation, CustomValidator, DataType, DateInputComponent, DatePickerOptions, DefaultIntl, DeleteButton, DropdownActionItem, DropdownActions, DropdownListComponent, DropdownListItem, DropdownOptions, EditButton, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, ExportButton, FileDTO, FileType, FileUploadComponent, FileUploadCropperOptions, FileUploadCropperPreset, FileUploadModel, FileUploadOptions, FilterItem, FilterOptions, FilterType, FiltersButton, FontSize, ForceDirection, FormComponent, FormOptions, GlobalSettings, GridViewModel, HtmlEditorComponent, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, ImageUploaderComponent, InputType, Insert, JwPaginationComponent, LanguageMode, LanguageValidation, LogoCropperComponent, MapAutoCompleteComponent, MapAutoCompleteOptions, MapAutocompleteDTO, MapSearchTypes, MapZoomLevel, MarkDownIcons, MarkdownEditorComponent, MarkdownEditorOptions, MarkdownMode, MenuListType, Misc, MultiLingualHtmlEditorComponent, MultiLingualHtmlEditorOptions, MultiLingualTextAreaComponent, MultiLingualTextAreaOptions, MultiLingualTextBoxComponent, MultiLingualTextBoxOptions, MultilingualControlOptionsBase, MultipleFileUploadModel, NgTemplateNameDirective, OnPagingFiltersChangeService, PageHeaderComponentComponent, PageHeaderOptions, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, PreventDoubleClickDirective, ProfileImageUploadOptions, ProfileImageUploaderComponent, ProfilePictureDTO, RadioButtonComponent, RadioButtonItem, RadioButtonOptions, RangeNumber, RecaptchaComponent, RecaptchaModel, RecaptchaOptions, RenderComponentService, RepeaterComponent, RepeaterField, RepeaterFieldBuilderComponent, RepeaterItemFieldComponent, RepeaterOptions, RepeaterTableComponent, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagInputView, TagsInputComponent, TagsInputDTO, TagsInputOptions, TextAreaComponent, TextAreaOptions, TextBoxModel, TextBoxOptions, TextboxComponent, ToggleSlideOptions, ToggleslideComponent, ToolbarButtons, UploadPersonalImage, environment, options };
 //# sourceMappingURL=bnsights-bbsf-controls.mjs.map