@bnsights/bbsf-controls 1.0.43 → 1.0.46

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

@@ -2544,9 +2544,9 @@
             }
             return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
         };
-        DropdownListComponent.prototype.onItemSelect = function (item) {
+        DropdownListComponent.prototype.onItemSelect = function () {
             this.onChangeService.ChangeValue(this.options.Name);
-            var originalValue = item;
+            var originalValue = this.options.SelectedItems;
             if (this.options.PatchFunction && this.options.PatchPath && this.group.get(this.options.Name).valid) {
                 this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
             }
@@ -2590,7 +2590,7 @@
         { type: i0.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($event[options.ItemTempletkey])\" (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($event.target.value)\"\r\n        [disabled]=\"options.IsDisabled\" formControlName=\"{{options.Name}}\">\r\n        <option value=\"\" disabled>--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]=\"'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",
                     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"]
                 },] }
     ];
@@ -4545,7 +4545,7 @@
                     this.TagsFormControl.invalid;
                 }
             }
-            var originalValue = this.TagsFormControl.value;
+            var originalValue = this.TagsFormControl.value.map(function (a) { return a.key; });
             if (this.options.PatchFunction && this.options.PatchPath && this.TagsFormControl.valid) {
                 this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
             }
@@ -4697,6 +4697,16 @@
                     }, false);
                 }
             }
