@progress/kendo-vue-data-tools 3.7.4-dev.202212300853 → 3.7.4-dev.202301120847

package/dist/npm/cells/FilterCell.js

@@ -18,6 +18,7 @@ var kendo_vue_dateinputs_1 = require("@progress/kendo-vue-dateinputs");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var filterCommon_1 = require("../filterCommon");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -40,7 +41,8 @@ var FilterCellVue2 = {
     booleanValues: Array,
     onChange: Function,
     render: [String, Function, Object],
-    ariaLabel: String
+    ariaLabel: String,
+    size: String
   },
   inject: {
     kendoLocalizationService: {
@@ -91,6 +93,7 @@ var FilterCellVue2 = {
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
+    var size = this.$props.size;
     var ls = (0, kendo_vue_intl_1.provideLocalizationService)(this);
     var selectedOperator = this.$props.operators.find(function (item) {
       return item.operator === _this.$props.operator;
@@ -109,6 +112,7 @@ var FilterCellVue2 = {
           value: selectedOperator,
           attrs: this.v3 ? undefined : {
             value: selectedOperator,
+            size: size,
             iconClassName: "k-i-filter k-button-icon",
             "data-items": this.$props.operators,
             textField: "text",
@@ -118,6 +122,7 @@ var FilterCellVue2 = {
             },
             "aria-label": this.ariaLabel || ls.toLanguageString(main_1.filterDropDownOperatorAriaLabel, main_1.messages[main_1.filterDropDownOperatorAriaLabel])
           },
+          size: size,
           "class": "k-dropdown-operator",
           iconClassName: "k-i-filter k-button-icon",
           "data-items": this.$props.operators,
@@ -137,12 +142,14 @@ var FilterCellVue2 = {
           return (
             // @ts-ignore
             h(kendo_vue_inputs_1.NumericTextBox, {
-              value: value,
+              size: size,
               attrs: this.v3 ? undefined : {
+                size: size,
                 value: value,
                 title: this.$props.title,
                 "aria-label": this.ariaLabel || ls.toLanguageString(main_1.filterNumericFilterAriaLabel, main_1.messages[main_1.filterNumericFilterAriaLabel])
               },
+              value: value,
               onChange: function onChange(e) {
                 _this.inputChange(e.value, e.event);
               },
@@ -159,12 +166,14 @@ var FilterCellVue2 = {
           return (
             // @ts-ignore
             h(kendo_vue_dateinputs_1.DatePicker, {
-              value: value,
+              size: size,
               attrs: this.v3 ? undefined : {
+                size: size,
                 value: value,
                 title: this.$props.title,
                 "aria-label": this.ariaLabel || ls.toLanguageString(main_1.filterDateFilterAriaLabel, main_1.messages[main_1.filterDateFilterAriaLabel])
               },
+              value: value,
               onChange: function onChange(e) {
                 _this.inputChange(e.value, e);
               },
@@ -186,10 +195,9 @@ var FilterCellVue2 = {
               on: this.v3 ? undefined : {
                 "change": this.boolDropdownChange
               },
-              value: booleanValues.find(function (item) {
-                return item.operator === (value !== null ? value : '');
-              }),
+              size: size,
               attrs: this.v3 ? undefined : {
+                size: size,
                 value: booleanValues.find(function (item) {
                   return item.operator === (value !== null ? value : '');
                 }),
@@ -198,6 +206,9 @@ var FilterCellVue2 = {
                 title: this.$props.title,
                 "aria-label": this.ariaLabel || ls.toLanguageString(main_1.filterEnumFilterDropdownAriaLabel, main_1.messages[main_1.filterEnumFilterDropdownAriaLabel])
               },
+              value: booleanValues.find(function (item) {
+                return item.operator === (value !== null ? value : '');
+              }),
               "data-items": booleanValues,
               textField: "text",
               title: this.$props.title,
@@ -205,14 +216,15 @@ var FilterCellVue2 = {
             })
           );
         default:
-          return h("span", {
-            "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
-          }, [h("input", {
-            "class": "k-input-inner",
-            value: this.v3 ? value || '' : null,
-            domProps: this.v3 ? undefined : {
-              "value": value || ''
+          return h(kendo_vue_inputs_1.Input, {
+            size: size,
+            attrs: this.v3 ? undefined : {
+              size: size,
+              value: value || '',
+              title: this.$props.title,
+              "aria-label": this.ariaLabel || ls.toLanguageString(main_1.filterTextFilterAriaLabel, main_1.messages[main_1.filterTextFilterAriaLabel])
             },
+            value: value || '',
             onInput: function onInput(e) {
               _this.inputChange(e.target.value, e);
             },
@@ -222,28 +234,30 @@ var FilterCellVue2 = {
               }
             },
             title: this.$props.title,
-            attrs: this.v3 ? undefined : {
-              title: this.$props.title,
-              "aria-label": this.ariaLabel || ls.toLanguageString(main_1.filterTextFilterAriaLabel, main_1.messages[main_1.filterTextFilterAriaLabel])
-            },
             "aria-label": this.ariaLabel || ls.toLanguageString(main_1.filterTextFilterAriaLabel, main_1.messages[main_1.filterTextFilterAriaLabel])
-          })]);
+          });
       }
     };
     var defaultRendering = h("div", {
       "class": "k-filtercell"
-    }, [h("span", [filterComponent.call(this, this.$props.filterType, this.$props.value), h("div", {
+    }, [h("div", {
+      "class": "k-filtercell-wrapper"
+    }, [filterComponent.call(this, this.$props.filterType, this.$props.value), h("div", {
       "class": "k-filtercell-operator"
     }, [renderOperatorEditor.call(this),
     // @ts-ignore function children 
     h(kendo_vue_buttons_1.Button, {
-      type: "button",
+      size: size,
       attrs: this.v3 ? undefined : {
+        size: size,
         type: "button",
         icon: 'filter-clear',
+        svgIcon: kendo_svg_icons_1.filterClearIcon,
         title: ls.toLanguageString(main_1.columnMenuFilterClearButton, main_1.messages[main_1.columnMenuFilterClearButton])
       },
+      type: "button",
       icon: 'filter-clear',
+      svgIcon: kendo_svg_icons_1.filterClearIcon,
       "class": {
         /* button is always visible if there is either value or operator */
         'k-disabled': !(!(this.$props.value === null || this.$props.value === '') || this.$props.operator)

package/dist/npm/columnmenu/ColumnMenu.js

@@ -12,6 +12,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_vue_popup_1 = require("@progress/kendo-vue-popup");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var ColumnMenuContent_1 = require("./ColumnMenuContent");
 var utils_1 = require("../navigation/utils");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
@@ -92,8 +93,8 @@ var ColumnMenuVue2 = {
     handleFocus: function handleFocus(_) {
       clearTimeout(this.blurTimeout);
     },
-    anchorClick: function anchorClick() {
-      var that = this;
+    anchorClick: function anchorClick(e) {
+      e.preventDefault();
       this.show = !this.show;
     },
     closeMenu: function closeMenu() {
@@ -142,8 +143,10 @@ var ColumnMenuVue2 = {
     }, [h(kendo_vue_common_1.Icon, {
       name: 'more-vertical',
       attrs: this.v3 ? undefined : {
-        name: 'more-vertical'
-      }
+        name: 'more-vertical',
+        icon: kendo_svg_icons_1.moreVerticalIcon
+      },
+      icon: kendo_svg_icons_1.moreVerticalIcon
     })]),
     // @ts-ignore function children
     h(kendo_vue_popup_1.Popup, {

package/dist/npm/columnmenu/ColumnMenuCheckboxFilter.js

@@ -35,6 +35,7 @@ var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 var ColumnMenuItem_1 = require("./ColumnMenuItem");
 var ColumnMenuItemGroup_1 = require("./ColumnMenuItemGroup");
 var ColumnMenuItemContent_1 = require("./ColumnMenuItemContent");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var kendo_vue_inputs_1 = require("@progress/kendo-vue-inputs");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var main_1 = require("../messages/main");
@@ -153,8 +154,10 @@ var ColumnMenuCheckboxFilterVue2 = {
       }, [h(kendo_vue_common_1.Icon, {
         name: 'search',
         attrs: this.v3 ? undefined : {
-          name: 'search'
+          name: 'search',
+          icon: kendo_svg_icons_1.searchIcon
         },
+        icon: kendo_svg_icons_1.searchIcon,
         "class": "k-input-icon"
       }), h("input", {
         ref: 'searchBox',
@@ -220,9 +223,11 @@ var ColumnMenuCheckboxFilterVue2 = {
           title: localizationService.toLanguageString(main_1.columnMenuFilterTitle, main_1.messages[main_1.columnMenuFilterTitle]),
           attrs: _this2.v3 ? undefined : {
             title: localizationService.toLanguageString(main_1.columnMenuFilterTitle, main_1.messages[main_1.columnMenuFilterTitle]),
-            iconClass: 'k-i-filter'
+            icon: 'filter',
+            svgIcon: kendo_svg_icons_1.filterIcon
           },
-          iconClass: 'k-i-filter',
+          icon: 'filter',
+          svgIcon: kendo_svg_icons_1.filterIcon,
           onClick: _this2.onFilterExpand,
           on: _this2.v3 ? undefined : {
             "click": _this2.onFilterExpand
@@ -381,9 +386,11 @@ var ColumnMenuCheckboxFilterVue2 = {
         title: localizationService.toLanguageString(main_1.columnMenuFilterTitle, main_1.messages[main_1.columnMenuFilterTitle]),
         attrs: _this2.v3 ? undefined : {
           title: localizationService.toLanguageString(main_1.columnMenuFilterTitle, main_1.messages[main_1.columnMenuFilterTitle]),
-          iconClass: 'k-i-filter'
+          icon: 'filter',
+          svgIcon: kendo_svg_icons_1.filterIcon
         },
-        iconClass: 'k-i-filter',
+        icon: 'filter',
+        svgIcon: kendo_svg_icons_1.filterIcon,
         onClick: _this2.onFilterExpand,
         on: _this2.v3 ? undefined : {
           "click": _this2.onFilterExpand

package/dist/npm/columnmenu/ColumnMenuFilter.js

@@ -43,6 +43,7 @@ var main_1 = require("../messages/main");
 var ColumnMenuFilterCell_1 = require("./ColumnMenuFilterCell");
 var ColumnMenuFilterOperators_1 = require("./ColumnMenuFilterOperators");
 var kendo_vue_dropdowns_1 = require("@progress/kendo-vue-dropdowns");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -360,9 +361,11 @@ var ColumnMenuFilterVue2 = {
           title: localizationService.toLanguageString(main_1.columnMenuFilterTitle, main_1.messages[main_1.columnMenuFilterTitle]),
           attrs: _this2.v3 ? undefined : {
             title: localizationService.toLanguageString(main_1.columnMenuFilterTitle, main_1.messages[main_1.columnMenuFilterTitle]),
-            iconClass: 'k-i-filter'
+            icon: 'filter',
+            svgIcon: kendo_svg_icons_1.filterIcon
           },
-          iconClass: 'k-i-filter',
+          icon: 'filter',
+          svgIcon: kendo_svg_icons_1.filterIcon,
           onMenuitemclick: _this2.onFilterExpand,
           on: _this2.v3 ? undefined : {
             "menuitemclick": _this2.onFilterExpand
@@ -649,9 +652,11 @@ var ColumnMenuFilterVue2 = {
         title: localizationService.toLanguageString(main_1.columnMenuFilterTitle, main_1.messages[main_1.columnMenuFilterTitle]),
         attrs: _this2.v3 ? undefined : {
           title: localizationService.toLanguageString(main_1.columnMenuFilterTitle, main_1.messages[main_1.columnMenuFilterTitle]),
-          iconClass: 'k-i-filter'
+          icon: 'filter',
+          svgIcon: kendo_svg_icons_1.filterIcon
         },
-        iconClass: 'k-i-filter',
+        icon: 'filter',
+        svgIcon: kendo_svg_icons_1.filterIcon,
         onMenuitemclick: _this2.onFilterExpand,
         on: _this2.v3 ? undefined : {
           "menuitemclick": _this2.onFilterExpand

package/dist/npm/columnmenu/ColumnMenuItem.d.ts

@@ -3,6 +3,7 @@ declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
 };
+import { SVGIcon } from '@progress/kendo-svg-icons';
 /**
  * The props of the ColumnMenuItem component.
  */
@@ -19,6 +20,14 @@ export interface ColumnMenuItemProps {
      * The class of the icon rendered next to the title.
      */
     iconClass: string;
+    /**
+     * Defines the name for the icon.
+     */
+    icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * The selected state of the component.
      */

package/dist/npm/columnmenu/ColumnMenuItem.js

@@ -17,6 +17,8 @@ var ColumnMenuItemVue2 = {
   props: {
     title: String,
     iconClass: String,
+    icon: String,
+    svgIcon: Object,
     selected: Boolean
   },
   methods: {
@@ -42,7 +44,9 @@ var ColumnMenuItemVue2 = {
     var _a = this.$props,
       title = _a.title,
       iconClass = _a.iconClass,
-      selected = _a.selected;
+      selected = _a.selected,
+      icon = _a.icon,
+      svgIcon = _a.svgIcon;
     return h("div", {
       tabindex: 0,
       attrs: this.v3 ? undefined : {
@@ -57,6 +61,13 @@ var ColumnMenuItemVue2 = {
       "class": "k-columnmenu-item ".concat(selected ? 'k-selected' : '')
     }, [iconClass && h(kendo_vue_common_1.Icon, {
       "class": iconClass
+    }), (icon || svgIcon) && h(kendo_vue_common_1.Icon, {
+      name: icon,
+      attrs: this.v3 ? undefined : {
+        name: icon,
+        svg: svgIcon
+      },
+      svg: svgIcon
     }), title]);
   }
 };

package/dist/npm/columnmenu/ColumnMenuSort.js

@@ -16,6 +16,7 @@ var SortSettings_1 = require("../interfaces/SortSettings");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var main_1 = require("../messages/main");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -173,10 +174,12 @@ var ColumnMenuSortVue2 = {
           title: localizationService.toLanguageString(main_1.columnMenuSortAscending, main_1.messages[main_1.columnMenuSortAscending]),
           attrs: _this.v3 ? undefined : {
             title: localizationService.toLanguageString(main_1.columnMenuSortAscending, main_1.messages[main_1.columnMenuSortAscending]),
-            iconClass: 'k-i-sort-asc-sm',
+            icon: 'sort-asc-small',
+            scgIcon: kendo_svg_icons_1.sortAscSmallIcon,
             selected: sortedAsc(currentSortIndex, sort)
           },
-          iconClass: 'k-i-sort-asc-sm',
+          icon: 'sort-asc-small',
+          scgIcon: kendo_svg_icons_1.sortAscSmallIcon,
           selected: sortedAsc(currentSortIndex, sort),
           onMenuitemclick: _this.onAscClick,
           on: _this.v3 ? undefined : {
@@ -188,10 +191,12 @@ var ColumnMenuSortVue2 = {
           title: localizationService.toLanguageString(main_1.columnMenuSortDescending, main_1.messages[main_1.columnMenuSortDescending]),
           attrs: _this.v3 ? undefined : {
             title: localizationService.toLanguageString(main_1.columnMenuSortDescending, main_1.messages[main_1.columnMenuSortDescending]),
-            iconClass: 'k-i-sort-desc-sm',
+            icon: 'sort-desc-small',
+            svgIcon: kendo_svg_icons_1.sortDescSmallIcon,
             selected: sortedDesc(currentSortIndex, sort)
           },
-          iconClass: 'k-i-sort-desc-sm',
+          icon: 'sort-desc-small',
+          svgIcon: kendo_svg_icons_1.sortDescSmallIcon,
           selected: sortedDesc(currentSortIndex, sort),
           onMenuitemclick: _this.onDescClick,
           on: _this.v3 ? undefined : {
@@ -202,10 +207,12 @@ var ColumnMenuSortVue2 = {
         title: localizationService.toLanguageString(main_1.columnMenuSortAscending, main_1.messages[main_1.columnMenuSortAscending]),
         attrs: _this.v3 ? undefined : {
           title: localizationService.toLanguageString(main_1.columnMenuSortAscending, main_1.messages[main_1.columnMenuSortAscending]),
-          iconClass: 'k-i-sort-asc-sm',
+          icon: 'sort-asc-small',
+          scgIcon: kendo_svg_icons_1.sortAscSmallIcon,
           selected: sortedAsc(currentSortIndex, sort)
         },
-        iconClass: 'k-i-sort-asc-sm',
+        icon: 'sort-asc-small',
+        scgIcon: kendo_svg_icons_1.sortAscSmallIcon,
         selected: sortedAsc(currentSortIndex, sort),
         onMenuitemclick: _this.onAscClick,
         on: _this.v3 ? undefined : {
@@ -215,10 +222,12 @@ var ColumnMenuSortVue2 = {
         title: localizationService.toLanguageString(main_1.columnMenuSortDescending, main_1.messages[main_1.columnMenuSortDescending]),
         attrs: _this.v3 ? undefined : {
           title: localizationService.toLanguageString(main_1.columnMenuSortDescending, main_1.messages[main_1.columnMenuSortDescending]),
-          iconClass: 'k-i-sort-desc-sm',
+          icon: 'sort-desc-small',
+          svgIcon: kendo_svg_icons_1.sortDescSmallIcon,
           selected: sortedDesc(currentSortIndex, sort)
         },
-        iconClass: 'k-i-sort-desc-sm',
+        icon: 'sort-desc-small',
+        svgIcon: kendo_svg_icons_1.sortDescSmallIcon,
         selected: sortedDesc(currentSortIndex, sort),
         onMenuitemclick: _this.onDescClick,
         on: _this.v3 ? undefined : {

package/dist/npm/drag/ColumnDraggable.js

@@ -63,8 +63,12 @@ var ColumnDraggableVue2 = {
         onRelease: this.onRelease,
         ref: 'draggable'
       }, this.v3 ? function () {
-        return [h("tr", [defaultSlot])];
-      } : [h("tr", [defaultSlot])])
+        return [h("tr", {
+          "class": 'k-table-row'
+        }, [defaultSlot])];
+      } : [h("tr", {
+        "class": 'k-table-row'
+      }, [defaultSlot])])
     );
   }
 };

package/dist/npm/drag/CommonDragLogic.d.ts

@@ -28,6 +28,7 @@ export declare class CommonDragLogic {
     dragHandler: (event: any, element: HTMLElement) => void;
     releaseHandler: (event: any) => void;
     private getColumnIndex;
+    private isTargetGroupingContainer;
     private getGroupIndex;
     private isValid;
     private updateDragElementClue;

package/dist/npm/drag/CommonDragLogic.js

@@ -19,7 +19,7 @@ var CommonDragLogic = /** @class */ (function () {
         this.currentGroup = -1;
         this.groupPanelDivElement = null;
         this.refGroupPanelDiv = function (e) {
-            _this.groupPanelDivElement = e;
+            _this.groupPanelDivElement = e.children ? e.children[0] : e;
         };
         this.refDropElementClue = function (e) {
             _this.dropElementClue = e;
@@ -55,10 +55,12 @@ var CommonDragLogic = /** @class */ (function () {
                 return;
             }
             _this.currentColumn = _this.getColumnIndex(event, element);
-            _this.currentGroup = _this.getGroupIndex(event);
-            if (_this.groupPanelDivElement && _this.startGroup >= 0) {
-                _this.currentGroup = Math.min(_this.currentGroup, _this.groupPanelDivElement.children.length - 2);
-            }
+            var groupPanelChildren = _this.groupPanelDivElement.children;
+            _this.currentGroup = _this.isTargetGroupingContainer(event)
+                ? groupPanelChildren && groupPanelChildren.length
+                    ? groupPanelChildren.length - 1
+                    : 0
+                : _this.getGroupIndex(event);
             var invalidIndex = !_this.isValid();
             if (invalidIndex) {
                 _this.currentColumn = -1;
@@ -66,7 +68,9 @@ var CommonDragLogic = /** @class */ (function () {
             }
             var targetElement = (_this.currentColumn >= 0) ?
                 element.children[_this.columns[_this.currentColumn].index] :
-                _this.groupPanelDivElement && _this.groupPanelDivElement.children[_this.currentGroup];
+                _this.isTargetGroupingContainer(event)
+                    ? event.originalEvent.target
+                    : _this.groupPanelDivElement && _this.groupPanelDivElement.children[_this.currentGroup];
             _this.updateDragElementClue(event, element, targetElement, invalidIndex);
             _this.updateDropElementClue(event, element, targetElement, invalidIndex);
         };
@@ -121,6 +125,10 @@ var CommonDragLogic = /** @class */ (function () {
         }
         return -1;
     };
+    CommonDragLogic.prototype.isTargetGroupingContainer = function (event) {
+        var target = event.originalEvent.target;
+        return target.className.indexOf('k-grouping-drop-container') !== -1;
+    };
     CommonDragLogic.prototype.getGroupIndex = function (event) {
         return (0, main_1.getIndex)(event, this.groupPanelDivElement);
     };
@@ -154,7 +162,7 @@ var CommonDragLogic = /** @class */ (function () {
         this.dragElementClue.top = (event.pageY + 10);
         this.dragElementClue.left = event.pageX;
         this.dragElementClue.innerText = innerText;
-        this.dragElementClue.status = (invalidIndex || !targetElement) ? 'k-i-cancel' : 'k-i-add';
+        this.dragElementClue.status = (invalidIndex || !targetElement) ? 'k-i-cancel' : 'k-i-plus';
     };
     CommonDragLogic.prototype.updateDropElementClue = function (event, element, targetElement, invalidIndex) {
         if (!this.dropElementClue) {
@@ -165,15 +173,18 @@ var CommonDragLogic = /** @class */ (function () {
             return;
         }
         var rect = targetElement.getBoundingClientRect();
+        var groupElement = targetElement.closest('.k-grouping-header');
+        var rectParent = (groupElement || targetElement).getBoundingClientRect();
         var left = rect.left + event.pageX - event.clientX - 6;
-        if (this.currentColumn > this.startColumn || this.currentGroup > this.startGroup && this.startGroup !== -1) {
+        if (!this.isTargetGroupingContainer(event) && (this.currentColumn > this.startColumn
+            || this.currentGroup > this.startGroup && this.startGroup !== -1)) {
             left += rect.width;
         }
-        var top = rect.top + event.pageY - event.clientY;
+        var top = rectParent.top + event.pageY - event.clientY;
         this.dropElementClue.visible = true;
         this.dropElementClue.top = top;
         this.dropElementClue.left = left;
-        this.dropElementClue.height = (this.currentColumn >= 0) ? element.clientHeight : rect.height;
+        this.dropElementClue.height = (this.currentColumn >= 0) ? element.clientHeight : rectParent.height;
     };
     return CommonDragLogic;
 }());

package/dist/npm/filter/Expression.js

@@ -35,6 +35,7 @@ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 var kendo_vue_dropdowns_1 = require("@progress/kendo-vue-dropdowns");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var operators_1 = require("./operators");
 var main_1 = require("../messages/main");
 var TextFilter_1 = require("./filters/TextFilter");
@@ -279,11 +280,13 @@ var ExpressionVue2 = {
           title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
           attrs: _this.v3 ? undefined : {
             title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-            icon: "close",
+            icon: "x",
+            svgIcon: kendo_svg_icons_1.xIcon,
             look: "flat",
             type: "button"
           },
-          icon: "close",
+          icon: "x",
+          svgIcon: kendo_svg_icons_1.xIcon,
           look: "flat",
           type: "button",
           onClick: _this.onFilterRemove,
@@ -295,11 +298,13 @@ var ExpressionVue2 = {
         title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-          icon: "close",
+          icon: "x",
+          svgIcon: kendo_svg_icons_1.xIcon,
           look: "flat",
           type: "button"
         },
-        icon: "close",
+        icon: "x",
+        svgIcon: kendo_svg_icons_1.xIcon,
         look: "flat",
         type: "button",
         onClick: _this.onFilterRemove,
@@ -402,11 +407,13 @@ var ExpressionVue2 = {
         title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-          icon: "close",
+          icon: "x",
+          svgIcon: kendo_svg_icons_1.xIcon,
           look: "flat",
           type: "button"
         },
-        icon: "close",
+        icon: "x",
+        svgIcon: kendo_svg_icons_1.xIcon,
         look: "flat",
         type: "button",
         onClick: _this.onFilterRemove,
@@ -418,11 +425,13 @@ var ExpressionVue2 = {
       title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-        icon: "close",
+        icon: "x",
+        svgIcon: kendo_svg_icons_1.xIcon,
         look: "flat",
         type: "button"
       },
-      icon: "close",
+      icon: "x",
+      svgIcon: kendo_svg_icons_1.xIcon,
       look: "flat",
       type: "button",
       onClick: _this.onFilterRemove,