@bnsights/bbsf-controls 1.0.87 → 1.0.89

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

@@ -1,83 +1,52 @@
-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, forwardRef, Directive, ViewContainerRef, ViewChildren, Pipe, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import * as i5$3 from 'ng-block-ui';
+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 { BlockUIModule } from 'ng-block-ui';
-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 { 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 { 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 * as i6 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
-import * as i7$1 from 'ngx-intl-tel-input';
+import { DatePipe, CommonModule } from '@angular/common';
 import { SearchCountryField, NgxIntlTelInputModule } from 'ngx-intl-tel-input';
-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 { UtilityService, ControlValidationService, BBSFTranslateService, RequestOptionsModel, RequestHandlerService, environment as environment$1, BBSFUtilitiesModule, ConfigurationService, EnvironmentService, AuthService } from '@bnsights/bbsf-utilities';
 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 * as i8 from '@angular/cdk/bidi';
-import * as i6$1 from 'ng2-file-upload';
+import { OwlDateTimeIntl, DateTimeAdapter, OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
 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 * 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 { NgbModal, NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 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 * as i1$1 from '@angular/common/http';
-import { HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
+import { HttpHeaders, HttpParams, HttpClient, 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 * as i4 from 'ngx-bootstrap/typeahead';
-import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
-import * as i8$1 from 'ngx-infinite-scroll';
+import { NgSelectModule } from '@ng-select/ng-select';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-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 { LazyMapsAPILoader, MapsAPILoader, AgmCoreModule } from '@agm/core';
 import { MatGoogleMapsAutocompleteModule } from '@angular-material-extensions/google-maps-autocomplete';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGrigPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import listPlugin from '@fullcalendar/list';
 import enGbLocale from '@fullcalendar/core/locales/en-gb';
 import ArLocale from '@fullcalendar/core/locales/ar';
+import { 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';
@@ -207,81 +176,14 @@ class ErrorMassageValidation {
     }
 }
 ErrorMassageValidation.controlContainerstatic = null;
-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' }]
-        }] });
+ErrorMassageValidation.decorators = [
+    { type: Injectable }
+];
+ErrorMassageValidation.ctorParameters = () => [
+    { type: Http },
+    { type: ControlContainer, decorators: [{ type: Optional }] },
+    { type: UtilityService }
+];
 
 var InputType;
 (function (InputType) {
@@ -442,11 +344,79 @@ class ControlUtility {
         FormControl.markAsTouched();
     }
 }
-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 }]; } });
+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 }
+];
 
 class DateInputComponent {
     // tslint:disable-next-line: max-line-length
@@ -629,26 +599,32 @@ class DateInputComponent {
     }
 }
 DateInputComponent.controlContainerstatic = null;
-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
-            }] } });
+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]=\"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",
+                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 }]
+};
 
 class FileUploadModel {
 }
@@ -698,12 +674,10 @@ class GlobalSettings {
         this.DefaultImageSrc = "./src/assets/images/uploadimg.png";
     }
 }
-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' }]
-        }] });
+GlobalSettings.ɵprov = i0.ɵɵdefineInjectable({ factory: function GlobalSettings_Factory() { return new GlobalSettings(); }, token: GlobalSettings, providedIn: "root" });
+GlobalSettings.decorators = [
+    { type: Injectable, args: [{ providedIn: 'root' },] }
+];
 
 class FileUploadComponent {
     constructor(controlContainer, MultipleFileUplaodControlHost, controlUtility, UtilityService, controlValidationService, globalSettings) {
@@ -1127,25 +1101,26 @@ class FileUploadComponent {
     }
 }
 FileUploadComponent.controlContainerstatic = null;
-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
-            }] } });
+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\" 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 }]
+};
 
 class EnglishArabicDTO {
 }
@@ -1554,22 +1529,26 @@ class MultiLingualTextBoxComponent {
     }
 }
 MultiLingualTextBoxComponent.controlContainerstatic = null;
