npm - @bnsights/bbsf-controls - Versions diffs - 1.0.64 → 1.0.66 - Mend

@bnsights/bbsf-controls 1.0.64 → 1.0.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/bundles/bnsights-bbsf-controls.umd.js CHANGED Viewed

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/angular'), require('@fullcalendar/daygrid'), require('@fullcalendar/timegrid'), require('@fullcalendar/list'), require('@fullcalendar/interaction'), require('@angular/core'), require('ng-block-ui'), require('@angular/forms'), require('@angular/http'), require('@angular/router'), require('ngx-toastr'), require('ngx-permissions'), require('@angular/cdk/overlay'), require('@ngrx/store-devtools'), require('@angular/common'), require('ngx-intl-tel-input'), require('@bnsights/bbsf-utilities'), require('ngx-bootstrap/datepicker'), require('rxjs'), require('ng-pick-datetime'), require('ng2-file-upload'), require('class-transformer'), require('ng-multiselect-dropdown'), require('angular2-multiselect-dropdown'), require('ngx-summernote'), require('ngx-mask'), require('@syncfusion/ej2-angular-popups'), require('ngx-dropzone'), require('angular-cropperjs'), require('ngx-image-cropper'), require('@ng-bootstrap/ng-bootstrap'), require('@ngx-translate/core'), require('@angular/common/http'), require('ngx-typeahead'), require('rxjs/operators'), require('ngx-tags-input'), require('@ng-select/ng-select'), require('ngx-infinite-scroll'), require('@agm/core'), require('@angular-material-extensions/google-maps-autocomplete'), require('@fullcalendar/core/locales/en-gb'), require('@fullcalendar/core/locales/ar'), require('ngx-bootstrap/typeahead'), require('@angular/material/slide-toggle'), require('@kolkov/angular-editor'), require('angular-ng-autocomplete'), require('ng-inline-svg'), require('sweetalert2'), require('@sweetalert2/ngx-sweetalert2')) :
-    typeof define === 'function' && define.amd ? define('@bnsights/bbsf-controls', ['exports', '@fullcalendar/angular', '@fullcalendar/daygrid', '@fullcalendar/timegrid', '@fullcalendar/list', '@fullcalendar/interaction', '@angular/core', 'ng-block-ui', '@angular/forms', '@angular/http', '@angular/router', 'ngx-toastr', 'ngx-permissions', '@angular/cdk/overlay', '@ngrx/store-devtools', '@angular/common', 'ngx-intl-tel-input', '@bnsights/bbsf-utilities', 'ngx-bootstrap/datepicker', 'rxjs', 'ng-pick-datetime', 'ng2-file-upload', 'class-transformer', 'ng-multiselect-dropdown', 'angular2-multiselect-dropdown', 'ngx-summernote', 'ngx-mask', '@syncfusion/ej2-angular-popups', 'ngx-dropzone', 'angular-cropperjs', 'ngx-image-cropper', '@ng-bootstrap/ng-bootstrap', '@ngx-translate/core', '@angular/common/http', 'ngx-typeahead', 'rxjs/operators', 'ngx-tags-input', '@ng-select/ng-select', 'ngx-infinite-scroll', '@agm/core', '@angular-material-extensions/google-maps-autocomplete', '@fullcalendar/core/locales/en-gb', '@fullcalendar/core/locales/ar', 'ngx-bootstrap/typeahead', '@angular/material/slide-toggle', '@kolkov/angular-editor', 'angular-ng-autocomplete', 'ng-inline-svg', 'sweetalert2', '@sweetalert2/ngx-sweetalert2'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bnsights = global.bnsights || {}, global.bnsights["bbsf-controls"] = {}), global.angular, global.dayGridPlugin, global.timeGridPlugin, global.listPlugin, global.interactionPlugin, global.ng.core, global.ngBlockUi, global.ng.forms, global.ng.http, global.ng.router, global.ngxToastr, global.ngxPermissions, global.ng.cdk.overlay, global.storeDevtools, global.ng.common, global.ngxIntlTelInput, global.bbsfUtilities, global.datepicker, global.rxjs, global.ngPickDatetime, global.ng2FileUpload, global.classTransformer, global.ngMultiselectDropdown, global.angular2MultiselectDropdown, global.ngxSummernote, global.ngxMask, global.ej2AngularPopups, global.ngxDropzone, global.angularCropperjs, global.ngxImageCropper, global.ngBootstrap, global.core$1, global.ng.common.http, global.ngxTypeahead, global.rxjs.operators, global.ngxTagsInput, global.ngSelect, global.ngxInfiniteScroll, global.core, global.googleMapsAutocomplete, global.enGbLocale, global.ArLocale, global.typeahead, global.ng.material.slideToggle, global.angularEditor, global.angularNgAutocomplete, global.ngInlineSvg, global.Swal, global.ngxSweetalert2));
-})(this, (function (exports, angular, dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin, i0, ngBlockUi, forms, http, router, ngxToastr, ngxPermissions, overlay, storeDevtools, common, ngxIntlTelInput, bbsfUtilities, datepicker, rxjs, ngPickDatetime, ng2FileUpload, classTransformer, ngMultiselectDropdown, angular2MultiselectDropdown, ngxSummernote, ngxMask, ej2AngularPopups, ngxDropzone, angularCropperjs, ngxImageCropper, ngBootstrap, core$1, http$1, ngxTypeahead, operators, ngxTagsInput, ngSelect, ngxInfiniteScroll, core, googleMapsAutocomplete, enGbLocale, ArLocale, typeahead, slideToggle, angularEditor, angularNgAutocomplete, ngInlineSvg, Swal, ngxSweetalert2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/angular'), require('@fullcalendar/daygrid'), require('@fullcalendar/timegrid'), require('@fullcalendar/list'), require('@fullcalendar/interaction'), require('@angular/core'), require('ng-block-ui'), require('@angular/forms'), require('@angular/http'), require('@angular/router'), require('ngx-toastr'), require('ngx-permissions'), require('@angular/cdk/overlay'), require('@ngrx/store-devtools'), require('@angular/common'), require('ngx-intl-tel-input'), require('@bnsights/bbsf-utilities'), require('ngx-bootstrap/datepicker'), require('rxjs'), require('ng-pick-datetime'), require('ng2-file-upload'), require('class-transformer'), require('ng-multiselect-dropdown'), require('angular2-multiselect-dropdown'), require('ngx-summernote'), require('ngx-mask'), require('@syncfusion/ej2-angular-popups'), require('@ng-bootstrap/ng-bootstrap'), require('ngx-dropzone'), require('angular-cropperjs'), require('ngx-image-cropper'), require('@ngx-translate/core'), require('@angular/common/http'), require('ngx-typeahead'), require('rxjs/operators'), require('ngx-tags-input'), require('@ng-select/ng-select'), require('ngx-infinite-scroll'), require('@agm/core'), require('@angular-material-extensions/google-maps-autocomplete'), require('@fullcalendar/core/locales/en-gb'), require('@fullcalendar/core/locales/ar'), require('ngx-bootstrap/typeahead'), require('@angular/material/slide-toggle'), require('@kolkov/angular-editor'), require('angular-ng-autocomplete'), require('ng-inline-svg'), require('sweetalert2'), require('@sweetalert2/ngx-sweetalert2')) :
+    typeof define === 'function' && define.amd ? define('@bnsights/bbsf-controls', ['exports', '@fullcalendar/angular', '@fullcalendar/daygrid', '@fullcalendar/timegrid', '@fullcalendar/list', '@fullcalendar/interaction', '@angular/core', 'ng-block-ui', '@angular/forms', '@angular/http', '@angular/router', 'ngx-toastr', 'ngx-permissions', '@angular/cdk/overlay', '@ngrx/store-devtools', '@angular/common', 'ngx-intl-tel-input', '@bnsights/bbsf-utilities', 'ngx-bootstrap/datepicker', 'rxjs', 'ng-pick-datetime', 'ng2-file-upload', 'class-transformer', 'ng-multiselect-dropdown', 'angular2-multiselect-dropdown', 'ngx-summernote', 'ngx-mask', '@syncfusion/ej2-angular-popups', '@ng-bootstrap/ng-bootstrap', 'ngx-dropzone', 'angular-cropperjs', 'ngx-image-cropper', '@ngx-translate/core', '@angular/common/http', 'ngx-typeahead', 'rxjs/operators', 'ngx-tags-input', '@ng-select/ng-select', 'ngx-infinite-scroll', '@agm/core', '@angular-material-extensions/google-maps-autocomplete', '@fullcalendar/core/locales/en-gb', '@fullcalendar/core/locales/ar', 'ngx-bootstrap/typeahead', '@angular/material/slide-toggle', '@kolkov/angular-editor', 'angular-ng-autocomplete', 'ng-inline-svg', 'sweetalert2', '@sweetalert2/ngx-sweetalert2'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bnsights = global.bnsights || {}, global.bnsights["bbsf-controls"] = {}), global.angular, global.dayGridPlugin, global.timeGridPlugin, global.listPlugin, global.interactionPlugin, global.ng.core, global.ngBlockUi, global.ng.forms, global.ng.http, global.ng.router, global.ngxToastr, global.ngxPermissions, global.ng.cdk.overlay, global.storeDevtools, global.ng.common, global.ngxIntlTelInput, global.bbsfUtilities, global.datepicker, global.rxjs, global.ngPickDatetime, global.ng2FileUpload, global.classTransformer, global.ngMultiselectDropdown, global.angular2MultiselectDropdown, global.ngxSummernote, global.ngxMask, global.ej2AngularPopups, global.ngBootstrap, global.ngxDropzone, global.angularCropperjs, global.ngxImageCropper, global.core$1, global.ng.common.http, global.ngxTypeahead, global.rxjs.operators, global.ngxTagsInput, global.ngSelect, global.ngxInfiniteScroll, global.core, global.googleMapsAutocomplete, global.enGbLocale, global.ArLocale, global.typeahead, global.ng.material.slideToggle, global.angularEditor, global.angularNgAutocomplete, global.ngInlineSvg, global.Swal, global.ngxSweetalert2));
+})(this, (function (exports, angular, dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin, i0, ngBlockUi, forms, http, router, ngxToastr, ngxPermissions, overlay, storeDevtools, common, ngxIntlTelInput, bbsfUtilities, datepicker, rxjs, ngPickDatetime, ng2FileUpload, classTransformer, ngMultiselectDropdown, angular2MultiselectDropdown, ngxSummernote, ngxMask, ej2AngularPopups, ngBootstrap, ngxDropzone, angularCropperjs, ngxImageCropper, core$1, http$1, ngxTypeahead, operators, ngxTagsInput, ngSelect, ngxInfiniteScroll, core, googleMapsAutocomplete, enGbLocale, ArLocale, typeahead, slideToggle, angularEditor, angularNgAutocomplete, ngInlineSvg, Swal, ngxSweetalert2) { 'use strict';
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -1761,8 +1761,7 @@
     MultiLingualTextBoxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-MultiLingualTextBox',
-                    template: "<div class=\"b-control b-multilangual-textbox\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <div class=\"form-group row\" [formGroup]=\"MultiLanguagegroup\">\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowEnglishTextBox\">\r\n          <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}}\"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish)\"\r\n                  class=\"text-danger Required-text\" 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 align-items-center\">\r\n              <div class=\"svg svg-icon-grey\" [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 class=\"form-control bnsights-control\"\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              <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputEnglish)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\" *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n              {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"showEnglishCharsLimitMsg\">\r\n              <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n                {{englishMaxLimitWarningMsg}}\r\n              </span>\r\n            </div>\r\n            <div class=\"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            <!-- <div *ngIf=\"EnglishFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowArabicTextBox\">\r\n          <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}}\"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue}}\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\" class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n          <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group align-items-center\">\r\n              <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPositionEN==1)?'right-icon':'left-icon'\" *ngIf=\"options.Icon!=null\">\r\n                <span [inlineSVG]=\"options.Icon\"></span>\r\n              </div>\r\n              <input class=\"form-control bnsights-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\" [(ngModel)]=\"options.Value.Arabic\"\r\n                     (change)=\"trimControlValue('Ar')\" #userinputArabic>\r\n\r\n              <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputArabic)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 float-end word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\" *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n              {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"showArabicCharsLimitMsg\">\r\n              <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n                {{arabicMaxLimitWarningMsg}}\r\n              </span>\r\n            </div>\r\n            <div class=\"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            <!-- <div *ngIf=\"ArabicFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
-                    styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
+                    template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"form-group bbsf-control bbsf-multilang-textbox\" [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\">\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\"\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\">\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 = function () { return [
@@ -1952,8 +1951,7 @@
     TextAreaComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-TextArea',
-                    template: "<div class=\"b-control b-textarea\">\r\n    <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}}\" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n          *ngIf=\"!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)?'': ((options.HideLabel)?'col-md-12':'col-md-9')\">\r\n          <div class=\"input-group\">\r\n            <textarea class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n                      (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n                      dir=\"{{options.ForceDirection==2?'rtl':''}}\" aria-describedby=\"email-error\"\r\n                      aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n                      [class.is-invalid]=\"TextAreaFormControl.invalid && TextAreaFormControl.touched\"\r\n                      placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n                      (change)=\"trimControlValue()\" rows=\"{{options.Rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.Cols}}\"\r\n                      maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"  [(ngModel)]=\"options.Value\"\r\n                      (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                      #TextAreainput></textarea>\r\n            <div class=\"input-group-append\" *ngIf=\"options.EnableCopyToClipboard\">\r\n              <span class=\"input-group-text\" (click)=\"copyInputMessage(TextAreainput)\">\r\n                <i class=\"fas fa-copy\"></i>\r\n              </span>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} words</div>\r\n          </div>\r\n          <div class=\"text-danger Required-text\"\r\n               *ngIf=\"(TextAreaFormControl.invalid && TextAreaFormControl.touched)\">\r\n            {{getErrorValidation(TextAreaFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"showCharsLimitMsg\">\r\n            <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n              {{maxLimitWarningMsg}}\r\n            </span>\r\n          </div>\r\n          <div class=\"control-desc text-dark\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n          <!-- <div *ngIf=\"TextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                    styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
+                    template: "<div class=\"form-group bbsf-control bbsf-textarea\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.ExtraClasses}}\"\r\n                (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n                dir=\"{{options.ForceDirection==2?'rtl':''}}\" aria-describedby=\"email-error\"\r\n                aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n                [class.is-invalid]=\"TextAreaFormControl.invalid && TextAreaFormControl.touched\"\r\n                placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n                (change)=\"trimControlValue()\" rows=\"{{options.Rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.Cols}}\"\r\n                maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\" [(ngModel)]=\"options.Value\"\r\n                (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    <!-- requiredText-->\r\n    <div class=\"bbsf-validation\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n         *ngIf=\"(TextAreaFormControl.invalid && TextAreaFormControl.touched)\">\r\n      {{getErrorValidation(TextAreaFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n"
                 },] }
     ];
     TextAreaComponent.ctorParameters = function () { return [
@@ -2386,8 +2384,7 @@
     MultiLingualTextAreaComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-MultiLingualTextArea',
-                    template: "<div class=\"b-control b-multilangual-textarea\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <div class=\"form-group row\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowEngishTextArea\">\r\n          <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}} \"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInEnglish\"\r\n                  class=\"text-danger Required-text\" 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              <textarea class=\"form-control bnsights-control\" 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              <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n\r\n\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 float-end word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\"\r\n                 *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n              {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"showEnglishCharsLimitMsg\">\r\n              <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n                {{englishMaxLimitWarningMsg}}\r\n              </span>\r\n            </div>\r\n            <div class=\"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\r\n            <!-- <div *ngIf=\"EnglishTextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowArabicTextArea\">\r\n\r\n          <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}} \"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\"\r\n                  class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n          <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group\">\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              <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputTextAreaArabic)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 float-end word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\"\r\n                 *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n              {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"showArabicCharsLimitMsg\">\r\n              <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n                {{arabicMaxLimitWarningMsg}}\r\n              </span>\r\n            </div>\r\n            <div class=\"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            <!-- <div *ngIf=\"ArabicTextAreaFormControl.valid\">{{resetError()}}</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</div>\r\n",
-                    styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
+                    template: "<div [formGroup]=\"group\">\r\n  <div class=\"form-group bbsf-control bbsf-multilang-textarea\" [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\">\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\" 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\">\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 = function () { return [
@@ -2500,8 +2497,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'BBSF-CheckBox',
-                    template: "<div class=\"b-control b-checkbox\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"form-check form-check-custom form-check-solid  b-label {{options.LabelExtraClasses}}\">\r\n      <input class=\"form-check-input {{options.ExtraClasses}} \" dir=\"{{options.ForceDirection==2?'rtl':''}}\" [checked]=\"options.Value==true?true:null\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n             (change)=\"onValueChanged()\"\r\n             [class.is-invalid]=\"CheckBoxFormControl.invalid && CheckBoxFormControl.touched\"\r\n             id=\"{{options.Name}}\" type=\"checkbox\" value=\"options.Value==true?true:null\">\r\n      <span class=\"form-check-label\">{{options.LabelValue}}</span>\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\r\n    <div class=\"text-danger Required-text\"\r\n         *ngIf=\"(CheckBoxFormControl.invalid && CheckBoxFormControl.touched)\">\r\n      {{getErrorValidation(CheckBoxFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n      <div class=\"control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    <!-- <div *ngIf=\"CheckBoxFormControl.valid\">{{resetError()}} </div> -->\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n  </div>\r\n</div>\r\n",
-                    styles: [".form-check-input{width:1.75rem;height:1.75rem;margin-top:-.125rem;vertical-align:top;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid rgba(0,0,0,.25);background-size:60% 60%;transition:background-color .15s ease-in-out,background-position .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;position:initial;margin-right:1rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion: reduce){.form-check-input{transition:none}}.form-check-input[type=checkbox]{border-radius:.45em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#b5b5c3;outline:0;box-shadow:none}.form-check-input:checked{background-color:#009ef7;border-color:#009ef7}.form-check-input:checked[type=checkbox]{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23FFFFFF'/%3e%3c/svg%3e\")}.form-check-input:checked[type=radio]{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFFFFF'/%3e%3c/svg%3e\")}.form-check-input[type=checkbox]:indeterminate{background-color:#009ef7;border-color:#009ef7;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{opacity:.5}\n"]
+                    template: "<div class=\"form-group bbsf-control bbsf-checkbox\" [formGroup]=\"group\">\r\n  <div class=\"bbsf-input-container\">\r\n    <!--input-->\r\n    <input class=\"bbsf-checkbox-input {{options.ExtraClasses}}\" dir=\"{{options.ForceDirection==2?'rtl':''}}\" [checked]=\"options.Value==true?true:null\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n           (change)=\"onValueChanged()\"\r\n           [class.is-invalid]=\"CheckBoxFormControl.invalid && CheckBoxFormControl.touched\"\r\n           id=\"{{options.Name}}\" type=\"checkbox\" value=\"options.Value==true?true:null\">\r\n\r\n    <div class=\"label-subtext-container\">\r\n      <!--label-->\r\n      <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n        {{options.LabelValue}}\r\n        <!--Asterisk-->\r\n        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n      </label>\r\n      <div class=\"subtext-container\">\r\n        <!-- LabelDescription-->\r\n        <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n        <!-- requiredText-->\r\n        <div class=\"bbsf-validation\" *ngIf=\"(CheckBoxFormControl.invalid && CheckBoxFormControl.touched)\">\r\n          {{getErrorValidation(CheckBoxFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n"
                 },] }
     ];
     CheckBoxComponent.ctorParameters = function () { return [
@@ -2674,8 +2670,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'BBSF-DropdownList',
-                    template: "<div class=\"b-control b-dropdown-list\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}} \" [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      <ng-select *ngIf=\"options.DisableBootstrapSelect==false\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n        [bindValue]=\"options.ItemTempletkey\" [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\"\r\n        [notFoundText]=\"options.NotFoundText\" [maxSelectedItems]=\"options.LimitSelection\"\r\n        [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n        [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n        [selectableGroup]=\"true\" [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\"\r\n        [(ngModel)]=\"options.SelectedItems\" (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n        [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"\r\n        [closeOnSelect]=\"options.SingleSelection  ? true : false\">\r\n\r\n        <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\"ks-cboxtags\">\r\n            <input id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\"\r\n              class=\" \" /> <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div title=\"{{item.disabled ? options.DisabledItemsTooltipValue : ''}}\">\r\n            <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\r\n          </div>\r\n        </ng-template>\r\n\r\n      </ng-select>\r\n\r\n      <select *ngIf=\"options.DisableBootstrapSelect\" class=\"form-control bnsights-control\"\r\n        dir=\"{{options.ForceDirection==2?'rtl':''}}\" (change)=\"onItemSelect()\" [(ngModel)]=\"options.SelectedItems\" [disabled]=\"options.IsDisabled\" formControlName=\"{{options.Name}}\">\r\n        <option value=\"\" disabled>--{{UtilityService.getResourceValue(\"select\")}}--</option>\r\n        <option *ngFor=\"let item of options.DataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n          {{item.value}}\r\n        </option>\r\n      </select>\r\n\r\n      <div class=\"text-danger Required-text\"\r\n        *ngIf=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n        {{getErrorValidation(DropdownListFormControl.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\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <!-- <div *ngIf=\"DropdownListFormControl.valid\">{{resetError()}}</div> -->\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n        {{resetError()}}</div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    styles: [".cuppa-dropdown{background-color:#fff}.arrow-up,.arrow-down{border-left:none!important;border-right:none!important}.dropdown-list{padding-top:0!important}.c-token{background-color:#6495ed}.pure-checkbox .selected-item{background-color:#6495ed;color:#fff}\n"]
+                    template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\"\r\n            aria-required=\"true\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input enabled bootstrap select-->\r\n      <ng-select class=\"form-control\" *ngIf=\"options.DisableBootstrapSelect==false\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n                 [bindValue]=\"options.ItemTempletkey\" [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\"\r\n                 [notFoundText]=\"options.NotFoundText\" [maxSelectedItems]=\"options.LimitSelection\"\r\n                 [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n                 [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n                 [selectableGroup]=\"true\" [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\"\r\n                 [(ngModel)]=\"options.SelectedItems\" (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n                 [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"\r\n                 [closeOnSelect]=\"options.SingleSelection  ? true : false\">\r\n        <!--No checkbox-->\r\n        <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <label class=\"bbsf-label\" title=\"{{item.disabled ? options.DisabledItemsTooltipValue : ''}}\" id={{item.key}}>{{item.value}}</label>\r\n        </ng-template>\r\n        <!--checkbox-->\r\n        <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\" bbsf-checkbox\">\r\n            <div class=\"bbsf-input-container align-items-center\">\r\n              <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n              <div class=\"label-subtext-container\">\r\n                <label class=\"bbsf-label\" id={{item.key}}>{{item.value}}</label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </ng-select>\r\n      <!--input disabled bootstrap select-->\r\n      <select *ngIf=\"options.DisableBootstrapSelect\" class=\"form-control\"\r\n              dir=\"{{options.ForceDirection==2?'rtl':''}}\" (change)=\"onItemSelect()\" [(ngModel)]=\"options.SelectedItems\" [disabled]=\"options.IsDisabled\" formControlName=\"{{options.Name}}\">\r\n        <option value=\"\" disabled>--{{UtilityService.getResourceValue(\"select\")}}--</option>\r\n        <option *ngFor=\"let item of options.DataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n          {{item.value}}\r\n        </option>\r\n      </select>\r\n      <div class=\"subtext-container\">\r\n        <!-- LabelDescription-->\r\n        <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n        <!-- requiredText-->\r\n        <div class=\"bbsf-validation\" *ngIf=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n          {{getErrorValidation(DropdownListFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n"
                 },] }
     ];
     DropdownListComponent.ctorParameters = function () { return [
@@ -3540,7 +3535,7 @@
     };
     var ImageUploaderComponent = /** @class */ (function () {
-        function ImageUploaderComponent(zone, controlUtility, controlContainer, ImageUplaoderControlHost, UtilityService, controlValidationService, globalSettings) {
+        function ImageUploaderComponent(zone, controlUtility, controlContainer, ImageUplaoderControlHost, UtilityService, controlValidationService, globalSettings, modalService) {
             var _this = this;
             this.zone = zone;
             this.controlUtility = controlUtility;
@@ -3549,6 +3544,7 @@
             this.UtilityService = UtilityService;
             this.controlValidationService = controlValidationService;
             this.globalSettings = globalSettings;
+            this.modalService = modalService;
             this.files = [];
             this.OnChange = new i0.EventEmitter();
             this.ValidationMessage = "";
@@ -3658,8 +3654,8 @@
             }
             this.group.addControl(this.options.Name, new forms.FormControl(''));
             this.ImageUploadFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
-            // if (this.options.Value != null)
-            //   this.group.get(this.options.Name).setValue(this.options.Value);
+            if (this.options.Value != null)
+                this.group.get(this.options.Name).setValue(this.options.Value);
             if (this.options.LabelKey != null && this.options.LabelKey != "")
                 this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
             if (this.options.CustomValidation.length > 0) {
@@ -3761,14 +3757,11 @@
                             _this.group.get(_this.options.Name).setValue(FileObject_1);
                             _this.files = [];
                             (_a = _this.files).push.apply(_a, __spreadArray([], __read(event.addedFiles)));
-                            _this.options.Value = FileObject_1;
                         }
                         var originalValue = _this.ImageUploadFormControl.value;
                         if (_this.options.PatchFunction && _this.options.PatchPath && _this.ImageUploadFormControl.valid) {
                             _this.controlUtility.patchControlValue(originalValue, _this.options.PatchFunction, _this.options.PatchPath);
                         }
-                        //Use this line to enable two way binding.
-                        _this.options.Value = originalValue;
                         _this.OnChange.emit(originalValue);
                     };
                 }
@@ -3793,8 +3786,6 @@
             }
             this.group.get(this.options.Name).setValue(ItemList);
             this.OnChange.emit(this.group.get(this.options.Name).value);
-            //Use this line to enable two way binding.
-            this.options.Value = this.group.get(this.options.Name).value;
         };
         ImageUploaderComponent.prototype.cropImage = function () {
             var _this = this;
@@ -3828,7 +3819,6 @@
                 BlobFile.name = _this.EventFile.name;
                 FilesArray.push(FileObject);
                 _this.group.get(_this.options.Name).setValue(FileObject);
-                _this.options.Value = FileObject;
                 _this.files = [];
                 _this.files.push(BlobFile);
                 _this.openModal(false);
@@ -3852,8 +3842,7 @@
     ImageUploaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-ImageUpload',
-                    template: "<div class=\"b-control b-image-upload\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}}\" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">* </span>\r\n\r\n      <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'>\r\n        <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\">\r\n        </i>\r\n      </ejs-tooltip>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <div *ngIf=\"options.AllowDropZone\" style=\"max-width:200px !important; max-height: 200px !important;\" class=\"d-inline-flex h-auto w-auto overflow-hidden m-0 {{options.ExtraClasses}}\" ngx-dropzone [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" [multiple]=\"options.IsMultiple\"\r\n           (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\" [maxFileSize]=\"maxFileSize\"\r\n           id=\"{{options.Name}}\" [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n        <ngx-dropzone-label class=\"h-100 m-0\" style=\"max-width: 200px  !important;\">\r\n          <div class=\"h-100\">\r\n            <img [src]=\"ImageSource\" class=\"h-100 w-100\" />\r\n          </div>\r\n        </ngx-dropzone-label>\r\n\r\n\r\n        <ngx-dropzone-image-preview style=\"max-width:200px !important; max-height: 200px !important;\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                                    ngProjectAs=\"ngx-dropzone-preview\" class=\"b-img-preview w-100 h-100 m-0\">\r\n        </ngx-dropzone-image-preview>\r\n      </div>\r\n\r\n      <div class=\"ImageUploadClassSelector\" *ngIf=\"!options.AllowDropZone\">\r\n        <ngx-dropzone-label class=\"h-100 m-0\" *ngIf=\"files.length==0\">\r\n          <div style=\"max-width:200px !important; max-height: 200px !important;\" class=\"h-100 file-fake-input\" #element (click)=\"showImageUploader(element)\">\r\n            <img [src]=\"ImageSource\" class=\"h-100 w-100\" />\r\n          </div>\r\n        </ngx-dropzone-label>\r\n\r\n        <div style=\"border: none !important; max-width:200px !important; max-height: 200px !important;\" class=\" fileSelector customImageUploadPlacment d-inline-flex h-auto w-auto overflow-hidden m-0 {{options.ExtraClasses}}\" ngx-dropzone [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" [multiple]=\"options.IsMultiple\"\r\n             (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\" [maxFileSize]=\"maxFileSize\"\r\n             id=\"{{options.Name}}\" [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n\r\n\r\n\r\n          <ngx-dropzone-image-preview style=\"max-width:200px !important; max-height: 200px !important;\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                                      ngProjectAs=\"ngx-dropzone-preview\" class=\"b-img-preview w-100 h-100 m-0\">\r\n          </ngx-dropzone-image-preview>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div id=\"mdlSample\" class=\"modal fade\" role=\"dialog\" style=\"z-index: 11 !important ;\"\r\n           [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n        <div class=\"modal-dialog modal-lg\">\r\n          <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n              <h4 class=\"modal-title\">\r\n                {{UtilityService.getResourceValue(\"CropImage\")}}\r\n              </h4>\r\n              <button type=\"button\" class=\"btn-close\" aria-hidden=\"true\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"openModal(false)\"></button>\r\n            </div>\r\n            <div class=\"modal-body py-5\">\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 style=\"text-align:center;\">\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"0.1\" title=\"Zoom In\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(0.1)\">\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\" data-method=\"zoom\" data-option=\"-0.1\" title=\"Zoom Out\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(-0.1)\">\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\" data-method=\"move\" data-option=\"-10\" data-second-option=\"0\" title=\"Move Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(-10, 0)\" aria-describedby=\"tooltip631939\">\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\" data-method=\"move\" data-option=\"10\" data-second-option=\"0\" title=\"Move Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(10, 0)\">\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\" data-method=\"move\" data-option=\"0\" data-second-option=\"-10\" title=\"Move Up\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, -10)\">\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\" data-method=\"move\" data-option=\"0\" data-second-option=\"10\" title=\"Move Down\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, 10)\">\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\" data-method=\"rotate\" data-option=\"-45\" title=\"Rotate Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(-45)\" aria-describedby=\"tooltip236044\">\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\" data-method=\"rotate\" data-option=\"45\" title=\"Rotate Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(45)\">\r\n                      <span class=\"fa fa-redo-alt\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n            <div class=\"modal-footer\" align=\"right\">\r\n              <button type=\"button\" id=\"btnClose\" class=\"btn btn-default\" (click)=\"openModal(false)\">\r\n                <i class=\"fa fa-times fa-fw\"></i> {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n              </button>\r\n              <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-success\">\r\n                <i class=\"fa fa-check fa-fw\"></i>\r\n                {{UtilityService.getResourceValue(\"Crop\")}}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"text-danger Required-text\" *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n        {{getErrorValidation(ImageUploadFormControl.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      <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</div>\r\n",
-                    styles: [".e-tip-content{background-color:#afafaf;color:#fff;padding-left:10px;padding-right:10px;padding-top:2px}.my-drop-zone{border:dotted 3px lightgray}.nv-file-over{border:dotted 3px red}.another-file-over-class{border:dotted 3px green}html,body{height:100%}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.modal-content{position:relative;background-color:#fefefe;margin:auto;padding:0;border:1px solid #888;width:80%;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s}@keyframes animatetop{0%{top:-300px;opacity:0}to{top:0;opacity:1}}.close{color:#fff;float:right;font-size:28px;font-weight:bold}.ImageUploadClassSelector img{cursor:pointer}.d-inline-flex.h-auto.m-0.overflow-hidden.w-auto.ng-untouched.ng-pristine.ng-valid{border-radius:40px;border-color:#c7c7c7}\n"]
+                    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 *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    <!--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        <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\">\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=\"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"
                 },] }
     ];
     ImageUploaderComponent.ctorParameters = function () { return [
@@ -3863,7 +3852,8 @@
         { type: forms.FormGroupDirective },
         { type: bbsfUtilities.UtilityService },
         { type: bbsfUtilities.ControlValidationService },
-        { type: GlobalSettings }
+        { type: GlobalSettings },
+        { type: ngBootstrap.NgbModal }
     ]; };
     ImageUploaderComponent.propDecorators = {
         fileInput: [{ type: i0.ViewChild, args: ['fileInput', { static: false },] }],
@@ -4748,8 +4738,7 @@
         { type: i0.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 {{options.LabelExtraClasses}}\" [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      <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                      (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 class=\"text-danger Required-text\" *ngIf=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n          {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n        </div>\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()}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
+                    template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"form-group bbsf-control bbsf-tags-input\" [formGroup]=\"TagsFormGroup\">\r\n    <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n      <!--label-->\r\n      <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n        {{options.LabelValue}}\r\n        <!--Asterisk-->\r\n        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n      </label>\r\n      <!--input-->\r\n      <div class=\"bbsf-input-container\">\r\n        <b-tags-input type=\"text\" class=\"form-control {{options.ExtraClasses}}\"\r\n                      dir=\"{{options.ForceDirection==2?'rtl':''}}\" [disabled]=\"options.IsDisabled\" aria-describedby=\"email-error\"\r\n                      aria-invalid=\"true\" formControlName=\"tags\"\r\n                      [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\" placeholder=\"{{options.Placeholder}}\"\r\n                      id=\"{{options.Name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n                      removeLastOnBackspace=\"{{options.RemoveLastOnBackspace}}\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n                      [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey\r\n                      scrollableOptions=\"{{options.ScrollableOptions}}\" scrollableOptionsInView=\"{{options.MaxSearchResultsCount}}\"\r\n                      (keydown)=\"AddTag($event,SearchKey)\" [ViewMode]=\"options.TagInputMode\"\r\n                      maxTags=\"{{options.MaxNumberTags}}\" minLengthBeforeOptions=\"{{options.MinSearchLength}}\"\r\n                      [showDescription]=\"options.ShowDescription\" [defaultImageURL]=\"options.DefaultImgUrl\" name=\"tags\"\r\n                      (onBlurInput)=\"onTagsInputBlur(SearchKey)\">\r\n        </b-tags-input>\r\n      </div>\r\n    </div>\r\n    <div class=\"subtext-container\">\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" *ngIf=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n        {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">{{resetError()}}</div>\r\n  </div>\r\n\r\n</div>\r\n"
                 },] }
     ];
     TagsInputComponent.ctorParameters = function () { return [
@@ -5087,8 +5076,7 @@
     PagingComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-Paging',
-                    template: "<div class=\"b-control b-paging\" *ngIf=\"(result.length > 0)\">\r\n  <div class=\"d-flex justify-content-between align-items-center\" *ngIf=\"!options.IsLoadMoreControl\">\r\n    <div class=\"b-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    <div class=\"b-pages d-flex\" *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=\"b-items ml-3\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong> {{Pages}}</strong> {{pagesText}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <div class=\"row\" style=\"align-self:center; align-items: center; text-align: center;\" *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-info\" (click)=\"onScrollDown()\" *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>\r\n",
-                    styles: [".ngx-pager-container{text-align:center;padding:25px 0 0}.ngx-pager-container li{display:inline-block;margin:0 4px}.ngx-pager-container li a{display:block;width:26px;height:26px;border:1px solid #707070;text-align:center;color:#3e4e59;font-size:14px;line-height:24px;border-radius:5px;text-decoration:none}.ngx-pager-container li a:hover{color:#fff;background:#0a0e03}.ngx-pager-container li.invisible{display:none}.ngx-pager-container li.active{background:#0a0e03;border-radius:5px}.ngx-pager-container li.active a{border:none;color:#fff}\n"]
+                    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 = function () { return [
@@ -5569,8 +5557,7 @@
     TextboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-TextBox',
-                    template: "<div class=\"b-control b-textbox\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\" [ngClass]=\"(options.NoMargin==true)?'':'NoMargin'\">\r\n    <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}} \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" *ngIf=\"!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)?'': ((options.HideLabel)?'col-md-12':'col-md-9')\">\r\n      <div class=\"input-group align-items-center\" *ngIf=\"MaskPattern!=null&&MaskPattern!=''\">\r\n        <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPosition==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n          <span [inlineSVG]=\"options.Icon\"></span>\r\n        </div>\r\n        <input [mask]=\"MaskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\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               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        <div class=\"input-group-append\">\r\n          <span class=\"input-group-text\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n            <i class=\"fas fa-copy\"></i>\r\n          </span>\r\n        </div>\r\n        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n\r\n      </div>\r\n\r\n      <div class=\"input-group align-items-center\" *ngIf=\"MaskPattern==null||MaskPattern==''\">\r\n        <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPosition==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n          <span [inlineSVG]=\"options.Icon\"></span>\r\n        </div>\r\n        <input class=\"form-control bnsights-control {{options.ExtraClasses}} \"\r\n               dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n               (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n               maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n               aria-describedby=\"email-error\"\r\n               aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"{{getInputType(options.Type)}}\"\r\n               [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n               placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n               (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value\"\r\n               (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" [readonly]=\"options.IsReadonly\"\r\n               #userinput>\r\n        <div class=\"input-group-append\" *ngIf=\"options.EnableCopyToClipboard\">\r\n          <span class=\"input-group-text\" (click)=\"copyInputMessage(userinput)\">\r\n            <i class=\"fas fa-copy\"></i>\r\n          </span>\r\n        </div>\r\n        <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n      </div>\r\n      <div class=\"text-danger Required-text\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n           *ngIf=\"(TextBoxFormControl.invalid && TextBoxFormControl.touched)\">\r\n        {{getErrorValidation(TextBoxFormControl.errors|keyvalue)}}\r\n      </div>\r\n      <div *ngIf=\"showCharsLimitMsg\">\r\n        <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n          {{maxLimitWarningMsg}}\r\n        </span>\r\n      </div>\r\n      <div class=\"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  </div>\r\n</div>\r\n",
-                    styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
+                    template: "<div class=\"form-group bbsf-control bbsf-textbox\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--MaskPattern-->\r\n    <div *ngIf=\"MaskPattern!=null&&MaskPattern!=''\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\">\r\n        <span [inlineSVG]=\"options.Icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.ExtraClasses}}\"\r\n             [mask]=\"MaskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\r\n             dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n             type=\"{{getInputType(options.Type)}}\" [(ngModel)]=\"options.Value\"\r\n             [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [readonly]=\"options.IsReadonly\"\r\n             (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n             #userinput>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\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\" [ngClass]=\"(options.IconPosition==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 {{options.ExtraClasses}} \"\r\n             dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n             (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n             maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n             aria-describedby=\"email-error\"\r\n             aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"{{getInputType(options.Type)}}\"\r\n             [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value\"\r\n             (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" [readonly]=\"options.IsReadonly\"\r\n             #userinput>\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    <!-- requiredText-->\r\n    <div class=\"bbsf-validation\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n         *ngIf=\"(TextBoxFormControl.invalid && TextBoxFormControl.touched)\">\r\n      {{getErrorValidation(TextBoxFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">{{resetError()}}</div>\r\n</div>\r\n"
                 },] }
     ];
     TextboxComponent.ctorParameters = function () { return [
@@ -6474,8 +6461,7 @@
     RepeaterComponent.decorators = [
         { type: i0.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\"> <span\r\n            [innerHTML]=\"options.DeleteButtonText\"></span></button>\r\n</ng-template>\r\n\r\n<ng-template #add>\r\n    <button class=\"{{options.AddButtonExtraClasses}}\" type=\"button\" (click)=\"addItem()\"><span\r\n            [innerHTML]=\"options.AddButtonText\"></span></button>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\n<!-- <ng-template adHost></ng-template>    -->\r\n",
-                    styles: [""]
+                    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 = function () { return []; };
@@ -6622,7 +6608,7 @@
             /** Allow to Upload Multiple File  */
             _this.IsMultiple = false;
             /** Allow to Use Drop Zone  */
-            _this.AllowDropZone = false;
+            _this.AllowDropZone = true;
             /** Set List of Custom Attribute to FileInput  */
             _this.FileUploadAcceptsTypes = [exports.ImageType.ImageTypes];
             return _this;
@@ -7465,8 +7451,7 @@
     RepeaterItemFieldComponent.decorators = [
         { type: i0.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>",
-                    styles: [""]
+                    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 = function () { return []; };
@@ -7578,7 +7563,7 @@
     RepeaterTableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-repeater-table',
-                    template: "<div class=\"b-control b-repeater-table\">\r\n    <table class=\"{{options.RepeaterTableExtraClasses}}\">\r\n        <thead>\r\n            <tr class=\"{{options.RepeaterTableRowExtraClasses}}\">\r\n                <th *ngFor=\"let item of options.RepeaterStructure\" [hidden]=\"item.IsHiddenInput\" class=\"min-w-150px\">{{item.HeaderTitle}}</th>\r\n                <th *ngIf=\"!options.DisableDeleteButton\">{{utilityService.getResourceValue(options.ActionLabelKey)}}</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\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 class=\"d-flex align-items-center\" *ngIf=\"!options.DisableDeleteButton\">\r\n                    <button class=\"{{options.DeleteButtonExtraClasses}}\" type=\"button\" (click)=\"deleteItem(i)\"\r\n                        [disabled]=\"(items.length ==options.MinRequiredItems&&options.IsRequired)\">\r\n                        <span [innerHTML]=\"options.DeleteButtonText\"></span></button>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n        <!-- ||(originalItems.length-1>=i -->\r\n        <tfoot *ngIf=\"!options.DisableAddButton\">\r\n            <tr>\r\n                <td colspan=\"4\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-12 d-grid gap-2\"> \r\n                            <button class=\"{{options.AddButtonExtraClasses}}\" type=\"button\" (click)=\"addItem()\"><span\r\n                                [innerHTML]=\"options.AddButtonText\"></span></button>\r\n                        </div>\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </tfoot>\r\n    </table>\r\n</div>\r\n"
+                    template: "<div class=\"form-group bbsf-control bbsf-repeater\">\r\n  <!--table-->\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  <!--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 = function () { return [
@@ -7801,6 +7786,147 @@
         onBlurInput: [{ type: i0.Output }]
     };
+    var RecaptchaModel = /** @class */ (function () {
+        function RecaptchaModel() {
+            this.ImageJpeg = [];
+        }
+        return RecaptchaModel;
+    }());
+    var CaptchaStyle = /** @class */ (function () {
+        function CaptchaStyle() {
+        }
+        return CaptchaStyle;
+    }());
+    var RecaptchaComponent = /** @class */ (function () {
+        function RecaptchaComponent(controlUtility, requestHandlerService, recaptchaControlHost, UtilityService, controlValidationService, globalSettings) {
+            var _this = this;
+            this.controlUtility = controlUtility;
+            this.requestHandlerService = requestHandlerService;
+            this.recaptchaControlHost = recaptchaControlHost;
+            this.UtilityService = UtilityService;
+            this.controlValidationService = controlValidationService;
+            this.globalSettings = globalSettings;
+            this.OnChange = new i0.EventEmitter();
+            this.validationRules = [];
+            this.validationRulesAsync = [];
+            this.recaptchaModel = new RecaptchaModel();
+            this.resetError = function () {
+                _this.controlValidationService.RemoveGlobalError();
+            };
+            //External Method
+            this.RemoveRequiredValidation = function () {
+                _this.controlUtility.RemoveRequiredValidation(_this.ReCaptchaFormControl, _this.validationRules, _this.options);
+            };
+            //External Method
+            this.AddRequiredValidation = function () {
+                _this.controlUtility.AddRequiredValidation(_this.ReCaptchaFormControl, _this.validationRules, _this.options);
+            };
+            //External Method
+            this.RemoveCustomValidation = function (CustomValidation) {
+                _this.controlUtility.RemoveCustomValidation(_this.ReCaptchaFormControl, _this.validationRules, CustomValidation);
+            };
+            //External Method
+            this.AddCustomValidation = function (CustomValidation) {
+                _this.controlUtility.AddCustomValidation(_this.ReCaptchaFormControl, _this.validationRules, CustomValidation);
+            };
+            //External Method
+            this.IsValid = function () {
+                _this.controlUtility.IsValid(_this.ReCaptchaFormControl);
+            };
+        }
+        RecaptchaComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.controlValidationService.isCreatedBefor = false;
+            this.loadImage();
+            if (!this.options.ViewType)
+                this.options.ViewType = this.globalSettings.ViewType;
+            this.group.addControl(this.options.Name, new forms.FormControl(''));
+            this.ReCaptchaFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
+            if (this.options.LabelKey != null && this.options.LabelKey != "")
+                this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
+            if (this.options.IsRequired) {
+                this.validationRules.push(forms.Validators.required);
+            }
+            if (this.options.CustomValidation.length > 0) {
+                var Validations = this.options.CustomValidation;
+                for (var index = 0; index < Validations.length; index++) {
+                    var Validation = Validations[index];
+                    this.validationRules.push(Validation.functionBody);
+                }
+            }
+            this.ReCaptchaFormControl.setValidators(this.validationRules);
+            this.ReCaptchaFormControl.setAsyncValidators(this.validationRulesAsync);
+            if (this.options.IsDisabled) {
+                this.ReCaptchaFormControl.disable();
+            }
+            this.recaptchaControlHost.ngSubmit.subscribe(function (value) {
+                _this.group.markAllAsTouched();
+                _this.markAllAsTouched = true;
+            });
+        };
+        RecaptchaComponent.prototype.loadImage = function () {
+            var _this = this;
+            var style = new CaptchaStyle();
+            style.BackgroundColorPrimary = this.options.BackgroundColorPrimary;
+            style.BackgroundColorSecondary = this.options.BackgroundColorSecondary;
+            style.TextColorPrimary = this.options.TextColorPrimary;
+            style.TextColorSecondary = this.options.TextColorSecondary;
+            style.FontSize = this.options.FontSize;
+            var requestOptionsModel = new bbsfUtilities.RequestOptionsModel();
+            requestOptionsModel.disableBlockUI = true;
+            requestOptionsModel.disableSuccessNotification = true;
+            this.requestHandlerService.post(this.options.ActionURL, style, null, null, requestOptionsModel).subscribe(function (res) {
+                var model = res;
+                _this.recaptchaModel.ID = model.id;
+                _this.recaptchaModel.EncryptedText = model.encryptedText;
+                _this.recaptchaModel.ImageJpeg = model.imageJpeg;
+                _this.image = 'data:image/jpeg;base64,' + _this.recaptchaModel.ImageJpeg;
+            });
+        };
+        RecaptchaComponent.prototype.ngAfterViewInit = function () {
+            this.controlUtility.setAttributeForControl(this.options);
+        };
+        RecaptchaComponent.prototype.showGlobalError = function () {
+            this.controlUtility.showGlobalError();
+        };
+        RecaptchaComponent.prototype.getErrorValidation = function (ErrorList) {
+            if (this.markAllAsTouched && this.group.invalid) {
+                this.showGlobalError();
+                this.markAllAsTouched = false;
+            }
+            return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
+        };
+        RecaptchaComponent.prototype.onTextChange = function (valueText) {
+            var value = valueText.target.value;
+            this.recaptchaModel.Text = value;
+            this.group.get(this.options.Name).setValue(this.recaptchaModel);
+            this.options.Value = this.recaptchaModel;
+            this.OnChange.emit(this.ReCaptchaFormControl.value);
+        };
+        return RecaptchaComponent;
+    }());
+    RecaptchaComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'BBSF-Recaptcha',
+                    template: "<div class=\"b-control b-recaptcha\">\r\n        <img class=\"h-100 w-100 mb-3\" [src]=\"image\" />\r\n      <button class=\"btn btn-sm btn-icon\" type=\"button\" ngbTooltip=\"{{UtilityService.getResourceValue('ReloadCaptcha')}}\" (click)=\"loadImage()\">\r\n        <i class=\"fas fa-refresh\"></i>\r\n      </button>\r\n\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\" [ngClass]=\"(options.NoMargin==true)?'':'NoMargin'\">\r\n    <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}} \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" *ngIf=\"!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)?'': ((options.HideLabel)?'col-md-12':'col-md-9')\">\r\n      <div class=\"input-group align-items-center\" >\r\n        <input class=\"form-control bnsights-control {{options.ExtraClasses}} \"\r\n               dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n               aria-describedby=\"email-error\" value=\"{{options.Value.Text}}\"\r\n               aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"text\" \r\n               [class.is-invalid]=\"ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched\"\r\n               placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n               (change)=\"onTextChange($event)\"  [readonly]=\"options.IsReadonly\"/>\r\n      </div>\r\n      <div class=\"text-danger Required-text\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n           *ngIf=\"(ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched)\">\r\n        {{getErrorValidation(ReCaptchaFormControl.errors|keyvalue)}}\r\n      </div>\r\n      <div class=\"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  </div>\r\n</div>\r\n"
+                },] }
+    ];
+    RecaptchaComponent.ctorParameters = function () { return [
+        { type: ControlUtility },
+        { type: bbsfUtilities.RequestHandlerService },
+        { type: forms.FormGroupDirective },
+        { type: bbsfUtilities.UtilityService },
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
+    ]; };
+    RecaptchaComponent.propDecorators = {
+        group: [{ type: i0.Input }],
+        options: [{ type: i0.Input }],
+        OnChange: [{ type: i0.Output }]
+    };
     var options;
     exports.AppInjector = void 0;
     angular.FullCalendarModule.registerPlugins([
@@ -7852,7 +7978,8 @@
                         RepeaterTableComponent,
                         BBSFDateTimePipe,
                         BBSFDatePipe,
-                        BTagsInputComponent
+                        BTagsInputComponent,
+                        RecaptchaComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -7951,7 +8078,8 @@
                         RepeaterItemFieldComponent,
                         RepeaterTableComponent,
                         BBSFDateTimePipe,
-                        BBSFDatePipe
+                        BBSFDatePipe,
+                        RecaptchaComponent
                     ]
                 },] }
     ];
