@progress/kendo-vue-data-tools 3.7.4-dev.202212020747 → 3.7.4-dev.202301091431

package/dist/esm/pager/PagerNumericButtons.js

@@ -1,7 +1,10 @@
+// @ts-ignore
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { kendoThemeMaps } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -11,7 +14,8 @@ var PagerNumericButtonsVue2 = {
     buttonCount: Number,
     totalPages: Number,
     currentPage: Number,
-    size: String
+    size: String,
+    responsiveSize: String
   },
   computed: {
     start: {
@@ -29,6 +33,16 @@ var PagerNumericButtonsVue2 = {
       get: function get() {
         return Math.min(this.start + this.$props.buttonCount - 1, this.$props.totalPages);
       }
+    },
+    dropdownClass: function dropdownClass() {
+      var _a;
+      var size = this.$props.size;
+      return _a = {
+        'k-picker': true,
+        'k-dropdown-list': true,
+        'k-dropdown': true,
+        'k-rounded-md': true
+      }, _a["k-picker-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
     }
   },
   methods: {
@@ -51,8 +65,17 @@ var PagerNumericButtonsVue2 = {
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
-    var prevDots = this.start > 1 ? h("li", [h("a", {
-      "class": "k-link",
+    var prevDots = this.start > 1 && h(KButton, {
+      fillMode: 'flat',
+      attrs: this.v3 ? undefined : {
+        fillMode: 'flat',
+        themeColor: 'primary',
+        size: this.$props.size,
+        rounded: null
+      },
+      themeColor: 'primary',
+      size: this.$props.size,
+      rounded: null,
       onClick: function onClick(e) {
         return _this.click(e, _this.start - 1);
       },
@@ -60,14 +83,19 @@ var PagerNumericButtonsVue2 = {
         "click": function onClick(e) {
           return _this.click(e, _this.start - 1);
         }
-      },
-      href: "#",
-      attrs: this.v3 ? undefined : {
-        href: "#"
       }
-    }, ["..."])]) : '';
-    var postDots = this.end < this.$props.totalPages ? h("li", [h("a", {
-      "class": "k-link",
+    }, ["..."]);
+    var postDots = this.end < this.$props.totalPages && h(KButton, {
+      fillMode: 'flat',
+      attrs: this.v3 ? undefined : {
+        fillMode: 'flat',
+        themeColor: 'primary',
+        size: this.$props.size,
+        rounded: null
+      },
+      themeColor: 'primary',
+      size: this.$props.size,
+      rounded: null,
       onClick: function onClick(e) {
         return _this.click(e, _this.end + 1);
       },
@@ -75,25 +103,16 @@ var PagerNumericButtonsVue2 = {
         "click": function onClick(e) {
           return _this.click(e, _this.end + 1);
         }
-      },
-      href: "#",
-      attrs: this.v3 ? undefined : {
-        href: "#"
       }
-    }, ["..."])]) : '';
+    }, ["..."]);
     var buttons = [];
     for (var idx = this.start; idx <= this.end; idx++) {
       buttons.push(idx);
     }
     var numerics = buttons.map(function (page) {
       var _this = this;
-      return h("li", {
-        key: page
-      }, [h("a", {
-        href: "#",
-        attrs: this.v3 ? undefined : {
-          href: "#"
-        },
+      return h(KButton, {
+        key: page,
         onClick: function onClick(e) {
           return _this.click(e, page);
         },
@@ -102,12 +121,27 @@ var PagerNumericButtonsVue2 = {
             return _this.click(e, page);
           }
         },
-        "class": this.$props.currentPage === page ? 'k-link k-selected' : 'k-link'
-      }, [page])]);
+        selected: this.$props.currentPage === page,
+        attrs: this.v3 ? undefined : {
+          selected: this.$props.currentPage === page,
+          fillMode: 'flat',
+          themeColor: 'primary',
+          size: this.$props.size,
+          rounded: null,
+          role: "button",
+          "aria-current": this.$props.currentPage === page ? true : undefined
+        },
+        fillMode: 'flat',
+        themeColor: 'primary',
+        size: this.$props.size,
+        rounded: null,
+        role: "button",
+        "aria-current": this.$props.currentPage === page ? true : undefined
+      }, [page]);
     }, this);
     var dropdown = function dropdown(currentButtons) {
       return h("select", {
-        "class": "k-dropdownlist k-picker k-picker-md k-rounded-md k-picker-solid",
+        "class": this.dropdownClass,
         onChange: this.ddlChange,
         on: this.v3 ? undefined : {
           "change": this.ddlChange
@@ -125,9 +159,9 @@ var PagerNumericButtonsVue2 = {
     };
     return h("div", {
       "class": "k-pager-numbers-wrap"
-    }, [this.$props.size !== 'small' ? h("ul", {
+    }, [h("div", {
       "class": "k-pager-numbers"
-    }, [prevDots, numerics, postDots]) : dropdown.call(this, buttons)]);
+    }, [prevDots, numerics, postDots]), dropdown.call(this, buttons)]);
   }
 };
 /**

package/dist/esm/pager/PagerPageSizes.d.ts

@@ -17,6 +17,7 @@ export interface PagerPageSizesProps {
      * The page sizes.
      */
     pageSizes: number[];
+    size?: null | 'small' | 'medium' | 'large' | string;
     /**
      * A map with the messages.
      */

package/dist/esm/pager/PagerPageSizes.js

@@ -16,6 +16,7 @@ var PagerPageSizesVue2 = {
     value: [String, Number],
     pageSize: Number,
     pageSizes: Array,
+    size: String,
     messagesMap: Function
   },
   inject: {
@@ -71,9 +72,11 @@ var PagerPageSizesVue2 = {
       attrs: this.v3 ? undefined : {
         value: value !== undefined ? value : pageSize,
         dataItems: sizes,
+        size: this.$props.size,
         ariaLabel: ls.toLanguageString(pageSelectionMessage.messageKey, pageSelectionMessage.defaultMessage)
       },
       dataItems: sizes,
+      size: this.$props.size,
       ariaLabel: ls.toLanguageString(pageSelectionMessage.messageKey, pageSelectionMessage.defaultMessage),
       onChange: this.pageSizeChange,
       on: this.v3 ? undefined : {

package/dist/esm/selection/utils.js

@@ -18,7 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { extendDataItem, getter, Keys, mapTree, hasRelativeStackingContext } from '@progress/kendo-vue-common';
+import { extendDataItem, Keys, mapTree, hasRelativeStackingContext } from '@progress/kendo-vue-common';
 import { TABLE_COL_INDEX_ATTRIBUTE, TABLE_ROW_INDEX_ATTRIBUTE } from './constants.js';
 var GROUP_SUBITEMS_COLLECTION = 'items';
 var LAST_SELECTION_STATE = {};
@@ -76,11 +76,10 @@ export var getColumnIndex = function (element) {
  */
 export var setSelectedState = function (options) {
     var subItemsField = options.subItemsField || GROUP_SUBITEMS_COLLECTION;
-    var idGetter = getter(options.dataItemKey);
     return mapTree(options.data, subItemsField, function (item) {
         var _a;
         return extendDataItem(item, subItemsField, (_a = {},
-            _a[options.selectedField] = options.selectedState[idGetter(item)],
+            _a[options.selectedField] = options.selectedState[item[options.dataItemKey]],
             _a));
     });
 };
@@ -135,12 +134,11 @@ export var getSelectedStateFromKeyDown = function (options) {
 export var getSelectedState = function (options) {
     var event = options.event, dataItemKey = options.dataItemKey, prevSelectedState = options.selectedState;
     var dataItems = event.dataItems, startRowIndex = event.startRowIndex, endRowIndex = event.endRowIndex, startColIndex = event.startColIndex, endColIndex = event.endColIndex, cell = event.cell, isDrag = event.isDrag, ctrlKey = event.ctrlKey, shiftKey = event.shiftKey, metaKey = event.metaKey, componentId = event.componentId, mode = event.mode, dataItem = event.dataItem;
-    var idGetter = getter(dataItemKey);
     var selectionState = {};
     var isInputEvent = dataItem !== null;
     if (mode === 'single') {
         var currentDataItem = dataItems.slice(startRowIndex, startRowIndex + 1)[0];
-        var itemId = idGetter(currentDataItem);
+        var itemId = currentDataItem[dataItemKey];
         LAST_SELECTION_STATE[componentId] = {
             rowIndex: startRowIndex,
             colIndex: startColIndex
@@ -160,7 +158,7 @@ export var getSelectedState = function (options) {
         }
         var selectedDataItems = dataItems.slice(startRowIndex, endRowIndex + 1);
         selectedDataItems.forEach(function (currentItem) {
-            var itemId = idGetter(currentItem);
+            var itemId = currentItem[dataItemKey];
             selectionState[itemId] = cell ? __spreadArray([], selectedColumns_1, true) : true;
         });
     }
@@ -172,7 +170,7 @@ export var getSelectedState = function (options) {
             };
             var selectedDataItems = dataItems.slice(startRowIndex, endRowIndex + 1);
             var currentDataItem = selectedDataItems[0];
-            var itemId = idGetter(currentDataItem);
+            var itemId = currentDataItem[dataItemKey];
             selectionState = __assign({}, prevSelectedState);
             selectionState[itemId] = cell && !isInputEvent
                 ? getCellSelection(selectionState[itemId], startColIndex)
@@ -191,7 +189,7 @@ export var getSelectedState = function (options) {
             }
             var selectedDataItems = dataItems.slice(currentStartRowIndex, currentEndRowIndex + 1);
             selectedDataItems.forEach(function (currentItem) {
-                var itemId = idGetter(currentItem);
+                var itemId = currentItem[dataItemKey];
                 selectionState[itemId] = cell ? __spreadArray([], selectedColumns_2, true) : true;
             });
         }

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");
@@ -139,8 +140,13 @@ var ColumnMenuVue2 = {
       on: this.v3 ? undefined : {
         "click": this.anchorClick
       }
-    }, [h("span", {
-      "class": 'k-icon k-i-more-vertical'
+    }, [h(kendo_vue_common_1.Icon, {
+      name: 'more-vertical',
+      attrs: this.v3 ? undefined : {
+        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");
@@ -150,8 +151,14 @@ var ColumnMenuCheckboxFilterVue2 = {
         "class": "k-list-filter"
       }, [h("span", {
         "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
-      }, [h("span", {
-        "class": "k-input-icon k-icon k-i-search"
+      }, [h(kendo_vue_common_1.Icon, {
+        name: 'search',
+        attrs: this.v3 ? undefined : {
+          name: 'search',
+          icon: kendo_svg_icons_1.searchIcon
+        },
+        icon: kendo_svg_icons_1.searchIcon,
+        "class": "k-input-icon"
       }), h("input", {
         ref: 'searchBox',
         placeholder: localizationService.toLanguageString(main_1.searchPlaceholder, main_1.messages[main_1.searchPlaceholder]),

package/dist/npm/columnmenu/ColumnMenuItem.js

@@ -55,8 +55,8 @@ var ColumnMenuItemVue2 = {
       },
       onClick: this.onClick,
       "class": "k-columnmenu-item ".concat(selected ? 'k-selected' : '')
-    }, [iconClass && h("span", {
-      "class": "k-icon ".concat(iconClass)
+    }, [iconClass && h(kendo_vue_common_1.Icon, {
+      "class": iconClass
     }), title]);
   }
 };

package/dist/npm/columnmenu/ColumnMenuSort.js

@@ -173,10 +173,10 @@ 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',
+            iconClass: 'k-i-sort-asc-small',
             selected: sortedAsc(currentSortIndex, sort)
           },
-          iconClass: 'k-i-sort-asc-sm',
+          iconClass: 'k-i-sort-asc-small',
           selected: sortedAsc(currentSortIndex, sort),
           onMenuitemclick: _this.onAscClick,
           on: _this.v3 ? undefined : {
@@ -188,10 +188,10 @@ 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',
+            iconClass: 'k-i-sort-desc-small',
             selected: sortedDesc(currentSortIndex, sort)
           },
-          iconClass: 'k-i-sort-desc-sm',
+          iconClass: 'k-i-sort-desc-small',
           selected: sortedDesc(currentSortIndex, sort),
           onMenuitemclick: _this.onDescClick,
           on: _this.v3 ? undefined : {
@@ -202,10 +202,10 @@ 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',
+          iconClass: 'k-i-sort-asc-small',
           selected: sortedAsc(currentSortIndex, sort)
         },
-        iconClass: 'k-i-sort-asc-sm',
+        iconClass: 'k-i-sort-asc-small',
         selected: sortedAsc(currentSortIndex, sort),
         onMenuitemclick: _this.onAscClick,
         on: _this.v3 ? undefined : {
@@ -215,10 +215,10 @@ 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',
+          iconClass: 'k-i-sort-desc-small',
           selected: sortedDesc(currentSortIndex, sort)
         },
-        iconClass: 'k-i-sort-desc-sm',
+        iconClass: 'k-i-sort-desc-small',
         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/DragClue.js

@@ -9,6 +9,7 @@ var Vue = require("vue");
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 /**
  * @hidden
  */
@@ -44,8 +45,11 @@ var DragClueVue2 = {
       }
     }, [h("span", {
       "class": 'k-icon k-drag-status ' + this.status + ' k-icon-with-modifier'
-    }, [h("span", {
-      "class": "k-icon k-icon-modifier"
+    }, [h(kendo_vue_common_1.Icon, {
+      name: "modifier",
+      attrs: this.v3 ? undefined : {
+        name: "modifier"
+      }
     })]), this.innerText]);
   }
 };

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,