-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
-            }] } });
+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 }]
+};
 
 class TextAreaComponent {
     constructor(controlUtility, controlContainer, TextAreaControlHost, UtilityService, controlValidationService, globalSettings) {
@@ -1738,22 +1717,25 @@ class TextAreaComponent {
     }
 }
 TextAreaComponent.controlContainerstatic = null;
-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
-            }] } });
+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"
+            },] }
+];
+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 }]
+};
 
 class MultiLingualTextAreaComponent {
     constructor(MultiLingualTextAreaFormControlHost, controlContainer, controlUtility, UtilityService, controlValidationService, globalSettings) {
@@ -2155,22 +2137,25 @@ class MultiLingualTextAreaComponent {
     }
 }
 MultiLingualTextAreaComponent.controlContainerstatic = null;
-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
-            }] } });
+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 }]
+};
 
 class CheckBoxComponent {
     // tslint:disable-next-line: max-line-length
@@ -2262,22 +2247,26 @@ class CheckBoxComponent {
     }
 }
 CheckBoxComponent.controlContainerstatic = null;
-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
-            }] } });
+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]=\"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"
+            },] }
+];
+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 }]
+};
 
 class DropdownListComponent {
     // tslint:disable-next-line: max-line-length
@@ -2429,24 +2418,28 @@ class DropdownListComponent {
     }
 }
 DropdownListComponent.controlContainerstatic = null;
-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
-            }] } });
+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]=\"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"
+            },] }
+];
+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 }]
+};
 
 class PhoneComponent {
     // tslint:disable-next-line: max-line-length
@@ -2546,22 +2539,25 @@ class PhoneComponent {
     }
 }
 PhoneComponent.controlContainerstatic = null;
-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
-            }] } });
+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"
+            },] }
+];
+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 }]
+};
 
 class ToggleslideComponent {
     // tslint:disable-next-line: max-line-length
@@ -2621,22 +2617,26 @@ class ToggleslideComponent {
     }
 }
 ToggleslideComponent.controlContainerstatic = null;
-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
-            }] } });
+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"
+            },] }
+];
+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 }]
+};
 
 class HtmlEditorComponent {
     constructor(zone, controlUtility, controlContainer, HtmlEditorControlHost, UtilityService, controlValidationService, globalSettings) {
@@ -2835,22 +2835,26 @@ class HtmlEditorComponent {
     }
 }
 HtmlEditorComponent.controlContainerstatic = null;
-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
-            }] } });
+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"
+            },] }
+];
+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 }]
+};
 
 class MultiLingualHtmlEditorComponent {
     constructor(MultiLingualHtmlEditorFormControlHost, controlContainer, controlUtility, UtilityService, controlValidationService, globalSettings) {
@@ -3252,22 +3256,25 @@ class MultiLingualHtmlEditorComponent {
     }
 }
 MultiLingualHtmlEditorComponent.controlContainerstatic = null;
-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
-            }] } });
+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 }]
+};
 
 class ImageUploaderComponent {
     constructor(zone, controlUtility, controlContainer, ImageUplaoderControlHost, UtilityService, controlValidationService, globalSettings, modalService) {
@@ -3585,28 +3592,29 @@ class ImageUploaderComponent {
     }
 }
 ImageUploaderComponent.controlContainerstatic = null;
-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 }]
-            }] } });
+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 },] }]
+};
 
 class ProfilePictureDTO {
 }
@@ -3930,28 +3938,28 @@ class ProfileImageUploaderComponent {
     }
 }
 ProfileImageUploaderComponent.controlContainerstatic = null;
-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 }]
-            }] } });
+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 },] }]
+};
 
 class AutocompleteDTO {
     constructor() {
@@ -4175,358 +4183,29 @@ class AutocompleteTextBoxComponent {
     }
 }
 AutocompleteTextBoxComponent.controlContainerstatic = null;
-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
-            }] } });
-
-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
-            }] } });
+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]=\"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"
+            },] }
+];
+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 }]
+};
 
 class TagsInputComponent {
     // tslint:disable-next-line: max-line-length
@@ -4766,25 +4445,29 @@ class TagsInputComponent {
     }
 }
 TagsInputComponent.controlContainerstatic = null;
