@zeedhi/teknisa-components-vuetify 1.37.0 → 1.41.0

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

@@ -1,13 +1,14 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/common'), require('vue-property-decorator'), require('@zeedhi/teknisa-components-common'), require('@zeedhi/vuetify'), require('@zeedhi/core'), require('lodash.debounce'), require('sortablejs')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/common', 'vue-property-decorator', '@zeedhi/teknisa-components-common', '@zeedhi/vuetify', '@zeedhi/core', 'lodash.debounce', 'sortablejs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/teknisa-components-vuetify"] = {}, global.common, global["vue-property-decorator"], global["@zeedhi/teknisa-components-common"], global.vuetify, global.core, global.lodash.debounce, global.sortablejs));
-})(this, (function (exports, common, vuePropertyDecorator, teknisaComponentsCommon, vuetify, core, debounce, Sortable) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/common'), require('vue-property-decorator'), require('@zeedhi/teknisa-components-common'), require('@zeedhi/vuetify'), require('@zeedhi/core'), require('lodash.debounce'), require('sortablejs'), require('lodash.clonedeep')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/common', 'vue-property-decorator', '@zeedhi/teknisa-components-common', '@zeedhi/vuetify', '@zeedhi/core', 'lodash.debounce', 'sortablejs', 'lodash.clonedeep'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/teknisa-components-vuetify"] = {}, global.common, global["vue-property-decorator"], global["@zeedhi/teknisa-components-common"], global.vuetify, global.core, global.lodash.debounce, global.sortablejs, global.lodash.clonedeep));
+})(this, (function (exports, common, vuePropertyDecorator, teknisaComponentsCommon, vuetify, core, debounce, Sortable, cloneDeep) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
     var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
+    var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -59,7 +60,7 @@
     TekBreadcrumbHeader = __decorate([
         vuePropertyDecorator.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') {
@@ -190,20 +191,25 @@
     }
 
     /* 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(
@@ -259,34 +265,34 @@
         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,
@@ -329,19 +335,22 @@
     TekCardTitle = __decorate([
         vuePropertyDecorator.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",
@@ -432,34 +441,34 @@
         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,
@@ -532,13 +541,13 @@
     TekCrudAddButton = __decorate([
         vuePropertyDecorator.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;
@@ -554,7 +563,7 @@
                   return [
                     _c(
                       "span",
-                      _vm._g({}, on),
+                      _vm._g({ attrs: { id: _vm.instance.name } }, on),
                       [
                         _c("zd-button", {
                           attrs: {
@@ -603,17 +612,17 @@
         ]
       )
     };
-    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 */
@@ -622,13 +631,13 @@
       
 
       
-      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,
@@ -659,13 +668,13 @@
     TekCrudCancelButton = __decorate([
         vuePropertyDecorator.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;
@@ -681,7 +690,7 @@
                   return [
                     _c(
                       "span",
-                      _vm._g({}, on),
+                      _vm._g({ attrs: { id: _vm.instance.name } }, on),
                       [
                         _c("zd-button", {
                           attrs: {
@@ -730,17 +739,17 @@
         ]
       )
     };
-    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 */
@@ -749,13 +758,13 @@
       
 
       
-      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,
@@ -794,13 +803,13 @@
     TekCrudDeleteButton = __decorate([
         vuePropertyDecorator.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;
@@ -816,7 +825,7 @@
                   return [
                     _c(
                       "span",
-                      _vm._g({}, on),
+                      _vm._g({ attrs: { id: _vm.instance.name } }, on),
                       [
                         _c("zd-button", {
                           attrs: {
@@ -865,17 +874,17 @@
         ]
       )
     };
-    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 */
@@ -884,13 +893,13 @@
       
 
       
-      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,
@@ -909,13 +918,13 @@
     TekCrudForm = __decorate([
         vuePropertyDecorator.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;
@@ -932,7 +941,7 @@
           ],
           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();
@@ -989,34 +998,34 @@
         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,
@@ -1043,13 +1052,13 @@
     TekCrudSaveButton = __decorate([
         vuePropertyDecorator.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;
@@ -1065,7 +1074,7 @@
                   return [
                     _c(
                       "span",
-                      _vm._g({}, on),
+                      _vm._g({ attrs: { id: _vm.instance.name } }, on),
                       [
                         _c("zd-button", {
                           attrs: {
@@ -1114,17 +1123,17 @@
         ]
       )
     };
-    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 */
@@ -1133,13 +1142,13 @@
       
 
       
-      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,
@@ -1151,10 +1160,14 @@
     /**
      * TekGrid component
      */
-    let TekGrid = class TekGrid extends ZdGridEditable {
+    let TekGrid$1 = class TekGrid extends ZdGridEditable {
         constructor() {
             super(...arguments);
             this.instanceType = teknisaComponentsCommon.TekGrid;
+            /**
+             * Left distance for each column
+             */
+            this.fixedLeft = {};
             this.debouncedDatasourceGet = debounce__default["default"]((instance) => {
                 if (instance.events.beforeApplyFilter) {
                     instance.events.beforeApplyFilter({ component: instance });
@@ -1167,7 +1180,7 @@
                     datasource.get();
                 }
             }, 500);
-            this.componentType = '';
+            this.operationList = '';
             this.defaultOperation = '';
             this.defaultRelation = '';
             this.lastFilter = '';
@@ -1201,14 +1214,15 @@
                     // 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);
                 };
             });
@@ -1218,35 +1232,83 @@
             return this.filterItemChange.bind(this, prop, column, index);
         }
         getFilterValueChange(column, index) {
-            return this.filterValueChange.bind(this, column, index);
+            return debounce__default["default"](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 = core.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 teknisaComponentsCommon.TekRestDatasource || datasource instanceof teknisaComponentsCommon.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 || core.Config.dateFormat;
+            const displayFormat = column.componentProps.displayFormat || core.Config.displayFormat;
+            if (revert) {
+                if (core.dayjs(value, displayFormat).isValid() || !core.dayjs(value, dateFormat).isValid()) {
+                    return value;
                 }
+                return core.dayjs(value, dateFormat).format(displayFormat);
             }
-            this.onChangeLayout(event, element);
+            if (core.dayjs(value, dateFormat).isValid() || !core.dayjs(value, displayFormat).isValid()) {
+                return value;
+            }
+            return core.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 teknisaComponentsCommon.TekRestDatasource || datasource instanceof teknisaComponentsCommon.TekMemoryDatasource) {
                 this.lastFilter = JSON.stringify(datasource.dynamicFilter);
                 if (value) {
@@ -1267,6 +1329,10 @@
                         const operationSelectName = name.replace('-filter-value-', '-filter-operation-');
                         const operationSelect = core.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,
@@ -1274,6 +1340,10 @@
                         });
                     }
                     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;
                     }
                 }
@@ -1290,6 +1360,8 @@
                 }
                 if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
                     this.debouncedDatasourceGet(this.instance);
+                    this.onChangeLayout(event, element);
+                    this.clearHelperValues(column);
                 }
             }
             else {
@@ -1302,9 +1374,20 @@
                 }
                 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 = [];
@@ -1313,7 +1396,12 @@
                 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({
@@ -1372,7 +1460,7 @@
                 if (!a.fixed && b.fixed)
                     return 1;
                 return -1;
-            });
+            }).filter((item) => item instanceof teknisaComponentsCommon.TekGridColumn);
         }
         updateFixedColumns() {
             if (this.instance.columns.filter((column) => column.fixed).length === 0)
@@ -1389,104 +1477,163 @@
                 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(vuetify.ZdGrid).resizeMouseMoveHandler.call(this, event);
+            if (this.resizeColumn.fixed) {
+                this.$nextTick(this.updateFixedColumns);
+            }
         }
     };
     __decorate([
         vuePropertyDecorator.Prop({ type: [String], default: '' }),
         __metadata("design:type", String)
-    ], TekGrid.prototype, "title", void 0);
+    ], TekGrid$1.prototype, "title", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
         __metadata("design:type", Object)
-    ], TekGrid.prototype, "addButton", void 0);
+    ], TekGrid$1.prototype, "addButton", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [String], default: 'none' }),
         __metadata("design:type", String)
-    ], TekGrid.prototype, "deleteButton", void 0);
+    ], TekGrid$1.prototype, "deleteButton", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
         __metadata("design:type", Object)
