@bnsights/bbsf-controls 1.0.45 → 1.0.48

package/fesm2015/bnsights-bbsf-controls.js

@@ -4,9 +4,9 @@ import timeGridPlugin from '@fullcalendar/timegrid';
 import listPlugin from '@fullcalendar/list';
 import interactionPlugin from '@fullcalendar/interaction';
 import * as i0 from '@angular/core';
-import { Injectable, Optional, EventEmitter, Component, Input, Output, ViewChild, NgZone, Directive, TemplateRef, ViewChildren, ComponentFactoryResolver, ViewContainerRef, Pipe, NgModule, NO_ERRORS_SCHEMA, Injector } from '@angular/core';
+import { Injectable, Optional, EventEmitter, Component, Input, Output, ViewChild, NgZone, Directive, TemplateRef, ViewChildren, ComponentFactoryResolver, ViewContainerRef, Pipe, forwardRef, NgModule, NO_ERRORS_SCHEMA, Injector } from '@angular/core';
 import { BlockUIModule } from 'ng-block-ui';
-import { ControlContainer, Validators, FormControl, FormGroupDirective, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
+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';
@@ -17,8 +17,8 @@ import { DatePipe, CommonModule } from '@angular/common';
 import { SearchCountryField, NgxIntlTelInputModule } from 'ngx-intl-tel-input';
 import { UtilityService, ControlValidationService, BBSFTranslateService, RequestOptionsModel, RequestHandlerService, BBSFUtilitiesModule } from '@bnsights/bbsf-utilities';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { Subject, Observable, noop, of } from 'rxjs';
-import { DateTimeAdapter, OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
+import { Subject, Observable, noop as noop$1, of, Subscription } from 'rxjs';
+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';
@@ -390,6 +390,24 @@ 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");
+    }
+}
+DefaultIntl.decorators = [
+    { type: Injectable }
+];
+DefaultIntl.ctorParameters = () => [
+    { type: UtilityService }
+];
+
 class DateInputComponent {
     // tslint:disable-next-line: max-line-length
     constructor(datepipe, onChangeService, ErrorHandler, controlUtility, controlContainer, DateInputControlHost, UtilityService, translate, controlValidationService, dateTimeAdapter) {
@@ -565,6 +583,9 @@ DateInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-DateTimePicker',
                 template: "<div class=\"b-control b-date-picker\">\r\n    <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n            [hidden]=\"options.HideLabel\">\r\n            {{options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n                aria-required=\"true\">*</span>\r\n        </label>\r\n\r\n        <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group\">\r\n                <input autocomplete=\"off\" (dateTimeChange)=\"onDateSelect($event)\"\r\n                    dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n                    class=\"form-control bnsights-control  {{options.ExtraClasses}} \"\r\n                    [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                    formControlName=\"{{options.Name}}\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\"\r\n                    [class.is-invalid]=\"DatePickerFormControl.invalid && DatePickerFormControl.touched\"\r\n                    [min]=\"options.StartDate\" [max]=\"options.EndDate\" [hour12Timer]=\"options.Hour12Timer\" [selectMode]=\"getSelectMode(options.SelectMode)\"\r\n                    placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" #Dateinput>\r\n\r\n                <owl-date-time [pickerType]=\"getPickerType(options.PickerType)\"\r\n                    [startView]=\"getStartView(options.StartView)\" [firstDayOfWeek]=\"options.FirstDayOfWeek\"\r\n                    [hour12Timer]=\"options.Hour12Timer\" #dt1></owl-date-time>\r\n                    \r\n                <div class=\"input-group-append\">\r\n                    <span class=\"input-group-text\" [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                    <!--<span class=\"input-group-text\" *ngIf=\"options.EnableCopyToClipboard\"\r\n                        (click)=\"copyInputMessage(Dateinput)\">\r\n                        <i class=\"fas fa-copy\"></i>\r\n                    </span>-->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"text-danger Required-text\"\r\n                *ngIf=\"(DatePickerFormControl.invalid && DatePickerFormControl.touched)\">\r\n                {{getErrorValidation(DatePickerFormControl.errors|keyvalue)}}\r\n            </div>\r\n\r\n                <div class=\"control-desc\"*ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n          \r\n            <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n",
+                providers: [
+                    { provide: OwlDateTimeIntl, useClass: DefaultIntl }
+                ],
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
             },] }
 ];