-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 }]
-            }] } });
+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]=\"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"
+            },] }
+];
+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 },] }]
+};
 
 class PagingDTO {
     constructor() {
@@ -4810,224 +4493,71 @@ var FilterType;
     FilterType[FilterType["Other"] = 7] = "Other";
 })(FilterType || (FilterType = {}));
 
-class JwPaginationComponent {
-    constructor() {
-        this.changePage = new EventEmitter();
-        this.initialPage = 1;
+// tslint:disable-next-line: no-conflicting-lifecycle
+class PagingComponent {
+    constructor(utilityService, http, router, onChangeService, requestHandlerService) {
+        this.utilityService = utilityService;
+        this.http = http;
+        this.router = router;
+        this.onChangeService = onChangeService;
+        this.requestHandlerService = requestHandlerService;
+        this.items = [];
+        this.result = [];
+        this.pagerConfig = null;
+        this.totalRow = 0;
         this.pageSize = 10;
-        this.maxPages = 10;
-        this.ShowFirstAndLast = false;
-        this.pager = {};
+        this.Pages = 0;
+        this.CurrentPage = 1;
+        this.ShowPageSizeOption = true;
+        this.ShowFirstAndLast = true;
+        this.hidePaginationWhenPageSizeEqualOne = true;
+        this.Sum = 0;
+        this.Throttle = 300;
+        this.ScrollDistance = 1;
+        this.ScrollUpDistance = 2;
+        this.direction = '';
+        this.IsFirstCall = true;
+        this.Items = new EventEmitter();
+        this.subscriptions = new Subscription();
+        this.ReinitializePaging = () => {
+            this.IsFirstCall = true;
+            this.getItemList(1, true);
+        };
+        this.UpdatePaging = () => {
+            //this.IsFirstCall=true;
+            this.getItemList(this.CurrentPage);
+        };
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
     }
     ngOnInit() {
-        // set page if items array isn't empty
-        if (this.items && this.items.length) {
-            this.setPage(this.initialPage);
+        if (this.options.IsLoadMoreControl)
+            this.Sum = this.options.PageSize;
+        if (this.options.DropdownFiltersControlNames != null && this.options.DropdownFiltersControlNames.length > 0) {
+            const DropdownFiltersControlNames = this.options.DropdownFiltersControlNames;
+            this.subscriptions.add(this.onChangeService.GetValue().subscribe((value) => {
+                let result = this.options.DropdownFiltersControlNames.filter((item) => item == value);
+                if (result.length > 0) {
+                    this.IsFirstCall = true;
+                    this.CurrentPage = 1;
+                    this.getItemList(this.CurrentPage, true);
+                }
+            }));
         }
-    }
-    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);
+        if (this.options.BootstrapDatePickersFiltersControlNames != null && this.options.BootstrapDatePickersFiltersControlNames.length > 0) {
+            const BootstrapDatePickersFiltersControlNames = this.options.BootstrapDatePickersFiltersControlNames;
+            this.subscriptions.add(this.onChangeService.GetValue().subscribe((value) => {
+                let result = this.options.BootstrapDatePickersFiltersControlNames.filter((item) => item == value);
+                if (result.length > 0) {
+                    this.IsFirstCall = true;
+                    this.CurrentPage = 1;
+                    this.getItemList(this.CurrentPage, true);
+                }
+            }));
         }
-    }
-    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) {
-        this.utilityService = utilityService;
-        this.http = http;
-        this.router = router;
-        this.onChangeService = onChangeService;
-        this.requestHandlerService = requestHandlerService;
-        this.items = [];
-        this.result = [];
-        this.pagerConfig = null;
-        this.totalRow = 0;
-        this.pageSize = 10;
-        this.Pages = 0;
-        this.CurrentPage = 1;
-        this.ShowPageSizeOption = true;
-        this.ShowFirstAndLast = true;
-        this.hidePaginationWhenPageSizeEqualOne = true;
-        this.Sum = 0;
-        this.Throttle = 300;
-        this.ScrollDistance = 1;
-        this.ScrollUpDistance = 2;
-        this.direction = '';
-        this.IsFirstCall = true;
-        this.Items = new EventEmitter();
-        this.subscriptions = new Subscription();
-        this.ReinitializePaging = () => {
-            this.IsFirstCall = true;
-            this.getItemList(1, true);
-        };
-        this.UpdatePaging = () => {
-            //this.IsFirstCall=true;
-            this.getItemList(this.CurrentPage);
-        };
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    ngOnInit() {
-        if (this.options.IsLoadMoreControl)
-            this.Sum = this.options.PageSize;
-        if (this.options.DropdownFiltersControlNames != null && this.options.DropdownFiltersControlNames.length > 0) {
-            const DropdownFiltersControlNames = this.options.DropdownFiltersControlNames;
-            this.subscriptions.add(this.onChangeService.GetValue().subscribe((value) => {
-                let result = this.options.DropdownFiltersControlNames.filter((item) => item == value);
-                if (result.length > 0) {
-                    this.IsFirstCall = true;
-                    this.CurrentPage = 1;
-                    this.getItemList(this.CurrentPage, true);
-                }
-            }));
-        }
-        if (this.options.BootstrapDatePickersFiltersControlNames != null && this.options.BootstrapDatePickersFiltersControlNames.length > 0) {
-            const BootstrapDatePickersFiltersControlNames = this.options.BootstrapDatePickersFiltersControlNames;
-            this.subscriptions.add(this.onChangeService.GetValue().subscribe((value) => {
-                let result = this.options.BootstrapDatePickersFiltersControlNames.filter((item) => item == value);
-                if (result.length > 0) {
-                    this.IsFirstCall = true;
-                    this.CurrentPage = 1;
-                    this.getItemList(this.CurrentPage, true);
-                }
-            }));
-        }
-        this.IsFirstCall = true;
-        this.getItemList(this.CurrentPage, true);
+        this.IsFirstCall = true;
+        this.getItemList(this.CurrentPage, true);
     }
     ngAfterViewInit() {
         if (this.options.OnClickFiltersControlNames != null && this.options.OnClickFiltersControlNames.length > 0) {
@@ -5247,18 +4777,152 @@ class PagingComponent {
         return filters;
     }
 }
-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
-            }] } });
+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;
+            }
+        }
+        // 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.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 }]
+};
 
 class RadioButtonComponent {
     // tslint:disable-next-line: max-line-length
@@ -5342,22 +5006,26 @@ class RadioButtonComponent {
     }
 }
 RadioButtonComponent.controlContainerstatic = null;