@@ -7972,6 +8100,29 @@
      */
     // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+    var RecaptchaOptions = /** @class */ (function (_super) {
+        __extends(RecaptchaOptions, _super);
+        function RecaptchaOptions() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            /**To set  value  to Control */
+            _this.Value = new RecaptchaModel();
+            _this.ForceDirection = null;
+            /**Prevent AutoComplete of control default value is "on" available values "on" and "off"*/
+            _this.AutoComplete = "on";
+            _this.NoMargin = false;
+            /**the url of a remote server that supports jsonp calls */
+            _this.ActionURL = "/api/Home/GetReCaptchaModel";
+            /*Pass hexa-color primary background color*/
+            _this.BackgroundColorPrimary = "";
+            /*Pass hexa-color secondary background color*/
+            _this.BackgroundColorSecondary = "";
+            /*Pass font Size */
+            _this.FontSize = 0;
+            return _this;
+        }
+        return RecaptchaOptions;
+    }(ControlOptionsBase));
     var MultilingualControlOptionsBase = /** @class */ (function () {
         function MultilingualControlOptionsBase() {
             /**  to set type of view  if MultipleLanguageText is Vertical or Horizontal */
@@ -8180,7 +8331,7 @@
             /** Allow User To Add Tags */
             _this.CanAddTags = true;
             /** Set Max Number Of Tags That User Can Be Select  */
-            _this.MaxNumberTags = 5;
+            _this.MaxNumberTags = 30;
             /** Set Min Length Of Char To Call Search Function   */
             _this.MinSearchLength = 1;
             /**Allow  Scrolle Option In Dropdown  */
@@ -8758,6 +8909,9 @@
     exports.RadioButtonItem = RadioButtonItem;
     exports.RadioButtonOptions = RadioButtonOptions;
     exports.RangeNumber = RangeNumber;
+    exports.RecaptchaComponent = RecaptchaComponent;
+    exports.RecaptchaModel = RecaptchaModel;
+    exports.RecaptchaOptions = RecaptchaOptions;
     exports.RenderComponentService = RenderComponentService;
     exports.RepeaterComponent = RepeaterComponent;
     exports.RepeaterField = RepeaterField;