@syncfusion/ej2-querybuilder 29.2.5 → 29.2.10

package/dist/es6/ej2-querybuilder.es5.js

@@ -205,6 +205,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         _this.isMiddleGroup = false;
         _this.cloneRuleBtnClick = false;
         _this.isValueEmpty = false;
+        _this.isPropChange = false;
         MultiSelect.Inject(CheckBoxSelection);
         return _this;
     }
@@ -1329,7 +1330,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
             else {
                 dragClsName = 'e-icons e-drag-qb-rule e-hidden';
             }
-            var spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-lable': 'drag handle',
+            var spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-label': 'drag handle',
                     title: 'drag handle' } });
             groupHdrElem.appendChild(spanDragElement);
             var className = this.enableSeparateConnector && !isConnector ? 'e-lib e-btn-group e-qb-toggle-btn' : 'e-lib e-btn-group';
@@ -1387,7 +1388,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         else {
             dragClsName = 'e-icons e-drag-qb-rule e-hidden';
         }
-        var spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-lable': 'drag handle',
+        var spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-label': 'drag handle',
                 title: 'drag handle' } });
         fieldElem.appendChild(spanDragElement);
         var filterElem = this.createElement('input', { attrs: { type: 'text', class: 'e-filter-input' } });
@@ -3943,8 +3944,8 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         else {
             this.addGroupElement(false, this.element);
         }
-        if (Browser.isDevice || this.displayMode === 'Vertical') {
-            if (Browser.isDevice) {
+        if (Browser.isDevice || (window.innerWidth < 768 && !this.isPropChange) || this.displayMode === 'Vertical') {
+            if (Browser.isDevice || window.innerWidth < 768) {
                 this.element.style.width = '100%';
                 this.element.classList.add('e-device');
             }
@@ -4067,6 +4068,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
     };
     QueryBuilder.prototype.onPropertyChanged = function (newProp, oldProp) {
         var properties = Object.keys(newProp);
+        this.isPropChange = true;
         var groupElem = this.element.querySelector('.e-group-container');
         var summaryElem = this.element.querySelector('.e-summary-content');
         for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {
@@ -4222,6 +4224,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
                     break;
             }
         }
+        this.isPropChange = false;
     };
     QueryBuilder.prototype.preRender = function () {
         this.element.id = this.element.id || getUniqueID('ej2-querybuilder');
@@ -4781,6 +4784,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         EventHandler.add(wrapper, 'focusin', this.focusEventHandler, this);
         EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);
         EventHandler.add(document, 'keydown', this.keyBoardHandler, this);
+        window.addEventListener('resize', this.windowResizeHandler.bind(this));
     };
     QueryBuilder.prototype.unWireEvents = function () {
         var wrapper = this.getWrapper();
@@ -4789,6 +4793,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
         EventHandler.remove(wrapper, 'focusin', this.focusEventHandler);
         EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);
         EventHandler.remove(document, 'keydown', this.keyBoardHandler);
+        window.removeEventListener('resize', this.windowResizeHandler);
     };
     QueryBuilder.prototype.getParentGroup = function (target, isParent) {
         var groupLevel = (target instanceof Element) ? this.levelColl[target.id] : this.levelColl["" + target];
@@ -5054,6 +5059,14 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    QueryBuilder.prototype.windowResizeHandler = function () {
+        if (Browser.isDevice || window.innerWidth < 768) {
+            this.displayMode = 'Vertical';
+        }
+        else {
+            this.displayMode = 'Horizontal';
+        }
+    };
     QueryBuilder.prototype.clearQBTemplate = function (ruleElemColl) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact || this.isAngular) {