@progress/kendo-vue-grid 8.0.0-develop.1 → 8.0.0-develop.3

package/Grid.mjs

@@ -5,46 +5,46 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as ot, createVNode as n, h as De, createTextVNode as nt, ref as x, inject as dt, markRaw as E } from "vue";
-import { isObject as V, cloneArray as ht, canUseDOM as Q, WatermarkOverlay as pt, getter as X, getTemplate as Ge, setRef as G, hasListener as P, getRef as $, RowHeightService as ut, setScrollbarWidth as ct, kendoThemeMaps as Fe, uGrid as gt, isRtl as Le, validatePackage as ft, shouldShowValidationUI as mt, getLicenseMessage as Ct, guid as Pe, getNestedValue as Me } from "@progress/kendo-vue-common";
-import { tableKeyboardNavigationTools as z, combineFilters as bt, Pager as $t, normalize as Rt, TableKeyboardNavigationProvider as Ae, updateLeft as xt, updateRight as vt, groupExpandReducer as It, detailExpandReducer as wt, getDetailExpandableOptions as St, getGroupExpandableOptions as yt } from "@progress/kendo-vue-data-tools";
-import { Loader as Ht } from "@progress/kendo-vue-indicators";
-import { GridNav as Ve } from "./GridNav.mjs";
-import { GridSelectionCell as Ne } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as Y } from "./cells/GridHierarchyCell.mjs";
-import { GridDetailHierarchyCell as kt } from "./cells/GridDetailHierarchyCell.mjs";
-import { GridDetailCell as _t } from "./cells/GridDetailCell.mjs";
-import { GridEditCell as Et } from "./cells/GridEditCell.mjs";
-import { Header as zt } from "./header/Header.mjs";
-import { HeaderRow as Tt } from "./header/HeaderRow.mjs";
-import { FilterRow as Dt } from "./header/FilterRow.mjs";
-import { GroupPanel as Gt } from "./header/GroupPanel.mjs";
-import { Footer as Ft } from "./footer/Footer.mjs";
-import { FooterRow as Lt } from "./footer/FooterRow.mjs";
-import { operators as Oe } from "./filterCommon.mjs";
-import { VirtualScroll as Pt } from "./VirtualScroll.mjs";
-import { ColumnResize as Mt } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as At } from "./drag/CommonDragLogic.mjs";
-import { DragClue as Vt } from "./drag/DragClue.mjs";
-import { DropClue as Nt } from "./drag/DropClue.mjs";
-import { applyExpandedState as Ot, getColSpan as Wt, autoGenerateColumns as Kt, mapColumns as Ut, getFlatColumnsState as We, getRowSpanOptions as Ke, groupedFirstItemValue as Ue, calcRowHeight as Bt, flatData as jt, readColumns as qt } from "./utils/main.mjs";
-import { GridCell as Jt } from "./cells/GridCell.mjs";
-import { GridGroupCell as Z } from "./cells/GridGroupCell.mjs";
-import { GridRow as Qt } from "./rows/GridRow.mjs";
-import { gridProps as Xt } from "./common.mjs";
-import { GridHeaderSelectionCell as Be } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as je } from "./components/noRecords/GridNoRecords.mjs";
-import { GridNoRecordsContainer as qe } from "./components/noRecords/GridNoRecordsContainer.mjs";
-import { packageMetadata as ee } from "./package-metadata.mjs";
-import { pagerMessagesMap as Je } from "./messages/messagesMap.mjs";
-import { process as Yt } from "@progress/kendo-data-query";
-import { KendoKey as Zt } from "./key.mjs";
-import { getVirtualCellsToRender as ei } from "./utils/virtualColumns.mjs";
-const Mi = /* @__PURE__ */ ot({
+import { defineComponent as pt, createVNode as n, h as Le, createTextVNode as Pe, ref as v, inject as ut, markRaw as E } from "vue";
+import { isObject as V, cloneArray as ct, canUseDOM as X, WatermarkOverlay as gt, getter as Y, getTemplate as Me, setRef as G, hasListener as P, getRef as $, RowHeightService as ft, setScrollbarWidth as mt, kendoThemeMaps as Ae, uGrid as Ct, isRtl as Ve, validatePackage as bt, shouldShowValidationUI as $t, getLicenseMessage as Rt, guid as Ne, getNestedValue as Oe } from "@progress/kendo-vue-common";
+import { tableKeyboardNavigationTools as z, combineFilters as xt, Pager as vt, normalize as It, TableKeyboardNavigationProvider as We, updateLeft as wt, updateRight as St, groupExpandReducer as yt, detailExpandReducer as Ht, getDetailExpandableOptions as kt, getGroupExpandableOptions as _t } from "@progress/kendo-vue-data-tools";
+import { Loader as Et } from "@progress/kendo-vue-indicators";
+import { GridNav as Ke } from "./GridNav.mjs";
+import { GridSelectionCell as Ue } from "./cells/GridSelectionCell.mjs";
+import { GridHierarchyCell as Z } from "./cells/GridHierarchyCell.mjs";
+import { GridDetailHierarchyCell as zt } from "./cells/GridDetailHierarchyCell.mjs";
+import { GridDetailCell as Tt } from "./cells/GridDetailCell.mjs";
+import { GridEditCell as Dt } from "./cells/GridEditCell.mjs";
+import { Header as Gt } from "./header/Header.mjs";
+import { HeaderRow as Ft } from "./header/HeaderRow.mjs";
+import { FilterRow as Lt } from "./header/FilterRow.mjs";
+import { GroupPanel as Pt } from "./header/GroupPanel.mjs";
+import { Footer as Mt } from "./footer/Footer.mjs";
+import { FooterRow as At } from "./footer/FooterRow.mjs";
+import { operators as Be } from "./filterCommon.mjs";
+import { VirtualScroll as Vt } from "./VirtualScroll.mjs";
+import { ColumnResize as Nt } from "./drag/ColumnResize.mjs";
+import { CommonDragLogic as Ot } from "./drag/CommonDragLogic.mjs";
+import { DragClue as Wt } from "./drag/DragClue.mjs";
+import { DropClue as Kt } from "./drag/DropClue.mjs";
+import { applyExpandedState as Ut, getColSpan as Bt, autoGenerateColumns as jt, mapColumns as qt, getFlatColumnsState as je, getRowSpanOptions as qe, groupedFirstItemValue as Je, calcRowHeight as Jt, flatData as Qt, readColumns as Xt } from "./utils/main.mjs";
+import { GridCell as Yt } from "./cells/GridCell.mjs";
+import { GridGroupCell as ee } from "./cells/GridGroupCell.mjs";
+import { GridRow as Zt } from "./rows/GridRow.mjs";
+import { gridProps as ei } from "./common.mjs";
+import { GridHeaderSelectionCell as Qe } from "./header/GridHeaderSelectionCell.mjs";
+import { GridNoRecords as Xe } from "./components/noRecords/GridNoRecords.mjs";
+import { GridNoRecordsContainer as Ye } from "./components/noRecords/GridNoRecordsContainer.mjs";
+import { packageMetadata as te } from "./package-metadata.mjs";
+import { pagerMessagesMap as Ze } from "./messages/messagesMap.mjs";
+import { process as ti } from "@progress/kendo-data-query";
+import { KendoKey as ii } from "./key.mjs";
+import { getVirtualCellsToRender as si } from "./utils/virtualColumns.mjs";
+const Ni = /* @__PURE__ */ pt({
   name: "KendoGrid",
   inheritAttrs: !1,
   props: {
-    ...Xt,
+    ...ei,
     toolbar: {
       type: Object
     },
@@ -89,18 +89,18 @@ const Mi = /* @__PURE__ */ ot({
     }
   },
   created() {
-    ft(ee), this.showLicenseWatermark = mt(ee), this.licenseMessage = Ct(ee), this.initialHeight = null, this._columns = [], this.vsRef = new Pt(), this.dragLogic = new At(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new Mt(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableBodyRef = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Pe(), this._gridRoleElementId = Pe(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this._virtualSkipRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0;
+    bt(te), this.showLicenseWatermark = $t(te), this.licenseMessage = Rt(te), this.initialHeight = null, this._columns = [], this.vsRef = new Vt(), this.dragLogic = new Ot(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new Nt(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableBodyRef = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Ne(), this._gridRoleElementId = Ne(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this._virtualSkipRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0;
   },
   mounted() {
     var t, i;
     this.setRefs();
-    const e = Le(this._element);
-    this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = ((i = (t = this._element) == null ? void 0 : t.style) == null ? void 0 : i.height) || null, this.resizeObserver = Q && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body);
+    const e = Ve(this._element);
+    this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = ((i = (t = this._element) == null ? void 0 : t.style) == null ? void 0 : i.height) || null, this.resizeObserver = X && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body);
   },
   updated() {
     var t;
     this.setRefs();
-    const e = Le(this._element);
+    const e = Ve(this._element);
     this.isRtl = e, this._prevTotal = this.$props.total, this.vsRef.tableTransform && this.vsRef.table && (this.vsRef.table.style.transform = this.vsRef.tableTransform, this.vsRef.tableTransform = ""), this.isVirtualScroll && (this.setContainerHeight(), this.setMinRowHeight(), (t = this.vsRef) == null || t.update());
   },
   unmounted() {
@@ -114,16 +114,16 @@ const Mi = /* @__PURE__ */ ot({
       return this.$props.navigatable ? this.gridId : "";
     },
     groupExpandable() {
-      return yt(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
+      return _t(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
     },
     hierarchClass() {
-      return gt.hierarchyCell({});
+      return Ct.hierarchyCell({});
     },
     computedRowSpannable() {
-      return Ke(this.$props.rowSpannable);
+      return qe(this.$props.rowSpannable);
     },
     detailExpandable() {
-      return St(!!this.$props.detail);
+      return kt(!!this.$props.detail);
     },
     nonscrollableWrapperClass() {
       const {
@@ -132,7 +132,7 @@ const Mi = /* @__PURE__ */ ot({
       return {
         "k-grid": !0,
         "k-grid-md": !e,
-        [`k-grid-${Fe.sizeMap[e] || e}`]: e,
+        [`k-grid-${Ae.sizeMap[e] || e}`]: e,
         [t]: !!t
       };
     },
@@ -153,7 +153,7 @@ const Mi = /* @__PURE__ */ ot({
         "k-table": !0,
         "k-grid-table": !0,
         "k-grid-md": !e,
-        [`k-table-${Fe.sizeMap[e] || e}`]: e
+        [`k-table-${Ae.sizeMap[e] || e}`]: e
       };
     },
     getCorrectHeight() {
@@ -189,7 +189,7 @@ const Mi = /* @__PURE__ */ ot({
   },
   methods: {
     readColumnElements() {
-      return qt(this.$props.columns, this.currentColumnsState, {
+      return Xt(this.$props.columns, this.currentColumnsState, {
         prevId: 0,
         idPrefix: this.idPrefix
       });
@@ -215,7 +215,7 @@ const Mi = /* @__PURE__ */ ot({
       })];
     },
     getFlatData(e, t, i, s, r, l, d) {
-      const h = [], c = jt(h, e, t, {
+      const h = [], c = Qt(h, e, t, {
         index: i
       }, s !== void 0, r, l, this.groupExpandable.defaultExpand, d, this.$props.expandField);
       return {
@@ -242,7 +242,7 @@ const Mi = /* @__PURE__ */ ot({
         ...i,
         children: i.children && i.children.length > 0 ? this.filterHiddenColumns(i.children) : i.children
       });
-      return [...e].filter((i) => !i.hidden).filter((i) => Q && i && i.media ? window.matchMedia(i.media).matches : i).map((i) => t(i));
+      return [...e].filter((i) => !i.hidden).filter((i) => X && i && i.media ? window.matchMedia(i.media).matches : i).map((i) => t(i));
     },
     /**
      * A getter of the current columns. Gets the current column width or current columns,
@@ -281,7 +281,7 @@ const Mi = /* @__PURE__ */ ot({
         this.dragLogic.refGroupPanelDiv(l);
       }
       const s = $(this, "dropElementClue"), r = $(this, "dragElementClue");
-      this.dragLogic.refDropElementClue(s), this.dragLogic.refDragElementClue(r), this.columnResize.colGroupMain = $(this, "colGroup"), this._header = $(this, "header"), this._footer = $(this, "footer"), this.resetTableWidth(), ct();
+      this.dragLogic.refDropElementClue(s), this.dragLogic.refDragElementClue(r), this.columnResize.colGroupMain = $(this, "colGroup"), this._header = $(this, "header"), this._footer = $(this, "footer"), this.resetTableWidth(), mt();
     },
     gridUnmounted() {
       clearTimeout(this.forceUpdateTimeout), this.columnResize.columns = [], this.dragLogic.columns = [], this.dragLogic && this.dragLogic.dragElementClue && (this.dragLogic.dragElementClue.$el.remove(), this.dragLogic.dropElementClue.$el.remove()), this.currentData = [], this._columns = [], document != null && document.body && this.resizeObserver && this.resizeObserver.disconnect();
@@ -302,7 +302,7 @@ const Mi = /* @__PURE__ */ ot({
     },
     initializeVirtualization() {
       const e = this.vsRef, t = this.$props.rowHeight || this._minRowHeightRef || 0;
-      e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, e.container = $(this, "scrollContainer"), e.tableBody = $(this, "tableBody"), e.scrollHeightContainer = $(this, "scrollHeightContainer"), e.table = $(this, "table"), (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new ut(this._virtualTotal, t)));
+      e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, e.container = $(this, "scrollContainer"), e.tableBody = $(this, "tableBody"), e.scrollHeightContainer = $(this, "scrollHeightContainer"), e.table = $(this, "table"), (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new ft(this._virtualTotal, t)));
     },
     setContainerHeight() {
       const e = $(this, "scrollContainer");
@@ -310,7 +310,7 @@ const Mi = /* @__PURE__ */ ot({
     },
     setMinRowHeight() {
       if (!this._minRowHeightRef && !this.$props.rowHeight) {
-        const t = Bt($(this, "tableBody"));
+        const t = Jt($(this, "tableBody"));
         t && (this._minRowHeightRef = t, this.$forceUpdate());
       }
     },
@@ -345,7 +345,7 @@ const Mi = /* @__PURE__ */ ot({
       let t = this.computedCollapsed, i = t[e.level];
       const s = this.$props.uniqueField, r = function(h, c) {
         return h.value === e.dataItem.value && c === e.level;
-      }, l = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, r, 0, null) : e.dataItem, d = Ue(l || e.dataItem, s);
+      }, l = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, r, 0, null) : e.dataItem, d = Je(l || e.dataItem, s);
       if (e.value) {
         if (i && i.length) {
           const h = i.indexOf(d);
@@ -469,7 +469,7 @@ const Mi = /* @__PURE__ */ ot({
     handleDetailExpandAction(e, t) {
       var i;
       if (this.detailExpandable.enabled) {
-        const s = (i = this.gridContext.detailExpand) == null ? void 0 : i.value, r = wt(s != null ? s : {}, e);
+        const s = (i = this.gridContext.detailExpand) == null ? void 0 : i.value, r = Ht(s != null ? s : {}, e);
         this.$emit("detailexpandchange", {
           ...this.getArguments(t),
           detailExpand: r
@@ -479,7 +479,7 @@ const Mi = /* @__PURE__ */ ot({
     handleGroupExpandAction(e, t) {
       var i;
       if (this.groupExpandable.enabled) {
-        const s = (i = this.gridContext.groupExpand) == null ? void 0 : i.value, r = It(s != null ? s : [], e, this.groupExpandable);
+        const s = (i = this.gridContext.groupExpand) == null ? void 0 : i.value, r = yt(s != null ? s : [], e, this.groupExpandable);
         this.$props.expandField || this.$emit("groupexpandchange", {
           ...this.getArguments(t),
           groupExpand: r
@@ -510,7 +510,7 @@ const Mi = /* @__PURE__ */ ot({
       }
     },
     columnReorder(e, t, i) {
-      const s = this._columns[e], r = We(this.currentColumnsState), l = s.depth, d = (u) => {
+      const s = this._columns[e], r = je(this.currentColumnsState), l = s.depth, d = (u) => {
         do
           u++;
         while (u < this._columns.length && this._columns[u].depth > l);
@@ -518,11 +518,11 @@ const Mi = /* @__PURE__ */ ot({
       }, h = this._columns.splice(e, d(e) - e);
       this._columns.splice(e < t ? d(t - h.length) : t, 0, ...h), this._columns.filter((u) => u.declarationIndex >= 0).forEach((u, m) => {
         u.orderIndex = m;
-        const R = r.find((w) => w.id === u.id);
+        const R = r.find((x) => x.id === u.id);
         R && (R.orderIndex = m);
       });
       const c = this._columns[e].locked && this._columns[t].locked;
-      xt(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), vt(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
+      wt(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), St(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
       const f = this.getColumns();
       this.$emit("columnreorder", {
         target: this,
@@ -595,11 +595,11 @@ const Mi = /* @__PURE__ */ ot({
     },
     configureColumns(e, t) {
       e.filter((l) => l.columnType === "checkbox").forEach((l) => {
-        l.width = l.width || "50px", l.defaultCell = E(Ne), l.defaultHeaderCell = E(Be), l._type = "edit";
+        l.width = l.width || "50px", l.defaultCell = E(Ue), l.defaultHeaderCell = E(Qe), l._type = "edit";
       }), this.$props.selectedField && this._columns.filter((l) => l.field === this.$props.selectedField).forEach((l) => {
-        l.width = l.width || "50px", l.internalCell = E(Ne), l.internalHeaderCell = E(Be);
+        l.width = l.width || "50px", l.internalCell = E(Ue), l.internalHeaderCell = E(Qe);
       });
-      const i = We(this.currentColumnsState);
+      const i = je(this.currentColumnsState);
       this.initColumnsState(e, i);
       const s = {
         id: "",
@@ -627,8 +627,8 @@ const Mi = /* @__PURE__ */ ot({
           ...s,
           _type: "expand",
           id: z.generateNavigatableId(`${r++}`, "expand", "column"),
-          defaultCell: E(Y),
-          internalCell: E(Y),
+          defaultCell: E(Z),
+          internalCell: E(Z),
           field: this.detailExpandable.column,
           headerClassName: this.hierarchClass
         };
@@ -636,7 +636,7 @@ const Mi = /* @__PURE__ */ ot({
       }
       this.$props.expandField && P.call(this, "expandchange") && this.$props.detail && (e.unshift({
         ...s,
-        internalCell: E(Y),
+        internalCell: E(Z),
         field: this.$props.expandField,
         headerClassName: "k-hierarchy-cell k-header",
         id: z.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
@@ -646,8 +646,8 @@ const Mi = /* @__PURE__ */ ot({
         const d = {
           ...s,
           isAccessible: !1,
-          defaultCell: E(Z),
-          internalCell: E(Z),
+          defaultCell: E(ee),
+          internalCell: E(ee),
           id: z.generateNavigatableId(`${r++}`, "group", "column"),
           field: "value",
           locked: this.$props.lockGroups
@@ -655,21 +655,21 @@ const Mi = /* @__PURE__ */ ot({
         e.unshift(d), this.currentColumnsState.unshift(i.find((h) => h.id === d.id) || d);
       }
       e.slice(r).forEach((l) => {
-        l.parentIndex >= 0 && (l.parentIndex += r), l.rowSpannable = l.rowSpannable !== void 0 ? Ke(l.rowSpannable) : this.computedRowSpannable;
+        l.parentIndex >= 0 && (l.parentIndex += r), l.rowSpannable = l.rowSpannable !== void 0 ? qe(l.rowSpannable) : this.computedRowSpannable;
       });
     },
     initColumns(e, t) {
       var l;
       this._columns = this.readColumnElements();
       const i = (l = this.gridContext.group) == null ? void 0 : l.value;
-      this._columns.filter((d) => !d.hidden).length === 0 && (this._columns = Kt(e, i, {
+      this._columns.filter((d) => !d.hidden).length === 0 && (this._columns = jt(e, i, {
         column: this.$props.expandField ? this.$props.expandField : this.groupExpandable.column
       }, {
         prevId: 0,
         idPrefix: this.idPrefix
       })), this.configureColumns(this._columns, t);
       const [s, r] = this.filterColumns(this._columns);
-      this._columns = s, this.hiddenColumnsRef = r, this._columnsMap = Ut(this._columns, !0);
+      this._columns = s, this.hiddenColumnsRef = r, this._columnsMap = qt(this._columns, !0);
     },
     resolveTitle(e) {
       const t = this.findColumnByField(e), i = t && (t.title || t.field);
@@ -755,7 +755,7 @@ const Mi = /* @__PURE__ */ ot({
           r--, s && (s.width += c);
           return;
         }
-        const f = Math.min(Wt(d, e), t.length - h);
+        const f = Math.min(Bt(d, e), t.length - h);
         r = f - 1, s = {
           width: c,
           colSpan: f,
@@ -763,7 +763,7 @@ const Mi = /* @__PURE__ */ ot({
         }, i.push(s);
       }), this.$props.columnVirtualization) {
         const d = this.scrollLeftRef || 0, h = this.tableWidth || parseFloat((((l = this.$attrs.style) == null ? void 0 : l.width) || "").toString());
-        return ei({
+        return si({
           cellModels: i,
           columns: t,
           tableViewPortWidth: h,
@@ -801,7 +801,7 @@ const Mi = /* @__PURE__ */ ot({
     };
   },
   setup(e) {
-    const t = x(null), i = x(null), s = x(null), r = x(null), l = x(null), d = x(null), h = x(null), c = x(null), f = x(null), u = x(null), m = x(!0), R = x(!1), w = dt(Zt, {});
+    const t = v(null), i = v(null), s = v(null), r = v(null), l = v(null), d = v(null), h = v(null), c = v(null), f = v(null), u = v(null), m = v(!0), R = v(!1), x = ut(ii, {});
     return {
       groupPanelDivRef: t,
       dropElementClueRef: i,
@@ -813,14 +813,14 @@ const Mi = /* @__PURE__ */ ot({
       scrollContainerRef: c,
       scrollTableRef: f,
       scrollTableBodyRef: u,
-      gridContext: w,
+      gridContext: x,
       shouldUpdateLeftRightRef: m,
       resizedRef: R,
       currentColumnsState: e.columnsState
     };
   },
   render() {
-    var fe, me, Ce, be, $e, Re, xe, ve, Ie, we, Se;
+    var fe, me, Ce, be, $e, Re, xe, ve, Ie, we, Se, ye, He, ke;
     const e = (fe = this.gridContext.sort) == null ? void 0 : fe.value, t = (me = this.gridContext.filter) == null ? void 0 : me.value, i = (Ce = this.gridContext.search) == null ? void 0 : Ce.value, s = (be = this.gridContext.skip) == null ? void 0 : be.value, r = ($e = this.gridContext.take) == null ? void 0 : $e.value, l = (Re = this.gridContext.group) == null ? void 0 : Re.value, d = (xe = this.gridContext.groupExpand) == null ? void 0 : xe.value, h = (ve = this.gridContext.detailExpand) == null ? void 0 : ve.value, c = !!(l != null && l.length);
     let f;
     this.currentColumnsState = (Ie = this.gridContext.columnsState) == null ? void 0 : Ie.value;
@@ -831,33 +831,33 @@ const Mi = /* @__PURE__ */ ot({
       search: !0,
       page: !0
     } : this.$props.autoProcessData;
-    let m = this.$props.total || 0;
+    let m;
     const R = z.getIdPrefix(this.navigation);
-    let w = [];
-    Array.isArray(this.$props.dataItems) ? w = this.$props.dataItems : this.$props.dataItems && (w = Ot(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField).data, m = m || this.$props.dataItems.total);
-    const te = this.$props.groupable === !0 || V(this.$props.groupable) && this.$props.groupable.enabled !== !1;
-    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = te, this._virtualPageSize = this.calcVirtualPageSize();
-    const N = w.length === m, Qe = V(this.$props.groupable) && this.$props.groupable.footer || "none";
+    let x = [];
+    Array.isArray(this.$props.dataItems) ? (x = this.$props.dataItems, m = (we = this.$props.total) != null ? we : x.length) : (x = ((Se = Ut(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : Se.data) || [], m = (ke = (He = this.$props.total) != null ? He : (ye = this.$props.dataItems) == null ? void 0 : ye.total) != null ? ke : x.length);
+    const ie = this.$props.groupable === !0 || V(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = ie, this._virtualPageSize = this.calcVirtualPageSize();
+    const N = x.length === m, et = V(this.$props.groupable) && this.$props.groupable.footer || "none";
     if (this.currentData = [], u) {
       const a = u.page && !(this.isVirtualScroll && !this.$props.pageable), {
         data: C,
         total: S
-      } = Yt(w, {
+      } = ti(x, {
         group: u.group ? l : void 0,
         sort: u.sort ? e : void 0,
-        filter: bt(u.filter ? t : void 0, u.search ? i : void 0),
+        filter: xt(u.filter ? t : void 0, u.search ? i : void 0),
         ...a ? {
           take: this.$props.pageable ? r || 10 : r,
           skip: s || 0
         } : {}
       });
-      w = C, m = (we = this.$props.total) != null ? we : S;
+      x = C, m = S;
     }
     const {
-      resolvedGroupsCount: Xe,
-      flattedData: Ye
-    } = this.getFlatData(w, Qe, N ? 0 : this.$props.skip || 0, l, h, d, this.$props.dataItemKey);
-    this.currentData = Ye;
+      resolvedGroupsCount: tt,
+      flattedData: it
+    } = this.getFlatData(x, et, N ? 0 : this.$props.skip || 0, l, h, d, this.$props.dataItemKey);
+    this.currentData = it;
     const O = this._virtualSkipRef || 0;
     if (this._virtualTotal = m, this.isVirtualScroll) {
       let a = s || 0;
@@ -868,8 +868,8 @@ const Mi = /* @__PURE__ */ ot({
         } else
           f = this.currentData.slice(a, a + this._virtualPageSize);
     }
-    this.initializeVirtualization(), this.initColumns(this.$props.dataItems, Xe), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this._columns, this.columnResize.columnsState = ht(this.currentColumnsState || []), this.dragLogic.columns = this._columns;
-    const ie = this.$props.toolbar, M = this.$props.noRecords, k = this._columns.filter((a) => a.children.length === 0), se = te && n(Gt, {
+    this.initializeVirtualization(), this.initColumns(this.$props.dataItems, tt), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this._columns, this.columnResize.columnsState = ct(this.currentColumnsState || []), this.dragLogic.columns = this._columns;
+    const se = this.$props.toolbar, M = this.$props.noRecords, k = this._columns.filter((a) => a.children.length === 0), re = ie && n(Pt, {
       ref: (a) => {
         this.groupPanelDivRef = a;
       },
@@ -880,36 +880,36 @@ const Mi = /* @__PURE__ */ ot({
       onDragHandler: this.dragLogic.dragHandler,
       onReleaseHandler: this.dragLogic.releaseHandler,
       resolveTitle: this.resolveTitle
-    }, null), re = (this.dragLogic.reorderable || this.dragLogic.groupable) && Q && document && document.body, le = [re && n(Nt, {
+    }, null), le = (this.dragLogic.reorderable || this.dragLogic.groupable) && X && document && document.body, ae = [le && n(Kt, {
       ref: (a) => {
         this.dropElementClueRef = a;
       }
-    }, null), re && n(Vt, {
+    }, null), le && n(Wt, {
       ref: (a) => {
         this.dragElementClueRef = a;
       }
-    }, null)], Ze = this.showLicenseWatermark ? n(pt, {
+    }, null)], st = this.showLicenseWatermark ? n(gt, {
       message: this.licenseMessage
-    }, null) : null, W = this.$attrs.style, et = W && V(W) && W["width"] || "";
-    this.tableWidth = parseFloat(et.toString());
-    const ae = k.findIndex((a) => typeof a.colSpan == "function") > -1;
+    }, null) : null, W = this.$attrs.style, rt = W && V(W) && W["width"] || "";
+    this.tableWidth = parseFloat(rt.toString());
+    const oe = k.findIndex((a) => typeof a.colSpan == "function") > -1;
     let F;
-    ae || (F = this.getCellsToRender(null, k));
-    const oe = (this.$props.columnVirtualization ? this.getCellsToRender(null, k).map(({
+    oe || (F = this.getCellsToRender(null, k));
+    const ne = (this.$props.columnVirtualization ? this.getCellsToRender(null, k).map(({
       columnIndex: a
     }) => k[a]) : k).map(function(a, C) {
       return n("col", {
         key: a.id || `col-${C}`,
         width: a.width !== void 0 ? Math.floor(parseFloat(a.width.toString())) : void 0
       }, null);
-    }, this), ne = n(zt, {
+    }, this), de = n(Gt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
       ref: (a) => {
         this.headerRef = a;
       },
-      headerRow: n(Tt, {
+      headerRow: n(Ft, {
         grid: this,
         sort: e,
         groupable: this.$props.groupable,
@@ -918,7 +918,7 @@ const Mi = /* @__PURE__ */ ot({
         onSortChange: this.sortChangeHandler,
         filter: t,
         filterable: this.$props.filterable,
-        filterOperators: this.$props.filterOperators || Oe,
+        filterOperators: this.$props.filterOperators || Be,
         onFilterChange: this.filterChangeHandler,
         columnMenu: this.$props.columnMenu,
         columnMenuIcon: this.$props.columnMenuIcon,
@@ -936,14 +936,14 @@ const Mi = /* @__PURE__ */ ot({
         cellRender: this.$props.headerCellRender,
         isRtl: this.isRtl,
         isColCountDefined: this.getAriaColCount !== void 0,
-        filterRow: this.$props.filterable && n(Dt, {
+        filterRow: this.$props.filterable && n(Lt, {
           grid: this,
           size: this.$props.size,
           columns: this._columns,
           cellsToRender: F,
           columnVirtualization: this.$props.columnVirtualization,
           filter: t,
-          filterOperators: this.$props.filterOperators || Oe,
+          filterOperators: this.$props.filterOperators || Be,
           onFilterchange: this.filterChangeHandler,
           sort: this.$props.sort,
           cellRender: this.$props.filterCellRender,
@@ -951,37 +951,37 @@ const Mi = /* @__PURE__ */ ot({
           ariaRowIndex: this._columnsMap.length + 1
         }, null) || void 0
       }, null),
-      cols: oe
-    }, null), de = this._columns.some((a) => !!a.footerCell) ? n(Ft, {
+      cols: ne
+    }, null), he = this._columns.some((a) => !!a.footerCell) ? n(Mt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
       ref: (a) => {
         this.footerRef = a;
       },
-      row: n(Lt, {
+      row: n(At, {
         isRtl: this.isRtl,
         rowIndex: this.getAriaRowCount + 1,
         columns: this._columns
       }, null),
-      cols: oe
-    }, null) : n("span", null, null), tt = function(a, C, S, ye, _) {
+      cols: ne
+    }, null) : n("span", null, null), lt = function(a, C, S, _e, _) {
       let p = !1;
-      const T = this.$props.selectedField, y = T ? Me(T, a.dataItem) : void 0, v = this.$props.highlight && this.$props.dataItemKey && X(this.$props.dataItemKey)(a.dataItem) !== void 0 ? this.$props.highlight[X(this.$props.dataItemKey)(a.dataItem)] : void 0;
-      return ae && (F = this.getCellsToRender(a.dataItem, k)), {
+      const T = this.$props.selectedField, y = T ? Oe(T, a.dataItem) : void 0, I = this.$props.highlight && this.$props.dataItemKey && Y(this.$props.dataItemKey)(a.dataItem) !== void 0 ? this.$props.highlight[Y(this.$props.dataItemKey)(a.dataItem)] : void 0;
+      return oe && (F = this.getCellsToRender(a.dataItem, k)), {
         row: F.map(function({
           columnIndex: b,
           colSpan: D
         }) {
-          var _e, Ee, ze, Te;
+          var Te, De, Ge, Fe;
           const o = k[b];
-          let I;
-          if ((_e = o.rowSpannable) != null && _e.enabled && a.rowType === "data" && o.field && _) {
-            const g = o.field ? (ze = (Ee = o.rowSpannable).valueGetter) == null ? void 0 : ze.call(Ee, a.dataItem, o.field) : null;
-            I = {
+          let w;
+          if ((Te = o.rowSpannable) != null && Te.enabled && a.rowType === "data" && o.field && _) {
+            const g = o.field ? (Ge = (De = o.rowSpannable).valueGetter) == null ? void 0 : Ge.call(De, a.dataItem, o.field) : null;
+            w = {
               value: g,
               count: 1
-            }, _[o.field] && ((Te = _[o.field]) == null ? void 0 : Te.value) === g && _[o.field] !== null ? (_[o.field].count++, I.count = null) : _[o.field] = I;
+            }, _[o.field] && ((Fe = _[o.field]) == null ? void 0 : Fe.value) === g && _[o.field] !== null ? (_[o.field].count++, w.count = null) : _[o.field] = w;
           }
           const L = `${o.className ? o.className + " " : ""}${o.locked ? "k-grid-content-sticky" : ""}`, H = o.locked && o.left !== void 0 ? this.isRtl ? {
             left: o.right + "px",
@@ -990,17 +990,17 @@ const Mi = /* @__PURE__ */ ot({
             left: o.left + "px",
             right: o.right + "px"
           } : void 0;
-          let He = !1;
+          let Ee = !1;
           if (o.editable && this.$props.editField) {
-            const g = Me(this.$props.editField, a.dataItem);
-            (g === !0 || g === o.field) && (p = !0, He = !0);
+            const g = Oe(this.$props.editField, a.dataItem);
+            (g === !0 || g === o.field) && (p = !0, Ee = !0);
           }
           let A;
           o.cell && (A = o.cell);
-          const ke = this.computedCollapsed && this.computedCollapsed[a.level] && this.computedCollapsed[a.level].some((g) => g === Ue(a.dataItem, this.$props.uniqueField)), j = o.id ? o.id : b, q = ke ? !ke : a.expanded || a.dataItem.expanded, at = o._type === "expand", J = z.generateNavigatableId(`${C}-${String(b)}`, R, at || a.rowType === "groupHeader" || a.rowType === "groupFooter" || o.field === "value" ? "nodata" : "cell");
+          const ze = this.computedCollapsed && this.computedCollapsed[a.level] && this.computedCollapsed[a.level].some((g) => g === Je(a.dataItem, this.$props.uniqueField)), q = o.id ? o.id : b, J = ze ? !ze : a.expanded || a.dataItem.expanded, ht = o._type === "expand", Q = z.generateNavigatableId(`${C}-${String(b)}`, R, ht || a.rowType === "groupHeader" || a.rowType === "groupFooter" || o.field === "value" ? "nodata" : "cell");
           return o.internalCell ? n(o.internalCell, {
-            key: j,
-            id: J,
+            key: q,
+            id: Q,
             colSpan: D,
             dataItem: a.dataItem,
             field: o.field || "",
@@ -1021,18 +1021,18 @@ const Mi = /* @__PURE__ */ ot({
             columnsCount: this._columns.filter((g) => !g.children.length).length,
             rowType: a.rowType,
             level: a.level,
-            expanded: q,
+            expanded: J,
             dataIndex: a.dataIndex,
             style: H,
             ariaColumnIndex: o.ariaColumnIndex,
             isRtl: this.isRtl,
             isSelected: Array.isArray(y) && y.indexOf(b) > -1,
-            isHighlighted: !!(typeof v != "boolean" && v && o.field && v[o.field] === !0),
+            isHighlighted: !!(typeof I != "boolean" && I && o.field && I[o.field] === !0),
             group: a.group,
-            rowSpan: I
-          }, null) : He ? n(Et, {
-            id: J,
-            key: j,
+            rowSpan: w
+          }, null) : Ee ? n(Dt, {
+            id: Q,
+            key: q,
             colSpan: D,
             dataItem: a.dataItem,
             field: o.field || "",
@@ -1051,12 +1051,12 @@ const Mi = /* @__PURE__ */ ot({
             columnsCount: this._columns.filter((g) => !g.children.length).length,
             rowType: a.rowType,
             level: a.level,
-            expanded: q,
+            expanded: J,
             dataIndex: a.dataIndex,
             style: H
-          }, null) : n(Jt, {
-            key: j,
-            id: J,
+          }, null) : n(Yt, {
+            key: q,
+            id: Q,
             colSpan: D,
             dataItem: a.dataItem,
             field: o.field || "",
@@ -1083,25 +1083,25 @@ const Mi = /* @__PURE__ */ ot({
             columnsCount: this._columns.filter((g) => !g.children.length).length,
             rowType: a.rowType,
             level: a.level,
-            expanded: q,
+            expanded: J,
             dataIndex: a.dataIndex,
             style: H,
-            rowSpan: I,
+            rowSpan: w,
             isSelected: Array.isArray(y) && y.indexOf(b) > -1,
-            isHighlighted: !!(typeof v != "boolean" && v && o.field && v[o.field] === !0)
+            isHighlighted: !!(typeof I != "boolean" && I && o.field && I[o.field] === !0)
           }, null);
         }, this),
         isInEdit: p,
         isSelected: typeof y == "boolean" && y,
-        isHighlighted: typeof v == "boolean" && v
+        isHighlighted: typeof I == "boolean" && I
       };
     };
-    let it = 0, K = [];
-    const U = !this.currentData.length, he = (a) => a >= this.currentData.length - it;
+    let at = 0, K = [];
+    const U = !this.currentData.length, pe = (a) => a >= this.currentData.length - at;
     let B = 0;
     if (this.currentData.length) {
       const a = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
-      let C = this.$props.skip || 0, S = -1, ye = 0;
+      let C = this.$props.skip || 0, S = -1, _e = 0;
       const _ = this.computedRowSpannable.enabled ? {} : void 0;
       if (this.isVirtualScroll) {
         if (O > 0) {
@@ -1112,37 +1112,37 @@ const Mi = /* @__PURE__ */ ot({
       }
       K = (f || this.currentData).map(function(p, T) {
         p.rowType === "data" && S++;
-        const y = p.dataIndex % 2 !== 0, v = this.$props.dataItemKey && X(this.$props.dataItemKey)(p.dataItem), b = T + C, D = v || "ai" + b, o = D + "_1", I = tt.call(this, p, D, S, y, _), L = k.length - (this.detailExpandable.enabled ? 1 : 0) - ((l == null ? void 0 : l.length) || 0) || 1;
-        return B = b + a + ye, [n(Qt, {
+        const y = p.dataIndex % 2 !== 0, I = this.$props.dataItemKey && Y(this.$props.dataItemKey)(p.dataItem), b = T + C, D = I || "ai" + b, o = D + "_1", w = lt.call(this, p, D, S, y, _), L = k.length - (this.detailExpandable.enabled ? 1 : 0) - ((l == null ? void 0 : l.length) || 0) || 1;
+        return B = b + a + _e, [n(Zt, {
           key: D,
           item: p,
           dataIndex: S,
           ariaRowIndex: B,
           absoluteRowIndex: b,
           isAltRow: y,
-          isHidden: he(T),
+          isHidden: pe(T),
           rowHeight: this.$props.rowHeight,
-          isSelected: I.isSelected,
-          isHighlighted: I.isHighlighted,
-          isInEdit: I.isInEdit,
+          isSelected: w.isSelected,
+          isHighlighted: w.isHighlighted,
+          isInEdit: w.isInEdit,
           rowType: p.rowType,
           onRowclick: (H) => this.rowClick(H, p),
           onRowdblclick: (H) => this.rowDoubleClick(H, p),
           render: this.$props.rowRender,
           class: this.$props.rowClass ? this.$props.rowClass(p) : ""
         }, {
-          default: () => [I.row]
+          default: () => [w.row]
         }), this.$props.detail && p.rowType === "data" && (p.expanded || p.dataItem.expanded) && n("tr", {
           key: o,
           class: y ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
           style: {
-            visibility: he(T) ? "hidden" : "",
+            visibility: pe(T) ? "hidden" : "",
             height: this.$props.detailRowHeight + "px"
           },
           role: "row",
           "aria-rowindex": B
         }, [l == null ? void 0 : l.map(function(H) {
-          return n(Z, {
+          return n(ee, {
             id: "",
             dataIndex: p.dataIndex,
             field: H.field,
@@ -1150,9 +1150,9 @@ const Mi = /* @__PURE__ */ ot({
             key: `group-${H.field}-${p.dataIndex}`,
             group: p.group
           }, null);
-        }, this), (this.$props.expandField || this.detailExpandable.enabled) && n(kt, {
+        }, this), (this.$props.expandField || this.detailExpandable.enabled) && n(zt, {
           id: z.generateNavigatableId(`${o}-dhcell`, R)
-        }, null), n(_t, {
+        }, null), n(Tt, {
           dataItem: p.dataItem,
           dataIndex: p.dataIndex,
           colSpan: L,
@@ -1162,7 +1162,7 @@ const Mi = /* @__PURE__ */ ot({
         }, null)])];
       }, this);
     }
-    const st = this.$props.pageable && n($t, {
+    const ot = this.$props.pageable && n(vt, {
       class: "k-grid-pager",
       onPagesizechange: this.pageChangeHandler,
       onPagechange: this.pageChangeHandler,
@@ -1170,61 +1170,66 @@ const Mi = /* @__PURE__ */ ot({
       total: m,
       skip: s || 0,
       pageSize: (r !== void 0 ? r : this.$props.pageSize) || 10,
-      messagesMap: Je,
-      settings: Rt(this.$props.pageable || {})
-    }, null), pe = Ge.call(this, {
-      h: De,
+      messagesMap: Ze,
+      settings: It(this.$props.pageable || {})
+    }, null), ue = Me.call(this, {
+      h: Le,
       template: this.$props.pager,
-      defaultRendering: st,
+      defaultRendering: ot,
       additionalProps: {
         ...this.$props,
         skip: this.$props.skip || 0,
-        messagesMap: Je
+        messagesMap: Ze
       },
       additionalListeners: {
         pagesizechange: this.pageChangeHandler,
         pagechange: this.pageChangeHandler
       }
-    }), rt = (a) => e && e.filter((C) => C.field === a).length > 0, ue = n("colgroup", {
+    }), nt = (a) => e && e.filter((C) => C.field === a).length > 0, ce = n("colgroup", {
       ref: G(this, "colGroup")
     }, [k.map(function(a, C) {
       return n("col", {
         key: a.id || `col-${C}`,
-        class: rt(a.field) ? "k-sorted" : void 0,
+        class: nt(a.field) ? "k-sorted" : void 0,
         width: a.width !== void 0 ? a.width.toString().indexOf("%") !== -1 ? a.width : Math.floor(parseFloat(a.width.toString())) + "px" : void 0
       }, null);
-    }, this)]), ce = {
+    }, this)]), ge = {
       height: this.getCorrectHeight,
       ...this.$attrs.style
-    }, lt = this.$props.loader && n("div", {
-      class: "k-loader-container k-loader-container-md k-loader-top"
+    }, dt = n("div", {
+      class: "k-loading-mask"
     }, [n("div", {
-      class: "k-loader-container-overlay k-overlay-light"
+      class: "k-loading-color"
     }, null), n("div", {
-      class: "k-loader-container-inner"
-    }, [n(Ht, {
+      style: {
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      }
+    }, [n(Et, {
       size: "large",
-      type: "infinite-spinner"
-    }, null)])]), ge = ((Se = this.$props.showLoader) != null ? Se : !!this.$props.loader) && Ge.call(this, {
-      h: De,
+      type: "converging-spinner"
+    }, null)])]), j = this.$props.showLoader && Me.call(this, {
+      h: Le,
       template: this.$props.loader,
-      defaultRendering: lt
+      defaultRendering: dt
     });
-    return this.$props.scrollable === "none" ? n(Ae, {
+    return this.$props.scrollable === "none" ? n(We, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable
     }, {
-      default: () => [n(Ve, {
+      default: () => [n(Ke, {
         ref: (a) => {
           this.gridNavRef = a;
         },
         currentData: this.currentData,
         id: this.$props.id,
-        style: ce,
+        style: ge,
         class: this.nonscrollableWrapperClass
       }, {
-        default: () => [ie, se, n("div", {
+        default: () => [se, re, n("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
@@ -1237,36 +1242,36 @@ const Mi = /* @__PURE__ */ ot({
           },
           ref: G(this, "table"),
           role: "none"
-        }, [nt(" "), ue, ne, n("tbody", {
+        }, [Pe(" "), ce, de, n("tbody", {
           class: "k-table-tbody",
           "data-keyboardnavbody": !0
-        }, [K, ge]), de]), U && n(qe, {
+        }, [K, Pe("  "), j]), he]), U && n(Ye, {
           id: z.generateNavigatableId("no-records", R)
         }, {
-          default: () => [M.length ? M : n(je, null, null)]
-        })]), pe, le]
+          default: () => [M.length ? M : n(Xe, null, null)]
+        })]), ue, j, ae]
       })]
-    }) : n(Ae, {
+    }) : n(We, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable
     }, {
-      default: () => [n(Ve, {
+      default: () => [n(Ke, {
         ref: (a) => {
           this.gridNavRef = a;
         },
         currentData: this.currentData,
         id: this.$props.id,
-        style: ce,
+        style: ge,
         class: this.scrollableWrapperClass
       }, {
-        default: () => [ie, se, n("div", {
+        default: () => [se, re, n("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [ne, n("div", {
+        }, [de, n("div", {
           class: "k-grid-container",
           role: "presentation"
         }, [n("div", {
@@ -1281,15 +1286,15 @@ const Mi = /* @__PURE__ */ ot({
           role: "none",
           class: this.gridTableClass,
           ref: G(this, "table")
-        }, [ue, n("tbody", {
+        }, [ce, n("tbody", {
           class: "k-table-tbody",
           role: "rowgroup",
           "data-keyboardnavbody": !0,
           ref: G(this, "tableBody")
-        }, [K])]), U && n(qe, {
+        }, [K])]), U && n(Ye, {
           id: z.generateNavigatableId("no-records", R)
         }, {
-          default: () => [M.length ? M : n(je, null, null)]
+          default: () => [M.length ? M : n(Xe, null, null)]
         })]), !U && n("div", {
           class: "k-height-container",
           role: "presentation"
@@ -1298,11 +1303,11 @@ const Mi = /* @__PURE__ */ ot({
           style: this.$props.scrollable === "virtual" ? {
             height: this._containerHeightRef + "px"
           } : {}
-        }, null)])]), ge]), de, Ze]), pe, le]
+        }, null)])])]), he, st]), ue, j, ae]
       })]
     });
   }
 });
 export {
-  Mi as Grid
+  Ni as Grid
 };