@bnsights/bbsf-controls 1.0.48 → 1.0.51

package/fesm2015/bnsights-bbsf-controls.js

@@ -15,7 +15,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { DatePipe, CommonModule } from '@angular/common';
 import { SearchCountryField, NgxIntlTelInputModule } from 'ngx-intl-tel-input';
-import { UtilityService, ControlValidationService, BBSFTranslateService, RequestOptionsModel, RequestHandlerService, BBSFUtilitiesModule } from '@bnsights/bbsf-utilities';
+import { UtilityService, ControlValidationService, BBSFTranslateService, RequestOptionsModel, RequestHandlerService, environment as environment$1, BBSFUtilitiesModule } from '@bnsights/bbsf-utilities';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { Subject, Observable, noop as noop$1, of, Subscription } from 'rxjs';
 import { OwlDateTimeIntl, DateTimeAdapter, OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
@@ -546,6 +546,8 @@ class DateInputComponent {
         }
     }
     onDateSelect(item) {
+        if (!item)
+            return;
         let DateValue;
         var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds  
         if (this.options.SelectMode == 2) {
@@ -627,13 +629,13 @@ var ControlLayout;
 
 var LanguageMode;
 (function (LanguageMode) {
-    LanguageMode[LanguageMode["Both_Languages_are_visible"] = 1] = "Both_Languages_are_visible";
-    LanguageMode[LanguageMode["English_Language_only_is_visible"] = 2] = "English_Language_only_is_visible";
-    LanguageMode[LanguageMode["Arabic_Language_only_is_visible"] = 3] = "Arabic_Language_only_is_visible";
-    LanguageMode[LanguageMode["Both_Languages_but_only_English_is_required"] = 4] = "Both_Languages_but_only_English_is_required";
-    LanguageMode[LanguageMode["Both_Languages_but_only_Arabic_is_required"] = 5] = "Both_Languages_but_only_Arabic_is_required";
-    LanguageMode[LanguageMode["Current_Language_only_is_visible_and_required"] = 6] = "Current_Language_only_is_visible_and_required";
-    LanguageMode[LanguageMode["Both_Languages_are_visible_but_only_current_language_is_required"] = 7] = "Both_Languages_are_visible_but_only_current_language_is_required";
+    LanguageMode["Both_Languages_are_visible"] = "3c6dbffe-da7f-4108-b44d-4b216a22f701";
+    LanguageMode["English_Language_only_is_visible"] = "84cc1d57-1f07-42a1-a38f-1a376c12a367";
+    LanguageMode["Arabic_Language_only_is_visible"] = "6a3e59e0-9510-4b16-9080-9313f5c9f229";
+    LanguageMode["Both_Languages_but_only_English_is_required"] = "260c38bb-c90c-4aa7-895d-31aba9311a05";
+    LanguageMode["Both_Languages_but_only_Arabic_is_required"] = "a1f2e15f-2691-4118-975f-ac21caf8ad5a";
+    LanguageMode["Current_Language_only_is_visible_and_required"] = "e2ba1f44-68f3-4035-b84f-9f1b6c2b0c05";
+    LanguageMode["Both_Languages_are_visible_but_only_current_language_is_required"] = "b26431f2-b209-4c41-ab04-2d71361847c2";
 })(LanguageMode || (LanguageMode = {}));
 
 class GlobalSettings {
@@ -1024,6 +1026,8 @@ class MultiLingualTextBoxComponent {
         this.EnglishValidationRulesasync = [];
         this.IsShowArabicWordCount = false;
         this.IsShowEnglishWordCount = false;
+        this.IsShowAsteriskInArabic = false;
+        this.IsShowAsteriskInEnglish = false;
         this.markAllAsTouched = false;
         this.ArabicLetterOnly = "";
         this.EnglishLetterOnly = "";
@@ -1167,7 +1171,7 @@ class MultiLingualTextBoxComponent {
             //MaxLength should be gretaer than or equals chars limit so that minCharsLimit would be >= 0
             if (this.options.MaxLength && this.minCharsLimit >= 0) {
                 this.englishCurrentCharsCount = this.EnglishFormControl.value.length;
-                if (this.englishCurrentCharsCount >= this.minCharsLimit) {
+                if (this.englishCurrentCharsCount > this.minCharsLimit) {
                     this.showEnglishCharsLimitMsg = true;
                     this.hasEnglishCharsLimitValidationError = true;
                     if (this.englishCurrentCharsCount == this.options.MaxLength)
@@ -1209,7 +1213,7 @@ class MultiLingualTextBoxComponent {
             //MaxLength should be gretaer than or equals chars limit so that minCharsLimit would be >= 0
             if (this.options.MaxLength && this.minCharsLimit >= 0) {
                 this.arabicCurrentCharsCount = this.ArabicFormControl.value.length;
-                if (this.arabicCurrentCharsCount >= this.minCharsLimit) {
+                if (this.arabicCurrentCharsCount > this.minCharsLimit) {
                     this.showArabicCharsLimitMsg = true;
                     this.hasArabicCharsLimitValidationError = true;
                     if (this.arabicCurrentCharsCount == this.options.MaxLength)
@@ -1293,6 +1297,8 @@ class MultiLingualTextBoxComponent {
                 if (this.options.IsRequired == true) {
                     this.EnglishValidationRules.push(Validators.required);
                     this.ArabicValidationRules.push(Validators.required);
+                    this.IsShowAsteriskInArabic = true;
+                    this.IsShowAsteriskInEnglish = true;
                 }
                 break;
             case LanguageMode.Arabic_Language_only_is_visible:
@@ -1307,11 +1313,13 @@ class MultiLingualTextBoxComponent {
                 if (this.CurrentLanguage == 'ar') {
                     if (this.options.IsRequired == true) {
                         this.ArabicValidationRules.push(Validators.required);
+                        this.IsShowAsteriskInArabic = true;
                     }
                 }
                 if (this.CurrentLanguage == 'en') {
                     if (this.options.IsRequired == true) {
                         this.EnglishValidationRules.push(Validators.required);
+                        this.IsShowAsteriskInEnglish = true;
                     }
                 }
                 break;
@@ -1320,6 +1328,7 @@ class MultiLingualTextBoxComponent {
                 this.ShowEnglishTextBox = true;
                 if (this.options.IsRequired == true) {
                     this.ArabicValidationRules.push(Validators.required);
+                    this.IsShowAsteriskInArabic = true;
                 }
                 break;
             case LanguageMode.Both_Languages_but_only_English_is_required:
@@ -1327,6 +1336,7 @@ class MultiLingualTextBoxComponent {
                 this.ShowEnglishTextBox = true;
                 if (this.options.IsRequired == true) {
                     this.EnglishValidationRules.push(Validators.required);
+                    this.IsShowAsteriskInEnglish = true;
                 }
                 break;
             case LanguageMode.Current_Language_only_is_visible_and_required:
@@ -1335,6 +1345,7 @@ class MultiLingualTextBoxComponent {
                     this.ShowEnglishTextBox = false;
                     if (this.options.IsRequired == true) {
                         this.ArabicValidationRules.push(Validators.required);
+                        this.IsShowAsteriskInArabic = true;
                     }
                 }
                 if (this.CurrentLanguage == 'en') {
@@ -1342,6 +1353,7 @@ class MultiLingualTextBoxComponent {
                     this.ShowEnglishTextBox = true;
                     if (this.options.IsRequired == true) {
                         this.EnglishValidationRules.push(Validators.required);
+                        this.IsShowAsteriskInEnglish = true;
                     }
                 }
                 break;
@@ -1378,7 +1390,7 @@ MultiLingualTextBoxComponent.controlContainerstatic = null;
 MultiLingualTextBoxComponent.decorators = [
     { type: 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\"\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)\"\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\"\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\"\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)\" 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\"\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",
+                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\"\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\"\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\"\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\"\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"]
             },] }
 ];
@@ -1532,7 +1544,7 @@ class TextAreaComponent {
         //MaxLength should be gretaer than or equals chars limit so that minCharsLimit would be >= 0
         if (this.options.MaxLength && this.minCharsLimit >= 0) {
             this.currentCharsCount = this.TextAreaFormControl.value.length;
-            if (this.currentCharsCount >= this.minCharsLimit) {
+            if (this.currentCharsCount > this.minCharsLimit) {
                 this.showCharsLimitMsg = true;
                 this.hasCharsLimitValidationError = true;
                 if (this.currentCharsCount == this.options.MaxLength)
@@ -1763,7 +1775,7 @@ class MultiLingualTextAreaComponent {
             //MaxLength should be gretaer than or equals chars limit so that minCharsLimit would be >= 0
             if (this.options.MaxLength && this.minCharsLimit >= 0) {
                 this.englishCurrentCharsCount = this.EnglishTextAreaFormControl.value.length;
-                if (this.englishCurrentCharsCount >= this.minCharsLimit) {
+                if (this.englishCurrentCharsCount > this.minCharsLimit) {
                     this.showEnglishCharsLimitMsg = true;
                     this.hasEnglishCharsLimitValidationError = true;
                     if (this.englishCurrentCharsCount == this.options.MaxLength)
@@ -1805,7 +1817,7 @@ class MultiLingualTextAreaComponent {
             //MaxLength should be gretaer than or equals chars limit so that minCharsLimit would be >= 0
             if (this.options.MaxLength && this.minCharsLimit >= 0) {
                 this.arabicCurrentCharsCount = this.ArabicTextAreaFormControl.value.length;
-                if (this.arabicCurrentCharsCount >= this.minCharsLimit) {
+                if (this.arabicCurrentCharsCount > this.minCharsLimit) {
                     this.showArabicCharsLimitMsg = true;
                     this.hasArabicCharsLimitValidationError = true;
                     if (this.arabicCurrentCharsCount == this.options.MaxLength)
@@ -1880,6 +1892,8 @@ class MultiLingualTextAreaComponent {
                 if (this.options.IsRequired == true) {
                     this.EnglishValidationRules.push(Validators.required);
                     this.ArabicValidationRules.push(Validators.required);
+                    this.IsShowAsteriskInArabic = true;
+                    this.IsShowAsteriskInEnglish = true;
                 }
                 break;
             case LanguageMode.Arabic_Language_only_is_visible:
@@ -1894,11 +1908,13 @@ class MultiLingualTextAreaComponent {
                 if (this.CurrentLanguage == 'ar') {
                     if (this.options.IsRequired == true) {
                         this.ArabicValidationRules.push(Validators.required);
+                        this.IsShowAsteriskInArabic = true;
                     }
                 }
                 if (this.CurrentLanguage == 'en') {
                     if (this.options.IsRequired == true) {
                         this.EnglishValidationRules.push(Validators.required);
+                        this.IsShowAsteriskInEnglish = true;
                     }
                 }
                 break;
@@ -1907,6 +1923,7 @@ class MultiLingualTextAreaComponent {
                 this.ShowEngishTextArea = true;
                 if (this.options.IsRequired == true) {
                     this.ArabicValidationRules.push(Validators.required);
+                    this.IsShowAsteriskInArabic = true;
                 }
                 break;
             case LanguageMode.Both_Languages_but_only_English_is_required:
@@ -1914,6 +1931,7 @@ class MultiLingualTextAreaComponent {
                 this.ShowEngishTextArea = true;
                 if (this.options.IsRequired == true) {
                     this.EnglishValidationRules.push(Validators.required);
+                    this.IsShowAsteriskInEnglish = true;
                 }
                 break;
             case LanguageMode.Current_Language_only_is_visible_and_required:
@@ -1922,6 +1940,7 @@ class MultiLingualTextAreaComponent {
                     this.ShowEngishTextArea = false;
                     if (this.options.IsRequired == true) {
                         this.ArabicValidationRules.push(Validators.required);
+                        this.IsShowAsteriskInArabic = true;
                     }
                 }
                 if (this.CurrentLanguage == 'en') {
@@ -1929,6 +1948,7 @@ class MultiLingualTextAreaComponent {
                     this.ShowEngishTextArea = true;
                     if (this.options.IsRequired == true) {
                         this.EnglishValidationRules.push(Validators.required);
+                        this.IsShowAsteriskInEnglish = true;
                     }
                 }
                 break;
@@ -1965,7 +1985,7 @@ MultiLingualTextAreaComponent.controlContainerstatic = null;
 MultiLingualTextAreaComponent.decorators = [
     { type: 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 \"\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)\"\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()\"\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  \"\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)\"\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()\"\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",
+                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 \"\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()\"\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  \"\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()\"\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"]
             },] }
 ];
@@ -2247,7 +2267,7 @@ DropdownListComponent.decorators = [
     { type: 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 \" [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]=\"'No data found.'\" [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           <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\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",
+                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 \" [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           <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\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"]
             },] }
 ];
@@ -2440,7 +2460,7 @@ ToggleslideComponent.controlContainerstatic = null;
 ToggleslideComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-Toggleslide',
-                template: "<div class=\"b-control b-toggle-slide\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n        [hidden]=\"options.HideLabel\">\r\n        {{options.LabelValue}}\r\n    </label>\r\n            <mat-slide-toggle [(ngModel)]=\"SlideValue\"  dir=\"{{options.ForceDirection==2?'rtl':''}}\" [cssClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n              formControlName=\"{{options.Name}}\" disableRipple=\"true\" disabled=\"{{options.IsDisabled}}\" (change)=\"changeValueToggle()\">\r\n        </mat-slide-toggle>\r\n        \r\n    </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-toggle-slide\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n        [hidden]=\"options.HideLabel\">\r\n        {{options.LabelValue}}\r\n    </label>\r\n            <mat-slide-toggle [(ngModel)]=\"SlideValue\"  dir=\"{{options.ForceDirection==2?'rtl':''}}\" [cssClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n              formControlName=\"{{options.Name}}\" disableRipple=\"true\" disabled=\"{{options.IsDisabled}}\" (change)=\"changeValueToggle()\">\r\n        </mat-slide-toggle>\r\n        <div class=\"control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    </div>\r\n</div>\r\n",
                 styles: [".mat-slide-toggle{padding-left:10px}.mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:#e3f4fe}.mat-slide-toggle-thumb-container{width:25px;height:25px;top:1px;left:-2px}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#009ef7}.mat-slide-toggle-thumb{height:25px;width:25px;border-radius:50%}.mat-slide-toggle.mat-checked .mat-ripple-element{background-color:#009ef7}.mat-slide-toggle-bar{width:55px;height:30px;border-radius:3.25rem}\n"]
             },] }
 ];
@@ -2503,8 +2523,8 @@ class HtmlEditorComponent {
         this.editorConfig = {
             editable: !this.options.IsDisabled,
             spellcheck: true,
-            height: this.options.Height.toString(),
-            minHeight: this.options.Height.toString(),
+            height: `${this.options.Height}rem`,
+            minHeight: `${this.options.Height}rem`,
             maxHeight: 'auto',
             width: 'auto',
             minWidth: 'auto',
@@ -2990,6 +3010,8 @@ class MultiLingualHtmlEditorComponent {
                 if (this.options.IsRequired == true) {
                     this.EnglishValidationRules.push(Validators.required);
                     this.ArabicValidationRules.push(Validators.required);
+                    this.IsShowAsteriskInArabic = true;
+                    this.IsShowAsteriskInEnglish = true;
                 }
                 break;
             case LanguageMode.Arabic_Language_only_is_visible:
@@ -3004,11 +3026,13 @@ class MultiLingualHtmlEditorComponent {
                 if (this.CurrentLanguage == 'ar') {
                     if (this.options.IsRequired == true) {
                         this.ArabicValidationRules.push(Validators.required);
+                        this.IsShowAsteriskInArabic = true;
                     }
                 }
                 if (this.CurrentLanguage == 'en') {
                     if (this.options.IsRequired == true) {
                         this.EnglishValidationRules.push(Validators.required);
+                        this.IsShowAsteriskInEnglish = true;
                     }
                 }
                 break;
@@ -3017,6 +3041,7 @@ class MultiLingualHtmlEditorComponent {
                 this.ShowEnglishHtmlEditor = true;
                 if (this.options.IsRequired == true) {
                     this.ArabicValidationRules.push(Validators.required);
+                    this.IsShowAsteriskInArabic = true;
                 }
                 break;
             case LanguageMode.Both_Languages_but_only_English_is_required:
@@ -3024,6 +3049,7 @@ class MultiLingualHtmlEditorComponent {
                 this.ShowEnglishHtmlEditor = true;
                 if (this.options.IsRequired == true) {
                     this.EnglishValidationRules.push(Validators.required);
+                    this.IsShowAsteriskInEnglish = true;
                 }
                 break;
             case LanguageMode.Current_Language_only_is_visible_and_required:
@@ -3032,6 +3058,7 @@ class MultiLingualHtmlEditorComponent {
                     this.ShowEnglishHtmlEditor = false;
                     if (this.options.IsRequired == true) {
                         this.ArabicValidationRules.push(Validators.required);
+                        this.IsShowAsteriskInArabic = true;
                     }
                 }
                 if (this.CurrentLanguage == 'en') {
@@ -3039,6 +3066,7 @@ class MultiLingualHtmlEditorComponent {
                     this.ShowEnglishHtmlEditor = true;
                     if (this.options.IsRequired == true) {
                         this.EnglishValidationRules.push(Validators.required);
+                        this.IsShowAsteriskInEnglish = true;
                     }
                 }
                 break;
@@ -3055,7 +3083,7 @@ MultiLingualHtmlEditorComponent.controlContainerstatic = null;
 MultiLingualHtmlEditorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-MultiLingualHtmlEditor',
-                template: "<div class=\"b-control b-multilangual-html-editor\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n        <div class=\"form-group row\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n            <div class=\"col-lg-6\">\r\n                <div class=\"row\" *ngIf=\"ShowEnglishHtmlEditor\">\r\n                    <label class=\"b-label col-form-label col-sm-12 \" \r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\"\r\n                        [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)\"\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                      \r\n                            <angular-editor  class=\"form-control bnsights-control {{options.ExtraClasses_EN}} \" (change)=\"onTextChange('en')\"  [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n                    formControlName=\"English\"  [config]=\"editorEnglishConfig\"></angular-editor>\r\n\r\n                            <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n                            {{getErrorValidation(EnglishHtmlEditorFormControl.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\">\r\n                                {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-lg-6\">\r\n                <div class=\"row\" *ngIf=\"ShowArabicHtmlEditor\">\r\n\r\n                    <label class=\"b-label col-form-label col-sm-12  \"\r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n                        [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)\"\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                        \r\n\r\n                            <angular-editor  dir=\"rtl\"  class=\"form-control bnsights-control {{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\"    [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n                              formControlName=\"Arabic\"  [config]=\"editorArabicConfig\"></angular-editor>\r\n\r\n                            <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched)\">\r\n                            {{getErrorValidation(ArabicHtmlEditorFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\r\n                \r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center\">\r\n                            <div class=\"control-desc text-dark\">\r\n                                {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n                    </div>\r\n\r\n\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n\r\n\r\n    </div>\r\n\r\n</div>\r\n",
+                template: "<div class=\"b-control b-multilangual-html-editor\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n        <div class=\"form-group row\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n            <div class=\"col-lg-6\">\r\n                <div class=\"row\" *ngIf=\"ShowEnglishHtmlEditor\">\r\n                    <label class=\"b-label col-form-label col-sm-12 \" \r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\"\r\n                        [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                      \r\n                            <angular-editor  class=\"form-control bnsights-control {{options.ExtraClasses_EN}} \" (change)=\"onTextChange('en')\"  [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n                    formControlName=\"English\"  [config]=\"editorEnglishConfig\"></angular-editor>\r\n\r\n                            <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n                            {{getErrorValidation(EnglishHtmlEditorFormControl.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\">\r\n                                {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-lg-6\">\r\n                <div class=\"row\" *ngIf=\"ShowArabicHtmlEditor\">\r\n\r\n                    <label class=\"b-label col-form-label col-sm-12  \"\r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n                        [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                        \r\n\r\n                            <angular-editor  dir=\"rtl\"  class=\"form-control bnsights-control {{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\"    [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n                              formControlName=\"Arabic\"  [config]=\"editorArabicConfig\"></angular-editor>\r\n\r\n                            <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched)\">\r\n                            {{getErrorValidation(ArabicHtmlEditorFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\r\n                \r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center\">\r\n                            <div class=\"control-desc text-dark\">\r\n                                {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n                    </div>\r\n\r\n\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n\r\n\r\n    </div>\r\n\r\n</div>\r\n",
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
             },] }
 ];
@@ -3752,7 +3780,7 @@ class AutocompleteTextBoxComponent {
         this.validationRulesasync = [];
         this.dataList = [];
         this.SelectedValue = "";
-        this.avatarImage = "https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png?20150327203541";
+        this.avatarImage = "./src/assets/images/userimg.png";
         this.resetError = () => {
             this.controlValidationService.RemoveGlobalError();
         };
@@ -4145,7 +4173,7 @@ TagsInputComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'BBSF-TagsInput',
-                template: "<div class=\"b-control b-tags-input\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n    <div class=\"form-group row\" [formGroup]=\"TagsFormGroup\">\r\n\r\n      <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n        [hidden]=\"options.HideLabel\">\r\n        {{options.LabelValue}}\r\n        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n          aria-required=\"true\">*</span>\r\n      </label>\r\n\r\n      <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n        <b-tags-input id=\"typeahead-http\" type=\"text\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n          dir=\"{{options.ForceDirection==2?'rtl':''}}\" [disabled]=\"options.IsDisabled\" aria-describedby=\"email-error\"\r\n          aria-invalid=\"true\" formControlName=\"tags\"\r\n          [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\" placeholder=\"{{options.Placeholder}}\"\r\n          id=\"{{options.Name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n          removeLastOnBackspace=\"{{options.RemoveLastOnBackspace}}\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n          [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey\r\n          scrollableOptions=\"{{options.ScrollableOptions}}\" scrollableOptionsInView=\"{{options.MaxSearchResultsCount}}\"\r\n          (keypress)=\"AddTag($event.key,SearchKey)\" [ViewMode]=\"options.TagInputMode\"\r\n          maxTags=\"{{options.MaxNumberTags}}\" minLengthBeforeOptions=\"{{options.MinSearchLength}}\"\r\n          [showDescription]=\"options.ShowDescription\" [defaultImageURL]=\"options.DefaultImgUrl\" name=\"tags\">\r\n        </b-tags-input>\r\n\r\n        <div class=\"text-danger Required-text\" *ngIf=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n          {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n        </div>\r\n\r\n\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n        </div>\r\n\r\n        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n          {{resetError()}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n",
+                template: "<div class=\"b-control b-tags-input\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n    <div class=\"form-group row\" [formGroup]=\"TagsFormGroup\">\r\n\r\n      <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n        [hidden]=\"options.HideLabel\">\r\n        {{options.LabelValue}}\r\n        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n          aria-required=\"true\">*</span>\r\n      </label>\r\n\r\n      <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n        <b-tags-input id=\"typeahead-http\" type=\"text\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n          dir=\"{{options.ForceDirection==2?'rtl':''}}\" [disabled]=\"options.IsDisabled\" aria-describedby=\"email-error\"\r\n          aria-invalid=\"true\" formControlName=\"tags\"\r\n          [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\" placeholder=\"{{options.Placeholder}}\"\r\n          id=\"{{options.Name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n          removeLastOnBackspace=\"{{options.RemoveLastOnBackspace}}\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n          [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey\r\n          scrollableOptions=\"{{options.ScrollableOptions}}\" scrollableOptionsInView=\"{{options.MaxSearchResultsCount}}\"\r\n          (keypress)=\"AddTag($event.key,SearchKey)\" [ViewMode]=\"options.TagInputMode\"\r\n          maxTags=\"{{options.MaxNumberTags}}\" minLengthBeforeOptions=\"{{options.MinSearchLength}}\"\r\n          [showDescription]=\"options.ShowDescription\" [defaultImageURL]=\"options.DefaultImgUrl\" name=\"tags\">\r\n        </b-tags-input>\r\n\r\n        <div class=\"text-danger Required-text\" *ngIf=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n          {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n        </div>\r\n\r\n\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n        </div>\r\n\r\n        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n          {{resetError()}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n",
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
             },] }
 ];
@@ -4932,7 +4960,7 @@ class TextboxComponent {
             //MaxLength should be gretaer than or equals chars limit so that minCharsLimit would be >= 0
             if (this.options.MaxLength && this.minCharsLimit >= 0) {
                 this.currentCharsCount = this.TextBoxFormControl.value.length;
-                if (this.currentCharsCount >= this.minCharsLimit) {
+                if (this.currentCharsCount > this.minCharsLimit) {
                     this.showCharsLimitMsg = true;
                     this.hasCharsLimitValidationError = true;
                     if (this.currentCharsCount == this.options.MaxLength)
@@ -5045,7 +5073,7 @@ class MapAutoCompleteComponent {
             if (this.CurrentLanguage == 'en')
                 this.mapsAPILoader["_config"]["localeId"] = "en-US";
             this.mapsAPILoader["_scriptLoadingPromise"] = null;
-            this.mapsAPILoader["_config"]["apiKey"] = `AIzaSyA75ojhZhEhDaO3vfn3mxTY32sq5flAwlY&language=${this.CurrentLanguage}`;
+            this.mapsAPILoader["_config"]["apiKey"] = `${environment$1.BBSF_GoogleMapKey}&language=${this.CurrentLanguage}`;
             var ScriptTag = document.getElementById(this.mapsAPILoader["_SCRIPT_ID"]);
             if (ScriptTag)
                 ScriptTag.remove();
@@ -5056,7 +5084,7 @@ class MapAutoCompleteComponent {
             window.google = null;
             this.LazyMapsAPILoader = new LazyMapsAPILoader({
                 // &language=${UtilityService.CurrentLanguage}
-                apiKey: `AIzaSyA75ojhZhEhDaO3vfn3mxTY32sq5flAwlY&language=${this.CurrentLanguage}`,
+                apiKey: `${environment$1.BBSF_GoogleMapKey}&language=${this.CurrentLanguage}`,
                 libraries: ['places'],
             }, this.mapsAPILoader["_windowRef"], this.mapsAPILoader["_documentRef"], this.mapsAPILoader["_config"]["localeId"]);
             this.LazyMapsAPILoader.load().then(() => {
@@ -5146,18 +5174,17 @@ class MapAutoCompleteComponent {
                 }));
             });
         });
-        ;
         if (this.CurrentLanguage == 'ar')
             this.mapsAPILoader["_config"]["localeId"] = "ar-EG";
         if (this.CurrentLanguage == 'en')
             this.mapsAPILoader["_config"]["localeId"] = "en-US";
         this.mapsAPILoader["_scriptLoadingPromise"] = null;
-        this.mapsAPILoader["_config"]["apiKey"] = `AIzaSyA75ojhZhEhDaO3vfn3mxTY32sq5flAwlY&language=${this.CurrentLanguage}`;
+        this.mapsAPILoader["_config"]["apiKey"] = `${environment$1.BBSF_GoogleMapKey}&language=${this.CurrentLanguage}`;
         var leftSection = document.getElementById(this.mapsAPILoader["_SCRIPT_ID"]);
         if (leftSection)
             leftSection.remove();
         this.LazyMapsAPILoader = new LazyMapsAPILoader({
-            apiKey: `AIzaSyA75ojhZhEhDaO3vfn3mxTY32sq5flAwlY&language=${this.CurrentLanguage}`,
+            apiKey: `${environment$1.BBSF_GoogleMapKey}&language=${this.CurrentLanguage}`,
             libraries: ['places'],
         }, this.mapsAPILoader["_windowRef"], this.mapsAPILoader["_documentRef"], this.mapsAPILoader["_config"]["localeId"]);
         this.LazyMapsAPILoader.load();
@@ -5181,6 +5208,33 @@ class MapAutoCompleteComponent {
             this.MapAutoCompleteFormControl.disable();
         }
         if (this.options.Value != null) {
+            let germanAddress = {
+                url: this.options.Value.GoogleMapsURL,
+                placeID: this.options.Value.PlaceID,
+                displayAddress: this.options.Value.Text,
+                name: this.options.Value.Text,
+                locality: {},
+                state: {},
+                country: {},
+                geoLocation: { latitude: -1, longitude: -1 },
+            };
+            germanAddress.geoLocation.latitude = this.options.Value.Latitude;
+            germanAddress.geoLocation.longitude = this.options.Value.Longitude;
+            this.onGermanAddressMapped.emit(germanAddress);
+            this.GermanAddressMapped(germanAddress);
+            this.place = {
+                url: this.options.Value.GoogleMapsURL,
+                place_id: this.options.Value.PlaceID,
+                formatted_address: this.options.Value.Text,
+                name: this.options.Value.Text,
+            };
+            this.onAutocompleteSelected.emit(this.place);
+            this.AutocompleteSelected(this.place);
+            this.onLocationSelected.emit({
+                latitude: this.options.Value.Latitude,
+                longitude: this.options.Value.Longitude
+            });
+            this.group.controls[this.options.Name].setValue(this.MapAutoCompleteModel);
             this.MapAutoCompleteFormControl.setValue(this.options.Value);
         }
         if (this.options.CustomValidation.length > 0) {
@@ -5202,6 +5256,8 @@ class MapAutoCompleteComponent {
                 element.setAttribute(this.options.AttributeList[index].Key, this.options.AttributeList[index].value);
             }
         }
+        var elementHTML = document.getElementById(this.options.Name);
+        elementHTML.value = this.MapAutoCompleteModel.Text;
     }
     showGlobalError() {
         this.controlUtility.showGlobalError();
@@ -5245,7 +5301,7 @@ MapAutoCompleteComponent.controlContainerstatic = null;
 MapAutoCompleteComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-MapAutoComplete',
-                template: "<div class=\"b-control b-map-auto-complete\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [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    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n      <input class=\"form-control bnsights-control  {{options.ExtraClasses}} \"\r\n             value=\"{{MapAutoCompleteModel}}\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n             \r\n             [class.is-invalid]=\"MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n             matGoogleMapsAutocomplete #search\r\n             (onAutocompleteSelected)=\"AutocompleteSelected($event)\"\r\n             (onLocationSelected)=\"LocationSelected($event)\"\r\n             (onGermanAddressMapped)=\"GermanAddressMapped($event)\" />\r\n\r\n    \r\n\r\n      <div class=\"text-danger Required-text\"\r\n      *ngIf=\"(MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched)\">\r\n      {{getErrorValidation(MapAutoCompleteFormControl.errors|keyvalue)}}\r\n  </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-map-auto-complete\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [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    </label>\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n      <input class=\"form-control bnsights-control  {{options.ExtraClasses}} \"\r\n            [value]=\"MapAutoCompleteModel.Text\"\r\n            [address]=\"MapAutoCompleteModel.Text\"\r\n            value=\"{{MapAutoCompleteModel.Text}}\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n             [class.is-invalid]=\"MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n             matGoogleMapsAutocomplete #search\r\n             (onAutocompleteSelected)=\"AutocompleteSelected($event)\"\r\n             (onLocationSelected)=\"LocationSelected($event)\"\r\n             (onGermanAddressMapped)=\"GermanAddressMapped($event)\"/>\r\n      <div class=\"text-danger Required-text\"\r\n      *ngIf=\"(MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched)\">\r\n      {{getErrorValidation(MapAutoCompleteFormControl.errors|keyvalue)}}\r\n  </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{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"]
             },] }
 ];
@@ -5883,6 +5939,7 @@ class DropdownOptions extends ControlOptionsBase {
         /** Set value for item in  DropdownList  */
         this.ItemTempletvalue = "value";
         this.ForceDirection = ForceDirection.English;
+        this.NotFoundText = "";
     }
 }
 
@@ -5902,7 +5959,7 @@ class HtmlEditorOptions extends ControlOptionsBase {
         /** to set Direction of HtmlEditor  if HtmlEditor is Arabic or English  */
         this.ForceDirection = ForceDirection.English;
         /** Set Height For  */
-        this.Height = 150;
+        this.Height = 5;
     }
 }
 
@@ -6897,6 +6954,21 @@ const TAGS_INPUT_TEMPLATE = `
  
 <div class="tags-input">
 <span class="tags-input__tag label label-primary badge badge-primary" *ngFor="let tag of tags">
+
+<span [ngSwitch]="ViewMode">
+<span *ngSwitchCase="tagInputViewEnum.WithImage">
+<img style="border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;"
+src="{{(tag.imageURL?tag.imageURL:defaultImageURL)}}" />
+</span>
+
+<span *ngSwitchCase="tagInputViewEnum.WithInitial">
+<div class="user-initials">{{calculateInitials(tag.name)}}</div>
+</span>
+
+<span *ngSwitchDefault>
+</span>
+
+</span>
   {{tag[displayField]}}
   <span *ngIf="isDeleteable(tag)" role="button" class="tags-input__tag-remove-btn" (click)="removeTag(tag)"
     (touch)="removeTag(tag)">
@@ -7239,7 +7311,7 @@ BBSFControlsModule.decorators = [
                     NgxTypeaheadModule,
                     AgmCoreModule.forRoot({
                         // &language=${UtilityService.CurrentLanguage}
-                        apiKey: `AIzaSyA75ojhZhEhDaO3vfn3mxTY32sq5flAwlY`,
+                        apiKey: environment$1.BBSF_GoogleMapKey,
                         libraries: ['places'],
                     }),
                     MatGoogleMapsAutocompleteModule,