mmhglobal-dynamicform 2.9.0 → 2.9.2

package/fesm2020/mmhglobal-dynamicform.mjs

@@ -87,6 +87,7 @@ import * as i3$8 from '@progress/kendo-angular-toolbar';
 import { MultiSelect, DropDownList } from '@syncfusion/ej2-dropdowns';
 import { createElement, getComponent } from '@syncfusion/ej2-base';
 import { CheckBox } from '@syncfusion/ej2-buttons';
+import { Query } from '@syncfusion/ej2-data';
 
 /********** Angular **********/
 class ZComponentService {
@@ -13140,21 +13141,47 @@ class SfquerybuilderComponent {
                 mode: 'CheckBox',
                 change: (e) => {
                     this.qryBldrObj.notifyChange(e.value, e.element);
+                },
+                // set contains search by default
+                filtering: (e) => {
+                    this.onFiltering(e, optionList);
                 }
             });
         }
         else {
             return new DropDownList({
+                allowFiltering: true,
                 dataSource: optionList,
                 fields: { text: 'text', value: 'value' },
                 value: args.values,
                 change: (e) => {
                     e.value !== null ? this.qryBldrObj.notifyChange(e.itemData.value, e.element) : ignoreElements;
+                },
+                // set default search by 'contains'
+                filtering: (e) => {
+                    this.onFiltering(e, optionList);
                 }
             });
         }
     }
     //#endregion
+    onFiltering(e, optionList) {
+        // load overall data when search key empty.
+        if (e.text === '') {
+            e.updateData(this.data);
+        }
+        else {
+            // Define array data
+            let searchData = optionList;
+            //Bind the filter event
+            let query = new Query();
+            //frame the query based on search string with filter type.
+            query = (e.text != "") ? query.where("text", "contains", e.text, true) : query;
+            //pass the filter data source, filter query to updateData method.
+            e.updateData(searchData, query);
+        }
+    }
+    ;
     setQueryValue(savedData) {
         //if (!this.qryBldrObj) {
         //  console.warn('query builder object is null.');
@@ -13188,10 +13215,10 @@ class SfquerybuilderComponent {
     }
 }
 SfquerybuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SfquerybuilderComponent, deps: [{ token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.WebApiService }], target: i0.ɵɵFactoryTarget.Component });
-SfquerybuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SfquerybuilderComponent, selector: "app-sfquerybuilder", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "qryBldrObj", first: true, predicate: ["querybuilder"], descendants: true }], ngImport: i0, template: "<ion-item *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <div class=\"qbcontainer\">\r\n    <ejs-querybuilder *ngIf=\"issfLoaded\"\r\n                      #querybuilder\r\n                      width=\"100%\"\r\n                      [dataSource]=\"sfData\"\r\n                      [columns]=\"sdFilter\"\r\n                      [rule]=\"importRules\"\r\n                      (ruleChange)=\"updateRule($event)\"\r\n                      (created)=\"onChange()\">\r\n    </ejs-querybuilder>\r\n\r\n    <div>\r\n      <br>\r\n      <ion-label>Result</ion-label>\r\n      <textarea class=\"output\"\r\n                resizable=\"none\"\r\n                [rows]=\"10\"\r\n                style=\"border: 1px solid #d3d3d3; width: 100%;\">{{displayRule}}</textarea>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".qbcontainer{border-radius:5px;border:1px solid rgba(0,0,0,.08);padding:10px;margin:10px 0;width:100%}#querybuilder .e-slider-container.e-control-wrapper{height:0}ejs-querybuilder{display:block}.e-query-builder{margin:0 auto;display:block}.highcontrast textarea#ruleContent{background-color:#000}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i3$b.QueryBuilderComponent, selector: "ejs-querybuilder", inputs: ["allowValidation", "columns", "cssClass", "dataSource", "displayMode", "enableNotCondition", "enablePersistence", "enableRtl", "fieldMode", "fieldModel", "headerTemplate", "height", "immediateModeDelay", "locale", "matchCase", "maxGroupCount", "operatorModel", "readonly", "rule", "separator", "showButtons", "sortDirection", "summaryView", "valueModel", "width"], outputs: ["actionBegin", "beforeChange", "change", "created", "dataBound", "ruleChange"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SfquerybuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SfquerybuilderComponent, selector: "app-sfquerybuilder", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "qryBldrObj", first: true, predicate: ["querybuilder"], descendants: true }], ngImport: i0, template: "<ion-item *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <div class=\"qbcontainer\">\r\n    <ejs-querybuilder *ngIf=\"issfLoaded\"\r\n                      #querybuilder\r\n                      width=\"100%\"\r\n                      [dataSource]=\"sfData\"\r\n                      [columns]=\"sdFilter\"\r\n                      [rule]=\"importRules\"\r\n                      (ruleChange)=\"updateRule($event)\"\r\n                      (created)=\"onChange()\">\r\n    </ejs-querybuilder>\r\n\r\n    <div *ngIf=\"!data.HideShowResultPanel\">\r\n      <br>\r\n      <ion-label>Result</ion-label>\r\n      <textarea class=\"output\"\r\n                resizable=\"none\"\r\n                [rows]=\"10\"\r\n                style=\"border: 1px solid #d3d3d3; width: 100%;\">{{displayRule}}</textarea>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".qbcontainer{border-radius:5px;border:1px solid rgba(0,0,0,.08);padding:10px;margin:10px 0;width:100%}#querybuilder .e-slider-container.e-control-wrapper{height:0}ejs-querybuilder{display:block}.e-query-builder{margin:0 auto;display:block}.highcontrast textarea#ruleContent{background-color:#000}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i3$b.QueryBuilderComponent, selector: "ejs-querybuilder", inputs: ["allowValidation", "columns", "cssClass", "dataSource", "displayMode", "enableNotCondition", "enablePersistence", "enableRtl", "fieldMode", "fieldModel", "headerTemplate", "height", "immediateModeDelay", "locale", "matchCase", "maxGroupCount", "operatorModel", "readonly", "rule", "separator", "showButtons", "sortDirection", "summaryView", "valueModel", "width"], outputs: ["actionBegin", "beforeChange", "change", "created", "dataBound", "ruleChange"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SfquerybuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sfquerybuilder', template: "<ion-item *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <div class=\"qbcontainer\">\r\n    <ejs-querybuilder *ngIf=\"issfLoaded\"\r\n                      #querybuilder\r\n                      width=\"100%\"\r\n                      [dataSource]=\"sfData\"\r\n                      [columns]=\"sdFilter\"\r\n                      [rule]=\"importRules\"\r\n                      (ruleChange)=\"updateRule($event)\"\r\n                      (created)=\"onChange()\">\r\n    </ejs-querybuilder>\r\n\r\n    <div>\r\n      <br>\r\n      <ion-label>Result</ion-label>\r\n      <textarea class=\"output\"\r\n                resizable=\"none\"\r\n                [rows]=\"10\"\r\n                style=\"border: 1px solid #d3d3d3; width: 100%;\">{{displayRule}}</textarea>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".qbcontainer{border-radius:5px;border:1px solid rgba(0,0,0,.08);padding:10px;margin:10px 0;width:100%}#querybuilder .e-slider-container.e-control-wrapper{height:0}ejs-querybuilder{display:block}.e-query-builder{margin:0 auto;display:block}.highcontrast textarea#ruleContent{background-color:#000}\n"] }]
+            args: [{ selector: 'app-sfquerybuilder', template: "<ion-item *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <div class=\"qbcontainer\">\r\n    <ejs-querybuilder *ngIf=\"issfLoaded\"\r\n                      #querybuilder\r\n                      width=\"100%\"\r\n                      [dataSource]=\"sfData\"\r\n                      [columns]=\"sdFilter\"\r\n                      [rule]=\"importRules\"\r\n                      (ruleChange)=\"updateRule($event)\"\r\n                      (created)=\"onChange()\">\r\n    </ejs-querybuilder>\r\n\r\n    <div *ngIf=\"!data.HideShowResultPanel\">\r\n      <br>\r\n      <ion-label>Result</ion-label>\r\n      <textarea class=\"output\"\r\n                resizable=\"none\"\r\n                [rows]=\"10\"\r\n                style=\"border: 1px solid #d3d3d3; width: 100%;\">{{displayRule}}</textarea>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".qbcontainer{border-radius:5px;border:1px solid rgba(0,0,0,.08);padding:10px;margin:10px 0;width:100%}#querybuilder .e-slider-container.e-control-wrapper{height:0}ejs-querybuilder{display:block}.e-query-builder{margin:0 auto;display:block}.highcontrast textarea#ruleContent{background-color:#000}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.WebApiService }]; }, propDecorators: { qryBldrObj: [{
                 type: ViewChild,
                 args: ['querybuilder']