@@ -3703,6 +3724,7 @@ class AutocompleteDTO {
     constructor() {
         this.key = "";
         this.value = "";
+        this.image = "";
     }
 }
 
@@ -3730,6 +3752,7 @@ class AutocompleteTextBoxComponent {
         this.validationRulesasync = [];
         this.dataList = [];
         this.SelectedValue = "";
+        this.avatarImage = "https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png?20150327203541";
         this.resetError = () => {
             this.controlValidationService.RemoveGlobalError();
         };
@@ -3840,7 +3863,7 @@ class AutocompleteTextBoxComponent {
                 requestOptionsModel.disableSuccessNotification = true;
                 // using github public api to get users by name
                 return this.requestHandlerService.get(this.options.ActionURL, params, null, requestOptionsModel)
-                    .pipe(map((data) => data || []), tap(() => noop, err => {
+                    .pipe(map((data) => data || []), tap(() => noop$1, err => {
                     // in case of http error
                     this.errorMessage = err && err.message || 'Something goes wrong';
                 }));
@@ -3920,7 +3943,7 @@ AutocompleteTextBoxComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'BBSF-AutocompleteTextBox',
-                template: "<div class=\"b-control b-auto-complete-textbox\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n      [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n        aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <!-- <input \r\n[(ngModel)]=\"Search\"\r\n    value=\"{{Search}}\"    \r\n    autocomplete=\"off\"\r\n    class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n    dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n    aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n    [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n    typeaheadOptionField=\"{{Value}}\"\r\n    [typeahead]=\"suggestions$\"\r\n    [typeaheadAsync]=\"true\"\r\n    placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"  (typeaheadOnSelect)=\"handleResultSelected($event)\" (blur)=\"onBlur($event.target.value)\"  /> -->\r\n      <!-- \r\n      <input ngxTypeahead autocomplete=\"off\"\r\n             value=\"{{Search}}\"\r\n             class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n             dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n             [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" [taUrl]=\"options.ActionURL\"\r\n             [taParams]=\"options.Params\" taQueryParam=\"{{QueryParam}}\" taApi=\"{{Api}}\" taListItemLabel=\"{{Value}}\"   (taSelected)=\"handleResultSelected($event)\"> -->\r\n\r\n\r\n\r\n      <ng-autocomplete *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        [notFoundTemplate]=\"notFoundTemplate\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n        dir=\"{{options.ForceDirection==2?'rtl':''}}\" formControlName=\"{{options.Name}}\" 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 *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        class=\"form-control bnsights-control {{options.ExtraClasses}}\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n        formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <a [innerHTML]=\"item.value\"></a>\r\n      </ng-template>\r\n\r\n      <ng-template #notFoundTemplate let-notFound>\r\n        <div [innerHTML]=\"notFound\"></div>\r\n      </ng-template>\r\n\r\n      <div class=\"text-danger Required-text\"\r\n        *ngIf=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n        {{getErrorValidation(AutocompleteTextBoxControl.errors|keyvalue)}}\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n        {{resetError()}}</div>\r\n\r\n    </div>\r\n  </div>\r\n</div>",
+                template: "<div class=\"b-control b-auto-complete-textbox\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n      [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n        aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <!-- <input \r\n[(ngModel)]=\"Search\"\r\n    value=\"{{Search}}\"    \r\n    autocomplete=\"off\"\r\n    class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n    dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n    aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n    [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n    typeaheadOptionField=\"{{Value}}\"\r\n    [typeahead]=\"suggestions$\"\r\n    [typeaheadAsync]=\"true\"\r\n    placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"  (typeaheadOnSelect)=\"handleResultSelected($event)\" (blur)=\"onBlur($event.target.value)\"  /> -->\r\n      <!-- \r\n      <input ngxTypeahead autocomplete=\"off\"\r\n             value=\"{{Search}}\"\r\n             class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n             dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n             [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" [taUrl]=\"options.ActionURL\"\r\n             [taParams]=\"options.Params\" taQueryParam=\"{{QueryParam}}\" taApi=\"{{Api}}\" taListItemLabel=\"{{Value}}\"   (taSelected)=\"handleResultSelected($event)\"> -->\r\n\r\n\r\n\r\n      <ng-autocomplete *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        [notFoundTemplate]=\"notFoundTemplate\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n        dir=\"{{options.ForceDirection==2?'rtl':''}}\" formControlName=\"{{options.Name}}\" 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 *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        class=\"form-control bnsights-control {{options.ExtraClasses}}\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n        formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <img *ngIf=\"options.ItemWithImage\" style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\" src=\"{{(item.image?item.image:avatarImage)}}\" />\r\n        <a [innerHTML]=\"item.value\"></a>\r\n      </ng-template>\r\n\r\n      <ng-template #notFoundTemplate let-notFound>\r\n        <div [innerHTML]=\"notFound\"></div>\r\n      </ng-template>\r\n\r\n      <div class=\"text-danger Required-text\"\r\n        *ngIf=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n        {{getErrorValidation(AutocompleteTextBoxControl.errors|keyvalue)}}\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n        {{resetError()}}</div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 styles: [""]
             },] }
 ];
@@ -4122,7 +4145,7 @@ TagsInputComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'BBSF-TagsInput',
-                template: "<div class=\"b-control b-tags-input\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n    <div class=\"form-group row\" [formGroup]=\"TagsFormGroup\">\r\n\r\n      <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n             [hidden]=\"options.HideLabel\">\r\n        {{options.LabelValue}}\r\n        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n              aria-required=\"true\">*</span>\r\n      </label>\r\n\r\n      <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n        <ngx-tags-input id=\"typeahead-http\" type=\"text\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n                        dir=\"{{options.ForceDirection==2?'rtl':''}}\"  [disabled]=\"options.IsDisabled\"\r\n                        aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"tags\"\r\n                        [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\"\r\n                        placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n                        (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\" removeLastOnBackspace=\"{{options.RemoveLastOnBackspace}}\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\" [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey scrollableOptions=\"{{options.ScrollableOptions}}\" scrollableOptionsInView=\"{{options.MaxSearchResultsCount}}\" (keypress)=\"AddTag($event.key,SearchKey)\" maxTags=\"{{options.MaxNumberTags}}\" minLengthBeforeOptions=\"{{options.MinSearchLength}}\" displayField=\"{{options.DatasourceItemText}}\" name=\"tags\">\r\n        </ngx-tags-input>\r\n\r\n        <div class=\"text-danger Required-text\"\r\n        *ngIf=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n        {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n  \r\n    <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n    </div>\r\n\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",
+                template: "<div class=\"b-control b-tags-input\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n    <div class=\"form-group row\" [formGroup]=\"TagsFormGroup\">\r\n\r\n      <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n        [hidden]=\"options.HideLabel\">\r\n        {{options.LabelValue}}\r\n        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n          aria-required=\"true\">*</span>\r\n      </label>\r\n\r\n      <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n        <b-tags-input id=\"typeahead-http\" type=\"text\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n          dir=\"{{options.ForceDirection==2?'rtl':''}}\" [disabled]=\"options.IsDisabled\" aria-describedby=\"email-error\"\r\n          aria-invalid=\"true\" formControlName=\"tags\"\r\n          [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\" placeholder=\"{{options.Placeholder}}\"\r\n          id=\"{{options.Name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n          removeLastOnBackspace=\"{{options.RemoveLastOnBackspace}}\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n          [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey\r\n          scrollableOptions=\"{{options.ScrollableOptions}}\" scrollableOptionsInView=\"{{options.MaxSearchResultsCount}}\"\r\n          (keypress)=\"AddTag($event.key,SearchKey)\" [ViewMode]=\"options.TagInputMode\"\r\n          maxTags=\"{{options.MaxNumberTags}}\" minLengthBeforeOptions=\"{{options.MinSearchLength}}\"\r\n          [showDescription]=\"options.ShowDescription\" [defaultImageURL]=\"options.DefaultImgUrl\" name=\"tags\">\r\n        </b-tags-input>\r\n\r\n        <div class=\"text-danger Required-text\" *ngIf=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n          {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n        </div>\r\n\r\n\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n        </div>\r\n\r\n        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n          {{resetError()}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n",
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
             },] }
 ];
