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

package/dist/npm/filter/Filter.js

@@ -25,6 +25,8 @@ var GroupFilters_1 = require("./GroupFilters");
 var GroupToolbar_1 = require("./GroupToolbar");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var package_metadata_1 = require("../package-metadata");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var main_1 = require("../messages/main");
 /**
  * @hidden
  */
@@ -51,6 +53,11 @@ var FilterVue2 = {
     value: Object,
     defaultGroupFilter: Object
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   created: function created() {
     (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
   },
@@ -73,6 +80,7 @@ var FilterVue2 = {
     }
   },
   render: function render(createElement) {
+    var locService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
     var h = gh || createElement;
     var fields = this.$props.fields.map(function (field) {
       return __assign(__assign({}, field), {
@@ -82,13 +90,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(main_1.filterAriaLabel, main_1.messages[main_1.filterAriaLabel])
+      },
+      ariaLabel: locService.toLanguageString(main_1.filterAriaLabel, main_1.messages[main_1.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_1.GroupToolbar, {
-      "class": "k-filter-group-main",
       filter: this.computedValue,
       attrs: this.v3 ? undefined : {
         filter: this.computedValue,
@@ -112,7 +129,6 @@ var FilterVue2 = {
     }),
     // @ts-ignore function children
     h(GroupFilters_1.GroupFilter, {
-      "class": "k-filter-group-main",
       filter: this.computedValue,
       attrs: this.v3 ? undefined : {
         filter: this.computedValue,

package/dist/npm/filter/GroupFilters.js

@@ -67,11 +67,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"
+        }
       }, [(0, kendo_data_query_1.isCompositeFilterDescriptor)(f) ? [
       // @ts-ignore
       h(GroupToolbar_1.GroupToolbar, {

package/dist/npm/filter/GroupToolbar.js

@@ -34,6 +34,7 @@ var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var operators_1 = require("./operators");
 var main_1 = require("../messages/main");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -231,9 +232,11 @@ var GroupToolbarVue2 = {
           attrs: _this.v3 ? undefined : {
             title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
             icon: "filter-add-expression",
+            svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
             type: "button"
           },
           icon: "filter-add-expression",
+          svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
           type: "button",
           onClick: _this.onAddExpression,
           on: _this.v3 ? undefined : {
@@ -245,9 +248,11 @@ var GroupToolbarVue2 = {
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
           icon: "filter-add-expression",
+          svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
           type: "button"
         },
         icon: "filter-add-expression",
+        svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
         type: "button",
         onClick: _this.onAddExpression,
         on: _this.v3 ? undefined : {
@@ -263,9 +268,11 @@ var GroupToolbarVue2 = {
           attrs: _this.v3 ? undefined : {
             title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
             icon: "filter-add-group",
+            svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
             type: "button"
           },
           icon: "filter-add-group",
+          svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
           type: "button",
           onClick: _this.onAddGroup,
           on: _this.v3 ? undefined : {
@@ -277,9 +284,11 @@ var GroupToolbarVue2 = {
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
           icon: "filter-add-group",
+          svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
           type: "button"
         },
         icon: "filter-add-group",
+        svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
         type: "button",
         onClick: _this.onAddGroup,
         on: _this.v3 ? undefined : {
@@ -294,11 +303,13 @@ var GroupToolbarVue2 = {
           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.onGroupRemove,
@@ -310,11 +321,13 @@ var GroupToolbarVue2 = {
         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.onGroupRemove,
@@ -454,9 +467,11 @@ var GroupToolbarVue2 = {
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
           icon: "filter-add-expression",
+          svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
           type: "button"
         },
         icon: "filter-add-expression",
+        svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
         type: "button",
         onClick: _this.onAddExpression,
         on: _this.v3 ? undefined : {
@@ -468,9 +483,11 @@ var GroupToolbarVue2 = {
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
         icon: "filter-add-expression",
+        svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
         type: "button"
       },
       icon: "filter-add-expression",
+      svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
       type: "button",
       onClick: _this.onAddExpression,
       on: _this.v3 ? undefined : {
@@ -482,9 +499,11 @@ var GroupToolbarVue2 = {
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
           icon: "filter-add-group",
+          svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
           type: "button"
         },
         icon: "filter-add-group",
+        svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
         type: "button",
         onClick: _this.onAddGroup,
         on: _this.v3 ? undefined : {
@@ -496,9 +515,11 @@ var GroupToolbarVue2 = {
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
         icon: "filter-add-group",
+        svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
         type: "button"
       },
       icon: "filter-add-group",
+      svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
       type: "button",
       onClick: _this.onAddGroup,
       on: _this.v3 ? undefined : {
@@ -509,11 +530,13 @@ var GroupToolbarVue2 = {
         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.onGroupRemove,
@@ -525,11 +548,13 @@ var GroupToolbarVue2 = {
       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.onGroupRemove,

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

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

package/dist/npm/header/FilterRow.js

@@ -16,6 +16,7 @@ var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var main_1 = require("../messages/main");
 var utils_1 = require("../navigation/utils");
 var HeaderThElement_1 = require("./HeaderThElement");
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 /**
  * @hidden
  */
@@ -29,7 +30,8 @@ var FilterRowVue2 = {
     sort: [Object, Array],
     cellRender: [String, Function, Object],
     isRtl: Boolean,
-    ariaRowIndex: Number
+    ariaRowIndex: Number,
+    size: String
   },
   inject: {
     kendoLocalizationService: {
@@ -38,7 +40,7 @@ var FilterRowVue2 = {
   },
   methods: {
     headerCellClassName: function headerCellClassName(field, locked) {
-      var result = "".concat(locked ? 'k-grid-header-sticky' : '');
+      var result = "k-header" + (locked ? ' k-grid-header-sticky' : '');
       if (this.$props.sort && this.$props.sort.filter(function (descriptor) {
         return descriptor.field === field;
       }).length > 0) {
@@ -101,7 +103,6 @@ var FilterRowVue2 = {
       })[0];
       return found ? found.operator : null;
     };
-    var filterCellProps;
     var serviceIndex = 0,
       index = -1;
     var filterCells = this.$props.columns.filter(function (c) {
@@ -118,6 +119,7 @@ var FilterRowVue2 = {
         attrs: this.v3 ? undefined : {
           grid: this.$props.grid,
           field: column.field,
+          size: this.$props.size,
           title: column.filterTitle,
           value: activeFilterValueFor(column.field, filterType === 'text' ? '' : null),
           operator: activeOperatorFor(column.field),
@@ -127,6 +129,7 @@ var FilterRowVue2 = {
           render: column.filterCell || this.$props.cellRender
         },
         field: column.field,
+        size: this.$props.size,
         title: column.filterTitle,
         value: activeFilterValueFor(column.field, filterType === 'text' ? '' : null),
         operator: activeOperatorFor(column.field),
@@ -164,7 +167,7 @@ var FilterRowVue2 = {
         },
         navigatable: column.navigatable,
         style: style,
-        "class": this.headerCellClassName(column.field, column.locked) || undefined,
+        "class": (0, kendo_vue_common_1.classNames)('k-table-th', this.headerCellClassName(column.field, column.locked) || undefined),
         ariaLabel: ariaAttrs.ariaLabel,
         ariaColumnIndex: ariaAttrs.ariaColumnIndex
       }, this.v3 ? function () {
@@ -183,13 +186,13 @@ var FilterRowVue2 = {
         },
         navigatable: column.navigatable,
         style: style,
-        "class": this.headerCellClassName(column.field, column.locked) || undefined,
+        "class": (0, kendo_vue_common_1.classNames)('k-table-th', this.headerCellClassName(column.field, column.locked) || undefined),
         ariaLabel: ariaAttrs.ariaLabel,
         ariaColumnIndex: ariaAttrs.ariaColumnIndex
       });
     }, this);
     return h("tr", {
-      "class": "k-filter-row",
+      "class": "k-table-row k-filter-row",
       "aria-rowindex": this.ariaRowIndex,
       attrs: this.v3 ? undefined : {
         "aria-rowindex": this.ariaRowIndex,

package/dist/npm/header/Header.d.ts

@@ -16,6 +16,7 @@ export interface HeaderProps {
     };
     cols: Element[];
     draggable: boolean;
+    size?: string;
 }
 /**
  * @hidden

package/dist/npm/header/Header.js

@@ -21,7 +21,8 @@ var HeaderVue2 = {
     headerRow: Object,
     columnResize: Object,
     cols: Array,
-    draggable: Boolean
+    draggable: Boolean,
+    size: String
   },
   data: function data() {
     return {
@@ -37,6 +38,14 @@ var HeaderVue2 = {
         'k-grid-header': true,
         'k-grid-draggable-header': this.$props.draggable
       };
+    },
+    tableClass: function tableClass() {
+      var _a;
+      var size = this.$props.size;
+      return _a = {
+        'k-table': true,
+        'k-grid-header-table': true
+      }, _a["k-table-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a;
     }
   },
   mounted: function mounted() {
@@ -101,6 +110,7 @@ var HeaderVue2 = {
         role: "presentation"
       }
     }, [h("table", {
+      "class": this.tableClass,
       ref: (0, kendo_vue_common_1.setRef)(this, 'table'),
       role: "presentation",
       attrs: this.v3 ? undefined : {

package/dist/npm/header/HeaderRow.d.ts

@@ -21,6 +21,7 @@ export interface HeaderRowProps extends ColumnDraggableProps {
     reorderable?: boolean;
     onSortChange?: (descriptors: SortDescriptor[], e: any) => void;
     sort?: any;
+    selectedField?: string;
     filter?: CompositeFilterDescriptor;
     filterOperators: FilterOperators;
     filterable?: boolean | undefined;
@@ -35,6 +36,7 @@ export interface HeaderRowProps extends ColumnDraggableProps {
     columnMenuAnimate?: boolean | PopupAnimation;
     onFilterChange?: Function;
     isRtl?: boolean;
+    size: string;
 }
 /**
  * @hidden

package/dist/npm/header/HeaderRow.js

@@ -14,7 +14,9 @@ var ColumnResizer_1 = require("../drag/ColumnResizer");
 var ColumnDraggable_1 = require("../drag/ColumnDraggable");
 var HeaderCell_1 = require("./HeaderCell");
 var ColumnMenu_1 = require("../columnmenu/ColumnMenu");
+var HeaderSelectionCell_1 = require("./HeaderSelectionCell");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var HeaderThElement_1 = require("./HeaderThElement");
 /**
  * @hidden
@@ -53,6 +55,7 @@ var HeaderRowVue2 = {
     sort: {
       type: Array
     },
+    selectedField: String,
     filter: Object,
     filterable: Boolean,
     filterOperators: Object,
@@ -68,6 +71,7 @@ var HeaderRowVue2 = {
         return true;
       }
     },
+    size: String,
     isRtl: Boolean
   },
   inject: {
@@ -133,7 +137,7 @@ var HeaderRowVue2 = {
     },
     cellClass: function cellClass(field, headerClassName, locked) {
       var customClass = headerClassName ? ' ' + headerClassName : '';
-      var result = "k-header ".concat(locked ? 'k-grid-header-sticky' : '') + customClass;
+      var result = "k-header" + (locked ? ' k-grid-header-sticky' : '') + customClass;
       if (this.$props.sort && this.$props.sort.filter(function (descriptor) {
         return descriptor.field === field;
       }).length > 0) {
@@ -173,6 +177,7 @@ var HeaderRowVue2 = {
     theadClasses: {
       get: function get() {
         return {
+          'k-table-thead': true,
           'k-grid-header': true
         };
       }
@@ -201,20 +206,26 @@ var HeaderRowVue2 = {
         }) : -1;
         var sortDir = sortIndex >= 0 ? this.$props.sort[sortIndex].dir || 'none' : 'none';
         var sortIconRenderer = function sortIconRenderer(iconSortIndex) {
-          if (!_this.$props.sort) {
+          if (!this.$props.sort) {
             return null;
           }
-          return iconSortIndex >= 0 && [h("span", {
+          var currentDir = this.$props.sort[iconSortIndex].dir;
+          return iconSortIndex >= 0 && [h(kendo_vue_common_1.Icon, {
             key: 1,
-            "class": 'k-icon k-i-sort-' + _this.$props.sort[iconSortIndex].dir + '-sm'
-          }), _this.$props.sort.length > 1 && h("span", {
+            name: "sort-".concat(currentDir, "-small"),
+            attrs: this.v3 ? undefined : {
+              name: "sort-".concat(currentDir, "-small"),
+              icon: currentDir === 'asc' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon
+            },
+            icon: currentDir === 'asc' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon
+          }), this.$props.sort.length > 1 && h("span", {
             key: 2,
             "class": "k-sort-order"
           }, [iconSortIndex + 1])];
         };
-        var sortIcon = sortIconRenderer(sortIndex);
-        var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked);
+        var sortIcon = sortIconRenderer.call(this, sortIndex);
         var columnMenu = column.columnMenu || column.columnMenu === false ? column.columnMenu : this.$props.columnMenu;
+        var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked) + (columnMenu ? ' k-filterable' : '');
         var columnMenuRender = !columnMenu || typeof columnMenu === 'boolean' ? !!columnMenu : this.getTemplate(columnMenu);
         var style = column.left !== undefined ? !this.$props.isRtl ? {
           left: column.left + 'px',
@@ -333,6 +344,36 @@ var HeaderRowVue2 = {
               render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
             }, _this2.v3 ? function () {
               return [sortIcon];
+            } : [sortIcon])]) || column.field === _this2.$props.selectedField && h("span", {
+              "class": 'k-cell-inner'
+            }, [
+            // @ts-ignore function children
+            h(HeaderSelectionCell_1.HeaderSelectionCell, {
+              key: 1,
+              field: column.field,
+              attrs: _this2.v3 ? undefined : {
+                field: column.field,
+                sortable: sortable,
+                selectionValue: column.headerSelectionValue,
+                title: column.title,
+                render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+              },
+              sortable: sortable,
+              onHeadercellclick: function onHeadercellclick(e) {
+                return _this.cellClick(e, column);
+              },
+              on: _this2.v3 ? undefined : {
+                "headercellclick": function onHeadercellclick(e) {
+                  return _this.cellClick(e, column);
+                },
+                "selectionchange": _this2.selectionChangeHandler
+              },
+              onSelectionchange: _this2.selectionChangeHandler,
+              selectionValue: column.headerSelectionValue,
+              title: column.title,
+              render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+            }, _this2.v3 ? function () {
+              return [sortIcon];
             } : [sortIcon])]) || h("span", {
               "class": 'k-cell-inner'
             }, [
@@ -438,6 +479,34 @@ var HeaderRowVue2 = {
             render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
           }, _this2.v3 ? function () {
             return [sortIcon];
+          } : [sortIcon])]) || column.field === _this2.$props.selectedField && h("span", {
+            "class": 'k-cell-inner'
+          }, [h(HeaderSelectionCell_1.HeaderSelectionCell, {
+            key: 1,
+            field: column.field,
+            attrs: _this2.v3 ? undefined : {
+              field: column.field,
+              sortable: sortable,
+              selectionValue: column.headerSelectionValue,
+              title: column.title,
+              render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+            },
+            sortable: sortable,
+            onHeadercellclick: function onHeadercellclick(e) {
+              return _this.cellClick(e, column);
+            },
+            on: _this2.v3 ? undefined : {
+              "headercellclick": function onHeadercellclick(e) {
+                return _this.cellClick(e, column);
+              },
+              "selectionchange": _this2.selectionChangeHandler
+            },
+            onSelectionchange: _this2.selectionChangeHandler,
+            selectionValue: column.headerSelectionValue,
+            title: column.title,
+            render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+          }, _this2.v3 ? function () {
+            return [sortIcon];
           } : [sortIcon])]) || h("span", {
             "class": 'k-cell-inner'
           }, [h(HeaderCell_1.HeaderCell, {
@@ -503,6 +572,7 @@ var HeaderRowVue2 = {
       }, this.v3 ? function () {
         return [cells.call(_this3, rowIndexes)];
       } : [cells.call(_this3, rowIndexes)]) || h("tr", {
+        "class": 'k-table-row',
         role: 'row',
         attrs: this.v3 ? undefined : {
           role: 'row'

package/dist/npm/header/HeaderSelectionCell.d.ts

@@ -9,6 +9,7 @@ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } fr
  */
 export interface HeaderSelectionCellMethods extends Vue2type {
     changeHandle: (e: any) => void;
+    clickHandler: (e: any) => void;
 }
 /**
  * @hidden

package/dist/npm/header/HeaderSelectionCell.js

@@ -10,6 +10,8 @@ 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");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var main_1 = require("../messages/main");
 /**
  * @hidden
  */
@@ -17,9 +19,20 @@ var HeaderSelectionCellVue2 = {
   props: {
     field: String,
     title: String,
+    sortable: [Boolean, Object],
     selectionValue: Boolean,
     render: [Object, Function, String]
   },
+  // @ts-ignore
+  emits: {
+    selectionchange: null,
+    headercellclick: null
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   created: function created() {
     this.inputId = (0, kendo_vue_common_1.guid)();
   },
@@ -29,6 +42,11 @@ var HeaderSelectionCellVue2 = {
         field: this.$props.field,
         event: e
       });
+    },
+    clickHandler: function clickHandler(event) {
+      if (this.$props.sortable) {
+        this.$emit('headercellclick', event);
+      }
     }
   },
   // @ts-ignore
@@ -41,8 +59,11 @@ var HeaderSelectionCellVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
+    var defaultSlot = (0, kendo_vue_common_1.getDefaultSlots)(this);
     var renderTemplate = this.$props.render;
-    var defaultRendering = h("span", [[h("input", {
+    var ls = (0, kendo_vue_intl_1.provideLocalizationService)(this);
+    var selectAllRowsMessage = ls.toLanguageString(main_1.selectAllRows, main_1.messages[main_1.selectAllRows]);
+    var input = h("input", {
       key: 0,
       checked: this.v3 ? this.$props.selectionValue : null,
       domProps: this.v3 ? undefined : {
@@ -51,31 +72,40 @@ var HeaderSelectionCellVue2 = {
       id: this.inputId,
       attrs: this.v3 ? undefined : {
         id: this.inputId,
-        type: "checkbox"
+        type: "checkbox",
+        "aria-label": selectAllRowsMessage
       },
       type: "checkbox",
       "class": "k-checkbox k-checkbox-md k-rounded-md",
+      "aria-label": selectAllRowsMessage,
       onChange: this.changeHandle,
       on: this.v3 ? undefined : {
         "change": this.changeHandle
       }
-    }), h("label", {
-      key: 1,
-      "class": "k-checkbox-label",
-      "for": this.inputId,
-      attrs: this.v3 ? undefined : {
-        "for": this.inputId
-      }
-    })]]);
-    return kendo_vue_common_1.getTemplate.call(this, {
+    });
+    var defaultRendering = kendo_vue_common_1.getTemplate.call(this, {
       h: h,
       template: renderTemplate,
-      defaultRendering: defaultRendering,
+      defaultRendering: input,
       additionalProps: this.$props,
       additionalListeners: {
+        click: this.clickHandler,
         selectionchange: this.changeHandle
       }
     });
+    return h("span", {
+      "class": "k-link",
+      onClick: this.clickHandler,
+      on: this.v3 ? undefined : {
+        "click": this.clickHandler
+      }
+    }, [h("span", {
+      "class": "k-column-title",
+      title: this.$props.title,
+      attrs: this.v3 ? undefined : {
+        title: this.$props.title
+      }
+    }, [defaultRendering]), defaultSlot]);
   }
 };
 exports.HeaderSelectionCellVue2 = HeaderSelectionCellVue2;