@bnsights/bbsf-controls 1.0.86 → 1.0.87

package/fesm2015/{bnsights-bbsf-controls.js → bnsights-bbsf-controls.mjs}

@@ -1,52 +1,83 @@
+import * as i5$2 from '@fullcalendar/angular';
 import { FullCalendarModule } from '@fullcalendar/angular';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import listPlugin from '@fullcalendar/list';
 import interactionPlugin from '@fullcalendar/interaction';
 import * as i0 from '@angular/core';
-import { Injectable, Optional, EventEmitter, Component, Input, Output, ViewChild, NgZone, Directive, TemplateRef, ViewChildren, ComponentFactoryResolver, ViewContainerRef, Pipe, forwardRef, NgModule, NO_ERRORS_SCHEMA, Injector } from '@angular/core';
+import { Injectable, Optional, EventEmitter, Component, Input, Output, ViewChild, forwardRef, Directive, ViewContainerRef, ViewChildren, Pipe, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import * as i5$3 from 'ng-block-ui';
 import { BlockUIModule } from 'ng-block-ui';
-import { ControlContainer, Validators, FormControl, FormGroupDirective, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { Http, HttpModule } from '@angular/http';
-import { Router, RouterModule } from '@angular/router';
+import * as i2 from '@angular/forms';
+import { Validators, FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormGroupDirective } from '@angular/forms';
+import * as i1 from '@angular/http';
+import { HttpModule } from '@angular/http';
+import * as i3$2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i6$5 from 'ngx-toastr';
 import { ToastrModule } from 'ngx-toastr';
+import * as i7$6 from 'ngx-permissions';
 import { NgxPermissionsModule } from 'ngx-permissions';
 import { OverlayModule } from '@angular/cdk/overlay';
+import * as i8$2 from '@ngrx/store-devtools';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import { DatePipe, CommonModule } from '@angular/common';
+import * as i6 from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
+import * as i7$1 from 'ngx-intl-tel-input';
 import { SearchCountryField, NgxIntlTelInputModule } from 'ngx-intl-tel-input';
-import { UtilityService, ControlValidationService, BBSFTranslateService, RequestOptionsModel, RequestHandlerService, environment as environment$1, BBSFUtilitiesModule, ConfigurationService, EnvironmentService, AuthService } from '@bnsights/bbsf-utilities';
+import * as i3 from '@bnsights/bbsf-utilities';
+import { RequestOptionsModel, environment as environment$1, BBSFUtilitiesModule, UtilityService, ConfigurationService, EnvironmentService, AuthService } from '@bnsights/bbsf-utilities';
+import * as i9 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import * as i7 from 'ng-pick-datetime';
+import { OwlDateTimeIntl, OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
 import { Subject, Observable, noop as noop$1, of, EMPTY, Subscription } from 'rxjs';
-import { OwlDateTimeIntl, DateTimeAdapter, OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
+import * as i8 from '@angular/cdk/bidi';
+import * as i6$1 from 'ng2-file-upload';
 import { FileUploader, FileLikeObject, FileUploadModule } from 'ng2-file-upload';
 import { __decorate, __awaiter } from 'tslib';
 import { Expose, plainToClass } from 'class-transformer';
+import * as i6$2 from 'ng-inline-svg';
+import { InlineSVGModule } from 'ng-inline-svg';
+import * as i4$1 from 'ng-multiselect-dropdown';
 import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
+import * as i6$3 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
 import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown';
+import * as i5 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i5$1 from '@kolkov/angular-editor';
+import { AngularEditorModule } from '@kolkov/angular-editor';
 import { NgxSummernoteModule } from 'ngx-summernote';
+import * as i7$4 from 'ngx-mask';
 import { NgxMaskModule } from 'ngx-mask';
 import { TooltipModule } from '@syncfusion/ej2-angular-popups';
-import { NgbModal, NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i3$1 from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule, NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import * as i6$4 from 'ngx-dropzone';
 import { NgxDropzoneModule } from 'ngx-dropzone';
+import * as i7$2 from 'angular-cropperjs';
 import { AngularCropperjsModule } from 'angular-cropperjs';
 import { ImageCropperModule } from 'ngx-image-cropper';
+import * as i1$3 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
-import { HttpHeaders, HttpParams, HttpClient, HttpClientModule } from '@angular/common/http';
+import * as i1$1 from '@angular/common/http';
+import { HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
 import { NgxTypeaheadModule } from 'ngx-typeahead';
 import { switchMap, map, tap } from 'rxjs/operators';
+import * as i7$3 from 'angular-ng-autocomplete';
+import { AutocompleteLibModule } from 'angular-ng-autocomplete';
 import { NgxTagsInputModule } from 'ngx-tags-input';
-import { NgSelectModule } from '@ng-select/ng-select';
+import * as i4 from 'ngx-bootstrap/typeahead';
+import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
+import * as i8$1 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import { LazyMapsAPILoader, MapsAPILoader, AgmCoreModule } from '@agm/core';
+import * as i1$2 from '@agm/core';
+import { LazyMapsAPILoader, AgmCoreModule } from '@agm/core';
+import * as i7$5 from '@angular-material-extensions/google-maps-autocomplete';
 import { MatGoogleMapsAutocompleteModule } from '@angular-material-extensions/google-maps-autocomplete';
 import enGbLocale from '@fullcalendar/core/locales/en-gb';
 import ArLocale from '@fullcalendar/core/locales/ar';
-import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { AngularEditorModule } from '@kolkov/angular-editor';
-import { AutocompleteLibModule } from 'angular-ng-autocomplete';
-import { InlineSVGModule } from 'ng-inline-svg';
 import Swal from 'sweetalert2';
 import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 import { Title } from '@angular/platform-browser';
@@ -176,14 +207,81 @@ class ErrorMassageValidation {
     }
 }
 ErrorMassageValidation.controlContainerstatic = null;
-ErrorMassageValidation.decorators = [
-    { type: Injectable }
-];
-ErrorMassageValidation.ctorParameters = () => [
-    { type: Http },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: UtilityService }
-];
+ErrorMassageValidation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ErrorMassageValidation, deps: [{ token: i1.Http }, { token: i2.ControlContainer, optional: true }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Injectable });
+ErrorMassageValidation.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ErrorMassageValidation });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ErrorMassageValidation, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: i1.Http }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i3.UtilityService }];
+    } });
+
+var PickerType;
+(function (PickerType) {
+    PickerType[PickerType["Both"] = 1] = "Both";
+    PickerType[PickerType["Calendar"] = 2] = "Calendar";
+    PickerType[PickerType["Timer"] = 3] = "Timer";
+})(PickerType || (PickerType = {}));
+
+var StartView;
+(function (StartView) {
+    StartView[StartView["Month"] = 1] = "Month";
+    StartView[StartView["Year"] = 2] = "Year";
+    StartView[StartView["MultiYear"] = 3] = "MultiYear";
+})(StartView || (StartView = {}));
+
+var SelectMode;
+(function (SelectMode) {
+    SelectMode[SelectMode["Single"] = 1] = "Single";
+    SelectMode[SelectMode["Range"] = 2] = "Range";
+})(SelectMode || (SelectMode = {}));
+
+// here is the default text string - just adjust the strings to reflect your preferred language
+class DefaultIntl extends OwlDateTimeIntl {
+    constructor(utilityService) {
+        super();
+        this.utilityService = utilityService;
+        /** A label for the range 'from' in picker info */
+        this.rangeFromLabel = this.utilityService.getResourceValue('From');
+        /** A label for the range 'to' in picker info */
+        this.rangeToLabel = this.utilityService.getResourceValue('To');
+        /** A label for the cancel button */
+        this.cancelBtnLabel = this.utilityService.getResourceValue('Cancel');
+        /** A label for the set button */
+        this.setBtnLabel = this.utilityService.getResourceValue('Save');
+        /** A label for the hour12 button (AM) */
+        this.hour12AMLabel = this.utilityService.getResourceValue('AM');
+        /** A label for the hour12 button (PM) */
+        this.hour12PMLabel = this.utilityService.getResourceValue('PM');
+    }
+}
+DefaultIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DefaultIntl, deps: [{ token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Injectable });
+DefaultIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DefaultIntl });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DefaultIntl, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i3.UtilityService }]; } });
+
+class OnPagingFiltersChangeService {
+    constructor() {
+        this.subject = new Subject();
+    }
+    ChangeValue(value) {
+        this.subject.next(value);
+    }
+    ClearValue() {
+        this.subject.next();
+    }
+    GetValue() {
+        return this.subject.asObservable();
+    }
+}
+OnPagingFiltersChangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: OnPagingFiltersChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+OnPagingFiltersChangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: OnPagingFiltersChangeService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: OnPagingFiltersChangeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 var InputType;
 (function (InputType) {
@@ -344,79 +442,11 @@ class ControlUtility {
         FormControl.markAsTouched();
     }
 }
-ControlUtility.decorators = [
-    { type: Injectable }
-];
-ControlUtility.ctorParameters = () => [
-    { type: ErrorMassageValidation },
-    { type: ControlValidationService },
-    { type: UtilityService }
-];
-
-var PickerType;
-(function (PickerType) {
-    PickerType[PickerType["Both"] = 1] = "Both";
-    PickerType[PickerType["Calendar"] = 2] = "Calendar";
-    PickerType[PickerType["Timer"] = 3] = "Timer";
-})(PickerType || (PickerType = {}));
-
-var StartView;
-(function (StartView) {
-    StartView[StartView["Month"] = 1] = "Month";
-    StartView[StartView["Year"] = 2] = "Year";
-    StartView[StartView["MultiYear"] = 3] = "MultiYear";
-})(StartView || (StartView = {}));
-
-var SelectMode;
-(function (SelectMode) {
-    SelectMode[SelectMode["Single"] = 1] = "Single";
-    SelectMode[SelectMode["Range"] = 2] = "Range";
-})(SelectMode || (SelectMode = {}));
-
-class OnPagingFiltersChangeService {
-    constructor() {
-        this.subject = new Subject();
-    }
-    ChangeValue(value) {
-        this.subject.next(value);
-    }
-    ClearValue() {
-        this.subject.next();
-    }
-    GetValue() {
-        return this.subject.asObservable();
-    }
-}
-OnPagingFiltersChangeService.ɵprov = i0.ɵɵdefineInjectable({ factory: function OnPagingFiltersChangeService_Factory() { return new OnPagingFiltersChangeService(); }, token: OnPagingFiltersChangeService, providedIn: "root" });
-OnPagingFiltersChangeService.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
-
-// here is the default text string - just adjust the strings to reflect your preferred language
-class DefaultIntl extends OwlDateTimeIntl {
-    constructor(utilityService) {
-        super();
-        this.utilityService = utilityService;
-        /** A label for the range 'from' in picker info */
-        this.rangeFromLabel = this.utilityService.getResourceValue('From');
-        /** A label for the range 'to' in picker info */
-        this.rangeToLabel = this.utilityService.getResourceValue('To');
-        /** A label for the cancel button */
-        this.cancelBtnLabel = this.utilityService.getResourceValue('Cancel');
-        /** A label for the set button */
-        this.setBtnLabel = this.utilityService.getResourceValue('Save');
-        /** A label for the hour12 button (AM) */
-        this.hour12AMLabel = this.utilityService.getResourceValue('AM');
-        /** A label for the hour12 button (PM) */
-        this.hour12PMLabel = this.utilityService.getResourceValue('PM');
-    }
-}
-DefaultIntl.decorators = [
-    { type: Injectable }
-];
-DefaultIntl.ctorParameters = () => [
-    { type: UtilityService }
-];
+ControlUtility.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ControlUtility, deps: [{ token: ErrorMassageValidation }, { token: i3.ControlValidationService }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Injectable });
+ControlUtility.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ControlUtility });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ControlUtility, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: ErrorMassageValidation }, { type: i3.ControlValidationService }, { type: i3.UtilityService }]; } });
 
 class DateInputComponent {
     // tslint:disable-next-line: max-line-length
@@ -489,6 +519,12 @@ class DateInputComponent {
         DateInputComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
+        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        if (this.options.StartView == 3)
+            this.startView = 'multi-year';
+        else {
+            this.startView = StartView[this.options.StartView].toLowerCase();
+        }
         // Update the DateTimeAdapter Language with the current thread langauge
         this.dateTimeAdapter.setLocale(this.UtilityService.getCurrentLanguage() == "ar" ? "ar" : "en-UK");
         this.controlValidationService.isCreatedBefor = false;
@@ -549,10 +585,10 @@ class DateInputComponent {
     }
     getStartView(type) {
         if (type == 3)
-            return "multi-year";
+            return 'multi-year';
         else {
-            let Value = StartView[type];
-            return Value.toLowerCase();
+            const Value = StartView[type].toLowerCase();
+            return Value;
         }
     }
     onDateSelect(item) {
@@ -593,32 +629,26 @@ class DateInputComponent {
     }
 }
 DateInputComponent.controlContainerstatic = null;
-DateInputComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-DateTimePicker',
-                template: "\r\n<div class=\"form-group bbsf-control bbsf-datetime-picker\" [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    </label>\r\n    <!--Asterisk-->\r\n    <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\"\r\n          aria-required=\"true\">*</span>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <input autocomplete=\"off\" (dateTimeChange)=\"onDateSelect($event)\"\r\n             dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n             class=\"form-control bnsights-control  {{options.ExtraClasses}} \"\r\n             [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n             formControlName=\"{{options.Name}}\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\"\r\n             [class.is-invalid]=\"DatePickerFormControl.invalid && DatePickerFormControl.touched\"\r\n             [min]=\"options.StartDate\" [max]=\"options.EndDate\" [hour12Timer]=\"options.Hour12Timer\" [selectMode]=\"getSelectMode(options.SelectMode)\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" #Dateinput>\r\n\r\n      <owl-date-time [pickerType]=\"getPickerType(options.PickerType)\"\r\n                     [startView]=\"getStartView(options.StartView)\" [firstDayOfWeek]=\"options.FirstDayOfWeek\"\r\n                     [hour12Timer]=\"options.Hour12Timer\" #dt1></owl-date-time>\r\n      <!--icon-->\r\n      <span class=\"copy-clipboard\" [owlDateTimeTrigger]=\"dt1\">\r\n        <span class=\"svg-icon\">\r\n          <svg id=\"Group_356\" data-name=\"Group 356\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 48 48\">\r\n            <path id=\"Path_6737\" data-name=\"Path 6737\" d=\"M11.583,1a1,1,0,0,0-2,0V5.7h2Z\" style=\"\"></path>\r\n            <path id=\"Path_6738\" data-name=\"Path 6738\" d=\"M38.417,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n            <path id=\"Path_6739\" data-name=\"Path 6739\" d=\"M0,43.146C0,45.822,1.826,48,4.07,48H43.928C46.174,48,48,45.822,48,43.146V17.121H0Z\" fill=\"#d5d5d5\"></path>\r\n            <path id=\"Path_6740\" data-name=\"Path 6740\" d=\"M43.929,5.7H38.417v5.512a1,1,0,1,1-2,0V5.7H11.583v5.512a1,1,0,1,1-2,0V5.7H4.07C1.826,5.7,0,7.877,0,10.555v4.566H48V10.555C48,7.877,46.174,5.7,43.929,5.7Z\" fill=\"#595959\"></path>\r\n          </svg>\r\n        </span>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(DatePickerFormControl.invalid && DatePickerFormControl.touched)\">\r\n      {{getErrorValidation(DatePickerFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n",
-                providers: [
-                    { provide: OwlDateTimeIntl, useClass: DefaultIntl }
-                ]
-            },] }
-];
-DateInputComponent.ctorParameters = () => [
-    { type: DatePipe },
-    { type: OnPagingFiltersChangeService },
-    { type: ErrorMassageValidation },
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: BBSFTranslateService },
-    { type: ControlValidationService },
-    { type: DateTimeAdapter }
-];
-DateInputComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateInputComponent, deps: [{ token: i6.DatePipe }, { token: OnPagingFiltersChangeService }, { token: ErrorMassageValidation }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.BBSFTranslateService }, { token: i3.ControlValidationService }, { token: i7.DateTimeAdapter }], target: i0.ɵɵFactoryTarget.Component });
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateInputComponent, selector: "BBSF-DateTimePicker", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, providers: [
+        { provide: OwlDateTimeIntl, useClass: DefaultIntl }
+    ], ngImport: i0, template: "\r\n<div class=\"form-group bbsf-control bbsf-datetime-picker\" [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    </label>\r\n    <!--Asterisk-->\r\n    <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\"\r\n          aria-required=\"true\">*</span>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <input autocomplete=\"off\" (dateTimeChange)=\"onDateSelect($event)\"\r\n      [dir]=\"textDir\"\r\n             class=\"form-control bnsights-control  {{options.ExtraClasses}} \"\r\n             [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n             formControlName=\"{{options.Name}}\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\"\r\n             [class.is-invalid]=\"DatePickerFormControl.invalid && DatePickerFormControl.touched\"\r\n             [min]=\"options.StartDate\" [max]=\"options.EndDate\" [hour12Timer]=\"options.Hour12Timer\" [selectMode]=\"getSelectMode(options.SelectMode)\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" #Dateinput>\r\n\r\n      <owl-date-time [pickerType]=\"getPickerType(options.PickerType)\"\r\n                     [startView]=\"startView\" [firstDayOfWeek]=\"options.FirstDayOfWeek\"\r\n                     [hour12Timer]=\"options.Hour12Timer\" #dt1></owl-date-time>\r\n      <!--icon-->\r\n      <span class=\"copy-clipboard\" [owlDateTimeTrigger]=\"dt1\">\r\n        <span class=\"svg-icon\">\r\n          <svg id=\"Group_356\" data-name=\"Group 356\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 48 48\">\r\n            <path id=\"Path_6737\" data-name=\"Path 6737\" d=\"M11.583,1a1,1,0,0,0-2,0V5.7h2Z\" style=\"\"></path>\r\n            <path id=\"Path_6738\" data-name=\"Path 6738\" d=\"M38.417,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n            <path id=\"Path_6739\" data-name=\"Path 6739\" d=\"M0,43.146C0,45.822,1.826,48,4.07,48H43.928C46.174,48,48,45.822,48,43.146V17.121H0Z\" fill=\"#d5d5d5\"></path>\r\n            <path id=\"Path_6740\" data-name=\"Path 6740\" d=\"M43.929,5.7H38.417v5.512a1,1,0,1,1-2,0V5.7H11.583v5.512a1,1,0,1,1-2,0V5.7H4.07C1.826,5.7,0,7.877,0,10.555v4.566H48V10.555C48,7.877,46.174,5.7,43.929,5.7Z\" fill=\"#595959\"></path>\r\n          </svg>\r\n        </span>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(DatePickerFormControl.invalid && DatePickerFormControl.touched)\">\r\n      {{getErrorValidation(DatePickerFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n", components: [{ type: i7.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }, { type: i7.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i7.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-DateTimePicker', providers: [
+                        { provide: OwlDateTimeIntl, useClass: DefaultIntl }
+                    ], template: "\r\n<div class=\"form-group bbsf-control bbsf-datetime-picker\" [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    </label>\r\n    <!--Asterisk-->\r\n    <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\"\r\n          aria-required=\"true\">*</span>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <input autocomplete=\"off\" (dateTimeChange)=\"onDateSelect($event)\"\r\n      [dir]=\"textDir\"\r\n             class=\"form-control bnsights-control  {{options.ExtraClasses}} \"\r\n             [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n             formControlName=\"{{options.Name}}\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\"\r\n             [class.is-invalid]=\"DatePickerFormControl.invalid && DatePickerFormControl.touched\"\r\n             [min]=\"options.StartDate\" [max]=\"options.EndDate\" [hour12Timer]=\"options.Hour12Timer\" [selectMode]=\"getSelectMode(options.SelectMode)\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" #Dateinput>\r\n\r\n      <owl-date-time [pickerType]=\"getPickerType(options.PickerType)\"\r\n                     [startView]=\"startView\" [firstDayOfWeek]=\"options.FirstDayOfWeek\"\r\n                     [hour12Timer]=\"options.Hour12Timer\" #dt1></owl-date-time>\r\n      <!--icon-->\r\n      <span class=\"copy-clipboard\" [owlDateTimeTrigger]=\"dt1\">\r\n        <span class=\"svg-icon\">\r\n          <svg id=\"Group_356\" data-name=\"Group 356\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 48 48\">\r\n            <path id=\"Path_6737\" data-name=\"Path 6737\" d=\"M11.583,1a1,1,0,0,0-2,0V5.7h2Z\" style=\"\"></path>\r\n            <path id=\"Path_6738\" data-name=\"Path 6738\" d=\"M38.417,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n            <path id=\"Path_6739\" data-name=\"Path 6739\" d=\"M0,43.146C0,45.822,1.826,48,4.07,48H43.928C46.174,48,48,45.822,48,43.146V17.121H0Z\" fill=\"#d5d5d5\"></path>\r\n            <path id=\"Path_6740\" data-name=\"Path 6740\" d=\"M43.929,5.7H38.417v5.512a1,1,0,1,1-2,0V5.7H11.583v5.512a1,1,0,1,1-2,0V5.7H4.07C1.826,5.7,0,7.877,0,10.555v4.566H48V10.555C48,7.877,46.174,5.7,43.929,5.7Z\" fill=\"#595959\"></path>\r\n          </svg>\r\n        </span>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(DatePickerFormControl.invalid && DatePickerFormControl.touched)\">\r\n      {{getErrorValidation(DatePickerFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i6.DatePipe }, { type: OnPagingFiltersChangeService }, { type: ErrorMassageValidation }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.BBSFTranslateService }, { type: i3.ControlValidationService }, { type: i7.DateTimeAdapter }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
 class FileUploadModel {
 }
@@ -668,10 +698,12 @@ class GlobalSettings {
         this.DefaultImageSrc = "./src/assets/images/uploadimg.png";
     }
 }
-GlobalSettings.ɵprov = i0.ɵɵdefineInjectable({ factory: function GlobalSettings_Factory() { return new GlobalSettings(); }, token: GlobalSettings, providedIn: "root" });
-GlobalSettings.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
+GlobalSettings.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GlobalSettings, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GlobalSettings.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GlobalSettings, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GlobalSettings, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 class FileUploadComponent {
     constructor(controlContainer, MultipleFileUplaodControlHost, controlUtility, UtilityService, controlValidationService, globalSettings) {
@@ -1082,7 +1114,7 @@ class FileUploadComponent {
             this.multipleFileUploadModel.UploadedFiles =
                 this.multipleFileUploadModel.UploadedFiles.filter((Object) => Object.NameWithExtension != item._file.name);
             if ((this.multipleFileUploadModel.UploadedFiles == null ||
-                this.multipleFileUploadModel.UploadedFiles == []) &&
+                this.multipleFileUploadModel.UploadedFiles.length == 0) &&
                 this.options.IsRequired) {
                 this.fileUploadFormControl.markAsTouched();
                 this.fileUploadFormControl.invalid;
@@ -1095,26 +1127,25 @@ class FileUploadComponent {
     }
 }
 FileUploadComponent.controlContainerstatic = null;
-FileUploadComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-FileUplaod',
-                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)\" 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))\"\r\n         [ngClass]=\"{'another-file-over-class': hasAnotherDropZoneOver}\" (onFileDrop)=\"onFileChange()\"\r\n         (fileOver)=\"fileOverAnother($event)\" [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n         (change)=\"onFileChange()\" id=\"{{options.Name}}\" multiple=\"{{options.IsMultipleFile?'multiple':''}}\"\r\n         aria-describedby=\"email-error\" aria-invalid=\"true\" type=\"file\" formControlName=\"{{options.Name}}\" #fileInput\r\n         [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg text-center\">{{UtilityService.getResourceValue(\"DragAndDropHere\")}} </div>\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\" *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div class=\"bbsf-input-container\" *ngIf=\"(!options.IsDropZone)&&!(isHideInput())\" (click)=\"fileInput.click();\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg  text-center\">{{UtilityService.getResourceValue(\"Upload\")}} </div>\r\n          <div class=\"bbsf-validation-msg  text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\" *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></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=\"\"\r\n             autocomplete=\"off\" (change)=\"onFileChange()\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n             id=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n             formControlName=\"{{options.Name}}\" #fileInput\r\n             [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\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      <button type=\"button\" class=\"btn btn-download-file btn-sm\" href=\"{{ item?._file?.url}}\" 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 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\" 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\"></path>\r\n        </svg>\r\n        <span class=\"file-name\">{{ item?.file?.name }}</span>\r\n      </button>\r\n      <button 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    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n         *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) \">{{resetError()}}</div>\r\n  </div>\r\n\r\n</div>\r\n\r\n"
-            },] }
-];
-FileUploadComponent.ctorParameters = () => [
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: ControlUtility },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-FileUploadComponent.propDecorators = {
-    fileInput: [{ type: ViewChild, args: ['fileInput', { static: false },] }],
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileUploadComponent, deps: [{ token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FileUploadComponent, selector: "BBSF-FileUplaod", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, 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)\" 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))\"\r\n         [ngClass]=\"{'another-file-over-class': hasAnotherDropZoneOver}\" (onFileDrop)=\"onFileChange()\"\r\n         (fileOver)=\"fileOverAnother($event)\" [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n         (change)=\"onFileChange()\" id=\"{{options.Name}}\" multiple=\"{{options.IsMultipleFile?'multiple':''}}\"\r\n         aria-describedby=\"email-error\" aria-invalid=\"true\" type=\"file\" formControlName=\"{{options.Name}}\" #fileInput\r\n         [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg text-center\">{{UtilityService.getResourceValue(\"DragAndDropHere\")}} </div>\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\" *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div class=\"bbsf-input-container\" *ngIf=\"(!options.IsDropZone)&&!(isHideInput())\" (click)=\"fileInput.click();\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg  text-center\">{{UtilityService.getResourceValue(\"Upload\")}} </div>\r\n          <div class=\"bbsf-validation-msg  text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\" *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></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=\"\"\r\n             autocomplete=\"off\" (change)=\"onFileChange()\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n             id=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n             formControlName=\"{{options.Name}}\" #fileInput\r\n             [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\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      <button type=\"button\" class=\"btn btn-download-file btn-sm\" href=\"{{ item?._file?.webkitRelativePath}}\" 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 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\" 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\"></path>\r\n        </svg>\r\n        <span class=\"file-name\">{{ item?.file?.name }}</span>\r\n      </button>\r\n      <button 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    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n         *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) \">{{resetError()}}</div>\r\n  </div>\r\n\r\n</div>\r\n\r\n", directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { 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]" }, { type: i6$1.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-FileUplaod', 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)\" 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))\"\r\n         [ngClass]=\"{'another-file-over-class': hasAnotherDropZoneOver}\" (onFileDrop)=\"onFileChange()\"\r\n         (fileOver)=\"fileOverAnother($event)\" [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n         (change)=\"onFileChange()\" id=\"{{options.Name}}\" multiple=\"{{options.IsMultipleFile?'multiple':''}}\"\r\n         aria-describedby=\"email-error\" aria-invalid=\"true\" type=\"file\" formControlName=\"{{options.Name}}\" #fileInput\r\n         [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg text-center\">{{UtilityService.getResourceValue(\"DragAndDropHere\")}} </div>\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\" *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div class=\"bbsf-input-container\" *ngIf=\"(!options.IsDropZone)&&!(isHideInput())\" (click)=\"fileInput.click();\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg  text-center\">{{UtilityService.getResourceValue(\"Upload\")}} </div>\r\n          <div class=\"bbsf-validation-msg  text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\" *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></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=\"\"\r\n             autocomplete=\"off\" (change)=\"onFileChange()\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n             id=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n             formControlName=\"{{options.Name}}\" #fileInput\r\n             [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\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      <button type=\"button\" class=\"btn btn-download-file btn-sm\" href=\"{{ item?._file?.webkitRelativePath}}\" 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 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\" 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\"></path>\r\n        </svg>\r\n        <span class=\"file-name\">{{ item?.file?.name }}</span>\r\n      </button>\r\n      <button 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    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n         *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) \">{{resetError()}}</div>\r\n  </div>\r\n\r\n</div>\r\n\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: ControlUtility }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput', { static: false }]
+            }], group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
 class EnglishArabicDTO {
 }