-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
-            }] } });
+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 }]
+};
 
 var LanguageValidation;
 (function (LanguageValidation) {
@@ -5601,22 +5269,25 @@ class TextboxComponent {
     }
 }
 TextboxComponent.controlContainerstatic = null;
-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
-            }] } });
+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"
+            },] }
+];
+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 }]
+};
 
 class MapAutocompleteDTO {
     constructor() {
@@ -5729,16 +5400,10 @@ class MapAutoCompleteComponent {
                         place.address_components.forEach(( /**
                                 * @param {?} value
                                 * @return {?}
-                                */ /**
-                        * @param {?} value
-                        * @return {?}
-                        *//**
+                                *//**
                                 * @param {?} value
                                 * @return {?}
-                                */ /**
-                        * @param {?} value
-                        * @return {?}
-                        */ value => {
+                                */ value => {
                             if (value.types.indexOf('street_number') > -1) {
                                 germanAddress["streetNumber"] = value.short_name;
                             }
@@ -5924,25 +5589,29 @@ class MapAutoCompleteComponent {
     }
 }
 MapAutoCompleteComponent.controlContainerstatic = null;
-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 }]
-            }] } });
+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 },] }]
+};
 
 var CalendarView;
 (function (CalendarView) {
@@ -5964,7 +5633,7 @@ class CalendarComponent {
         this.controlValidationService = controlValidationService;
         this.calendarVisible = true;
         this.currentEvents = [];
-        this.calendarPlugins = [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin];
+        this.calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin, listPlugin];
         this.calendarWeekends = true;
         this.calendarEvents = [];
         this.DefaultView = "";
@@ -6044,7 +5713,7 @@ class CalendarComponent {
             this.calendarOptions = {
                 plugins: [
                     dayGridPlugin,
-                    timeGridPlugin,
+                    timeGrigPlugin,
                     listPlugin,
                     interactionPlugin
                 ],
@@ -6092,23 +5761,27 @@ class CalendarComponent {
     }
 }
 CalendarComponent.controlContainerstatic = null;
-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 }]
-            }] } });
+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 },] }]
+};
 
 var PagingActionMode;
 (function (PagingActionMode) {
@@ -6196,16 +5869,25 @@ class FormComponent {
         return result;
     }
 }
-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
-            }] } });
+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 }]
+};
 
 class ConfirmationModalComponent {
     constructor(utilityService, modalService, router) {
@@ -6320,36 +6002,155 @@ class ConfirmationModalComponent {
             if (!this.options.DisableErrorNotification)
                 this.utilityService.notifyErrorMessage();
         }
-        this.utilityService.stopBlockUI();
+        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 },] }]
+};
+
+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]);
     }
