@zeedhi/teknisa-components-vuetify 1.37.0 → 1.41.0

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

@@ -1,10 +1,11 @@
 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, Image, IterableCarousel, IterableComponentRender, Notifications, ProductCard } 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 { 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, Loading, Notifications, ProductCard, TekTreeGrid } from '@zeedhi/teknisa-components-common';
+import { ZdComponent, ZdComponentRender, components as components$1, ZdForm, ZdGrid, ZdIterableColumnsButton, ZdIterable, ZdLoading } from '@zeedhi/vuetify';
+import { Metadata, Config, dayjs, Singleton, normalize, I18n, Loader } from '@zeedhi/core';
 import debounce from 'lodash.debounce';
 import Sortable from 'sortablejs';
+import cloneDeep from 'lodash.clonedeep';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -56,7 +57,7 @@ __decorate([
 TekBreadcrumbHeader = __decorate([
     Component
 ], TekBreadcrumbHeader);
-var script$e = TekBreadcrumbHeader;
+var script$g = TekBreadcrumbHeader;
 
 function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
     if (typeof shadowMode !== 'boolean') {
@@ -187,20 +188,25 @@ function addStyle(id, css) {
 }
 
 /* script */
-const __vue_script__$e = script$e;
+const __vue_script__$g = script$g;
 
 /* template */
-var __vue_render__$e = function () {
+var __vue_render__$g = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c(
     "div",
-    { staticClass: "tek-breadcrumb-header" },
+    { staticClass: "tek-breadcrumb-header", attrs: { id: _vm.instance.name } },
     [
       _c(
         "zd-breadcrumbs",
-        _vm._b({}, "zd-breadcrumbs", _vm.instance.breadcrumb, false)
+        _vm._b(
+          { attrs: { dark: _vm.instance.dark, light: _vm.instance.light } },
+          "zd-breadcrumbs",
+          _vm.instance.breadcrumb,
+          false
+        )
       ),
       _vm._v(" "),
       _c(
@@ -256,34 +262,34 @@ var __vue_render__$e = function () {
     1
   )
 };
-var __vue_staticRenderFns__$e = [];
-__vue_render__$e._withStripped = true;
+var __vue_staticRenderFns__$g = [];
+__vue_render__$g._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$e = function (inject) {
+  const __vue_inject_styles__$g = 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 });
+    inject("data-v-4982d92e_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__$g = undefined;
   /* module identifier */
-  const __vue_module_identifier__$e = undefined;
+  const __vue_module_identifier__$g = undefined;
   /* functional template */
-  const __vue_is_functional_template__$e = false;
+  const __vue_is_functional_template__$g = 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__$g = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$g, staticRenderFns: __vue_staticRenderFns__$g },
+    __vue_inject_styles__$g,
+    __vue_script__$g,
+    __vue_scope_id__$g,
+    __vue_is_functional_template__$g,
+    __vue_module_identifier__$g,
     false,
     createInjector,
     undefined,
@@ -326,19 +332,22 @@ __decorate([
 TekCardTitle = __decorate([
     Component
 ], TekCardTitle);
-var script$d = TekCardTitle;
+var script$f = TekCardTitle;
 
 /* script */
-const __vue_script__$d = script$d;
+const __vue_script__$f = script$f;
 
 /* template */
-var __vue_render__$d = function () {
+var __vue_render__$f = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c(
     "div",
-    { class: ["tek-card-title", _vm.instance.cssClass] },
+    {
+      class: ["tek-card-title", _vm.instance.cssClass],
+      attrs: { id: _vm.instance.name },
+    },
     [
       _c(
         "div",
@@ -429,34 +438,34 @@ var __vue_render__$d = function () {
     1
   )
 };
-var __vue_staticRenderFns__$d = [];
-__vue_render__$d._withStripped = true;
+var __vue_staticRenderFns__$f = [];
+__vue_render__$f._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$d = function (inject) {
+  const __vue_inject_styles__$f = 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 });
+    inject("data-v-dc07bd14_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__$f = undefined;
   /* module identifier */
-  const __vue_module_identifier__$d = undefined;
+  const __vue_module_identifier__$f = undefined;
   /* functional template */
-  const __vue_is_functional_template__$d = false;
+  const __vue_is_functional_template__$f = 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__$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,
@@ -529,13 +538,13 @@ __decorate([
 TekCrudAddButton = __decorate([
     Component
 ], TekCrudAddButton);
-var script$c = TekCrudAddButton;
+var script$e = TekCrudAddButton;
 
 /* script */
-const __vue_script__$c = script$c;
+const __vue_script__$e = script$e;
 
 /* template */
-var __vue_render__$c = function () {
+var __vue_render__$e = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -551,7 +560,7 @@ var __vue_render__$c = function () {
               return [
                 _c(
                   "span",
-                  _vm._g({}, on),
+                  _vm._g({ attrs: { id: _vm.instance.name } }, on),
                   [
                     _c("zd-button", {
                       attrs: {
@@ -600,17 +609,17 @@ var __vue_render__$c = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$c = [];
-__vue_render__$c._withStripped = true;
+var __vue_staticRenderFns__$e = [];
+__vue_render__$e._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$c = undefined;
+  const __vue_inject_styles__$e = undefined;
   /* scoped */
-  const __vue_scope_id__$c = undefined;
+  const __vue_scope_id__$e = undefined;
   /* module identifier */
-  const __vue_module_identifier__$c = undefined;
+  const __vue_module_identifier__$e = undefined;
   /* functional template */
-  const __vue_is_functional_template__$c = false;
+  const __vue_is_functional_template__$e = false;
   /* style inject */
   
   /* style inject SSR */
@@ -619,13 +628,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__$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,
     undefined,
     undefined,
@@ -656,13 +665,13 @@ __decorate([
 TekCrudCancelButton = __decorate([
     Component
 ], TekCrudCancelButton);
-var script$b = TekCrudCancelButton;
+var script$d = TekCrudCancelButton;
 
 /* script */
-const __vue_script__$b = script$b;
+const __vue_script__$d = script$d;
 
 /* template */
-var __vue_render__$b = function () {
+var __vue_render__$d = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -678,7 +687,7 @@ var __vue_render__$b = function () {
               return [
                 _c(
                   "span",
-                  _vm._g({}, on),
+                  _vm._g({ attrs: { id: _vm.instance.name } }, on),
                   [
                     _c("zd-button", {
                       attrs: {
@@ -727,17 +736,17 @@ var __vue_render__$b = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$b = [];
-__vue_render__$b._withStripped = true;
+var __vue_staticRenderFns__$d = [];
+__vue_render__$d._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$b = undefined;
+  const __vue_inject_styles__$d = undefined;
   /* scoped */
-  const __vue_scope_id__$b = undefined;
+  const __vue_scope_id__$d = undefined;
   /* module identifier */
-  const __vue_module_identifier__$b = undefined;
+  const __vue_module_identifier__$d = undefined;
   /* functional template */
-  const __vue_is_functional_template__$b = false;
+  const __vue_is_functional_template__$d = false;
   /* style inject */
   
   /* style inject SSR */
@@ -746,13 +755,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__$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,
@@ -791,13 +800,13 @@ __decorate([
 TekCrudDeleteButton = __decorate([
     Component
 ], TekCrudDeleteButton);
-var script$a = TekCrudDeleteButton;
+var script$c = TekCrudDeleteButton;
 
 /* script */
-const __vue_script__$a = script$a;
+const __vue_script__$c = script$c;
 
 /* template */
-var __vue_render__$a = function () {
+var __vue_render__$c = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -813,7 +822,7 @@ var __vue_render__$a = function () {
               return [
                 _c(
                   "span",
-                  _vm._g({}, on),
+                  _vm._g({ attrs: { id: _vm.instance.name } }, on),
                   [
                     _c("zd-button", {
                       attrs: {
@@ -862,17 +871,17 @@ var __vue_render__$a = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$a = [];
-__vue_render__$a._withStripped = true;
+var __vue_staticRenderFns__$c = [];
+__vue_render__$c._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$a = undefined;
+  const __vue_inject_styles__$c = undefined;
   /* scoped */
-  const __vue_scope_id__$a = undefined;
+  const __vue_scope_id__$c = undefined;
   /* module identifier */
-  const __vue_module_identifier__$a = undefined;
+  const __vue_module_identifier__$c = undefined;
   /* functional template */
-  const __vue_is_functional_template__$a = false;
+  const __vue_is_functional_template__$c = false;
   /* style inject */
   
   /* style inject SSR */
@@ -881,13 +890,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__$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,
@@ -906,13 +915,13 @@ let TekCrudForm = class TekCrudForm extends ZdForm {
 TekCrudForm = __decorate([
     Component
 ], TekCrudForm);
-var script$9 = TekCrudForm;
+var script$b = TekCrudForm;
 
 /* script */
-const __vue_script__$9 = script$9;
+const __vue_script__$b = script$b;
 
 /* template */
-var __vue_render__$9 = function () {
+var __vue_render__$b = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -929,7 +938,7 @@ var __vue_render__$9 = function () {
       ],
       ref: "form",
       class: ["tek-crud-form", _vm.instance.cssClass],
-      attrs: { name: _vm.instance.name, tabindex: "0" },
+      attrs: { id: _vm.instance.name, name: _vm.instance.name, tabindex: "0" },
       on: {
         submit: function ($event) {
           $event.preventDefault();
@@ -986,34 +995,34 @@ var __vue_render__$9 = function () {
     2
   )
 };
-var __vue_staticRenderFns__$9 = [];
-__vue_render__$9._withStripped = true;
+var __vue_staticRenderFns__$b = [];
+__vue_render__$b._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$9 = function (inject) {
+  const __vue_inject_styles__$b = function (inject) {
     if (!inject) return
-    inject("data-v-aa2c2e04_0", { source: ".tek-crud-form {\n  outline: none;\n}", map: undefined, media: undefined });
+    inject("data-v-12f9560c_0", { source: ".tek-crud-form {\n  outline: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$9 = undefined;
+  const __vue_scope_id__$b = undefined;
   /* module identifier */
-  const __vue_module_identifier__$9 = undefined;
+  const __vue_module_identifier__$b = undefined;
   /* functional template */
-  const __vue_is_functional_template__$9 = false;
+  const __vue_is_functional_template__$b = 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__$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,
     createInjector,
     undefined,
@@ -1040,13 +1049,13 @@ __decorate([
 TekCrudSaveButton = __decorate([
     Component
 ], TekCrudSaveButton);
-var script$8 = TekCrudSaveButton;
+var script$a = TekCrudSaveButton;
 
 /* script */
-const __vue_script__$8 = script$8;
+const __vue_script__$a = script$a;
 
 /* template */
-var __vue_render__$8 = function () {
+var __vue_render__$a = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1062,7 +1071,7 @@ var __vue_render__$8 = function () {
               return [
                 _c(
                   "span",
-                  _vm._g({}, on),
+                  _vm._g({ attrs: { id: _vm.instance.name } }, on),
                   [
                     _c("zd-button", {
                       attrs: {
@@ -1111,17 +1120,17 @@ var __vue_render__$8 = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$8 = [];
-__vue_render__$8._withStripped = true;
+var __vue_staticRenderFns__$a = [];
+__vue_render__$a._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$8 = undefined;
+  const __vue_inject_styles__$a = undefined;
   /* scoped */
-  const __vue_scope_id__$8 = undefined;
+  const __vue_scope_id__$a = undefined;
   /* module identifier */
-  const __vue_module_identifier__$8 = undefined;
+  const __vue_module_identifier__$a = undefined;
   /* functional template */
-  const __vue_is_functional_template__$8 = false;
+  const __vue_is_functional_template__$a = false;
   /* style inject */
   
   /* style inject SSR */
@@ -1130,13 +1139,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__$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,
     undefined,
     undefined,
@@ -1148,10 +1157,14 @@ 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;
+        /**
+         * Left distance for each column
+         */
+        this.fixedLeft = {};
         this.debouncedDatasourceGet = debounce((instance) => {
             if (instance.events.beforeApplyFilter) {
                 instance.events.beforeApplyFilter({ component: instance });
@@ -1164,7 +1177,7 @@ let TekGrid = class TekGrid extends ZdGridEditable {
                 datasource.get();
             }
         }, 500);
-        this.componentType = '';
+        this.operationList = '';
         this.defaultOperation = '';
         this.defaultRelation = '';
         this.lastFilter = '';
@@ -1198,14 +1211,15 @@ let TekGrid = class TekGrid extends ZdGridEditable {
                 // do nothing
             }
         }
-        this.updateFixedColumns();
+        setTimeout(this.updateFixedColumns);
     }
-    getFilterActivatorEvents(on) {
+    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);
             };
         });
@@ -1215,35 +1229,83 @@ let TekGrid = class TekGrid extends ZdGridEditable {
         return this.filterItemChange.bind(this, prop, column, index);
     }
     getFilterValueChange(column, index) {
-        return this.filterValueChange.bind(this, column, index);
+        return debounce(this.filterValueChange.bind(this, column, index), 1000);
+    }
+    isOperationArrayValues(operation) {
+        return ['IN', 'NOT_IN', 'BETWEEN'].includes(operation);
+    }
+    getComponentType(index) {
+        const operationListArray = this.operationList.split(';');
+        return this.isOperationArrayValues(operationListArray[index]) ? 'ZdTextInput' : '';
+    }
+    getComponentHint(index) {
+        const operationListArray = this.operationList.split(';');
+        return this.isOperationArrayValues(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);
-        if (prop === 'operation') {
-            if (['IN', 'NOT_IN', 'BETWEEN'].includes(component.value)) {
-                valueInput.hint = 'TEKGRID_MULTIPLE_VALUE_HINT';
-                this.componentType = 'ZdTextInput';
-            }
-            else {
-                valueInput.hint = '';
-                this.componentType = '';
-            }
+        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
         }
-        valueInput.setFocus();
         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);
+                const { value } = datasource.dynamicFilter[column.name][index];
+                if (prop === 'operation') {
+                    if (this.isOperationArrayValues(component.value) && !Array.isArray(value)) {
+                        datasource.dynamicFilter[column.name][index].value = [value];
+                    }
+                    if (!this.isOperationArrayValues(component.value) && Array.isArray(value)) {
+                        [datasource.dynamicFilter[column.name][index].value] = value;
+                    }
+                }
                 datasource.dynamicFilter[column.name][index][prop] = component.value;
-                this.debouncedDatasourceGet(this.instance);
+                if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
+                    this.debouncedDatasourceGet(this.instance);
+                    this.onChangeLayout(event, element);
+                }
+            }
+        }
+    }
+    convertToDateFormat(column, value, revert) {
+        const dateFormat = column.componentProps.dateFormat || Config.dateFormat;
+        const displayFormat = column.componentProps.displayFormat || Config.displayFormat;
+        if (revert) {
+            if (dayjs(value, displayFormat).isValid() || !dayjs(value, dateFormat).isValid()) {
+                return value;
             }
+            return dayjs(value, dateFormat).format(displayFormat);
         }
-        this.onChangeLayout(event, element);
+        if (dayjs(value, dateFormat).isValid() || !dayjs(value, displayFormat).isValid()) {
+            return value;
+        }
+        return dayjs(value, displayFormat).format(dateFormat);
+    }
+    checkDateValueFormat(column, value, revert = false) {
+        if (['ZdDate', 'ZdDateRange'].includes(column.componentProps.component)) {
+            if (Array.isArray(value)) {
+                return value.map((item) => this.convertToDateFormat(column, item, revert));
+            }
+            return this.convertToDateFormat(column, value, revert);
+        }
+        return value;
     }
     filterValueChange(column, index, { component, event, element }) {
-        const { value } = component;
+        let { 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) {
@@ -1264,6 +1326,10 @@ let TekGrid = class TekGrid extends ZdGridEditable {
                     const operationSelectName = name.replace('-filter-value-', '-filter-operation-');
                     const operationSelect = Metadata.getInstance(operationSelectName);
                     const operation = operationSelect.value;
+                    if (this.isOperationArrayValues(operation)) {
+                        value = value.split(';');
+                    }
+                    value = this.checkDateValueFormat(column, value);
                     datasource.dynamicFilter[column.name].push({
                         relation,
                         operation,
@@ -1271,6 +1337,10 @@ let TekGrid = class TekGrid extends ZdGridEditable {
                     });
                 }
                 else {
+                    if (this.isOperationArrayValues(datasource.dynamicFilter[column.name][index].operation)) {
+                        value = value.split(';');
+                    }
+                    value = this.checkDateValueFormat(column, value);
                     datasource.dynamicFilter[column.name][index].value = value;
                 }
             }
@@ -1287,6 +1357,8 @@ let TekGrid = class TekGrid extends ZdGridEditable {
             }
             if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
                 this.debouncedDatasourceGet(this.instance);
+                this.onChangeLayout(event, element);
+                this.clearHelperValues(column);
             }
         }
         else {
@@ -1299,9 +1371,20 @@ let TekGrid = class TekGrid extends ZdGridEditable {
             }
             if (this.lastFilter !== JSON.stringify(this.instance.datasource.filter)) {
                 this.debouncedDatasourceGet(this.instance);
+                this.onChangeLayout(event, element);
+                this.clearHelperValues(column);
             }
         }
-        this.onChangeLayout(event, element);
+    }
+    clearHelperValues(column) {
+        if (!Array.isArray(column.filterProps)) {
+            column.filterProps.helperValue = '';
+        }
+        else {
+            column.filterProps.forEach((prop) => {
+                prop.helperValue = '';
+            });
+        }
     }
     getColumnFilterOptions(column) {
         const filterOptions = [];
@@ -1310,7 +1393,12 @@ let TekGrid = class TekGrid extends ZdGridEditable {
             const dynamicFilter = datasource.dynamicFilter[column.name];
             if (dynamicFilter && dynamicFilter.length > 0) {
                 dynamicFilter.forEach((item) => {
-                    filterOptions.push(item);
+                    let { value } = item;
+                    if (this.isOperationArrayValues(item.operation) && Array.isArray(value)) {
+                        value = this.checkDateValueFormat(column, value, true);
+                        value = value.join(';');
+                    }
+                    filterOptions.push(Object.assign(Object.assign({}, item), { value }));
                 });
             }
             filterOptions.push({
@@ -1369,7 +1457,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)
@@ -1386,104 +1474,163 @@ let TekGrid = class TekGrid extends ZdGridEditable {
             const name = column.getAttribute('column-name');
             if (name && column.classList.contains('zd-table-fixed-column')) {
                 column.style.left = `${left}px`;
+                this.$set(this.fixedLeft, name, column.style.left);
                 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;
+    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;
+        }
+    }
+    get headers() {
+        this.$nextTick(() => {
+            if (this.$el)
+                this.updateFixedColumns();
+        });
+        return this.instance.columns;
+    }
+    getColumnsDOMOrder() {
+        return this.orderHeaders(this.instance.columns);
+    }
+    resizeMouseMoveHandler(event) {
+        this.superMethods(ZdGrid).resizeMouseMoveHandler.call(this, event);
+        if (this.resizeColumn.fixed) {
+            this.$nextTick(this.updateFixedColumns);
+        }
     }
 };
 __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$9 = TekGrid$1;
 
 /* script */
-const __vue_script__$7 = script$7;
+const __vue_script__$9 = script$9;
 
 /* template */
-var __vue_render__$7 = function () {
+var __vue_render__$9 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1505,12 +1652,13 @@ var __vue_render__$7 = function () {
     ],
     style: [_vm.cssColorVars, _vm.instance.cssStyle],
     attrs: {
+      id: _vm.instance.name,
       "fixed-header": "",
       "disable-pagination": "",
       "hide-default-header": "",
       "hide-default-footer": "",
       name: _vm.instance.name,
-      headers: _vm.instance.columns,
+      headers: _vm.headers,
       height: _vm.instance.height,
       items: _vm.getData(),
       search: _vm.instance.datasource.search,
@@ -1518,6 +1666,8 @@ var __vue_render__$7 = function () {
       dense: _vm.instance.dense,
       loading: _vm.instance.datasource.loading,
       "item-key": _vm.instance.datasource.uniqueKey,
+      dark: _vm.instance.dark,
+      light: _vm.instance.light,
       "disable-sort": "",
       "disable-filtering": "",
       tabindex: "0",
@@ -1561,7 +1711,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(
@@ -1571,8 +1720,22 @@ var __vue_render__$7 = function () {
                           ? _c(
                               "th",
                               {
-                                staticClass:
-                                  "zd-table-cell selectable zd-table-fixed-column",
+                                class: [
+                                  "zd-table-cell",
+                                  "selectable",
+                                  "zd-table-fixed-column",
+                                  {
+                                    "theme--dark":
+                                      (_vm.$vuetify.theme.dark &&
+                                        !_vm.instance.light) ||
+                                      _vm.instance.dark,
+                                  },
+                                  {
+                                    "theme--light":
+                                      !_vm.$vuetify.theme.dark ||
+                                      _vm.instance.light,
+                                  },
+                                ],
                                 style:
                                   "background-color: " +
                                   _vm.instance.headerBackground,
@@ -1596,7 +1759,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
@@ -1626,13 +1789,30 @@ var __vue_render__$7 = function () {
                                       refInFor: true,
                                       class: [
                                         "zd-table-cell",
+                                        "column-th-" +
+                                          column.name +
+                                          "-" +
+                                          _vm.instance.name,
                                         {
                                           sortable:
                                             column.sortable &&
                                             !_vm.instance.editing,
-                                          sortHandle: _vm.instance.dragColumns,
+                                          sortHandle:
+                                            !column.fixed &&
+                                            _vm.instance.dragColumns,
                                           "zd-table-fixed-column": column.fixed,
                                         },
+                                        {
+                                          "theme--dark":
+                                            (_vm.$vuetify.theme.dark &&
+                                              !_vm.instance.light) ||
+                                            _vm.instance.dark,
+                                        },
+                                        {
+                                          "theme--light":
+                                            !_vm.$vuetify.theme.dark ||
+                                            _vm.instance.light,
+                                        },
                                         "text-" + column.align,
                                         _vm.instance.datasource.getOrderByColumn(
                                           column.name
@@ -1971,7 +2151,8 @@ var __vue_render__$7 = function () {
                                                                     Object.assign(
                                                                       {},
                                                                       _vm.getFilterActivatorEvents(
-                                                                        on
+                                                                        on,
+                                                                        column
                                                                       )
                                                                     )
                                                                   ),
@@ -2108,7 +2289,9 @@ var __vue_render__$7 = function () {
                                                                 : _vm._e(),
                                                               _vm._v(" "),
                                                               _c(
-                                                                _vm.componentType ||
+                                                                _vm.getComponentType(
+                                                                  filterIndex
+                                                                ) ||
                                                                   column
                                                                     .componentProps
                                                                     .component,
@@ -2139,12 +2322,20 @@ var __vue_render__$7 = function () {
                                                                       value:
                                                                         item.value,
                                                                       persistentHint: true,
+                                                                      hint: _vm.getComponentHint(
+                                                                        filterIndex
+                                                                      ),
                                                                       events: {
                                                                         input:
                                                                           _vm.getFilterValueChange(
                                                                             column,
                                                                             filterIndex
                                                                           ),
+                                                                        change:
+                                                                          _vm.getFilterValueChange(
+                                                                            column,
+                                                                            filterIndex
+                                                                          ),
                                                                       },
                                                                     }
                                                                   ),
@@ -2261,17 +2452,76 @@ var __vue_render__$7 = function () {
                         },
                         [
                           _vm.instance.selectable
-                            ? _c("td", {
-                                staticClass:
-                                  "zd-table-cell selectable zd-table-fixed-column",
-                              })
+                            ? _c(
+                                "td",
+                                {
+                                  class: [
+                                    "zd-table-cell",
+                                    "selectable",
+                                    "zd-table-fixed-column",
+                                    {
+                                      "theme--dark":
+                                        (_vm.$vuetify.theme.dark &&
+                                          !_vm.instance.light) ||
+                                        _vm.instance.dark,
+                                    },
+                                    {
+                                      "theme--light":
+                                        !_vm.$vuetify.theme.dark ||
+                                        _vm.instance.light,
+                                    },
+                                  ],
+                                },
+                                [
+                                  _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",
+                              class: [
+                                "zd-table-cell",
+                                "text-left",
+                                "zd-table-group-header",
+                                "zd-table-fixed-column",
+                                {
+                                  "theme--dark":
+                                    (_vm.$vuetify.theme.dark &&
+                                      !_vm.instance.light) ||
+                                    _vm.instance.dark,
+                                },
+                                {
+                                  "theme--light":
+                                    !_vm.$vuetify.theme.dark ||
+                                    _vm.instance.light,
+                                },
+                              ],
                               style:
                                 "left: " +
                                 (_vm.instance.selectable ? 40 : 0) +
@@ -2348,6 +2598,12 @@ var __vue_render__$7 = function () {
                             current: _vm.isCurrentRow(item),
                             footer: item.groupFooter,
                             summary: item.groupSummary,
+                            "theme--dark":
+                              (_vm.$vuetify.theme.dark &&
+                                !_vm.instance.light) ||
+                              _vm.instance.dark,
+                            "theme--light":
+                              !_vm.$vuetify.theme.dark || _vm.instance.light,
                           },
                           on: {
                             click: function ($event) {
@@ -2360,8 +2616,22 @@ var __vue_render__$7 = function () {
                             ? _c(
                                 "td",
                                 {
-                                  staticClass:
-                                    "zd-table-cell selectable zd-table-fixed-column",
+                                  class: [
+                                    "zd-table-cell",
+                                    "selectable",
+                                    "zd-table-fixed-column",
+                                    {
+                                      "theme--dark":
+                                        (_vm.$vuetify.theme.dark &&
+                                          !_vm.instance.light) ||
+                                        _vm.instance.dark,
+                                    },
+                                    {
+                                      "theme--light":
+                                        !_vm.$vuetify.theme.dark ||
+                                        _vm.instance.light,
+                                    },
+                                  ],
                                 },
                                 [
                                   _c("v-checkbox", {
@@ -2442,6 +2712,19 @@ var __vue_render__$7 = function () {
                                                     "zd-table-fixed-column":
                                                       column.fixed,
                                                   },
+                                                  {
+                                                    "theme--dark":
+                                                      (_vm.$vuetify.theme
+                                                        .dark &&
+                                                        !_vm.instance.light) ||
+                                                      _vm.instance.dark,
+                                                  },
+                                                  {
+                                                    "theme--light":
+                                                      !_vm.$vuetify.theme
+                                                        .dark ||
+                                                      _vm.instance.light,
+                                                  },
                                                 ],
                                                 style: [
                                                   Object.assign(
@@ -2455,9 +2738,11 @@ var __vue_render__$7 = function () {
                                                     cellProps
                                                   ).cssStyle,
                                                   {
-                                                    left: _vm.getFixedLeft(
-                                                      column
-                                                    ),
+                                                    left: column.fixed
+                                                      ? _vm.fixedLeft[
+                                                          column.name
+                                                        ]
+                                                      : "unset",
                                                   },
                                                 ],
                                                 on: {
@@ -2927,34 +3212,34 @@ var __vue_render__$7 = function () {
     },
   })
 };
-var __vue_staticRenderFns__$7 = [];
-__vue_render__$7._withStripped = true;
+var __vue_staticRenderFns__$9 = [];
+__vue_render__$9._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$7 = function (inject) {
+  const __vue_inject_styles__$9 = function (inject) {
     if (!inject) return
-    inject("data-v-6a084a11_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}", map: undefined, media: undefined });
+    inject("data-v-6718d0bc_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-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n  background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n  background: #3c3c3c !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.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\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}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n  background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n  background: #3c3c3c !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  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\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__$9 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$7 = undefined;
+  const __vue_module_identifier__$9 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$7 = false;
+  const __vue_is_functional_template__$9 = 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__$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,
     createInjector,
     undefined,
@@ -2971,6 +3256,7 @@ let TekGridColumnsOptionsController = class TekGridColumnsOptionsController {
         this.aggregationData = [];
         this.selectedColumnNames = [];
         this.searchValue = '';
+        this.showGroups = true;
         this.updatingSelect = false;
         this.modal = modal;
     }
@@ -3000,6 +3286,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) => {
@@ -3588,6 +3875,7 @@ TekGridColumnsOptionsModal.modalDef = {
         {
             name: 'tekGridColumnsOptionsGroupedRow',
             component: 'ZdRow',
+            isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
             children: [
                 {
                     name: 'tekGridColumnsOptionsGroupedCol',
@@ -3790,6 +4078,7 @@ TekGridColumnsOptionsModal.modalDef = {
                                 {
                                     name: 'tekGridColumnsOptionsColumnAggregation',
                                     component: 'ZdSelect',
+                                    isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
                                     autocomplete: false,
                                     label: 'TEKGRID_COLUMN_AGGREGATION',
                                     showHelper: false,
@@ -3811,6 +4100,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',
@@ -3905,6 +4195,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),
@@ -3914,13 +4208,13 @@ __decorate([
 TekGridColumnsButton = __decorate([
     Component
 ], TekGridColumnsButton);
-var script$6 = TekGridColumnsButton;
+var script$8 = TekGridColumnsButton;
 
 /* script */
-const __vue_script__$6 = script$6;
+const __vue_script__$8 = script$8;
 
 /* template */
-var __vue_render__$6 = function () {
+var __vue_render__$8 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -3942,6 +4236,7 @@ var __vue_render__$6 = function () {
       ],
       style: _vm.instance.cssStyle,
       attrs: {
+        id: _vm.instance.name,
         closeOnContentClick: false,
         "offset-y": "",
         "content-class":
@@ -4004,11 +4299,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(" "),
@@ -4055,77 +4354,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(),
                   ]
                 )
               }),
@@ -4173,34 +4476,34 @@ var __vue_render__$6 = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$6 = [];
-__vue_render__$6._withStripped = true;
+var __vue_staticRenderFns__$8 = [];
+__vue_render__$8._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$6 = function (inject) {
+  const __vue_inject_styles__$8 = 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-8459d5b8_0", { source: ".tek-grid-columns-button-options {\n  max-height: 250px;\n  display: flex;\n  flex-direction: column;\n  background-color: #fff;\n}\n.tek-grid-columns-button-options.theme--dark {\n  background-color: #1e1e1e;\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  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  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}\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__$8 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$6 = undefined;
+  const __vue_module_identifier__$8 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$6 = false;
+  const __vue_is_functional_template__$8 = 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__$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,
@@ -4248,7 +4551,7 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
             grid.datasource.order = layout.order !== undefined ? layout.order : grid.datasource.order;
             grid.datasource.filter = layout.filter !== undefined ? layout.filter : grid.datasource.filter;
             if (grid.datasource instanceof TekRestDatasource && layout.dynamicFilter !== undefined) {
-                grid.datasource.dynamicFilter = layout.dynamicFilter;
+                grid.datasource.dynamicFilter = this.getHelperValues(layout.dynamicFilter, layout.columns);
             }
             grid.columns = layout.columns.map((column) => {
                 const col = gridColumns[column.name];
@@ -4261,6 +4564,7 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
                 col.aggregation = column.aggregation;
                 col.minWidth = column.minWidth || '';
                 col.maxWidth = column.maxWidth || '';
+                this.setHelperValue(col, column.filterHelperValue || '');
                 return col;
             });
             // wait to change column orders
@@ -4268,7 +4572,7 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
                 grid.columns.forEach((_column, index) => {
                     const columnElement = tableElement.querySelector(`tr th:not(.selectable)[index="${index}"]`);
                     if (columnElement) {
-                        columnElement.style.width = layout.columns[index].width;
+                        columnElement.style.width = layout.columns[index].width || 'unset';
                     }
                 });
             });
@@ -4277,7 +4581,7 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
             grid.datasource.order = [...this.instance.originalDatasourceOrder];
             grid.datasource.filter = Object.assign({}, this.instance.originalDatasourceFilter);
             if (grid.datasource instanceof TekRestDatasource) {
-                grid.datasource.dynamicFilter = Object.assign({}, this.instance.originalDatasourceDynamicFilter);
+                grid.datasource.dynamicFilter = this.getHelperValues(this.instance.originalDatasourceDynamicFilter, this.instance.originalColumnProps);
             }
             grid.columns = this.instance.originalColumnProps.map((column) => {
                 const col = gridColumns[column.name];
@@ -4290,6 +4594,7 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
                 col.aggregation = column.aggregation;
                 col.minWidth = column.minWidth || '';
                 col.maxWidth = column.maxWidth || '';
+                this.setHelperValue(col, column.filterHelperValue || '');
                 return col;
             });
             tableElement.style.width = '100%';
@@ -4305,6 +4610,48 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
         }
         this.$refs.layoutMenu.isActive = false;
     }
+    setHelperValue(column, value) {
+        if (column instanceof TekGridColumn) {
+            if (!Array.isArray(column.filterProps) && typeof value === 'string') {
+                column.filterProps.helperValue = value;
+            }
+            else if (Array.isArray(column.filterProps) && Array.isArray(value)) {
+                column.filterProps.forEach((prop, index) => {
+                    prop.value = value[index];
+                });
+            }
+        }
+    }
+    getHelperValues(dynamicFilter, columns) {
+        const filter = cloneDeep(dynamicFilter);
+        Object.keys(filter).forEach((columnName) => {
+            const filterOptions = filter[columnName];
+            const column = columns[columns.findIndex((col) => col.name === columnName)];
+            const { filterHelperValue } = column;
+            filterOptions.forEach((item) => {
+                if (['IN', 'NOT_IN', 'BETWEEN'].includes(item.operation) && !Array.isArray(item.value)) {
+                    item.value = item.value.split(';');
+                }
+                let helperValue = '';
+                if (!Array.isArray(filterHelperValue)) {
+                    helperValue = filterHelperValue;
+                }
+                else {
+                    Object.keys(filterHelperValue).forEach((key) => {
+                        const value = filterHelperValue[key] || '';
+                        if (`${item.relation || 'AND'}-${item.operation || 'CONTAINS'}` === key) {
+                            helperValue = value;
+                        }
+                    });
+                }
+                if (helperValue) {
+                    const columnObj = this.instance.grid.getColumn(column.name);
+                    item.value = TekFilterHelper.getValue(helperValue, columnObj);
+                }
+            });
+        });
+        return filter;
+    }
     getCurrentLayout(layoutName) {
         const { grid } = this.instance;
         const tableElement = this.getParentTable();
@@ -4329,6 +4676,7 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
                     grouped: column.grouped,
                     groupOpened: column.groupOpened,
                     aggregation: column.aggregation,
+                    filterHelperValue: this.instance.getHelperValue(column),
                 };
             }),
         };
@@ -4350,13 +4698,13 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
 TekGridLayoutOptions = __decorate([
     Component
 ], TekGridLayoutOptions);
-var script$5 = TekGridLayoutOptions;
+var script$7 = TekGridLayoutOptions;
 
 /* script */
-const __vue_script__$5 = script$5;
+const __vue_script__$7 = script$7;
 
 /* template */
-var __vue_render__$5 = function () {
+var __vue_render__$7 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -4375,6 +4723,7 @@ var __vue_render__$5 = function () {
       class: ["tek-grid-layout-options", _vm.instance.cssClass],
       style: _vm.instance.cssStyle,
       attrs: {
+        id: _vm.instance.name,
         name: _vm.instance.name,
         "offset-y": "",
         closeOnContentClick: false,
@@ -4540,7 +4889,10 @@ var __vue_render__$5 = function () {
                       _vm._b(
                         {
                           attrs: {
-                            name: "tek-grid-layout-item-update_" + item,
+                            name:
+                              "tek-grid-layout-item-update_" +
+                              _vm.instance.name +
+                              item,
                           },
                         },
                         "zd-button",
@@ -4564,7 +4916,10 @@ var __vue_render__$5 = function () {
                       _vm._b(
                         {
                           attrs: {
-                            name: "tek-grid-layout-item-delete_" + item,
+                            name:
+                              "tek-grid-layout-item-delete_" +
+                              _vm.instance.name +
+                              item,
                           },
                         },
                         "zd-button",
@@ -4595,34 +4950,34 @@ var __vue_render__$5 = function () {
     1
   )
 };
-var __vue_staticRenderFns__$5 = [];
-__vue_render__$5._withStripped = true;
+var __vue_staticRenderFns__$7 = [];
+__vue_render__$7._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$5 = function (inject) {
+  const __vue_inject_styles__$7 = 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 });
+    inject("data-v-b7689878_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.theme--light {\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__$7 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$5 = undefined;
+  const __vue_module_identifier__$7 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$5 = false;
+  const __vue_is_functional_template__$7 = 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__$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,
@@ -4649,34 +5004,34 @@ __decorate([
 TekImage = __decorate([
     Component
 ], TekImage);
-var script$4 = TekImage;
+var script$6 = TekImage;
 
 /* script */
-const __vue_script__$4 = script$4;
+const __vue_script__$6 = script$6;
 
 /* template */
-var __vue_render__$4 = function () {
+var __vue_render__$6 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c(
     "router-link",
-    { attrs: { to: _vm.instance.to } },
+    { attrs: { id: _vm.instance.name, to: _vm.instance.to } },
     [_c("v-img", { attrs: { src: _vm.instance.src } })],
     1
   )
 };
-var __vue_staticRenderFns__$4 = [];
-__vue_render__$4._withStripped = true;
+var __vue_staticRenderFns__$6 = [];
+__vue_render__$6._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$4 = undefined;
+  const __vue_inject_styles__$6 = undefined;
   /* scoped */
-  const __vue_scope_id__$4 = undefined;
+  const __vue_scope_id__$6 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$4 = undefined;
+  const __vue_module_identifier__$6 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$4 = false;
+  const __vue_is_functional_template__$6 = false;
   /* style inject */
   
   /* style inject SSR */
@@ -4685,13 +5040,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__$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,
     undefined,
     undefined,
@@ -4716,13 +5071,13 @@ __decorate([
 TekIterableCarousel = __decorate([
     Component
 ], TekIterableCarousel);
-var script$3 = TekIterableCarousel;
+var script$5 = TekIterableCarousel;
 
 /* script */
-const __vue_script__$3 = script$3;
+const __vue_script__$5 = script$5;
 
 /* template */
-var __vue_render__$3 = function () {
+var __vue_render__$5 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -4739,7 +5094,7 @@ var __vue_render__$3 = function () {
       ],
       class: ["tek-iterable-carousel", _vm.instance.cssClass],
       style: _vm.instance.cssStyle,
-      attrs: { name: _vm.instance.name },
+      attrs: { id: _vm.instance.name, name: _vm.instance.name },
     },
     [
       _vm.instance.iterable.datasource.loading
@@ -4796,17 +5151,17 @@ var __vue_render__$3 = function () {
     1
   )
 };
-var __vue_staticRenderFns__$3 = [];
-__vue_render__$3._withStripped = true;
+var __vue_staticRenderFns__$5 = [];
+__vue_render__$5._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$3 = undefined;
+  const __vue_inject_styles__$5 = undefined;
   /* scoped */
-  const __vue_scope_id__$3 = undefined;
+  const __vue_scope_id__$5 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$3 = undefined;
+  const __vue_module_identifier__$5 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$3 = false;
+  const __vue_is_functional_template__$5 = false;
   /* style inject */
   
   /* style inject SSR */
@@ -4815,13 +5170,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__$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,
@@ -4888,20 +5243,23 @@ __decorate([
 TekIterableComponentRender = __decorate([
     Component
 ], TekIterableComponentRender);
-var script$2 = TekIterableComponentRender;
+var script$4 = TekIterableComponentRender;
 
 /* script */
-const __vue_script__$2 = script$2;
+const __vue_script__$4 = script$4;
 
 /* template */
-var __vue_render__$2 = function () {
+var __vue_render__$4 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _vm.instance.isVisible
     ? _c(
         "div",
-        { class: ["tek-iterable-component-render", _vm.instance.cssClass] },
+        {
+          class: ["tek-iterable-component-render", _vm.instance.cssClass],
+          attrs: { id: _vm.instance.name },
+        },
         [
           _vm.instance.toolbarSlot.length || !!_vm.$slots.toolbarSlot
             ? _c("div", { staticClass: "tek-iterable-toolbar" }, [
@@ -5070,40 +5428,125 @@ var __vue_render__$2 = function () {
       )
     : _vm._e()
 };
-var __vue_staticRenderFns__$2 = [];
-__vue_render__$2._withStripped = true;
+var __vue_staticRenderFns__$4 = [];
+__vue_render__$4._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$2 = function (inject) {
+  const __vue_inject_styles__$4 = 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 });
+    inject("data-v-42c57cb2_0", { source: ".tek-iterable-component-render[data-v-42c57cb2] {\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-42c57cb2],\n.tek-iterable-component-render .no--data[data-v-42c57cb2] {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n}\n.tek-iterable-component-render .no--data[data-v-42c57cb2] {\n  color: rgba(0, 0, 0, 0.38);\n}\n.tek-iterable-component-render .tek-iterable-toolbar[data-v-42c57cb2] {\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-42c57cb2] {\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__$4 = "data-v-42c57cb2";
   /* module identifier */
-  const __vue_module_identifier__$2 = undefined;
+  const __vue_module_identifier__$4 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$2 = false;
+  const __vue_is_functional_template__$4 = 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__$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,
     createInjector,
     undefined,
     undefined
   );
 
+// eslint-disable-next-line
+const loading = 'data:image/gif;base64,R0lGODlhlgCWAPf/AC1oxPa+ADarUdmsFEB/m0yTcjiMhEafWjFova2SNDZotX10VsOfJDlosFZnge25BnJtXTukVWVmaFh1eIuOZ1x0ZEFopHpyWGFpcS5ow+q2CVNnhmVnZvW9AW5qYUyKXUJnofW+AKWNOV9mcS9owZuGQTporlCGXbWXLmNrazxnqeKyDoGDZVFniFZ6ZNSpGJ+IPoR4Ud+wEURnnmtpYklnlll5YbGUMcagIk5njmhnZWpoZGF0aWBmbkdnmbyaKUtnlEaBfWdmZTNou0WUW5WDRFtmeGZmZ82kHqecTXqIdzRouGJmbPC6BIB2VDxnrGNmakyHYPO8AkxnkUh0qmRpZl9wZVxndmRmaVhnffS9AqmPN09ni96vEUmQWzBowC1ow2FtZVR3gl5ndFGCYEVnnF1mdGR9i1dnf7qZK4l7TnRvXOK1FD6eV8ijIG6Cgl58lF1rfEBnpFVsi1pmeo5+Sk56dz9np5OCRjaqUi5pxNarFndwWmNqZm9sYFx7a098itGnG4d6T7ikPKKLO1Rmg+e1Cr2bKVhme0GbVkpmk5mWW5GBSM+nHLiYLPG7BIp8TUKZWUFsqWJnbltmd0hnmNqtFExtm1tsgaiOOIx9TNuuE6CKPWJmbcqjH1OJb8CdJjFovlpwb+u5CzioU1aFbjdos0qYXJOPXWFwczepUnBsX8qrKuW0DD5nqdmsFUl+kTtnrDdntNKuI+OzDVRnhYuEV52HPzNqvjltuVBqkJeERNirFnVvXKSMOjVsvDmLhEJxsTloss+sJTeqUdyzGkaeWreYLmBqdjmMhDyhVvC8B49/STinVVV+YVp/bEuScq6fRj5tr8CnNUV/lUNnoGZnZkCFgTaqUVeCYTuLgz2Ig02RcUySck+QcTxpr5qQUFCPXjZsullviFh4ZNaxH0KAmEGYXFJ4oFCNcEdsoUicWpmFQkRooEFvsHt5YDepUXBvYzyKhESXWkeeWjxutcWlK250bYp+UFCQcGZoaLyeLtitFaGSR0OYV2ZmZiH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMy4wIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEMEVGRUY5RjYzRjYxMUVDQkRFNUM0MjQ5M0FFRTY2RSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEMEVGRUZBMDYzRjYxMUVDQkRFNUM0MjQ5M0FFRTY2RSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQwRUZFRjlENjNGNjExRUNCREU1QzQyNDkzQUVFNjZFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQwRUZFRjlFNjNGNjExRUNCREU1QzQyNDkzQUVFNjZFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1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3cr155ExDjZsyDKiK8weU4R9AcAWTCgTLcyulFBrCdu7eAHITSmhEpi8gPeirJEBcGDBJR0UNpwXMUksChgfdhxyg+TJlD/eudw480cmdjnf9fxxDAnRo0l3vII6teqNZhajfs1xBILWemlrlNAAt+6NNXz/zjji9OzhGSu1Rp6RSW/RzDOaicw5esZJrqpbx4iFiynZd0mYgtiuEQuaSndMmJAzhY4E8vDjy59Pv779+/jz69/Pv7///wAGKOCABBZo4IEIJqjgggw26OCDEEYo4YQUVmjhhRhmqOGGHHbo4YcghijiiCSWaOKJKKao4oostujiizDGKOOMNNZo44045qjjjjz26OOPQAYp5JBEFmnkkUgmqSRVAQEAIfkEBQQA/wAsAAAAAJYAlgAACPEA/wkcSLCgwYMIEypcyLChw4cQI0qcSLGixYsYM2rcyLGjx48gQ4ocSbKkyZMoU6pcybKly5cwY8qcSbOmzZs4c+rcybOnz59AgwodSrSo0aNIkypdyrSp06dQo0qdSrWq1atYs2rdyrWr169gw4odS7as2bNo06pdy7at27dw48qdS7eu3bt48+rdy7ev37+AAwseTLiw4cOIEytezLix48eQI0ueTLmy5cuYM2vezLmz58+gQ4seTbq06dOoU6tezbq169ewY8ueTbu27du4c+vezbu379/AgwsfTry48ePIkytfzry58+fQo0ufbjggACH5BAUEAP8ALAAAAAABAAEAAAgEAP8FBAA7';
+let TekLoading = class TekLoading extends ZdLoading {
+    constructor() {
+        super(...arguments);
+        this.instanceType = Loading;
+    }
+};
+__decorate([
+    Prop({ type: String, default: '' }),
+    __metadata("design:type", String)
+], TekLoading.prototype, "text", void 0);
+__decorate([
+    Prop({ type: String, default: loading }),
+    __metadata("design:type", String)
+], TekLoading.prototype, "image", void 0);
+__decorate([
+    Prop({ type: [Number, String], default: 999 }),
+    __metadata("design:type", Object)
+], TekLoading.prototype, "zdIndex", void 0);
+TekLoading = __decorate([
+    Component
+], TekLoading);
+var script$3 = TekLoading;
+
+/* script */
+const __vue_script__$3 = script$3;
+
+/* template */
+var __vue_render__$3 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "zd-loading",
+    _vm._b(
+      {},
+      "zd-loading",
+      {
+        name: _vm.instance.name,
+        text: _vm.instance.text,
+        image: _vm.instance.image,
+        zIndex: _vm.instance.zIndex,
+        textColor: _vm.textColor,
+        loadingColor: _vm.loadingColor,
+        size: _vm.size,
+        loadingWidth: _vm.loadingWidth,
+        opacity: _vm.opacity,
+      },
+      false
+    )
+  )
+};
+var __vue_staticRenderFns__$3 = [];
+__vue_render__$3._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$3 = undefined;
+  /* scoped */
+  const __vue_scope_id__$3 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$3 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$3 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  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,
+    undefined,
+    undefined,
+    undefined
+  );
+
 /**
  * TekNotifications component join an icon, title, rightSlot and a divider
  */
@@ -5126,19 +5569,19 @@ __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;
   return _c(
     "div",
-    { staticClass: "tek-notifications" },
+    { staticClass: "tek-notifications", attrs: { id: _vm.instance.name } },
     [
       _c(
         "tek-card-title",
@@ -5209,34 +5652,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 });
+    inject("data-v-30efacc6_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,
@@ -5302,13 +5745,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;
@@ -5319,9 +5762,16 @@ var __vue_render__ = function () {
           class: [
             "tek-product-card",
             { "tek-product-card--link": _vm.instance.events.click },
+            {
+              "theme--dark":
+                (_vm.$vuetify.theme.dark && !_vm.instance.light) ||
+                _vm.instance.dark,
+            },
+            { "theme--light": !_vm.$vuetify.theme.dark || _vm.instance.light },
             _vm.instance.cssClass,
           ],
           style: { width: _vm.instance.width },
+          attrs: { id: _vm.instance.name },
           on: {
             click: function ($event) {
               return _vm.click($event)
@@ -5334,6 +5784,8 @@ var __vue_render__ = function () {
             {
               attrs: {
                 name: _vm.instance.name,
+                dark: _vm.instance.dark,
+                light: _vm.instance.light,
                 elevation: 2,
                 to: _vm.instance.to,
               },
@@ -5428,13 +5880,1740 @@ var __vue_render__ = function () {
       )
     : _vm._e()
 };
+var __vue_staticRenderFns__$1 = [];
+__vue_render__$1._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$1 = function (inject) {
+    if (!inject) return
+    inject("data-v-67ead2c4_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 debounce(this.filterValueChange.bind(this, column, index), 1000);
+    }
+    isOperationArrayValues(operation) {
+        return ['IN', 'NOT_IN', 'BETWEEN'].includes(operation);
+    }
+    getComponentType(index) {
+        const operationListArray = this.operationList.split(';');
+        return this.isOperationArrayValues(operationListArray[index]) ? 'ZdTextInput' : '';
+    }
+    getComponentHint(index) {
+        const operationListArray = this.operationList.split(';');
+        return this.isOperationArrayValues(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);
+                const { value } = datasource.dynamicFilter[column.name][index];
+                if (prop === 'operation') {
+                    if (this.isOperationArrayValues(component.value) && !Array.isArray(value)) {
+                        datasource.dynamicFilter[column.name][index].value = [value];
+                    }
+                    if (!this.isOperationArrayValues(component.value) && Array.isArray(value)) {
+                        [datasource.dynamicFilter[column.name][index].value] = value;
+                    }
+                }
+                datasource.dynamicFilter[column.name][index][prop] = component.value;
+                if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
+                    this.debouncedDatasourceGet(this.instance);
+                    this.onChangeLayout(event, element);
+                }
+            }
+        }
+    }
+    convertToDateFormat(column, value, revert) {
+        const dateFormat = column.componentProps.dateFormat || Config.dateFormat;
+        const displayFormat = column.componentProps.displayFormat || Config.displayFormat;
+        if (revert) {
+            if (dayjs(value, displayFormat).isValid() || !dayjs(value, dateFormat).isValid()) {
+                return value;
+            }
+            return dayjs(value, dateFormat).format(displayFormat);
+        }
+        if (dayjs(value, dateFormat).isValid() || !dayjs(value, displayFormat).isValid()) {
+            return value;
+        }
+        return dayjs(value, displayFormat).format(dateFormat);
+    }
+    checkDateValueFormat(column, value, revert = false) {
+        if (['ZdDate', 'ZdDateRange'].includes(column.componentProps.component)) {
+            if (Array.isArray(value)) {
+                return value.map((item) => this.convertToDateFormat(column, item, revert));
+            }
+            return this.convertToDateFormat(column, value, revert);
+        }
+        return value;
+    }
+    filterValueChange(column, index, { component, event, element }) {
+        let { 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;
+                    if (this.isOperationArrayValues(operation)) {
+                        value = value.split(';');
+                    }
+                    value = this.checkDateValueFormat(column, value);
+                    datasource.dynamicFilter[column.name].push({
+                        relation,
+                        operation,
+                        value,
+                    });
+                }
+                else {
+                    if (this.isOperationArrayValues(datasource.dynamicFilter[column.name][index].operation)) {
+                        value = value.split(';');
+                    }
+                    value = this.checkDateValueFormat(column, value);
+                    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) => {
+                    let { value } = item;
+                    if (this.isOperationArrayValues(item.operation) && Array.isArray(value)) {
+                        value = this.checkDateValueFormat(column, value, true);
+                        value = value.join(';');
+                    }
+                    filterOptions.push(Object.assign(Object.assign({}, item), { value }));
+                });
+            }
+            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: {
+      id: _vm.instance.name,
+      "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,
+      dark: _vm.instance.dark,
+      light: _vm.instance.light,
+      "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
+                                                                          ),
+                                                                        change:
+                                                                          _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-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 });
+    inject("data-v-097f1242_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-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n  background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n  background: #3c3c3c !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.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\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}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n  background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n  background: #3c3c3c !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  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\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 */
@@ -5463,21 +7642,23 @@ __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__$g,
+    TekCardTitle: __vue_component__$f,
+    TekCrudAddButton: __vue_component__$e,
+    TekCrudCancelButton: __vue_component__$d,
+    TekCrudDeleteButton: __vue_component__$c,
+    TekCrudForm: __vue_component__$b,
+    TekCrudSaveButton: __vue_component__$a,
+    TekGrid: __vue_component__$9,
+    TekGridColumnsButton: __vue_component__$8,
+    TekGridLayoutOptions: __vue_component__$7,
+    TekImage: __vue_component__$6,
+    TekProductCard: __vue_component__$1,
+    TekIterableComponentRender: __vue_component__$4,
+    TekIterableCarousel: __vue_component__$5,
+    TekLoading: __vue_component__$3,
+    TekNotifications: __vue_component__$2,
+    TekTreeGrid: __vue_component__,
 };
 
 Icons.addIcons({
@@ -5498,4 +7679,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$g as TekBreadcrumbHeader, script$f as TekCardTitle, script$e as TekCrudAddButton, script$d as TekCrudCancelButton, script$c as TekCrudDeleteButton, script$b as TekCrudForm, script$a as TekCrudSaveButton, script$9 as TekGrid, script$8 as TekGridColumnsButton, script$7 as TekGridLayoutOptions, script$6 as TekImage, script$4 as TekIterableComponentRender, script$1 as TekProductCard, script as TekTreeGrid, TeknisaComponents as default };