@@ -1523,26 +1554,22 @@ class MultiLingualTextBoxComponent {
     }
 }
 MultiLingualTextBoxComponent.controlContainerstatic = null;
-MultiLingualTextBoxComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-MultiLingualTextBox',
-                template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\" [formGroup]=\"MultiLanguagegroup\">\r\n    <div class=\"row\">\r\n      <!--English textbox-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowEnglishTextBox\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish)\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--Icon-->\r\n            <div class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPositionEN==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n              <span [inlineSVG]=\"options.Icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"ltr\"\r\n                   (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(false)\"\r\n                   aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"English\"\r\n                   [hidden]=\"options.IsHideEnglishFields\" maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                   [class.is-invalid]=\"EnglishFormControl.invalid && EnglishFormControl.touched\"\r\n                   placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                   (keyup)=\"onTextChange()\"\r\n                   (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                   autocomplete=\"{{options.AutoComplete}}\"\r\n                   id=\"{{options.Name}}.English\" [(ngModel)]=\"options.Value.English\"\r\n                   #userinputEnglish>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n            {{englishMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n            {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n            {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <!--Arabic textbox-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowArabicTextBox\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\"  class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--Icon-->\r\n            <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\"  [ngClass]=\"(options.IconPositionEN==1)?'right-icon':'left-icon'\">\r\n              <span [inlineSVG]=\"options.Icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"rtl\"\r\n                   (focus)=\"onArabicFocus(true)\" (focusout)=\"onArabicFocus(false)\"\r\n                   [hidden]=\"options.IsHideArabicFields\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                   formControlName=\"Arabic\" maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                   [class.is-invalid]=\"ArabicFormControl.invalid && ArabicFormControl.touched\"\r\n                   placeholder=\"{{options.ArabicPlaceholder}}\" (keyup)=\"onTextChange()\"\r\n                   (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                   autocomplete=\"{{options.AutoComplete}}\"\r\n                   id=\"{{options.Name}}.Arabic\"\r\n                   (change)=\"trimControlValue('Ar')\" #userinputArabic>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\"(click)=\"copyInputMessage(userinputArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n            {{arabicMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n            {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n            {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n"
-            },] }
-];
-MultiLingualTextBoxComponent.ctorParameters = () => [
-    { type: FormGroupDirective },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: ControlUtility },
-    { type: UtilityService },
-    { type: BBSFTranslateService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-MultiLingualTextBoxComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+MultiLingualTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiLingualTextBoxComponent, deps: [{ token: i2.FormGroupDirective }, { token: i2.ControlContainer, optional: true }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i3.BBSFTranslateService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+MultiLingualTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiLingualTextBoxComponent, selector: "BBSF-MultiLingualTextBox", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\" [formGroup]=\"MultiLanguagegroup\">\r\n    <div class=\"row\">\r\n      <!--English textbox-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowEnglishTextBox\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish)\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--Icon-->\r\n            <div class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPositionEN==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n              <span [inlineSVG]=\"options.Icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"ltr\"\r\n                   (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(false)\"\r\n                   aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"English\"\r\n                   [hidden]=\"options.IsHideEnglishFields\" maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                   [class.is-invalid]=\"EnglishFormControl.invalid && EnglishFormControl.touched\"\r\n                   placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                   (keyup)=\"onTextChange()\"\r\n                   (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                   autocomplete=\"{{options.AutoComplete}}\"\r\n                   id=\"{{options.Name}}.English\" [(ngModel)]=\"options.Value.English\"\r\n                   #userinputEnglish>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n            {{englishMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n            {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n            {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <!--Arabic textbox-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowArabicTextBox\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\"  class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--Icon-->\r\n            <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\"  [ngClass]=\"(options.IconPositionEN==1)?'right-icon':'left-icon'\">\r\n              <span [inlineSVG]=\"options.Icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"rtl\"\r\n                   (focus)=\"onArabicFocus(true)\" (focusout)=\"onArabicFocus(false)\"\r\n                   [hidden]=\"options.IsHideArabicFields\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                   formControlName=\"Arabic\" maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                   [class.is-invalid]=\"ArabicFormControl.invalid && ArabicFormControl.touched\"\r\n                   placeholder=\"{{options.ArabicPlaceholder}}\" (keyup)=\"onTextChange()\"\r\n                   (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                   autocomplete=\"{{options.AutoComplete}}\"\r\n                   id=\"{{options.Name}}.Arabic\"\r\n                   (change)=\"trimControlValue('Ar')\" #userinputArabic>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\"(click)=\"copyInputMessage(userinputArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n            {{arabicMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n            {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n            {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "forceEvalStyles", "evalScripts", "inlineSVG", "setSVGAttributes", "removeSVGAttributes", "fallbackImgUrl", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { 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]" }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiLingualTextBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-MultiLingualTextBox', template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\" [formGroup]=\"MultiLanguagegroup\">\r\n    <div class=\"row\">\r\n      <!--English textbox-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowEnglishTextBox\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish)\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--Icon-->\r\n            <div class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPositionEN==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n              <span [inlineSVG]=\"options.Icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"ltr\"\r\n                   (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(false)\"\r\n                   aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"English\"\r\n                   [hidden]=\"options.IsHideEnglishFields\" maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                   [class.is-invalid]=\"EnglishFormControl.invalid && EnglishFormControl.touched\"\r\n                   placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                   (keyup)=\"onTextChange()\"\r\n                   (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                   autocomplete=\"{{options.AutoComplete}}\"\r\n                   id=\"{{options.Name}}.English\" [(ngModel)]=\"options.Value.English\"\r\n                   #userinputEnglish>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n            {{englishMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n            {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n            {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <!--Arabic textbox-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowArabicTextBox\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\"  class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--Icon-->\r\n            <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\"  [ngClass]=\"(options.IconPositionEN==1)?'right-icon':'left-icon'\">\r\n              <span [inlineSVG]=\"options.Icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"rtl\"\r\n                   (focus)=\"onArabicFocus(true)\" (focusout)=\"onArabicFocus(false)\"\r\n                   [hidden]=\"options.IsHideArabicFields\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                   formControlName=\"Arabic\" maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                   [class.is-invalid]=\"ArabicFormControl.invalid && ArabicFormControl.touched\"\r\n                   placeholder=\"{{options.ArabicPlaceholder}}\" (keyup)=\"onTextChange()\"\r\n                   (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                   autocomplete=\"{{options.AutoComplete}}\"\r\n                   id=\"{{options.Name}}.Arabic\"\r\n                   (change)=\"trimControlValue('Ar')\" #userinputArabic>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\"(click)=\"copyInputMessage(userinputArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n            {{arabicMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n            {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n            {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i2.FormGroupDirective }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: ControlUtility }, { type: i3.UtilityService }, { type: i3.BBSFTranslateService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
 class TextAreaComponent {
     constructor(controlUtility, controlContainer, TextAreaControlHost, UtilityService, controlValidationService, globalSettings) {
@@ -1591,6 +1618,7 @@ class TextAreaComponent {
         TextAreaComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
+        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.Name, new FormControl(''));
         this.TextAreaFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -1710,25 +1738,22 @@ class TextAreaComponent {
     }
 }
 TextAreaComponent.controlContainerstatic = null;
-TextAreaComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-TextArea',
-                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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.ExtraClasses}}\"\r\n                (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n                dir=\"{{options.ForceDirection==2?'rtl':''}}\" aria-describedby=\"email-error\"\r\n                aria-invalid=\"true\" 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                maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\" [(ngModel)]=\"options.Value\"\r\n                (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\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\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n         *ngIf=\"(TextAreaFormControl.invalid && TextAreaFormControl.touched)\">\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) \">{{resetError()}}</div>\r\n</div>\r\n"
-            },] }
-];
-TextAreaComponent.ctorParameters = () => [
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-TextAreaComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+TextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextAreaComponent, 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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.ExtraClasses}}\"\r\n                (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n                [dir]=\"textDir\" aria-describedby=\"email-error\"\r\n                aria-invalid=\"true\" 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                maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\" [(ngModel)]=\"options.Value\"\r\n                (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\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\" [dir]=\"textDir\"\r\n         *ngIf=\"(TextAreaFormControl.invalid && TextAreaFormControl.touched)\">\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) \">{{resetError()}}</div>\r\n</div>\r\n", directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-TextArea', 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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.ExtraClasses}}\"\r\n                (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n                [dir]=\"textDir\" aria-describedby=\"email-error\"\r\n                aria-invalid=\"true\" 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                maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\" [(ngModel)]=\"options.Value\"\r\n                (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\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\" [dir]=\"textDir\"\r\n         *ngIf=\"(TextAreaFormControl.invalid && TextAreaFormControl.touched)\">\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) \">{{resetError()}}</div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
 class MultiLingualTextAreaComponent {
     constructor(MultiLingualTextAreaFormControlHost, controlContainer, controlUtility, UtilityService, controlValidationService, globalSettings) {
@@ -2130,25 +2155,22 @@ class MultiLingualTextAreaComponent {
     }
 }
 MultiLingualTextAreaComponent.controlContainerstatic = null;
-MultiLingualTextAreaComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-MultiLingualTextArea',
-                template: "<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textarea form-group mb-0\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n    <div class=\"row\">\r\n      <!--English textarea-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowEngishTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInEnglish\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control\" dir=\"ltr\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                      (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(false)\"\r\n                      maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                      aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                      formControlName=\"English\" [hidden]=\"options.IsHideEnglishFields\"\r\n                      [class.is-invalid]=\"EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched\"\r\n                      placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                      (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value.English\"\r\n                      (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                      #userinputTextAreaEnglish>\r\n                            </textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n            {{englishMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n            {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n            {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n      <!--Arabic textbox-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowArabicTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control bnsights-control\" dir=\"rtl\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                      (focus)=\"onArabicFocus(true)\" (focusout)=\"onArabicFocus(false)\"\r\n                      [hidden]=\"options.IsHideArabicFields\"\r\n                      aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                      formControlName=\"Arabic\" rows=\"{{options.Rows}}\"\r\n                      maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                      [class.is-invalid]=\"ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched\"\r\n                      placeholder=\"{{options.ArabicPlaceholder}}\" (change)=\"trimControlValue('Ar')\"\r\n                      (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value.Arabic\"\r\n                      (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                      #userinputTextAreaArabic>\r\n                            </textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n            {{arabicMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n            {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n            {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n"
-            },] }
-];
-MultiLingualTextAreaComponent.ctorParameters = () => [
-    { type: FormGroupDirective },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: ControlUtility },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-MultiLingualTextAreaComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+MultiLingualTextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiLingualTextAreaComponent, deps: [{ token: i2.FormGroupDirective }, { token: i2.ControlContainer, optional: true }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+MultiLingualTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiLingualTextAreaComponent, selector: "BBSF-MultiLingualTextArea", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textarea form-group mb-0\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n    <div class=\"row\">\r\n      <!--English textarea-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowEngishTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInEnglish\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control\" dir=\"ltr\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                      (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(false)\"\r\n                      maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                      aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                      formControlName=\"English\" [hidden]=\"options.IsHideEnglishFields\"\r\n                      [class.is-invalid]=\"EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched\"\r\n                      placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                      (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value.English\"\r\n                      (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                      #userinputTextAreaEnglish>\r\n                            </textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n            {{englishMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n            {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n            {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n      <!--Arabic textbox-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowArabicTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control bnsights-control\" dir=\"rtl\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                      (focus)=\"onArabicFocus(true)\" (focusout)=\"onArabicFocus(false)\"\r\n                      [hidden]=\"options.IsHideArabicFields\"\r\n                      aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                      formControlName=\"Arabic\" rows=\"{{options.Rows}}\"\r\n                      maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                      [class.is-invalid]=\"ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched\"\r\n                      placeholder=\"{{options.ArabicPlaceholder}}\" (change)=\"trimControlValue('Ar')\"\r\n                      (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value.Arabic\"\r\n                      (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                      #userinputTextAreaArabic>\r\n                            </textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n            {{arabicMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n            {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n            {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n", directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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]" }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiLingualTextAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-MultiLingualTextArea', template: "<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textarea form-group mb-0\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n    <div class=\"row\">\r\n      <!--English textarea-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowEngishTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInEnglish\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control\" dir=\"ltr\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                      (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(false)\"\r\n                      maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                      aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                      formControlName=\"English\" [hidden]=\"options.IsHideEnglishFields\"\r\n                      [class.is-invalid]=\"EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched\"\r\n                      placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                      (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value.English\"\r\n                      (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                      #userinputTextAreaEnglish>\r\n                            </textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n            {{englishMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n            {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n            {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n      <!--Arabic textbox-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowArabicTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control bnsights-control\" dir=\"rtl\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                      (focus)=\"onArabicFocus(true)\" (focusout)=\"onArabicFocus(false)\"\r\n                      [hidden]=\"options.IsHideArabicFields\"\r\n                      aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                      formControlName=\"Arabic\" rows=\"{{options.Rows}}\"\r\n                      maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                      [class.is-invalid]=\"ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched\"\r\n                      placeholder=\"{{options.ArabicPlaceholder}}\" (change)=\"trimControlValue('Ar')\"\r\n                      (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value.Arabic\"\r\n                      (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                      #userinputTextAreaArabic>\r\n                            </textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n            {{arabicMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n            {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n            {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i2.FormGroupDirective }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: ControlUtility }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
 class CheckBoxComponent {
     // tslint:disable-next-line: max-line-length
@@ -2189,6 +2211,7 @@ class CheckBoxComponent {
         CheckBoxComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
+        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.Name, new FormControl(''));
         this.CheckBoxFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -2239,26 +2262,22 @@ class CheckBoxComponent {
     }
 }
 CheckBoxComponent.controlContainerstatic = null;
-CheckBoxComponent.decorators = [
-    { type: Component, args: [{
-                // tslint:disable-next-line: component-selector
-                selector: 'BBSF-CheckBox',
-                template: "<div class=\"form-group bbsf-control bbsf-checkbox\" [formGroup]=\"group\">\r\n  <div class=\"bbsf-input-container\">\r\n    <!--input-->\r\n    <input class=\"bbsf-checkbox-input {{options.ExtraClasses}}\" dir=\"{{options.ForceDirection==2?'rtl':''}}\" [checked]=\"options.Value==true?true:null\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n           (change)=\"onValueChanged()\"\r\n           [class.is-invalid]=\"CheckBoxFormControl.invalid && CheckBoxFormControl.touched\"\r\n           id=\"{{options.Name}}\" type=\"checkbox\" value=\"options.Value==true?true:null\">\r\n\r\n    <div class=\"label-subtext-container\">\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)\" class=\"text-danger\">*</span>\r\n      </label>\r\n      <div class=\"subtext-container\">\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=\"(CheckBoxFormControl.invalid && CheckBoxFormControl.touched)\">\r\n          {{getErrorValidation(CheckBoxFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n"
-            },] }
-];
-CheckBoxComponent.ctorParameters = () => [
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: BBSFTranslateService },
-    { type: ControlValidationService }
-];
-CheckBoxComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+CheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.BBSFTranslateService }, { token: i3.ControlValidationService }], target: i0.ɵɵFactoryTarget.Component });
+CheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CheckBoxComponent, selector: "BBSF-CheckBox", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-checkbox\" [formGroup]=\"group\">\r\n  <div class=\"bbsf-input-container\">\r\n    <!--input-->\r\n    <input class=\"bbsf-checkbox-input {{options.ExtraClasses}}\" [dir]=\"textDir\" [checked]=\"options.Value==true?true:null\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n           (change)=\"onValueChanged()\"\r\n           [class.is-invalid]=\"CheckBoxFormControl.invalid && CheckBoxFormControl.touched\"\r\n           id=\"{{options.Name}}\" type=\"checkbox\" value=\"options.Value==true?true:null\">\r\n\r\n    <div class=\"label-subtext-container\">\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)\" class=\"text-danger\">*</span>\r\n      </label>\r\n      <div class=\"subtext-container\">\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=\"(CheckBoxFormControl.invalid && CheckBoxFormControl.touched)\">\r\n          {{getErrorValidation(CheckBoxFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n", directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-CheckBox', template: "<div class=\"form-group bbsf-control bbsf-checkbox\" [formGroup]=\"group\">\r\n  <div class=\"bbsf-input-container\">\r\n    <!--input-->\r\n    <input class=\"bbsf-checkbox-input {{options.ExtraClasses}}\" [dir]=\"textDir\" [checked]=\"options.Value==true?true:null\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n           (change)=\"onValueChanged()\"\r\n           [class.is-invalid]=\"CheckBoxFormControl.invalid && CheckBoxFormControl.touched\"\r\n           id=\"{{options.Name}}\" type=\"checkbox\" value=\"options.Value==true?true:null\">\r\n\r\n    <div class=\"label-subtext-container\">\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)\" class=\"text-danger\">*</span>\r\n      </label>\r\n      <div class=\"subtext-container\">\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=\"(CheckBoxFormControl.invalid && CheckBoxFormControl.touched)\">\r\n          {{getErrorValidation(CheckBoxFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.BBSFTranslateService }, { type: i3.ControlValidationService }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
 class DropdownListComponent {
     // tslint:disable-next-line: max-line-length
@@ -2309,6 +2328,7 @@ class DropdownListComponent {
         //console.log(environment["BBSF_AdminUrl"]);
     }
     ngOnInit() {
+        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.SelectedList = this.options.SelectedItems;
         this.dropdownSettings = {
@@ -2402,35 +2422,31 @@ class DropdownListComponent {
         }
     }
     onDropDownClose() {
-        if ((this.SelectedItems == undefined || this.SelectedItems == []) && this.options.IsRequired == true) {
+        if ((this.SelectedItems == undefined || this.SelectedItems.length == 0) && this.options.IsRequired == true) {
             this.DropdownListFormControl.markAsTouched();
             this.DropdownListFormControl.invalid;
         }
     }
 }
 DropdownListComponent.controlContainerstatic = null;
-DropdownListComponent.decorators = [
-    { type: Component, args: [{
-                // tslint:disable-next-line: component-selector
-                selector: 'BBSF-DropdownList',
-                template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [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)\" class=\"text-danger\"\r\n            aria-required=\"true\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input enabled bootstrap select-->\r\n      <ng-select class=\"form-control\" *ngIf=\"options.DisableBootstrapSelect==false\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n                 [bindValue]=\"options.ItemTempletkey\" [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\"\r\n                 [notFoundText]=\"options.NotFoundText\" [maxSelectedItems]=\"options.LimitSelection\"\r\n                 [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n                 [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n                 [selectableGroup]=\"true\" [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\"\r\n                 [(ngModel)]=\"options.SelectedItems\" (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n                 [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"\r\n                 [closeOnSelect]=\"options.SingleSelection  ? true : false\">\r\n        <!--No checkbox-->\r\n        <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <label class=\"bbsf-label\" title=\"{{item.disabled ? options.DisabledItemsTooltipValue : ''}}\" id={{item.key}}>{{item.value}}</label>\r\n        </ng-template>\r\n        <!--checkbox-->\r\n        <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\" bbsf-checkbox\">\r\n            <div class=\"bbsf-input-container align-items-center\">\r\n              <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n              <div class=\"label-subtext-container\">\r\n                <label class=\"bbsf-label\" id={{item.key}}>{{item.value}}</label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </ng-select>\r\n      <!--input disabled bootstrap select-->\r\n      <select *ngIf=\"options.DisableBootstrapSelect\" class=\"form-control\"\r\n              dir=\"{{options.ForceDirection==2?'rtl':''}}\" (change)=\"onItemSelect()\" [(ngModel)]=\"options.SelectedItems\" [disabled]=\"options.IsDisabled\" formControlName=\"{{options.Name}}\">\r\n        <option value=\"\" disabled>--{{UtilityService.getResourceValue(\"select\")}}--</option>\r\n        <option *ngFor=\"let item of options.DataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n          {{item.value}}\r\n        </option>\r\n      </select>\r\n      <div class=\"subtext-container\">\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=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n          {{getErrorValidation(DropdownListFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n"
-            },] }
-];
-DropdownListComponent.ctorParameters = () => [
-    { type: OnPagingFiltersChangeService },
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-DropdownListComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }],
-    onClear: [{ type: Output }]
-};
+DropdownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropdownListComponent, deps: [{ token: OnPagingFiltersChangeService }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+DropdownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropdownListComponent, selector: "BBSF-DropdownList", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange", onClear: "onClear" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [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)\" class=\"text-danger\"\r\n            aria-required=\"true\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input enabled bootstrap select-->\r\n      <ng-select class=\"form-control\" *ngIf=\"options.DisableBootstrapSelect==false\" [dir]=\"textDir\"\r\n                 [bindValue]=\"options.ItemTempletkey\" [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\"\r\n                 [notFoundText]=\"options.NotFoundText\" [maxSelectedItems]=\"options.LimitSelection\"\r\n                 [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n                 [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n                 [selectableGroup]=\"true\" [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\"\r\n                 [(ngModel)]=\"options.SelectedItems\" (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n                 [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"\r\n                 [closeOnSelect]=\"options.SingleSelection  ? true : false\">\r\n        <!--No checkbox-->\r\n        <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <label class=\"bbsf-label\" title=\"{{item.disabled ? options.DisabledItemsTooltipValue : ''}}\" id={{item.id}}>{{item.itemName}}</label>\r\n        </ng-template>\r\n        <!--checkbox-->\r\n        <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\" bbsf-checkbox\">\r\n            <div class=\"bbsf-input-container align-items-center\">\r\n              <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n              <div class=\"label-subtext-container\">\r\n                <label class=\"bbsf-label\" id={{item.id}}>{{item.itemName}}</label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </ng-select>\r\n      <!--input disabled bootstrap select-->\r\n      <select *ngIf=\"options.DisableBootstrapSelect\" class=\"form-control\"\r\n      [dir]=\"textDir\" (change)=\"onItemSelect()\" [(ngModel)]=\"options.SelectedItems\" [disabled]=\"options.IsDisabled\" formControlName=\"{{options.Name}}\">\r\n        <option value=\"\" disabled>--{{UtilityService.getResourceValue(\"select\")}}--</option>\r\n        <option *ngFor=\"let item of options.DataSource\" value=\"{{item.id}}\" [ngValue]=\"item.id\">\r\n          {{item.itemName}}\r\n        </option>\r\n      </select>\r\n      <div class=\"subtext-container\">\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=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n          {{getErrorValidation(DropdownListFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n", components: [{ type: i6$3.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$3.ɵf, selector: "[ng-option-tmp]" }, { type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropdownListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-DropdownList', template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [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)\" class=\"text-danger\"\r\n            aria-required=\"true\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input enabled bootstrap select-->\r\n      <ng-select class=\"form-control\" *ngIf=\"options.DisableBootstrapSelect==false\" [dir]=\"textDir\"\r\n                 [bindValue]=\"options.ItemTempletkey\" [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\"\r\n                 [notFoundText]=\"options.NotFoundText\" [maxSelectedItems]=\"options.LimitSelection\"\r\n                 [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n                 [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n                 [selectableGroup]=\"true\" [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\"\r\n                 [(ngModel)]=\"options.SelectedItems\" (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n                 [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"\r\n                 [closeOnSelect]=\"options.SingleSelection  ? true : false\">\r\n        <!--No checkbox-->\r\n        <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <label class=\"bbsf-label\" title=\"{{item.disabled ? options.DisabledItemsTooltipValue : ''}}\" id={{item.id}}>{{item.itemName}}</label>\r\n        </ng-template>\r\n        <!--checkbox-->\r\n        <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\" bbsf-checkbox\">\r\n            <div class=\"bbsf-input-container align-items-center\">\r\n              <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n              <div class=\"label-subtext-container\">\r\n                <label class=\"bbsf-label\" id={{item.id}}>{{item.itemName}}</label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </ng-select>\r\n      <!--input disabled bootstrap select-->\r\n      <select *ngIf=\"options.DisableBootstrapSelect\" class=\"form-control\"\r\n      [dir]=\"textDir\" (change)=\"onItemSelect()\" [(ngModel)]=\"options.SelectedItems\" [disabled]=\"options.IsDisabled\" formControlName=\"{{options.Name}}\">\r\n        <option value=\"\" disabled>--{{UtilityService.getResourceValue(\"select\")}}--</option>\r\n        <option *ngFor=\"let item of options.DataSource\" value=\"{{item.id}}\" [ngValue]=\"item.id\">\r\n          {{item.itemName}}\r\n        </option>\r\n      </select>\r\n      <div class=\"subtext-container\">\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=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n          {{getErrorValidation(DropdownListFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: OnPagingFiltersChangeService }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }], onClear: [{
+                type: Output
+            }] } });
 
 class PhoneComponent {
     // tslint:disable-next-line: max-line-length
@@ -2474,6 +2490,7 @@ class PhoneComponent {
         PhoneComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
+        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.Name, new FormControl(''));
         this.PhoneFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -2523,27 +2540,28 @@ class PhoneComponent {
         }
         this.OnChange.emit(originalValue);
     }
+    getSelectedCountry(selectedCountry) {
+        let value = selectedCountry;
+        return value;
+    }
 }
 PhoneComponent.controlContainerstatic = null;
-PhoneComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-Phone',
-                template: "\r\n<div class=\"form-group bbsf-control bbsf-phone\" [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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <ngx-intl-tel-input dir=\"{{options.ForceDirection==2?'rtl':''}}\" [cssClass]=\"options.ExtraClasses\" [preferredCountries]=\"options.PreferredCountries\"\r\n                          [enableAutoCountrySelect]=\"true\" [enablePlaceholder]=\"options.EnablePlaceholder\" [searchCountryFlag]=\"options.AllowSearch\"\r\n                          [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n                          [selectFirstCountry]=\"options.SelectFirstCountry\" [selectedCountryISO]=\"options.SelectedCountryISO\"\r\n                          [separateDialCode]=\"separateDialCode\"\r\n                          [maxLength]=\"15\" [(ngModel)]=\"options.Value\"\r\n                          [phoneValidation]=\"options.PhoneValidation\" [id]=\"options.Name\"\r\n                          name=\"{{options.Name}}\" formControlName=\"{{options.Name}}\"\r\n                          (change)=\"onValueChanged()\"\r\n                          [class.is-invalid]=\"PhoneFormControl.invalid && PhoneFormControl.touched\" aria-invalid=\"true\"\r\n                          class=\"form-control\">\r\n      </ngx-intl-tel-input>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(PhoneFormControl.invalid && PhoneFormControl.touched)\">\r\n      {{getErrorValidation(PhoneFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n"
-            },] }
-];
-PhoneComponent.ctorParameters = () => [
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-PhoneComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+PhoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PhoneComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+PhoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PhoneComponent, selector: "BBSF-Phone", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "\r\n<div class=\"form-group bbsf-control bbsf-phone\" [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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <ngx-intl-tel-input [dir]=\"textDir\" [cssClass]=\"options.ExtraClasses\" [preferredCountries]=\"options.PreferredCountries\"\r\n                          [enableAutoCountrySelect]=\"true\" [enablePlaceholder]=\"options.EnablePlaceholder\" [searchCountryFlag]=\"options.AllowSearch\"\r\n                          [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n                          [selectFirstCountry]=\"options.SelectFirstCountry\" [selectedCountryISO]=\"getSelectedCountry(options.SelectedCountryISO)\"\r\n                          [separateDialCode]=\"separateDialCode\"\r\n                          maxlength=\"15\" [(ngModel)]=\"options.Value\"\r\n                          [phoneValidation]=\"options.PhoneValidation\" [id]=\"options.Name\"\r\n                          name=\"{{options.Name}}\" formControlName=\"{{options.Name}}\"\r\n                          (change)=\"onValueChanged()\"\r\n                          [class.is-invalid]=\"PhoneFormControl.invalid && PhoneFormControl.touched\" aria-invalid=\"true\"\r\n                          class=\"form-control\">\r\n      </ngx-intl-tel-input>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(PhoneFormControl.invalid && PhoneFormControl.touched)\">\r\n      {{getErrorValidation(PhoneFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n", components: [{ type: i7$1.NgxIntlTelInputComponent, selector: "ngx-intl-tel-input", inputs: ["value", "preferredCountries", "enablePlaceholder", "numberFormat", "cssClass", "onlyCountries", "enableAutoCountrySelect", "searchCountryFlag", "searchCountryField", "searchCountryPlaceholder", "maxLength", "selectFirstCountry", "phoneValidation", "inputId", "separateDialCode", "customPlaceholder", "selectedCountryISO"], outputs: ["countryChange"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PhoneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-Phone', template: "\r\n<div class=\"form-group bbsf-control bbsf-phone\" [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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <ngx-intl-tel-input [dir]=\"textDir\" [cssClass]=\"options.ExtraClasses\" [preferredCountries]=\"options.PreferredCountries\"\r\n                          [enableAutoCountrySelect]=\"true\" [enablePlaceholder]=\"options.EnablePlaceholder\" [searchCountryFlag]=\"options.AllowSearch\"\r\n                          [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n                          [selectFirstCountry]=\"options.SelectFirstCountry\" [selectedCountryISO]=\"getSelectedCountry(options.SelectedCountryISO)\"\r\n                          [separateDialCode]=\"separateDialCode\"\r\n                          maxlength=\"15\" [(ngModel)]=\"options.Value\"\r\n                          [phoneValidation]=\"options.PhoneValidation\" [id]=\"options.Name\"\r\n                          name=\"{{options.Name}}\" formControlName=\"{{options.Name}}\"\r\n                          (change)=\"onValueChanged()\"\r\n                          [class.is-invalid]=\"PhoneFormControl.invalid && PhoneFormControl.touched\" aria-invalid=\"true\"\r\n                          class=\"form-control\">\r\n      </ngx-intl-tel-input>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(PhoneFormControl.invalid && PhoneFormControl.touched)\">\r\n      {{getErrorValidation(PhoneFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
 class ToggleslideComponent {
     // tslint:disable-next-line: max-line-length
@@ -2561,6 +2579,7 @@ class ToggleslideComponent {
         ToggleslideComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
+        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         this.group.addControl(this.options.Name, new FormControl(''));
         this.ToggleslideFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
         let validationRules = [];
@@ -2602,26 +2621,22 @@ class ToggleslideComponent {
     }
 }
 ToggleslideComponent.controlContainerstatic = null;
-ToggleslideComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-Toggleslide',
-                template: "<div class=\"form-group bbsf-control bbsf-toggleslide\" [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    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <mat-slide-toggle [(ngModel)]=\"SlideValue\" dir=\"{{options.ForceDirection==2?'rtl':''}}\" [cssClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n                        formControlName=\"{{options.Name}}\" disableRipple=\"true\" disabled=\"{{options.IsDisabled}}\" (change)=\"changeValueToggle()\">\r\n      </mat-slide-toggle>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\"  *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n  </div>\r\n</div>\r\n"
-            },] }
-];
-ToggleslideComponent.ctorParameters = () => [
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-ToggleslideComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+ToggleslideComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleslideComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+ToggleslideComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToggleslideComponent, selector: "BBSF-Toggleslide", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-toggleslide\" [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    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <mat-slide-toggle [(ngModel)]=\"SlideValue\" [dir]=\"textDir\" [cssClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n                        formControlName=\"{{options.Name}}\" disableRipple=\"true\" [disabled]=\"options.IsDisabled\" (change)=\"changeValueToggle()\">\r\n      </mat-slide-toggle>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\"  *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n  </div>\r\n</div>\r\n", components: [{ type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleslideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-Toggleslide', template: "<div class=\"form-group bbsf-control bbsf-toggleslide\" [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    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <mat-slide-toggle [(ngModel)]=\"SlideValue\" [dir]=\"textDir\" [cssClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n                        formControlName=\"{{options.Name}}\" disableRipple=\"true\" [disabled]=\"options.IsDisabled\" (change)=\"changeValueToggle()\">\r\n      </mat-slide-toggle>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\"  *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
 class HtmlEditorComponent {
     constructor(zone, controlUtility, controlContainer, HtmlEditorControlHost, UtilityService, controlValidationService, globalSettings) {
@@ -2664,6 +2679,7 @@ class HtmlEditorComponent {
         HtmlEditorComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
+        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         this.editorConfig = {
             editable: !this.options.IsDisabled,
             spellcheck: true,
@@ -2819,26 +2835,22 @@ class HtmlEditorComponent {
     }
 }
 HtmlEditorComponent.controlContainerstatic = null;
-HtmlEditorComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-HtmlEditor',
-                template: "\r\n<div class=\"form-group bbsf-control bbsf-htmleditor\" [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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <angular-editor\r\n                      (change)=\"onValueChanged()\"\r\n                      id=\"{{options.Name}}\"\r\n                      [class.is-invalid]=\"HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched\"\r\n                      class=\"{{options.ExtraClasses}}\"\r\n                      dir=\"{{options.ForceDirection==2?'rtl':''}}\" formControlName=\"{{options.Name}}\"\r\n                      [config]=\"editorConfig\"></angular-editor>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched)\">\r\n      {{getErrorValidation(HtmlEditorFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n"
-            },] }
-];
-HtmlEditorComponent.ctorParameters = () => [
-    { type: NgZone },
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-HtmlEditorComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+HtmlEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HtmlEditorComponent, 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 });
+HtmlEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HtmlEditorComponent, selector: "BBSF-HtmlEditor", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "\r\n<div class=\"form-group bbsf-control bbsf-htmleditor\" [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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <angular-editor\r\n                      (change)=\"onValueChanged()\"\r\n                      id=\"{{options.Name}}\"\r\n                      [class.is-invalid]=\"HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched\"\r\n                      class=\"{{options.ExtraClasses}}\"\r\n                      [dir]=\"textDir\" formControlName=\"{{options.Name}}\"\r\n                      [config]=\"editorConfig\"></angular-editor>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched)\">\r\n      {{getErrorValidation(HtmlEditorFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n", components: [{ type: i5$1.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["viewMode", "blur", "focus", "html"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HtmlEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-HtmlEditor', template: "\r\n<div class=\"form-group bbsf-control bbsf-htmleditor\" [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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <angular-editor\r\n                      (change)=\"onValueChanged()\"\r\n                      id=\"{{options.Name}}\"\r\n                      [class.is-invalid]=\"HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched\"\r\n                      class=\"{{options.ExtraClasses}}\"\r\n                      [dir]=\"textDir\" formControlName=\"{{options.Name}}\"\r\n                      [config]=\"editorConfig\"></angular-editor>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched)\">\r\n      {{getErrorValidation(HtmlEditorFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.NgZone }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
 class MultiLingualHtmlEditorComponent {
     constructor(MultiLingualHtmlEditorFormControlHost, controlContainer, controlUtility, UtilityService, controlValidationService, globalSettings) {
@@ -3240,25 +3252,22 @@ class MultiLingualHtmlEditorComponent {
     }
 }
 MultiLingualHtmlEditorComponent.controlContainerstatic = null;
-MultiLingualHtmlEditorComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-MultiLingualHtmlEditor',
-                template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control form-group bbsf-multilang-htmleditor mb-0\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n    <div class=\"row\">\r\n      <!--English htmleditor-->\r\n      <div  [ngClass] =\"ShowArabicHtmlEditor? 'col-md-6' : 'col-md-12'\" *ngIf=\"ShowEnglishHtmlEditor\" class=\" bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish)\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\">\r\n            <!--input-->\r\n            <angular-editor class=\"{{options.ExtraClasses_EN}}\" (change)=\"onTextChange('en')\" [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n                            formControlName=\"English\" [config]=\"editorEnglishConfig\"></angular-editor>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n            {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n            {{getErrorValidation(EnglishHtmlEditorFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <!--Arabic htmleditor-->\r\n      <div *ngIf=\"ShowArabicHtmlEditor\" [ngClass] =\"ShowEnglishHtmlEditor? 'col-md-6' : 'col-md-12'\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\">\r\n            <!--input-->\r\n            <angular-editor dir=\"rtl\" class=\"{{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\" [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n                            formControlName=\"Arabic\" [config]=\"editorArabicConfig\"></angular-editor>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n            {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched)\">\r\n            {{getErrorValidation(ArabicHtmlEditorFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n"
-            },] }
-];
-MultiLingualHtmlEditorComponent.ctorParameters = () => [
-    { type: FormGroupDirective },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: ControlUtility },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-MultiLingualHtmlEditorComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+MultiLingualHtmlEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiLingualHtmlEditorComponent, deps: [{ token: i2.FormGroupDirective }, { token: i2.ControlContainer, optional: true }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+MultiLingualHtmlEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiLingualHtmlEditorComponent, selector: "BBSF-MultiLingualHtmlEditor", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control form-group bbsf-multilang-htmleditor mb-0\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n    <div class=\"row\">\r\n      <!--English htmleditor-->\r\n      <div  [ngClass] =\"ShowArabicHtmlEditor? 'col-md-6' : 'col-md-12'\" *ngIf=\"ShowEnglishHtmlEditor\" class=\" bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish)\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\">\r\n            <!--input-->\r\n            <angular-editor class=\"{{options.ExtraClasses_EN}}\" (change)=\"onTextChange('en')\" [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n                            formControlName=\"English\" [config]=\"editorEnglishConfig\"></angular-editor>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n            {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n            {{getErrorValidation(EnglishHtmlEditorFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <!--Arabic htmleditor-->\r\n      <div *ngIf=\"ShowArabicHtmlEditor\" [ngClass] =\"ShowEnglishHtmlEditor? 'col-md-6' : 'col-md-12'\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\">\r\n            <!--input-->\r\n            <angular-editor dir=\"rtl\" class=\"{{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\" [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n                            formControlName=\"Arabic\" [config]=\"editorArabicConfig\"></angular-editor>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n            {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched)\">\r\n            {{getErrorValidation(ArabicHtmlEditorFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", components: [{ type: i5$1.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["viewMode", "blur", "focus", "html"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiLingualHtmlEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-MultiLingualHtmlEditor', template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control form-group bbsf-multilang-htmleditor mb-0\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n    <div class=\"row\">\r\n      <!--English htmleditor-->\r\n      <div  [ngClass] =\"ShowArabicHtmlEditor? 'col-md-6' : 'col-md-12'\" *ngIf=\"ShowEnglishHtmlEditor\" class=\" bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish)\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\">\r\n            <!--input-->\r\n            <angular-editor class=\"{{options.ExtraClasses_EN}}\" (change)=\"onTextChange('en')\" [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n                            formControlName=\"English\" [config]=\"editorEnglishConfig\"></angular-editor>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n            {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n            {{getErrorValidation(EnglishHtmlEditorFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <!--Arabic htmleditor-->\r\n      <div *ngIf=\"ShowArabicHtmlEditor\" [ngClass] =\"ShowEnglishHtmlEditor? 'col-md-6' : 'col-md-12'\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\">\r\n            <!--input-->\r\n            <angular-editor dir=\"rtl\" class=\"{{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\" [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n                            formControlName=\"Arabic\" [config]=\"editorArabicConfig\"></angular-editor>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n            {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched)\">\r\n            {{getErrorValidation(ArabicHtmlEditorFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i2.FormGroupDirective }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: ControlUtility }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
 class ImageUploaderComponent {
     constructor(zone, controlUtility, controlContainer, ImageUplaoderControlHost, UtilityService, controlValidationService, globalSettings, modalService) {
@@ -3576,29 +3585,28 @@ class ImageUploaderComponent {
     }
 }
 ImageUploaderComponent.controlContainerstatic = null;
-ImageUploaderComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-ImageUpload',
-                template: "<div class=\"form-group bbsf-control bbsf-image-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.AllowDropZone\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n         ngx-dropzone\r\n         [disabled]=\"options.IsDisabled\"\r\n         [accept]=\"AcceptedType\"\r\n         [multiple]=\"options.IsMultiple\"\r\n         (change)=\"onFileChange($event)\"\r\n         ngDefaultControl\r\n         formControlName=\"{{options.Name}}\"\r\n         [maxFileSize]=\"maxFileSize\"\r\n         id=\"{{options.Name}}\"\r\n         [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <img  *ngIf=\"ImageSource\" [src]=\"ImageSource\" style=\"align-items: center;border-radius: 5px;display: flex;height: 100px;justify-content: center;margin: 10px;max-width: 180px;min-height: 100px;min-width: 180px;padding: 0px 20px;position: relative;\" />\r\n        <div class=\"svg-and-validation\" *ngIf=\"!ImageSource\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.AllowDropZone\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"ImageSource\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.ExtraClasses}}\"\r\n           ngx-dropzone\r\n           [disabled]=\"options.IsDisabled\"\r\n           [accept]=\"AcceptedType\"\r\n           [multiple]=\"options.IsMultiple\"\r\n           (change)=\"onFileChange($event)\"\r\n           ngDefaultControl\r\n           formControlName=\"{{options.Name}}\"\r\n           [maxFileSize]=\"maxFileSize\"\r\n           id=\"{{options.Name}}\"\r\n           [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n         *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(ImageUploadFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n    <div class=\"modal-dialog modal-lg\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <h4 class=\"modal-title\">\r\n            {{UtilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip='{{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\" 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\" 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\" 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\" 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\" 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\" 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\" 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</div>\r\n\r\n"
-            },] }
-];
-ImageUploaderComponent.ctorParameters = () => [
-    { type: NgZone },
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings },
-    { type: NgbModal }
-];
-ImageUploaderComponent.propDecorators = {
-    fileInput: [{ type: ViewChild, args: ['fileInput', { static: false },] }],
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }],
-    angularCropper: [{ type: ViewChild, args: ['angularCropper', { static: false },] }]
-};
+ImageUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
+ImageUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ImageUploaderComponent, 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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.AllowDropZone\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n         ngx-dropzone\r\n         [disabled]=\"options.IsDisabled\"\r\n         [accept]=\"AcceptedType\"\r\n         [multiple]=\"options.IsMultiple\"\r\n         (change)=\"onFileChange($event)\"\r\n         ngDefaultControl\r\n         formControlName=\"{{options.Name}}\"\r\n         [maxFileSize]=\"maxFileSize\"\r\n         id=\"{{options.Name}}\"\r\n         [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <img  *ngIf=\"ImageSource\" [src]=\"ImageSource\" style=\"align-items: center;border-radius: 5px;display: flex;height: 100px;justify-content: center;margin: 10px;max-width: 180px;min-height: 100px;min-width: 180px;padding: 0px 20px;position: relative;\" />\r\n        <div class=\"svg-and-validation\" *ngIf=\"!ImageSource\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.AllowDropZone\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"ImageSource\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.ExtraClasses}}\"\r\n           ngx-dropzone\r\n           [disabled]=\"options.IsDisabled\"\r\n           [accept]=\"AcceptedType\"\r\n           [multiple]=\"options.IsMultiple\"\r\n           (change)=\"onFileChange($event)\"\r\n           ngDefaultControl\r\n           formControlName=\"{{options.Name}}\"\r\n           [maxFileSize]=\"maxFileSize\"\r\n           id=\"{{options.Name}}\"\r\n           [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n         *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(ImageUploadFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n    <div class=\"modal-dialog modal-lg\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <h4 class=\"modal-title\">\r\n            {{UtilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip='{{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\" 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\" 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\" 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\" 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\" 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\" 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\" 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</div>\r\n\r\n", components: [{ type: i6$4.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }, { type: i6$4.NgxDropzoneImagePreviewComponent, selector: "ngx-dropzone-image-preview", inputs: ["file"] }, { type: i7$2.CropperComponent, selector: "angular-cropper", inputs: ["cropperOptions", "imageUrl", "settings", "cropbox", "loadImageErrorText"], outputs: ["export", "ready"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$4.ɵb, selector: "ngx-dropzone-label" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ImageUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-ImageUpload', template: "<div class=\"form-group bbsf-control bbsf-image-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.AllowDropZone\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n         ngx-dropzone\r\n         [disabled]=\"options.IsDisabled\"\r\n         [accept]=\"AcceptedType\"\r\n         [multiple]=\"options.IsMultiple\"\r\n         (change)=\"onFileChange($event)\"\r\n         ngDefaultControl\r\n         formControlName=\"{{options.Name}}\"\r\n         [maxFileSize]=\"maxFileSize\"\r\n         id=\"{{options.Name}}\"\r\n         [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <img  *ngIf=\"ImageSource\" [src]=\"ImageSource\" style=\"align-items: center;border-radius: 5px;display: flex;height: 100px;justify-content: center;margin: 10px;max-width: 180px;min-height: 100px;min-width: 180px;padding: 0px 20px;position: relative;\" />\r\n        <div class=\"svg-and-validation\" *ngIf=\"!ImageSource\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.AllowDropZone\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"ImageSource\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.ExtraClasses}}\"\r\n           ngx-dropzone\r\n           [disabled]=\"options.IsDisabled\"\r\n           [accept]=\"AcceptedType\"\r\n           [multiple]=\"options.IsMultiple\"\r\n           (change)=\"onFileChange($event)\"\r\n           ngDefaultControl\r\n           formControlName=\"{{options.Name}}\"\r\n           [maxFileSize]=\"maxFileSize\"\r\n           id=\"{{options.Name}}\"\r\n           [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n         *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(ImageUploadFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n    <div class=\"modal-dialog modal-lg\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <h4 class=\"modal-title\">\r\n            {{UtilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip='{{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\" 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\" 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\" 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\" 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\" 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\" 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\" 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</div>\r\n\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.NgZone }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: i3$1.NgbModal }];
+    }, propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput', { static: false }]
+            }], group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }], angularCropper: [{
+                type: ViewChild,
+                args: ['angularCropper', { static: false }]
+            }] } });
 
 class ProfilePictureDTO {
 }
@@ -3922,28 +3930,28 @@ class ProfileImageUploaderComponent {
     }
 }
 ProfileImageUploaderComponent.controlContainerstatic = null;
-ProfileImageUploaderComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-ProfileImageUploader',
-                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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.AllowDropZone\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n         ngx-dropzone\r\n         [disabled]=\"options.IsDisabled\"\r\n         [accept]=\"AcceptedType\"\r\n         (change)=\"onFileChange($event)\"\r\n         aria-describedby=\"email-error\"\r\n         aria-invalid=\"true\"\r\n         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\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.AllowDropZone\" 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}}\"\r\n          ngx-dropzone\r\n           [disabled]=\"options.IsDisabled\"\r\n           [accept]=\"AcceptedType\"\r\n           (change)=\"onFileChange($event)\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n           ngDefaultControl formControlName=\"{{options.Name}}\"\r\n           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\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n         *ngIf=\"(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) \">{{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n    <div class=\"modal-dialog modal-lg\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <h4 class=\"modal-title\">\r\n            {{UtilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom in\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-plus\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom out\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-minus\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move left\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-left\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move right\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-right\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" ngbTooltip=\"Move up\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-up\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" ngbTooltip=\"Move down\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-down\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" ngbTooltip=\"Rotate left\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-undo-alt\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" ngbTooltip=\"Rotate right\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-redo-alt\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\" align=\"right\">\r\n          <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n            {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n          </button>\r\n          <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n            {{UtilityService.getResourceValue(\"Crop\")}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n"
-            },] }
-];
-ProfileImageUploaderComponent.ctorParameters = () => [
-    { type: NgZone },
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-ProfileImageUploaderComponent.propDecorators = {
-    fileInput: [{ type: ViewChild, args: ['fileInput', { static: false },] }],
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }],
-    angularCropper: [{ type: ViewChild, args: ['angularCropper', { static: false },] }]
-};
+ProfileImageUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
+ProfileImageUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ProfileImageUploaderComponent, 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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.AllowDropZone\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n         ngx-dropzone\r\n         [disabled]=\"options.IsDisabled\"\r\n         [accept]=\"AcceptedType\"\r\n         (change)=\"onFileChange($event)\"\r\n         aria-describedby=\"email-error\"\r\n         aria-invalid=\"true\"\r\n         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\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.AllowDropZone\" 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}}\"\r\n          ngx-dropzone\r\n           [disabled]=\"options.IsDisabled\"\r\n           [accept]=\"AcceptedType\"\r\n           (change)=\"onFileChange($event)\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n           ngDefaultControl formControlName=\"{{options.Name}}\"\r\n           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\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n         *ngIf=\"(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) \">{{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n    <div class=\"modal-dialog modal-lg\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <h4 class=\"modal-title\">\r\n            {{UtilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom in\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-plus\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom out\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-minus\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move left\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-left\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move right\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-right\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" ngbTooltip=\"Move up\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-up\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" ngbTooltip=\"Move down\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-down\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" ngbTooltip=\"Rotate left\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-undo-alt\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" ngbTooltip=\"Rotate right\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-redo-alt\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\" align=\"right\">\r\n          <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n            {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n          </button>\r\n          <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n            {{UtilityService.getResourceValue(\"Crop\")}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", components: [{ type: i6$4.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }, { type: i6$4.NgxDropzoneImagePreviewComponent, selector: "ngx-dropzone-image-preview", inputs: ["file"] }, { type: i7$2.CropperComponent, selector: "angular-cropper", inputs: ["cropperOptions", "imageUrl", "settings", "cropbox", "loadImageErrorText"], outputs: ["export", "ready"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$4.ɵb, selector: "ngx-dropzone-label" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProfileImageUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-ProfileImageUploader', 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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.AllowDropZone\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n         ngx-dropzone\r\n         [disabled]=\"options.IsDisabled\"\r\n         [accept]=\"AcceptedType\"\r\n         (change)=\"onFileChange($event)\"\r\n         aria-describedby=\"email-error\"\r\n         aria-invalid=\"true\"\r\n         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\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.AllowDropZone\" 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}}\"\r\n          ngx-dropzone\r\n           [disabled]=\"options.IsDisabled\"\r\n           [accept]=\"AcceptedType\"\r\n           (change)=\"onFileChange($event)\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n           ngDefaultControl formControlName=\"{{options.Name}}\"\r\n           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\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n         *ngIf=\"(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) \">{{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n    <div class=\"modal-dialog modal-lg\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <h4 class=\"modal-title\">\r\n            {{UtilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom in\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-plus\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom out\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-minus\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move left\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-left\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move right\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-right\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" ngbTooltip=\"Move up\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-up\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" ngbTooltip=\"Move down\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-down\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" ngbTooltip=\"Rotate left\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-undo-alt\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" ngbTooltip=\"Rotate right\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-redo-alt\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\" align=\"right\">\r\n          <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n            {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n          </button>\r\n          <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n            {{UtilityService.getResourceValue(\"Crop\")}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.NgZone }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput', { static: false }]
+            }], group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }], angularCropper: [{
+                type: ViewChild,
+                args: ['angularCropper', { static: false }]
+            }] } });
 
 class AutocompleteDTO {
     constructor() {
@@ -4036,6 +4044,7 @@ class AutocompleteTextBoxComponent {
         AutocompleteTextBoxComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
+        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.Name, new FormControl(''));
         this.AutocompleteTextBoxControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -4150,7 +4159,7 @@ class AutocompleteTextBoxComponent {
             this.Search = search;
             this.SelectedValue = "";
             yield this.suggestions$.subscribe((result) => {
-                if ((result == null || result == [] || result.length == 0) && this.options.AllowNewSelection == true) {
+                if ((result == null || result.length == 0 || result.length == 0) && this.options.AllowNewSelection == true) {
                     this.dataList = [
                         {
                             key: 0,
@@ -4166,161 +4175,491 @@ class AutocompleteTextBoxComponent {
     }
 }
 AutocompleteTextBoxComponent.controlContainerstatic = null;
-AutocompleteTextBoxComponent.decorators = [
-    { type: Component, args: [{
-                // tslint:disable-next-line: component-selector
-                selector: 'BBSF-AutocompleteTextBox',
-                template: "\r\n<div class=\"form-group bbsf-control bbsf-autocomplete-textbox\" [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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Input container-->\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <ng-autocomplete class=\"form-control  {{options.ExtraClasses}}\" *ngIf=\"!options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n                       [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n                       (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n                       dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n                       formControlName=\"{{options.Name}}\"\r\n                       aria-describedby=\"email-error\"\r\n                       aria-invalid=\"true\"\r\n                       [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-autocomplete class=\"form-control {{options.ExtraClasses}}\" *ngIf=\"options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n                       [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n                       (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n                       dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n                       formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                       [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <img *ngIf=\"options.ItemWithImage\" src=\"{{(item.image?item.image:avatarImage)}}\" />\r\n        <a [innerHTML]=\"item.value\"></a>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n      {{getErrorValidation(AutocompleteTextBoxControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\"> {{resetError()}} </div>\r\n</div>\r\n\r\n"
-            },] }
-];
-AutocompleteTextBoxComponent.ctorParameters = () => [
-    { type: HttpClient },
-    { type: ErrorMassageValidation },
-    { type: RequestHandlerService },
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-AutocompleteTextBoxComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+AutocompleteTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutocompleteTextBoxComponent, deps: [{ token: i1$1.HttpClient }, { token: ErrorMassageValidation }, { token: i3.RequestHandlerService }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+AutocompleteTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AutocompleteTextBoxComponent, selector: "BBSF-AutocompleteTextBox", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "\r\n<div class=\"form-group bbsf-control bbsf-autocomplete-textbox\" [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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Input container-->\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <ng-autocomplete class=\"form-control  {{options.ExtraClasses}}\" *ngIf=\"!options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n                       [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n                       (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n                       [dir]=\"textDir\"\r\n                       formControlName=\"{{options.Name}}\"\r\n                       aria-describedby=\"email-error\"\r\n                       aria-invalid=\"true\"\r\n                       [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-autocomplete class=\"form-control {{options.ExtraClasses}}\" *ngIf=\"options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n                       [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n                       (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n                       [dir]=\"textDir\"\r\n                       formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                       [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <img *ngIf=\"options.ItemWithImage\" src=\"{{(item.image?item.image:avatarImage)}}\" />\r\n        <a [innerHTML]=\"item.value\"></a>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n      {{getErrorValidation(AutocompleteTextBoxControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\"> {{resetError()}} </div>\r\n</div>\r\n\r\n", components: [{ type: i7$3.AutocompleteComponent, selector: "ng-autocomplete", inputs: ["data", "placeholder", "heading", "historyHeading", "historyListMaxNumber", "notFoundText", "minQueryLength", "focusFirst", "disabled", "searchKeyword", "initialValue", "historyIdentifier", "isLoading", "debounceTime", "customFilter", "itemTemplate", "notFoundTemplate"], outputs: ["selected", "inputChanged", "inputFocused", "inputCleared", "opened", "closed", "scrolledToEnd"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutocompleteTextBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-AutocompleteTextBox', template: "\r\n<div class=\"form-group bbsf-control bbsf-autocomplete-textbox\" [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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Input container-->\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <ng-autocomplete class=\"form-control  {{options.ExtraClasses}}\" *ngIf=\"!options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n                       [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n                       (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n                       [dir]=\"textDir\"\r\n                       formControlName=\"{{options.Name}}\"\r\n                       aria-describedby=\"email-error\"\r\n                       aria-invalid=\"true\"\r\n                       [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-autocomplete class=\"form-control {{options.ExtraClasses}}\" *ngIf=\"options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n                       [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n                       (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n                       [dir]=\"textDir\"\r\n                       formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                       [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <img *ngIf=\"options.ItemWithImage\" src=\"{{(item.image?item.image:avatarImage)}}\" />\r\n        <a [innerHTML]=\"item.value\"></a>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n      {{getErrorValidation(AutocompleteTextBoxControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\"> {{resetError()}} </div>\r\n</div>\r\n\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.HttpClient }, { type: ErrorMassageValidation }, { type: i3.RequestHandlerService }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
-class TagsInputComponent {
-    // tslint:disable-next-line: max-line-length
-    constructor(http, controlUtility, requestHandlerService, controlContainer, TagsInputControlHost, UtilityService, controlValidationService, globalSettings) {
-        this.http = http;
-        this.controlUtility = controlUtility;
-        this.requestHandlerService = requestHandlerService;
-        this.controlContainer = controlContainer;
-        this.TagsInputControlHost = TagsInputControlHost;
-        this.UtilityService = UtilityService;
-        this.controlValidationService = controlValidationService;
-        this.globalSettings = globalSettings;
-        this.OnChange = new EventEmitter();
-        // TagInputControl: AbstractControl;
-        this.SelectedId = [];
-        this.tags = [];
-        this.NewSelectionValidationKey = "";
-        this.markAllAsTouched = false;
-        this.validationRules = [];
-        this.validationRulesasync = [];
-        this.SearchResultHasItems = false;
-        this.resetError = () => {
-            this.controlValidationService.RemoveGlobalError();
-        };
-        //External Method
-        this.RemoveRequiredValidation = () => {
-            this.controlUtility.RemoveRequiredValidation(this.TagsFormControl, this.validationRules, this.options);
-        };
-        //External Method
-        this.AddRequiredValidation = () => {
-            this.controlUtility.AddRequiredValidation(this.TagsFormControl, this.validationRules, this.options);
-        };
-        //External Method
-        this.RemoveCustomValidation = (CustomValidation) => {
-            this.controlUtility.RemoveCustomValidation(this.TagsFormControl, this.validationRules, CustomValidation);
-        };
-        //External Method
-        this.AddCustomValidation = (CustomValidation) => {
-            this.controlUtility.AddCustomValidation(this.TagsFormControl, this.validationRules, CustomValidation);
-        };
-        //External Method
-        this.IsValid = () => {
-            this.controlUtility.IsValid(this.TagsFormControl);
-        };
-        TagsInputComponent.controlContainerstatic = this.controlContainer;
-    }
-    static showErrorOfInputs(errors) {
-        const controlContainerstatic = TagsInputComponent.controlContainerstatic;
-        const formGroup = controlContainerstatic.control;
-        for (const key in errors) {
-            if (errors.hasOwnProperty(key)) {
-                for (const iterator of errors[key]) {
-                    const formControl = formGroup.get(key);
-                    formControl.setErrors({ "FluentApi": iterator });
-                    formControl.markAsTouched();
-                }
-            }
-        }
-    }
-    ngOnDestroy() {
-        if (this.changeValueSubscription)
-            this.changeValueSubscription.unsubscribe();
-    }
-    ngOnInit() {
-        this.controlValidationService.isCreatedBefor = false;
-        this.options.DatasourceItemText = this.options.DatasourceItemText.toLowerCase();
-        this.TagsFormGroup = new FormGroup({});
-        ;
-        this.TagsFormGroup.addControl("tags", new FormControl(''));
-        this.TagsFormControl = this.TagsFormGroup.controls["tags"]; //  new FormControl('',validationRules);
-        this.group.addControl(this.options.Name, this.TagsFormControl);
-        if (!this.options.ViewType)
-            this.options.ViewType = this.globalSettings.ViewType;
-        if (this.options.LabelKey != null && this.options.LabelKey != "")
-            this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
-        if (!this.options.NoResultText)
-            this.options.NoResultText = this.UtilityService.getResourceValue("NoItemsMatch");
-        // this.group.addControl(this.options.Name, new FormControl(''));
-        // this.TagInputControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
-        this.TagsFormControl.setValue(this.options.Value);
-        if (this.options.IsRequired) {
-            this.validationRules.push(Validators.required);
-        }
-        if (this.options.CustomValidation.length > 0) {
-            let Validations = this.options.CustomValidation;
-            for (let index = 0; index < Validations.length; index++) {
-                const Validation = Validations[index];
-                this.validationRules.push(Validation.functionBody);
-            }
-        }
-        this.TagsFormControl.setValidators(this.validationRules);
-        this.TagsFormControl.setAsyncValidators(this.validationRulesasync);
-        if (this.options.IsDisabled) {
-            this.TagsFormControl.disable();
-        }
-        if (this.options.Value != undefined && this.options.Value != []) {
-            for (let index = 0; index < this.options.Value.length; index++) {
-                const element = this.options.Value[index];
-                this.SelectedId.push(element.id);
-            }
-            this.tags = this.options.Value;
-            this.TagsFormControl.setValue(this.options.Value);
-        }
-        this.TagsInputControlHost.ngSubmit.subscribe((value) => {
-            this.group.markAllAsTouched();
-            this.markAllAsTouched = true;
-        });
-        //Check for changing in value
-        this.changeValueSubscription = this.TagsFormControl.valueChanges.subscribe(c => {
-            var _a;
-            this.tags = this.TagsFormControl.value;
-            this.SelectedId = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.filter(item => item.id).map(item => item.id);
-            if (this.tags == null) {
-                this.SearchKey.selected = "";
-                this.tags = [];
-                this.TagsFormControl.setValue([]);
-            }
-        });
-    }
-    ngAfterViewInit() {
-        if (this.options.AttributeList != null) {
-            var element = document.getElementById(this.options.Name);
-            for (let index = 0; index < this.options.AttributeList.length; index++) {
-                element.setAttribute(this.options.AttributeList[index].Key, this.options.AttributeList[index].value);
-            }
-        }
-        let inputElement = document.getElementById(this.options.Name).getElementsByTagName("input")[0];
-        inputElement.setAttribute("autocomplete", "off");
-    }
-    showGlobalError() {
-        this.controlUtility.showGlobalError();
-    }
+var TagInputView;
+(function (TagInputView) {
+    TagInputView[TagInputView["WithImage"] = 1] = "WithImage";
+    TagInputView[TagInputView["WithoutImage"] = 2] = "WithoutImage";
+    TagInputView[TagInputView["WithInitial"] = 3] = "WithInitial";
+})(TagInputView || (TagInputView = {}));
+
+const noop = () => { };
+const TAGS_INPUT_TEMPLATE = `
+
+<div class="tags-input">
+<span class="tags-input__tag label label-primary badge badge-primary" *ngFor="let tag of tags">
+
+<span [ngSwitch]="ViewMode">
+<span *ngSwitchCase="tagInputViewEnum.WithImage">
+<img style="border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;"
+src="{{(tag.imageURL?tag.imageURL:defaultImageURL)}}" />
+</span>
+
+<span *ngSwitchCase="tagInputViewEnum.WithInitial">
+<div class="user-initials">{{calculateInitials(tag.name)}}</div>
+</span>
+
+<span *ngSwitchDefault>
+</span>
+
+</span>
+  {{tag[displayField]}}
+  <span *ngIf="isDeleteable(tag)" role="button" class="tags-input__tag-remove-btn" (click)="removeTag(tag)"
+    (touch)="removeTag(tag)">
+    <span aria-hidden="true">&times;</span>
+    <span class="sr-only">Close</span>
+  </span>
+</span>
+
+<input *ngIf="options === null; else withTypeahead" class="tags-input__input-field" type="text"
+  [placeholder]="getPlaceholder()" name="tags" (keyup.enter)="addTag(tagInput)"
+  (keydown.backspace)="removeLastTag(tagInput)" [disabled]="!canAddTags || maximumOfTagsReached()"
+  [hidden]="!canAddTags || maximumOfTagsReached()" #tagInput />
+
+<ng-template #withTypeahead>
+  <span [ngSwitch]="ViewMode">
+    <span *ngSwitchCase="tagInputViewEnum.WithImage">
+      <input *ngIf="(options !== null)" class="tags-input__input-field" type="text" [placeholder]="getPlaceholder()"
+        name="tags" (keydown.backspace)="removeLastTag(tagInput)" [(ngModel)]="selected" [typeahead]="options"
+        [typeaheadOptionField]="displayField" (typeaheadOnSelect)="typeaheadOnSelect($event)"
+        (typeaheadNoResults)="typeaheadOnNoMatch($event)" [typeaheadMinLength]="minLengthBeforeOptions"
+        [typeaheadScrollable]="scrollableOptions" [typeaheadLatinize]="true"
+        [typeaheadItemTemplate]="itemTemplateWithImage" [typeaheadOptionsInScrollableView]="scrollableOptionsInView"
+        [disabled]="!canAddTags || maximumOfTagsReached()" [hidden]="!canAddTags || maximumOfTagsReached()"
+        (blur)="onBlur()"  autocomplete="off"
+        #tagInput />
+    </span>
+
+    <span *ngSwitchCase="tagInputViewEnum.WithoutImage">
+      <input *ngIf="(options !== null)" class="tags-input__input-field" type="text" [placeholder]="getPlaceholder()"
+        name="tags" (keydown.backspace)="removeLastTag(tagInput)" [(ngModel)]="selected" [typeahead]="options"
+        [typeaheadOptionField]="displayField" (typeaheadOnSelect)="typeaheadOnSelect($event)"
+        (typeaheadNoResults)="typeaheadOnNoMatch($event)" [typeaheadMinLength]="minLengthBeforeOptions"
+        [typeaheadScrollable]="scrollableOptions" [typeaheadLatinize]="true"
+        [typeaheadItemTemplate]="itemTemplateWithoutImage"
+        [typeaheadOptionsInScrollableView]="scrollableOptionsInView"
+        [disabled]="!canAddTags || maximumOfTagsReached()" [hidden]="!canAddTags || maximumOfTagsReached()"
+        (blur)="onBlur()" autocomplete="off"
+        #tagInput />
+    </span>
+
+    <span *ngSwitchCase="tagInputViewEnum.WithInitial">
+      <input *ngIf="(options !== null)" class="tags-input__input-field" type="text" [placeholder]="getPlaceholder()"
+        name="tags" (keydown.backspace)="removeLastTag(tagInput)" [(ngModel)]="selected" [typeahead]="options"
+        [typeaheadOptionField]="displayField" (typeaheadOnSelect)="typeaheadOnSelect($event)"
+        (typeaheadNoResults)="typeaheadOnNoMatch($event)" [typeaheadMinLength]="minLengthBeforeOptions"
+        [typeaheadScrollable]="scrollableOptions" [typeaheadLatinize]="true"
+        [typeaheadItemTemplate]="itemTemplateWithoutInitial"
+        [typeaheadOptionsInScrollableView]="scrollableOptionsInView"
+        [disabled]="!canAddTags || maximumOfTagsReached()" [hidden]="!canAddTags || maximumOfTagsReached()"
+        (blur)="onBlur()" autocomplete="off"
+        #tagInput />
+    </span>
+
+    <span *ngSwitchDefault>
+      <input *ngIf="(options !== null)" class="tags-input__input-field" type="text" [placeholder]="getPlaceholder()"
+        name="tags" (keydown.backspace)="removeLastTag(tagInput)" [(ngModel)]="selected" [typeahead]="options"
+        [typeaheadOptionField]="displayField" (typeaheadOnSelect)="typeaheadOnSelect($event)"
+        (typeaheadNoResults)="typeaheadOnNoMatch($event)" [typeaheadMinLength]="minLengthBeforeOptions"
+        [typeaheadScrollable]="scrollableOptions" [typeaheadLatinize]="true"
+        [typeaheadItemTemplate]="itemTemplateWithoutImage"
+        [typeaheadOptionsInScrollableView]="scrollableOptionsInView"
+        [disabled]="!canAddTags || maximumOfTagsReached()" [hidden]="!canAddTags || maximumOfTagsReached()"
+        (blur)="onBlur()" autocomplete="off"
+        #tagInput />
+    </span>
+
+  </span>
+
+</ng-template>
+
+<ng-template #itemTemplateWithImage let-model="item" let-index="index">
+  <img
+    style="border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;"
+    src="{{(model.imageURL?model.imageURL:defaultImageURL)}}" />
+  <div>
+    <a [innerHTML]="model.name"></a>
+    <p *ngIf="showDescription">
+      {{model.description}}
+    </p>
+  </div>
+</ng-template>
+
+<ng-template #itemTemplateWithoutImage let-model="item" let-index="index">
+  <div>
+    <a [innerHTML]="model.name"></a>
+    <p *ngIf="showDescription">
+      {{model.description}}
+    </p>
+  </div>
+</ng-template>
+
+<ng-template #itemTemplateWithoutInitial let-model="item" let-index="index">
+  <div class="user-image">
+    <div class="user-initials">{{calculateInitials(model.name)}}</div>
+  </div>
+  <div>
+    <a [innerHTML]="model.name"></a>
+    <p *ngIf="showDescription">
+      {{model.description}}
+    </p>
+  </div>
+</ng-template>
+</div>
+`;
+const TAGS_INPUT_STYLE = `
+    :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: 0.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;
+    }
+`;
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => BTagsInputComponent),
+    multi: true
+};
+class BTagsInputComponent {
+    constructor() {
+        this.selected = '';
+        this.tags = [];
+        this.onTouchedCallback = noop;
+        this.onChangeCallback = noop;
+        this.tagInputViewEnum = TagInputView;
+        this.removeLastOnBackspace = false;
+        this.canDeleteTags = true;
+        this.canAddTags = true;
+        this.ViewMode = TagInputView.WithoutImage;
+        this.placeholder = '';
+        this.showDescription = true;
+        this.options = null;
+        this.defaultImageURL = null;
+        this.displayField = 'name';
+        this.minLengthBeforeOptions = 1;
+        this.scrollableOptions = false;
+        this.scrollableOptionsInView = 5;
+        this.onTagsChanged = new EventEmitter();
+        this.onMaxTagsReached = new EventEmitter();
+        this.onNoOptionsMatch = new EventEmitter();
+        this.onBlurInput = new EventEmitter();
+    }
+    getPlaceholder() {
+        if (this.tags && this.tags.length > 0) {
+            return '';
+        }
+        return this.placeholder;
+    }
+    tagsChanged(type, tag) {
+        this.onChangeCallback(this.tags);
+        this.onTagsChanged.emit({
+            change: type,
+            tag: tag
+        });
+        if (this.maximumOfTagsReached()) {
+            this.onMaxTagsReached.emit();
+        }
+    }
+    removeLastTag(tagInput) {
+        var _a;
+        if (!this.removeLastOnBackspace || !((_a = this.tags) === null || _a === void 0 ? void 0 : _a.length)) {
+            return;
+        }
+        if (tagInput.value === '') {
+            this.removeTag(this.tags[this.tags.length - 1]);
+        }
+    }
+    addTag(tagInput) {
+        if (tagInput.value.trim() !== '') {
+            let tag = {
+                [this.displayField]: tagInput.value
+            };
+            this.addPredefinedTag(tag);
+        }
+        tagInput.value = '';
+    }
+    addPredefinedTag(tag) {
+        if (this.tags == null)
+            this.tags = [];
+        if (!this.maximumOfTagsReached()) {
+            this.tags.push(tag);
+            this.tagsChanged('add', tag);
+        }
+    }
+    removeTag(tagToRemove) {
+        if (!this.isDeleteable(tagToRemove)) {
+            return;
+        }
+        this.tags = this.tags.filter(tag => tagToRemove !== tag);
+        this.tagsChanged('remove', tagToRemove);
+    }
+    maximumOfTagsReached() {
+        return typeof this.maxTags !== 'undefined' && this.tags && this.tags.length >= this.maxTags;
+    }
+    isDeleteable(tag) {
+        if (typeof tag.deleteable !== "undefined" && !tag.deleteable) {
+            return false;
+        }
+        return this.canDeleteTags;
+    }
+    typeaheadOnSelect(e) {
+        if (typeof e.item === 'string') {
+            this.addPredefinedTag({
+                [this.displayField]: e.value
+            });
+        }
+        else {
+            this.addPredefinedTag(e.item);
+        }
+        this.selected = '';
+    }
+    typeaheadOnNoMatch(e) {
+        if (typeof this.onNoOptionsMatch !== 'undefined') {
+            this.onNoOptionsMatch.emit(e);
+        }
+    }
+    writeValue(value) {
+        if (value !== this.tags) {
+            this.tags = value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    calculateInitials(name) {
+        var fullName = name.split(' ');
+        var initials = "";
+        if (fullName.length > 1)
+            initials = fullName.shift().charAt(0) + fullName.pop().charAt(0);
+        else
+            initials = fullName.shift().charAt(0);
+        return initials.toUpperCase();
+    }
+    onBlur() {
+        this.onBlurInput.emit();
+    }
+}
+BTagsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BTagsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BTagsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BTagsInputComponent, 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"], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.TypeaheadDirective, selector: "[typeahead]", inputs: ["isAnimated", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "dropup", "typeaheadOptionsLimit", "typeaheadMinLength", "typeaheadWaitMs", "typeaheadAsync", "typeahead", "adaptivePosition", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadMultipleSearch", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadHideResultsOnBlur", "container"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BTagsInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-tags-input',
+                    template: TAGS_INPUT_TEMPLATE,
+                    styles: [TAGS_INPUT_STYLE],
+                    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
+                }]
+        }], propDecorators: { maxTags: [{
+                type: Input
+            }], removeLastOnBackspace: [{
+                type: Input
+            }], canDeleteTags: [{
+                type: Input
+            }], canAddTags: [{
+                type: Input
+            }], ViewMode: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], showDescription: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], defaultImageURL: [{
+                type: Input
+            }], minLengthBeforeOptions: [{
+                type: Input
+            }], scrollableOptions: [{
+                type: Input
+            }], scrollableOptionsInView: [{
+                type: Input
+            }], onTagsChanged: [{
+                type: Output
+            }], onMaxTagsReached: [{
+                type: Output
+            }], onNoOptionsMatch: [{
+                type: Output
+            }], onBlurInput: [{
+                type: Output
+            }] } });
+
+class TagsInputComponent {
+    // tslint:disable-next-line: max-line-length
+    constructor(http, controlUtility, requestHandlerService, controlContainer, TagsInputControlHost, UtilityService, controlValidationService, globalSettings) {
+        this.http = http;
+        this.controlUtility = controlUtility;
+        this.requestHandlerService = requestHandlerService;
+        this.controlContainer = controlContainer;
+        this.TagsInputControlHost = TagsInputControlHost;
+        this.UtilityService = UtilityService;
+        this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
+        this.OnChange = new EventEmitter();
+        // TagInputControl: AbstractControl;
+        this.SelectedId = [];
+        this.tags = [];
+        this.NewSelectionValidationKey = "";
+        this.markAllAsTouched = false;
+        this.validationRules = [];
+        this.validationRulesasync = [];
+        this.SearchResultHasItems = false;
+        this.resetError = () => {
+            this.controlValidationService.RemoveGlobalError();
+        };
+        //External Method
+        this.RemoveRequiredValidation = () => {
+            this.controlUtility.RemoveRequiredValidation(this.TagsFormControl, this.validationRules, this.options);
+        };
+        //External Method
+        this.AddRequiredValidation = () => {
+            this.controlUtility.AddRequiredValidation(this.TagsFormControl, this.validationRules, this.options);
+        };
+        //External Method
+        this.RemoveCustomValidation = (CustomValidation) => {
+            this.controlUtility.RemoveCustomValidation(this.TagsFormControl, this.validationRules, CustomValidation);
+        };
+        //External Method
+        this.AddCustomValidation = (CustomValidation) => {
+            this.controlUtility.AddCustomValidation(this.TagsFormControl, this.validationRules, CustomValidation);
+        };
+        //External Method
+        this.IsValid = () => {
+            this.controlUtility.IsValid(this.TagsFormControl);
+        };
+        TagsInputComponent.controlContainerstatic = this.controlContainer;
+    }
+    static showErrorOfInputs(errors) {
+        const controlContainerstatic = TagsInputComponent.controlContainerstatic;
+        const formGroup = controlContainerstatic.control;
+        for (const key in errors) {
+            if (errors.hasOwnProperty(key)) {
+                for (const iterator of errors[key]) {
+                    const formControl = formGroup.get(key);
+                    formControl.setErrors({ "FluentApi": iterator });
+                    formControl.markAsTouched();
+                }
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.changeValueSubscription)
+            this.changeValueSubscription.unsubscribe();
+    }
+    ngOnInit() {
+        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        this.controlValidationService.isCreatedBefor = false;
+        this.options.DatasourceItemText = this.options.DatasourceItemText.toLowerCase();
+        this.TagsFormGroup = new FormGroup({});
+        ;
+        this.TagsFormGroup.addControl("tags", new FormControl(''));
+        this.TagsFormControl = this.TagsFormGroup.controls["tags"]; //  new FormControl('',validationRules);
+        this.group.addControl(this.options.Name, this.TagsFormControl);
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
+        if (this.options.LabelKey != null && this.options.LabelKey != "")
+            this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
+        if (!this.options.NoResultText)
+            this.options.NoResultText = this.UtilityService.getResourceValue("NoItemsMatch");
+        // this.group.addControl(this.options.Name, new FormControl(''));
+        // this.TagInputControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
+        this.TagsFormControl.setValue(this.options.Value);
+        if (this.options.IsRequired) {
+            this.validationRules.push(Validators.required);
+        }
+        if (this.options.CustomValidation.length > 0) {
+            let Validations = this.options.CustomValidation;
+            for (let index = 0; index < Validations.length; index++) {
+                const Validation = Validations[index];
+                this.validationRules.push(Validation.functionBody);
+            }
+        }
+        this.TagsFormControl.setValidators(this.validationRules);
+        this.TagsFormControl.setAsyncValidators(this.validationRulesasync);
+        if (this.options.IsDisabled) {
+            this.TagsFormControl.disable();
+        }
+        if (this.options.Value != undefined && this.options.Value.length > 0) {
+            for (let index = 0; index < this.options.Value.length; index++) {
+                const element = this.options.Value[index];
+                this.SelectedId.push(element.id);
+            }
+            this.tags = this.options.Value;
+            this.TagsFormControl.setValue(this.options.Value);
+        }
+        this.TagsInputControlHost.ngSubmit.subscribe((value) => {
+            this.group.markAllAsTouched();
+            this.markAllAsTouched = true;
+        });
+        //Check for changing in value
+        this.changeValueSubscription = this.TagsFormControl.valueChanges.subscribe(c => {
+            var _a;
+            this.tags = this.TagsFormControl.value;
+            this.SelectedId = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.filter(item => item.id).map(item => item.id);
+            if (this.tags == null) {
+                this.SearchKey.selected = "";
+                this.tags = [];
+                this.TagsFormControl.setValue([]);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        if (this.options.AttributeList != null) {
+            var element = document.getElementById(this.options.Name);
+            for (let index = 0; index < this.options.AttributeList.length; index++) {
+                element.setAttribute(this.options.AttributeList[index].Key, this.options.AttributeList[index].value);
+            }
+        }
+        let inputElement = document.getElementById(this.options.Name).getElementsByTagName("input")[0];
+        inputElement.setAttribute("autocomplete", "off");
+    }
+    showGlobalError() {
+        this.controlUtility.showGlobalError();
+    }
     getErrorValidation(ErrorList) {
         if (this.markAllAsTouched && this.group.invalid) {
             this.showGlobalError();
@@ -4427,29 +4766,25 @@ class TagsInputComponent {
     }
 }
 TagsInputComponent.controlContainerstatic = null;
-TagsInputComponent.decorators = [
-    { type: Component, args: [{
-                // tslint:disable-next-line: component-selector
-                selector: 'BBSF-TagsInput',
-                template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"form-group bbsf-control bbsf-tags-input\" [formGroup]=\"TagsFormGroup\">\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)\" class=\"text-danger\">*</span>\r\n      </label>\r\n      <!--input-->\r\n      <div class=\"bbsf-input-container\">\r\n        <b-tags-input type=\"text\" class=\"form-control {{options.ExtraClasses}}\"\r\n                      dir=\"{{options.ForceDirection==2?'rtl':''}}\" [disabled]=\"options.IsDisabled\" aria-describedby=\"email-error\"\r\n                      aria-invalid=\"true\" formControlName=\"tags\"\r\n                      [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\" placeholder=\"{{options.Placeholder}}\"\r\n                      id=\"{{options.Name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n                      removeLastOnBackspace=\"{{options.RemoveLastOnBackspace}}\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n                      [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey\r\n                      scrollableOptions=\"{{options.ScrollableOptions}}\" scrollableOptionsInView=\"{{options.MaxSearchResultsCount}}\"\r\n                      (keydown)=\"AddTag($event,SearchKey)\" [ViewMode]=\"options.TagInputMode\"\r\n                      maxTags=\"{{options.MaxNumberTags}}\" minLengthBeforeOptions=\"{{options.MinSearchLength}}\"\r\n                      [showDescription]=\"options.ShowDescription\" [defaultImageURL]=\"options.DefaultImgUrl\" name=\"tags\"\r\n                      (onBlurInput)=\"onTagsInputBlur(SearchKey)\">\r\n        </b-tags-input>\r\n      </div>\r\n    </div>\r\n    <div class=\"subtext-container\">\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=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n        {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">{{resetError()}}</div>\r\n  </div>\r\n\r\n</div>\r\n"
-            },] }
-];
-TagsInputComponent.ctorParameters = () => [
-    { type: HttpClient },
-    { type: ControlUtility },
-    { type: RequestHandlerService },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-TagsInputComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }],
-    SearchKey: [{ type: ViewChild, args: ['SearchKey', { static: false },] }]
-};
+TagsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TagsInputComponent, deps: [{ token: i1$1.HttpClient }, { token: ControlUtility }, { token: i3.RequestHandlerService }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+TagsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TagsInputComponent, selector: "BBSF-TagsInput", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, viewQueries: [{ propertyName: "SearchKey", first: true, predicate: ["SearchKey"], descendants: true }], ngImport: i0, template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"form-group bbsf-control bbsf-tags-input\" [formGroup]=\"TagsFormGroup\">\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)\" class=\"text-danger\">*</span>\r\n      </label>\r\n      <!--input-->\r\n      <div class=\"bbsf-input-container\">\r\n        <b-tags-input type=\"text\" class=\"form-control {{options.ExtraClasses}}\"\r\n        [dir]=\"textDir\" [disabled]=\"options.IsDisabled\" aria-describedby=\"email-error\"\r\n                      aria-invalid=\"true\" formControlName=\"tags\"\r\n                      [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\" placeholder=\"{{options.Placeholder}}\"\r\n                      id=\"{{options.Name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n                      [removeLastOnBackspace]=\"options.RemoveLastOnBackspace\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n                      [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey\r\n                      [scrollableOptions]=\"options.ScrollableOptions\" [scrollableOptionsInView]=\"options.MaxSearchResultsCount\"\r\n                      (keydown)=\"AddTag($event,SearchKey)\" [ViewMode]=\"options.TagInputMode\"\r\n                      [maxTags]=\"options.MaxNumberTags\" [minLengthBeforeOptions]=\"options.MinSearchLength\"\r\n                      [showDescription]=\"options.ShowDescription\" [defaultImageURL]=\"options.DefaultImgUrl\" name=\"tags\"\r\n                      (onBlurInput)=\"onTagsInputBlur(SearchKey)\">\r\n        </b-tags-input>\r\n      </div>\r\n    </div>\r\n    <div class=\"subtext-container\">\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=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n        {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">{{resetError()}}</div>\r\n  </div>\r\n\r\n</div>\r\n", components: [{ type: BTagsInputComponent, selector: "b-tags-input", inputs: ["maxTags", "removeLastOnBackspace", "canDeleteTags", "canAddTags", "ViewMode", "placeholder", "showDescription", "options", "defaultImageURL", "minLengthBeforeOptions", "scrollableOptions", "scrollableOptionsInView"], outputs: ["onTagsChanged", "onMaxTagsReached", "onNoOptionsMatch", "onBlurInput"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TagsInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-TagsInput', template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"form-group bbsf-control bbsf-tags-input\" [formGroup]=\"TagsFormGroup\">\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)\" class=\"text-danger\">*</span>\r\n      </label>\r\n      <!--input-->\r\n      <div class=\"bbsf-input-container\">\r\n        <b-tags-input type=\"text\" class=\"form-control {{options.ExtraClasses}}\"\r\n        [dir]=\"textDir\" [disabled]=\"options.IsDisabled\" aria-describedby=\"email-error\"\r\n                      aria-invalid=\"true\" formControlName=\"tags\"\r\n                      [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\" placeholder=\"{{options.Placeholder}}\"\r\n                      id=\"{{options.Name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n                      [removeLastOnBackspace]=\"options.RemoveLastOnBackspace\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n                      [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey\r\n                      [scrollableOptions]=\"options.ScrollableOptions\" [scrollableOptionsInView]=\"options.MaxSearchResultsCount\"\r\n                      (keydown)=\"AddTag($event,SearchKey)\" [ViewMode]=\"options.TagInputMode\"\r\n                      [maxTags]=\"options.MaxNumberTags\" [minLengthBeforeOptions]=\"options.MinSearchLength\"\r\n                      [showDescription]=\"options.ShowDescription\" [defaultImageURL]=\"options.DefaultImgUrl\" name=\"tags\"\r\n                      (onBlurInput)=\"onTagsInputBlur(SearchKey)\">\r\n        </b-tags-input>\r\n      </div>\r\n    </div>\r\n    <div class=\"subtext-container\">\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=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n        {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">{{resetError()}}</div>\r\n  </div>\r\n\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.HttpClient }, { type: ControlUtility }, { type: i3.RequestHandlerService }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }], SearchKey: [{
+                type: ViewChild,
+                args: ['SearchKey', { static: false }]
+            }] } });
 
 class PagingDTO {
     constructor() {
@@ -4475,6 +4810,159 @@ var FilterType;
     FilterType[FilterType["Other"] = 7] = "Other";
 })(FilterType || (FilterType = {}));
 
+class JwPaginationComponent {
+    constructor() {
+        this.changePage = new EventEmitter();
+        this.initialPage = 1;
+        this.pageSize = 10;
+        this.maxPages = 10;
+        this.ShowFirstAndLast = false;
+        this.pager = {};
+    }
+    ngOnInit() {
+        // set page if items array isn't empty
+        if (this.items && this.items.length) {
+            this.setPage(this.initialPage);
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.items.firstChange)
+            return;
+        // reset page if items array has changed
+        if (changes.items.currentValue !== changes.items.previousValue) {
+            this.setPage(this.initialPage);
+        }
+    }
+    setPage(page) {
+        // get new pager object for specified page
+        this.pager = this.paginate(this.items.length, page, this.pageSize, this.maxPages);
+        // get new page of items from items array
+        var pageOfItems = this.items.slice(this.pager.startIndex, this.pager.endIndex + 1);
+        // call change page function in parent component
+        this.changePage.emit(this.pager.currentPage);
+    }
+    paginate(totalItems, currentPage, pageSize, maxPages) {
+        if (currentPage === void 0) {
+            currentPage = 1;
+        }
+        if (pageSize === void 0) {
+            pageSize = 10;
+        }
+        if (maxPages === void 0) {
+            maxPages = 10;
+        }
+        // calculate total pages
+        var totalPages = Math.ceil(totalItems / pageSize);
+        // ensure current page isn't out of range
+        if (currentPage < 1) {
+            currentPage = 1;
+        }
+        else if (currentPage > totalPages) {
+            currentPage = totalPages;
+        }
+        var startPage, endPage;
+        if (totalPages <= maxPages) {
+            // total pages less than max so show all pages
+            startPage = 1;
+            endPage = totalPages;
+        }
+        else {
+            // total pages more than max so calculate start and end pages
+            var maxPagesBeforeCurrentPage = Math.floor(maxPages / 2);
+            var maxPagesAfterCurrentPage = Math.ceil(maxPages / 2) - 1;
+            if (currentPage <= maxPagesBeforeCurrentPage) {
+                // current page near the start
+                startPage = 1;
+                endPage = maxPages;
+            }
+            else if (currentPage + maxPagesAfterCurrentPage >= totalPages) {
+                // current page near the end
+                startPage = totalPages - maxPages + 1;
+                endPage = totalPages;
+            }
+            else {
+                // current page somewhere in the middle
+                startPage = currentPage - maxPagesBeforeCurrentPage;
+                endPage = currentPage + maxPagesAfterCurrentPage;
+            }
+        }
+        // calculate start and end item indexes
+        var startIndex = (currentPage - 1) * pageSize;
+        var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
+        // create an array of pages to ng-repeat in the pager control
+        var pages = Array.from(Array((endPage + 1) - startPage).keys()).map(function (i) { return startPage + i; });
+        // return object with all pager properties required by the view
+        return {
+            totalItems: totalItems,
+            currentPage: currentPage,
+            pageSize: pageSize,
+            totalPages: totalPages,
+            startPage: startPage,
+            endPage: endPage,
+            startIndex: startIndex,
+            endIndex: endIndex,
+            pages: pages
+        };
+    }
+}
+JwPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: JwPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+JwPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: JwPaginationComponent, selector: "jw-pagination", inputs: { items: "items", initialPage: "initialPage", pageSize: "pageSize", maxPages: "maxPages", ShowFirstAndLast: "ShowFirstAndLast" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: `
+  <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
+  <li *ngIf="ShowFirstAndLast" [ngClass]="{disabled:pager.currentPage === 1}" class="page-item first-item">
+      <a (click)="setPage(1)" class="page-link">❮❮</a>
+  </li>
+  <li [ngClass]="{disabled:pager.currentPage === 1}" class="page-item previous-item">
+      <a (click)="setPage(pager.currentPage - 1)" class="page-link">❮</a>
+  </li>
+  <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}" class="page-item number-item">
+      <a (click)="setPage(page)" class="page-link">{{page}}</a>
+  </li>
+  <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item next-item">
+      <a (click)="setPage(pager.currentPage + 1)" class="page-link">❯</a>
+  </li>
+  <li  *ngIf="ShowFirstAndLast" [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item last-item">
+      <a (click)="setPage(pager.totalPages)" class="page-link">❯❯</a>
+  </li>
+</ul>
+`, isInline: true, directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: JwPaginationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jw-pagination',
+                    template: `
+  <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
+  <li *ngIf="ShowFirstAndLast" [ngClass]="{disabled:pager.currentPage === 1}" class="page-item first-item">
+      <a (click)="setPage(1)" class="page-link">❮❮</a>
+  </li>
+  <li [ngClass]="{disabled:pager.currentPage === 1}" class="page-item previous-item">
+      <a (click)="setPage(pager.currentPage - 1)" class="page-link">❮</a>
+  </li>
+  <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}" class="page-item number-item">
+      <a (click)="setPage(page)" class="page-link">{{page}}</a>
+  </li>
+  <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item next-item">
+      <a (click)="setPage(pager.currentPage + 1)" class="page-link">❯</a>
+  </li>
+  <li  *ngIf="ShowFirstAndLast" [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item last-item">
+      <a (click)="setPage(pager.totalPages)" class="page-link">❯❯</a>
+  </li>
+</ul>
+`
+                }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], changePage: [{
+                type: Output
+            }], initialPage: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], maxPages: [{
+                type: Input
+            }], ShowFirstAndLast: [{
+                type: Input
+            }] } });
+
 // tslint:disable-next-line: no-conflicting-lifecycle
 class PagingComponent {
     constructor(utilityService, http, router, onChangeService, requestHandlerService) {
@@ -4739,172 +5227,38 @@ class PagingComponent {
                                 ControlValue = ControlValue;
                             if (this.options.Filters[index].FilterType == FilterType.TagInput)
                                 ControlValue = ControlValue;
-                            filters[this.options.Filters[index].ActionParameterName] = ControlValue;
-                        }
-                    }
-                    else {
-                        filters[this.options.Filters[index].ActionParameterName] = null;
-                    }
-                }
-                else {
-                    const ElementjQuerySelector = this.options.Filters[index].jQuerySelector;
-                    let ElementValue = document.querySelector(ElementjQuerySelector).value;
-                    if (ElementValue != undefined && ElementValue != null)
-                        filters[this.options.Filters[index].ActionParameterName] = ElementValue;
-                    else
-                        filters[this.options.Filters[index].ActionParameterName] = null;
-                }
-            }
-        }
-        return filters;
-    }
-}
-PagingComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-Paging',
-                template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\">\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]=\"1\" [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        <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\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong> {{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\" (scrolled)=\"options.IsInfiniteScroll==true?onScrollDown():null\"\r\n         [scrollWindow]=\"options.ScrollWindow\" [infiniteScrollContainer]=\"options.InfiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\" *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>\r\n\r\n\r\n"
-            },] }
-];
-PagingComponent.ctorParameters = () => [
-    { type: UtilityService },
-    { type: HttpClient },
-    { type: Router },
-    { type: OnPagingFiltersChangeService },
-    { type: RequestHandlerService }
-];
-PagingComponent.propDecorators = {
-    Items: [{ type: Output }],
-    options: [{ type: Input }],
-    group: [{ type: Input }]
-};
-
-class JwPaginationComponent {
-    constructor() {
-        this.changePage = new EventEmitter();
-        this.initialPage = 1;
-        this.pageSize = 10;
-        this.maxPages = 10;
-        this.ShowFirstAndLast = false;
-        this.pager = {};
-    }
-    ngOnInit() {
-        // set page if items array isn't empty
-        if (this.items && this.items.length) {
-            this.setPage(this.initialPage);
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.items.firstChange)
-            return;
-        // reset page if items array has changed
-        if (changes.items.currentValue !== changes.items.previousValue) {
-            this.setPage(this.initialPage);
-        }
-    }
-    setPage(page) {
-        // get new pager object for specified page
-        this.pager = this.paginate(this.items.length, page, this.pageSize, this.maxPages);
-        // get new page of items from items array
-        var pageOfItems = this.items.slice(this.pager.startIndex, this.pager.endIndex + 1);
-        // call change page function in parent component
-        this.changePage.emit(this.pager.currentPage);
-    }
-    paginate(totalItems, currentPage, pageSize, maxPages) {
-        if (currentPage === void 0) {
-            currentPage = 1;
-        }
-        if (pageSize === void 0) {
-            pageSize = 10;
-        }
-        if (maxPages === void 0) {
-            maxPages = 10;
-        }
-        // calculate total pages
-        var totalPages = Math.ceil(totalItems / pageSize);
-        // ensure current page isn't out of range
-        if (currentPage < 1) {
-            currentPage = 1;
-        }
-        else if (currentPage > totalPages) {
-            currentPage = totalPages;
-        }
-        var startPage, endPage;
-        if (totalPages <= maxPages) {
-            // total pages less than max so show all pages
-            startPage = 1;
-            endPage = totalPages;
-        }
-        else {
-            // total pages more than max so calculate start and end pages
-            var maxPagesBeforeCurrentPage = Math.floor(maxPages / 2);
-            var maxPagesAfterCurrentPage = Math.ceil(maxPages / 2) - 1;
-            if (currentPage <= maxPagesBeforeCurrentPage) {
-                // current page near the start
-                startPage = 1;
-                endPage = maxPages;
-            }
-            else if (currentPage + maxPagesAfterCurrentPage >= totalPages) {
-                // current page near the end
-                startPage = totalPages - maxPages + 1;
-                endPage = totalPages;
-            }
-            else {
-                // current page somewhere in the middle
-                startPage = currentPage - maxPagesBeforeCurrentPage;
-                endPage = currentPage + maxPagesAfterCurrentPage;
+                            filters[this.options.Filters[index].ActionParameterName] = ControlValue;
+                        }
+                    }
+                    else {
+                        filters[this.options.Filters[index].ActionParameterName] = null;
+                    }
+                }
+                else {
+                    const ElementjQuerySelector = this.options.Filters[index].jQuerySelector;
+                    let ElementValue = document.querySelector(ElementjQuerySelector).value;
+                    if (ElementValue != undefined && ElementValue != null)
+                        filters[this.options.Filters[index].ActionParameterName] = ElementValue;
+                    else
+                        filters[this.options.Filters[index].ActionParameterName] = null;
+                }
             }
         }