+            //Add click event on Reset Filter button
+            if (this.options.ResetFilterButtonName != null) {
+                var button = document.getElementsByName(this.options.ResetFilterButtonName)[0];
+                if (button != undefined) {
+                    var element = button;
+                    element.addEventListener("click", function (e) {
+                        _this.clearFilters();
+                    }, false);
+                }
+            }
             if (this.options.TypeaheadSearchControlNames != null && this.options.TypeaheadSearchControlNames.length > 0) {
                 var TypeaheadSearchControlNames = this.options.TypeaheadSearchControlNames;
                 for (var index = 0; index < TypeaheadSearchControlNames.length; index++) {
@@ -4755,42 +4765,14 @@
             pagingDTO.CurrentPageNumber = page;
             pagingDTO.TotalCount = this.totalRow;
             pagingDTO.IsFilterUpdated = IsFilterUpdated;
-            var params = new http$1.HttpParams();
-            if (this.options.Filters != null && this.options.Filters != []) {
-                for (var index = 0; index < this.options.Filters.length; index++) {
-                    if (this.options.Filters[index].FormControlName != null && this.options.Filters[index].FormControlName != "") {
-                        var FormControlName = this.options.Filters[index].FormControlName;
-                        var ControlValue = this.group.controls[FormControlName].value;
-                        if (ControlValue != undefined && ControlValue != null) {
-                            if (this.options.Filters[index].FilterType == exports.FilterType.DatePicker) {
-                                if (Array.isArray(ControlValue)) {
-                                    for (var element = 0; element < ControlValue.length; element++) {
-                                        var value = ControlValue[element];
-                                        params = params.append(this.options.Filters[index].ActionParameterName, value);
-                                    }
-                                }
-                                else {
-                                    params = params.append(this.options.Filters[index].ActionParameterName, ControlValue);
-                                }
-                            }
-                            else {
-                                if (this.options.Filters[index].FilterType == exports.FilterType.AutocompleteTextBox)
-                                    ControlValue = JSON.stringify(ControlValue);
-                                if (this.options.Filters[index].FilterType == exports.FilterType.TagInput)
-                                    ControlValue = JSON.stringify(ControlValue);
-                                params = params.append(this.options.Filters[index].ActionParameterName, ControlValue);
-                            }
-                        }
-                    }
-                    else {
-                        var ElementjQuerySelector = this.options.Filters[index].jQuerySelector;
-                        var ElementValue = document.querySelector(ElementjQuerySelector).value;
-                        if (ElementValue != undefined && ElementValue != null)
-                            params = params.append(this.options.Filters[index].ActionParameterName, ElementValue);
-                    }
-                }
-            }
-            this.requestHandlerService.post(this.options.ActionPostURL, pagingDTO, null, params, null)
+            var filters = {};
+            filters = this.getFiltersValue();
+            //Set Filters object that sent to action URL
+            var filtersDTO = {
+                PagingDTO: pagingDTO,
+                Filters: filters
+            };
+            this.requestHandlerService.post(this.options.ActionPostURL, this.options.Filters && this.options.Filters.length > 0 ? filtersDTO : pagingDTO)
                 .subscribe(function (responseData) {
                 _this.result = responseData.items; //this.castItems(responseData.items);
                 var castedResult = classTransformer.plainToClass(_this.options.TypeOfResponse, _this.result, { excludeExtraneousValues: true });
@@ -4850,6 +4832,60 @@
                     this.itemsText = this.utilityService.getResourceValue("Item");
             }
         };
+        PagingComponent.prototype.clearFilters = function () {
+            if (this.options.Filters != null && this.options.Filters != []) {
+                for (var index = 0; index < this.options.Filters.length; index++) {
+                    if (this.options.Filters[index].FormControlName != null && this.options.Filters[index].FormControlName != "") {
+                        var FormControlName = this.options.Filters[index].FormControlName;
+                        this.group.controls[FormControlName].setValue(null);
+                    }
+                }
+                this.ReinitializePaging();
+            }
+        };
+        PagingComponent.prototype.getFiltersValue = function () {
+            var filters = {};
+            if (this.options.Filters != null && this.options.Filters != []) {
+                for (var index = 0; index < this.options.Filters.length; index++) {
+                    if (this.options.Filters[index].FormControlName != null && this.options.Filters[index].FormControlName != "") {
+                        var FormControlName = this.options.Filters[index].FormControlName;
+                        var ControlValue = this.group.controls[FormControlName].value;
+                        if (ControlValue != undefined && ControlValue != null && ControlValue != "") {
+                            if (this.options.Filters[index].FilterType == exports.FilterType.DatePicker) {
+                                if (Array.isArray(ControlValue)) {
+                                    for (var element = 0; element < ControlValue.length; element++) {
+                                        var value = ControlValue[element];
+                                        filters[this.options.Filters[index].ActionParameterName] = value;
+                                    }
+                                }
+                                else {
+                                    filters[this.options.Filters[index].ActionParameterName] = ControlValue;
+                                }
+                            }
+                            else {
+                                if (this.options.Filters[index].FilterType == exports.FilterType.AutocompleteTextBox)
+                                    ControlValue = JSON.stringify(ControlValue);
+                                if (this.options.Filters[index].FilterType == exports.FilterType.TagInput)
+                                    ControlValue = JSON.stringify(ControlValue);
+                                filters[this.options.Filters[index].ActionParameterName] = ControlValue;
+                            }
+                        }
+                        else {
+                            filters[this.options.Filters[index].ActionParameterName] = null;
+                        }
+                    }
+                    else {
+                        var ElementjQuerySelector = this.options.Filters[index].jQuerySelector;
+                        var ElementValue = document.querySelector(ElementjQuerySelector).value;
+                        if (ElementValue != undefined && ElementValue != null)
+                            filters[this.options.Filters[index].ActionParameterName] = ElementValue;
+                        else
+                            filters[this.options.Filters[index].ActionParameterName] = null;
+                    }
+                }
+            }
+            return filters;
+        };
         return PagingComponent;
     }());
     PagingComponent.decorators = [
@@ -5851,10 +5887,7 @@
         FormComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             this.options.FormGroup.valueChanges.subscribe(function (es) {
-                if (_this.isChange != null)
-                    _this.OnChange.emit(_this.isChange);
-                else
-                    _this.isChange = true;
+                _this.OnChange.emit(true);
             });
         };
         FormComponent.prototype.submit = function () {
@@ -6432,11 +6465,23 @@
         function RenderComponentService(componentFactoryResolver) {
             this.componentFactoryResolver = componentFactoryResolver;
         }
-        RenderComponentService.prototype.renderDynamicComponent = function (viewContainerRef, component, group, options) {
+        RenderComponentService.prototype.renderDynamicComponent = function (viewContainerRef, component, group, options, size) {
+            if (size === void 0) { size = 0; }
             var factory = this.componentFactoryResolver.resolveComponentFactory(component);
             var componentRef = viewContainerRef.createComponent(factory);
             componentRef.instance.group = group;
             componentRef.instance.options = options;
+            if (size > 0) {
+                var htmlElement = componentRef.hostView.rootNodes[0];
+                // `element` is the element you want to wrap
+                var parent = htmlElement.parentNode;
+                var wrapper = document.createElement('div');
+                wrapper.className = "col-md-" + size;
+                // set the wrapper as child (instead of the element)
+                parent.replaceChild(wrapper, htmlElement);
+                // set element as child of wrapper
+                wrapper.appendChild(htmlElement);
+            }
         };
         return RenderComponentService;
     }());
@@ -7783,6 +7828,8 @@
             /**listens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll. */
             this.ScrollWindow = true;
             this.ForceDirection = exports.ForceDirection.English;
+            /** Clear Filter button selector  */
+            this.ResetFilterButtonName = null;
         }
         return PagingOptions;
     }());