@zeedhi/teknisa-components-vuetify 1.38.0 → 1.39.0

package/dist/tek-components-vuetify.esm.js

@@ -1,6 +1,6 @@
 import { Modal, ModalService, Icons } from '@zeedhi/common';
 import { Prop, Component, Watch } from 'vue-property-decorator';
-import { BreadcrumbHeader, CardTitle, CrudButton, CrudAddButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, TekGrid as TekGrid$1, TekRestDatasource, TekMemoryDatasource, TekGridColumnsButton as TekGridColumnsButton$1, TekGridLayoutOptions as TekGridLayoutOptions$1, TekGridColumn, TekFilterHelper, Image, IterableCarousel, IterableComponentRender, Notifications, ProductCard } from '@zeedhi/teknisa-components-common';
+import { BreadcrumbHeader, CardTitle, CrudButton, CrudAddButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, TekGrid as TekGrid$2, TekRestDatasource, TekMemoryDatasource, TekGridColumn, TekGridColumnsButton as TekGridColumnsButton$1, TekGridLayoutOptions as TekGridLayoutOptions$1, TekFilterHelper, Image, IterableCarousel, IterableComponentRender, Notifications, ProductCard, TekTreeGrid } from '@zeedhi/teknisa-components-common';
 import { ZdComponent, ZdComponentRender, components as components$1, ZdForm, ZdGrid, ZdIterableColumnsButton, ZdIterable } from '@zeedhi/vuetify';
 import { Metadata, Singleton, normalize, I18n, Loader } from '@zeedhi/core';
 import debounce from 'lodash.debounce';