-    ], TekGrid.prototype, "columnsButton", void 0);
+    ], TekGrid$1.prototype, "columnsButton", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [Array, String], default: () => [] }),
         __metadata("design:type", Object)
-    ], TekGrid.prototype, "columnsButtonIgnore", void 0);
+    ], TekGrid$1.prototype, "columnsButtonIgnore", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
         __metadata("design:type", Object)
-    ], TekGrid.prototype, "filterButton", void 0);
+    ], TekGrid$1.prototype, "filterButton", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
         __metadata("design:type", Object)
-    ], TekGrid.prototype, "columnFilterButton", void 0);
+    ], TekGrid$1.prototype, "columnFilterButton", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [Array], default: () => [] }),
         __metadata("design:type", Array)
-    ], TekGrid.prototype, "actions", void 0);
+    ], TekGrid$1.prototype, "actions", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [String, Boolean], default: true }),
         __metadata("design:type", Object)
-    ], TekGrid.prototype, "dragColumns", void 0);
+    ], TekGrid$1.prototype, "dragColumns", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [String, Boolean], default: true }),
         __metadata("design:type", Object)
-    ], TekGrid.prototype, "resizeColumns", void 0);
+    ], TekGrid$1.prototype, "resizeColumns", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [String, Boolean], default: true }),
         __metadata("design:type", Object)
