mmhglobal-dynamicform 2.11.1 → 2.11.3

package/fesm2015/mmhglobal-dynamicform.mjs

@@ -87,8 +87,8 @@ import { trigger, transition, style, animate } from '@angular/animations';
 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';
+import { CheckBox } from '@syncfusion/ej2-buttons';
 
 /********** Angular **********/
 class ZComponentService {
@@ -13020,10 +13020,6 @@ class SfquerybuilderComponent {
         this.qbItems = {};
         this.componentProperties = new ZComponentProperties();
         this.issfLoaded = false;
-        //public currentConfig: QueryBuilderConfig = {
-        //  fields: {},
-        //  allowEmptyRulesets: true
-        //};
         this.allowRuleset = true;
         this.allowCollapse = false;
         this.persistValueOnFieldChange = false;
@@ -13031,6 +13027,7 @@ class SfquerybuilderComponent {
         this.displayRule = '';
         this.loadedDropdownOptions = [];
         this.sdFilter = [];
+        //#region Operator
         this.equalOperator = { value: 'equal', key: 'Equals' };
         this.notequalOperator = { value: 'notequal', key: 'Not Equals' };
         this.startswithOperator = { value: 'startswith', key: 'Start With' };
@@ -13092,6 +13089,7 @@ class SfquerybuilderComponent {
             this.isnullOperator,
             this.isnotnullOperator
         ];
+        //#endregion
         this.selectionComponentList = [];
     }
     ngOnInit() {
@@ -13111,6 +13109,18 @@ class SfquerybuilderComponent {
             //this.issfLoaded = true;  
         });
     }
+    beforeLoadField(fieldElementData) {
+        let beforeLoadField = fieldElementData['BeforeLoadField'];
+        if (beforeLoadField) {
+            beforeLoadField = beforeLoadField.replace('modalGroup.', 'group.');
+            const callFunc = eval('this.' + beforeLoadField);
+            if (typeof callFunc === "function") {
+                const newFunc = callFunc.bind(this);
+                return newFunc(event, this, fieldElementData);
+            }
+        }
+        return of(fieldElementData);
+    }
     loadQueryBuilder() {
         if (this.data['AllowCollapse'] === true) {
             this.allowCollapse = this.data['AllowCollapse'];
@@ -13123,14 +13133,9 @@ class SfquerybuilderComponent {
         }
         this.fields = this.fieldService.getFormFieldCode(this.data.Value, "FormField", null, null);
         try {
-            let isGrouped = true;
             return this.fields.pipe(tap$1((data) => {
-                // if [isGrouped = true] include grouping name as prefix
-                if (data.length > 1) {
-                    isGrouped = false;
-                }
                 data.forEach((field) => __awaiter(this, void 0, void 0, function* () {
-                    this.renderComponentType(field, isGrouped);
+                    this.renderComponentType(field);
                 })); //end foreach
                 this.issfLoaded = true;
             }));
@@ -13141,11 +13146,11 @@ class SfquerybuilderComponent {
             return of(false);
         }
     }
-    renderComponentType(field, isGrouped, fieldTitle) {
+    renderComponentType(field, fieldTitle) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             let componentLabel = field.SubType ? field.Label : (_a = field.Label) !== null && _a !== void 0 ? _a : field.Name;
-            componentLabel = !isGrouped && !ZComponentHelper.isNullUndefinedEmpty(fieldTitle) ? "[" + fieldTitle + "] " + field.Label : !ZComponentHelper.isNullUndefinedEmpty(field.Label) ? field.Label : field.Name;
+            componentLabel = !ZComponentHelper.isNullUndefinedEmpty(fieldTitle) ? "[" + fieldTitle + "] " + field.Label : !ZComponentHelper.isNullUndefinedEmpty(field.Label) ? field.Label : field.Name;
             let componentField = !ZComponentHelper.isNullUndefinedEmpty(fieldTitle) ? fieldTitle + "_" + field.Value : field.Value;
             if (field.Type === 'category' || field.Type === 'multiselect' || field.Type === 'zuiselectmultiple') {
                 this.sdFilter.push({
@@ -13184,11 +13189,11 @@ class SfquerybuilderComponent {
             else if (field.Type === 'kcard') {
                 if (field.Value.length > 0) {
                     field.Value.forEach((item) => __awaiter(this, void 0, void 0, function* () {
-                        this.renderComponentType(item, isGrouped, field.Title);
+                        this.renderComponentType(item, field.Title);
                     }));
                 }
             }
-            else {
+            else if (field.Type != 'zlabel') {
                 this.sdFilter.push({
                     field: componentField,
                     label: componentLabel,
@@ -13199,7 +13204,7 @@ class SfquerybuilderComponent {
             this.sdFilter.sort((a, b) => a.label.toLowerCase() < b.label.toLowerCase() ? -1 : 1);
         });
     }
-    //#region checkbox
+    //#region Generate component 
     generateColumnCheckbox(label, value) {
         return {
             create: () => {
@@ -13220,8 +13225,6 @@ class SfquerybuilderComponent {
             }
         };
     }
-    //#endregion
-    //#region dropdown/multiselect
     generateColumnSelection(fieldElementData) {
         return {
             // Creates the custom component
@@ -13230,8 +13233,7 @@ class SfquerybuilderComponent {
                 if (this.data['Filters']) {
                     this.filters = ZComponentHelper.getGroupEvalValue.call(this, this.data['Filters'], this.group);
                 }
-                //return createElement('input', { attrs: { 'type': 'text', 'style': 'display: none' } });
-                return createElement('input', { attrs: { 'type': 'text' } });
+                return createElement('input', { attrs: { 'type': 'text' } }); // 'display: none'
             },
             // Destroy the custom component
             destroy: (args) => {
@@ -13312,9 +13314,6 @@ class SfquerybuilderComponent {
                                 });
                                 const selectionComponent = this.generateSelectionComponent(args, optionList);
                                 selectionComponent.appendTo('#' + args.elements.id);
-                                //const xxx = document.getElementById(args.elements.id);
-                                ////xxx.appendChild(inputElement);
-                                //xxx.style.display = 'block';
                                 //#region used for updateSelectionOption
                                 const existingIndex = this.selectionComponentList.findIndex((item) => item.componentId === args.elements.id);
                                 if (existingIndex !== -1) {
@@ -13468,10 +13467,6 @@ class SfquerybuilderComponent {
     }
     ;
     setQueryValue(savedData) {
-        //if (!this.qryBldrObj) {
-        //  console.warn('query builder object is null.');
-        //  return;
-        //}
         if (savedData) {
             this.qryBldrObj.setRules(savedData);
             this.updateRule({ rule: savedData });
@@ -13486,24 +13481,12 @@ class SfquerybuilderComponent {
     onChange() {
         this.updateRule({ rule: this.qryBldrObj.getValidRules(this.qryBldrObj.rule) });
     }
-    beforeLoadField(fieldElementData) {
-        let beforeLoadField = fieldElementData['BeforeLoadField'];
-        if (beforeLoadField) {
-            beforeLoadField = beforeLoadField.replace('modalGroup.', 'group.');
-            const callFunc = eval('this.' + beforeLoadField);
-            if (typeof callFunc === "function") {
-                const newFunc = callFunc.bind(this);
-                return newFunc(event, this, fieldElementData);
-            }
-        }
-        return of(fieldElementData);
-    }
 }
 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 *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;background-color:#fff;border-color:#e0e0e0}.highcontrast textarea#ruleContent{background-color:#000}.e-query-builder .e-group-body .e-rule-container{box-shadow:0 2px 6px #d3d3d3;height:auto;margin-top:0;padding-right:12px;border:none;border-color:none}.e-bigger.e-small .e-ddl.e-popup .e-list-item,.e-bigger.e-small .e-ddl.e-popup .e-list-group-item,.e-bigger.e-small .e-ddl.e-popup .e-fixed-head{font-size:14px;line-height:34px;padding-left:0;text-indent:16px}.e-query-builder .e-group-body .e-rule-container .e-rule-filter{width:30%!important}.e-query-builder .e-group-body .e-rule-container .e-value{width:40%!important}\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;background-color:#fff;border-color:#e0e0e0}.highcontrast textarea#ruleContent{background-color:#000}.e-query-builder .e-group-body .e-rule-container{box-shadow:0 2px 6px #d3d3d3;height:auto;margin-top:0;padding-right:12px;border:none;border-color:none}.e-bigger.e-small .e-ddl.e-popup .e-list-item,.e-bigger.e-small .e-ddl.e-popup .e-list-group-item,.e-bigger.e-small .e-ddl.e-popup .e-fixed-head{font-size:14px;line-height:34px;padding-left:0;text-indent:16px}.e-query-builder .e-group-body .e-rule-container .e-rule-filter,.e-query-builder .e-group-body .e-rule-container .e-value{width:40%!important}.e-query-builder .e-group-body .e-rule-container .e-operator{width:15%!important}\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 *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;background-color:#fff;border-color:#e0e0e0}.highcontrast textarea#ruleContent{background-color:#000}.e-query-builder .e-group-body .e-rule-container{box-shadow:0 2px 6px #d3d3d3;height:auto;margin-top:0;padding-right:12px;border:none;border-color:none}.e-bigger.e-small .e-ddl.e-popup .e-list-item,.e-bigger.e-small .e-ddl.e-popup .e-list-group-item,.e-bigger.e-small .e-ddl.e-popup .e-fixed-head{font-size:14px;line-height:34px;padding-left:0;text-indent:16px}.e-query-builder .e-group-body .e-rule-container .e-rule-filter{width:30%!important}.e-query-builder .e-group-body .e-rule-container .e-value{width:40%!important}\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;background-color:#fff;border-color:#e0e0e0}.highcontrast textarea#ruleContent{background-color:#000}.e-query-builder .e-group-body .e-rule-container{box-shadow:0 2px 6px #d3d3d3;height:auto;margin-top:0;padding-right:12px;border:none;border-color:none}.e-bigger.e-small .e-ddl.e-popup .e-list-item,.e-bigger.e-small .e-ddl.e-popup .e-list-group-item,.e-bigger.e-small .e-ddl.e-popup .e-fixed-head{font-size:14px;line-height:34px;padding-left:0;text-indent:16px}.e-query-builder .e-group-body .e-rule-container .e-rule-filter,.e-query-builder .e-group-body .e-rule-container .e-value{width:40%!important}.e-query-builder .e-group-body .e-rule-container .e-operator{width:15%!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.WebApiService }]; }, propDecorators: { qryBldrObj: [{
                 type: ViewChild,
                 args: ['querybuilder']