-        // calculate start and end item indexes
-        var startIndex = (currentPage - 1) * pageSize;
-        var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
-        // create an array of pages to ng-repeat in the pager control
-        var pages = Array.from(Array((endPage + 1) - startPage).keys()).map(function (i) { return startPage + i; });
-        // return object with all pager properties required by the view
-        return {
-            totalItems: totalItems,
-            currentPage: currentPage,
-            pageSize: pageSize,
-            totalPages: totalPages,
-            startPage: startPage,
-            endPage: endPage,
-            startIndex: startIndex,
-            endIndex: endIndex,
-            pages: pages
-        };
+        return filters;
     }
 }
-JwPaginationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'jw-pagination',
-                template: `
-  <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
-  <li *ngIf="ShowFirstAndLast" [ngClass]="{disabled:pager.currentPage === 1}" class="page-item first-item">
-      <a (click)="setPage(1)" class="page-link">❮❮</a>
-  </li>
-  <li [ngClass]="{disabled:pager.currentPage === 1}" class="page-item previous-item">
-      <a (click)="setPage(pager.currentPage - 1)" class="page-link">❮</a>
-  </li>
-  <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}" class="page-item number-item">
-      <a (click)="setPage(page)" class="page-link">{{page}}</a>
-  </li>
-  <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item next-item">
-      <a (click)="setPage(pager.currentPage + 1)" class="page-link">❯</a>
-  </li>
-  <li  *ngIf="ShowFirstAndLast" [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item last-item">
-      <a (click)="setPage(pager.totalPages)" class="page-link">❯❯</a>
-  </li>
-</ul>
-`
-            },] }
-];
-JwPaginationComponent.propDecorators = {
-    items: [{ type: Input }],
-    changePage: [{ type: Output }],
-    initialPage: [{ type: Input }],
-    pageSize: [{ type: Input }],
-    maxPages: [{ type: Input }],
-    ShowFirstAndLast: [{ type: Input }]
-};
+PagingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagingComponent, deps: [{ token: i3.UtilityService }, { token: i1$1.HttpClient }, { token: i3$2.Router }, { token: OnPagingFiltersChangeService }, { token: i3.RequestHandlerService }], target: i0.ɵɵFactoryTarget.Component });
+PagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagingComponent, selector: "BBSF-Paging", inputs: { options: "options", group: "group" }, outputs: { Items: "Items" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\">\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]=\"1\" [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        <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\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong> {{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\" (scrolled)=\"options.IsInfiniteScroll==true?onScrollDown():null\"\r\n         [scrollWindow]=\"options.ScrollWindow\" [infiniteScrollContainer]=\"options.InfiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\" *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>\r\n\r\n\r\n", components: [{ type: JwPaginationComponent, selector: "jw-pagination", inputs: ["items", "initialPage", "pageSize", "maxPages", "ShowFirstAndLast"], outputs: ["changePage"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i8$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-Paging', template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\">\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]=\"1\" [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        <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\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong> {{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\" (scrolled)=\"options.IsInfiniteScroll==true?onScrollDown():null\"\r\n         [scrollWindow]=\"options.ScrollWindow\" [infiniteScrollContainer]=\"options.InfiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\" *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>\r\n\r\n\r\n" }]
+        }], ctorParameters: function () { return [{ type: i3.UtilityService }, { type: i1$1.HttpClient }, { type: i3$2.Router }, { type: OnPagingFiltersChangeService }, { type: i3.RequestHandlerService }]; }, propDecorators: { Items: [{
+                type: Output
+            }], options: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }] } });
 
 class RadioButtonComponent {
     // tslint:disable-next-line: max-line-length
@@ -4988,26 +5342,22 @@ class RadioButtonComponent {
     }
 }
 RadioButtonComponent.controlContainerstatic = null;