-    ], TekGrid.prototype, "showLayoutOptions", void 0);
+    ], TekGrid$1.prototype, "showLayoutOptions", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [String, Boolean], default: false }),
         __metadata("design:type", Object)
-    ], TekGrid.prototype, "showExport", void 0);
+    ], TekGrid$1.prototype, "showExport", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [String, Boolean], default: true }),
         __metadata("design:type", Object)
-    ], TekGrid.prototype, "showReload", void 0);
+    ], TekGrid$1.prototype, "showReload", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [String, Array] }),
         __metadata("design:type", Array)
-    ], TekGrid.prototype, "exportConfig", void 0);
+    ], TekGrid$1.prototype, "exportConfig", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [Array] }),
         __metadata("design:type", Array)
-    ], TekGrid.prototype, "exportActions", void 0);
+    ], TekGrid$1.prototype, "exportActions", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [String, Boolean], default: false }),
         __metadata("design:type", Object)
-    ], TekGrid.prototype, "groupsOpened", void 0);
+    ], TekGrid$1.prototype, "groupsOpened", void 0);
     __decorate([
         vuePropertyDecorator.Prop({ type: [String, Boolean], default: true }),
         __metadata("design:type", Object)
-    ], TekGrid.prototype, "showSummaryTotal", void 0);
+    ], TekGrid$1.prototype, "showSummaryTotal", void 0);
     __decorate([
         vuePropertyDecorator.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([
         vuePropertyDecorator.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;
@@ -1508,12 +1655,13 @@
         ],
         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,
@@ -1521,6 +1669,8 @@
           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",
@@ -1564,7 +1714,6 @@
                   key: "header",
                   fn: function (ref) {
                     var props = ref.props;
-                    var on = ref.on;
                     return [
                       _c("thead", { staticClass: "zd-grid-table-header" }, [
                         _c(
@@ -1574,8 +1723,22 @@
                               ? _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,
@@ -1599,7 +1762,7 @@
                                       on: {
                                         click: function ($event) {
                                           $event.stopPropagation();
-                                          on["toggle-select-all"](!props.everyItem);
+                                          _vm.toggleSelectAll();
                                           _vm.selectAllClick(
                                             !props.everyItem,
                                             $event
@@ -1629,13 +1792,30 @@
                                           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
@@ -1974,7 +2154,8 @@
                                                                         Object.assign(
                                                                           {},
                                                                           _vm.getFilterActivatorEvents(
-                                                                            on
+                                                                            on,
+                                                                            column
                                                                           )
                                                                         )
                                                                       ),
@@ -2111,7 +2292,9 @@
                                                                     : _vm._e(),
                                                                   _vm._v(" "),
                                                                   _c(
-                                                                    _vm.componentType ||
+                                                                    _vm.getComponentType(
+                                                                      filterIndex
+                                                                    ) ||
                                                                       column
                                                                         .componentProps
                                                                         .component,
@@ -2142,12 +2325,20 @@
                                                                           value:
                                                                             item.value,
                                                                           persistentHint: true,
+                                                                          hint: _vm.getComponentHint(
+                                                                            filterIndex
+                                                                          ),
                                                                           events: {
                                                                             input:
                                                                               _vm.getFilterValueChange(
                                                                                 column,
                                                                                 filterIndex
                                                                               ),
+                                                                            change:
+                                                                              _vm.getFilterValueChange(
+                                                                                column,
+                                                                                filterIndex
+                                                                              ),
                                                                           },
                                                                         }
                                                                       ),
@@ -2264,17 +2455,76 @@
                             },
                             [
                               _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) +
@@ -2351,6 +2601,12 @@
                                 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) {
@@ -2363,8 +2619,22 @@
                                 ? _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", {
@@ -2445,6 +2715,19 @@
                                                         "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(
@@ -2458,9 +2741,11 @@
                                                         cellProps
                                                       ).cssStyle,
                                                       {
-                                                        left: _vm.getFixedLeft(
-                                                          column
-                                                        ),
+                                                        left: column.fixed
+                                                          ? _vm.fixedLeft[
+                                                              column.name
+                                                            ]
+                                                          : "unset",
                                                       },
                                                     ],
                                                     on: {
@@ -2930,34 +3215,34 @@
         },
       })
     };
-    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,
@@ -2974,6 +3259,7 @@
             this.aggregationData = [];
             this.selectedColumnNames = [];
             this.searchValue = '';
+            this.showGroups = true;
             this.updatingSelect = false;
             this.modal = modal;
         }
@@ -3003,6 +3289,7 @@
         set instance(instance) {
             this.instanceValue = instance;
             this.iterableComponent = instance.iterableComponent;
+            this.showGroups = instance.iterableComponent instanceof teknisaComponentsCommon.TekGrid;
             this.aggregationData = instance.getAggregationSelectData();
             this.columnData = {};
             this.iterableComponent.columns.forEach((column) => {
@@ -3591,6 +3878,7 @@
             {
                 name: 'tekGridColumnsOptionsGroupedRow',
                 component: 'ZdRow',
+                isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
                 children: [
                     {
                         name: 'tekGridColumnsOptionsGroupedCol',
@@ -3793,6 +4081,7 @@
                                     {
                                         name: 'tekGridColumnsOptionsColumnAggregation',
                                         component: 'ZdSelect',
+                                        isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
                                         autocomplete: false,
                                         label: 'TEKGRID_COLUMN_AGGREGATION',
                                         showHelper: false,
@@ -3814,6 +4103,7 @@
                                     {
                                         name: 'tekGridColumnsOptionsColumnGroupOpened',
                                         component: 'ZdCheckbox',
+                                        isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
                                         cssClass: 'zd-form-input-align',
                                         disabled: `{{${TekGridColumnsOptionsModal.controllerName}.notGroupInSelection}}`,
                                         label: 'TEKGRID_COLUMN_GROUP_OPENED',
@@ -3908,6 +4198,10 @@
             this.menuIsOpened = false;
         }
     };
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
+        __metadata("design:type", Object)
+    ], TekGridColumnsButton.prototype, "hideGroups", void 0);
     __decorate([
         vuePropertyDecorator.Watch('menuIsOpened'),
         __metadata("design:type", Function),
@@ -3917,13 +4211,13 @@
     TekGridColumnsButton = __decorate([
         vuePropertyDecorator.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;
@@ -3945,6 +4239,7 @@
           ],
           style: _vm.instance.cssStyle,
           attrs: {
+            id: _vm.instance.name,
             closeOnContentClick: false,
             "offset-y": "",
             "content-class":
@@ -4007,11 +4302,15 @@
                     _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(" "),
@@ -4058,77 +4357,81 @@
                           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(),
                       ]
                     )
                   }),
@@ -4176,34 +4479,34 @@
         ]
       )
     };
-    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,
@@ -4251,7 +4554,7 @@
                 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 teknisaComponentsCommon.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];
@@ -4264,6 +4567,7 @@
                     col.aggregation = column.aggregation;
                     col.minWidth = column.minWidth || '';
                     col.maxWidth = column.maxWidth || '';
+                    this.setHelperValue(col, column.filterHelperValue || '');
                     return col;
                 });
                 // wait to change column orders
