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

package/dist/es/cells/FilterCell.js

@@ -7,11 +7,12 @@ var inject = allVue.inject;
 import { Button } from '@progress/kendo-vue-buttons';
 import { messages, columnMenuFilterClearButton as filterClearButton, columnMenuFilterChooseOperator as filterChooseOperator, filterTextFilterAriaLabel, filterEnumFilterDropdownAriaLabel, filterDateFilterAriaLabel, filterNumericFilterAriaLabel, filterDropDownOperatorAriaLabel } from '../messages/main';
 import { DropDownList } from '@progress/kendo-vue-dropdowns';
-import { NumericTextBox } from '@progress/kendo-vue-inputs';
+import { NumericTextBox, Input } from '@progress/kendo-vue-inputs';
 import { DatePicker } from '@progress/kendo-vue-dateinputs';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { cellBoolDropdownChange, cellInputChange, cellOperatorChange } from '../filterCommon';
 import { templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { filterClearIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -34,7 +35,8 @@ var FilterCellVue2 = {
     booleanValues: Array,
     onChange: Function,
     render: [String, Function, Object],
-    ariaLabel: String
+    ariaLabel: String,
+    size: String
   },
   inject: {
     kendoLocalizationService: {
@@ -85,6 +87,7 @@ var FilterCellVue2 = {
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
+    var size = this.$props.size;
     var ls = provideLocalizationService(this);
     var selectedOperator = this.$props.operators.find(function (item) {
       return item.operator === _this.$props.operator;
@@ -103,6 +106,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",
@@ -112,6 +116,7 @@ var FilterCellVue2 = {
             },
             "aria-label": this.ariaLabel || ls.toLanguageString(filterDropDownOperatorAriaLabel, messages[filterDropDownOperatorAriaLabel])
           },
+          size: size,
           "class": "k-dropdown-operator",
           iconClassName: "k-i-filter k-button-icon",
           "data-items": this.$props.operators,
@@ -131,12 +136,14 @@ var FilterCellVue2 = {
           return (
             // @ts-ignore
             h(NumericTextBox, {
-              value: value,
+              size: size,
               attrs: this.v3 ? undefined : {
+                size: size,
                 value: value,
                 title: this.$props.title,
                 "aria-label": this.ariaLabel || ls.toLanguageString(filterNumericFilterAriaLabel, messages[filterNumericFilterAriaLabel])
               },
+              value: value,
               onChange: function onChange(e) {
                 _this.inputChange(e.value, e.event);
               },
@@ -153,12 +160,14 @@ var FilterCellVue2 = {
           return (
             // @ts-ignore
             h(DatePicker, {
-              value: value,
+              size: size,
               attrs: this.v3 ? undefined : {
+                size: size,
                 value: value,
                 title: this.$props.title,
                 "aria-label": this.ariaLabel || ls.toLanguageString(filterDateFilterAriaLabel, messages[filterDateFilterAriaLabel])
               },
+              value: value,
               onChange: function onChange(e) {
                 _this.inputChange(e.value, e);
               },
@@ -180,10 +189,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 : '');
                 }),
@@ -192,6 +200,9 @@ var FilterCellVue2 = {
                 title: this.$props.title,
                 "aria-label": this.ariaLabel || ls.toLanguageString(filterEnumFilterDropdownAriaLabel, messages[filterEnumFilterDropdownAriaLabel])
               },
+              value: booleanValues.find(function (item) {
+                return item.operator === (value !== null ? value : '');
+              }),
               "data-items": booleanValues,
               textField: "text",
               title: this.$props.title,
@@ -199,14 +210,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(Input, {
+            size: size,
+            attrs: this.v3 ? undefined : {
+              size: size,
+              value: value || '',
+              title: this.$props.title,
+              "aria-label": this.ariaLabel || ls.toLanguageString(filterTextFilterAriaLabel, messages[filterTextFilterAriaLabel])
             },
+            value: value || '',
             onInput: function onInput(e) {
               _this.inputChange(e.target.value, e);
             },
@@ -216,28 +228,30 @@ var FilterCellVue2 = {
               }
             },
             title: this.$props.title,
-            attrs: this.v3 ? undefined : {
-              title: this.$props.title,
-              "aria-label": this.ariaLabel || ls.toLanguageString(filterTextFilterAriaLabel, messages[filterTextFilterAriaLabel])
-            },
             "aria-label": this.ariaLabel || ls.toLanguageString(filterTextFilterAriaLabel, messages[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(Button, {
-      type: "button",
+      size: size,
       attrs: this.v3 ? undefined : {
+        size: size,
         type: "button",
         icon: 'filter-clear',
+        svgIcon: filterClearIcon,
         title: ls.toLanguageString(filterClearButton, messages[filterClearButton])
       },
+      type: "button",
       icon: 'filter-clear',
+      svgIcon: 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/es/columnmenu/ColumnMenu.js

@@ -4,8 +4,9 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
-import { guid, setRef } from '@progress/kendo-vue-common';
+import { guid, Icon, setRef } from '@progress/kendo-vue-common';
 import { Popup } from '@progress/kendo-vue-popup';
+import { moreVerticalIcon } from '@progress/kendo-svg-icons';
 import { ColumnMenuContent } from './ColumnMenuContent';
 import { tableKeyboardNavigationTools } from '../navigation/utils';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
@@ -133,8 +134,13 @@ var ColumnMenuVue2 = {
       on: this.v3 ? undefined : {
         "click": this.anchorClick
       }
-    }, [h("span", {
-      "class": 'k-icon k-i-more-vertical'
+    }, [h(Icon, {
+      name: 'more-vertical',
+      attrs: this.v3 ? undefined : {
+        name: 'more-vertical',
+        icon: moreVerticalIcon
+      },
+      icon: moreVerticalIcon
     })]),
     // @ts-ignore function children
     h(Popup, {

package/dist/es/columnmenu/ColumnMenuCheckboxFilter.js

@@ -29,11 +29,12 @@ import { Button } from '@progress/kendo-vue-buttons';
 import { ColumnMenuItem } from './ColumnMenuItem';
 import { ColumnMenuItemGroup } from './ColumnMenuItemGroup';
 import { ColumnMenuItemContent } from './ColumnMenuItemContent';
+import { searchIcon } from '@progress/kendo-svg-icons';
 import { Checkbox } from '@progress/kendo-vue-inputs';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, columnMenuFilterClearButton as filterClearButton, columnMenuFilterSubmitButton as filterSubmitButton, columnMenuFilterTitle as filterTitle, searchPlaceholder, filterCheckAll } from '../messages/main';
 import { filterBy } from '@progress/kendo-data-query';
-import { clone, getListeners, getTemplate, templateRendering, getNestedValue } from '@progress/kendo-vue-common';
+import { clone, getListeners, getTemplate, templateRendering, getNestedValue, Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -144,8 +145,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(Icon, {
+        name: 'search',
+        attrs: this.v3 ? undefined : {
+          name: 'search',
+          icon: searchIcon
+        },
+        icon: searchIcon,
+        "class": "k-input-icon"
       }), h("input", {
         ref: 'searchBox',
         placeholder: localizationService.toLanguageString(searchPlaceholder, messages[searchPlaceholder]),

package/dist/es/columnmenu/ColumnMenuItem.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { Keys } from '@progress/kendo-vue-common';
+import { Icon, Keys } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -49,8 +49,8 @@ var ColumnMenuItemVue2 = {
       },
       onClick: this.onClick,
       "class": "k-columnmenu-item ".concat(selected ? 'k-selected' : '')
-    }, [iconClass && h("span", {
-      "class": "k-icon ".concat(iconClass)
+    }, [iconClass && h(Icon, {
+      "class": iconClass
     }), title]);
   }
 };

package/dist/es/columnmenu/ColumnMenuSort.js

@@ -166,10 +166,10 @@ var ColumnMenuSortVue2 = {
           title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
           attrs: _this.v3 ? undefined : {
             title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
-            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 : {
@@ -181,10 +181,10 @@ var ColumnMenuSortVue2 = {
           title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
           attrs: _this.v3 ? undefined : {
             title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
-            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 : {
@@ -195,10 +195,10 @@ var ColumnMenuSortVue2 = {
         title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
         attrs: _this.v3 ? undefined : {
           title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
-          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 : {
@@ -208,10 +208,10 @@ var ColumnMenuSortVue2 = {
         title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
         attrs: _this.v3 ? undefined : {
           title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
-          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/es/drag/ColumnDraggable.js

@@ -57,8 +57,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/es/drag/DragClue.js

@@ -3,6 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
+import { Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -38,8 +39,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(Icon, {
+      name: "modifier",
+      attrs: this.v3 ? undefined : {
+        name: "modifier"
+      }
     })]), this.innerText]);
   }
 };

package/dist/es/filter/Expression.js

@@ -29,6 +29,7 @@ import { getTemplate } from '@progress/kendo-vue-common';
 import { Button, Toolbar, ToolbarItem } from '@progress/kendo-vue-buttons';
 import { DropDownList } from '@progress/kendo-vue-dropdowns';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { xIcon } from '@progress/kendo-svg-icons';
 import { unaryOperator, stringOperator } from './operators';
 import { messages, filterClose, filterExpressionDropdownAriaLabel, filterExpressionOperatorDropdownAriaLabel } from '../messages/main';
 import { TextFilter } from './filters/TextFilter';
@@ -273,11 +274,13 @@ var ExpressionVue2 = {
           title: locService.toLanguageString(filterClose, messages[filterClose]),
           attrs: _this.v3 ? undefined : {
             title: locService.toLanguageString(filterClose, messages[filterClose]),
-            icon: "close",
+            icon: "x",
+            svgIcon: xIcon,
             look: "flat",
             type: "button"
           },
-          icon: "close",
+          icon: "x",
+          svgIcon: xIcon,
           look: "flat",
           type: "button",
           onClick: _this.onFilterRemove,
@@ -289,11 +292,13 @@ var ExpressionVue2 = {
         title: locService.toLanguageString(filterClose, messages[filterClose]),
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(filterClose, messages[filterClose]),
-          icon: "close",
+          icon: "x",
+          svgIcon: xIcon,
           look: "flat",
           type: "button"
         },
-        icon: "close",
+        icon: "x",
+        svgIcon: xIcon,
         look: "flat",
         type: "button",
         onClick: _this.onFilterRemove,
@@ -396,11 +401,13 @@ var ExpressionVue2 = {
         title: locService.toLanguageString(filterClose, messages[filterClose]),
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(filterClose, messages[filterClose]),
-          icon: "close",
+          icon: "x",
+          svgIcon: xIcon,
           look: "flat",
           type: "button"
         },
-        icon: "close",
+        icon: "x",
+        svgIcon: xIcon,
         look: "flat",
         type: "button",
         onClick: _this.onFilterRemove,
@@ -412,11 +419,13 @@ var ExpressionVue2 = {
       title: locService.toLanguageString(filterClose, messages[filterClose]),
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(filterClose, messages[filterClose]),
-        icon: "close",
+        icon: "x",
+        svgIcon: xIcon,
         look: "flat",
         type: "button"
       },
-      icon: "close",
+      icon: "x",
+      svgIcon: xIcon,
       look: "flat",
       type: "button",
       onClick: _this.onFilterRemove,

package/dist/es/filter/Filter.js

@@ -19,6 +19,8 @@ import { GroupFilter } from './GroupFilters';
 import { GroupToolbar } from './GroupToolbar';
 import { validatePackage, templateRendering, getListeners } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { filterAriaLabel, messages } from '../messages/main';
 /**
  * @hidden
  */
@@ -45,6 +47,11 @@ var FilterVue2 = {
     value: Object,
     defaultGroupFilter: Object
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   created: function created() {
     validatePackage(packageMetadata);
   },
@@ -67,6 +74,7 @@ var FilterVue2 = {
     }
   },
   render: function render(createElement) {
+    var locService = provideLocalizationService(this);
     var h = gh || createElement;
     var fields = this.$props.fields.map(function (field) {
       return __assign(__assign({}, field), {
@@ -76,13 +84,22 @@ var FilterVue2 = {
     return h("div", {
       "class": 'k-widget k-filter'
     }, [h("ul", {
-      "class": "k-filter-container"
+      "class": "k-filter-container",
+      role: "tree",
+      attrs: this.v3 ? undefined : {
+        role: "tree",
+        ariaLabel: locService.toLanguageString(filterAriaLabel, messages[filterAriaLabel])
+      },
+      ariaLabel: locService.toLanguageString(filterAriaLabel, messages[filterAriaLabel])
     }, [h("li", {
-      "class": "k-filter-group-main"
+      "class": "k-filter-group-main",
+      role: "treeitem",
+      attrs: this.v3 ? undefined : {
+        role: "treeitem"
+      }
     }, [
     // @ts-ignore function children
     h(GroupToolbar, {
-      "class": "k-filter-group-main",
       filter: this.computedValue,
       attrs: this.v3 ? undefined : {
         filter: this.computedValue,
@@ -106,7 +123,6 @@ var FilterVue2 = {
     }),
     // @ts-ignore function children
     h(GroupFilter, {
-      "class": "k-filter-group-main",
       filter: this.computedValue,
       attrs: this.v3 ? undefined : {
         filter: this.computedValue,

package/dist/es/filter/GroupFilters.js

@@ -61,11 +61,19 @@ var GroupFilterVue2 = {
       filter = _a.filter,
       filterRender = _a.filterRender;
     return filter.filters.length > 0 ? h("ul", {
-      "class": "k-filter-lines"
+      "class": "k-filter-lines",
+      role: "group",
+      attrs: this.v3 ? undefined : {
+        role: "group"
+      }
     }, [filter.filters.map(function (f, idx) {
       return h("li", {
         key: idx,
-        "class": "k-filter-item"
+        "class": "k-filter-item",
+        role: "treeitem",
+        attrs: this.v3 ? undefined : {
+          role: "treeitem"
+        }
       }, [isCompositeFilterDescriptor(f) ? [
       // @ts-ignore
       h(GroupToolbar, {

package/dist/es/filter/GroupToolbar.js

@@ -28,6 +28,7 @@ import { Button, Toolbar, ToolbarItem, ButtonGroup } from '@progress/kendo-vue-b
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { stringOperator } from './operators';
 import { messages, filterAndLogic, filterOrLogic, filterAddExpression, filterAddGroup, filterClose } from '../messages/main';
+import { filterAddExpressionIcon, filterAddGroupIcon, xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -225,9 +226,11 @@ var GroupToolbarVue2 = {
           attrs: _this.v3 ? undefined : {
             title: locService.toLanguageString(filterAddExpression, messages[filterAddExpression]),
             icon: "filter-add-expression",
+            svgIcon: filterAddExpressionIcon,
             type: "button"
           },
           icon: "filter-add-expression",
+          svgIcon: filterAddExpressionIcon,
           type: "button",
           onClick: _this.onAddExpression,
           on: _this.v3 ? undefined : {
@@ -239,9 +242,11 @@ var GroupToolbarVue2 = {
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(filterAddExpression, messages[filterAddExpression]),
           icon: "filter-add-expression",
+          svgIcon: filterAddExpressionIcon,
           type: "button"
         },
         icon: "filter-add-expression",
+        svgIcon: filterAddExpressionIcon,
         type: "button",
         onClick: _this.onAddExpression,
         on: _this.v3 ? undefined : {
@@ -257,9 +262,11 @@ var GroupToolbarVue2 = {
           attrs: _this.v3 ? undefined : {
             title: locService.toLanguageString(filterAddGroup, messages[filterAddGroup]),
             icon: "filter-add-group",
+            svgIcon: filterAddGroupIcon,
             type: "button"
           },
           icon: "filter-add-group",
+          svgIcon: filterAddGroupIcon,
           type: "button",
           onClick: _this.onAddGroup,
           on: _this.v3 ? undefined : {
@@ -271,9 +278,11 @@ var GroupToolbarVue2 = {
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(filterAddGroup, messages[filterAddGroup]),
           icon: "filter-add-group",
+          svgIcon: filterAddGroupIcon,
           type: "button"
         },
         icon: "filter-add-group",
+        svgIcon: filterAddGroupIcon,
         type: "button",
         onClick: _this.onAddGroup,
         on: _this.v3 ? undefined : {
@@ -288,11 +297,13 @@ var GroupToolbarVue2 = {
           title: locService.toLanguageString(filterClose, messages[filterClose]),
           attrs: _this.v3 ? undefined : {
             title: locService.toLanguageString(filterClose, messages[filterClose]),
-            icon: "close",
+            icon: "x",
+            svgIcon: xIcon,
             look: "flat",
             type: "button"
           },
-          icon: "close",
+          icon: "x",
+          svgIcon: xIcon,
           look: "flat",
           type: "button",
           onClick: _this.onGroupRemove,
@@ -304,11 +315,13 @@ var GroupToolbarVue2 = {
         title: locService.toLanguageString(filterClose, messages[filterClose]),
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(filterClose, messages[filterClose]),
-          icon: "close",
+          icon: "x",
+          svgIcon: xIcon,
           look: "flat",
           type: "button"
         },
-        icon: "close",
+        icon: "x",
+        svgIcon: xIcon,
         look: "flat",
         type: "button",
         onClick: _this.onGroupRemove,
@@ -448,9 +461,11 @@ var GroupToolbarVue2 = {
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(filterAddExpression, messages[filterAddExpression]),
           icon: "filter-add-expression",
+          svgIcon: filterAddExpressionIcon,
           type: "button"
         },
         icon: "filter-add-expression",
+        svgIcon: filterAddExpressionIcon,
         type: "button",
         onClick: _this.onAddExpression,
         on: _this.v3 ? undefined : {
@@ -462,9 +477,11 @@ var GroupToolbarVue2 = {
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(filterAddExpression, messages[filterAddExpression]),
         icon: "filter-add-expression",
+        svgIcon: filterAddExpressionIcon,
         type: "button"
       },
       icon: "filter-add-expression",
+      svgIcon: filterAddExpressionIcon,
       type: "button",
       onClick: _this.onAddExpression,
       on: _this.v3 ? undefined : {
@@ -476,9 +493,11 @@ var GroupToolbarVue2 = {
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(filterAddGroup, messages[filterAddGroup]),
           icon: "filter-add-group",
+          svgIcon: filterAddGroupIcon,
           type: "button"
         },
         icon: "filter-add-group",
+        svgIcon: filterAddGroupIcon,
         type: "button",
         onClick: _this.onAddGroup,
         on: _this.v3 ? undefined : {
@@ -490,9 +509,11 @@ var GroupToolbarVue2 = {
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(filterAddGroup, messages[filterAddGroup]),
         icon: "filter-add-group",
+        svgIcon: filterAddGroupIcon,
         type: "button"
       },
       icon: "filter-add-group",
+      svgIcon: filterAddGroupIcon,
       type: "button",
       onClick: _this.onAddGroup,
       on: _this.v3 ? undefined : {
@@ -503,11 +524,13 @@ var GroupToolbarVue2 = {
         title: locService.toLanguageString(filterClose, messages[filterClose]),
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(filterClose, messages[filterClose]),
-          icon: "close",
+          icon: "x",
+          svgIcon: xIcon,
           look: "flat",
           type: "button"
         },
-        icon: "close",
+        icon: "x",
+        svgIcon: xIcon,
         look: "flat",
         type: "button",
         onClick: _this.onGroupRemove,
@@ -519,11 +542,13 @@ var GroupToolbarVue2 = {
       title: locService.toLanguageString(filterClose, messages[filterClose]),
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(filterClose, messages[filterClose]),
-        icon: "close",
+        icon: "x",
+        svgIcon: xIcon,
         look: "flat",
         type: "button"
       },
-      icon: "close",
+      icon: "x",
+      svgIcon: xIcon,
       look: "flat",
       type: "button",
       onClick: _this.onGroupRemove,

package/dist/es/header/FilterRow.d.ts

@@ -18,6 +18,7 @@ export interface FilterRowProps {
     cellRender?: any;
     isRtl?: boolean;
     ariaRowIndex?: number;
+    size?: string;
 }
 /**
  * @hidden