@@ -4191,6 +4214,7 @@ class PagingComponent {
         this.direction = '';
         this.IsFirstCall = true;
         this.Items = new EventEmitter();
+        this.subscriptions = new Subscription();
         this.ReinitializePaging = () => {
             this.IsFirstCall = true;
             this.getItemList(1, true);
@@ -4200,30 +4224,33 @@ class PagingComponent {
             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.onChangeService.GetValue().subscribe((value) => {
+            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.onChangeService.GetValue().subscribe((value) => {
+            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);
@@ -4254,6 +4281,16 @@ class PagingComponent {
                 }, false);
             }
         }
+        //Add click event on Reset Filter button
+        if (this.options.ResetFilterButtonName != null) {
+            const button = document.getElementsByName(this.options.ResetFilterButtonName)[0];
+            if (button != undefined) {
+                let element = button;
+                element.addEventListener("click", (e) => {
+                    this.clearFilters();
+                }, false);
+            }
+        }
         if (this.options.TypeaheadSearchControlNames != null && this.options.TypeaheadSearchControlNames.length > 0) {
             const TypeaheadSearchControlNames = this.options.TypeaheadSearchControlNames;
             for (let index = 0; index < TypeaheadSearchControlNames.length; index++) {
@@ -4301,6 +4338,8 @@ class PagingComponent {
         this.getItemList(this.CurrentPage, true);
     }
     getItemList(page, IsFilterUpdated = false) {
+        if (this.options.StartPagingCallback)
+            this.options.StartPagingCallback.call(null);
         let pagingDTO = new PagingDTO();
         let size = Number.parseInt(this.options.PageSize.toString());
         if (this.options.IsLoadMoreControl)
@@ -4311,46 +4350,15 @@ class PagingComponent {
         pagingDTO.TotalCount = this.totalRow;
         pagingDTO.IsFilterUpdated = IsFilterUpdated;
         let filters = {};
-        if (this.options.Filters != null && this.options.Filters != []) {
-            for (let index = 0; index < this.options.Filters.length; index++) {
-                if (this.options.Filters[index].FormControlName != null && this.options.Filters[index].FormControlName != "") {
-                    const FormControlName = this.options.Filters[index].FormControlName;
-                    let ControlValue = this.group.controls[FormControlName].value;
-                    if (ControlValue != undefined && ControlValue != null) {
-                        if (this.options.Filters[index].FilterType == FilterType.DatePicker) {
-                            if (Array.isArray(ControlValue)) {
-                                for (let element = 0; element < ControlValue.length; element++) {
-                                    const value = ControlValue[element];
-                                    filters[this.options.Filters[index].ActionParameterName] = value;
-                                }
-                            }
-                            else {
-                                filters[this.options.Filters[index].ActionParameterName] = ControlValue;
-                            }
-                        }
-                        else {
-                            if (this.options.Filters[index].FilterType == FilterType.AutocompleteTextBox)
-                                ControlValue = JSON.stringify(ControlValue);
-                            if (this.options.Filters[index].FilterType == FilterType.TagInput)
-                                ControlValue = JSON.stringify(ControlValue);
-                            filters[this.options.Filters[index].ActionParameterName] = ControlValue;
-                        }
-                    }
-                }
-                else {
-                    const ElementjQuerySelector = this.options.Filters[index].jQuerySelector;
-                    let ElementValue = document.querySelector(ElementjQuerySelector).value;
-                    if (ElementValue != undefined && ElementValue != null)
-                        filters[this.options.Filters[index].ActionParameterName] = ElementValue;
-                }
-            }
-        }
+        filters = this.getFiltersValue();
         //Set Filters object that sent to action URL
         let filtersDTO = {
             PagingDTO: pagingDTO,
             Filters: filters
         };
-        this.requestHandlerService.post(this.options.ActionPostURL, this.options.Filters && this.options.Filters.length > 0 ? filtersDTO : pagingDTO)
+        let requestOptions = new RequestOptionsModel();
+        requestOptions.disableBlockUI = this.options.DisableBlockUI;
+        this.requestHandlerService.post(this.options.ActionPostURL, this.options.Filters && this.options.Filters.length > 0 ? filtersDTO : pagingDTO, null, null, requestOptions)
             .subscribe((responseData) => {
             this.result = responseData.items; //this.castItems(responseData.items);
             let castedResult = plainToClass(this.options.TypeOfResponse, this.result, { excludeExtraneousValues: true });
@@ -4410,6 +4418,60 @@ class PagingComponent {
                 this.itemsText = this.utilityService.getResourceValue("Item");
         }
     }
+    clearFilters() {
+        if (this.options.Filters != null && this.options.Filters != []) {
+            for (let index = 0; index < this.options.Filters.length; index++) {
+                if (this.options.Filters[index].FormControlName != null && this.options.Filters[index].FormControlName != "") {
+                    const FormControlName = this.options.Filters[index].FormControlName;
+                    this.group.controls[FormControlName].setValue(null);
+                }
+            }
+            this.ReinitializePaging();
+        }
+    }
+    getFiltersValue() {
+        let filters = {};
+        if (this.options.Filters != null && this.options.Filters != []) {
+            for (let index = 0; index < this.options.Filters.length; index++) {
+                if (this.options.Filters[index].FormControlName != null && this.options.Filters[index].FormControlName != "") {
+                    const FormControlName = this.options.Filters[index].FormControlName;
+                    let ControlValue = this.group.controls[FormControlName].value;
+                    if (ControlValue != undefined && ControlValue != null && ControlValue != "") {
+                        if (this.options.Filters[index].FilterType == FilterType.DatePicker) {
+                            //if (Array.isArray(ControlValue)) {
+                            //  for (let element = 0; element < ControlValue.length; element++) {
+                            //    const value = ControlValue[element];
+                            //    filters[this.options.Filters[index].ActionParameterName] = value;
+                            //  }
+                            //}
+                            //else {
+                            filters[this.options.Filters[index].ActionParameterName] = ControlValue;
+                            //}
+                        }
+                        else {
+                            if (this.options.Filters[index].FilterType == FilterType.AutocompleteTextBox)
+                                ControlValue = ControlValue;
+                            if (this.options.Filters[index].FilterType == FilterType.TagInput)
+                                ControlValue = ControlValue;
+                            filters[this.options.Filters[index].ActionParameterName] = ControlValue;
+                        }
+                    }
+                    else {
+                        filters[this.options.Filters[index].ActionParameterName] = null;
+                    }
+                }
+                else {
+                    const ElementjQuerySelector = this.options.Filters[index].jQuerySelector;
+                    let ElementValue = document.querySelector(ElementjQuerySelector).value;
+                    if (ElementValue != undefined && ElementValue != null)
+                        filters[this.options.Filters[index].ActionParameterName] = ElementValue;
+                    else
+                        filters[this.options.Filters[index].ActionParameterName] = null;
+                }
+            }
+        }
+        return filters;
+    }
 }
 PagingComponent.decorators = [
     { type: Component, args: [{
@@ -6822,6 +6884,301 @@ 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">
+  {{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()"
+        #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()"
+        #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()"
+        #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()"
+        #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();
+    }
+    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) {
+        if (!this.removeLastOnBackspace || !this.tags.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.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) {
+        debugger;
+        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();
+    }
+}
+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 }]
+};
+
 let options;
 let AppInjector;
 FullCalendarModule.registerPlugins([
@@ -6871,7 +7228,8 @@ BBSFControlsModule.decorators = [
                     RepeaterItemFieldComponent,
                     RepeaterTableComponent,
                     BBSFDateTimePipe,
-                    BBSFDatePipe
+                    BBSFDatePipe,
+                    BTagsInputComponent
                 ],
                 imports: [
                     CommonModule,
@@ -7135,6 +7493,7 @@ class AutocompleteOptions extends ControlOptionsBase {
         // Params: object={};
         this.QueryParam = 'query';
         this.SelectedValue = null;
+        this.ItemWithImage = false;
     }
 }
 
@@ -7153,26 +7512,29 @@ class TagsInputOptions extends ControlOptionsBase {
         /** Allow User To Add Tags */
         this.CanAddTags = true;
         /** Set Max Number Of Tags That User Can Be Select  */
-        this.MaxNumberTags = 100;
+        this.MaxNumberTags = 5;
         /** Set Min Length Of Char To Call Search Function   */
         this.MinSearchLength = 1;
         /**Allow  Scrolle Option In Dropdown  */
         this.ScrollableOptions = true;
         /** Set Max Number Of Tags That will Be Appear ON Dropdown  */
-        this.MaxSearchResultsCount = 5;
+        this.MaxSearchResultsCount = 10;
         /**Value Name Of Tag Option In Dropdown */
-        this.DatasourceItemValue = "key";
+        this.DatasourceItemValue = "id";
         /**Text  Of Tag That Will Show In Dropdown */
-        this.DatasourceItemText = "value";
+        this.DatasourceItemText = "name";
         /**Set Query Param Name By Default It's 'query'*/
         this.QueryParamName = "query";
         /**Set Query Param Name By Default It's 'query'*/
         this.SelectedItemsParamName = "SelectedItems";
         /**Set Filter Param Name By Default It's 'query'*/
         this.FilterParamName = "";
+        this.DefaultImgUrl = "";
         /** allow add  value of  TagInput dosn't exist in list*/
         this.AllowNewSelection = false;
         this.ValidationToken = null;
+        this.TagInputMode = TagInputView.WithoutImage;
+        this.ShowDescription = true;
     }
 }
 
@@ -7223,6 +7585,10 @@ class PagingOptions {
         /**listens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll. */
         this.ScrollWindow = true;
         this.ForceDirection = ForceDirection.English;
+        /** Clear Filter button selector  */
+        this.ResetFilterButtonName = null;
+        this.DisableBlockUI = false;
+        this.StartPagingCallback = null;
     }
 }
 
@@ -7631,5 +7997,5 @@ var FileType;
  * Generated bundle index. Do not edit.
  */
 
-export { AppInjector, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, BBSFDatePipe, BBSFDateTimePipe, CalendarComponent, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxComponent, CheckBoxOptions, ConfirmationModalComponent, ConfirmationModalOptions, ControlLayout, ControlOptionsBase, ControlUtility, Country, CustomValidation, CustomValidator, DataType, DateInputComponent, DatePickerOptions, DropdownListComponent, DropdownListItem, DropdownOptions, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, FileType, FileUploadComponent, FileUploadModel, FileUploadOptions, FilterItem, FilterType, FontSize, ForceDirection, FormComponent, FormOptions, GlobalSettings, 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, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, ProfileImageUploadOptions, ProfileImageUploaderComponent, ProfilePictureDTO, RadioButtonComponent, RadioButtonItem, RadioButtonOptions, RangeNumber, RenderComponentService, RepeaterComponent, RepeaterField, RepeaterFieldBuilderComponent, RepeaterItemFieldComponent, RepeaterOptions, RepeaterTableComponent, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagsInputComponent, TagsInputDTO, TagsInputOptions, TextAreaComponent, TextAreaOptions, TextBoxOptions, TextboxComponent, ToggleSlideOptions, ToggleslideComponent, UploadPersonalImage, environment, options, ɵ0 };
+export { AppInjector, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, BBSFDatePipe, BBSFDateTimePipe, CalendarComponent, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxComponent, CheckBoxOptions, ConfirmationModalComponent, ConfirmationModalOptions, ControlLayout, ControlOptionsBase, ControlUtility, Country, CustomValidation, CustomValidator, DataType, DateInputComponent, DatePickerOptions, DefaultIntl, DropdownListComponent, DropdownListItem, DropdownOptions, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, FileType, FileUploadComponent, FileUploadModel, FileUploadOptions, FilterItem, FilterType, FontSize, ForceDirection, FormComponent, FormOptions, GlobalSettings, 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, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, ProfileImageUploadOptions, ProfileImageUploaderComponent, ProfilePictureDTO, RadioButtonComponent, RadioButtonItem, RadioButtonOptions, RangeNumber, RenderComponentService, RepeaterComponent, RepeaterField, RepeaterFieldBuilderComponent, RepeaterItemFieldComponent, RepeaterOptions, RepeaterTableComponent, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagInputView, TagsInputComponent, TagsInputDTO, TagsInputOptions, TextAreaComponent, TextAreaOptions, TextBoxOptions, TextboxComponent, ToggleSlideOptions, ToggleslideComponent, UploadPersonalImage, environment, options, ɵ0, BTagsInputComponent as ɵa };
 //# sourceMappingURL=bnsights-bbsf-controls.js.map