@@ -4271,7 +4575,7 @@
                     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';
                         }
                     });
                 });
@@ -4280,7 +4584,7 @@
                 grid.datasource.order = [...this.instance.originalDatasourceOrder];
                 grid.datasource.filter = Object.assign({}, this.instance.originalDatasourceFilter);
                 if (grid.datasource instanceof teknisaComponentsCommon.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];
@@ -4293,6 +4597,7 @@
                     col.aggregation = column.aggregation;
                     col.minWidth = column.minWidth || '';
                     col.maxWidth = column.maxWidth || '';
+                    this.setHelperValue(col, column.filterHelperValue || '');
                     return col;
                 });
                 tableElement.style.width = '100%';
@@ -4308,6 +4613,48 @@
             }
             this.$refs.layoutMenu.isActive = false;
         }
+        setHelperValue(column, value) {
+            if (column instanceof teknisaComponentsCommon.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__default["default"](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 = teknisaComponentsCommon.TekFilterHelper.getValue(helperValue, columnObj);
+                    }
+                });
+            });
+            return filter;
+        }
         getCurrentLayout(layoutName) {
             const { grid } = this.instance;
             const tableElement = this.getParentTable();
@@ -4332,6 +4679,7 @@
                         grouped: column.grouped,
                         groupOpened: column.groupOpened,
                         aggregation: column.aggregation,
+                        filterHelperValue: this.instance.getHelperValue(column),
                     };
                 }),
             };
