@bnsights/bbsf-controls 1.0.60 → 1.0.62

package/fesm2015/bnsights-bbsf-controls.js

@@ -4045,6 +4045,7 @@ class TagsInputComponent {
         this.markAllAsTouched = false;
         this.validationRules = [];
         this.validationRulesasync = [];
+        this.SearchResultHasItems = false;
         this.resetError = () => {
             this.controlValidationService.RemoveGlobalError();
         };
@@ -4181,6 +4182,9 @@ class TagsInputComponent {
     }
     AddTag(event, key) {
         var _a, _b;
+        //Check if input is yab press
+        if (event.key === "Tab")
+            return;
         //Check if input is enter press
         if (this.IsNoMatch == true && event.key == "Enter" && this.options.AllowNewSelection && key.selected) {
             if (!(this.tags.length >= this.options.MaxNumberTags)) {
@@ -4198,7 +4202,7 @@ class TagsInputComponent {
         }
         //Check if input is charachter
         else if (String.fromCharCode(event.keyCode).match(/(\w|\s)/g)) {
-            if (this.IsNoMatch == true && this.options.AllowNewSelection == false && key.selected) {
+            if (this.IsNoMatch && !this.options.AllowNewSelection && key.selected) {
                 this.TagsFormControl.setErrors({ "errorMassage": this.options.NoResultText });
                 this.TagsFormControl.markAsTouched();
             }
@@ -4242,13 +4246,27 @@ class TagsInputComponent {
     onNoOptionsMatch(event) {
         this.IsNoMatch = event;
     }
+    onTagsInputBlur(SearchKey) {
+        if (SearchKey.selected && this.options.AllowNewSelection && this.IsNoMatch && this.tags.length < this.options.MaxNumberTags) {
+            this.tags.push({ name: SearchKey.selected });
+            this.group.get(this.options.Name).setValue(this.tags);
+            this.group.get(this.options.Name).markAllAsTouched();
+            this.group.updateValueAndValidity();
+            if (this.group.get(this.options.Name).valid) {
+                SearchKey.selected = null;
+                return;
+            }
+            else
+                this.tags.pop();
+        }
+    }
 }
 TagsInputComponent.controlContainerstatic = null;
 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                      (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        </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()}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\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      <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"]
             },] }
 ];
@@ -5614,10 +5632,13 @@ class FormComponent {
             let submitModel = this.options.GetModelFunction();
             let submittedService = this.options.ServiceSubmitFunction.apply(null, submitModel);
             submittedService.subscribe((result) => {
-                let modal = document.getElementsByClassName("modal show");
-                if (modal.length > 0) {
-                    let closeButton = modal[0].querySelector("[data-dismiss='modal']");
-                    closeButton.click();
+                if (!this.options.DisableModalDismiss) {
+                    //Dismiss closest modal of the form only
+                    let modal = document.getElementById(this.fromName).closest('.modal.show');
+                    if (modal) {
+                        let closeButton = modal.querySelector("[data-dismiss='modal']");
+                        closeButton.click();
+                    }
                 }
                 if (!this.options.DisableSuccessNotification)
                     this.utilityService.notifySuccessMessage();
@@ -7076,7 +7097,6 @@ src="{{(tag.imageURL?tag.imageURL:defaultImageURL)}}" />
 
 <ng-template #withTypeahead>
   <span [ngSwitch]="ViewMode">
-
     <span *ngSwitchCase="tagInputViewEnum.WithImage">
       <input *ngIf="(options !== null)" class="tags-input__input-field" type="text" [placeholder]="getPlaceholder()"
         name="tags" (keydown.backspace)="removeLastTag(tagInput)" [(ngModel)]="selected" [typeahead]="options"
@@ -7085,6 +7105,7 @@ src="{{(tag.imageURL?tag.imageURL:defaultImageURL)}}" />
         [typeaheadScrollable]="scrollableOptions" [typeaheadLatinize]="true"
         [typeaheadItemTemplate]="itemTemplateWithImage" [typeaheadOptionsInScrollableView]="scrollableOptionsInView"
         [disabled]="!canAddTags || maximumOfTagsReached()" [hidden]="!canAddTags || maximumOfTagsReached()"
+        (blur)="onBlur()"  autocomplete="off"
         #tagInput />
     </span>
 
@@ -7097,6 +7118,7 @@ src="{{(tag.imageURL?tag.imageURL:defaultImageURL)}}" />
         [typeaheadItemTemplate]="itemTemplateWithoutImage"
         [typeaheadOptionsInScrollableView]="scrollableOptionsInView"
         [disabled]="!canAddTags || maximumOfTagsReached()" [hidden]="!canAddTags || maximumOfTagsReached()"
+        (blur)="onBlur()" autocomplete="off"
         #tagInput />
     </span>
 
@@ -7109,6 +7131,7 @@ src="{{(tag.imageURL?tag.imageURL:defaultImageURL)}}" />
         [typeaheadItemTemplate]="itemTemplateWithoutInitial"
         [typeaheadOptionsInScrollableView]="scrollableOptionsInView"
         [disabled]="!canAddTags || maximumOfTagsReached()" [hidden]="!canAddTags || maximumOfTagsReached()"
+        (blur)="onBlur()" autocomplete="off"
         #tagInput />
     </span>
 
@@ -7121,6 +7144,7 @@ src="{{(tag.imageURL?tag.imageURL:defaultImageURL)}}" />
         [typeaheadItemTemplate]="itemTemplateWithoutImage"
         [typeaheadOptionsInScrollableView]="scrollableOptionsInView"
         [disabled]="!canAddTags || maximumOfTagsReached()" [hidden]="!canAddTags || maximumOfTagsReached()"
+        (blur)="onBlur()" autocomplete="off"
         #tagInput />
     </span>
 
@@ -7223,6 +7247,13 @@ class BTagsInputComponent {
         this.onTagsChanged = new EventEmitter();
         this.onMaxTagsReached = new EventEmitter();
         this.onNoOptionsMatch = new EventEmitter();
+        this.onBlurInput = new EventEmitter();
+        // (keydown.Tab) = "onTab($event)"
+        //onTab(event) {
+        //  this.onTabInput.emit();
+        //  event.preventDefault();
+        //  event.stopPropagation();
+        //}
     }
     getPlaceholder() {
         if (this.tags && this.tags.length > 0) {
@@ -7310,7 +7341,6 @@ class BTagsInputComponent {
         this.onTouchedCallback = fn;
     }
     calculateInitials(name) {
-        debugger;
         var fullName = name.split(' ');
         var initials = "";
         if (fullName.length > 1)
@@ -7319,6 +7349,9 @@ class BTagsInputComponent {
             initials = fullName.shift().charAt(0);
         return initials.toUpperCase();
     }
+    onBlur() {
+        this.onBlurInput.emit();
+    }
 }
 BTagsInputComponent.decorators = [
     { type: Component, args: [{
@@ -7343,7 +7376,8 @@ BTagsInputComponent.propDecorators = {
     scrollableOptionsInView: [{ type: Input }],
     onTagsChanged: [{ type: Output }],
     onMaxTagsReached: [{ type: Output }],
-    onNoOptionsMatch: [{ type: Output }]
+    onNoOptionsMatch: [{ type: Output }],
+    onBlurInput: [{ type: Output }]
 };
 
 let options;
@@ -7787,6 +7821,8 @@ class FormOptions {
         this.DisableErrorNotification = false;
         //If ="true" disable startblockui before submission
         this.DisableBlockUI = false;
+        //If ="true" disable modal from dismiss automatically 
+        this.DisableModalDismiss = false;
     }
 }