@bnsights/bbsf-controls 1.0.56 → 1.0.58

package/fesm2015/bnsights-bbsf-controls.js

@@ -17,7 +17,7 @@ import { DatePipe, CommonModule } from '@angular/common';
 import { SearchCountryField, NgxIntlTelInputModule } from 'ngx-intl-tel-input';
 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 { Subject, Observable, noop as noop$1, of, EMPTY, Subscription } from 'rxjs';
 import { OwlDateTimeIntl, DateTimeAdapter, OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
 import { FileUploader, FileLikeObject, FileUploadModule } from 'ng2-file-upload';
 import { __decorate, __awaiter } from 'tslib';
@@ -4071,6 +4071,10 @@ class TagsInputComponent {
             }
         }
     }
+    ngOnDestroy() {
+        if (this.changeValueSubscription)
+            this.changeValueSubscription.unsubscribe();
+    }
     ngOnInit() {
         this.controlValidationService.isCreatedBefor = false;
         this.options.DatasourceItemText = this.options.DatasourceItemText.toLowerCase();
@@ -4115,6 +4119,17 @@ class TagsInputComponent {
             this.group.markAllAsTouched();
             this.markAllAsTouched = true;
         });
+        //Check for changing in value
+        this.changeValueSubscription = this.TagsFormControl.valueChanges.subscribe(c => {
+            var _a;
+            this.tags = this.TagsFormControl.value;
+            this.SelectedId = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.filter(item => item.id).map(item => item.id);
+            if (this.tags == null) {
+                this.SearchKey.selected = "";
+                this.tags = [];
+                this.TagsFormControl.setValue([]);
+            }
+        });
     }
     ngAfterViewInit() {
         if (this.options.AttributeList != null) {
@@ -4140,6 +4155,9 @@ class TagsInputComponent {
         this.controlUtility.CopyInputMessage(inputElement);
     }
     searchFunctionFactory(Text) {
+        //If no text then return empty observable
+        if (!Text)
+            return EMPTY;
         let Url = `${this.options.ActionURL}?${this.options.QueryParamName}=${encodeURIComponent(Text)}&${this.options.SelectedItemsParamName}=${this.SelectedId}`;
         if (this.options.ExtraFilters)
             Url = Url + `&${this.options.ExtraFilters}`;
@@ -4150,17 +4168,9 @@ class TagsInputComponent {
         return Model;
     }
     AddTag(event, key) {
-        if (this.IsNoMatch == true && this.options.AllowNewSelection == false && key.selected) {
-            this.TagsFormControl.setErrors({ "errorMassage": this.options.NoResultText });
-            this.TagsFormControl.markAsTouched();
-            this.TagsFormControl.invalid;
-        }
-        else if (this.IsNoMatch == false && this.options.AllowNewSelection == false) {
-            this.TagsFormControl.clearValidators();
-            this.TagsFormControl.updateValueAndValidity();
-            this.TagsFormControl.valid;
-        }
-        else if (this.IsNoMatch == true && event == "Enter" && this.options.AllowNewSelection && key.selected) {
+        var _a, _b;
+        //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)) {
                 this.tags.push({ name: key.selected });
                 this.group.get(this.options.Name).setValue(this.tags);
@@ -4174,6 +4184,26 @@ class TagsInputComponent {
                     this.tags.pop();
             }
         }
+        //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) {
+                this.TagsFormControl.setErrors({ "errorMassage": this.options.NoResultText });
+                this.TagsFormControl.markAsTouched();
+            }
+            else if (this.IsNoMatch == false && this.options.AllowNewSelection == false) {
+                this.TagsFormControl.clearValidators();
+                this.TagsFormControl.updateValueAndValidity();
+            }
+        }
+        //Remove unmatched error incase of deleting search value
+        else if (event.key === "Backspace" && ((_a = key.selected) === null || _a === void 0 ? void 0 : _a.length) <= 1 && this.TagsFormControl.hasError('errorMassage')) {
+            this.TagsFormControl.setErrors({ "errorMassage": null });
+            this.TagsFormControl.updateValueAndValidity();
+            if (((_b = this.SelectedId) === null || _b === void 0 ? void 0 : _b.length) == 0 && this.options.IsRequired) {
+                this.TagsFormControl.setErrors({ required: "" });
+                this.TagsFormControl.markAsTouched();
+            }
+        }
     }
     onTagsChanged(result) {
         //console.log(this.tags)
@@ -4206,7 +4236,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",
+                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",
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
             },] }
 ];