-}
-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;
+    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;
     }
 }
-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
-            }] } });
+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 },] }]
+};
 
 var PermissionSets;
 (function (PermissionSets) {
@@ -6555,11 +6356,12 @@ class RenderComponentService {
         }
     }
 }
-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 }]; } });
+RenderComponentService.decorators = [
+    { type: Injectable }
+];
+RenderComponentService.ctorParameters = () => [
+    { type: ComponentFactoryResolver }
+];
 
 class RepeaterFieldBuilderComponent {
     constructor(renderComponentService, TextControlHost) {
@@ -7261,41 +7063,56 @@ class RepeaterFieldBuilderComponent {
             }
     }
 }
-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
-            }] } });
+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 RepeaterComponent {
-    constructor() {
-        this.templateRefs = [];
+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 = [];
-        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);
+                this.items.push(index);
             }
         }
         else
@@ -7340,220 +7157,415 @@ class RepeaterComponent {
             this.options.RepeaterValue = result;
         });
     }
-    deleteItem(Index) {
-        if (this.items.length == this.options.MinRequiredItems && this.options.IsRequired)
+    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() {
+        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 = {}));
+
+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 {
+    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;
+    }
+    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;
-        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);
-                }
-            }
+        if (tagInput.value === '') {
+            this.removeTag(this.tags[this.tags.length - 1]);
         }
-        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;
+    addTag(tagInput) {
+        if (tagInput.value.trim() !== '') {
+            let tag = {
+                [this.displayField]: tagInput.value
+            };
+            this.addPredefinedTag(tag);
+        }
+        tagInput.value = '';
     }
-    setCurrentIndex(i) {
-        this.repeaterContext.index = i;
+    addPredefinedTag(tag) {
+        if (this.tags == null)
+            this.tags = [];
+        if (!this.maximumOfTagsReached()) {
+            this.tags.push(tag);
+            this.tagsChanged('add', tag);
+        }
     }
-}
-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() {
+    removeTag(tagToRemove) {
+        if (!this.isDeleteable(tagToRemove)) {
+            return;
+        }
+        this.tags = this.tags.filter(tag => tagToRemove !== tag);
+        this.tagsChanged('remove', tagToRemove);
     }
-}
-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 = [];
+    maximumOfTagsReached() {
+        return typeof this.maxTags !== 'undefined' && this.tags && this.tags.length >= this.maxTags;
     }