-RadioButtonComponent.decorators = [
-    { type: Component, args: [{
-                // tslint:disable-next-line: component-selector
-                selector: 'BBSF-RadioButton',
-                template: "<div class=\"form-group bbsf-control bbsf-radio-button\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label  [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <div class=\"radio-container\" *ngFor=\"let item of options.Items\">\r\n        <input type=\"radio\" id=\"{{options.Name}}{{item.Value}}\"\r\n               class=\"{{options.ExtraClasses}}\"\r\n               [value]=\"item.Value\" checked=\"{{(options.Value!=null)&&(options.Value.Value == item.Value)}}\"\r\n               (change)=\"onValueChanged()\"\r\n               aria-describedby=\"email-error\"\r\n               aria-invalid=\"true\" [(ngModel)]=\"options.Value\"\r\n               formControlName=\"{{options.Name}}\">\r\n        <label class=\"radio-input-label\" for=\"{{options.Name}}{{item.Value}}\">{{item.Text}}</label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(RadioButtonFormControl.invalid && RadioButtonFormControl.touched)\">\r\n      {{getErrorValidation(RadioButtonFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n\r\n"
-            },] }
-];
-RadioButtonComponent.ctorParameters = () => [
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-RadioButtonComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RadioButtonComponent, selector: "BBSF-RadioButton", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-radio-button\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label  [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <div class=\"radio-container\" *ngFor=\"let item of options.Items\">\r\n        <input type=\"radio\" id=\"{{options.Name}}{{item.Value}}\"\r\n               class=\"{{options.ExtraClasses}}\"\r\n               [value]=\"item.Value\" checked=\"{{(options.Value!=null)&&(options.Value.Value == item.Value)}}\"\r\n               (change)=\"onValueChanged()\"\r\n               aria-describedby=\"email-error\"\r\n               aria-invalid=\"true\" [(ngModel)]=\"options.Value\"\r\n               formControlName=\"{{options.Name}}\">\r\n        <label class=\"radio-input-label\" for=\"{{options.Name}}{{item.Value}}\">{{item.Text}}</label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(RadioButtonFormControl.invalid && RadioButtonFormControl.touched)\">\r\n      {{getErrorValidation(RadioButtonFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n\r\n", directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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]" }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-RadioButton', template: "<div class=\"form-group bbsf-control bbsf-radio-button\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label  [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <div class=\"radio-container\" *ngFor=\"let item of options.Items\">\r\n        <input type=\"radio\" id=\"{{options.Name}}{{item.Value}}\"\r\n               class=\"{{options.ExtraClasses}}\"\r\n               [value]=\"item.Value\" checked=\"{{(options.Value!=null)&&(options.Value.Value == item.Value)}}\"\r\n               (change)=\"onValueChanged()\"\r\n               aria-describedby=\"email-error\"\r\n               aria-invalid=\"true\" [(ngModel)]=\"options.Value\"\r\n               formControlName=\"{{options.Name}}\">\r\n        <label class=\"radio-input-label\" for=\"{{options.Name}}{{item.Value}}\">{{item.Text}}</label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(RadioButtonFormControl.invalid && RadioButtonFormControl.touched)\">\r\n      {{getErrorValidation(RadioButtonFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
 var LanguageValidation;
 (function (LanguageValidation) {
@@ -5064,6 +5414,7 @@ class TextboxComponent {
         TextboxComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
+        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         if (!this.options.MaxLength)
             this.options.MaxLength = this.globalSettings.MaxLengthTextBox;
@@ -5250,25 +5601,22 @@ class TextboxComponent {
     }
 }
 TextboxComponent.controlContainerstatic = null;
-TextboxComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-TextBox',
-                template: "<div class=\"form-group bbsf-control bbsf-textbox\" [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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--MaskPattern-->\r\n    <div *ngIf=\"MaskPattern!=null&&MaskPattern!=''\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\">\r\n        <span [inlineSVG]=\"options.Icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.ExtraClasses}}\"\r\n             [mask]=\"MaskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\r\n             dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n             type=\"{{getInputType(options.Type)}}\" [(ngModel)]=\"options.Value\"\r\n             [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [readonly]=\"options.IsReadonly\"\r\n             (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n             #userinput>\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    <!--NoMaskPattern-->\r\n    <div *ngIf=\"MaskPattern==null||MaskPattern==''\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\" *ngIf=\"options.Icon!=null\">\r\n        <span [inlineSVG]=\"options.Icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.ExtraClasses}} \"\r\n             dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n             (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n             maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n             aria-describedby=\"email-error\"\r\n             aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"{{getInputType(options.Type)}}\"\r\n             [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value\"\r\n             (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" [readonly]=\"options.IsReadonly\"\r\n             #userinput>\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\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\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n         *ngIf=\"(TextBoxFormControl.invalid && TextBoxFormControl.touched)\">\r\n      {{getErrorValidation(TextBoxFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">{{resetError()}}</div>\r\n</div>\r\n"
-            },] }
-];
-TextboxComponent.ctorParameters = () => [
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-TextboxComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+TextboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextboxComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+TextboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextboxComponent, selector: "BBSF-TextBox", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-textbox\" [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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--MaskPattern-->\r\n    <div *ngIf=\"MaskPattern!=null&&MaskPattern!=''\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\">\r\n        <span [inlineSVG]=\"options.Icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.ExtraClasses}}\"\r\n             [mask]=\"MaskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\r\n             [dir]=\"textDir\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n             type=\"{{getInputType(options.Type)}}\" [(ngModel)]=\"options.Value\"\r\n             [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [readonly]=\"options.IsReadonly\"\r\n             (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n             #userinput>\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    <!--NoMaskPattern-->\r\n    <div *ngIf=\"MaskPattern==null||MaskPattern==''\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\" *ngIf=\"options.Icon!=null\">\r\n        <span [inlineSVG]=\"options.Icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.ExtraClasses}} \"\r\n      [dir]=\"textDir\"\r\n             (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n             maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n             aria-describedby=\"email-error\"\r\n             aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"{{getInputType(options.Type)}}\"\r\n             [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value\"\r\n             (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" [readonly]=\"options.IsReadonly\"\r\n             #userinput>\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\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\" [dir]=\"textDir\"\r\n         *ngIf=\"(TextBoxFormControl.invalid && TextBoxFormControl.touched)\">\r\n      {{getErrorValidation(TextBoxFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">{{resetError()}}</div>\r\n</div>\r\n", directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "forceEvalStyles", "evalScripts", "inlineSVG", "setSVGAttributes", "removeSVGAttributes", "fallbackImgUrl", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { type: i7$4.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime"] }, { 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]" }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-TextBox', template: "<div class=\"form-group bbsf-control bbsf-textbox\" [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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--MaskPattern-->\r\n    <div *ngIf=\"MaskPattern!=null&&MaskPattern!=''\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\">\r\n        <span [inlineSVG]=\"options.Icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.ExtraClasses}}\"\r\n             [mask]=\"MaskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\r\n             [dir]=\"textDir\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n             type=\"{{getInputType(options.Type)}}\" [(ngModel)]=\"options.Value\"\r\n             [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [readonly]=\"options.IsReadonly\"\r\n             (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n             #userinput>\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    <!--NoMaskPattern-->\r\n    <div *ngIf=\"MaskPattern==null||MaskPattern==''\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\" *ngIf=\"options.Icon!=null\">\r\n        <span [inlineSVG]=\"options.Icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.ExtraClasses}} \"\r\n      [dir]=\"textDir\"\r\n             (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n             maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n             aria-describedby=\"email-error\"\r\n             aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"{{getInputType(options.Type)}}\"\r\n             [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value\"\r\n             (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" [readonly]=\"options.IsReadonly\"\r\n             #userinput>\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\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\" [dir]=\"textDir\"\r\n         *ngIf=\"(TextBoxFormControl.invalid && TextBoxFormControl.touched)\">\r\n      {{getErrorValidation(TextBoxFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">{{resetError()}}</div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
 class MapAutocompleteDTO {
     constructor() {
@@ -5381,10 +5729,16 @@ class MapAutoCompleteComponent {
                         place.address_components.forEach(( /**
                                 * @param {?} value
                                 * @return {?}
-                                *//**
+                                */ /**
+                        * @param {?} value
+                        * @return {?}
+                        *//**
                                 * @param {?} value
                                 * @return {?}
-                                */ value => {
+                                */ /**
+                        * @param {?} value
+                        * @return {?}
+                        */ value => {
                             if (value.types.indexOf('street_number') > -1) {
                                 germanAddress["streetNumber"] = value.short_name;
                             }
@@ -5570,29 +5924,25 @@ class MapAutoCompleteComponent {
     }
 }
 MapAutoCompleteComponent.controlContainerstatic = null;
-MapAutoCompleteComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-MapAutoComplete',
-                template: "\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-->\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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <input class=\"form-control{{options.ExtraClasses}}\"\r\n             [value]=\"MapAutoCompleteModel.Text\"\r\n             [address]=\"MapAutoCompleteModel.Text\"\r\n             value=\"{{MapAutoCompleteModel.Text}}\"\r\n             aria-describedby=\"email-error\"\r\n             aria-invalid=\"true\"\r\n             [class.is-invalid]=\"MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" (keyup)=\"GermanAddressMapped($event)\"\r\n             matGoogleMapsAutocomplete #search (onAutocompleteSelected)=\"AutocompleteSelected($event)\"\r\n             (onLocationSelected)=\"LocationSelected($event)\" (onGermanAddressMapped)=\"GermanAddressMapped($event)\" />\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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\"\r\n         *ngIf=\"(MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched)\">\r\n      {{getErrorValidation(MapAutoCompleteFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">{{resetError()}} </div>\r\n</div>\r\n"
-            },] }
-];
-MapAutoCompleteComponent.ctorParameters = () => [
-    { type: MapsAPILoader },
-    { type: NgZone },
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: BBSFTranslateService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-MapAutoCompleteComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }],
-    searchElementRef: [{ type: ViewChild, args: ["search", { static: false },] }]
-};
+MapAutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MapAutoCompleteComponent, deps: [{ token: i1$2.MapsAPILoader }, { token: i0.NgZone }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.BBSFTranslateService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+MapAutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MapAutoCompleteComponent, selector: "BBSF-MapAutoComplete", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "\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-->\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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <input class=\"form-control{{options.ExtraClasses}}\"\r\n             [value]=\"MapAutoCompleteModel.Text\"\r\n             [address]=\"MapAutoCompleteModel.Text\"\r\n             value=\"{{MapAutoCompleteModel.Text}}\"\r\n             aria-describedby=\"email-error\"\r\n             aria-invalid=\"true\"\r\n             [class.is-invalid]=\"MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" (keyup)=\"GermanAddressMapped($event)\"\r\n             matGoogleMapsAutocomplete #search (onAutocompleteSelected)=\"AutocompleteSelected($event)\"\r\n             (onLocationSelected)=\"LocationSelected($event)\" (onGermanAddressMapped)=\"GermanAddressMapped($event)\" />\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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\"\r\n         *ngIf=\"(MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched)\">\r\n      {{getErrorValidation(MapAutoCompleteFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">{{resetError()}} </div>\r\n</div>\r\n", directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$5.MatGoogleMapsAutocompleteDirective, selector: "[matGoogleMapsAutocomplete]", inputs: ["autoCompleteOptions", "value", "address", "country", "placeIdOnly", "strictBounds", "types", "type"], outputs: ["onChange", "onAutocompleteSelected", "onGermanAddressMapped", "onLocationSelected"], exportAs: ["matGoogleMapsAutocomplete"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MapAutoCompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-MapAutoComplete', template: "\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-->\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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <input class=\"form-control{{options.ExtraClasses}}\"\r\n             [value]=\"MapAutoCompleteModel.Text\"\r\n             [address]=\"MapAutoCompleteModel.Text\"\r\n             value=\"{{MapAutoCompleteModel.Text}}\"\r\n             aria-describedby=\"email-error\"\r\n             aria-invalid=\"true\"\r\n             [class.is-invalid]=\"MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" (keyup)=\"GermanAddressMapped($event)\"\r\n             matGoogleMapsAutocomplete #search (onAutocompleteSelected)=\"AutocompleteSelected($event)\"\r\n             (onLocationSelected)=\"LocationSelected($event)\" (onGermanAddressMapped)=\"GermanAddressMapped($event)\" />\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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\"\r\n         *ngIf=\"(MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched)\">\r\n      {{getErrorValidation(MapAutoCompleteFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">{{resetError()}} </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$2.MapsAPILoader }, { type: i0.NgZone }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.BBSFTranslateService }, { type: i3.ControlValidationService }, { type: GlobalSettings }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }], searchElementRef: [{
+                type: ViewChild,
+                args: ["search", { static: false }]
+            }] } });
 
 var CalendarView;
 (function (CalendarView) {
@@ -5742,27 +6092,23 @@ class CalendarComponent {
     }
 }
 CalendarComponent.controlContainerstatic = null;
-CalendarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-Calendar',
-                template: "\r\n<div class=\"b-control b-calendar\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n    <!-- <full-calendar #calendar\r\n                   [defaultDate]=\"options.DefaultDate\"\r\n                   [defaultView]=\"DefaultView\"\r\n                   [header]=\"{\r\n                    left: 'prev,next today',\r\n                    center: 'title',\r\n                    right: CalendarViews\r\n                  }\"\r\n                   ngDefaultControl\r\n                   formControlName=\"{{options.Name}}\"\r\n                   [locales]=\"locales\"\r\n                   [plugins]=\"calendarPlugins\"\r\n                   [weekends]=\"calendarWeekends\"\r\n                   [events]=\"calendarEvents\"\r\n                   (dateClick)=\"OnDayClickFunction($event)\"\r\n                   (eventClick)=\"OnEventClickFunction($event)\"\r\n                   id=\"{{options.Name}}\"></full-calendar> -->\r\n\r\n\r\n                   <full-calendar\r\n                   *ngIf=\"options.CalendarVisible\"\r\n                   [options]='calendarOptions'\r\n                   id=\"{{options.Name}}\"\r\n                   ngDefaultControl\r\n                   formControlName=\"{{options.Name}}\"\r\n                 ></full-calendar>\r\n\r\n  </div>\r\n</div>\r\n",
-                styles: [""]
-            },] }
-];
-CalendarComponent.ctorParameters = () => [
-    { type: ErrorMassageValidation },
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: BBSFTranslateService },
-    { type: ControlValidationService }
-];
-CalendarComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    calendarComponent: [{ type: ViewChild, args: ['calendar', { static: false },] }]
-};
+CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CalendarComponent, deps: [{ token: ErrorMassageValidation }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.BBSFTranslateService }, { token: i3.ControlValidationService }], target: i0.ɵɵFactoryTarget.Component });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CalendarComponent, selector: "BBSF-Calendar", inputs: { group: "group", options: "options" }, viewQueries: [{ propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "\r\n<div class=\"b-control b-calendar\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n    <!-- <full-calendar #calendar\r\n                   [defaultDate]=\"options.DefaultDate\"\r\n                   [defaultView]=\"DefaultView\"\r\n                   [header]=\"{\r\n                    left: 'prev,next today',\r\n                    center: 'title',\r\n                    right: CalendarViews\r\n                  }\"\r\n                   ngDefaultControl\r\n                   formControlName=\"{{options.Name}}\"\r\n                   [locales]=\"locales\"\r\n                   [plugins]=\"calendarPlugins\"\r\n                   [weekends]=\"calendarWeekends\"\r\n                   [events]=\"calendarEvents\"\r\n                   (dateClick)=\"OnDayClickFunction($event)\"\r\n                   (eventClick)=\"OnEventClickFunction($event)\"\r\n                   id=\"{{options.Name}}\"></full-calendar> -->\r\n\r\n\r\n                   <full-calendar\r\n                   *ngIf=\"options.CalendarVisible\"\r\n                   [options]='calendarOptions'\r\n                   id=\"{{options.Name}}\"\r\n                   ngDefaultControl\r\n                   formControlName=\"{{options.Name}}\"\r\n                 ></full-calendar>\r\n\r\n  </div>\r\n</div>\r\n", styles: [""], components: [{ type: i5$2.FullCalendarComponent, selector: "full-calendar", inputs: ["options", "deepChangeDetection"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-Calendar', template: "\r\n<div class=\"b-control b-calendar\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n    <!-- <full-calendar #calendar\r\n                   [defaultDate]=\"options.DefaultDate\"\r\n                   [defaultView]=\"DefaultView\"\r\n                   [header]=\"{\r\n                    left: 'prev,next today',\r\n                    center: 'title',\r\n                    right: CalendarViews\r\n                  }\"\r\n                   ngDefaultControl\r\n                   formControlName=\"{{options.Name}}\"\r\n                   [locales]=\"locales\"\r\n                   [plugins]=\"calendarPlugins\"\r\n                   [weekends]=\"calendarWeekends\"\r\n                   [events]=\"calendarEvents\"\r\n                   (dateClick)=\"OnDayClickFunction($event)\"\r\n                   (eventClick)=\"OnEventClickFunction($event)\"\r\n                   id=\"{{options.Name}}\"></full-calendar> -->\r\n\r\n\r\n                   <full-calendar\r\n                   *ngIf=\"options.CalendarVisible\"\r\n                   [options]='calendarOptions'\r\n                   id=\"{{options.Name}}\"\r\n                   ngDefaultControl\r\n                   formControlName=\"{{options.Name}}\"\r\n                 ></full-calendar>\r\n\r\n  </div>\r\n</div>\r\n", styles: [""] }]
+        }], ctorParameters: function () {
+        return [{ type: ErrorMassageValidation }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.BBSFTranslateService }, { type: i3.ControlValidationService }];
+    }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], calendarComponent: [{
+                type: ViewChild,
+                args: ['calendar', { static: false }]
+            }] } });
 
 var PagingActionMode;
 (function (PagingActionMode) {
@@ -5850,25 +6196,16 @@ class FormComponent {
         return result;
     }
 }
-FormComponent.decorators = [
-    { type: Component, args: [{
-                // tslint:disable-next-line: component-selector
-                selector: 'BBSF-Form',
-                template: "<form id=\"{{fromName}}\" [FormGroup]=\"options.FormGroup\" (ngSubmit)=\"submit()\" > \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>"
-            },] }
-];
-FormComponent.ctorParameters = () => [
-    { type: ControlUtility },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: NgbModal },
-    { type: NgbActiveModal },
-    { type: Router }
-];
-FormComponent.propDecorators = {
-    OnChange: [{ type: Output }],
-    options: [{ type: Input }]
-};
+FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormComponent, deps: [{ token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: i3$1.NgbModal }, { token: i3$1.NgbActiveModal }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FormComponent, selector: "BBSF-Form", inputs: { options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<form id=\"{{fromName}}\" [FormGroup]=\"options.FormGroup\" (ngSubmit)=\"submit()\" > \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>", directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-Form', template: "<form id=\"{{fromName}}\" [FormGroup]=\"options.FormGroup\" (ngSubmit)=\"submit()\" > \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>" }]
+        }], ctorParameters: function () { return [{ type: ControlUtility }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: i3$1.NgbModal }, { type: i3$1.NgbActiveModal }, { type: i3$2.Router }]; }, propDecorators: { OnChange: [{
+                type: Output
+            }], options: [{
+                type: Input
+            }] } });
 
 class ConfirmationModalComponent {
     constructor(utilityService, modalService, router) {
@@ -5986,152 +6323,33 @@ class ConfirmationModalComponent {
         this.utilityService.stopBlockUI();
     }
 }
-ConfirmationModalComponent.decorators = [
-    { type: Component, args: [{
-                template: "",
-                selector: 'BBSF-ConfirmationModal'
-            },] }
-];
-ConfirmationModalComponent.ctorParameters = () => [
-    { type: UtilityService },
-    { type: NgbModal },
-    { type: Router }
-];
-ConfirmationModalComponent.propDecorators = {
-    options: [{ type: Input }],
-    confirmationModal: [{ type: ViewChild, args: ['confirmationModal', { static: false },] }]
-};
+ConfirmationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ConfirmationModalComponent, deps: [{ token: i3.UtilityService }, { token: i3$1.NgbModal }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+ConfirmationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ConfirmationModalComponent, selector: "BBSF-ConfirmationModal", inputs: { options: "options" }, viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true }], ngImport: i0, template: "" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-ConfirmationModal', template: "" }]
+        }], ctorParameters: function () { return [{ type: i3.UtilityService }, { type: i3$1.NgbModal }, { type: i3$2.Router }]; }, propDecorators: { options: [{
+                type: Input
+            }], confirmationModal: [{
+                type: ViewChild,
+                args: ['confirmationModal', { static: false }]
+            }] } });
 
 class NgTemplateNameDirective {
     constructor(template) {
         this.template = template;
     }
 }
-NgTemplateNameDirective.decorators = [
-    { type: Directive, args: [{
-                selector: 'ng-template[name]'
-            },] }
-];
-NgTemplateNameDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-NgTemplateNameDirective.propDecorators = {
-    name: [{ type: Input }]
-};
-
-class RepeaterComponent {
-    constructor() {
-        this.templateRefs = [];
-        this.items = [];
-        this.originalItems = [];
-        this.repeaterContext = { index: 0, delete: null, elements: null };
-    }
-    ngOnInit() {
-        this.currentTemplate = this.initialTemplate;
-        this.repeaterGroup = new FormGroup({});
-        this.group.addControl(this.options.Name, this.repeaterGroup);
-        if (this.options.RepeaterValue.length > 0) {
-            this.originalItems = this.options.RepeaterValue;
-            for (let index = 0; index < this.options.RepeaterValue.length; index++) {
-                this.items.push(index + 1);
-            }
-        }
-        else
-            for (let index = 0; index < this.options.MinRequiredItems; index++) {
-                this.items.push(index);
-            }
-        this.repeaterGroup.valueChanges.subscribe((res) => {
-            let result = [];
-            let rowNumber = [];
-            let addItems = [];
-            for (const key in this.repeaterGroup.controls) {
-                if (Object.prototype.hasOwnProperty.call(this.repeaterGroup.controls, key)) {
-                    const keySplitArr = key.split('.');
-                    let item = {
-                        [keySplitArr[1]]: { [keySplitArr[0]]: this.group.controls[this.options.Name].value[key] }
-                    };
-                    addItems.push(item);
-                    if (!rowNumber.includes(keySplitArr[1]))
-                        rowNumber.push(keySplitArr[1]);
-                }
-            }
-            for (let index = 0; index < rowNumber.length; index++) {
-                const row = rowNumber[index];
-                let addObject = {};
-                let filteredElements = addItems.filter(item => item[row]);
-                for (let index = 0; index < filteredElements.length; index++) {
-                    const filteredElement = filteredElements[index];
-                    for (const key in filteredElement) {
-                        if (Object.prototype.hasOwnProperty.call(filteredElement, key)) {
-                            const element = filteredElement[key];
-                            for (const key in element) {
-                                if (Object.prototype.hasOwnProperty.call(element, key)) {
-                                    const value = element[key];
-                                    addObject[key] = value;
-                                }
-                            }
-                        }
-                    }
-                }
-                result.push(addObject);
-            }
-            this.options.RepeaterValue = result;
-        });
-    }
-    deleteItem(Index) {
-        if (this.items.length == this.options.MinRequiredItems && this.options.IsRequired)
-            return;
-        let deletedControls = [];
-        let controlNames = this.options.RepeaterStructure.map(e => e.ControlOptions.Name);
-        for (const key in this.repeaterGroup.controls) {
-            if (Object.prototype.hasOwnProperty.call(this.repeaterGroup.controls, key)) {
-                for (let index = 0; index < controlNames.length; index++) {
-                    const element = controlNames[index];
-                    const keySplitArr = key.split('.');
-                    if (keySplitArr[0] + keySplitArr[1] == `${element}${Index}`) {
-                        const element = this.repeaterGroup.controls[key];
-                        deletedControls.push({ [key]: element });
-                    }
-                }
-            }
-        }
-        for (let index = 0; index < deletedControls.length; index++) {
-            const element = deletedControls[index];
-            for (const key in element) {
-                if (Object.prototype.hasOwnProperty.call(element, key)) {
-                    this.repeaterGroup.removeControl(key);
-                }
-            }
-        }
-        this.items = this.items.filter((res) => res != this.items[Index]);
-    }
-    addItem() {
-        this.items.push(this.items.length);
-    }
-    ngAfterViewInit() {
-        let templateRefs = this._templates["_results"].map((item) => item["template"]);
-        this.templateRefs = templateRefs;
-        this.repeaterContext.elements = this.templateRefs;
-        this.repeaterContext.delete = this.delete;
-    }
-    setCurrentIndex(i) {
-        this.repeaterContext.index = i;
-    }
-}
-RepeaterComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-repeater',
-                template: "<ng-container *ngFor='let item of items ; index as i'>\r\n  {{setCurrentIndex(i)}}\r\n  <ng-container *ngTemplateOutlet=\"currentTemplate; context: repeaterContext\">\r\n  </ng-container>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngTemplateOutlet=\"add\">\r\n</ng-container>\r\n\r\n<ng-template *ngFor=\"let RepeaterField of options.RepeaterStructure ; index as i\" name=\"R{{i}}\" let-Index=\"itemIndex\"\r\n             let-control=\"controlIndex\">\r\n  <repeater-field-builder *ngIf=\"RepeaterField\" [RepeaterField]=\"RepeaterField\" [itemNumber]=\"Index\"\r\n                          [itemsValue]=\"originalItems\" [controlNumber]=\"control\" [group]=\"repeaterGroup\">\r\n  </repeater-field-builder>\r\n</ng-template>\r\n\r\n<ng-template #delete let-item=\"itemIndex\">\r\n  <button class=\"{{options.DeleteButtonExtraClasses}}\" type=\"button\" (click)=\"deleteItem(item)\"\r\n          [disabled]=\"items.length ==options.MinRequiredItems&&options.IsRequired\">\r\n    <span [innerHTML]=\"options.DeleteButtonText\"></span>\r\n  </button>\r\n</ng-template>\r\n\r\n<ng-template #add>\r\n  <button class=\"{{options.AddButtonExtraClasses}}\" type=\"button\" (click)=\"addItem()\">\r\n    <span [innerHTML]=\"options.AddButtonText\"></span>\r\n  </button>\r\n</ng-template>\r\n\r\n"
-            },] }
-];
-RepeaterComponent.ctorParameters = () => [];
-RepeaterComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    initialTemplate: [{ type: Input }],
-    _templates: [{ type: ViewChildren, args: [NgTemplateNameDirective,] }],
-    delete: [{ type: ViewChild, args: ['delete', { static: false },] }]
-};
+NgTemplateNameDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NgTemplateNameDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NgTemplateNameDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: NgTemplateNameDirective, selector: "ng-template[name]", inputs: { name: "name" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NgTemplateNameDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[name]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { name: [{
+                type: Input
+            }] } });
 
 var PermissionSets;
 (function (PermissionSets) {
@@ -6337,12 +6555,11 @@ class RenderComponentService {
         }
     }
 }
-RenderComponentService.decorators = [
-    { type: Injectable }
-];
-RenderComponentService.ctorParameters = () => [
-    { type: ComponentFactoryResolver }
-];
+RenderComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RenderComponentService, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
+RenderComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RenderComponentService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RenderComponentService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }]; } });
 
 class RepeaterFieldBuilderComponent {
     constructor(renderComponentService, TextControlHost) {
@@ -7027,526 +7244,316 @@ class RepeaterFieldBuilderComponent {
                         this.renderComponentService.renderDynamicComponent(this.Item, ToggleslideComponent, this.group, Boolean);
                         break;
                     //Location
-                    case DataType.Location:
-                        let Location = new MapAutoCompleteOptions();
-                        Location.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
-                        Location.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
-                        Location.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
-                        Location.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
-                        Location.ViewType = this.RepeaterField.ControlOptions.ViewType;
-                        Location.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
-                        Location.Value = value;
-                        this.renderComponentService.renderDynamicComponent(this.Item, MapAutoCompleteComponent, this.group, Location);
-                        break;
-                    default:
-                        break;
-                }
-            }
-    }
-}
-RepeaterFieldBuilderComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'repeater-field-builder',
-                template: "<ng-container #Item></ng-container>\r\n"
-            },] }
-];
-RepeaterFieldBuilderComponent.ctorParameters = () => [
-    { type: RenderComponentService },
-    { type: FormGroupDirective }
-];
-RepeaterFieldBuilderComponent.propDecorators = {
-    Item: [{ type: ViewChild, args: ["Item", { read: ViewContainerRef },] }],
-    group: [{ type: Input }],
-    itemNumber: [{ type: Input }],
-    controlNumber: [{ type: Input }],
-    RepeaterField: [{ type: Input }],
-    itemsValue: [{ type: Input }]
-};
-
-class RepeaterItemFieldComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-RepeaterItemFieldComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'repeater-item-field',
-                template: "<ng-container *ngFor=\"let template of templates ; index as i\">\r\n    <ng-container *ngIf=\"i==filedIndex\" [ngTemplateOutlet]=\"template\"  [ngTemplateOutletContext] ={itemIndex:itemIndex,controlIndex:i}></ng-container>\r\n  </ng-container>\r\n"
-            },] }
-];
-RepeaterItemFieldComponent.ctorParameters = () => [];
-RepeaterItemFieldComponent.propDecorators = {
-    templates: [{ type: Input }],
-    filedIndex: [{ type: Input }],
-    itemIndex: [{ type: Input }]
-};
-
-class RepeaterTableComponent {
-    constructor(utilityService) {
-        this.utilityService = utilityService;
-        this.items = [];
-        this.originalItems = [];
-    }
-    ngOnInit() {
-        this.repeaterGroup = new FormGroup({});
-        this.group.addControl(this.options.Name, this.repeaterGroup);
-        if (this.options.RepeaterValue.length > 0) {
-            this.originalItems = this.options.RepeaterValue;
-            for (let index = 0; index < this.options.RepeaterValue.length; index++) {
-                this.items.push(index);
-            }
-        }
-        else
-            for (let index = 0; index < this.options.MinRequiredItems; index++) {
-                this.items.push(index);
-            }
-        this.repeaterGroup.valueChanges.subscribe((res) => {
-            let result = [];
-            let rowNumber = [];
-            let addItems = [];
-            for (const key in this.repeaterGroup.controls) {
-                if (Object.prototype.hasOwnProperty.call(this.repeaterGroup.controls, key)) {
-                    const keySplitArr = key.split('.');
-                    let item = {
-                        [keySplitArr[1]]: { [keySplitArr[0]]: this.group.controls[this.options.Name].value[key] }
-                    };
-                    addItems.push(item);
-                    if (!rowNumber.includes(keySplitArr[1]))
-                        rowNumber.push(keySplitArr[1]);
-                }
-            }
-            for (let index = 0; index < rowNumber.length; index++) {
-                const row = rowNumber[index];
-                let addObject = {};
-                let filteredElements = addItems.filter(item => item[row]);
-                for (let index = 0; index < filteredElements.length; index++) {
-                    const filteredElement = filteredElements[index];
-                    for (const key in filteredElement) {
-                        if (Object.prototype.hasOwnProperty.call(filteredElement, key)) {
-                            const element = filteredElement[key];
-                            for (const key in element) {
-                                if (Object.prototype.hasOwnProperty.call(element, key)) {
-                                    const value = element[key];
-                                    addObject[key] = value;
-                                }
-                            }
-                        }
-                    }
-                }
-                result.push(addObject);
-            }
-            this.options.RepeaterValue = result;
-        });
-    }
-    deleteItem(Index) {
-        if (this.items.length == this.options.MinRequiredItems && this.options.IsRequired)
-            return;
-        let deletedControls = [];
-        let controlNames = this.options.RepeaterStructure.map(e => e.ControlOptions.Name);
-        for (const key in this.repeaterGroup.controls) {
-            if (Object.prototype.hasOwnProperty.call(this.repeaterGroup.controls, key)) {
-                for (let index = 0; index < controlNames.length; index++) {
-                    const element = controlNames[index];
-                    const keySplitArr = key.split('.');
-                    if (keySplitArr[0] + keySplitArr[1] == `${element}${Index}`) {
-                        const element = this.repeaterGroup.controls[key];
-                        deletedControls.push({ [key]: element });
-                    }
-                }
-            }
-        }
-        for (let index = 0; index < deletedControls.length; index++) {
-            const element = deletedControls[index];
-            for (const key in element) {
-                if (Object.prototype.hasOwnProperty.call(element, key)) {
-                    this.repeaterGroup.removeControl(key);
+                    case DataType.Location:
+                        let Location = new MapAutoCompleteOptions();
+                        Location.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                        Location.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                        Location.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                        Location.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                        Location.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                        Location.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                        Location.Value = value;
+                        this.renderComponentService.renderDynamicComponent(this.Item, MapAutoCompleteComponent, this.group, Location);
+                        break;
+                    default:
+                        break;
                 }
             }
-        }
-        this.items = this.items.filter((res) => res != this.items[Index]);
-    }
-    addItem() {
-        if (this.items.length == 0)
-            this.items.push(this.items.length);
-        else
-            this.items.push(this.items[this.items.length - 1] + 1);
-    }
-}
-RepeaterTableComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-repeater-table',
-                template: "<div class=\"form-group bbsf-control bbsf-repeater\">\r\n  <!--table-->\r\n  <div class=\"table-responsive\">\r\n    <table class=\"bbsf-repeater-table table  {{options.RepeaterTableExtraClasses}}\">\r\n      <thead class=\"table-head\">\r\n        <tr class=\"{{options.RepeaterTableRowExtraClasses}}\">\r\n          <th *ngFor=\"let item of options.RepeaterStructure\" [hidden]=\"item.IsHiddenInput\">{{item.HeaderTitle}}</th>\r\n          <th *ngIf=\"!options.DisableDeleteButton\" class=\"text-center\">{{utilityService.getResourceValue(options.ActionLabelKey)}}</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody class=\"table-body\">\r\n        <tr *ngFor=\"let item of items  ; index as i\">\r\n          <td *ngFor=\"let RepeaterField of options.RepeaterStructure  ; index as r\" [hidden]=\"RepeaterField.IsHiddenInput\">\r\n            <repeater-field-builder [RepeaterField]=\"RepeaterField\" [itemNumber]=\"i\"\r\n                                    [itemsValue]=\"originalItems\" [controlNumber]=\"r\" [group]=\"repeaterGroup\">\r\n            </repeater-field-builder>\r\n          </td>\r\n          <td *ngIf=\"!options.DisableDeleteButton\" class=\"td-delete\">\r\n            <button class=\"{{options.DeleteButtonExtraClasses}} btn btn-icon btn-sm btn-danger\" type=\"button\" (click)=\"deleteItem(i)\"\r\n                    [disabled]=\"(items.length ==options.MinRequiredItems&&options.IsRequired)\">\r\n              <span [innerHTML]=\"options.DeleteButtonText\"></span>\r\n            </button>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n  <!--add button-->\r\n  <div class=\"repeater-add-btn\" *ngIf=\"!options.DisableAddButton\">\r\n    <button class=\"{{options.AddButtonExtraClasses}} btn btn-sm btn-brand\" type=\"button\" (click)=\"addItem()\">\r\n      <span [innerHTML]=\"options.AddButtonText\"></span>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n\r\n"
-            },] }
-];
-RepeaterTableComponent.ctorParameters = () => [
-    { type: UtilityService }
-];
-RepeaterTableComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }]
-};
-
-class BBSFDateTimePipe {
-    constructor(datePipe) {
-        this.datePipe = datePipe;
-    }
-    transform(value) {
-        let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy hh:mm a');
-        return latest_date;
-    }
-}
-BBSFDateTimePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'bbsfDateTime'
-            },] }
-];
-BBSFDateTimePipe.ctorParameters = () => [
-    { type: DatePipe }
-];
-
-class BBSFDatePipe {
-    constructor(datePipe) {
-        this.datePipe = datePipe;
-    }
-    transform(value) {
-        let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy');
-        return latest_date;
     }
 }
-BBSFDatePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'bbsfDate'
-            },] }
-];
-BBSFDatePipe.ctorParameters = () => [
-    { type: DatePipe }
-];
-
-var TagInputView;
-(function (TagInputView) {
-    TagInputView[TagInputView["WithImage"] = 1] = "WithImage";
-    TagInputView[TagInputView["WithoutImage"] = 2] = "WithoutImage";
-    TagInputView[TagInputView["WithInitial"] = 3] = "WithInitial";
-})(TagInputView || (TagInputView = {}));
+RepeaterFieldBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RepeaterFieldBuilderComponent, deps: [{ token: RenderComponentService }, { token: i2.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
+RepeaterFieldBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RepeaterFieldBuilderComponent, selector: "repeater-field-builder", inputs: { group: "group", itemNumber: "itemNumber", controlNumber: "controlNumber", RepeaterField: "RepeaterField", itemsValue: "itemsValue" }, viewQueries: [{ propertyName: "Item", first: true, predicate: ["Item"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container #Item></ng-container>\r\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RepeaterFieldBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'repeater-field-builder', template: "<ng-container #Item></ng-container>\r\n" }]
+        }], ctorParameters: function () { return [{ type: RenderComponentService }, { type: i2.FormGroupDirective }]; }, propDecorators: { Item: [{
+                type: ViewChild,
+                args: ["Item", { read: ViewContainerRef }]
+            }], group: [{
+                type: Input
+            }], itemNumber: [{
+                type: Input
+            }], controlNumber: [{
+                type: Input
+            }], RepeaterField: [{
+                type: Input
+            }], itemsValue: [{
+                type: Input
+            }] } });
 
-const noop = () => { };
-const ɵ0$1 = noop;
-const TAGS_INPUT_TEMPLATE = `
-
-<div class="tags-input">
-<span class="tags-input__tag label label-primary badge badge-primary" *ngFor="let tag of tags">
-
-<span [ngSwitch]="ViewMode">
-<span *ngSwitchCase="tagInputViewEnum.WithImage">
-<img style="border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;"
-src="{{(tag.imageURL?tag.imageURL:defaultImageURL)}}" />
-</span>
-
-<span *ngSwitchCase="tagInputViewEnum.WithInitial">
-<div class="user-initials">{{calculateInitials(tag.name)}}</div>
-</span>
-
-<span *ngSwitchDefault>
-</span>
-
-</span>
-  {{tag[displayField]}}
-  <span *ngIf="isDeleteable(tag)" role="button" class="tags-input__tag-remove-btn" (click)="removeTag(tag)"
-    (touch)="removeTag(tag)">
-    <span aria-hidden="true">&times;</span>
-    <span class="sr-only">Close</span>
-  </span>
-</span>
-
-<input *ngIf="options === null; else withTypeahead" class="tags-input__input-field" type="text"
-  [placeholder]="getPlaceholder()" name="tags" (keyup.enter)="addTag(tagInput)"
-  (keydown.backspace)="removeLastTag(tagInput)" [disabled]="!canAddTags || maximumOfTagsReached()"
-  [hidden]="!canAddTags || maximumOfTagsReached()" #tagInput />
-
-<ng-template #withTypeahead>
-  <span [ngSwitch]="ViewMode">
-    <span *ngSwitchCase="tagInputViewEnum.WithImage">
-      <input *ngIf="(options !== null)" class="tags-input__input-field" type="text" [placeholder]="getPlaceholder()"
-        name="tags" (keydown.backspace)="removeLastTag(tagInput)" [(ngModel)]="selected" [typeahead]="options"
-        [typeaheadOptionField]="displayField" (typeaheadOnSelect)="typeaheadOnSelect($event)"
-        (typeaheadNoResults)="typeaheadOnNoMatch($event)" [typeaheadMinLength]="minLengthBeforeOptions"
-        [typeaheadScrollable]="scrollableOptions" [typeaheadLatinize]="true"
-        [typeaheadItemTemplate]="itemTemplateWithImage" [typeaheadOptionsInScrollableView]="scrollableOptionsInView"
-        [disabled]="!canAddTags || maximumOfTagsReached()" [hidden]="!canAddTags || maximumOfTagsReached()"
-        (blur)="onBlur()"  autocomplete="off"
-        #tagInput />
-    </span>
-
-    <span *ngSwitchCase="tagInputViewEnum.WithoutImage">
-      <input *ngIf="(options !== null)" class="tags-input__input-field" type="text" [placeholder]="getPlaceholder()"
-        name="tags" (keydown.backspace)="removeLastTag(tagInput)" [(ngModel)]="selected" [typeahead]="options"
-        [typeaheadOptionField]="displayField" (typeaheadOnSelect)="typeaheadOnSelect($event)"
-        (typeaheadNoResults)="typeaheadOnNoMatch($event)" [typeaheadMinLength]="minLengthBeforeOptions"
-        [typeaheadScrollable]="scrollableOptions" [typeaheadLatinize]="true"
-        [typeaheadItemTemplate]="itemTemplateWithoutImage"
-        [typeaheadOptionsInScrollableView]="scrollableOptionsInView"
-        [disabled]="!canAddTags || maximumOfTagsReached()" [hidden]="!canAddTags || maximumOfTagsReached()"
-        (blur)="onBlur()" autocomplete="off"
-        #tagInput />
-    </span>
-
-    <span *ngSwitchCase="tagInputViewEnum.WithInitial">
-      <input *ngIf="(options !== null)" class="tags-input__input-field" type="text" [placeholder]="getPlaceholder()"
-        name="tags" (keydown.backspace)="removeLastTag(tagInput)" [(ngModel)]="selected" [typeahead]="options"
-        [typeaheadOptionField]="displayField" (typeaheadOnSelect)="typeaheadOnSelect($event)"
-        (typeaheadNoResults)="typeaheadOnNoMatch($event)" [typeaheadMinLength]="minLengthBeforeOptions"
-        [typeaheadScrollable]="scrollableOptions" [typeaheadLatinize]="true"
-        [typeaheadItemTemplate]="itemTemplateWithoutInitial"
-        [typeaheadOptionsInScrollableView]="scrollableOptionsInView"
-        [disabled]="!canAddTags || maximumOfTagsReached()" [hidden]="!canAddTags || maximumOfTagsReached()"
-        (blur)="onBlur()" autocomplete="off"
-        #tagInput />
-    </span>
-
-    <span *ngSwitchDefault>
-      <input *ngIf="(options !== null)" class="tags-input__input-field" type="text" [placeholder]="getPlaceholder()"
-        name="tags" (keydown.backspace)="removeLastTag(tagInput)" [(ngModel)]="selected" [typeahead]="options"
-        [typeaheadOptionField]="displayField" (typeaheadOnSelect)="typeaheadOnSelect($event)"
-        (typeaheadNoResults)="typeaheadOnNoMatch($event)" [typeaheadMinLength]="minLengthBeforeOptions"
-        [typeaheadScrollable]="scrollableOptions" [typeaheadLatinize]="true"
-        [typeaheadItemTemplate]="itemTemplateWithoutImage"
-        [typeaheadOptionsInScrollableView]="scrollableOptionsInView"
-        [disabled]="!canAddTags || maximumOfTagsReached()" [hidden]="!canAddTags || maximumOfTagsReached()"
-        (blur)="onBlur()" autocomplete="off"
-        #tagInput />
-    </span>
-
-  </span>
-
-</ng-template>
-
-<ng-template #itemTemplateWithImage let-model="item" let-index="index">
-  <img
-    style="border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;"
-    src="{{(model.imageURL?model.imageURL:defaultImageURL)}}" />
-  <div>
-    <a [innerHTML]="model.name"></a>
-    <p *ngIf="showDescription">
-      {{model.description}}
-    </p>
-  </div>
-</ng-template>
-
-<ng-template #itemTemplateWithoutImage let-model="item" let-index="index">
-  <div>
-    <a [innerHTML]="model.name"></a>
-    <p *ngIf="showDescription">
-      {{model.description}}
-    </p>
-  </div>
-</ng-template>
-
-<ng-template #itemTemplateWithoutInitial let-model="item" let-index="index">
-  <div class="user-image">
-    <div class="user-initials">{{calculateInitials(model.name)}}</div>
-  </div>
-  <div>
-    <a [innerHTML]="model.name"></a>
-    <p *ngIf="showDescription">
-      {{model.description}}
-    </p>
-  </div>
-</ng-template>
-</div>
-`;
-const TAGS_INPUT_STYLE = `
-    :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: 0.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;
-    }
-`;
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => BTagsInputComponent),
-    multi: true
-};
-class BTagsInputComponent {
+class RepeaterComponent {
     constructor() {
-        this.selected = '';
-        this.tags = [];
-        this.onTouchedCallback = noop;
-        this.onChangeCallback = noop;
-        this.tagInputViewEnum = TagInputView;
-        this.removeLastOnBackspace = false;
-        this.canDeleteTags = true;
-        this.canAddTags = true;
-        this.ViewMode = TagInputView.WithoutImage;
-        this.placeholder = '';
-        this.showDescription = true;
-        this.options = null;
-        this.defaultImageURL = null;
-        this.displayField = 'name';
-        this.minLengthBeforeOptions = 1;
-        this.scrollableOptions = false;
-        this.scrollableOptionsInView = 5;
-        this.onTagsChanged = new EventEmitter();
-        this.onMaxTagsReached = new EventEmitter();
-        this.onNoOptionsMatch = new EventEmitter();
-        this.onBlurInput = new EventEmitter();
-        // (keydown.Tab) = "onTab($event)"
-        //onTab(event) {
-        //  this.onTabInput.emit();
-        //  event.preventDefault();
-        //  event.stopPropagation();
-        //}
-    }
-    getPlaceholder() {
-        if (this.tags && this.tags.length > 0) {
-            return '';
-        }
-        return this.placeholder;
+        this.templateRefs = [];
+        this.items = [];
+        this.originalItems = [];
+        this.repeaterContext = { index: 0, delete: null, elements: null };
     }
-    tagsChanged(type, tag) {
-        this.onChangeCallback(this.tags);
-        this.onTagsChanged.emit({
-            change: type,
-            tag: tag
-        });
-        if (this.maximumOfTagsReached()) {
-            this.onMaxTagsReached.emit();
+    ngOnInit() {
+        this.currentTemplate = this.initialTemplate;
+        this.repeaterGroup = new FormGroup({});
+        this.group.addControl(this.options.Name, this.repeaterGroup);
+        if (this.options.RepeaterValue.length > 0) {
+            this.originalItems = this.options.RepeaterValue;
+            for (let index = 0; index < this.options.RepeaterValue.length; index++) {
+                this.items.push(index + 1);
+            }
         }
+        else
+            for (let index = 0; index < this.options.MinRequiredItems; index++) {
+                this.items.push(index);
+            }
+        this.repeaterGroup.valueChanges.subscribe((res) => {
+            let result = [];
+            let rowNumber = [];
+            let addItems = [];
+            for (const key in this.repeaterGroup.controls) {
+                if (Object.prototype.hasOwnProperty.call(this.repeaterGroup.controls, key)) {
+                    const keySplitArr = key.split('.');
+                    let item = {
+                        [keySplitArr[1]]: { [keySplitArr[0]]: this.group.controls[this.options.Name].value[key] }
+                    };
+                    addItems.push(item);
+                    if (!rowNumber.includes(keySplitArr[1]))
+                        rowNumber.push(keySplitArr[1]);
+                }
+            }
+            for (let index = 0; index < rowNumber.length; index++) {
+                const row = rowNumber[index];
+                let addObject = {};
+                let filteredElements = addItems.filter(item => item[row]);
+                for (let index = 0; index < filteredElements.length; index++) {
+                    const filteredElement = filteredElements[index];
+                    for (const key in filteredElement) {
+                        if (Object.prototype.hasOwnProperty.call(filteredElement, key)) {
+                            const element = filteredElement[key];
+                            for (const key in element) {
+                                if (Object.prototype.hasOwnProperty.call(element, key)) {
+                                    const value = element[key];
+                                    addObject[key] = value;
+                                }
+                            }
+                        }
+                    }
+                }
+                result.push(addObject);
+            }
+            this.options.RepeaterValue = result;
+        });
     }
-    removeLastTag(tagInput) {
-        var _a;
-        if (!this.removeLastOnBackspace || !((_a = this.tags) === null || _a === void 0 ? void 0 : _a.length)) {
+    deleteItem(Index) {
+        if (this.items.length == this.options.MinRequiredItems && this.options.IsRequired)
             return;
+        let deletedControls = [];
+        let controlNames = this.options.RepeaterStructure.map(e => e.ControlOptions.Name);
+        for (const key in this.repeaterGroup.controls) {
+            if (Object.prototype.hasOwnProperty.call(this.repeaterGroup.controls, key)) {
+                for (let index = 0; index < controlNames.length; index++) {
+                    const element = controlNames[index];
+                    const keySplitArr = key.split('.');
+                    if (keySplitArr[0] + keySplitArr[1] == `${element}${Index}`) {
+                        const element = this.repeaterGroup.controls[key];
+                        deletedControls.push({ [key]: element });
+                    }
+                }
+            }
         }
-        if (tagInput.value === '') {
-            this.removeTag(this.tags[this.tags.length - 1]);
+        for (let index = 0; index < deletedControls.length; index++) {
+            const element = deletedControls[index];
+            for (const key in element) {
+                if (Object.prototype.hasOwnProperty.call(element, key)) {
+                    this.repeaterGroup.removeControl(key);
+                }
+            }
         }
+        this.items = this.items.filter((res) => res != this.items[Index]);
     }
-    addTag(tagInput) {
-        if (tagInput.value.trim() !== '') {
-            let tag = {
-                [this.displayField]: tagInput.value
-            };
-            this.addPredefinedTag(tag);
-        }
-        tagInput.value = '';
+    addItem() {
+        this.items.push(this.items.length);
     }
-    addPredefinedTag(tag) {
-        if (this.tags == null)
-            this.tags = [];
-        if (!this.maximumOfTagsReached()) {
-            this.tags.push(tag);
-            this.tagsChanged('add', tag);
-        }
+    ngAfterViewInit() {
+        let templateRefs = this._templates["_results"].map((item) => item["template"]);
+        this.templateRefs = templateRefs;
+        this.repeaterContext.elements = this.templateRefs;
+        this.repeaterContext.delete = this.delete;
     }
-    removeTag(tagToRemove) {
-        if (!this.isDeleteable(tagToRemove)) {
-            return;
-        }
-        this.tags = this.tags.filter(tag => tagToRemove !== tag);
-        this.tagsChanged('remove', tagToRemove);
+    setCurrentIndex(i) {
+        this.repeaterContext.index = i;
     }
-    maximumOfTagsReached() {
-        return typeof this.maxTags !== 'undefined' && this.tags && this.tags.length >= this.maxTags;
+}
+RepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RepeaterComponent, selector: "BBSF-repeater", inputs: { group: "group", options: "options", initialTemplate: "initialTemplate" }, viewQueries: [{ propertyName: "delete", first: true, predicate: ["delete"], descendants: true }, { propertyName: "_templates", predicate: NgTemplateNameDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngFor='let item of items ; index as i'>\r\n  {{setCurrentIndex(i)}}\r\n  <ng-container *ngTemplateOutlet=\"currentTemplate; context: repeaterContext\">\r\n  </ng-container>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngTemplateOutlet=\"add\">\r\n</ng-container>\r\n\r\n<ng-template *ngFor=\"let RepeaterField of options.RepeaterStructure ; index as i\" name=\"R{{i}}\" let-Index=\"itemIndex\"\r\n             let-control=\"controlIndex\">\r\n  <repeater-field-builder *ngIf=\"RepeaterField\" [RepeaterField]=\"RepeaterField\" [itemNumber]=\"Index\"\r\n                          [itemsValue]=\"originalItems\" [controlNumber]=\"control\" [group]=\"repeaterGroup\">\r\n  </repeater-field-builder>\r\n</ng-template>\r\n\r\n<ng-template #delete let-item=\"itemIndex\">\r\n  <button class=\"{{options.DeleteButtonExtraClasses}}\" type=\"button\" (click)=\"deleteItem(item)\"\r\n          [disabled]=\"items.length ==options.MinRequiredItems&&options.IsRequired\">\r\n    <span [innerHTML]=\"options.DeleteButtonText\"></span>\r\n  </button>\r\n</ng-template>\r\n\r\n<ng-template #add>\r\n  <button class=\"{{options.AddButtonExtraClasses}}\" type=\"button\" (click)=\"addItem()\">\r\n    <span [innerHTML]=\"options.AddButtonText\"></span>\r\n  </button>\r\n</ng-template>\r\n\r\n", components: [{ type: RepeaterFieldBuilderComponent, selector: "repeater-field-builder", inputs: ["group", "itemNumber", "controlNumber", "RepeaterField", "itemsValue"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: NgTemplateNameDirective, selector: "ng-template[name]", inputs: ["name"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RepeaterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-repeater', template: "<ng-container *ngFor='let item of items ; index as i'>\r\n  {{setCurrentIndex(i)}}\r\n  <ng-container *ngTemplateOutlet=\"currentTemplate; context: repeaterContext\">\r\n  </ng-container>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngTemplateOutlet=\"add\">\r\n</ng-container>\r\n\r\n<ng-template *ngFor=\"let RepeaterField of options.RepeaterStructure ; index as i\" name=\"R{{i}}\" let-Index=\"itemIndex\"\r\n             let-control=\"controlIndex\">\r\n  <repeater-field-builder *ngIf=\"RepeaterField\" [RepeaterField]=\"RepeaterField\" [itemNumber]=\"Index\"\r\n                          [itemsValue]=\"originalItems\" [controlNumber]=\"control\" [group]=\"repeaterGroup\">\r\n  </repeater-field-builder>\r\n</ng-template>\r\n\r\n<ng-template #delete let-item=\"itemIndex\">\r\n  <button class=\"{{options.DeleteButtonExtraClasses}}\" type=\"button\" (click)=\"deleteItem(item)\"\r\n          [disabled]=\"items.length ==options.MinRequiredItems&&options.IsRequired\">\r\n    <span [innerHTML]=\"options.DeleteButtonText\"></span>\r\n  </button>\r\n</ng-template>\r\n\r\n<ng-template #add>\r\n  <button class=\"{{options.AddButtonExtraClasses}}\" type=\"button\" (click)=\"addItem()\">\r\n    <span [innerHTML]=\"options.AddButtonText\"></span>\r\n  </button>\r\n</ng-template>\r\n\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], initialTemplate: [{
+                type: Input
+            }], _templates: [{
+                type: ViewChildren,
+                args: [NgTemplateNameDirective]
+            }], delete: [{
+                type: ViewChild,
+                args: ['delete', { static: false }]
+            }] } });
+
+class RepeaterItemFieldComponent {
+    constructor() { }
+    ngOnInit() {
     }
-    isDeleteable(tag) {
-        if (typeof tag.deleteable !== "undefined" && !tag.deleteable) {
-            return false;
-        }
-        return this.canDeleteTags;
+}
+RepeaterItemFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RepeaterItemFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RepeaterItemFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RepeaterItemFieldComponent, selector: "repeater-item-field", inputs: { templates: "templates", filedIndex: "filedIndex", itemIndex: "itemIndex" }, ngImport: i0, template: "<ng-container *ngFor=\"let template of templates ; index as i\">\r\n    <ng-container *ngIf=\"i==filedIndex\" [ngTemplateOutlet]=\"template\"  [ngTemplateOutletContext] ={itemIndex:itemIndex,controlIndex:i}></ng-container>\r\n  </ng-container>\r\n", directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RepeaterItemFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'repeater-item-field', template: "<ng-container *ngFor=\"let template of templates ; index as i\">\r\n    <ng-container *ngIf=\"i==filedIndex\" [ngTemplateOutlet]=\"template\"  [ngTemplateOutletContext] ={itemIndex:itemIndex,controlIndex:i}></ng-container>\r\n  </ng-container>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { templates: [{
+                type: Input
+            }], filedIndex: [{
+                type: Input
+            }], itemIndex: [{
+                type: Input
+            }] } });
+
+class RepeaterTableComponent {
+    constructor(utilityService) {
+        this.utilityService = utilityService;
+        this.items = [];
+        this.originalItems = [];
     }
-    typeaheadOnSelect(e) {
-        if (typeof e.item === 'string') {
-            this.addPredefinedTag({
-                [this.displayField]: e.value
-            });
-        }
-        else {
-            this.addPredefinedTag(e.item);
+    ngOnInit() {
+        this.repeaterGroup = new FormGroup({});
+        this.group.addControl(this.options.Name, this.repeaterGroup);
+        if (this.options.RepeaterValue.length > 0) {
+            this.originalItems = this.options.RepeaterValue;
+            for (let index = 0; index < this.options.RepeaterValue.length; index++) {
+                this.items.push(index);
+            }
         }
-        this.selected = '';
+        else
+            for (let index = 0; index < this.options.MinRequiredItems; index++) {
+                this.items.push(index);
+            }
+        this.repeaterGroup.valueChanges.subscribe((res) => {
+            let result = [];
+            let rowNumber = [];
+            let addItems = [];
+            for (const key in this.repeaterGroup.controls) {
+                if (Object.prototype.hasOwnProperty.call(this.repeaterGroup.controls, key)) {
+                    const keySplitArr = key.split('.');
+                    let item = {
+                        [keySplitArr[1]]: { [keySplitArr[0]]: this.group.controls[this.options.Name].value[key] }
+                    };
+                    addItems.push(item);
+                    if (!rowNumber.includes(keySplitArr[1]))
+                        rowNumber.push(keySplitArr[1]);
+                }
+            }
+            for (let index = 0; index < rowNumber.length; index++) {
+                const row = rowNumber[index];
+                let addObject = {};
+                let filteredElements = addItems.filter(item => item[row]);
+                for (let index = 0; index < filteredElements.length; index++) {
+                    const filteredElement = filteredElements[index];
+                    for (const key in filteredElement) {
+                        if (Object.prototype.hasOwnProperty.call(filteredElement, key)) {
+                            const element = filteredElement[key];
+                            for (const key in element) {
+                                if (Object.prototype.hasOwnProperty.call(element, key)) {
+                                    const value = element[key];
+                                    addObject[key] = value;
+                                }
+                            }
+                        }
+                    }
+                }
+                result.push(addObject);
+            }
+            this.options.RepeaterValue = result;
+        });
     }
-    typeaheadOnNoMatch(e) {
-        if (typeof this.onNoOptionsMatch !== 'undefined') {
-            this.onNoOptionsMatch.emit(e);
+    deleteItem(Index) {
+        if (this.items.length == this.options.MinRequiredItems && this.options.IsRequired)
+            return;
+        let deletedControls = [];
+        let controlNames = this.options.RepeaterStructure.map(e => e.ControlOptions.Name);
+        for (const key in this.repeaterGroup.controls) {
+            if (Object.prototype.hasOwnProperty.call(this.repeaterGroup.controls, key)) {
+                for (let index = 0; index < controlNames.length; index++) {
+                    const element = controlNames[index];
+                    const keySplitArr = key.split('.');
+                    if (keySplitArr[0] + keySplitArr[1] == `${element}${Index}`) {
+                        const element = this.repeaterGroup.controls[key];
+                        deletedControls.push({ [key]: element });
+                    }
+                }
+            }
         }
-    }
-    writeValue(value) {
-        if (value !== this.tags) {
-            this.tags = value;
+        for (let index = 0; index < deletedControls.length; index++) {
+            const element = deletedControls[index];
+            for (const key in element) {
+                if (Object.prototype.hasOwnProperty.call(element, key)) {
+                    this.repeaterGroup.removeControl(key);
+                }
+            }
         }
+        this.items = this.items.filter((res) => res != this.items[Index]);
     }
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
+    addItem() {
+        if (this.items.length == 0)
+            this.items.push(this.items.length);
+        else
+            this.items.push(this.items[this.items.length - 1] + 1);
     }
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
+}
+RepeaterTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RepeaterTableComponent, deps: [{ token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Component });
+RepeaterTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RepeaterTableComponent, selector: "BBSF-repeater-table", inputs: { group: "group", options: "options" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-repeater\">\r\n  <!--table-->\r\n  <div class=\"table-responsive\">\r\n    <table class=\"bbsf-repeater-table table  {{options.RepeaterTableExtraClasses}}\">\r\n      <thead class=\"table-head\">\r\n        <tr class=\"{{options.RepeaterTableRowExtraClasses}}\">\r\n          <th *ngFor=\"let item of options.RepeaterStructure\" [hidden]=\"item.IsHiddenInput\">{{item.HeaderTitle}}</th>\r\n          <th *ngIf=\"!options.DisableDeleteButton\" class=\"text-center\">{{utilityService.getResourceValue(options.ActionLabelKey)}}</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody class=\"table-body\">\r\n        <tr *ngFor=\"let item of items  ; index as i\">\r\n          <td *ngFor=\"let RepeaterField of options.RepeaterStructure  ; index as r\" [hidden]=\"RepeaterField.IsHiddenInput\">\r\n            <repeater-field-builder [RepeaterField]=\"RepeaterField\" [itemNumber]=\"i\"\r\n                                    [itemsValue]=\"originalItems\" [controlNumber]=\"r\" [group]=\"repeaterGroup\">\r\n            </repeater-field-builder>\r\n          </td>\r\n          <td *ngIf=\"!options.DisableDeleteButton\" class=\"td-delete\">\r\n            <button class=\"{{options.DeleteButtonExtraClasses}} btn btn-icon btn-sm btn-danger\" type=\"button\" (click)=\"deleteItem(i)\"\r\n                    [disabled]=\"(items.length ==options.MinRequiredItems&&options.IsRequired)\">\r\n              <span [innerHTML]=\"options.DeleteButtonText\"></span>\r\n            </button>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n  <!--add button-->\r\n  <div class=\"repeater-add-btn\" *ngIf=\"!options.DisableAddButton\">\r\n    <button class=\"{{options.AddButtonExtraClasses}} btn btn-sm btn-brand\" type=\"button\" (click)=\"addItem()\">\r\n      <span [innerHTML]=\"options.AddButtonText\"></span>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n\r\n", components: [{ type: RepeaterFieldBuilderComponent, selector: "repeater-field-builder", inputs: ["group", "itemNumber", "controlNumber", "RepeaterField", "itemsValue"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RepeaterTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-repeater-table', template: "<div class=\"form-group bbsf-control bbsf-repeater\">\r\n  <!--table-->\r\n  <div class=\"table-responsive\">\r\n    <table class=\"bbsf-repeater-table table  {{options.RepeaterTableExtraClasses}}\">\r\n      <thead class=\"table-head\">\r\n        <tr class=\"{{options.RepeaterTableRowExtraClasses}}\">\r\n          <th *ngFor=\"let item of options.RepeaterStructure\" [hidden]=\"item.IsHiddenInput\">{{item.HeaderTitle}}</th>\r\n          <th *ngIf=\"!options.DisableDeleteButton\" class=\"text-center\">{{utilityService.getResourceValue(options.ActionLabelKey)}}</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody class=\"table-body\">\r\n        <tr *ngFor=\"let item of items  ; index as i\">\r\n          <td *ngFor=\"let RepeaterField of options.RepeaterStructure  ; index as r\" [hidden]=\"RepeaterField.IsHiddenInput\">\r\n            <repeater-field-builder [RepeaterField]=\"RepeaterField\" [itemNumber]=\"i\"\r\n                                    [itemsValue]=\"originalItems\" [controlNumber]=\"r\" [group]=\"repeaterGroup\">\r\n            </repeater-field-builder>\r\n          </td>\r\n          <td *ngIf=\"!options.DisableDeleteButton\" class=\"td-delete\">\r\n            <button class=\"{{options.DeleteButtonExtraClasses}} btn btn-icon btn-sm btn-danger\" type=\"button\" (click)=\"deleteItem(i)\"\r\n                    [disabled]=\"(items.length ==options.MinRequiredItems&&options.IsRequired)\">\r\n              <span [innerHTML]=\"options.DeleteButtonText\"></span>\r\n            </button>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n  <!--add button-->\r\n  <div class=\"repeater-add-btn\" *ngIf=\"!options.DisableAddButton\">\r\n    <button class=\"{{options.AddButtonExtraClasses}} btn btn-sm btn-brand\" type=\"button\" (click)=\"addItem()\">\r\n      <span [innerHTML]=\"options.AddButtonText\"></span>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n\r\n" }]
+        }], ctorParameters: function () { return [{ type: i3.UtilityService }]; }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+class BBSFDateTimePipe {
+    constructor(datePipe) {
+        this.datePipe = datePipe;
     }
-    calculateInitials(name) {
-        var fullName = name.split(' ');
-        var initials = "";
-        if (fullName.length > 1)
-            initials = fullName.shift().charAt(0) + fullName.pop().charAt(0);
-        else
-            initials = fullName.shift().charAt(0);
-        return initials.toUpperCase();
+    transform(value) {
+        let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy hh:mm a');
+        return latest_date;
     }
-    onBlur() {
-        this.onBlurInput.emit();
+}
+BBSFDateTimePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BBSFDateTimePipe, deps: [{ token: i6.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe });
+BBSFDateTimePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BBSFDateTimePipe, name: "bbsfDateTime" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BBSFDateTimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'bbsfDateTime'
+                }]
+        }], ctorParameters: function () { return [{ type: i6.DatePipe }]; } });
+
+class BBSFDatePipe {
+    constructor(datePipe) {
+        this.datePipe = datePipe;
+    }
+    transform(value) {
+        let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy');
+        return latest_date;
     }
 }
-BTagsInputComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'b-tags-input',
-                template: TAGS_INPUT_TEMPLATE,
-                providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
-                styles: [TAGS_INPUT_STYLE]
-            },] }
-];
-BTagsInputComponent.propDecorators = {
-    maxTags: [{ type: Input }],
-    removeLastOnBackspace: [{ type: Input }],
-    canDeleteTags: [{ type: Input }],
-    canAddTags: [{ type: Input }],
-    ViewMode: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    showDescription: [{ type: Input }],
-    options: [{ type: Input }],
-    defaultImageURL: [{ type: Input }],
-    minLengthBeforeOptions: [{ type: Input }],
-    scrollableOptions: [{ type: Input }],
-    scrollableOptionsInView: [{ type: Input }],
-    onTagsChanged: [{ type: Output }],
-    onMaxTagsReached: [{ type: Output }],
-    onNoOptionsMatch: [{ type: Output }],
-    onBlurInput: [{ type: Output }]
-};
+BBSFDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BBSFDatePipe, deps: [{ token: i6.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe });
+BBSFDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BBSFDatePipe, name: "bbsfDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BBSFDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'bbsfDate'
+                }]
+        }], ctorParameters: function () { return [{ type: i6.DatePipe }]; } });
 
 class RecaptchaModel {
     constructor() {
@@ -7594,6 +7601,7 @@ class RecaptchaComponent {
         };
     }
     ngOnInit() {
+        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.loadImage();
         if (!this.options.ViewType)
@@ -7661,25 +7669,18 @@ class RecaptchaComponent {
         this.OnChange.emit(this.ReCaptchaFormControl.value);
     }
 }
-RecaptchaComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-Recaptcha',
-                template: "<div class=\"form-group bbsf-control bbsf-recaptcha\" [formGroup]=\"group\">\r\n  <img class=\"h-100 w-100\" [src]=\"image\" />\r\n  <button class=\"btn btn-sm btn-icon\" type=\"button\" ngbTooltip=\"{{UtilityService.getResourceValue('ReloadCaptcha')}}\"\r\n          (click)=\"loadImage()\">\r\n    <i class=\"fas fa-refresh\"></i>\r\n  </button>\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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <input class=\"form-control {{options.ExtraClasses}}\"\r\n             dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n             aria-describedby=\"email-error\" value=\"{{options.Value.Text}}\"\r\n             aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"text\"\r\n             [class.is-invalid]=\"ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"onTextChange($event)\" [readonly]=\"options.IsReadonly\" />\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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\"\r\n         dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n         *ngIf=\"(ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched)\">\r\n      {{getErrorValidation(ReCaptchaFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n"
-            },] }
-];
-RecaptchaComponent.ctorParameters = () => [
-    { type: ControlUtility },
-    { type: RequestHandlerService },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-RecaptchaComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
+RecaptchaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecaptchaComponent, deps: [{ token: ControlUtility }, { token: i3.RequestHandlerService }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component });
+RecaptchaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RecaptchaComponent, selector: "BBSF-Recaptcha", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-recaptcha\" [formGroup]=\"group\">\r\n  <img class=\"h-100 w-100\" [src]=\"image\" />\r\n  <button class=\"btn btn-sm btn-icon\" type=\"button\" ngbTooltip=\"{{UtilityService.getResourceValue('ReloadCaptcha')}}\"\r\n          (click)=\"loadImage()\">\r\n    <i class=\"fas fa-refresh\"></i>\r\n  </button>\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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <input class=\"form-control {{options.ExtraClasses}}\"\r\n      [dir]=\"textDir\"\r\n             aria-describedby=\"email-error\" value=\"{{options.Value.Text}}\"\r\n             aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"text\"\r\n             [class.is-invalid]=\"ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"onTextChange($event)\" [readonly]=\"options.IsReadonly\" />\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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\"\r\n    [dir]=\"textDir\"\r\n         *ngIf=\"(ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched)\">\r\n      {{getErrorValidation(ReCaptchaFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n", directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }, { type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i7$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "keyvalue": i6.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecaptchaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-Recaptcha', template: "<div class=\"form-group bbsf-control bbsf-recaptcha\" [formGroup]=\"group\">\r\n  <img class=\"h-100 w-100\" [src]=\"image\" />\r\n  <button class=\"btn btn-sm btn-icon\" type=\"button\" ngbTooltip=\"{{UtilityService.getResourceValue('ReloadCaptcha')}}\"\r\n          (click)=\"loadImage()\">\r\n    <i class=\"fas fa-refresh\"></i>\r\n  </button>\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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <input class=\"form-control {{options.ExtraClasses}}\"\r\n      [dir]=\"textDir\"\r\n             aria-describedby=\"email-error\" value=\"{{options.Value.Text}}\"\r\n             aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"text\"\r\n             [class.is-invalid]=\"ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"onTextChange($event)\" [readonly]=\"options.IsReadonly\" />\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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\"\r\n    [dir]=\"textDir\"\r\n         *ngIf=\"(ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched)\">\r\n      {{getErrorValidation(ReCaptchaFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: ControlUtility }, { type: i3.RequestHandlerService }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }]; }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
 
 class PageHeaderComponentComponent {
     constructor(router, utilityService) {
@@ -7694,20 +7695,16 @@ class PageHeaderComponentComponent {
         this.EN = this.utilityService.isCurrentLanguageEnglish();
     }
 }
-PageHeaderComponentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'bbsf-page-header-component',
-                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) : 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():\"\"' class=\"btn btn-light btn-sm subheader-btn export-btn\" *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\" [placement]=\"EN ? 'bottom-right' : 'bottom-left'\" \r\n             #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\"\r\n                        (click)=\"options.Filters.RestFunction(dropdown)\">\r\n                  {{translate(\"Reset\")}}\r\n                </button>\r\n                <button class=\"btn btn-brand btn-sm\"\r\n                        (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\" (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\" (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\" (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-->\r\n"
-            },] }
-];
-PageHeaderComponentComponent.ctorParameters = () => [
-    { type: Router },
-    { type: UtilityService }
-];
-PageHeaderComponentComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }]
-};
+PageHeaderComponentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PageHeaderComponentComponent, deps: [{ token: i3$2.Router }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Component });
+PageHeaderComponentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PageHeaderComponentComponent, 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) : 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():\"\"' class=\"btn btn-light btn-sm subheader-btn export-btn\" *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\" [placement]=\"EN ? 'bottom-right' : 'bottom-left'\" \r\n             #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\"\r\n                        (click)=\"options.Filters.RestFunction(dropdown)\">\r\n                  {{translate(\"Reset\")}}\r\n                </button>\r\n                <button class=\"btn btn-brand btn-sm\"\r\n                        (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\" (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\" (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\" (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-->\r\n", components: [{ type: TextboxComponent, selector: "BBSF-TextBox", inputs: ["group", "options"], outputs: ["OnChange"] }, { type: DropdownListComponent, selector: "BBSF-DropdownList", inputs: ["group", "options"], outputs: ["OnChange", "onClear"] }, { type: DateInputComponent, selector: "BBSF-DateTimePicker", inputs: ["group", "options"], outputs: ["OnChange"] }, { type: ToggleslideComponent, selector: "BBSF-Toggleslide", inputs: ["group", "options"], outputs: ["OnChange"] }, { type: TagsInputComponent, selector: "BBSF-TagsInput", inputs: ["group", "options"], outputs: ["OnChange"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i3$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["routerLink", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i6$2.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "forceEvalStyles", "evalScripts", "inlineSVG", "setSVGAttributes", "removeSVGAttributes", "fallbackImgUrl", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { type: i3$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["open", "placement", "container", "autoClose", "display", "dropdownClass"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i3$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i3$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PageHeaderComponentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bbsf-page-header-component', 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) : 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():\"\"' class=\"btn btn-light btn-sm subheader-btn export-btn\" *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\" [placement]=\"EN ? 'bottom-right' : 'bottom-left'\" \r\n             #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\"\r\n                        (click)=\"options.Filters.RestFunction(dropdown)\">\r\n                  {{translate(\"Reset\")}}\r\n                </button>\r\n                <button class=\"btn btn-brand btn-sm\"\r\n                        (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\" (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\" (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\" (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-->\r\n" }]
+        }], ctorParameters: function () { return [{ type: i3$2.Router }, { type: i3.UtilityService }]; }, propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
 
 let options;
 let AppInjector;
@@ -7717,7 +7714,6 @@ FullCalendarModule.registerPlugins([
     listPlugin,
     interactionPlugin
 ]);
-const ɵ0 = ControlUtility.getLocal();
 class BBSFControlsModule {
     constructor(injector, translate) {
         this.injector = injector;
@@ -7725,151 +7721,299 @@ class BBSFControlsModule {
         AppInjector = this.injector;
     }
 }
-BBSFControlsModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    DateInputComponent,
-                    FileUploadComponent,
-                    MultiLingualTextBoxComponent,
-                    TextboxComponent,
-                    TextAreaComponent,
-                    MultiLingualTextAreaComponent,
-                    CheckBoxComponent,
-                    DropdownListComponent,
-                    PhoneComponent,
-                    ToggleslideComponent,
-                    HtmlEditorComponent,
-                    MultiLingualHtmlEditorComponent,
-                    // MultiLingualHtmlEditorComponent,
-                    ImageUploaderComponent,
-                    ProfileImageUploaderComponent,
-                    CalendarComponent,
-                    MapAutoCompleteComponent,
-                    AutocompleteTextBoxComponent,
-                    TagsInputComponent,
-                    PagingComponent,
-                    JwPaginationComponent,
-                    RadioButtonComponent,
-                    FormComponent,
-                    ConfirmationModalComponent,
-                    RepeaterComponent,
-                    RepeaterFieldBuilderComponent,
-                    NgTemplateNameDirective,
-                    RepeaterItemFieldComponent,
-                    RepeaterTableComponent,
-                    BBSFDateTimePipe,
-                    BBSFDatePipe,
-                    BTagsInputComponent,
-                    RecaptchaComponent,
-                    PageHeaderComponentComponent
-                ],
-                imports: [
-                    CommonModule,
-                    InfiniteScrollModule,
-                    NgSelectModule,
-                    NgxTagsInputModule,
-                    NgxTypeaheadModule,
-                    AgmCoreModule.forRoot({
-                        // &language=${UtilityService.CurrentLanguage}
-                        apiKey: environment$1.BBSF_GoogleMapKey,
-                        libraries: ['places'],
-                    }),
-                    MatGoogleMapsAutocompleteModule,
-                    FullCalendarModule,
-                    AngularCropperjsModule,
-                    ImageCropperModule,
-                    NgbModule,
-                    NgxDropzoneModule,
-                    FileUploadModule,
-                    TooltipModule,
-                    NgxMaskModule.forRoot(),
-                    NgxSummernoteModule,
-                    MatSlideToggleModule,
-                    NgxIntlTelInputModule,
-                    AngularMultiSelectModule,
-                    NgMultiSelectDropDownModule.forRoot(),
-                    OwlDateTimeModule,
-                    OwlNativeDateTimeModule,
-                    CommonModule,
-                    BlockUIModule.forRoot(),
-                    ReactiveFormsModule,
-                    HttpModule,
-                    RouterModule,
-                    ToastrModule.forRoot(),
-                    HttpClientModule,
-                    NgxPermissionsModule.forRoot(),
-                    OverlayModule,
-                    StoreDevtoolsModule.instrument(),
-                    FormsModule,
-                    NgxIntlTelInputModule,
-                    NgxIntlTelInputModule,
-                    BsDatepickerModule.forRoot(),
-                    FullCalendarModule,
-                    TypeaheadModule.forRoot(),
-                    AngularEditorModule,
-                    AutocompleteLibModule,
-                    BBSFUtilitiesModule,
-                    InlineSVGModule.forRoot(),
-                    SweetAlert2Module,
-                ],
-                providers: [
-                    ErrorMassageValidation,
-                    ControlUtility,
-                    OnPagingFiltersChangeService,
-                    TranslateService,
-                    FormGroupDirective,
-                    NgbModal,
-                    NgbActiveModal,
-                    DatePipe,
-                    BBSFDateTimePipe,
-                    BBSFDatePipe,
-                    RenderComponentService,
-                    { provide: OWL_DATE_TIME_LOCALE, useValue: ɵ0 },
-                ],
-                schemas: [
-                    NO_ERRORS_SCHEMA
-                ],
-                exports: [
-                    DateInputComponent,
-                    FileUploadComponent,
-                    MultiLingualTextBoxComponent,
-                    TextboxComponent,
-                    TextAreaComponent,
-                    MultiLingualTextAreaComponent,
-                    CheckBoxComponent,
-                    DropdownListComponent,
-                    PhoneComponent,
-                    ToggleslideComponent,
-                    HtmlEditorComponent,
-                    MultiLingualHtmlEditorComponent,
-                    ImageUploaderComponent,
-                    ProfileImageUploaderComponent,
-                    CalendarComponent,
-                    MapAutoCompleteComponent,
-                    AutocompleteTextBoxComponent,
-                    TagsInputComponent,
-                    PagingComponent,
-                    JwPaginationComponent,
-                    RadioButtonComponent,
-                    FormComponent,
-                    PagingComponent,
-                    ConfirmationModalComponent,
-                    RepeaterComponent,
-                    RepeaterFieldBuilderComponent,
-                    NgTemplateNameDirective,
-                    RepeaterItemFieldComponent,
-                    RepeaterTableComponent,
-                    BBSFDateTimePipe,
-                    BBSFDatePipe,
-                    RecaptchaComponent,
-                    PageHeaderComponentComponent
-                ]
-            },] }
-];
-BBSFControlsModule.ctorParameters = () => [
-    { type: Injector },
-    { type: TranslateService }
-];
+BBSFControlsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BBSFControlsModule, deps: [{ token: i0.Injector }, { token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.NgModule });
+BBSFControlsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BBSFControlsModule, declarations: [DateInputComponent,
+        FileUploadComponent,
+        MultiLingualTextBoxComponent,
+        TextboxComponent,
+        TextAreaComponent,
+        MultiLingualTextAreaComponent,
+        CheckBoxComponent,
+        DropdownListComponent,
+        PhoneComponent,
+        ToggleslideComponent,
+        HtmlEditorComponent,
+        MultiLingualHtmlEditorComponent,
+        // MultiLingualHtmlEditorComponent,
+        ImageUploaderComponent,
+        ProfileImageUploaderComponent,
+        CalendarComponent,
+        MapAutoCompleteComponent,
+        AutocompleteTextBoxComponent,
+        TagsInputComponent,
+        PagingComponent,
+        JwPaginationComponent,
+        RadioButtonComponent,
+        FormComponent,
+        ConfirmationModalComponent,
+        RepeaterComponent,
+        RepeaterFieldBuilderComponent,
+        NgTemplateNameDirective,
+        RepeaterItemFieldComponent,
+        RepeaterTableComponent,
+        BBSFDateTimePipe,
+        BBSFDatePipe,
+        BTagsInputComponent,
+        RecaptchaComponent,
+        PageHeaderComponentComponent], imports: [CommonModule,
+        InfiniteScrollModule,
+        NgSelectModule,
+        NgxTagsInputModule,
+        NgxTypeaheadModule, i1$2.AgmCoreModule, MatGoogleMapsAutocompleteModule,
+        FullCalendarModule,
+        AngularCropperjsModule,
+        ImageCropperModule,
+        NgbModule,
+        NgxDropzoneModule,
+        FileUploadModule,
+        TooltipModule, i7$4.NgxMaskModule, NgxSummernoteModule,
+        MatSlideToggleModule,
+        NgxIntlTelInputModule,
+        AngularMultiSelectModule, i4$1.NgMultiSelectDropDownModule, OwlDateTimeModule,
+        OwlNativeDateTimeModule,
+        CommonModule, i5$3.BlockUIModule, ReactiveFormsModule,
+        HttpModule,
+        RouterModule, i6$5.ToastrModule, HttpClientModule, i7$6.NgxPermissionsModule, OverlayModule, i8$2.StoreDevtoolsModule, FormsModule,
+        NgxIntlTelInputModule,
+        NgxIntlTelInputModule, i9.BsDatepickerModule, FullCalendarModule, i4.TypeaheadModule, AngularEditorModule,
+        AutocompleteLibModule,
+        BBSFUtilitiesModule, i6$2.InlineSVGModule, SweetAlert2Module], exports: [DateInputComponent,
+        FileUploadComponent,
+        MultiLingualTextBoxComponent,
+        TextboxComponent,
+        TextAreaComponent,
+        MultiLingualTextAreaComponent,
+        CheckBoxComponent,
+        DropdownListComponent,
+        PhoneComponent,
+        ToggleslideComponent,
+        HtmlEditorComponent,
+        MultiLingualHtmlEditorComponent,
+        ImageUploaderComponent,
+        ProfileImageUploaderComponent,
+        CalendarComponent,
+        MapAutoCompleteComponent,
+        AutocompleteTextBoxComponent,
+        TagsInputComponent,
+        PagingComponent,
+        JwPaginationComponent,
+        RadioButtonComponent,
+        FormComponent,
+        PagingComponent,
+        ConfirmationModalComponent,
+        RepeaterComponent,
+        RepeaterFieldBuilderComponent,
+        NgTemplateNameDirective,
+        RepeaterItemFieldComponent,
+        RepeaterTableComponent,
+        BBSFDateTimePipe,
+        BBSFDatePipe,
+        RecaptchaComponent,
+        PageHeaderComponentComponent] });
+BBSFControlsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BBSFControlsModule, providers: [
+        ErrorMassageValidation,
+        ControlUtility,
+        OnPagingFiltersChangeService,
+        TranslateService,
+        FormGroupDirective,
+        NgbModal,
+        NgbActiveModal,
+        DatePipe,
+        BBSFDateTimePipe,
+        BBSFDatePipe,
+        RenderComponentService,
+        { provide: OWL_DATE_TIME_LOCALE, useValue: ControlUtility.getLocal() },
+    ], imports: [[
+            CommonModule,
+            InfiniteScrollModule,
+            NgSelectModule,
+            NgxTagsInputModule,
+            NgxTypeaheadModule,
+            AgmCoreModule.forRoot({
+                // &language=${UtilityService.CurrentLanguage}
+                apiKey: environment$1.BBSF_GoogleMapKey,
+                libraries: ['places'],
+            }),
+            MatGoogleMapsAutocompleteModule,
+            FullCalendarModule,
+            AngularCropperjsModule,
+            ImageCropperModule,
+            NgbModule,
+            NgxDropzoneModule,
+            FileUploadModule,
+            TooltipModule,
+            NgxMaskModule.forRoot(),
+            NgxSummernoteModule,
+            MatSlideToggleModule,
+            NgxIntlTelInputModule,
+            AngularMultiSelectModule,
+            NgMultiSelectDropDownModule.forRoot(),
+            OwlDateTimeModule,
+            OwlNativeDateTimeModule,
+            CommonModule,
+            BlockUIModule.forRoot(),
+            ReactiveFormsModule,
+            HttpModule,
+            RouterModule,
+            ToastrModule.forRoot(),
+            HttpClientModule,
+            NgxPermissionsModule.forRoot(),
+            OverlayModule,
+            StoreDevtoolsModule.instrument(),
+            FormsModule,
+            NgxIntlTelInputModule,
+            NgxIntlTelInputModule,
+            BsDatepickerModule.forRoot(),
+            FullCalendarModule,
+            TypeaheadModule.forRoot(),
+            AngularEditorModule,
+            AutocompleteLibModule,
+            BBSFUtilitiesModule,
+            InlineSVGModule.forRoot(),
+            SweetAlert2Module,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BBSFControlsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DateInputComponent,
+                        FileUploadComponent,
+                        MultiLingualTextBoxComponent,
+                        TextboxComponent,
+                        TextAreaComponent,
+                        MultiLingualTextAreaComponent,
+                        CheckBoxComponent,
+                        DropdownListComponent,
+                        PhoneComponent,
+                        ToggleslideComponent,
+                        HtmlEditorComponent,
+                        MultiLingualHtmlEditorComponent,
+                        // MultiLingualHtmlEditorComponent,
+                        ImageUploaderComponent,
+                        ProfileImageUploaderComponent,
+                        CalendarComponent,
+                        MapAutoCompleteComponent,
+                        AutocompleteTextBoxComponent,
+                        TagsInputComponent,
+                        PagingComponent,
+                        JwPaginationComponent,
+                        RadioButtonComponent,
+                        FormComponent,
+                        ConfirmationModalComponent,
+                        RepeaterComponent,
+                        RepeaterFieldBuilderComponent,
+                        NgTemplateNameDirective,
+                        RepeaterItemFieldComponent,
+                        RepeaterTableComponent,
+                        BBSFDateTimePipe,
+                        BBSFDatePipe,
+                        BTagsInputComponent,
+                        RecaptchaComponent,
+                        PageHeaderComponentComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        InfiniteScrollModule,
+                        NgSelectModule,
+                        NgxTagsInputModule,
+                        NgxTypeaheadModule,
+                        AgmCoreModule.forRoot({
+                            // &language=${UtilityService.CurrentLanguage}
+                            apiKey: environment$1.BBSF_GoogleMapKey,
+                            libraries: ['places'],
+                        }),
+                        MatGoogleMapsAutocompleteModule,
+                        FullCalendarModule,
+                        AngularCropperjsModule,
+                        ImageCropperModule,
+                        NgbModule,
+                        NgxDropzoneModule,
+                        FileUploadModule,
+                        TooltipModule,
+                        NgxMaskModule.forRoot(),
+                        NgxSummernoteModule,
+                        MatSlideToggleModule,
+                        NgxIntlTelInputModule,
+                        AngularMultiSelectModule,
+                        NgMultiSelectDropDownModule.forRoot(),
+                        OwlDateTimeModule,
+                        OwlNativeDateTimeModule,
+                        CommonModule,
+                        BlockUIModule.forRoot(),
+                        ReactiveFormsModule,
+                        HttpModule,
+                        RouterModule,
+                        ToastrModule.forRoot(),
+                        HttpClientModule,
+                        NgxPermissionsModule.forRoot(),
+                        OverlayModule,
+                        StoreDevtoolsModule.instrument(),
+                        FormsModule,
+                        NgxIntlTelInputModule,
+                        NgxIntlTelInputModule,
+                        BsDatepickerModule.forRoot(),
+                        FullCalendarModule,
+                        TypeaheadModule.forRoot(),
+                        AngularEditorModule,
+                        AutocompleteLibModule,
+                        BBSFUtilitiesModule,
+                        InlineSVGModule.forRoot(),
+                        SweetAlert2Module,
+                    ],
+                    providers: [
+                        ErrorMassageValidation,
+                        ControlUtility,
+                        OnPagingFiltersChangeService,
+                        TranslateService,
+                        FormGroupDirective,
+                        NgbModal,
+                        NgbActiveModal,
+                        DatePipe,
+                        BBSFDateTimePipe,
+                        BBSFDatePipe,
+                        RenderComponentService,
+                        { provide: OWL_DATE_TIME_LOCALE, useValue: ControlUtility.getLocal() },
+                    ],
+                    schemas: [
+                        NO_ERRORS_SCHEMA
+                    ],
+                    exports: [
+                        DateInputComponent,
+                        FileUploadComponent,
+                        MultiLingualTextBoxComponent,
+                        TextboxComponent,
+                        TextAreaComponent,
+                        MultiLingualTextAreaComponent,
+                        CheckBoxComponent,
+                        DropdownListComponent,
+                        PhoneComponent,
+                        ToggleslideComponent,
+                        HtmlEditorComponent,
+                        MultiLingualHtmlEditorComponent,
+                        ImageUploaderComponent,
+                        ProfileImageUploaderComponent,
+                        CalendarComponent,
+                        MapAutoCompleteComponent,
+                        AutocompleteTextBoxComponent,
+                        TagsInputComponent,
+                        PagingComponent,
+                        JwPaginationComponent,
+                        RadioButtonComponent,
+                        FormComponent,
+                        PagingComponent,
+                        ConfirmationModalComponent,
+                        RepeaterComponent,
+                        RepeaterFieldBuilderComponent,
+                        NgTemplateNameDirective,
+                        RepeaterItemFieldComponent,
+                        RepeaterTableComponent,
+                        BBSFDateTimePipe,
+                        BBSFDatePipe,
+                        RecaptchaComponent,
+                        PageHeaderComponentComponent
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$3.TranslateService }]; } });
 
 class CustomValidation {
 }