@@ -4353,13 +4701,13 @@
     TekGridLayoutOptions = __decorate([
         vuePropertyDecorator.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;
@@ -4378,6 +4726,7 @@
           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,
@@ -4543,7 +4892,10 @@
                           _vm._b(
                             {
                               attrs: {
-                                name: "tek-grid-layout-item-update_" + item,
+                                name:
+                                  "tek-grid-layout-item-update_" +
+                                  _vm.instance.name +
+                                  item,
                               },
                             },
                             "zd-button",
@@ -4567,7 +4919,10 @@
                           _vm._b(
                             {
                               attrs: {
-                                name: "tek-grid-layout-item-delete_" + item,
+                                name:
+                                  "tek-grid-layout-item-delete_" +
+                                  _vm.instance.name +
+                                  item,
                               },
                             },
                             "zd-button",
@@ -4598,34 +4953,34 @@
         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,
@@ -4652,34 +5007,34 @@
     TekImage = __decorate([
         vuePropertyDecorator.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 */
@@ -4688,13 +5043,13 @@
       
 
       
-      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,
@@ -4719,13 +5074,13 @@
     TekIterableCarousel = __decorate([
         vuePropertyDecorator.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;
@@ -4742,7 +5097,7 @@
           ],
           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
@@ -4799,17 +5154,17 @@
         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 */
@@ -4818,13 +5173,13 @@
       
 
       
-      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,
@@ -4891,20 +5246,23 @@
     TekIterableComponentRender = __decorate([
         vuePropertyDecorator.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" }, [
@@ -5073,40 +5431,125 @@
           )
         : _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 vuetify.ZdLoading {
+        constructor() {
+            super(...arguments);
+            this.instanceType = teknisaComponentsCommon.Loading;
+        }
+    };
+    __decorate([
+        vuePropertyDecorator.Prop({ type: String, default: '' }),
+        __metadata("design:type", String)
+    ], TekLoading.prototype, "text", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: String, default: loading }),
+        __metadata("design:type", String)
+    ], TekLoading.prototype, "image", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [Number, String], default: 999 }),
+        __metadata("design:type", Object)
+    ], TekLoading.prototype, "zdIndex", void 0);
+    TekLoading = __decorate([
+        vuePropertyDecorator.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
      */
@@ -5129,19 +5572,19 @@
     TekNotifications = __decorate([
         vuePropertyDecorator.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",
@@ -5212,34 +5655,34 @@
         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,
@@ -5305,13 +5748,13 @@
     TekProductCard = __decorate([
         vuePropertyDecorator.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;
@@ -5322,9 +5765,16 @@
               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)
@@ -5337,6 +5787,8 @@
                 {
                   attrs: {
                     name: _vm.instance.name,
+                    dark: _vm.instance.dark,
+                    light: _vm.instance.light,
                     elevation: 2,
                     to: _vm.instance.to,
                   },
@@ -5431,13 +5883,1740 @@
           )
         : _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 = vuetify.components.ZdTreeGridEditable;
+    /**
+     * TekGrid component
+     */
+    let TekGrid = class TekGrid extends ZdTreeGridEditable {
+        constructor() {
+            super(...arguments);
+            this.instanceType = teknisaComponentsCommon.TekTreeGrid;
+            this.debouncedDatasourceGet = debounce__default["default"]((instance) => {
+                if (instance.events.beforeApplyFilter) {
+                    instance.events.beforeApplyFilter({ component: instance });
+                }
+                const { datasource } = instance;
+                if (datasource instanceof teknisaComponentsCommon.TekRestDatasource || datasource instanceof teknisaComponentsCommon.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 = core.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__default["default"](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 = core.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 teknisaComponentsCommon.TekRestDatasource || datasource instanceof teknisaComponentsCommon.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 || core.Config.dateFormat;
+            const displayFormat = column.componentProps.displayFormat || core.Config.displayFormat;
+            if (revert) {
+                if (core.dayjs(value, displayFormat).isValid() || !core.dayjs(value, dateFormat).isValid()) {
+                    return value;
+                }
+                return core.dayjs(value, dateFormat).format(displayFormat);
+            }
+            if (core.dayjs(value, dateFormat).isValid() || !core.dayjs(value, displayFormat).isValid()) {
+                return value;
+            }
+            return core.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 teknisaComponentsCommon.TekRestDatasource || datasource instanceof teknisaComponentsCommon.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 = core.Metadata.getInstance(relationSelectName);
+                            relation = relationSelect.value;
+                        }
+                        else {
+                            relation = 'AND';
+                        }
+                        const operationSelectName = name.replace('-filter-value-', '-filter-operation-');
+                        const operationSelect = core.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 teknisaComponentsCommon.TekRestDatasource || datasource instanceof teknisaComponentsCommon.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 teknisaComponentsCommon.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([
+        vuePropertyDecorator.Prop({ type: [String], default: '' }),
+        __metadata("design:type", String)
+    ], TekGrid.prototype, "title", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
+        __metadata("design:type", Object)
+    ], TekGrid.prototype, "addButton", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String], default: 'none' }),
+        __metadata("design:type", String)
+    ], TekGrid.prototype, "deleteButton", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
+        __metadata("design:type", Object)
+    ], TekGrid.prototype, "columnsButton", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [Array, String], default: () => [] }),
+        __metadata("design:type", Object)
+    ], TekGrid.prototype, "columnsButtonIgnore", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
+        __metadata("design:type", Object)
+    ], TekGrid.prototype, "filterButton", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
+        __metadata("design:type", Object)
+    ], TekGrid.prototype, "columnFilterButton", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [Array], default: () => [] }),
+        __metadata("design:type", Array)
+    ], TekGrid.prototype, "actions", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String, Boolean], default: true }),
+        __metadata("design:type", Object)
+    ], TekGrid.prototype, "dragColumns", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String, Boolean], default: true }),
+        __metadata("design:type", Object)
+    ], TekGrid.prototype, "resizeColumns", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String, Boolean], default: true }),
+        __metadata("design:type", Object)
+    ], TekGrid.prototype, "showLayoutOptions", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String, Boolean], default: false }),
+        __metadata("design:type", Object)
+    ], TekGrid.prototype, "showExport", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String, Boolean], default: true }),
+        __metadata("design:type", Object)
+    ], TekGrid.prototype, "showReload", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String, Array] }),
+        __metadata("design:type", Array)
+    ], TekGrid.prototype, "exportConfig", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [Array] }),
+        __metadata("design:type", Array)
+    ], TekGrid.prototype, "exportActions", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({
+            type: Array,
+            default: () => undefined,
+        }),
+        __metadata("design:type", Array)
+    ], TekGrid.prototype, "toolbarSlot", void 0);
+    TekGrid = __decorate([
+        vuePropertyDecorator.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 */
@@ -5466,21 +7645,23 @@
       );
 
     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__,
     };
 
     common.Icons.addIcons({
@@ -5501,19 +7682,20 @@
         },
     };
 