-    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);
-            }
+    isDeleteable(tag) {
+        if (typeof tag.deleteable !== "undefined" && !tag.deleteable) {
+            return false;
         }
-        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;
-        });
+        return this.canDeleteTags;
     }
-    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 });
-                    }
-                }
-            }
+    typeaheadOnSelect(e) {
+        if (typeof e.item === 'string') {
+            this.addPredefinedTag({
+                [this.displayField]: e.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);
-                }
-            }
+        else {
+            this.addPredefinedTag(e.item);
         }
-        this.items = this.items.filter((res) => res != this.items[Index]);
+        this.selected = '';
     }
-    addItem() {
-        if (this.items.length == 0)
-            this.items.push(this.items.length);
-        else
-            this.items.push(this.items[this.items.length - 1] + 1);
+    typeaheadOnNoMatch(e) {
+        if (typeof this.onNoOptionsMatch !== 'undefined') {
+            this.onNoOptionsMatch.emit(e);
+        }
     }
-}
-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;
+    writeValue(value) {
+        if (value !== this.tags) {
+            this.tags = value;
+        }
     }
-    transform(value) {
-        let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy hh:mm a');
-        return latest_date;
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
     }
-}
-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;
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
     }
-    transform(value) {
-        let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy');
-        return latest_date;
+    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();
     }
 }
-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 }]; } });
+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 }]
+};
 
 class RecaptchaModel {
     constructor() {
@@ -7669,18 +7681,25 @@ class RecaptchaComponent {
         this.OnChange.emit(this.ReCaptchaFormControl.value);
     }
 }
-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
-            }] } });
+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"
+            },] }
+];
+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 }]
+};
 
 class PageHeaderComponentComponent {
     constructor(router, utilityService) {
@@ -7695,25 +7714,30 @@ class PageHeaderComponentComponent {
         this.EN = this.utilityService.isCurrentLanguageEnglish();
     }
 }
-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
-            }] } });
+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 }]
+};
 
 let options;
 let AppInjector;
-FullCalendarModule.registerPlugins([
-    dayGridPlugin,
-    timeGridPlugin,
-    listPlugin,
-    interactionPlugin
-]);
+const ɵ0 = ControlUtility.getLocal();
+// FullCalendarModule.registerPlugins([
+//   dayGridPlugin,
+//   timeGridPlugin,
+//   listPlugin,
+//   interactionPlugin
+// ])
 class BBSFControlsModule {
     constructor(injector, translate) {
         this.injector = injector;
@@ -7721,299 +7745,151 @@ class BBSFControlsModule {
         AppInjector = this.injector;
     }
 }
-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 }]; } });
+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 }
+];
 
 class CustomValidation {
 }
@@ -8094,6 +7970,10 @@ class AppBaseComponent {
         let file = new Blob([fileDTO], { type: "application/pdf" });
         saveAs(file, fileName);
     }
+    downloadWord(fileDTO, fileName) {
+        let file = new Blob([fileDTO], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
+        saveAs(file, fileName);
+    }
     base64toBlob(base64Data, contentType) {
         contentType = contentType || '';
         var sliceSize = 1024;
@@ -8212,11 +8092,12 @@ class AppBaseComponent {
         }
     }
 }
-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 }]; } });
+AppBaseComponent.decorators = [
+    { type: Injectable }
+];
+AppBaseComponent.ctorParameters = () => [
+    { type: Injector }
+];
 
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
@@ -8993,5 +8874,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 };
-//# sourceMappingURL=bnsights-bbsf-controls.mjs.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, ɵ0, BTagsInputComponent as ɵa };
+//# sourceMappingURL=bnsights-bbsf-controls.js.map