@@ -8068,12 +8212,11 @@ class AppBaseComponent {
         }
     }
 }
-AppBaseComponent.decorators = [
-    { type: Injectable }
-];
-AppBaseComponent.ctorParameters = () => [
-    { type: Injector }
-];
+AppBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AppBaseComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+AppBaseComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AppBaseComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AppBaseComponent, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
@@ -8850,5 +8993,5 @@ var FileType;
  * Generated bundle index. Do not edit.
  */
 
-export { AddButton, AppBaseComponent, AppInjector, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, BBSFDatePipe, BBSFDateTimePipe, 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, 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, MapAutoCompleteComponent, MapAutoCompleteOptions, MapAutocompleteDTO, MenuListType, Misc, MultiLingualHtmlEditorComponent, MultiLingualHtmlEditorOptions, MultiLingualTextAreaComponent, MultiLingualTextAreaOptions, MultiLingualTextBoxComponent, MultiLingualTextBoxOptions, MultilingualControlOptionsBase, MultipleFileUploadModel, NgTemplateNameDirective, OnPagingFiltersChangeService, PageHeaderComponentComponent, PageHeaderOptions, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, 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, UploadPersonalImage, environment, options, ɵ0, BTagsInputComponent as ɵa };
-//# sourceMappingURL=bnsights-bbsf-controls.js.map
+export { AddButton, AppBaseComponent, AppInjector, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, BBSFDatePipe, BBSFDateTimePipe, 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, 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, MapAutoCompleteComponent, MapAutoCompleteOptions, MapAutocompleteDTO, MenuListType, Misc, MultiLingualHtmlEditorComponent, MultiLingualHtmlEditorOptions, MultiLingualTextAreaComponent, MultiLingualTextAreaOptions, MultiLingualTextBoxComponent, MultiLingualTextBoxOptions, MultilingualControlOptionsBase, MultipleFileUploadModel, NgTemplateNameDirective, OnPagingFiltersChangeService, PageHeaderComponentComponent, PageHeaderOptions, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, 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, UploadPersonalImage, environment, options };
+//# sourceMappingURL=bnsights-bbsf-controls.mjs.map