@bnsights/bbsf-controls 1.0.57 → 1.0.58

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

@@ -4511,6 +4511,10 @@
                 }
             }
         };
+        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) {
@@ -4595,19 +4610,8 @@
         };
         TagsInputComponent.prototype.AddTag = function (event, key) {
             var _a, _b;
-            //Check if input is charachter
-            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();
-                }
-            }
             //Check if input is enter press
-            else if (this.IsNoMatch == true && event.key == "Enter" && this.options.AllowNewSelection && key.selected) {
+            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);
@@ -4621,6 +4625,17 @@
                         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 });
@@ -4663,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                      (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\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"]
                 },] }
     ];
@@ -4680,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 () {
@@ -7389,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
@@ -7468,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 [
@@ -7580,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 === '') {
@@ -7588,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);
@@ -7620,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);