-    exports.TekBreadcrumbHeader = script$e;
-    exports.TekCardTitle = script$d;
-    exports.TekCrudAddButton = script$c;
-    exports.TekCrudCancelButton = script$b;
-    exports.TekCrudDeleteButton = script$a;
-    exports.TekCrudForm = script$9;
-    exports.TekCrudSaveButton = script$8;
-    exports.TekGrid = script$7;
-    exports.TekGridColumnsButton = script$6;
-    exports.TekGridLayoutOptions = script$5;
-    exports.TekImage = script$4;
-    exports.TekIterableComponentRender = script$2;
-    exports.TekProductCard = script;
+    exports.TekBreadcrumbHeader = script$g;
+    exports.TekCardTitle = script$f;
+    exports.TekCrudAddButton = script$e;
+    exports.TekCrudCancelButton = script$d;
+    exports.TekCrudDeleteButton = script$c;
+    exports.TekCrudForm = script$b;
+    exports.TekCrudSaveButton = script$a;
+    exports.TekGrid = script$9;
+    exports.TekGridColumnsButton = script$8;
+    exports.TekGridLayoutOptions = script$7;
+    exports.TekImage = script$6;
+    exports.TekIterableComponentRender = script$4;
+    exports.TekProductCard = script$1;
+    exports.TekTreeGrid = script;
     exports["default"] = TeknisaComponents;
 
     Object.defineProperty(exports, '__esModule', { value: true });