@@ -4223,7 +4253,8 @@ TagsInputComponent.ctorParameters = () => [
 TagsInputComponent.propDecorators = {
     group: [{ type: Input }],
     options: [{ type: Input }],
-    OnChange: [{ type: Output }]
+    OnChange: [{ type: Output }],
+    SearchKey: [{ type: ViewChild, args: ['SearchKey', { static: false },] }]
 };
 
 class PagingDTO {
@@ -6857,7 +6888,7 @@ class RepeaterTableComponent {
         if (this.options.RepeaterValue.length > 0) {
             this.originalItems = this.options.RepeaterValue;
             for (let index = 0; index < this.options.RepeaterValue.length; index++) {
-                this.items.push(index + 1);
+                this.items.push(index);
             }
         }
         else
@@ -6930,13 +6961,16 @@ class RepeaterTableComponent {
         this.items = this.items.filter((res) => res != this.items[Index]);
     }
     addItem() {
-        this.items.push(this.items[this.items.length - 1] + 1);
+        if (this.items.length == 0)
+            this.items.push(this.items.length);
+        else
+            this.items.push(this.items[this.items.length - 1] + 1);
     }
 }
 RepeaterTableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-repeater-table',
-                template: "<div class=\"b-control b-repeater-table\">\r\n    <table class=\"{{options.RepeaterTableExtraClasses}}\">\r\n        <thead>\r\n            <tr class=\"{{options.RepeaterTableRowExtraClasses}}\">\r\n                <th *ngFor=\"let item of options.RepeaterStructure\" class=\"min-w-150px\">{{item.HeaderTitle}}</th>\r\n                <th>{{utilityService.getResourceValue(options.ActionLabelKey)}}</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let item of items  ; index as i\">\r\n                <td *ngFor=\"let RepeaterField of options.RepeaterStructure  ; index as r\">\r\n                    <repeater-field-builder [RepeaterField]=\"RepeaterField\" [itemNumber]=\"i\"\r\n                        [itemsValue]=\"originalItems\" [controlNumber]=\"r\" [group]=\"repeaterGroup\">\r\n                    </repeater-field-builder>\r\n                </td>\r\n                <td class=\"d-flex align-items-center\">\r\n                    <button class=\"{{options.DeleteButtonExtraClasses}}\" type=\"button\" (click)=\"deleteItem(i)\"\r\n                        [disabled]=\"(items.length ==options.MinRequiredItems&&options.IsRequired) ||(originalItems.length-1>=i)\">\r\n                        <span [innerHTML]=\"options.DeleteButtonText\"></span></button>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n        <tfoot>\r\n            <tr>\r\n                <td colspan=\"4\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-12 d-grid gap-2\"> \r\n                            <button class=\"{{options.AddButtonExtraClasses}}\" type=\"button\" (click)=\"addItem()\"><span\r\n                                [innerHTML]=\"options.AddButtonText\"></span></button>\r\n                        </div>\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </tfoot>\r\n    </table>\r\n</div>"
+                template: "<div class=\"b-control b-repeater-table\">\r\n    <table class=\"{{options.RepeaterTableExtraClasses}}\">\r\n        <thead>\r\n            <tr class=\"{{options.RepeaterTableRowExtraClasses}}\">\r\n                <th *ngFor=\"let item of options.RepeaterStructure\" class=\"min-w-150px\">{{item.HeaderTitle}}</th>\r\n                <th>{{utilityService.getResourceValue(options.ActionLabelKey)}}</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let item of items  ; index as i\">\r\n                <td *ngFor=\"let RepeaterField of options.RepeaterStructure  ; index as r\">\r\n                    <repeater-field-builder [RepeaterField]=\"RepeaterField\" [itemNumber]=\"i\"\r\n                        [itemsValue]=\"originalItems\" [controlNumber]=\"r\" [group]=\"repeaterGroup\">\r\n                    </repeater-field-builder>\r\n                </td>\r\n                <td class=\"d-flex align-items-center\">\r\n                    <button class=\"{{options.DeleteButtonExtraClasses}}\" type=\"button\" (click)=\"deleteItem(i)\"\r\n                        [disabled]=\"(items.length ==options.MinRequiredItems&&options.IsRequired)\">\r\n                        <span [innerHTML]=\"options.DeleteButtonText\"></span></button>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n        <!-- ||(originalItems.length-1>=i -->\r\n        <tfoot>\r\n            <tr>\r\n                <td colspan=\"4\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-12 d-grid gap-2\"> \r\n                            <button class=\"{{options.AddButtonExtraClasses}}\" type=\"button\" (click)=\"addItem()\"><span\r\n                                [innerHTML]=\"options.AddButtonText\"></span></button>\r\n                        </div>\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </tfoot>\r\n    </table>\r\n</div>"
             },] }
 ];
 RepeaterTableComponent.ctorParameters = () => [
@@ -7191,7 +7225,8 @@ class BTagsInputComponent {
         }
     }
     removeLastTag(tagInput) {
-        if (!this.removeLastOnBackspace || !this.tags.length) {
+        var _a;
+        if (!this.removeLastOnBackspace || !((_a = this.tags) === null || _a === void 0 ? void 0 : _a.length)) {
             return;
         }
         if (tagInput.value === '') {
@@ -7208,6 +7243,8 @@ class BTagsInputComponent {
         tagInput.value = '';
     }
     addPredefinedTag(tag) {
+        if (this.tags == null)
+            this.tags = [];
         if (!this.maximumOfTagsReached()) {
             this.tags.push(tag);
             this.tagsChanged('add', tag);