@bnsights/bbsf-controls 1.0.56 → 1.0.58

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

@@ -4488,14 +4488,14 @@
             TagsInputComponent.controlContainerstatic = this.controlContainer;
         }
         TagsInputComponent.showErrorOfInputs = function (errors) {
-            var e_1, _a;
+            var e_1, _c;
             var controlContainerstatic = TagsInputComponent.controlContainerstatic;
             var formGroup = controlContainerstatic.control;
             for (var key in errors) {
                 if (errors.hasOwnProperty(key)) {
                     try {
-                        for (var _b = (e_1 = void 0, __values(errors[key])), _c = _b.next(); !_c.done; _c = _b.next()) {
-                            var iterator = _c.value;
+                        for (var _d = (e_1 = void 0, __values(errors[key])), _e = _d.next(); !_e.done; _e = _d.next()) {
+                            var iterator = _e.value;
                             var formControl = formGroup.get(key);
                             formControl.setErrors({ "FluentApi": iterator });
                             formControl.markAsTouched();
@@ -4504,13 +4504,17 @@
                     catch (e_1_1) { e_1 = { error: e_1_1 }; }
                     finally {
                         try {
-                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                            if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
                         }
                         finally { if (e_1) throw e_1.error; }
                     }
                 }
             }
         };
+        TagsInputComponent.prototype.ngOnDestroy = function () {
+            if (this.changeValueSubscription)
+                this.changeValueSubscription.unsubscribe();
+        };
         TagsInputComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.controlValidationService.isCreatedBefor = false;
@@ -4556,6 +4560,17 @@
                 _this.group.markAllAsTouched();
                 _this.markAllAsTouched = true;
             });
+            //Check for changing in value
+            this.changeValueSubscription = this.TagsFormControl.valueChanges.subscribe(function (c) {
+                var _a;
+                _this.tags = _this.TagsFormControl.value;
+                _this.SelectedId = (_a = _this.tags) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return item.id; }).map(function (item) { return item.id; });
+                if (_this.tags == null) {
+                    _this.SearchKey.selected = "";
+                    _this.tags = [];
+                    _this.TagsFormControl.setValue([]);
+                }
+            });
         };
         TagsInputComponent.prototype.ngAfterViewInit = function () {
             if (this.options.AttributeList != null) {
@@ -4581,6 +4596,9 @@
             this.controlUtility.CopyInputMessage(inputElement);
         };
         TagsInputComponent.prototype.searchFunctionFactory = function (Text) {
+            //If no text then return empty observable
+            if (!Text)
+                return rxjs.EMPTY;
             var Url = this.options.ActionURL + "?" + this.options.QueryParamName + "=" + encodeURIComponent(Text) + "&" + this.options.SelectedItemsParamName + "=" + this.SelectedId;
             if (this.options.ExtraFilters)
                 Url = Url + ("&" + this.options.ExtraFilters);
@@ -4591,17 +4609,9 @@
             return Model;
         };
         TagsInputComponent.prototype.AddTag = function (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);
@@ -4615,6 +4625,26 @@
                         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();
+                }
+            }
         };
         TagsInputComponent.prototype.onTagsChanged = function (result) {
             //console.log(this.tags)
@@ -4648,7 +4678,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'BBSF-TagsInput',
-                    template: "<div class=\"b-control b-tags-input\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n    <div class=\"form-group row\" [formGroup]=\"TagsFormGroup\">\r\n\r\n      <label class=\"b-label col-form-label col-sm-12 \" [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"]
                 },] }
     ];
@@ -4665,7 +4695,8 @@
     TagsInputComponent.propDecorators = {
         group: [{ type: i0.Input }],
         options: [{ type: i0.Input }],
-        OnChange: [{ type: i0.Output }]
+        OnChange: [{ type: i0.Output }],
+        SearchKey: [{ type: i0.ViewChild, args: ['SearchKey', { static: false },] }]
     };
 
     var PagingDTO = /** @class */ (function () {
@@ -7374,7 +7405,7 @@
             if (this.options.RepeaterValue.length > 0) {
                 this.originalItems = this.options.RepeaterValue;
                 for (var index = 0; index < this.options.RepeaterValue.length; index++) {
-                    this.items.push(index + 1);
+                    this.items.push(index);
                 }
             }
             else
@@ -7453,14 +7484,17 @@
             this.items = this.items.filter(function (res) { return res != _this.items[Index]; });
         };
         RepeaterTableComponent.prototype.addItem = function () {
-            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);
         };
         return RepeaterTableComponent;
     }());
     RepeaterTableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-repeater-table',
-                    template: "<div class=\"b-control b-repeater-table\">\r\n    <table class=\"{{options.RepeaterTableExtraClasses}}\">\r\n        <thead>\r\n            <tr class=\"{{options.RepeaterTableRowExtraClasses}}\">\r\n                <th *ngFor=\"let item of options.RepeaterStructure\" 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 = function () { return [
@@ -7565,7 +7599,8 @@
             }
         };
         BTagsInputComponent.prototype.removeLastTag = function (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 === '') {
@@ -7573,16 +7608,18 @@
             }
         };
         BTagsInputComponent.prototype.addTag = function (tagInput) {
-            var _a;
+            var _b;
             if (tagInput.value.trim() !== '') {
-                var tag = (_a = {},
-                    _a[this.displayField] = tagInput.value,
-                    _a);
+                var tag = (_b = {},
+                    _b[this.displayField] = tagInput.value,
+                    _b);
                 this.addPredefinedTag(tag);
             }
             tagInput.value = '';
         };
         BTagsInputComponent.prototype.addPredefinedTag = function (tag) {
+            if (this.tags == null)
+                this.tags = [];
             if (!this.maximumOfTagsReached()) {
                 this.tags.push(tag);
                 this.tagsChanged('add', tag);
@@ -7605,11 +7642,11 @@
             return this.canDeleteTags;
         };
         BTagsInputComponent.prototype.typeaheadOnSelect = function (e) {
-            var _a;
+            var _b;
             if (typeof e.item === 'string') {
-                this.addPredefinedTag((_a = {},
-                    _a[this.displayField] = e.value,
-                    _a));
+                this.addPredefinedTag((_b = {},
+                    _b[this.displayField] = e.value,
+                    _b));
             }
             else {
                 this.addPredefinedTag(e.item);