@@ -57,7 +57,7 @@ __decorate([
 TekBreadcrumbHeader = __decorate([
     Component
 ], TekBreadcrumbHeader);
-var script$e = TekBreadcrumbHeader;
+var script$f = TekBreadcrumbHeader;
 
 function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
     if (typeof shadowMode !== 'boolean') {
@@ -188,10 +188,10 @@ function addStyle(id, css) {
 }
 
 /* script */
-const __vue_script__$e = script$e;
+const __vue_script__$f = script$f;
 
 /* template */
-var __vue_render__$e = function () {
+var __vue_render__$f = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -257,34 +257,34 @@ var __vue_render__$e = function () {
     1
   )
 };
-var __vue_staticRenderFns__$e = [];
-__vue_render__$e._withStripped = true;
+var __vue_staticRenderFns__$f = [];
+__vue_render__$f._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$e = function (inject) {
+  const __vue_inject_styles__$f = function (inject) {
     if (!inject) return
     inject("data-v-cb6f4dac_0", { source: ".tek-breadcrumb-header .tek-breadcrumb-header-title-col {\n  display: flex;\n  padding-top: 5px;\n  padding-left: 0;\n}\n.tek-breadcrumb-header .tek-breadcrumb-header-title-col .tek-breadcrumb-header-slot-right {\n  margin-left: auto;\n}\n.tek-breadcrumb-header .zd-breadcrumbs {\n  padding: 0;\n  font-size: var(--zd-font-body2-size);\n}\n.tek-breadcrumb-header .zd-breadcrumbs .v-breadcrumbs__item--disabled {\n  color: #667080;\n}\n.tek-breadcrumb-header .zd-text {\n  color: #667080;\n}\n.tek-breadcrumb-header .zd-text.tek-breadcrumb-header-title {\n  font-size: 32px;\n  font-weight: bold;\n  line-height: 35px;\n  margin-bottom: 10px;\n}\n.tek-breadcrumb-header .zd-text > p {\n  margin: 0;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$e = undefined;
+  const __vue_scope_id__$f = undefined;
   /* module identifier */
-  const __vue_module_identifier__$e = undefined;
+  const __vue_module_identifier__$f = undefined;
   /* functional template */
-  const __vue_is_functional_template__$e = false;
+  const __vue_is_functional_template__$f = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$e = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
-    __vue_inject_styles__$e,
-    __vue_script__$e,
-    __vue_scope_id__$e,
-    __vue_is_functional_template__$e,
-    __vue_module_identifier__$e,
+  const __vue_component__$f = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$f, staticRenderFns: __vue_staticRenderFns__$f },
+    __vue_inject_styles__$f,
+    __vue_script__$f,
+    __vue_scope_id__$f,
+    __vue_is_functional_template__$f,
+    __vue_module_identifier__$f,
     false,
     createInjector,
     undefined,
@@ -327,13 +327,13 @@ __decorate([
 TekCardTitle = __decorate([
     Component
 ], TekCardTitle);
-var script$d = TekCardTitle;
+var script$e = TekCardTitle;
 
 /* script */
-const __vue_script__$d = script$d;
+const __vue_script__$e = script$e;
 
 /* template */
-var __vue_render__$d = function () {
+var __vue_render__$e = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -430,34 +430,34 @@ var __vue_render__$d = function () {
     1
   )
 };
-var __vue_staticRenderFns__$d = [];
-__vue_render__$d._withStripped = true;
+var __vue_staticRenderFns__$e = [];
+__vue_render__$e._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$d = function (inject) {
+  const __vue_inject_styles__$e = function (inject) {
     if (!inject) return
     inject("data-v-520a641c_0", { source: ".tek-card-title-row {\n  display: flex;\n  align-items: center;\n}\n.tek-card-title-row .tek-card-title-text {\n  color: var(--v-primary-base);\n  font-weight: bold;\n  font-size: 20px;\n}\n.tek-card-title-row .tek-card-subtitle-text {\n  padding-left: 10px;\n  color: var(--zd-font-color);\n  font-size: 13px;\n}\n.tek-card-title-row .tek-card-title-text,\n.tek-card-title-row .tek-card-subtitle-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: baseline;\n}\n.tek-card-title-row .v-icon {\n  color: var(--v-primary-base);\n  padding-right: calc(var(--zd-default-padding) / 2);\n}\n.tek-card-title .v-divider {\n  margin-bottom: 16px;\n}\n.tek-card-title .tek-card-title-router {\n  text-decoration: none;\n}\n.tek-card-title .tek-card-title-no-router {\n  text-decoration: none;\n  cursor: default;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$d = undefined;
+  const __vue_scope_id__$e = undefined;
   /* module identifier */
-  const __vue_module_identifier__$d = undefined;
+  const __vue_module_identifier__$e = undefined;
   /* functional template */
-  const __vue_is_functional_template__$d = false;
+  const __vue_is_functional_template__$e = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$d = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
-    __vue_inject_styles__$d,
-    __vue_script__$d,
-    __vue_scope_id__$d,
-    __vue_is_functional_template__$d,
-    __vue_module_identifier__$d,
+  const __vue_component__$e = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
+    __vue_inject_styles__$e,
+    __vue_script__$e,
+    __vue_scope_id__$e,
+    __vue_is_functional_template__$e,
+    __vue_module_identifier__$e,
     false,
     createInjector,
     undefined,
@@ -530,13 +530,13 @@ __decorate([
 TekCrudAddButton = __decorate([
     Component
 ], TekCrudAddButton);
-var script$c = TekCrudAddButton;
+var script$d = TekCrudAddButton;
 
 /* script */
-const __vue_script__$c = script$c;
+const __vue_script__$d = script$d;
 
 /* template */
-var __vue_render__$c = function () {
+var __vue_render__$d = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -601,17 +601,17 @@ var __vue_render__$c = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$c = [];
-__vue_render__$c._withStripped = true;
+var __vue_staticRenderFns__$d = [];
+__vue_render__$d._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$c = undefined;
+  const __vue_inject_styles__$d = undefined;
   /* scoped */
-  const __vue_scope_id__$c = undefined;
+  const __vue_scope_id__$d = undefined;
   /* module identifier */
-  const __vue_module_identifier__$c = undefined;
+  const __vue_module_identifier__$d = undefined;
   /* functional template */
-  const __vue_is_functional_template__$c = false;
+  const __vue_is_functional_template__$d = false;
   /* style inject */
   
   /* style inject SSR */
@@ -620,13 +620,13 @@ __vue_render__$c._withStripped = true;
   
 
   
-  const __vue_component__$c = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
-    __vue_inject_styles__$c,
-    __vue_script__$c,
-    __vue_scope_id__$c,
-    __vue_is_functional_template__$c,
-    __vue_module_identifier__$c,
+  const __vue_component__$d = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
+    __vue_inject_styles__$d,
+    __vue_script__$d,
+    __vue_scope_id__$d,
+    __vue_is_functional_template__$d,
+    __vue_module_identifier__$d,
     false,
     undefined,
     undefined,
@@ -657,13 +657,13 @@ __decorate([
 TekCrudCancelButton = __decorate([
     Component
 ], TekCrudCancelButton);
-var script$b = TekCrudCancelButton;
+var script$c = TekCrudCancelButton;
 
 /* script */
-const __vue_script__$b = script$b;
+const __vue_script__$c = script$c;
 
 /* template */
-var __vue_render__$b = function () {
+var __vue_render__$c = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -728,17 +728,17 @@ var __vue_render__$b = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$b = [];
-__vue_render__$b._withStripped = true;
+var __vue_staticRenderFns__$c = [];
+__vue_render__$c._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$b = undefined;
+  const __vue_inject_styles__$c = undefined;
   /* scoped */
-  const __vue_scope_id__$b = undefined;
+  const __vue_scope_id__$c = undefined;
   /* module identifier */
-  const __vue_module_identifier__$b = undefined;
+  const __vue_module_identifier__$c = undefined;
   /* functional template */
-  const __vue_is_functional_template__$b = false;
+  const __vue_is_functional_template__$c = false;
   /* style inject */
   
   /* style inject SSR */
@@ -747,13 +747,13 @@ __vue_render__$b._withStripped = true;
   
 
   
-  const __vue_component__$b = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
-    __vue_inject_styles__$b,
-    __vue_script__$b,
-    __vue_scope_id__$b,
-    __vue_is_functional_template__$b,
-    __vue_module_identifier__$b,
+  const __vue_component__$c = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
+    __vue_inject_styles__$c,
+    __vue_script__$c,
+    __vue_scope_id__$c,
+    __vue_is_functional_template__$c,
+    __vue_module_identifier__$c,
     false,
     undefined,
     undefined,
@@ -792,13 +792,13 @@ __decorate([
 TekCrudDeleteButton = __decorate([
     Component
 ], TekCrudDeleteButton);
-var script$a = TekCrudDeleteButton;
+var script$b = TekCrudDeleteButton;
 
 /* script */
-const __vue_script__$a = script$a;
+const __vue_script__$b = script$b;
 
 /* template */
-var __vue_render__$a = function () {
+var __vue_render__$b = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -863,17 +863,17 @@ var __vue_render__$a = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$a = [];
-__vue_render__$a._withStripped = true;
+var __vue_staticRenderFns__$b = [];
+__vue_render__$b._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$a = undefined;
+  const __vue_inject_styles__$b = undefined;
   /* scoped */
-  const __vue_scope_id__$a = undefined;
+  const __vue_scope_id__$b = undefined;
   /* module identifier */
-  const __vue_module_identifier__$a = undefined;
+  const __vue_module_identifier__$b = undefined;
   /* functional template */
-  const __vue_is_functional_template__$a = false;
+  const __vue_is_functional_template__$b = false;
   /* style inject */
   
   /* style inject SSR */
@@ -882,13 +882,13 @@ __vue_render__$a._withStripped = true;
   
 
   
-  const __vue_component__$a = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
-    __vue_inject_styles__$a,
-    __vue_script__$a,
-    __vue_scope_id__$a,
-    __vue_is_functional_template__$a,
-    __vue_module_identifier__$a,
+  const __vue_component__$b = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
+    __vue_inject_styles__$b,
+    __vue_script__$b,
+    __vue_scope_id__$b,
+    __vue_is_functional_template__$b,
+    __vue_module_identifier__$b,
     false,
     undefined,
     undefined,
@@ -907,13 +907,13 @@ let TekCrudForm = class TekCrudForm extends ZdForm {
 TekCrudForm = __decorate([
     Component
 ], TekCrudForm);
-var script$9 = TekCrudForm;
+var script$a = TekCrudForm;
 
 /* script */
-const __vue_script__$9 = script$9;
+const __vue_script__$a = script$a;
 
 /* template */
-var __vue_render__$9 = function () {
+var __vue_render__$a = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -987,34 +987,34 @@ var __vue_render__$9 = function () {
     2
   )
 };
-var __vue_staticRenderFns__$9 = [];
-__vue_render__$9._withStripped = true;
+var __vue_staticRenderFns__$a = [];
+__vue_render__$a._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$9 = function (inject) {
+  const __vue_inject_styles__$a = function (inject) {
     if (!inject) return
     inject("data-v-aa2c2e04_0", { source: ".tek-crud-form {\n  outline: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$9 = undefined;
+  const __vue_scope_id__$a = undefined;
   /* module identifier */
-  const __vue_module_identifier__$9 = undefined;
+  const __vue_module_identifier__$a = undefined;
   /* functional template */
-  const __vue_is_functional_template__$9 = false;
+  const __vue_is_functional_template__$a = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$9 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
-    __vue_inject_styles__$9,
-    __vue_script__$9,
-    __vue_scope_id__$9,
-    __vue_is_functional_template__$9,
-    __vue_module_identifier__$9,
+  const __vue_component__$a = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
+    __vue_inject_styles__$a,
+    __vue_script__$a,
+    __vue_scope_id__$a,
+    __vue_is_functional_template__$a,
+    __vue_module_identifier__$a,
     false,
     createInjector,
     undefined,
@@ -1041,13 +1041,13 @@ __decorate([
 TekCrudSaveButton = __decorate([
     Component
 ], TekCrudSaveButton);
-var script$8 = TekCrudSaveButton;
+var script$9 = TekCrudSaveButton;
 
 /* script */
-const __vue_script__$8 = script$8;
+const __vue_script__$9 = script$9;
 
 /* template */
-var __vue_render__$8 = function () {
+var __vue_render__$9 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1112,17 +1112,17 @@ var __vue_render__$8 = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$8 = [];
-__vue_render__$8._withStripped = true;
+var __vue_staticRenderFns__$9 = [];
+__vue_render__$9._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$8 = undefined;
+  const __vue_inject_styles__$9 = undefined;
   /* scoped */
-  const __vue_scope_id__$8 = undefined;
+  const __vue_scope_id__$9 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$8 = undefined;
+  const __vue_module_identifier__$9 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$8 = false;
+  const __vue_is_functional_template__$9 = false;
   /* style inject */
   
   /* style inject SSR */
@@ -1131,13 +1131,13 @@ __vue_render__$8._withStripped = true;
   
 
   
-  const __vue_component__$8 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
-    __vue_inject_styles__$8,
-    __vue_script__$8,
-    __vue_scope_id__$8,
-    __vue_is_functional_template__$8,
-    __vue_module_identifier__$8,
+  const __vue_component__$9 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
+    __vue_inject_styles__$9,
+    __vue_script__$9,
+    __vue_scope_id__$9,
+    __vue_is_functional_template__$9,
+    __vue_module_identifier__$9,
     false,
     undefined,
     undefined,
@@ -1149,10 +1149,10 @@ const ZdGridEditable = components$1.ZdGridEditable;
 /**
  * TekGrid component
  */
-let TekGrid = class TekGrid extends ZdGridEditable {
+let TekGrid$1 = class TekGrid extends ZdGridEditable {
     constructor() {
         super(...arguments);
-        this.instanceType = TekGrid$1;
+        this.instanceType = TekGrid$2;
         this.debouncedDatasourceGet = debounce((instance) => {
             if (instance.events.beforeApplyFilter) {
                 instance.events.beforeApplyFilter({ component: instance });
@@ -1398,7 +1398,7 @@ let TekGrid = class TekGrid extends ZdGridEditable {
             if (!a.fixed && b.fixed)
                 return 1;
             return -1;
-        });
+        }).filter((item) => item instanceof TekGridColumn);
     }
     updateFixedColumns() {
         if (this.instance.columns.filter((column) => column.fixed).length === 0)
@@ -1427,92 +1427,142 @@ let TekGrid = class TekGrid extends ZdGridEditable {
             return 'unset';
         return headerElement[0].style.left;
     }
+    isGroupSelected(item) {
+        return item.children.every((child) => {
+            const { uniqueKey } = this.instance.datasource;
+            const idx = this.instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+            return idx !== -1;
+        });
+    }
+    isGroupSelectIndeterminate(item) {
+        let hasSelected = false;
+        let hasNotSelected = false;
+        const { uniqueKey } = this.instance.datasource;
+        item.children.forEach((child) => {
+            const idx = this.instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+            hasSelected = hasSelected || idx !== -1;
+            hasNotSelected = hasNotSelected || idx === -1;
+        });
+        return hasSelected && hasNotSelected;
+    }
+    selectGroup(item, event) {
+        const { uniqueKey } = this.instance.datasource;
+        const isSelected = this.isGroupSelected(item);
+        if (!isSelected) {
+            item.children.forEach((child) => {
+                const idx = this.instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                if (idx === -1) {
+                    this.instance.selectedRows.push(child);
+                }
+            });
+        }
+        else {
+            this.instance.selectedRows = this.instance.selectedRows.filter((row) => {
+                const idx = item.children.findIndex((child) => child[uniqueKey] === row[uniqueKey]);
+                return idx === -1;
+            });
+        }
+        this.selectGroupRowClick(item, !isSelected, event);
+    }
+    selectGroupRowClick(row, isSelected, event) {
+        this.$nextTick(() => {
+            this.instance.selectGroupClick(row, isSelected, event, this.$el);
+        });
+    }
+    toggleSelectAll() {
+        if (this.instance.selectedRows.length === this.instance.datasource.data.length) {
+            this.instance.selectedRows = [];
+        }
+        else {
+            this.instance.selectedRows = this.instance.datasource.data;
+        }
+    }
 };
 __decorate([
     Prop({ type: [String], default: '' }),
     __metadata("design:type", String)
-], TekGrid.prototype, "title", void 0);
+], TekGrid$1.prototype, "title", void 0);
 __decorate([
     Prop({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
-], TekGrid.prototype, "addButton", void 0);
+], TekGrid$1.prototype, "addButton", void 0);
 __decorate([
     Prop({ type: [String], default: 'none' }),
     __metadata("design:type", String)
-], TekGrid.prototype, "deleteButton", void 0);
+], TekGrid$1.prototype, "deleteButton", void 0);
 __decorate([
     Prop({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
-], TekGrid.prototype, "columnsButton", void 0);
+], TekGrid$1.prototype, "columnsButton", void 0);
 __decorate([
     Prop({ type: [Array, String], default: () => [] }),
     __metadata("design:type", Object)
-], TekGrid.prototype, "columnsButtonIgnore", void 0);
+], TekGrid$1.prototype, "columnsButtonIgnore", void 0);
 __decorate([
     Prop({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
-], TekGrid.prototype, "filterButton", void 0);
+], TekGrid$1.prototype, "filterButton", void 0);
 __decorate([
     Prop({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
-], TekGrid.prototype, "columnFilterButton", void 0);
+], TekGrid$1.prototype, "columnFilterButton", void 0);
 __decorate([
     Prop({ type: [Array], default: () => [] }),
     __metadata("design:type", Array)
-], TekGrid.prototype, "actions", void 0);
+], TekGrid$1.prototype, "actions", void 0);
 __decorate([
     Prop({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
-], TekGrid.prototype, "dragColumns", void 0);
+], TekGrid$1.prototype, "dragColumns", void 0);
 __decorate([
     Prop({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
-], TekGrid.prototype, "resizeColumns", void 0);
+], TekGrid$1.prototype, "resizeColumns", void 0);
 __decorate([
     Prop({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
-], TekGrid.prototype, "showLayoutOptions", void 0);
+], TekGrid$1.prototype, "showLayoutOptions", void 0);
 __decorate([
     Prop({ type: [String, Boolean], default: false }),
     __metadata("design:type", Object)
-], TekGrid.prototype, "showExport", void 0);
+], TekGrid$1.prototype, "showExport", void 0);
 __decorate([
     Prop({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
-], TekGrid.prototype, "showReload", void 0);
+], TekGrid$1.prototype, "showReload", void 0);
 __decorate([
     Prop({ type: [String, Array] }),
     __metadata("design:type", Array)
-], TekGrid.prototype, "exportConfig", void 0);
+], TekGrid$1.prototype, "exportConfig", void 0);
 __decorate([
     Prop({ type: [Array] }),
     __metadata("design:type", Array)
-], TekGrid.prototype, "exportActions", void 0);
+], TekGrid$1.prototype, "exportActions", void 0);
 __decorate([
     Prop({ type: [String, Boolean], default: false }),
     __metadata("design:type", Object)
-], TekGrid.prototype, "groupsOpened", void 0);
+], TekGrid$1.prototype, "groupsOpened", void 0);
 __decorate([
     Prop({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
-], TekGrid.prototype, "showSummaryTotal", void 0);
+], TekGrid$1.prototype, "showSummaryTotal", void 0);
 __decorate([
     Prop({
         type: Array,
         default: () => undefined,
     }),
     __metadata("design:type", Array)
-], TekGrid.prototype, "toolbarSlot", void 0);
-TekGrid = __decorate([
+], TekGrid$1.prototype, "toolbarSlot", void 0);
+TekGrid$1 = __decorate([
     Component
-], TekGrid);
-var script$7 = TekGrid;
+], TekGrid$1);
+var script$8 = TekGrid$1;
 
 /* script */
-const __vue_script__$7 = script$7;
+const __vue_script__$8 = script$8;
 
 /* template */
-var __vue_render__$7 = function () {
+var __vue_render__$8 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1590,7 +1640,6 @@ var __vue_render__$7 = function () {
               key: "header",
               fn: function (ref) {
                 var props = ref.props;
-                var on = ref.on;
                 return [
                   _c("thead", { staticClass: "zd-grid-table-header" }, [
                     _c(
@@ -1625,7 +1674,7 @@ var __vue_render__$7 = function () {
                                   on: {
                                     click: function ($event) {
                                       $event.stopPropagation();
-                                      on["toggle-select-all"](!props.everyItem);
+                                      _vm.toggleSelectAll();
                                       _vm.selectAllClick(
                                         !props.everyItem,
                                         $event
@@ -1655,6 +1704,10 @@ var __vue_render__$7 = function () {
                                       refInFor: true,
                                       class: [
                                         "zd-table-cell",
+                                        "column-th-" +
+                                          column.name +
+                                          "-" +
+                                          _vm.instance.name,
                                         {
                                           sortable:
                                             column.sortable &&
@@ -2296,33 +2349,63 @@ var __vue_render__$7 = function () {
                         },
                         [
                           _vm.instance.selectable
-                            ? _c("td", {
-                                staticClass:
-                                  "zd-table-cell selectable zd-table-fixed-column",
-                              })
-                            : _vm._e(),
-                          _vm._v(" "),
-                          _c(
-                            "td",
-                            {
-                              staticClass:
-                                "zd-table-cell text-left zd-table-group-header zd-table-fixed-column",
-                              style:
-                                "left: " +
-                                (_vm.instance.selectable ? 40 : 0) +
-                                "px",
-                              attrs: { colspan: 999 },
-                            },
-                            [
-                              _c(
-                                "span",
+                            ? _c(
+                                "td",
                                 {
-                                  staticClass: "zd-table-group-container",
-                                  style:
-                                    "left: " +
-                                    (_vm.instance.selectable ? 48 : 8) +
-                                    "px",
-                                },
+                                  staticClass:
+                                    "zd-table-cell selectable zd-table-fixed-column",
+                                },
+                                [
+                                  _c("v-checkbox", {
+                                    staticClass: "zd-grid-row-checkbox",
+                                    attrs: {
+                                      "hide-details": "",
+                                      color: "primary",
+                                      disabled: _vm.instance.editing,
+                                      "on-icon": _vm.$getIcon("checkboxOn"),
+                                      "off-icon": _vm.$getIcon("checkboxOff"),
+                                      "indeterminate-icon": _vm.$getIcon(
+                                        "checkboxIndeterminate"
+                                      ),
+                                      "true-value": true,
+                                      "false-value": false,
+                                      "input-value": _vm.isGroupSelected(item),
+                                      indeterminate:
+                                        _vm.isGroupSelectIndeterminate(item),
+                                    },
+                                    on: {
+                                      click: function ($event) {
+                                        $event.stopPropagation();
+                                        return _vm.selectGroup(item, $event)
+                                      },
+                                    },
+                                  }),
+                                ],
+                                1
+                              )
+                            : _vm._e(),
+                          _vm._v(" "),
+                          _c(
+                            "td",
+                            {
+                              staticClass:
+                                "zd-table-cell text-left zd-table-group-header zd-table-fixed-column",
+                              style:
+                                "left: " +
+                                (_vm.instance.selectable ? 40 : 0) +
+                                "px",
+                              attrs: { colspan: 999 },
+                            },
+                            [
+                              _c(
+                                "span",
+                                {
+                                  staticClass: "zd-table-group-container",
+                                  style:
+                                    "left: " +
+                                    (_vm.instance.selectable ? 48 : 8) +
+                                    "px",
+                                },
                                 [
                                   _vm._l(
                                     item.groupHeaders,
@@ -2962,34 +3045,34 @@ var __vue_render__$7 = function () {
     },
   })
 };
-var __vue_staticRenderFns__$7 = [];
-__vue_render__$7._withStripped = true;
+var __vue_staticRenderFns__$8 = [];
+__vue_render__$8._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$7 = function (inject) {
+  const __vue_inject_styles__$8 = function (inject) {
     if (!inject) return
-    inject("data-v-1f93e5e4_0", { source: ".tek-grid .zd-grid-toolbar {\n  height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n  align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n  margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n  line-height: 22px;\n}\n.tek-grid table thead tr th {\n  padding-right: 15px !important;\n}\n.tek-grid table thead tr th.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 4;\n  background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n  font-weight: 700;\n  font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n  font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n  font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n  transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n  position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n  background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n  width: 22px;\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n  width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 14px;\n  height: 100%;\n  border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n  width: 10px;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n  height: 60%;\n  border-bottom: solid 1px #ccc;\n  position: relative;\n  top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  background: white;\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
+    inject("data-v-7c368a9c_0", { source: ".tek-grid .zd-grid-toolbar {\n  height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n  align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n  margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n  line-height: 22px;\n}\n.tek-grid table thead tr th {\n  padding-right: 15px !important;\n}\n.tek-grid table thead tr th.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 4;\n  background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n  font-weight: 700;\n  font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n  font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n  font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n  transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n  position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n  background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n  width: 22px;\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n  width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 14px;\n  height: 100%;\n  border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n  width: 10px;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n  height: 60%;\n  border-bottom: solid 1px #ccc;\n  position: relative;\n  top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  background: white;\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$7 = undefined;
+  const __vue_scope_id__$8 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$7 = undefined;
+  const __vue_module_identifier__$8 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$7 = false;
+  const __vue_is_functional_template__$8 = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$7 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
-    __vue_inject_styles__$7,
-    __vue_script__$7,
-    __vue_scope_id__$7,
-    __vue_is_functional_template__$7,
-    __vue_module_identifier__$7,
+  const __vue_component__$8 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
+    __vue_inject_styles__$8,
+    __vue_script__$8,
+    __vue_scope_id__$8,
+    __vue_is_functional_template__$8,
+    __vue_module_identifier__$8,
     false,
     createInjector,
     undefined,
@@ -3006,6 +3089,7 @@ let TekGridColumnsOptionsController = class TekGridColumnsOptionsController {
         this.aggregationData = [];
         this.selectedColumnNames = [];
         this.searchValue = '';
+        this.showGroups = true;
         this.updatingSelect = false;
         this.modal = modal;
     }
@@ -3035,6 +3119,7 @@ let TekGridColumnsOptionsController = class TekGridColumnsOptionsController {
     set instance(instance) {
         this.instanceValue = instance;
         this.iterableComponent = instance.iterableComponent;
+        this.showGroups = instance.iterableComponent instanceof TekGrid$2;
         this.aggregationData = instance.getAggregationSelectData();
         this.columnData = {};
         this.iterableComponent.columns.forEach((column) => {
@@ -3623,6 +3708,7 @@ TekGridColumnsOptionsModal.modalDef = {
         {
             name: 'tekGridColumnsOptionsGroupedRow',
             component: 'ZdRow',
+            isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
             children: [
                 {
                     name: 'tekGridColumnsOptionsGroupedCol',
@@ -3825,6 +3911,7 @@ TekGridColumnsOptionsModal.modalDef = {
                                 {
                                     name: 'tekGridColumnsOptionsColumnAggregation',
                                     component: 'ZdSelect',
+                                    isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
                                     autocomplete: false,
                                     label: 'TEKGRID_COLUMN_AGGREGATION',
                                     showHelper: false,
@@ -3846,6 +3933,7 @@ TekGridColumnsOptionsModal.modalDef = {
                                 {
                                     name: 'tekGridColumnsOptionsColumnGroupOpened',
                                     component: 'ZdCheckbox',
+                                    isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
                                     cssClass: 'zd-form-input-align',
                                     disabled: `{{${TekGridColumnsOptionsModal.controllerName}.notGroupInSelection}}`,
                                     label: 'TEKGRID_COLUMN_GROUP_OPENED',
@@ -3940,6 +4028,10 @@ let TekGridColumnsButton = class TekGridColumnsButton extends ZdIterableColumnsB
         this.menuIsOpened = false;
     }
 };
+__decorate([
+    Prop({ type: [Boolean, String], default: false }),
+    __metadata("design:type", Object)
+], TekGridColumnsButton.prototype, "hideGroups", void 0);
 __decorate([
     Watch('menuIsOpened'),
     __metadata("design:type", Function),
@@ -3949,13 +4041,13 @@ __decorate([
 TekGridColumnsButton = __decorate([
     Component
 ], TekGridColumnsButton);
-var script$6 = TekGridColumnsButton;
+var script$7 = TekGridColumnsButton;
 
 /* script */
-const __vue_script__$6 = script$6;
+const __vue_script__$7 = script$7;
 
 /* template */
-var __vue_render__$6 = function () {
+var __vue_render__$7 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -4039,11 +4131,15 @@ var __vue_render__$6 = function () {
                 _vm._v(" "),
                 _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_VISIBLE")))]),
                 _vm._v(" "),
-                _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_GROUPED")))]),
+                !_vm.instance.hideGroups
+                  ? _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_GROUPED")))])
+                  : _vm._e(),
                 _vm._v(" "),
-                _c("th", [
-                  _vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_AGGREGATION"))),
-                ]),
+                !_vm.instance.hideGroups
+                  ? _c("th", [
+                      _vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_AGGREGATION"))),
+                    ])
+                  : _vm._e(),
               ]),
             ]),
             _vm._v(" "),
@@ -4090,77 +4186,81 @@ var __vue_render__$6 = function () {
                       1
                     ),
                     _vm._v(" "),
-                    _c(
-                      "td",
-                      [
-                        column.type !== "action"
-                          ? _c("zd-checkbox", {
-                              attrs: {
-                                name:
-                                  _vm.instance.name +
-                                  "_column_grouped_" +
-                                  column.name,
-                                value: column.grouped,
-                                events: {
-                                  change:
-                                    _vm.instance.controller.changeGroupedColumn.bind(
-                                      _vm.instance.controller,
-                                      column
-                                    ),
-                                },
-                              },
-                            })
-                          : _vm._e(),
-                      ],
-                      1
-                    ),
-                    _vm._v(" "),
-                    _c(
-                      "td",
-                      {
-                        staticClass:
-                          "tek-grid-columns-button-column-aggregation",
-                      },
-                      [
-                        column.type !== "action"
-                          ? _c(
-                              "zd-select",
-                              _vm._b(
-                                {
+                    !_vm.instance.hideGroups
+                      ? _c(
+                          "td",
+                          [
+                            column.type !== "action"
+                              ? _c("zd-checkbox", {
                                   attrs: {
                                     name:
                                       _vm.instance.name +
-                                      "_column_aggregation_" +
+                                      "_column_grouped_" +
                                       column.name,
+                                    value: column.grouped,
+                                    events: {
+                                      change:
+                                        _vm.instance.controller.changeGroupedColumn.bind(
+                                          _vm.instance.controller,
+                                          column
+                                        ),
+                                    },
                                   },
-                                },
-                                "zd-select",
-                                {
-                                  value: column.aggregation,
-                                  disabled: column.grouped,
-                                  events: {
-                                    change:
-                                      _vm.instance.controller.changeAggregationColumn.bind(
-                                        _vm.instance.controller,
-                                        column
-                                      ),
-                                  },
-                                  dataText: "text",
-                                  dataValue: "value",
-                                  autocomplete: false,
-                                  showHelper: false,
-                                  showLabel: false,
-                                  datasource: {
-                                    data: _vm.instance.getAggregationSelectData(),
-                                  },
-                                },
-                                false
-                              )
-                            )
-                          : _vm._e(),
-                      ],
-                      1
-                    ),
+                                })
+                              : _vm._e(),
+                          ],
+                          1
+                        )
+                      : _vm._e(),
+                    _vm._v(" "),
+                    !_vm.instance.hideGroups
+                      ? _c(
+                          "td",
+                          {
+                            staticClass:
+                              "tek-grid-columns-button-column-aggregation",
+                          },
+                          [
+                            column.type !== "action"
+                              ? _c(
+                                  "zd-select",
+                                  _vm._b(
+                                    {
+                                      attrs: {
+                                        name:
+                                          _vm.instance.name +
+                                          "_column_aggregation_" +
+                                          column.name,
+                                      },
+                                    },
+                                    "zd-select",
+                                    {
+                                      value: column.aggregation,
+                                      disabled: column.grouped,
+                                      events: {
+                                        change:
+                                          _vm.instance.controller.changeAggregationColumn.bind(
+                                            _vm.instance.controller,
+                                            column
+                                          ),
+                                      },
+                                      dataText: "text",
+                                      dataValue: "value",
+                                      autocomplete: false,
+                                      showHelper: false,
+                                      showLabel: false,
+                                      datasource: {
+                                        data: _vm.instance.getAggregationSelectData(),
+                                      },
+                                    },
+                                    false
+                                  )
+                                )
+                              : _vm._e(),
+                          ],
+                          1
+                        )
+                      : _vm._e(),
                   ]
                 )
               }),
@@ -4208,34 +4308,34 @@ var __vue_render__$6 = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$6 = [];
-__vue_render__$6._withStripped = true;
+var __vue_staticRenderFns__$7 = [];
+__vue_render__$7._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$6 = function (inject) {
+  const __vue_inject_styles__$7 = function (inject) {
     if (!inject) return
-    inject("data-v-0b148da7_0", { source: ".tek-grid-columns-button-options {\n  max-height: 250px;\n  display: flex;\n  flex-direction: column;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper {\n  flex: 1;\n  overflow-y: auto;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table {\n  padding: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);\n  background-color: white;\n  font-size: 13px;\n  border-spacing: 0;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table thead tr th {\n  padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n  text-align: left;\n  background: white;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td {\n  padding: var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name {\n  cursor: -webkit-grab;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name > span {\n  padding-right: 4px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-aggregation {\n  max-width: 150px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer {\n  display: flex;\n  background: white;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer .zd-button {\n  flex: 1;\n}\n.tek-grid-columns-button-sortable-drag {\n  background: white;\n}\n.tek-grid-column-option-box {\n  margin: var(--spacing-1);\n  background: #ccc;\n  padding: 2px var(--spacing-1);\n  cursor: pointer;\n}\n.tek-grid-column-option-box > * {\n  display: inline-block;\n}\n.tek-grid-column-option-box > .zd-icon {\n  font-size: 0.9rem;\n  margin-left: var(--spacing-2);\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true {\n  cursor: default;\n  background: #fafafa;\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true > .zd-icon {\n  display: none;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true {\n  background: var(--v-primary-base);\n  color: white;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true > .zd-icon {\n  color: white;\n}\n.tek-grid-column-option-container-col {\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container {\n  background: #eee;\n  padding: var(--spacing-1);\n  max-height: 100px;\n  min-height: 42px;\n  align-content: center;\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .tek-iterable-footer {\n  display: none !important;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .zd-text.no-data {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-size: 0.7rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-label {\n  font-weight: var(--zd-font-body2-weight);\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-select-all {\n  position: absolute;\n  top: 0.5rem;\n  right: var(--spacing-1);\n  color: var(--v-primary-base);\n  cursor: pointer;\n  font-size: 0.8rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-drop-here {\n  position: absolute;\n  z-index: 100;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 35px;\n}\n.tek-grid-column-option-detail-name {\n  color: var(--v-primary-base);\n  font-weight: var(--zd-font-body2-weight);\n  font-size: 1.1rem;\n  margin-top: var(--spacing-6);\n}", map: undefined, media: undefined });
+    inject("data-v-6c9f5d6a_0", { source: ".tek-grid-columns-button-options {\n  max-height: 250px;\n  display: flex;\n  flex-direction: column;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper {\n  flex: 1;\n  overflow-y: auto;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table {\n  padding: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);\n  background-color: white;\n  font-size: 13px;\n  border-spacing: 0;\n  width: 100%;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table thead tr th {\n  padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n  text-align: left;\n  background: white;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td {\n  padding: var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name {\n  cursor: -webkit-grab;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name > span {\n  padding-right: 4px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-aggregation {\n  max-width: 150px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer {\n  display: flex;\n  background: white;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer .zd-button {\n  flex: 1;\n}\n.tek-grid-columns-button-sortable-drag {\n  background: white;\n}\n.tek-grid-column-option-box {\n  margin: var(--spacing-1);\n  background: #ccc;\n  padding: 2px var(--spacing-1);\n  cursor: pointer;\n}\n.tek-grid-column-option-box > * {\n  display: inline-block;\n}\n.tek-grid-column-option-box > .zd-icon {\n  font-size: 0.9rem;\n  margin-left: var(--spacing-2);\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true {\n  cursor: default;\n  background: #fafafa;\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true > .zd-icon {\n  display: none;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true {\n  background: var(--v-primary-base);\n  color: white;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true > .zd-icon {\n  color: white;\n}\n.tek-grid-column-option-container-col {\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container {\n  background: #eee;\n  padding: var(--spacing-1);\n  max-height: 100px;\n  min-height: 42px;\n  align-content: center;\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .tek-iterable-footer {\n  display: none !important;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .zd-text.no-data {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-size: 0.7rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-label {\n  font-weight: var(--zd-font-body2-weight);\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-select-all {\n  position: absolute;\n  top: 0.5rem;\n  right: var(--spacing-1);\n  color: var(--v-primary-base);\n  cursor: pointer;\n  font-size: 0.8rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-drop-here {\n  position: absolute;\n  z-index: 100;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 35px;\n}\n.tek-grid-column-option-detail-name {\n  color: var(--v-primary-base);\n  font-weight: var(--zd-font-body2-weight);\n  font-size: 1.1rem;\n  margin-top: var(--spacing-6);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$6 = undefined;
+  const __vue_scope_id__$7 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$6 = undefined;
+  const __vue_module_identifier__$7 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$6 = false;
+  const __vue_is_functional_template__$7 = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$6 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
-    __vue_inject_styles__$6,
-    __vue_script__$6,
-    __vue_scope_id__$6,
-    __vue_is_functional_template__$6,
-    __vue_module_identifier__$6,
+  const __vue_component__$7 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
+    __vue_inject_styles__$7,
+    __vue_script__$7,
+    __vue_scope_id__$7,
+    __vue_is_functional_template__$7,
+    __vue_module_identifier__$7,
     false,
     createInjector,
     undefined,
@@ -4430,13 +4530,13 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
 TekGridLayoutOptions = __decorate([
     Component
 ], TekGridLayoutOptions);
-var script$5 = TekGridLayoutOptions;
+var script$6 = TekGridLayoutOptions;
 
 /* script */
-const __vue_script__$5 = script$5;
+const __vue_script__$6 = script$6;
 
 /* template */
-var __vue_render__$5 = function () {
+var __vue_render__$6 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -4675,34 +4775,34 @@ var __vue_render__$5 = function () {
     1
   )
 };
-var __vue_staticRenderFns__$5 = [];
-__vue_render__$5._withStripped = true;
+var __vue_staticRenderFns__$6 = [];
+__vue_render__$6._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$5 = function (inject) {
+  const __vue_inject_styles__$6 = function (inject) {
     if (!inject) return
     inject("data-v-29ce02fa_0", { source: ".tek-grid-layout-options-badge .v-badge__badge {\n  font-size: var(--zd-font-caption-size);\n  font-weight: var(--zd-font-caption-weight);\n  line-height: 14px;\n  pointer-events: none;\n  background-color: var(--zd-badge-background-color) !important;\n}\n.tek-grid-layout-options-badge .v-badge__badge span {\n  color: var(--zd-badge-text-color) !important;\n}\n.tek-grid-layout-item {\n  font-size: 13px;\n  cursor: pointer;\n  min-height: 30px;\n}\n.tek-grid-layout-item.selected {\n  font-weight: 700;\n}\n.tek-grid-layout-item:hover {\n  background: #eee;\n}\n.tek-grid-layout-item:hover .tek-grid-layout-item-buttons {\n  display: inherit;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons {\n  display: none;\n  position: absolute;\n  right: 5px;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons .v-icon {\n  font-size: 12px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$5 = undefined;
+  const __vue_scope_id__$6 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$5 = undefined;
+  const __vue_module_identifier__$6 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$5 = false;
+  const __vue_is_functional_template__$6 = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$5 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
-    __vue_inject_styles__$5,
-    __vue_script__$5,
-    __vue_scope_id__$5,
-    __vue_is_functional_template__$5,
-    __vue_module_identifier__$5,
+  const __vue_component__$6 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
+    __vue_inject_styles__$6,
+    __vue_script__$6,
+    __vue_scope_id__$6,
+    __vue_is_functional_template__$6,
+    __vue_module_identifier__$6,
     false,
     createInjector,
     undefined,
@@ -4729,13 +4829,13 @@ __decorate([
 TekImage = __decorate([
     Component
 ], TekImage);
-var script$4 = TekImage;
+var script$5 = TekImage;
 
 /* script */
-const __vue_script__$4 = script$4;
+const __vue_script__$5 = script$5;
 
 /* template */
-var __vue_render__$4 = function () {
+var __vue_render__$5 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -4746,17 +4846,17 @@ var __vue_render__$4 = function () {
     1
   )
 };
-var __vue_staticRenderFns__$4 = [];
-__vue_render__$4._withStripped = true;
+var __vue_staticRenderFns__$5 = [];
+__vue_render__$5._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$4 = undefined;
+  const __vue_inject_styles__$5 = undefined;
   /* scoped */
-  const __vue_scope_id__$4 = undefined;
+  const __vue_scope_id__$5 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$4 = undefined;
+  const __vue_module_identifier__$5 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$4 = false;
+  const __vue_is_functional_template__$5 = false;
   /* style inject */
   
   /* style inject SSR */
@@ -4765,13 +4865,13 @@ __vue_render__$4._withStripped = true;
   
 
   
-  const __vue_component__$4 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
-    __vue_inject_styles__$4,
-    __vue_script__$4,
-    __vue_scope_id__$4,
-    __vue_is_functional_template__$4,
-    __vue_module_identifier__$4,
+  const __vue_component__$5 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
+    __vue_inject_styles__$5,
+    __vue_script__$5,
+    __vue_scope_id__$5,
+    __vue_is_functional_template__$5,
+    __vue_module_identifier__$5,
     false,
     undefined,
     undefined,
@@ -4796,13 +4896,13 @@ __decorate([
 TekIterableCarousel = __decorate([
     Component
 ], TekIterableCarousel);
-var script$3 = TekIterableCarousel;
+var script$4 = TekIterableCarousel;
 
 /* script */
-const __vue_script__$3 = script$3;
+const __vue_script__$4 = script$4;
 
 /* template */
-var __vue_render__$3 = function () {
+var __vue_render__$4 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -4876,17 +4976,17 @@ var __vue_render__$3 = function () {
     1
   )
 };
-var __vue_staticRenderFns__$3 = [];
-__vue_render__$3._withStripped = true;
+var __vue_staticRenderFns__$4 = [];
+__vue_render__$4._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$3 = undefined;
+  const __vue_inject_styles__$4 = undefined;
   /* scoped */
-  const __vue_scope_id__$3 = undefined;
+  const __vue_scope_id__$4 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$3 = undefined;
+  const __vue_module_identifier__$4 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$3 = false;
+  const __vue_is_functional_template__$4 = false;
   /* style inject */
   
   /* style inject SSR */
@@ -4895,13 +4995,13 @@ __vue_render__$3._withStripped = true;
   
 
   
-  const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
-    __vue_inject_styles__$3,
-    __vue_script__$3,
-    __vue_scope_id__$3,
-    __vue_is_functional_template__$3,
-    __vue_module_identifier__$3,
+  const __vue_component__$4 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
+    __vue_inject_styles__$4,
+    __vue_script__$4,
+    __vue_scope_id__$4,
+    __vue_is_functional_template__$4,
+    __vue_module_identifier__$4,
     false,
     undefined,
     undefined,
@@ -4968,13 +5068,13 @@ __decorate([
 TekIterableComponentRender = __decorate([
     Component
 ], TekIterableComponentRender);
-var script$2 = TekIterableComponentRender;
+var script$3 = TekIterableComponentRender;
 
 /* script */
-const __vue_script__$2 = script$2;
+const __vue_script__$3 = script$3;
 
 /* template */
-var __vue_render__$2 = function () {
+var __vue_render__$3 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -5150,34 +5250,34 @@ var __vue_render__$2 = function () {
       )
     : _vm._e()
 };
-var __vue_staticRenderFns__$2 = [];
-__vue_render__$2._withStripped = true;
+var __vue_staticRenderFns__$3 = [];
+__vue_render__$3._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$2 = function (inject) {
+  const __vue_inject_styles__$3 = function (inject) {
     if (!inject) return
     inject("data-v-02c0169b_0", { source: ".tek-iterable-component-render[data-v-02c0169b] {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-box-flex: 1;\n  flex: 1 1 auto;\n}\n.tek-iterable-component-render .error--text[data-v-02c0169b],\n.tek-iterable-component-render .no--data[data-v-02c0169b] {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n}\n.tek-iterable-component-render .no--data[data-v-02c0169b] {\n  color: rgba(0, 0, 0, 0.38);\n}\n.tek-iterable-component-render .tek-iterable-toolbar[data-v-02c0169b] {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  align-items: center;\n  width: 100%;\n}\n.tek-iterable-component-render .tek-iterable-footer[data-v-02c0169b] {\n  padding: 5px 0;\n  display: flex;\n  width: 100%;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$2 = "data-v-02c0169b";
+  const __vue_scope_id__$3 = "data-v-02c0169b";
   /* module identifier */
-  const __vue_module_identifier__$2 = undefined;
+  const __vue_module_identifier__$3 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$2 = false;
+  const __vue_is_functional_template__$3 = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
-    __vue_inject_styles__$2,
-    __vue_script__$2,
-    __vue_scope_id__$2,
-    __vue_is_functional_template__$2,
-    __vue_module_identifier__$2,
+  const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
+    __vue_inject_styles__$3,
+    __vue_script__$3,
+    __vue_scope_id__$3,
+    __vue_is_functional_template__$3,
+    __vue_module_identifier__$3,
     false,
     createInjector,
     undefined,
@@ -5206,13 +5306,13 @@ __decorate([
 TekNotifications = __decorate([
     Component
 ], TekNotifications);
-var script$1 = TekNotifications;
+var script$2 = TekNotifications;
 
 /* script */
-const __vue_script__$1 = script$1;
+const __vue_script__$2 = script$2;
 
 /* template */
-var __vue_render__$1 = function () {
+var __vue_render__$2 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -5289,34 +5389,34 @@ var __vue_render__$1 = function () {
     1
   )
 };
-var __vue_staticRenderFns__$1 = [];
-__vue_render__$1._withStripped = true;
+var __vue_staticRenderFns__$2 = [];
+__vue_render__$2._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$1 = function (inject) {
+  const __vue_inject_styles__$2 = function (inject) {
     if (!inject) return
     inject("data-v-552c53cd_0", { source: ".tek-notifications .tek-card-title .mark-read-text {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  display: inline-block;\n}\n.tek-notifications .tek-card-title .mark-read-text p {\n  margin-bottom: 0px;\n}\n.tek-notifications .tek-card-title hr.v-divider {\n  margin-bottom: 0px;\n}\n.tek-notifications ul.tek-notifications-list {\n  list-style: none;\n  padding: 0;\n}\n.tek-notifications ul.tek-notifications-list li {\n  border-bottom: solid 1px rgba(0, 0, 0, 0.12);\n  color: #667080;\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  line-height: 14px;\n  padding: 10px 20px 10px 0;\n  position: relative;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-subject {\n  font-weight: 700;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-read-mark {\n  width: 10px;\n  height: 10px;\n  background-color: var(--v-primary-base);\n  border-radius: 50%;\n  position: absolute;\n  right: 2px;\n  top: 12px;\n}\n.tek-notifications ul.tek-notifications-list li:last-child {\n  border-bottom: none;\n}\n.tek-notifications .tek-notification-show-all {\n  text-decoration: none;\n  text-align: center;\n  padding-top: 10px;\n  font-weight: 700;\n  display: block;\n  border-top: solid 1px rgba(0, 0, 0, 0.12);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$1 = undefined;
+  const __vue_scope_id__$2 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$1 = undefined;
+  const __vue_module_identifier__$2 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$1 = false;
+  const __vue_is_functional_template__$2 = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
-    __vue_inject_styles__$1,
-    __vue_script__$1,
-    __vue_scope_id__$1,
-    __vue_is_functional_template__$1,
-    __vue_module_identifier__$1,
+  const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
+    __vue_inject_styles__$2,
+    __vue_script__$2,
+    __vue_scope_id__$2,
+    __vue_is_functional_template__$2,
+    __vue_module_identifier__$2,
     false,
     createInjector,
     undefined,
@@ -5382,13 +5482,13 @@ __decorate([
 TekProductCard = __decorate([
     Component
 ], TekProductCard);
-var script = TekProductCard;
+var script$1 = TekProductCard;
 
 /* script */
-const __vue_script__ = script;
+const __vue_script__$1 = script$1;
 
 /* template */
-var __vue_render__ = function () {
+var __vue_render__$1 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -5508,14 +5608,1686 @@ var __vue_render__ = function () {
       )
     : _vm._e()
 };
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+var __vue_staticRenderFns__$1 = [];
+__vue_render__$1._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = function (inject) {
+  const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
     inject("data-v-541eabd6_0", { source: ".tek-product-card * {\n  text-decoration: none;\n}\n.tek-product-card .v-card {\n  padding: 0%;\n}\n.tek-product-card .v-card .tek-image-content {\n  text-align: center;\n}\n.tek-product-card .v-card .tek-product-card-image-container {\n  position: relative;\n}\n.tek-product-card .v-card .tek-product-card-info {\n  display: flex;\n  flex-direction: column;\n  padding: 5px 10px 10px 10px;\n  color: var(--zd-font-color);\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-title {\n  white-space: nowrap;\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 16px;\n  line-height: 19px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-supplier {\n  font-size: var(--zd-font-body2-size);\n  line-height: 14px;\n  color: #c4c4c4;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 10px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-brand {\n  font-size: var(--zd-font-body2-size);\n  line-height: 14px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-price {\n  font-weight: var(--zd-font-body4-weight);\n  font-size: var(--zd-font-body4-size);\n  line-height: 16px;\n}\n.tek-product-card--link .v-card {\n  cursor: pointer;\n}", map: undefined, media: undefined });
 
+  };
+  /* scoped */
+  const __vue_scope_id__$1 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$1 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$1 = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+    __vue_inject_styles__$1,
+    __vue_script__$1,
+    __vue_scope_id__$1,
+    __vue_is_functional_template__$1,
+    __vue_module_identifier__$1,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
+// eslint-disable-next-line prefer-destructuring
+const ZdTreeGridEditable = components$1.ZdTreeGridEditable;
+/**
+ * TekGrid component
+ */
+let TekGrid = class TekGrid extends ZdTreeGridEditable {
+    constructor() {
+        super(...arguments);
+        this.instanceType = TekTreeGrid;
+        this.debouncedDatasourceGet = debounce((instance) => {
+            if (instance.events.beforeApplyFilter) {
+                instance.events.beforeApplyFilter({ component: instance });
+            }
+            const { datasource } = instance;
+            if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+                datasource.updateDynamicFilter();
+            }
+            else {
+                datasource.get();
+            }
+        }, 500);
+        this.operationList = '';
+        this.defaultOperation = '';
+        this.defaultRelation = '';
+        this.lastFilter = '';
+        this.tableHeader = null;
+        this.tableBody = null;
+    }
+    mounted() {
+        this.originalChangeLayout = this.instance.changeLayout;
+        this.instance.changeLayout = this.onChangeLayout;
+        this.updateFixedColumns();
+    }
+    minimumColumnWidth(column) {
+        let minWidth = column && column.sortable ? 50 : 34;
+        if (this.instance.columnFilterButton && column && column.filterable) {
+            minWidth += 15;
+        }
+        return minWidth;
+    }
+    onChangeLayout(event, element) {
+        if (this.originalChangeLayout) {
+            this.originalChangeLayout.call(this.instance, event, element);
+        }
+        if (this.instance.showLayoutOptions) {
+            try {
+                const layoutOptions = Metadata.getInstance(`${this.instance.name}_layout_options`);
+                layoutOptions.layoutEdited = true;
+            }
+            catch (_a) {
+                // do nothing
+            }
+        }
+        this.updateFixedColumns();
+    }
+    getFilterActivatorEvents(on, column) {
+        const events = {};
+        Object.keys(on).forEach((eventName) => {
+            events[eventName] = (event) => {
+                this.defaultOperation = 'CONTAINS';
+                this.defaultRelation = 'AND';
+                this.operationList = this.getColumnFilterOptions(column).map((item) => item.operation).join(';');
+                on[eventName](event);
+            };
+        });
+        return events;
+    }
+    getFilterItemChange(prop, column, index) {
+        return this.filterItemChange.bind(this, prop, column, index);
+    }
+    getFilterValueChange(column, index) {
+        return this.filterValueChange.bind(this, column, index);
+    }
+    getComponentType(index) {
+        this.operationList.split(';');
+        const operationListArray = this.operationList.split(';');
+        return ['IN', 'NOT_IN', 'BETWEEN'].includes(operationListArray[index]) ? 'ZdTextInput' : '';
+    }
+    getComponentHint(index) {
+        const operationListArray = this.operationList.split(';');
+        return ['IN', 'NOT_IN', 'BETWEEN'].includes(operationListArray[index]) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
+    }
+    filterItemChange(prop, column, index, { component, event, element }) {
+        const { name } = component;
+        const valueInputName = name.replace(`-filter-${prop}-`, '-filter-value-');
+        const valueInput = Metadata.getInstance(valueInputName);
+        const operationListArray = this.operationList.split(';');
+        if (prop === 'operation' && operationListArray[index] !== component.value) {
+            operationListArray[index] = component.value;
+            this.operationList = operationListArray.join(';');
+        }
+        try {
+            valueInput.setFocus();
+        }
+        catch (_a) {
+            // do nothing
+        }
+        const { datasource } = this.instance;
+        if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+            if (datasource.dynamicFilter[column.name] && datasource.dynamicFilter[column.name][index]) {
+                this.lastFilter = JSON.stringify(datasource.dynamicFilter);
+                datasource.dynamicFilter[column.name][index][prop] = component.value;
+                if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
+                    this.debouncedDatasourceGet(this.instance);
+                    this.onChangeLayout(event, element);
+                }
+            }
+        }
+    }
+    filterValueChange(column, index, { component, event, element }) {
+        const { value } = component;
+        const { datasource } = this.instance;
+        if (!(element === null || element === void 0 ? void 0 : element.offsetParent))
+            return;
+        if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+            this.lastFilter = JSON.stringify(datasource.dynamicFilter);
+            if (value) {
+                if (!datasource.dynamicFilter[column.name]) {
+                    datasource.dynamicFilter[column.name] = [];
+                }
+                if (!datasource.dynamicFilter[column.name][index]) {
+                    const { name } = component;
+                    let relation;
+                    if (index > 0) {
+                        const relationSelectName = name.replace('-filter-value-', '-filter-relation-');
+                        const relationSelect = Metadata.getInstance(relationSelectName);
+                        relation = relationSelect.value;
+                    }
+                    else {
+                        relation = 'AND';
+                    }
+                    const operationSelectName = name.replace('-filter-value-', '-filter-operation-');
+                    const operationSelect = Metadata.getInstance(operationSelectName);
+                    const operation = operationSelect.value;
+                    datasource.dynamicFilter[column.name].push({
+                        relation,
+                        operation,
+                        value,
+                    });
+                }
+                else {
+                    datasource.dynamicFilter[column.name][index].value = value;
+                }
+            }
+            else if (datasource.dynamicFilter[column.name] && datasource.dynamicFilter[column.name][index]) {
+                this.defaultOperation = datasource.dynamicFilter[column.name][index].operation;
+                this.defaultRelation = datasource.dynamicFilter[column.name][index].relation;
+                datasource.dynamicFilter[column.name].splice(index, 1);
+                if (datasource.dynamicFilter[column.name].length === 1) {
+                    datasource.dynamicFilter[column.name][0].relation = 'AND';
+                }
+                if (!datasource.dynamicFilter[column.name].length) {
+                    delete datasource.dynamicFilter[column.name];
+                }
+            }
+            if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
+                this.debouncedDatasourceGet(this.instance);
+                this.onChangeLayout(event, element);
+                this.clearHelperValues(column);
+            }
+        }
+        else {
+            this.lastFilter = JSON.stringify(this.instance.datasource.filter);
+            if (value) {
+                this.instance.datasource.addFilter(column.name, value);
+            }
+            else {
+                this.instance.datasource.removeFilter(column.name);
+            }
+            if (this.lastFilter !== JSON.stringify(this.instance.datasource.filter)) {
+                this.debouncedDatasourceGet(this.instance);
+                this.onChangeLayout(event, element);
+                this.clearHelperValues(column);
+            }
+        }
+    }
+    clearHelperValues(column) {
+        if (!Array.isArray(column.filterProps)) {
+            column.filterProps.helperValue = '';
+        }
+        else {
+            column.filterProps.forEach((prop) => {
+                prop.helperValue = '';
+            });
+        }
+    }
+    getColumnFilterOptions(column) {
+        const filterOptions = [];
+        const { datasource } = this.instance;
+        if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+            const dynamicFilter = datasource.dynamicFilter[column.name];
+            if (dynamicFilter && dynamicFilter.length > 0) {
+                dynamicFilter.forEach((item) => {
+                    filterOptions.push(item);
+                });
+            }
+            filterOptions.push({
+                operation: this.defaultOperation,
+                relation: this.defaultRelation,
+                value: '',
+            });
+        }
+        else {
+            const option = {
+                operation: undefined,
+                relation: undefined,
+                value: this.instance.datasource.filter[column.name] || '',
+            };
+            filterOptions.push(option);
+        }
+        return filterOptions;
+    }
+    isCurrentRow(row) {
+        const { uniqueKey, currentRow } = this.instance.datasource;
+        return !!((row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey]));
+    }
+    getVisibleData() {
+        this.scrollData.visibleData = this.instance.datasource.data;
+        return this.scrollData.visibleData;
+    }
+    getData() {
+        if (!this.instance.virtualScroll || !this.scrollData.initialized) {
+            return this.instance.treeDataStructure.searchHasNoData ? [] : this.instance.treeDataStructure.treeData;
+        }
+        return this.renderedData;
+    }
+    rowClick(row, event) {
+        this.instance.rowClick(row, event, this.$el);
+    }
+    orderHeaders(headers) {
+        return headers.sort((a, b) => {
+            if (a.fixed === b.fixed)
+                return 0;
+            if (!a.fixed && b.fixed)
+                return 1;
+            return -1;
+        }).filter((item) => item instanceof TekGridColumn);
+    }
+    updateFixedColumns() {
+        if (this.instance.columns.filter((column) => column.fixed).length === 0)
+            return;
+        if (!this.tableHeader) {
+            this.tableHeader = this.$el.querySelector('table thead tr');
+            this.tableBody = this.$el.querySelector('table tbody');
+            if (!this.tableHeader || !this.tableBody)
+                return;
+        }
+        const headerColumns = Array.from(this.tableHeader.querySelectorAll('th'));
+        let left = this.instance.selectable ? 40 : 0;
+        headerColumns.forEach((column) => {
+            const name = column.getAttribute('column-name');
+            if (name && column.classList.contains('zd-table-fixed-column')) {
+                column.style.left = `${left}px`;
+                left += column.clientWidth;
+            }
+        });
+    }
+    getFixedLeft(column) {
+        if (!column.fixed)
+            return 'unset';
+        const headerElement = this.$refs[`column-${column.name}`];
+        if (!headerElement)
+            return 'unset';
+        return headerElement[0].style.left;
+    }
+};
+__decorate([
+    Prop({ type: [String], default: '' }),
+    __metadata("design:type", String)
+], TekGrid.prototype, "title", void 0);
+__decorate([
+    Prop({ type: [Boolean, String], default: false }),
+    __metadata("design:type", Object)
+], TekGrid.prototype, "addButton", void 0);
+__decorate([
+    Prop({ type: [String], default: 'none' }),
+    __metadata("design:type", String)
+], TekGrid.prototype, "deleteButton", void 0);
+__decorate([
+    Prop({ type: [Boolean, String], default: false }),
+    __metadata("design:type", Object)
+], TekGrid.prototype, "columnsButton", void 0);
+__decorate([
+    Prop({ type: [Array, String], default: () => [] }),
+    __metadata("design:type", Object)
+], TekGrid.prototype, "columnsButtonIgnore", void 0);
+__decorate([
+    Prop({ type: [Boolean, String], default: false }),
+    __metadata("design:type", Object)
+], TekGrid.prototype, "filterButton", void 0);
+__decorate([
+    Prop({ type: [Boolean, String], default: false }),
+    __metadata("design:type", Object)
+], TekGrid.prototype, "columnFilterButton", void 0);
+__decorate([
+    Prop({ type: [Array], default: () => [] }),
+    __metadata("design:type", Array)
+], TekGrid.prototype, "actions", void 0);
+__decorate([
+    Prop({ type: [String, Boolean], default: true }),
+    __metadata("design:type", Object)
+], TekGrid.prototype, "dragColumns", void 0);
+__decorate([
+    Prop({ type: [String, Boolean], default: true }),
+    __metadata("design:type", Object)
+], TekGrid.prototype, "resizeColumns", void 0);
+__decorate([
+    Prop({ type: [String, Boolean], default: true }),
+    __metadata("design:type", Object)
+], TekGrid.prototype, "showLayoutOptions", void 0);
+__decorate([
+    Prop({ type: [String, Boolean], default: false }),
+    __metadata("design:type", Object)
+], TekGrid.prototype, "showExport", void 0);
+__decorate([
+    Prop({ type: [String, Boolean], default: true }),
+    __metadata("design:type", Object)
+], TekGrid.prototype, "showReload", void 0);
+__decorate([
+    Prop({ type: [String, Array] }),
+    __metadata("design:type", Array)
+], TekGrid.prototype, "exportConfig", void 0);
+__decorate([
+    Prop({ type: [Array] }),
+    __metadata("design:type", Array)
+], TekGrid.prototype, "exportActions", void 0);
+__decorate([
+    Prop({
+        type: Array,
+        default: () => undefined,
+    }),
+    __metadata("design:type", Array)
+], TekGrid.prototype, "toolbarSlot", void 0);
+TekGrid = __decorate([
+    Component
+], TekGrid);
+var script = TekGrid;
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("v-data-table", {
+    directives: [
+      {
+        name: "show",
+        rawName: "v-show",
+        value: _vm.instance.isVisible,
+        expression: "instance.isVisible",
+      },
+    ],
+    ref: "grid",
+    class: [
+      "zd-grid",
+      "zd-tree-grid-editable",
+      "tek-grid",
+      "tek-tree-grid",
+      _vm.instance.cssClass,
+      { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
+    ],
+    style: [_vm.cssColorVars, _vm.instance.cssStyle],
+    attrs: {
+      "fixed-header": "",
+      "disable-pagination": "",
+      "hide-default-header": "",
+      "hide-default-footer": "",
+      name: _vm.instance.name,
+      headers: _vm.instance.columns,
+      items: _vm.getData(),
+      search: _vm.instance.datasource.search,
+      "show-select": _vm.instance.selectable,
+      dense: _vm.instance.dense,
+      loading: _vm.instance.datasource.loading,
+      "item-key": _vm.instance.datasource.uniqueKey,
+      "disable-sort": "",
+      "disable-filtering": "",
+      tabindex: "0",
+    },
+    on: {
+      "current-items": function ($event) {
+        return _vm.changeData($event)
+      },
+    },
+    scopedSlots: _vm._u(
+      [
+        {
+          key: "top",
+          fn: function () {
+            return [
+              !_vm.$slots.toolbarSlot
+                ? [
+                    _c("zd-grid-top", {
+                      ref: "treeGridTopSlot",
+                      attrs: {
+                        name: _vm.instance.name + "_top",
+                        toolbarSlot: _vm.instance.toolbarSlot,
+                        instance: _vm.instance,
+                      },
+                    }),
+                  ]
+                : _vm._e(),
+              _vm._v(" "),
+              _vm._t("toolbarSlot"),
+              _vm._v(" "),
+              _c("span", {
+                ref: "gridTooltip",
+                staticClass: "zd-grid-cell-tooltip",
+              }),
+            ]
+          },
+          proxy: true,
+        },
+        _vm.instance.showHeader
+          ? {
+              key: "header",
+              fn: function (ref) {
+                var props = ref.props;
+                var on = ref.on;
+                return [
+                  _c("thead", { staticClass: "zd-grid-table-header" }, [
+                    _c(
+                      "tr",
+                      [
+                        _vm.instance.selectable
+                          ? _c(
+                              "th",
+                              {
+                                staticClass:
+                                  "zd-table-cell selectable zd-table-fixed-column",
+                                style:
+                                  "background-color: " +
+                                  _vm.instance.headerBackground,
+                              },
+                              [
+                                _c("v-checkbox", {
+                                  staticClass: "zd-grid-header-checkbox",
+                                  attrs: {
+                                    "hide-details": "",
+                                    color: "primary",
+                                    disabled: _vm.instance.editing,
+                                    "on-icon": _vm.$getIcon("checkboxOn"),
+                                    "off-icon": _vm.$getIcon("checkboxOff"),
+                                    "indeterminate-icon": _vm.$getIcon(
+                                      "checkboxIndeterminate"
+                                    ),
+                                    value: props.everyItem,
+                                    indeterminate:
+                                      !props.everyItem && props.someItems,
+                                  },
+                                  on: {
+                                    click: function ($event) {
+                                      $event.stopPropagation();
+                                      on["toggle-select-all"](!props.everyItem);
+                                      _vm.selectAllClick(
+                                        !props.everyItem,
+                                        $event
+                                      );
+                                    },
+                                  },
+                                }),
+                              ],
+                              1
+                            )
+                          : _vm._e(),
+                        _vm._v(" "),
+                        _vm._l(
+                          _vm.orderHeaders(props.headers),
+                          function (column, index) {
+                            return [
+                              column.isVisible
+                                ? _c(
+                                    "th",
+                                    {
+                                      key: column.name,
+                                      ref: "column-" + column.name,
+                                      refInFor: true,
+                                      class: [
+                                        "zd-table-cell",
+                                        "column-th-" +
+                                          column.name +
+                                          "-" +
+                                          _vm.instance.name,
+                                        {
+                                          sortable: column.sortable,
+                                          sortHandle: _vm.instance.dragColumns,
+                                          "zd-table-fixed-column": column.fixed,
+                                        },
+                                        "text-" + column.align,
+                                        _vm.instance.datasource.getOrderByColumn(
+                                          column.name
+                                        ),
+                                        _vm.instance.datasource.getOrderByColumn(
+                                          column.name
+                                        ) !== null
+                                          ? "active"
+                                          : "",
+                                      ],
+                                      style: {
+                                        "background-color":
+                                          _vm.instance.headerBackground,
+                                        "min-width":
+                                          _vm.calcWidth(
+                                            column,
+                                            column.minWidth
+                                          ) || "unset",
+                                        "max-width":
+                                          _vm.calcWidth(
+                                            column,
+                                            column.maxWidth
+                                          ) || "unset",
+                                      },
+                                      attrs: {
+                                        "column-name": column.name,
+                                        index: index,
+                                      },
+                                      on: {
+                                        click: function ($event) {
+                                          return _vm.instance.changeColumnOrder(
+                                            column
+                                          )
+                                        },
+                                      },
+                                    },
+                                    [
+                                      _c(
+                                        "span",
+                                        {
+                                          staticClass: "zd-table-header-cell",
+                                          style: {
+                                            width:
+                                              _vm.calcHeaderCellWidth(column),
+                                          },
+                                        },
+                                        [
+                                          column.type !== "action"
+                                            ? [
+                                                column.sortable &&
+                                                column.align === "right"
+                                                  ? _c(
+                                                      "span",
+                                                      {
+                                                        staticClass:
+                                                          "zd-table-cell-sort",
+                                                      },
+                                                      [
+                                                        column.sortable &&
+                                                        column.align === "right"
+                                                          ? _c(
+                                                              "v-icon",
+                                                              {
+                                                                staticClass:
+                                                                  "zd-table-cell-sort-icon",
+                                                                attrs: {
+                                                                  small: "",
+                                                                },
+                                                              },
+                                                              [
+                                                                _vm._v(
+                                                                  _vm._s(
+                                                                    _vm.$getIcon(
+                                                                      "chevronUp"
+                                                                    )
+                                                                  )
+                                                                ),
+                                                              ]
+                                                            )
+                                                          : _vm._e(),
+                                                        _vm._v(" "),
+                                                        _vm.instance.datasource.findOrderIndex(
+                                                          column.name
+                                                        ) >= 0
+                                                          ? _c(
+                                                              "span",
+                                                              {
+                                                                staticClass:
+                                                                  "zd-table-cell-sort-order left",
+                                                              },
+                                                              [
+                                                                _vm._v(
+                                                                  _vm._s(
+                                                                    _vm.instance.datasource.findOrderIndex(
+                                                                      column.name
+                                                                    ) + 1
+                                                                  )
+                                                                ),
+                                                              ]
+                                                            )
+                                                          : _vm._e(),
+                                                      ],
+                                                      1
+                                                    )
+                                                  : _vm._e(),
+                                                _vm._v(" "),
+                                                _c(
+                                                  "span",
+                                                  {
+                                                    class: [
+                                                      "zd-table-cell-name",
+                                                      {
+                                                        "overflow-hidden":
+                                                          column.overflow ===
+                                                          "hidden",
+                                                        "overflow-wrap":
+                                                          column.overflow ===
+                                                          "wrap",
+                                                      },
+                                                      !isNaN(column.overflow)
+                                                        ? "overflow-clamp overflow-clamp-" +
+                                                          column.overflow
+                                                        : "",
+                                                    ],
+                                                    style: {
+                                                      "min-width":
+                                                        _vm.calcWidth(
+                                                          column,
+                                                          column.minWidth
+                                                        ) || "unset",
+                                                      "max-width":
+                                                        _vm.calcWidth(
+                                                          column,
+                                                          column.maxWidth
+                                                        ) || "unset",
+                                                    },
+                                                    on: {
+                                                      mouseenter: function (
+                                                        $event
+                                                      ) {
+                                                        return _vm.checkOverflow(
+                                                          $event
+                                                        )
+                                                      },
+                                                      mouseleave: function (
+                                                        $event
+                                                      ) {
+                                                        return _vm.removeTooltip()
+                                                      },
+                                                    },
+                                                  },
+                                                  [
+                                                    _vm._v(
+                                                      _vm._s(
+                                                        _vm.$t(column.label)
+                                                      )
+                                                    ),
+                                                  ]
+                                                ),
+                                                _vm._v(" "),
+                                                column.sortable &&
+                                                column.align !== "right"
+                                                  ? _c(
+                                                      "span",
+                                                      {
+                                                        staticClass:
+                                                          "zd-table-cell-sort",
+                                                      },
+                                                      [
+                                                        column.sortable &&
+                                                        column.align !== "right"
+                                                          ? _c(
+                                                              "v-icon",
+                                                              {
+                                                                staticClass:
+                                                                  "zd-table-cell-sort-icon",
+                                                                attrs: {
+                                                                  small: "",
+                                                                },
+                                                              },
+                                                              [
+                                                                _vm._v(
+                                                                  _vm._s(
+                                                                    _vm.$getIcon(
+                                                                      "chevronUp"
+                                                                    )
+                                                                  )
+                                                                ),
+                                                              ]
+                                                            )
+                                                          : _vm._e(),
+                                                        _vm._v(" "),
+                                                        _vm.instance.datasource.findOrderIndex(
+                                                          column.name
+                                                        ) >= 0
+                                                          ? _c(
+                                                              "span",
+                                                              {
+                                                                staticClass:
+                                                                  "zd-table-cell-sort-order",
+                                                              },
+                                                              [
+                                                                _vm._v(
+                                                                  _vm._s(
+                                                                    _vm.instance.datasource.findOrderIndex(
+                                                                      column.name
+                                                                    ) + 1
+                                                                  )
+                                                                ),
+                                                              ]
+                                                            )
+                                                          : _vm._e(),
+                                                      ],
+                                                      1
+                                                    )
+                                                  : _vm._e(),
+                                              ]
+                                            : [
+                                                _c(
+                                                  "span",
+                                                  {
+                                                    staticClass:
+                                                      "zd-table-cell-name",
+                                                  },
+                                                  [
+                                                    _vm._v(
+                                                      _vm._s(
+                                                        _vm.$t(column.label)
+                                                      )
+                                                    ),
+                                                  ]
+                                                ),
+                                              ],
+                                          _vm._v(" "),
+                                          _vm.instance.columnFilterButton &&
+                                          column.filterable
+                                            ? _c(
+                                                "span",
+                                                {
+                                                  class: [
+                                                    "tek-grid-column-filter-button",
+                                                    {
+                                                      "has-filter-data":
+                                                        _vm.instance.columnHasFilterData(
+                                                          column
+                                                        ),
+                                                    },
+                                                  ],
+                                                },
+                                                [
+                                                  _c(
+                                                    "v-menu",
+                                                    {
+                                                      attrs: {
+                                                        "offset-overflow": "",
+                                                        "offset-y": "",
+                                                        "min-width": 200,
+                                                        transition:
+                                                          "scale-transition",
+                                                        "content-class":
+                                                          "tek-grid-column-filter-menu",
+                                                        "close-on-content-click": false,
+                                                      },
+                                                      scopedSlots: _vm._u(
+                                                        [
+                                                          {
+                                                            key: "activator",
+                                                            fn: function (ref) {
+                                                              var on = ref.on;
+                                                              return [
+                                                                _c(
+                                                                  "v-icon",
+                                                                  _vm._g(
+                                                                    {},
+                                                                    Object.assign(
+                                                                      {},
+                                                                      _vm.getFilterActivatorEvents(
+                                                                        on,
+                                                                        column
+                                                                      )
+                                                                    )
+                                                                  ),
+                                                                  [
+                                                                    _vm._v(
+                                                                      _vm._s(
+                                                                        _vm.$getIcon(
+                                                                          "filter"
+                                                                        )
+                                                                      )
+                                                                    ),
+                                                                  ]
+                                                                ),
+                                                              ]
+                                                            },
+                                                          },
+                                                        ],
+                                                        null,
+                                                        true
+                                                      ),
+                                                    },
+                                                    [
+                                                      _vm._v(" "),
+                                                      _vm._l(
+                                                        _vm.getColumnFilterOptions(
+                                                          column
+                                                        ),
+                                                        function (
+                                                          item,
+                                                          filterIndex
+                                                        ) {
+                                                          return _c(
+                                                            "span",
+                                                            {
+                                                              key: filterIndex,
+                                                            },
+                                                            [
+                                                              filterIndex > 0
+                                                                ? _c(
+                                                                    "zd-radio",
+                                                                    _vm._b(
+                                                                      {
+                                                                        attrs: {
+                                                                          name:
+                                                                            _vm
+                                                                              .instance
+                                                                              .name +
+                                                                            "-" +
+                                                                            column.name +
+                                                                            "-filter-relation-" +
+                                                                            filterIndex,
+                                                                        },
+                                                                      },
+                                                                      "zd-radio",
+                                                                      {
+                                                                        showLabel: false,
+                                                                        showHelper: false,
+                                                                        vertical: false,
+                                                                        cssClass:
+                                                                          "zd-mb-2",
+                                                                        datasource:
+                                                                          _vm
+                                                                            .instance
+                                                                            .filterRelationsDatasource,
+                                                                        dataValue:
+                                                                          "value",
+                                                                        dataLabel:
+                                                                          "text",
+                                                                        value:
+                                                                          item.relation,
+                                                                        events:
+                                                                          {
+                                                                            change:
+                                                                              _vm.getFilterItemChange(
+                                                                                "relation",
+                                                                                column,
+                                                                                filterIndex
+                                                                              ),
+                                                                          },
+                                                                      },
+                                                                      false
+                                                                    )
+                                                                  )
+                                                                : _vm._e(),
+                                                              _vm._v(" "),
+                                                              item.operation !==
+                                                              undefined
+                                                                ? _c(
+                                                                    "zd-select",
+                                                                    _vm._b(
+                                                                      {
+                                                                        attrs: {
+                                                                          name:
+                                                                            _vm
+                                                                              .instance
+                                                                              .name +
+                                                                            "-" +
+                                                                            column.name +
+                                                                            "-filter-operation-" +
+                                                                            filterIndex,
+                                                                        },
+                                                                      },
+                                                                      "zd-select",
+                                                                      {
+                                                                        autocomplete: false,
+                                                                        showLabel: false,
+                                                                        showHelper: false,
+                                                                        clearable: false,
+                                                                        cssClass:
+                                                                          "zd-mb-2",
+                                                                        datasource:
+                                                                          _vm
+                                                                            .instance
+                                                                            .filterOperationsDatasource,
+                                                                        dataValue:
+                                                                          "value",
+                                                                        dataText:
+                                                                          "text",
+                                                                        value:
+                                                                          item.operation,
+                                                                        events:
+                                                                          {
+                                                                            change:
+                                                                              _vm.getFilterItemChange(
+                                                                                "operation",
+                                                                                column,
+                                                                                filterIndex
+                                                                              ),
+                                                                          },
+                                                                      },
+                                                                      false
+                                                                    )
+                                                                  )
+                                                                : _vm._e(),
+                                                              _vm._v(" "),
+                                                              _c(
+                                                                _vm.getComponentType(
+                                                                  filterIndex
+                                                                ) ||
+                                                                  column
+                                                                    .componentProps
+                                                                    .component,
+                                                                _vm._b(
+                                                                  {
+                                                                    tag: "component",
+                                                                    attrs: {
+                                                                      name:
+                                                                        _vm
+                                                                          .instance
+                                                                          .name +
+                                                                        "-" +
+                                                                        column.name +
+                                                                        "-filter-value-" +
+                                                                        filterIndex,
+                                                                    },
+                                                                  },
+                                                                  "component",
+                                                                  Object.assign(
+                                                                    {},
+                                                                    column.componentProps,
+                                                                    {
+                                                                      showLabel: false,
+                                                                      showHelper: true,
+                                                                      autofill: false,
+                                                                      cssClass:
+                                                                        "zd-mb-2",
+                                                                      value:
+                                                                        item.value,
+                                                                      persistentHint: true,
+                                                                      hint: _vm.getComponentHint(
+                                                                        filterIndex
+                                                                      ),
+                                                                      events: {
+                                                                        input:
+                                                                          _vm.getFilterValueChange(
+                                                                            column,
+                                                                            filterIndex
+                                                                          ),
+                                                                      },
+                                                                    }
+                                                                  ),
+                                                                  false
+                                                                )
+                                                              ),
+                                                            ],
+                                                            1
+                                                          )
+                                                        }
+                                                      ),
+                                                    ],
+                                                    2
+                                                  ),
+                                                ],
+                                                1
+                                              )
+                                            : _vm._e(),
+                                          _vm._v(" "),
+                                          _vm.instance.resizeColumns
+                                            ? _c(
+                                                "span",
+                                                {
+                                                  staticClass:
+                                                    "zd-grid-resize-handle",
+                                                  on: {
+                                                    mousedown: function (
+                                                      $event
+                                                    ) {
+                                                      return _vm.resizeMouseDownHandler(
+                                                        column,
+                                                        $event
+                                                      )
+                                                    },
+                                                    click:
+                                                      _vm.resizeClickHandler,
+                                                  },
+                                                },
+                                                [_vm._v("‖")]
+                                              )
+                                            : _vm._e(),
+                                        ],
+                                        2
+                                      ),
+                                    ]
+                                  )
+                                : _vm._e(),
+                            ]
+                          }
+                        ),
+                      ],
+                      2
+                    ),
+                  ]),
+                ]
+              },
+            }
+          : null,
+        _vm.instance.virtualScroll && _vm.scrollData.start > 0
+          ? {
+              key: "body.prepend",
+              fn: function (ref) {
+                var headers = ref.headers;
+                return [
+                  _c("tr", [
+                    _c("td", {
+                      style: "padding-top:" + _vm.scrollData.startHeight + "px",
+                      attrs: { colspan: headers.length },
+                    }),
+                  ]),
+                ]
+              },
+            }
+          : null,
+        _vm.instance.virtualScroll &&
+        _vm.scrollData.start + _vm.scrollData.perPage <
+          (_vm.scrollData.visibleData || []).length
+          ? {
+              key: "body.append",
+              fn: function (ref) {
+                var headers = ref.headers;
+                return [
+                  _c("tr", [
+                    _c("td", {
+                      style: "padding-top:" + _vm.scrollData.endHeight + "px",
+                      attrs: { colspan: headers.length },
+                    }),
+                  ]),
+                ]
+              },
+            }
+          : null,
+        _vm.instance.treeDataStructure.treeData.length
+          ? {
+              key: "item",
+              fn: function (ref) {
+                var item = ref.item;
+                var isSelected = ref.isSelected;
+                var index = ref.index;
+                var headers = ref.headers;
+                return [
+                  _c(
+                    "tr",
+                    {
+                      directives: [
+                        {
+                          name: "show",
+                          rawName: "v-show",
+                          value: _vm.instance.treeDataStructure.isOpened(item),
+                          expression:
+                            "instance.treeDataStructure.isOpened(item)",
+                        },
+                      ],
+                      class: {
+                        active: isSelected,
+                        current: _vm.isCurrentRow(item),
+                      },
+                      on: {
+                        click: function ($event) {
+                          return _vm.rowClick(item, $event)
+                        },
+                      },
+                    },
+                    [
+                      _vm.instance.selectable
+                        ? _c(
+                            "td",
+                            {
+                              staticClass:
+                                "zd-table-cell selectable zd-table-fixed-column",
+                            },
+                            [
+                              _c("v-checkbox", {
+                                staticClass: "zd-grid-row-checkbox",
+                                attrs: {
+                                  "hide-details": "",
+                                  color: "primary",
+                                  disabled: _vm.instance.editing,
+                                  "on-icon": _vm.$getIcon("checkboxOn"),
+                                  "off-icon": _vm.$getIcon("checkboxOff"),
+                                  "true-value": true,
+                                  "false-value": false,
+                                  value: isSelected,
+                                },
+                                on: {
+                                  click: function ($event) {
+                                    $event.stopPropagation();
+                                    return _vm.selectClick(
+                                      index,
+                                      !isSelected,
+                                      $event
+                                    )
+                                  },
+                                },
+                              }),
+                            ],
+                            1
+                          )
+                        : _vm._e(),
+                      _vm._v(" "),
+                      _vm._l(
+                        _vm.orderHeaders(headers),
+                        function (header, headerIndex) {
+                          return [
+                            _vm._l(
+                              [
+                                {
+                                  column: header,
+                                  cellProps: (_vm.instance.cellsApplied[
+                                    _vm.rowKey(item)
+                                  ] || {})[header.name],
+                                },
+                              ],
+                              function (ref) {
+                                var column = ref.column;
+                                var cellProps = ref.cellProps;
+                                return [
+                                  column.isVisible && column.type !== "action"
+                                    ? [
+                                        _c(
+                                          "td",
+                                          {
+                                            key: column.name,
+                                            class: [
+                                              "zd-table-cell",
+                                              "text-" + column.align,
+                                              Object.assign(
+                                                {},
+                                                column,
+                                                cellProps
+                                              ).cssClass,
+                                              { first: headerIndex === 0 },
+                                              {
+                                                "zd-table-column-editable":
+                                                  column.editable,
+                                                "zd-table-cell-editable":
+                                                  Object.assign(
+                                                    {},
+                                                    column,
+                                                    cellProps
+                                                  ).editable,
+                                                "zd-table-fixed-column":
+                                                  column.fixed,
+                                              },
+                                            ],
+                                            style: [
+                                              Object.assign(
+                                                {},
+                                                column,
+                                                cellProps
+                                              ).style,
+                                              Object.assign(
+                                                {},
+                                                column,
+                                                cellProps
+                                              ).cssStyle,
+                                              {
+                                                left: _vm.getFixedLeft(column),
+                                              },
+                                            ],
+                                            on: {
+                                              click: function ($event) {
+                                                return _vm.cellClick(
+                                                  item,
+                                                  column,
+                                                  $event
+                                                )
+                                              },
+                                            },
+                                          },
+                                          [
+                                            column.loading
+                                              ? _c("v-skeleton-loader", {
+                                                  staticClass:
+                                                    "zd-skeleton-table-cell",
+                                                  attrs: {
+                                                    loading: "",
+                                                    type: "table-cell",
+                                                  },
+                                                })
+                                              : _vm._e(),
+                                            _vm._v(" "),
+                                            Object.assign({}, column, cellProps)
+                                              .editable && _vm.instance.editing
+                                              ? _c(
+                                                  "span",
+                                                  {
+                                                    directives: [
+                                                      {
+                                                        name: "show",
+                                                        rawName: "v-show",
+                                                        value: !column.loading,
+                                                        expression:
+                                                          "!column.loading",
+                                                      },
+                                                    ],
+                                                    staticClass:
+                                                      "zd-table-cell-inline-edit",
+                                                    style: {
+                                                      width:
+                                                        _vm.calcWidth(
+                                                          column,
+                                                          column.maxWidth ||
+                                                            column.minWidth
+                                                        ) || "unset",
+                                                      "min-width":
+                                                        _vm.calcWidth(
+                                                          column,
+                                                          column.minWidth
+                                                        ) || "unset",
+                                                      "max-width":
+                                                        _vm.calcWidth(
+                                                          column,
+                                                          column.maxWidth
+                                                        ) || "unset",
+                                                    },
+                                                  },
+                                                  [
+                                                    _vm.instance.isEdited(
+                                                      column,
+                                                      item
+                                                    )
+                                                      ? _c(
+                                                          "span",
+                                                          {
+                                                            staticClass:
+                                                              "zd-table-cell-edit-icon",
+                                                          },
+                                                          [
+                                                            _vm.instance.isValid(
+                                                              column,
+                                                              item
+                                                            )
+                                                              ? _c(
+                                                                  "v-icon",
+                                                                  {
+                                                                    attrs: {
+                                                                      color:
+                                                                        "primary",
+                                                                    },
+                                                                  },
+                                                                  [
+                                                                    _vm._v(
+                                                                      _vm._s(
+                                                                        _vm.$getIcon(
+                                                                          "pencil"
+                                                                        )
+                                                                      )
+                                                                    ),
+                                                                  ]
+                                                                )
+                                                              : _c(
+                                                                  "v-icon",
+                                                                  {
+                                                                    attrs: {
+                                                                      color:
+                                                                        "error",
+                                                                    },
+                                                                  },
+                                                                  [
+                                                                    _vm._v(
+                                                                      _vm._s(
+                                                                        _vm.$getIcon(
+                                                                          "warning"
+                                                                        )
+                                                                      )
+                                                                    ),
+                                                                  ]
+                                                                ),
+                                                          ],
+                                                          1
+                                                        )
+                                                      : _vm._e(),
+                                                    _vm._v(" "),
+                                                    _c(
+                                                      column.componentProps
+                                                        .component,
+                                                      _vm._b(
+                                                        {
+                                                          key:
+                                                            column.name +
+                                                            _vm.rowKey(item),
+                                                          tag: "component",
+                                                        },
+                                                        "component",
+                                                        _vm.getEditableComponent(
+                                                          column,
+                                                          item,
+                                                          cellProps
+                                                        ),
+                                                        false
+                                                      )
+                                                    ),
+                                                  ],
+                                                  1
+                                                )
+                                              : _vm.hasToggleIcon(column, item)
+                                              ? _c(
+                                                  "span",
+                                                  [
+                                                    _c("v-icon", [
+                                                      _vm._v(
+                                                        _vm._s(
+                                                          _vm.$getIcon(
+                                                            column.formatterByRow(
+                                                              item,
+                                                              cellProps
+                                                            )
+                                                          )
+                                                        )
+                                                      ),
+                                                    ]),
+                                                  ],
+                                                  1
+                                                )
+                                              : _c(
+                                                  "span",
+                                                  {
+                                                    directives: [
+                                                      {
+                                                        name: "show",
+                                                        rawName: "v-show",
+                                                        value: !column.loading,
+                                                        expression:
+                                                          "!column.loading",
+                                                      },
+                                                    ],
+                                                    class: [
+                                                      "zd-table-cell-text",
+                                                      {
+                                                        "zd-table-cell-text-editable":
+                                                          Object.assign(
+                                                            {},
+                                                            column,
+                                                            cellProps
+                                                          ).editable,
+                                                        "overflow-hidden":
+                                                          column.overflow ===
+                                                          "hidden",
+                                                        "overflow-wrap":
+                                                          column.overflow ===
+                                                          "wrap",
+                                                      },
+                                                      !isNaN(column.overflow)
+                                                        ? "overflow-clamp overflow-clamp-" +
+                                                          column.overflow
+                                                        : "",
+                                                    ],
+                                                    style: {
+                                                      width:
+                                                        _vm.calcWidth(
+                                                          column,
+                                                          column.maxWidth ||
+                                                            column.minWidth
+                                                        ) || "unset",
+                                                      "min-width":
+                                                        _vm.calcWidth(
+                                                          column,
+                                                          column.minWidth
+                                                        ) || "unset",
+                                                      "max-width":
+                                                        _vm.calcWidth(
+                                                          column,
+                                                          column.maxWidth
+                                                        ) || "unset",
+                                                    },
+                                                    on: {
+                                                      mouseenter: function (
+                                                        $event
+                                                      ) {
+                                                        return _vm.checkOverflow(
+                                                          $event
+                                                        )
+                                                      },
+                                                      mouseleave: function (
+                                                        $event
+                                                      ) {
+                                                        return _vm.removeTooltip()
+                                                      },
+                                                    },
+                                                  },
+                                                  [
+                                                    _c(
+                                                      "div",
+                                                      {
+                                                        directives: [
+                                                          {
+                                                            name: "show",
+                                                            rawName: "v-show",
+                                                            value:
+                                                              headerIndex === 0,
+                                                            expression:
+                                                              "headerIndex === 0",
+                                                          },
+                                                        ],
+                                                        class: [
+                                                          "zd-tree-grid-editable-expand",
+                                                          "level" +
+                                                            item.tree__level,
+                                                        ],
+                                                      },
+                                                      [
+                                                        item.tree__children
+                                                          .length > 0
+                                                          ? _c(
+                                                              "v-icon",
+                                                              {
+                                                                class: {
+                                                                  opened:
+                                                                    item.tree__opened,
+                                                                },
+                                                                attrs: {
+                                                                  tabindex:
+                                                                    "-1",
+                                                                },
+                                                                on: {
+                                                                  click:
+                                                                    function (
+                                                                      $event
+                                                                    ) {
+                                                                      return _vm.instance.toggleExpand(
+                                                                        item,
+                                                                        index
+                                                                      )
+                                                                    },
+                                                                },
+                                                              },
+                                                              [
+                                                                _vm._v(
+                                                                  "\n                    " +
+                                                                    _vm._s(
+                                                                      _vm.$getIcon(
+                                                                        "chevronRight"
+                                                                      )
+                                                                    ) +
+                                                                    "\n                  "
+                                                                ),
+                                                              ]
+                                                            )
+                                                          : _vm._e(),
+                                                      ],
+                                                      1
+                                                    ),
+                                                    _vm._v(" "),
+                                                    _c("span", {
+                                                      key: item.tree__searched
+                                                        ? "a"
+                                                        : "b",
+                                                      domProps: {
+                                                        innerHTML: _vm._s(
+                                                          _vm.formatSearchResult(
+                                                            column.formatterByRow(
+                                                              item,
+                                                              cellProps
+                                                            )
+                                                          )
+                                                        ),
+                                                      },
+                                                    }),
+                                                  ]
+                                                ),
+                                          ],
+                                          1
+                                        ),
+                                      ]
+                                    : column.isVisible &&
+                                      column.type === "action"
+                                    ? [
+                                        _c(
+                                          "td",
+                                          {
+                                            key: column.name,
+                                            class: [
+                                              "zd-table-cell",
+                                              "text-" + column.align,
+                                              Object.assign(
+                                                {},
+                                                column,
+                                                cellProps
+                                              ).cssClass,
+                                            ],
+                                            style: [
+                                              Object.assign(
+                                                {},
+                                                column,
+                                                cellProps
+                                              ).style,
+                                              Object.assign(
+                                                {},
+                                                column,
+                                                cellProps
+                                              ).cssStyle,
+                                            ],
+                                            on: {
+                                              click: function ($event) {
+                                                return _vm.cellClick(
+                                                  item,
+                                                  column,
+                                                  $event
+                                                )
+                                              },
+                                            },
+                                          },
+                                          _vm._l(
+                                            column.childrenProps,
+                                            function (child) {
+                                              return _c(
+                                                child.component,
+                                                _vm._b(
+                                                  {
+                                                    key:
+                                                      child.name +
+                                                      _vm.rowKey(item),
+                                                    tag: "component",
+                                                  },
+                                                  "component",
+                                                  Object.assign(
+                                                    {},
+                                                    child,
+                                                    _vm.instance.getActionComponent(
+                                                      child,
+                                                      column,
+                                                      item
+                                                    )
+                                                  ),
+                                                  false
+                                                )
+                                              )
+                                            }
+                                          ),
+                                          1
+                                        ),
+                                      ]
+                                    : _vm._e(),
+                                ]
+                              }
+                            ),
+                          ]
+                        }
+                      ),
+                    ],
+                    2
+                  ),
+                ]
+              },
+            }
+          : null,
+        {
+          key: "no-data",
+          fn: function () {
+            return [
+              _c("zd-iterable-no-data", {
+                ref: "gridNoData",
+                attrs: {
+                  name: _vm.instance.name + "_no_data",
+                  instance: _vm.instance,
+                  noDataSlot: _vm.instance.noDataSlot,
+                  noResultSlot: _vm.instance.noResultSlot,
+                  errorSlot: _vm.instance.errorSlot,
+                  empty: !_vm.getData().length,
+                },
+                scopedSlots: _vm._u(
+                  [
+                    {
+                      key: "errorSlot",
+                      fn: function () {
+                        return [_vm._t("errorSlot")]
+                      },
+                      proxy: true,
+                    },
+                    {
+                      key: "noResultSlot",
+                      fn: function () {
+                        return [_vm._t("noResultSlot")]
+                      },
+                      proxy: true,
+                    },
+                    {
+                      key: "noDataSlot",
+                      fn: function () {
+                        return [_vm._t("noDataSlot")]
+                      },
+                      proxy: true,
+                    },
+                  ],
+                  null,
+                  true
+                ),
+              }),
+            ]
+          },
+          proxy: true,
+        },
+        _vm.instance.showFooter
+          ? {
+              key: "footer",
+              fn: function () {
+                return [
+                  !_vm.$slots.footerSlot
+                    ? [
+                        _c("zd-grid-footer", {
+                          ref: "gridFooter",
+                          attrs: {
+                            name: _vm.instance.name + "_footer",
+                            instance: _vm.instance,
+                            footerSlot: _vm.instance.footerSlot,
+                          },
+                        }),
+                      ]
+                    : _vm._e(),
+                  _vm._v(" "),
+                  _vm._t("footerSlot"),
+                ]
+              },
+              proxy: true,
+            }
+          : null,
+      ],
+      null,
+      true
+    ),
+    model: {
+      value: _vm.instance.selectedRows,
+      callback: function ($$v) {
+        _vm.$set(_vm.instance, "selectedRows", $$v);
+      },
+      expression: "instance.selectedRows",
+    },
+  })
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
+    inject("data-v-29a40362_0", { source: ".tek-grid .zd-grid-toolbar {\n  height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n  align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n  margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n  line-height: 22px;\n}\n.tek-grid table thead tr th {\n  padding-right: 15px !important;\n}\n.tek-grid table thead tr th.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 4;\n  background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n  font-weight: 700;\n  font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n  font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n  font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n  transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n  position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n  background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n  width: 22px;\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n  width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 14px;\n  height: 100%;\n  border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n  width: 10px;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n  height: 60%;\n  border-bottom: solid 1px #ccc;\n  position: relative;\n  top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  background: white;\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
+
   };
   /* scoped */
   const __vue_scope_id__ = undefined;
@@ -5543,21 +7315,22 @@ __vue_render__._withStripped = true;
   );
 
 const components = {
-    TekBreadcrumbHeader: __vue_component__$e,
-    TekCardTitle: __vue_component__$d,
-    TekCrudAddButton: __vue_component__$c,
-    TekCrudCancelButton: __vue_component__$b,
-    TekCrudDeleteButton: __vue_component__$a,
-    TekCrudForm: __vue_component__$9,
-    TekCrudSaveButton: __vue_component__$8,
-    TekGrid: __vue_component__$7,
-    TekGridColumnsButton: __vue_component__$6,
-    TekGridLayoutOptions: __vue_component__$5,
-    TekImage: __vue_component__$4,
-    TekProductCard: __vue_component__,
-    TekIterableComponentRender: __vue_component__$2,
-    TekIterableCarousel: __vue_component__$3,
-    TekNotifications: __vue_component__$1,
+    TekBreadcrumbHeader: __vue_component__$f,
+    TekCardTitle: __vue_component__$e,
+    TekCrudAddButton: __vue_component__$d,
+    TekCrudCancelButton: __vue_component__$c,
+    TekCrudDeleteButton: __vue_component__$b,
+    TekCrudForm: __vue_component__$a,
+    TekCrudSaveButton: __vue_component__$9,
+    TekGrid: __vue_component__$8,
+    TekGridColumnsButton: __vue_component__$7,
+    TekGridLayoutOptions: __vue_component__$6,
+    TekImage: __vue_component__$5,
+    TekProductCard: __vue_component__$1,
+    TekIterableComponentRender: __vue_component__$3,
+    TekIterableCarousel: __vue_component__$4,
+    TekNotifications: __vue_component__$2,
+    TekTreeGrid: __vue_component__,
 };
 
 Icons.addIcons({
@@ -5578,4 +7351,4 @@ const TeknisaComponents = {
     },
 };
 
-export { script$e as TekBreadcrumbHeader, script$d as TekCardTitle, script$c as TekCrudAddButton, script$b as TekCrudCancelButton, script$a as TekCrudDeleteButton, script$9 as TekCrudForm, script$8 as TekCrudSaveButton, script$7 as TekGrid, script$6 as TekGridColumnsButton, script$5 as TekGridLayoutOptions, script$4 as TekImage, script$2 as TekIterableComponentRender, script as TekProductCard, TeknisaComponents as default };
+export { script$f as TekBreadcrumbHeader, script$e as TekCardTitle, script$d as TekCrudAddButton, script$c as TekCrudCancelButton, script$b as TekCrudDeleteButton, script$a as TekCrudForm, script$9 as TekCrudSaveButton, script$8 as TekGrid, script$7 as TekGridColumnsButton, script$6 as TekGridLayoutOptions, script$5 as TekImage, script$3 as TekIterableComponentRender, script$1 as TekProductCard, script as TekTreeGrid, TeknisaComponents as default };