@zeedhi/teknisa-components-vuetify 1.38.0 → 1.39.0

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

@@ -60,7 +60,7 @@
     TekBreadcrumbHeader = __decorate([
         vuePropertyDecorator.Component
     ], TekBreadcrumbHeader);
-    var script$e = TekBreadcrumbHeader;
+    var script$f = TekBreadcrumbHeader;
 
     function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
         if (typeof shadowMode !== 'boolean') {
@@ -191,10 +191,10 @@
     }
 
     /* script */
-    const __vue_script__$e = script$e;
+    const __vue_script__$f = script$f;
 
     /* template */
-    var __vue_render__$e = function () {
+    var __vue_render__$f = function () {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
@@ -260,34 +260,34 @@
         1
       )
     };
-    var __vue_staticRenderFns__$e = [];
-    __vue_render__$e._withStripped = true;
+    var __vue_staticRenderFns__$f = [];
+    __vue_render__$f._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$e = function (inject) {
+      const __vue_inject_styles__$f = function (inject) {
         if (!inject) return
         inject("data-v-cb6f4dac_0", { source: ".tek-breadcrumb-header .tek-breadcrumb-header-title-col {\n  display: flex;\n  padding-top: 5px;\n  padding-left: 0;\n}\n.tek-breadcrumb-header .tek-breadcrumb-header-title-col .tek-breadcrumb-header-slot-right {\n  margin-left: auto;\n}\n.tek-breadcrumb-header .zd-breadcrumbs {\n  padding: 0;\n  font-size: var(--zd-font-body2-size);\n}\n.tek-breadcrumb-header .zd-breadcrumbs .v-breadcrumbs__item--disabled {\n  color: #667080;\n}\n.tek-breadcrumb-header .zd-text {\n  color: #667080;\n}\n.tek-breadcrumb-header .zd-text.tek-breadcrumb-header-title {\n  font-size: 32px;\n  font-weight: bold;\n  line-height: 35px;\n  margin-bottom: 10px;\n}\n.tek-breadcrumb-header .zd-text > p {\n  margin: 0;\n}", map: undefined, media: undefined });
 
       };
       /* scoped */
-      const __vue_scope_id__$e = undefined;
+      const __vue_scope_id__$f = undefined;
       /* module identifier */
-      const __vue_module_identifier__$e = undefined;
+      const __vue_module_identifier__$f = undefined;
       /* functional template */
-      const __vue_is_functional_template__$e = false;
+      const __vue_is_functional_template__$f = false;
       /* style inject SSR */
       
       /* style inject shadow dom */
       
 
       
-      const __vue_component__$e = /*#__PURE__*/normalizeComponent(
-        { render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
-        __vue_inject_styles__$e,
-        __vue_script__$e,
-        __vue_scope_id__$e,
-        __vue_is_functional_template__$e,
-        __vue_module_identifier__$e,
+      const __vue_component__$f = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$f, staticRenderFns: __vue_staticRenderFns__$f },
+        __vue_inject_styles__$f,
+        __vue_script__$f,
+        __vue_scope_id__$f,
+        __vue_is_functional_template__$f,
+        __vue_module_identifier__$f,
         false,
         createInjector,
         undefined,
@@ -330,13 +330,13 @@
     TekCardTitle = __decorate([
         vuePropertyDecorator.Component
     ], TekCardTitle);
-    var script$d = TekCardTitle;
+    var script$e = TekCardTitle;
 
     /* script */
-    const __vue_script__$d = script$d;
+    const __vue_script__$e = script$e;
 
     /* template */
-    var __vue_render__$d = function () {
+    var __vue_render__$e = function () {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
@@ -433,34 +433,34 @@
         1
       )
     };
-    var __vue_staticRenderFns__$d = [];
-    __vue_render__$d._withStripped = true;
+    var __vue_staticRenderFns__$e = [];
+    __vue_render__$e._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$d = function (inject) {
+      const __vue_inject_styles__$e = function (inject) {
         if (!inject) return
         inject("data-v-520a641c_0", { source: ".tek-card-title-row {\n  display: flex;\n  align-items: center;\n}\n.tek-card-title-row .tek-card-title-text {\n  color: var(--v-primary-base);\n  font-weight: bold;\n  font-size: 20px;\n}\n.tek-card-title-row .tek-card-subtitle-text {\n  padding-left: 10px;\n  color: var(--zd-font-color);\n  font-size: 13px;\n}\n.tek-card-title-row .tek-card-title-text,\n.tek-card-title-row .tek-card-subtitle-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: baseline;\n}\n.tek-card-title-row .v-icon {\n  color: var(--v-primary-base);\n  padding-right: calc(var(--zd-default-padding) / 2);\n}\n.tek-card-title .v-divider {\n  margin-bottom: 16px;\n}\n.tek-card-title .tek-card-title-router {\n  text-decoration: none;\n}\n.tek-card-title .tek-card-title-no-router {\n  text-decoration: none;\n  cursor: default;\n}", map: undefined, media: undefined });
 
       };
       /* scoped */
-      const __vue_scope_id__$d = undefined;
+      const __vue_scope_id__$e = undefined;
       /* module identifier */
-      const __vue_module_identifier__$d = undefined;
+      const __vue_module_identifier__$e = undefined;
       /* functional template */
-      const __vue_is_functional_template__$d = false;
+      const __vue_is_functional_template__$e = false;
       /* style inject SSR */
       
       /* style inject shadow dom */
       
 
       
-      const __vue_component__$d = /*#__PURE__*/normalizeComponent(
-        { render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
-        __vue_inject_styles__$d,
-        __vue_script__$d,
-        __vue_scope_id__$d,
-        __vue_is_functional_template__$d,
-        __vue_module_identifier__$d,
+      const __vue_component__$e = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
+        __vue_inject_styles__$e,
+        __vue_script__$e,
+        __vue_scope_id__$e,
+        __vue_is_functional_template__$e,
+        __vue_module_identifier__$e,
         false,
         createInjector,
         undefined,
@@ -533,13 +533,13 @@
     TekCrudAddButton = __decorate([
         vuePropertyDecorator.Component
     ], TekCrudAddButton);
-    var script$c = TekCrudAddButton;
+    var script$d = TekCrudAddButton;
 
     /* script */
-    const __vue_script__$c = script$c;
+    const __vue_script__$d = script$d;
 
     /* template */
-    var __vue_render__$c = function () {
+    var __vue_render__$d = function () {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
@@ -604,17 +604,17 @@
         ]
       )
     };
-    var __vue_staticRenderFns__$c = [];
-    __vue_render__$c._withStripped = true;
+    var __vue_staticRenderFns__$d = [];
+    __vue_render__$d._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$c = undefined;
+      const __vue_inject_styles__$d = undefined;
       /* scoped */
-      const __vue_scope_id__$c = undefined;
+      const __vue_scope_id__$d = undefined;
       /* module identifier */
-      const __vue_module_identifier__$c = undefined;
+      const __vue_module_identifier__$d = undefined;
       /* functional template */
-      const __vue_is_functional_template__$c = false;
+      const __vue_is_functional_template__$d = false;
       /* style inject */
       
       /* style inject SSR */
@@ -623,13 +623,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__$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,
@@ -660,13 +660,13 @@
     TekCrudCancelButton = __decorate([
         vuePropertyDecorator.Component
     ], TekCrudCancelButton);
-    var script$b = TekCrudCancelButton;
+    var script$c = TekCrudCancelButton;
 
     /* script */
-    const __vue_script__$b = script$b;
+    const __vue_script__$c = script$c;
 
     /* template */
-    var __vue_render__$b = function () {
+    var __vue_render__$c = function () {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
@@ -731,17 +731,17 @@
         ]
       )
     };
-    var __vue_staticRenderFns__$b = [];
-    __vue_render__$b._withStripped = true;
+    var __vue_staticRenderFns__$c = [];
+    __vue_render__$c._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$b = undefined;
+      const __vue_inject_styles__$c = undefined;
       /* scoped */
-      const __vue_scope_id__$b = undefined;
+      const __vue_scope_id__$c = undefined;
       /* module identifier */
-      const __vue_module_identifier__$b = undefined;
+      const __vue_module_identifier__$c = undefined;
       /* functional template */
-      const __vue_is_functional_template__$b = false;
+      const __vue_is_functional_template__$c = false;
       /* style inject */
       
       /* style inject SSR */
@@ -750,13 +750,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__$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,
@@ -795,13 +795,13 @@
     TekCrudDeleteButton = __decorate([
         vuePropertyDecorator.Component
     ], TekCrudDeleteButton);
-    var script$a = TekCrudDeleteButton;
+    var script$b = TekCrudDeleteButton;
 
     /* script */
-    const __vue_script__$a = script$a;
+    const __vue_script__$b = script$b;
 
     /* template */
-    var __vue_render__$a = function () {
+    var __vue_render__$b = function () {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
@@ -866,17 +866,17 @@
         ]
       )
     };
-    var __vue_staticRenderFns__$a = [];
-    __vue_render__$a._withStripped = true;
+    var __vue_staticRenderFns__$b = [];
+    __vue_render__$b._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$a = undefined;
+      const __vue_inject_styles__$b = undefined;
       /* scoped */
-      const __vue_scope_id__$a = undefined;
+      const __vue_scope_id__$b = undefined;
       /* module identifier */
-      const __vue_module_identifier__$a = undefined;
+      const __vue_module_identifier__$b = undefined;
       /* functional template */
-      const __vue_is_functional_template__$a = false;
+      const __vue_is_functional_template__$b = false;
       /* style inject */
       
       /* style inject SSR */
@@ -885,13 +885,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__$b = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
+        __vue_inject_styles__$b,
+        __vue_script__$b,
+        __vue_scope_id__$b,
+        __vue_is_functional_template__$b,
+        __vue_module_identifier__$b,
         false,
         undefined,
         undefined,
@@ -910,13 +910,13 @@
     TekCrudForm = __decorate([
         vuePropertyDecorator.Component
     ], TekCrudForm);
-    var script$9 = TekCrudForm;
+    var script$a = TekCrudForm;
 
     /* script */
-    const __vue_script__$9 = script$9;
+    const __vue_script__$a = script$a;
 
     /* template */
-    var __vue_render__$9 = function () {
+    var __vue_render__$a = function () {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
@@ -990,34 +990,34 @@
         2
       )
     };
-    var __vue_staticRenderFns__$9 = [];
-    __vue_render__$9._withStripped = true;
+    var __vue_staticRenderFns__$a = [];
+    __vue_render__$a._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$9 = function (inject) {
+      const __vue_inject_styles__$a = function (inject) {
         if (!inject) return
         inject("data-v-aa2c2e04_0", { source: ".tek-crud-form {\n  outline: none;\n}", map: undefined, media: undefined });
 
       };
       /* scoped */
-      const __vue_scope_id__$9 = undefined;
+      const __vue_scope_id__$a = undefined;
       /* module identifier */
-      const __vue_module_identifier__$9 = undefined;
+      const __vue_module_identifier__$a = undefined;
       /* functional template */
-      const __vue_is_functional_template__$9 = false;
+      const __vue_is_functional_template__$a = false;
       /* style inject SSR */
       
       /* style inject shadow dom */
       
 
       
-      const __vue_component__$9 = /*#__PURE__*/normalizeComponent(
-        { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
-        __vue_inject_styles__$9,
-        __vue_script__$9,
-        __vue_scope_id__$9,
-        __vue_is_functional_template__$9,
-        __vue_module_identifier__$9,
+      const __vue_component__$a = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
+        __vue_inject_styles__$a,
+        __vue_script__$a,
+        __vue_scope_id__$a,
+        __vue_is_functional_template__$a,
+        __vue_module_identifier__$a,
         false,
         createInjector,
         undefined,
@@ -1044,13 +1044,13 @@
     TekCrudSaveButton = __decorate([
         vuePropertyDecorator.Component
     ], TekCrudSaveButton);
-    var script$8 = TekCrudSaveButton;
+    var script$9 = TekCrudSaveButton;
 
     /* script */
-    const __vue_script__$8 = script$8;
+    const __vue_script__$9 = script$9;
 
     /* template */
-    var __vue_render__$8 = function () {
+    var __vue_render__$9 = function () {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
@@ -1115,17 +1115,17 @@
         ]
       )
     };
-    var __vue_staticRenderFns__$8 = [];
-    __vue_render__$8._withStripped = true;
+    var __vue_staticRenderFns__$9 = [];
+    __vue_render__$9._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$8 = undefined;
+      const __vue_inject_styles__$9 = undefined;
       /* scoped */
-      const __vue_scope_id__$8 = undefined;
+      const __vue_scope_id__$9 = undefined;
       /* module identifier */
-      const __vue_module_identifier__$8 = undefined;
+      const __vue_module_identifier__$9 = undefined;
       /* functional template */
-      const __vue_is_functional_template__$8 = false;
+      const __vue_is_functional_template__$9 = false;
       /* style inject */
       
       /* style inject SSR */
@@ -1134,13 +1134,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__$9 = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
+        __vue_inject_styles__$9,
+        __vue_script__$9,
+        __vue_scope_id__$9,
+        __vue_is_functional_template__$9,
+        __vue_module_identifier__$9,
         false,
         undefined,
         undefined,
@@ -1152,7 +1152,7 @@
     /**
      * TekGrid component
      */
-    let TekGrid = class TekGrid extends ZdGridEditable {
+    let TekGrid$1 = class TekGrid extends ZdGridEditable {
         constructor() {
             super(...arguments);
             this.instanceType = teknisaComponentsCommon.TekGrid;
@@ -1401,7 +1401,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)
@@ -1430,92 +1430,142 @@
                 return 'unset';
             return headerElement[0].style.left;
         }
+        isGroupSelected(item) {
+            return item.children.every((child) => {
+                const { uniqueKey } = this.instance.datasource;
+                const idx = this.instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                return idx !== -1;
+            });
+        }
+        isGroupSelectIndeterminate(item) {
+            let hasSelected = false;
+            let hasNotSelected = false;
+            const { uniqueKey } = this.instance.datasource;
+            item.children.forEach((child) => {
+                const idx = this.instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                hasSelected = hasSelected || idx !== -1;
+                hasNotSelected = hasNotSelected || idx === -1;
+            });
+            return hasSelected && hasNotSelected;
+        }
+        selectGroup(item, event) {
+            const { uniqueKey } = this.instance.datasource;
+            const isSelected = this.isGroupSelected(item);
+            if (!isSelected) {
+                item.children.forEach((child) => {
+                    const idx = this.instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                    if (idx === -1) {
+                        this.instance.selectedRows.push(child);
+                    }
+                });
+            }
+            else {
+                this.instance.selectedRows = this.instance.selectedRows.filter((row) => {
+                    const idx = item.children.findIndex((child) => child[uniqueKey] === row[uniqueKey]);
+                    return idx === -1;
+                });
+            }
+            this.selectGroupRowClick(item, !isSelected, event);
+        }
+        selectGroupRowClick(row, isSelected, event) {
+            this.$nextTick(() => {
+                this.instance.selectGroupClick(row, isSelected, event, this.$el);
+            });
+        }
+        toggleSelectAll() {
+            if (this.instance.selectedRows.length === this.instance.datasource.data.length) {
+                this.instance.selectedRows = [];
+            }
+            else {
+                this.instance.selectedRows = this.instance.datasource.data;
+            }
+        }
     };
     __decorate([
         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$8 = TekGrid$1;
 
     /* script */
-    const __vue_script__$7 = script$7;
+    const __vue_script__$8 = script$8;
 
     /* template */
-    var __vue_render__$7 = function () {
+    var __vue_render__$8 = function () {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
@@ -1593,7 +1643,6 @@
                   key: "header",
                   fn: function (ref) {
                     var props = ref.props;
-                    var on = ref.on;
                     return [
                       _c("thead", { staticClass: "zd-grid-table-header" }, [
                         _c(
@@ -1628,7 +1677,7 @@
                                       on: {
                                         click: function ($event) {
                                           $event.stopPropagation();
-                                          on["toggle-select-all"](!props.everyItem);
+                                          _vm.toggleSelectAll();
                                           _vm.selectAllClick(
                                             !props.everyItem,
                                             $event
@@ -1658,6 +1707,10 @@
                                           refInFor: true,
                                           class: [
                                             "zd-table-cell",
+                                            "column-th-" +
+                                              column.name +
+                                              "-" +
+                                              _vm.instance.name,
                                             {
                                               sortable:
                                                 column.sortable &&
@@ -2299,33 +2352,63 @@
                             },
                             [
                               _vm.instance.selectable
-                                ? _c("td", {
-                                    staticClass:
-                                      "zd-table-cell selectable zd-table-fixed-column",
-                                  })
-                                : _vm._e(),
-                              _vm._v(" "),
-                              _c(
-                                "td",
-                                {
-                                  staticClass:
-                                    "zd-table-cell text-left zd-table-group-header zd-table-fixed-column",
-                                  style:
-                                    "left: " +
-                                    (_vm.instance.selectable ? 40 : 0) +
-                                    "px",
-                                  attrs: { colspan: 999 },
-                                },
-                                [
-                                  _c(
-                                    "span",
+                                ? _c(
+                                    "td",
                                     {
-                                      staticClass: "zd-table-group-container",
-                                      style:
-                                        "left: " +
-                                        (_vm.instance.selectable ? 48 : 8) +
-                                        "px",
-                                    },
+                                      staticClass:
+                                        "zd-table-cell selectable zd-table-fixed-column",
+                                    },
+                                    [
+                                      _c("v-checkbox", {
+                                        staticClass: "zd-grid-row-checkbox",
+                                        attrs: {
+                                          "hide-details": "",
+                                          color: "primary",
+                                          disabled: _vm.instance.editing,
+                                          "on-icon": _vm.$getIcon("checkboxOn"),
+                                          "off-icon": _vm.$getIcon("checkboxOff"),
+                                          "indeterminate-icon": _vm.$getIcon(
+                                            "checkboxIndeterminate"
+                                          ),
+                                          "true-value": true,
+                                          "false-value": false,
+                                          "input-value": _vm.isGroupSelected(item),
+                                          indeterminate:
+                                            _vm.isGroupSelectIndeterminate(item),
+                                        },
+                                        on: {
+                                          click: function ($event) {
+                                            $event.stopPropagation();
+                                            return _vm.selectGroup(item, $event)
+                                          },
+                                        },
+                                      }),
+                                    ],
+                                    1
+                                  )
+                                : _vm._e(),
+                              _vm._v(" "),
+                              _c(
+                                "td",
+                                {
+                                  staticClass:
+                                    "zd-table-cell text-left zd-table-group-header zd-table-fixed-column",
+                                  style:
+                                    "left: " +
+                                    (_vm.instance.selectable ? 40 : 0) +
+                                    "px",
+                                  attrs: { colspan: 999 },
+                                },
+                                [
+                                  _c(
+                                    "span",
+                                    {
+                                      staticClass: "zd-table-group-container",
+                                      style:
+                                        "left: " +
+                                        (_vm.instance.selectable ? 48 : 8) +
+                                        "px",
+                                    },
                                     [
                                       _vm._l(
                                         item.groupHeaders,
@@ -2965,34 +3048,34 @@
         },
       })
     };
-    var __vue_staticRenderFns__$7 = [];
-    __vue_render__$7._withStripped = true;
+    var __vue_staticRenderFns__$8 = [];
+    __vue_render__$8._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$7 = function (inject) {
+      const __vue_inject_styles__$8 = function (inject) {
         if (!inject) return
-        inject("data-v-1f93e5e4_0", { source: ".tek-grid .zd-grid-toolbar {\n  height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n  align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n  margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n  line-height: 22px;\n}\n.tek-grid table thead tr th {\n  padding-right: 15px !important;\n}\n.tek-grid table thead tr th.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 4;\n  background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n  font-weight: 700;\n  font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n  font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n  font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n  transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n  position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n  background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n  width: 22px;\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n  width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 14px;\n  height: 100%;\n  border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n  width: 10px;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n  height: 60%;\n  border-bottom: solid 1px #ccc;\n  position: relative;\n  top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  background: white;\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
+        inject("data-v-7c368a9c_0", { source: ".tek-grid .zd-grid-toolbar {\n  height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n  align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n  margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n  line-height: 22px;\n}\n.tek-grid table thead tr th {\n  padding-right: 15px !important;\n}\n.tek-grid table thead tr th.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 4;\n  background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n  font-weight: 700;\n  font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n  font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n  font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n  transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n  position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n  background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n  width: 22px;\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n  width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 14px;\n  height: 100%;\n  border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n  width: 10px;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n  height: 60%;\n  border-bottom: solid 1px #ccc;\n  position: relative;\n  top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  background: white;\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
 
       };
       /* scoped */
-      const __vue_scope_id__$7 = undefined;
+      const __vue_scope_id__$8 = undefined;
       /* module identifier */
-      const __vue_module_identifier__$7 = undefined;
+      const __vue_module_identifier__$8 = undefined;
       /* functional template */
-      const __vue_is_functional_template__$7 = false;
+      const __vue_is_functional_template__$8 = false;
       /* style inject SSR */
       
       /* style inject shadow dom */
       
 
       
-      const __vue_component__$7 = /*#__PURE__*/normalizeComponent(
-        { render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
-        __vue_inject_styles__$7,
-        __vue_script__$7,
-        __vue_scope_id__$7,
-        __vue_is_functional_template__$7,
-        __vue_module_identifier__$7,
+      const __vue_component__$8 = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
+        __vue_inject_styles__$8,
+        __vue_script__$8,
+        __vue_scope_id__$8,
+        __vue_is_functional_template__$8,
+        __vue_module_identifier__$8,
         false,
         createInjector,
         undefined,
@@ -3009,6 +3092,7 @@
             this.aggregationData = [];
             this.selectedColumnNames = [];
             this.searchValue = '';
+            this.showGroups = true;
             this.updatingSelect = false;
             this.modal = modal;
         }
@@ -3038,6 +3122,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) => {
@@ -3626,6 +3711,7 @@
             {
                 name: 'tekGridColumnsOptionsGroupedRow',
                 component: 'ZdRow',
+                isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
                 children: [
                     {
                         name: 'tekGridColumnsOptionsGroupedCol',
@@ -3828,6 +3914,7 @@
                                     {
                                         name: 'tekGridColumnsOptionsColumnAggregation',
                                         component: 'ZdSelect',
+                                        isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
                                         autocomplete: false,
                                         label: 'TEKGRID_COLUMN_AGGREGATION',
                                         showHelper: false,
@@ -3849,6 +3936,7 @@
                                     {
                                         name: 'tekGridColumnsOptionsColumnGroupOpened',
                                         component: 'ZdCheckbox',
+                                        isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
                                         cssClass: 'zd-form-input-align',
                                         disabled: `{{${TekGridColumnsOptionsModal.controllerName}.notGroupInSelection}}`,
                                         label: 'TEKGRID_COLUMN_GROUP_OPENED',
@@ -3943,6 +4031,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),
@@ -3952,13 +4044,13 @@
     TekGridColumnsButton = __decorate([
         vuePropertyDecorator.Component
     ], TekGridColumnsButton);
-    var script$6 = TekGridColumnsButton;
+    var script$7 = TekGridColumnsButton;
 
     /* script */
-    const __vue_script__$6 = script$6;
+    const __vue_script__$7 = script$7;
 
     /* template */
-    var __vue_render__$6 = function () {
+    var __vue_render__$7 = function () {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
@@ -4042,11 +4134,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(" "),
@@ -4093,77 +4189,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(),
                       ]
                     )
                   }),
@@ -4211,34 +4311,34 @@
         ]
       )
     };
-    var __vue_staticRenderFns__$6 = [];
-    __vue_render__$6._withStripped = true;
+    var __vue_staticRenderFns__$7 = [];
+    __vue_render__$7._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$6 = function (inject) {
+      const __vue_inject_styles__$7 = function (inject) {
         if (!inject) return
-        inject("data-v-0b148da7_0", { source: ".tek-grid-columns-button-options {\n  max-height: 250px;\n  display: flex;\n  flex-direction: column;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper {\n  flex: 1;\n  overflow-y: auto;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table {\n  padding: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);\n  background-color: white;\n  font-size: 13px;\n  border-spacing: 0;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table thead tr th {\n  padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n  text-align: left;\n  background: white;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td {\n  padding: var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name {\n  cursor: -webkit-grab;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name > span {\n  padding-right: 4px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-aggregation {\n  max-width: 150px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer {\n  display: flex;\n  background: white;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer .zd-button {\n  flex: 1;\n}\n.tek-grid-columns-button-sortable-drag {\n  background: white;\n}\n.tek-grid-column-option-box {\n  margin: var(--spacing-1);\n  background: #ccc;\n  padding: 2px var(--spacing-1);\n  cursor: pointer;\n}\n.tek-grid-column-option-box > * {\n  display: inline-block;\n}\n.tek-grid-column-option-box > .zd-icon {\n  font-size: 0.9rem;\n  margin-left: var(--spacing-2);\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true {\n  cursor: default;\n  background: #fafafa;\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true > .zd-icon {\n  display: none;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true {\n  background: var(--v-primary-base);\n  color: white;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true > .zd-icon {\n  color: white;\n}\n.tek-grid-column-option-container-col {\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container {\n  background: #eee;\n  padding: var(--spacing-1);\n  max-height: 100px;\n  min-height: 42px;\n  align-content: center;\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .tek-iterable-footer {\n  display: none !important;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .zd-text.no-data {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-size: 0.7rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-label {\n  font-weight: var(--zd-font-body2-weight);\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-select-all {\n  position: absolute;\n  top: 0.5rem;\n  right: var(--spacing-1);\n  color: var(--v-primary-base);\n  cursor: pointer;\n  font-size: 0.8rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-drop-here {\n  position: absolute;\n  z-index: 100;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 35px;\n}\n.tek-grid-column-option-detail-name {\n  color: var(--v-primary-base);\n  font-weight: var(--zd-font-body2-weight);\n  font-size: 1.1rem;\n  margin-top: var(--spacing-6);\n}", map: undefined, media: undefined });
+        inject("data-v-6c9f5d6a_0", { source: ".tek-grid-columns-button-options {\n  max-height: 250px;\n  display: flex;\n  flex-direction: column;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper {\n  flex: 1;\n  overflow-y: auto;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table {\n  padding: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);\n  background-color: white;\n  font-size: 13px;\n  border-spacing: 0;\n  width: 100%;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table thead tr th {\n  padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n  text-align: left;\n  background: white;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td {\n  padding: var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name {\n  cursor: -webkit-grab;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name > span {\n  padding-right: 4px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-aggregation {\n  max-width: 150px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer {\n  display: flex;\n  background: white;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer .zd-button {\n  flex: 1;\n}\n.tek-grid-columns-button-sortable-drag {\n  background: white;\n}\n.tek-grid-column-option-box {\n  margin: var(--spacing-1);\n  background: #ccc;\n  padding: 2px var(--spacing-1);\n  cursor: pointer;\n}\n.tek-grid-column-option-box > * {\n  display: inline-block;\n}\n.tek-grid-column-option-box > .zd-icon {\n  font-size: 0.9rem;\n  margin-left: var(--spacing-2);\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true {\n  cursor: default;\n  background: #fafafa;\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true > .zd-icon {\n  display: none;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true {\n  background: var(--v-primary-base);\n  color: white;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true > .zd-icon {\n  color: white;\n}\n.tek-grid-column-option-container-col {\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container {\n  background: #eee;\n  padding: var(--spacing-1);\n  max-height: 100px;\n  min-height: 42px;\n  align-content: center;\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .tek-iterable-footer {\n  display: none !important;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .zd-text.no-data {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-size: 0.7rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-label {\n  font-weight: var(--zd-font-body2-weight);\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-select-all {\n  position: absolute;\n  top: 0.5rem;\n  right: var(--spacing-1);\n  color: var(--v-primary-base);\n  cursor: pointer;\n  font-size: 0.8rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-drop-here {\n  position: absolute;\n  z-index: 100;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 35px;\n}\n.tek-grid-column-option-detail-name {\n  color: var(--v-primary-base);\n  font-weight: var(--zd-font-body2-weight);\n  font-size: 1.1rem;\n  margin-top: var(--spacing-6);\n}", map: undefined, media: undefined });
 
       };
       /* scoped */
-      const __vue_scope_id__$6 = undefined;
+      const __vue_scope_id__$7 = undefined;
       /* module identifier */
-      const __vue_module_identifier__$6 = undefined;
+      const __vue_module_identifier__$7 = undefined;
       /* functional template */
-      const __vue_is_functional_template__$6 = false;
+      const __vue_is_functional_template__$7 = false;
       /* style inject SSR */
       
       /* style inject shadow dom */
       
 
       
-      const __vue_component__$6 = /*#__PURE__*/normalizeComponent(
-        { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
-        __vue_inject_styles__$6,
-        __vue_script__$6,
-        __vue_scope_id__$6,
-        __vue_is_functional_template__$6,
-        __vue_module_identifier__$6,
+      const __vue_component__$7 = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
+        __vue_inject_styles__$7,
+        __vue_script__$7,
+        __vue_scope_id__$7,
+        __vue_is_functional_template__$7,
+        __vue_module_identifier__$7,
         false,
         createInjector,
         undefined,
@@ -4433,13 +4533,13 @@
     TekGridLayoutOptions = __decorate([
         vuePropertyDecorator.Component
     ], TekGridLayoutOptions);
-    var script$5 = TekGridLayoutOptions;
+    var script$6 = TekGridLayoutOptions;
 
     /* script */
-    const __vue_script__$5 = script$5;
+    const __vue_script__$6 = script$6;
 
     /* template */
-    var __vue_render__$5 = function () {
+    var __vue_render__$6 = function () {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
@@ -4678,34 +4778,34 @@
         1
       )
     };
-    var __vue_staticRenderFns__$5 = [];
-    __vue_render__$5._withStripped = true;
+    var __vue_staticRenderFns__$6 = [];
+    __vue_render__$6._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$5 = function (inject) {
+      const __vue_inject_styles__$6 = function (inject) {
         if (!inject) return
         inject("data-v-29ce02fa_0", { source: ".tek-grid-layout-options-badge .v-badge__badge {\n  font-size: var(--zd-font-caption-size);\n  font-weight: var(--zd-font-caption-weight);\n  line-height: 14px;\n  pointer-events: none;\n  background-color: var(--zd-badge-background-color) !important;\n}\n.tek-grid-layout-options-badge .v-badge__badge span {\n  color: var(--zd-badge-text-color) !important;\n}\n.tek-grid-layout-item {\n  font-size: 13px;\n  cursor: pointer;\n  min-height: 30px;\n}\n.tek-grid-layout-item.selected {\n  font-weight: 700;\n}\n.tek-grid-layout-item:hover {\n  background: #eee;\n}\n.tek-grid-layout-item:hover .tek-grid-layout-item-buttons {\n  display: inherit;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons {\n  display: none;\n  position: absolute;\n  right: 5px;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons .v-icon {\n  font-size: 12px;\n}", map: undefined, media: undefined });
 
       };
       /* scoped */
-      const __vue_scope_id__$5 = undefined;
+      const __vue_scope_id__$6 = undefined;
       /* module identifier */
-      const __vue_module_identifier__$5 = undefined;
+      const __vue_module_identifier__$6 = undefined;
       /* functional template */
-      const __vue_is_functional_template__$5 = false;
+      const __vue_is_functional_template__$6 = false;
       /* style inject SSR */
       
       /* style inject shadow dom */
       
 
       
-      const __vue_component__$5 = /*#__PURE__*/normalizeComponent(
-        { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
-        __vue_inject_styles__$5,
-        __vue_script__$5,
-        __vue_scope_id__$5,
-        __vue_is_functional_template__$5,
-        __vue_module_identifier__$5,
+      const __vue_component__$6 = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
+        __vue_inject_styles__$6,
+        __vue_script__$6,
+        __vue_scope_id__$6,
+        __vue_is_functional_template__$6,
+        __vue_module_identifier__$6,
         false,
         createInjector,
         undefined,
@@ -4732,13 +4832,13 @@
     TekImage = __decorate([
         vuePropertyDecorator.Component
     ], TekImage);
-    var script$4 = TekImage;
+    var script$5 = TekImage;
 
     /* script */
-    const __vue_script__$4 = script$4;
+    const __vue_script__$5 = script$5;
 
     /* template */
-    var __vue_render__$4 = function () {
+    var __vue_render__$5 = function () {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
@@ -4749,17 +4849,17 @@
         1
       )
     };
-    var __vue_staticRenderFns__$4 = [];
-    __vue_render__$4._withStripped = true;
+    var __vue_staticRenderFns__$5 = [];
+    __vue_render__$5._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$4 = undefined;
+      const __vue_inject_styles__$5 = undefined;
       /* scoped */
-      const __vue_scope_id__$4 = undefined;
+      const __vue_scope_id__$5 = undefined;
       /* module identifier */
-      const __vue_module_identifier__$4 = undefined;
+      const __vue_module_identifier__$5 = undefined;
       /* functional template */
-      const __vue_is_functional_template__$4 = false;
+      const __vue_is_functional_template__$5 = false;
       /* style inject */
       
       /* style inject SSR */
@@ -4768,13 +4868,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__$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,
@@ -4799,13 +4899,13 @@
     TekIterableCarousel = __decorate([
         vuePropertyDecorator.Component
     ], TekIterableCarousel);
-    var script$3 = TekIterableCarousel;
+    var script$4 = TekIterableCarousel;
 
     /* script */
-    const __vue_script__$3 = script$3;
+    const __vue_script__$4 = script$4;
 
     /* template */
-    var __vue_render__$3 = function () {
+    var __vue_render__$4 = function () {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
@@ -4879,17 +4979,17 @@
         1
       )
     };
-    var __vue_staticRenderFns__$3 = [];
-    __vue_render__$3._withStripped = true;
+    var __vue_staticRenderFns__$4 = [];
+    __vue_render__$4._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$3 = undefined;
+      const __vue_inject_styles__$4 = undefined;
       /* scoped */
-      const __vue_scope_id__$3 = undefined;
+      const __vue_scope_id__$4 = undefined;
       /* module identifier */
-      const __vue_module_identifier__$3 = undefined;
+      const __vue_module_identifier__$4 = undefined;
       /* functional template */
-      const __vue_is_functional_template__$3 = false;
+      const __vue_is_functional_template__$4 = false;
       /* style inject */
       
       /* style inject SSR */
@@ -4898,13 +4998,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__$4 = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
+        __vue_inject_styles__$4,
+        __vue_script__$4,
+        __vue_scope_id__$4,
+        __vue_is_functional_template__$4,
+        __vue_module_identifier__$4,
         false,
         undefined,
         undefined,
@@ -4971,13 +5071,13 @@
     TekIterableComponentRender = __decorate([
         vuePropertyDecorator.Component
     ], TekIterableComponentRender);
-    var script$2 = TekIterableComponentRender;
+    var script$3 = TekIterableComponentRender;
 
     /* script */
-    const __vue_script__$2 = script$2;
+    const __vue_script__$3 = script$3;
 
     /* template */
-    var __vue_render__$2 = function () {
+    var __vue_render__$3 = function () {
       var _vm = this;
       var _h = _vm.$createElement;
       var _c = _vm._self._c || _h;
@@ -5153,34 +5253,34 @@
           )
         : _vm._e()
     };
-    var __vue_staticRenderFns__$2 = [];
-    __vue_render__$2._withStripped = true;
+    var __vue_staticRenderFns__$3 = [];
+    __vue_render__$3._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$2 = function (inject) {
+      const __vue_inject_styles__$3 = function (inject) {
         if (!inject) return
         inject("data-v-02c0169b_0", { source: ".tek-iterable-component-render[data-v-02c0169b] {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-box-flex: 1;\n  flex: 1 1 auto;\n}\n.tek-iterable-component-render .error--text[data-v-02c0169b],\n.tek-iterable-component-render .no--data[data-v-02c0169b] {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n}\n.tek-iterable-component-render .no--data[data-v-02c0169b] {\n  color: rgba(0, 0, 0, 0.38);\n}\n.tek-iterable-component-render .tek-iterable-toolbar[data-v-02c0169b] {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  align-items: center;\n  width: 100%;\n}\n.tek-iterable-component-render .tek-iterable-footer[data-v-02c0169b] {\n  padding: 5px 0;\n  display: flex;\n  width: 100%;\n}", map: undefined, media: undefined });
 
       };
       /* scoped */
-      const __vue_scope_id__$2 = "data-v-02c0169b";
+      const __vue_scope_id__$3 = "data-v-02c0169b";
       /* module identifier */
-      const __vue_module_identifier__$2 = undefined;
+      const __vue_module_identifier__$3 = undefined;
       /* functional template */
-      const __vue_is_functional_template__$2 = false;
+      const __vue_is_functional_template__$3 = false;
       /* style inject SSR */
       
       /* style inject shadow dom */
       
 
       
-      const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
-        { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
-        __vue_inject_styles__$2,
-        __vue_script__$2,
-        __vue_scope_id__$2,
-        __vue_is_functional_template__$2,
-        __vue_module_identifier__$2,
+      const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
+        __vue_inject_styles__$3,
+        __vue_script__$3,
+        __vue_scope_id__$3,
+        __vue_is_functional_template__$3,
+        __vue_module_identifier__$3,
         false,
         createInjector,
         undefined,
@@ -5209,13 +5309,13 @@
     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;
@@ -5292,34 +5392,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 });
 
       };
       /* 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,
@@ -5385,13 +5485,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;
@@ -5511,14 +5611,1686 @@
           )
         : _vm._e()
     };
-    var __vue_staticRenderFns__ = [];
-    __vue_render__._withStripped = true;
+    var __vue_staticRenderFns__$1 = [];
+    __vue_render__$1._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__ = function (inject) {
+      const __vue_inject_styles__$1 = function (inject) {
         if (!inject) return
         inject("data-v-541eabd6_0", { source: ".tek-product-card * {\n  text-decoration: none;\n}\n.tek-product-card .v-card {\n  padding: 0%;\n}\n.tek-product-card .v-card .tek-image-content {\n  text-align: center;\n}\n.tek-product-card .v-card .tek-product-card-image-container {\n  position: relative;\n}\n.tek-product-card .v-card .tek-product-card-info {\n  display: flex;\n  flex-direction: column;\n  padding: 5px 10px 10px 10px;\n  color: var(--zd-font-color);\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-title {\n  white-space: nowrap;\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 16px;\n  line-height: 19px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-supplier {\n  font-size: var(--zd-font-body2-size);\n  line-height: 14px;\n  color: #c4c4c4;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 10px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-brand {\n  font-size: var(--zd-font-body2-size);\n  line-height: 14px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-price {\n  font-weight: var(--zd-font-body4-weight);\n  font-size: var(--zd-font-body4-size);\n  line-height: 16px;\n}\n.tek-product-card--link .v-card {\n  cursor: pointer;\n}", map: undefined, media: undefined });
 
+      };
+      /* scoped */
+      const __vue_scope_id__$1 = undefined;
+      /* module identifier */
+      const __vue_module_identifier__$1 = undefined;
+      /* functional template */
+      const __vue_is_functional_template__$1 = false;
+      /* style inject SSR */
+      
+      /* style inject shadow dom */
+      
+
+      
+      const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+        __vue_inject_styles__$1,
+        __vue_script__$1,
+        __vue_scope_id__$1,
+        __vue_is_functional_template__$1,
+        __vue_module_identifier__$1,
+        false,
+        createInjector,
+        undefined,
+        undefined
+      );
+
+    // eslint-disable-next-line prefer-destructuring
+    const ZdTreeGridEditable = 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 this.filterValueChange.bind(this, column, index);
+        }
+        getComponentType(index) {
+            this.operationList.split(';');
+            const operationListArray = this.operationList.split(';');
+            return ['IN', 'NOT_IN', 'BETWEEN'].includes(operationListArray[index]) ? 'ZdTextInput' : '';
+        }
+        getComponentHint(index) {
+            const operationListArray = this.operationList.split(';');
+            return ['IN', 'NOT_IN', 'BETWEEN'].includes(operationListArray[index]) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
+        }
+        filterItemChange(prop, column, index, { component, event, element }) {
+            const { name } = component;
+            const valueInputName = name.replace(`-filter-${prop}-`, '-filter-value-');
+            const valueInput = 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);
+                    datasource.dynamicFilter[column.name][index][prop] = component.value;
+                    if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
+                        this.debouncedDatasourceGet(this.instance);
+                        this.onChangeLayout(event, element);
+                    }
+                }
+            }
+        }
+        filterValueChange(column, index, { component, event, element }) {
+            const { value } = component;
+            const { datasource } = this.instance;
+            if (!(element === null || element === void 0 ? void 0 : element.offsetParent))
+                return;
+            if (datasource instanceof 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;
+                        datasource.dynamicFilter[column.name].push({
+                            relation,
+                            operation,
+                            value,
+                        });
+                    }
+                    else {
+                        datasource.dynamicFilter[column.name][index].value = value;
+                    }
+                }
+                else if (datasource.dynamicFilter[column.name] && datasource.dynamicFilter[column.name][index]) {
+                    this.defaultOperation = datasource.dynamicFilter[column.name][index].operation;
+                    this.defaultRelation = datasource.dynamicFilter[column.name][index].relation;
+                    datasource.dynamicFilter[column.name].splice(index, 1);
+                    if (datasource.dynamicFilter[column.name].length === 1) {
+                        datasource.dynamicFilter[column.name][0].relation = 'AND';
+                    }
+                    if (!datasource.dynamicFilter[column.name].length) {
+                        delete datasource.dynamicFilter[column.name];
+                    }
+                }
+                if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
+                    this.debouncedDatasourceGet(this.instance);
+                    this.onChangeLayout(event, element);
+                    this.clearHelperValues(column);
+                }
+            }
+            else {
+                this.lastFilter = JSON.stringify(this.instance.datasource.filter);
+                if (value) {
+                    this.instance.datasource.addFilter(column.name, value);
+                }
+                else {
+                    this.instance.datasource.removeFilter(column.name);
+                }
+                if (this.lastFilter !== JSON.stringify(this.instance.datasource.filter)) {
+                    this.debouncedDatasourceGet(this.instance);
+                    this.onChangeLayout(event, element);
+                    this.clearHelperValues(column);
+                }
+            }
+        }
+        clearHelperValues(column) {
+            if (!Array.isArray(column.filterProps)) {
+                column.filterProps.helperValue = '';
+            }
+            else {
+                column.filterProps.forEach((prop) => {
+                    prop.helperValue = '';
+                });
+            }
+        }
+        getColumnFilterOptions(column) {
+            const filterOptions = [];
+            const { datasource } = this.instance;
+            if (datasource instanceof teknisaComponentsCommon.TekRestDatasource || datasource instanceof teknisaComponentsCommon.TekMemoryDatasource) {
+                const dynamicFilter = datasource.dynamicFilter[column.name];
+                if (dynamicFilter && dynamicFilter.length > 0) {
+                    dynamicFilter.forEach((item) => {
+                        filterOptions.push(item);
+                    });
+                }
+                filterOptions.push({
+                    operation: this.defaultOperation,
+                    relation: this.defaultRelation,
+                    value: '',
+                });
+            }
+            else {
+                const option = {
+                    operation: undefined,
+                    relation: undefined,
+                    value: this.instance.datasource.filter[column.name] || '',
+                };
+                filterOptions.push(option);
+            }
+            return filterOptions;
+        }
+        isCurrentRow(row) {
+            const { uniqueKey, currentRow } = this.instance.datasource;
+            return !!((row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey]));
+        }
+        getVisibleData() {
+            this.scrollData.visibleData = this.instance.datasource.data;
+            return this.scrollData.visibleData;
+        }
+        getData() {
+            if (!this.instance.virtualScroll || !this.scrollData.initialized) {
+                return this.instance.treeDataStructure.searchHasNoData ? [] : this.instance.treeDataStructure.treeData;
+            }
+            return this.renderedData;
+        }
+        rowClick(row, event) {
+            this.instance.rowClick(row, event, this.$el);
+        }
+        orderHeaders(headers) {
+            return headers.sort((a, b) => {
+                if (a.fixed === b.fixed)
+                    return 0;
+                if (!a.fixed && b.fixed)
+                    return 1;
+                return -1;
+            }).filter((item) => item instanceof 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: {
+          "fixed-header": "",
+          "disable-pagination": "",
+          "hide-default-header": "",
+          "hide-default-footer": "",
+          name: _vm.instance.name,
+          headers: _vm.instance.columns,
+          items: _vm.getData(),
+          search: _vm.instance.datasource.search,
+          "show-select": _vm.instance.selectable,
+          dense: _vm.instance.dense,
+          loading: _vm.instance.datasource.loading,
+          "item-key": _vm.instance.datasource.uniqueKey,
+          "disable-sort": "",
+          "disable-filtering": "",
+          tabindex: "0",
+        },
+        on: {
+          "current-items": function ($event) {
+            return _vm.changeData($event)
+          },
+        },
+        scopedSlots: _vm._u(
+          [
+            {
+              key: "top",
+              fn: function () {
+                return [
+                  !_vm.$slots.toolbarSlot
+                    ? [
+                        _c("zd-grid-top", {
+                          ref: "treeGridTopSlot",
+                          attrs: {
+                            name: _vm.instance.name + "_top",
+                            toolbarSlot: _vm.instance.toolbarSlot,
+                            instance: _vm.instance,
+                          },
+                        }),
+                      ]
+                    : _vm._e(),
+                  _vm._v(" "),
+                  _vm._t("toolbarSlot"),
+                  _vm._v(" "),
+                  _c("span", {
+                    ref: "gridTooltip",
+                    staticClass: "zd-grid-cell-tooltip",
+                  }),
+                ]
+              },
+              proxy: true,
+            },
+            _vm.instance.showHeader
+              ? {
+                  key: "header",
+                  fn: function (ref) {
+                    var props = ref.props;
+                    var on = ref.on;
+                    return [
+                      _c("thead", { staticClass: "zd-grid-table-header" }, [
+                        _c(
+                          "tr",
+                          [
+                            _vm.instance.selectable
+                              ? _c(
+                                  "th",
+                                  {
+                                    staticClass:
+                                      "zd-table-cell selectable zd-table-fixed-column",
+                                    style:
+                                      "background-color: " +
+                                      _vm.instance.headerBackground,
+                                  },
+                                  [
+                                    _c("v-checkbox", {
+                                      staticClass: "zd-grid-header-checkbox",
+                                      attrs: {
+                                        "hide-details": "",
+                                        color: "primary",
+                                        disabled: _vm.instance.editing,
+                                        "on-icon": _vm.$getIcon("checkboxOn"),
+                                        "off-icon": _vm.$getIcon("checkboxOff"),
+                                        "indeterminate-icon": _vm.$getIcon(
+                                          "checkboxIndeterminate"
+                                        ),
+                                        value: props.everyItem,
+                                        indeterminate:
+                                          !props.everyItem && props.someItems,
+                                      },
+                                      on: {
+                                        click: function ($event) {
+                                          $event.stopPropagation();
+                                          on["toggle-select-all"](!props.everyItem);
+                                          _vm.selectAllClick(
+                                            !props.everyItem,
+                                            $event
+                                          );
+                                        },
+                                      },
+                                    }),
+                                  ],
+                                  1
+                                )
+                              : _vm._e(),
+                            _vm._v(" "),
+                            _vm._l(
+                              _vm.orderHeaders(props.headers),
+                              function (column, index) {
+                                return [
+                                  column.isVisible
+                                    ? _c(
+                                        "th",
+                                        {
+                                          key: column.name,
+                                          ref: "column-" + column.name,
+                                          refInFor: true,
+                                          class: [
+                                            "zd-table-cell",
+                                            "column-th-" +
+                                              column.name +
+                                              "-" +
+                                              _vm.instance.name,
+                                            {
+                                              sortable: column.sortable,
+                                              sortHandle: _vm.instance.dragColumns,
+                                              "zd-table-fixed-column": column.fixed,
+                                            },
+                                            "text-" + column.align,
+                                            _vm.instance.datasource.getOrderByColumn(
+                                              column.name
+                                            ),
+                                            _vm.instance.datasource.getOrderByColumn(
+                                              column.name
+                                            ) !== null
+                                              ? "active"
+                                              : "",
+                                          ],
+                                          style: {
+                                            "background-color":
+                                              _vm.instance.headerBackground,
+                                            "min-width":
+                                              _vm.calcWidth(
+                                                column,
+                                                column.minWidth
+                                              ) || "unset",
+                                            "max-width":
+                                              _vm.calcWidth(
+                                                column,
+                                                column.maxWidth
+                                              ) || "unset",
+                                          },
+                                          attrs: {
+                                            "column-name": column.name,
+                                            index: index,
+                                          },
+                                          on: {
+                                            click: function ($event) {
+                                              return _vm.instance.changeColumnOrder(
+                                                column
+                                              )
+                                            },
+                                          },
+                                        },
+                                        [
+                                          _c(
+                                            "span",
+                                            {
+                                              staticClass: "zd-table-header-cell",
+                                              style: {
+                                                width:
+                                                  _vm.calcHeaderCellWidth(column),
+                                              },
+                                            },
+                                            [
+                                              column.type !== "action"
+                                                ? [
+                                                    column.sortable &&
+                                                    column.align === "right"
+                                                      ? _c(
+                                                          "span",
+                                                          {
+                                                            staticClass:
+                                                              "zd-table-cell-sort",
+                                                          },
+                                                          [
+                                                            column.sortable &&
+                                                            column.align === "right"
+                                                              ? _c(
+                                                                  "v-icon",
+                                                                  {
+                                                                    staticClass:
+                                                                      "zd-table-cell-sort-icon",
+                                                                    attrs: {
+                                                                      small: "",
+                                                                    },
+                                                                  },
+                                                                  [
+                                                                    _vm._v(
+                                                                      _vm._s(
+                                                                        _vm.$getIcon(
+                                                                          "chevronUp"
+                                                                        )
+                                                                      )
+                                                                    ),
+                                                                  ]
+                                                                )
+                                                              : _vm._e(),
+                                                            _vm._v(" "),
+                                                            _vm.instance.datasource.findOrderIndex(
+                                                              column.name
+                                                            ) >= 0
+                                                              ? _c(
+                                                                  "span",
+                                                                  {
+                                                                    staticClass:
+                                                                      "zd-table-cell-sort-order left",
+                                                                  },
+                                                                  [
+                                                                    _vm._v(
+                                                                      _vm._s(
+                                                                        _vm.instance.datasource.findOrderIndex(
+                                                                          column.name
+                                                                        ) + 1
+                                                                      )
+                                                                    ),
+                                                                  ]
+                                                                )
+                                                              : _vm._e(),
+                                                          ],
+                                                          1
+                                                        )
+                                                      : _vm._e(),
+                                                    _vm._v(" "),
+                                                    _c(
+                                                      "span",
+                                                      {
+                                                        class: [
+                                                          "zd-table-cell-name",
+                                                          {
+                                                            "overflow-hidden":
+                                                              column.overflow ===
+                                                              "hidden",
+                                                            "overflow-wrap":
+                                                              column.overflow ===
+                                                              "wrap",
+                                                          },
+                                                          !isNaN(column.overflow)
+                                                            ? "overflow-clamp overflow-clamp-" +
+                                                              column.overflow
+                                                            : "",
+                                                        ],
+                                                        style: {
+                                                          "min-width":
+                                                            _vm.calcWidth(
+                                                              column,
+                                                              column.minWidth
+                                                            ) || "unset",
+                                                          "max-width":
+                                                            _vm.calcWidth(
+                                                              column,
+                                                              column.maxWidth
+                                                            ) || "unset",
+                                                        },
+                                                        on: {
+                                                          mouseenter: function (
+                                                            $event
+                                                          ) {
+                                                            return _vm.checkOverflow(
+                                                              $event
+                                                            )
+                                                          },
+                                                          mouseleave: function (
+                                                            $event
+                                                          ) {
+                                                            return _vm.removeTooltip()
+                                                          },
+                                                        },
+                                                      },
+                                                      [
+                                                        _vm._v(
+                                                          _vm._s(
+                                                            _vm.$t(column.label)
+                                                          )
+                                                        ),
+                                                      ]
+                                                    ),
+                                                    _vm._v(" "),
+                                                    column.sortable &&
+                                                    column.align !== "right"
+                                                      ? _c(
+                                                          "span",
+                                                          {
+                                                            staticClass:
+                                                              "zd-table-cell-sort",
+                                                          },
+                                                          [
+                                                            column.sortable &&
+                                                            column.align !== "right"
+                                                              ? _c(
+                                                                  "v-icon",
+                                                                  {
+                                                                    staticClass:
+                                                                      "zd-table-cell-sort-icon",
+                                                                    attrs: {
+                                                                      small: "",
+                                                                    },
+                                                                  },
+                                                                  [
+                                                                    _vm._v(
+                                                                      _vm._s(
+                                                                        _vm.$getIcon(
+                                                                          "chevronUp"
+                                                                        )
+                                                                      )
+                                                                    ),
+                                                                  ]
+                                                                )
+                                                              : _vm._e(),
+                                                            _vm._v(" "),
+                                                            _vm.instance.datasource.findOrderIndex(
+                                                              column.name
+                                                            ) >= 0
+                                                              ? _c(
+                                                                  "span",
+                                                                  {
+                                                                    staticClass:
+                                                                      "zd-table-cell-sort-order",
+                                                                  },
+                                                                  [
+                                                                    _vm._v(
+                                                                      _vm._s(
+                                                                        _vm.instance.datasource.findOrderIndex(
+                                                                          column.name
+                                                                        ) + 1
+                                                                      )
+                                                                    ),
+                                                                  ]
+                                                                )
+                                                              : _vm._e(),
+                                                          ],
+                                                          1
+                                                        )
+                                                      : _vm._e(),
+                                                  ]
+                                                : [
+                                                    _c(
+                                                      "span",
+                                                      {
+                                                        staticClass:
+                                                          "zd-table-cell-name",
+                                                      },
+                                                      [
+                                                        _vm._v(
+                                                          _vm._s(
+                                                            _vm.$t(column.label)
+                                                          )
+                                                        ),
+                                                      ]
+                                                    ),
+                                                  ],
+                                              _vm._v(" "),
+                                              _vm.instance.columnFilterButton &&
+                                              column.filterable
+                                                ? _c(
+                                                    "span",
+                                                    {
+                                                      class: [
+                                                        "tek-grid-column-filter-button",
+                                                        {
+                                                          "has-filter-data":
+                                                            _vm.instance.columnHasFilterData(
+                                                              column
+                                                            ),
+                                                        },
+                                                      ],
+                                                    },
+                                                    [
+                                                      _c(
+                                                        "v-menu",
+                                                        {
+                                                          attrs: {
+                                                            "offset-overflow": "",
+                                                            "offset-y": "",
+                                                            "min-width": 200,
+                                                            transition:
+                                                              "scale-transition",
+                                                            "content-class":
+                                                              "tek-grid-column-filter-menu",
+                                                            "close-on-content-click": false,
+                                                          },
+                                                          scopedSlots: _vm._u(
+                                                            [
+                                                              {
+                                                                key: "activator",
+                                                                fn: function (ref) {
+                                                                  var on = ref.on;
+                                                                  return [
+                                                                    _c(
+                                                                      "v-icon",
+                                                                      _vm._g(
+                                                                        {},
+                                                                        Object.assign(
+                                                                          {},
+                                                                          _vm.getFilterActivatorEvents(
+                                                                            on,
+                                                                            column
+                                                                          )
+                                                                        )
+                                                                      ),
+                                                                      [
+                                                                        _vm._v(
+                                                                          _vm._s(
+                                                                            _vm.$getIcon(
+                                                                              "filter"
+                                                                            )
+                                                                          )
+                                                                        ),
+                                                                      ]
+                                                                    ),
+                                                                  ]
+                                                                },
+                                                              },
+                                                            ],
+                                                            null,
+                                                            true
+                                                          ),
+                                                        },
+                                                        [
+                                                          _vm._v(" "),
+                                                          _vm._l(
+                                                            _vm.getColumnFilterOptions(
+                                                              column
+                                                            ),
+                                                            function (
+                                                              item,
+                                                              filterIndex
+                                                            ) {
+                                                              return _c(
+                                                                "span",
+                                                                {
+                                                                  key: filterIndex,
+                                                                },
+                                                                [
+                                                                  filterIndex > 0
+                                                                    ? _c(
+                                                                        "zd-radio",
+                                                                        _vm._b(
+                                                                          {
+                                                                            attrs: {
+                                                                              name:
+                                                                                _vm
+                                                                                  .instance
+                                                                                  .name +
+                                                                                "-" +
+                                                                                column.name +
+                                                                                "-filter-relation-" +
+                                                                                filterIndex,
+                                                                            },
+                                                                          },
+                                                                          "zd-radio",
+                                                                          {
+                                                                            showLabel: false,
+                                                                            showHelper: false,
+                                                                            vertical: false,
+                                                                            cssClass:
+                                                                              "zd-mb-2",
+                                                                            datasource:
+                                                                              _vm
+                                                                                .instance
+                                                                                .filterRelationsDatasource,
+                                                                            dataValue:
+                                                                              "value",
+                                                                            dataLabel:
+                                                                              "text",
+                                                                            value:
+                                                                              item.relation,
+                                                                            events:
+                                                                              {
+                                                                                change:
+                                                                                  _vm.getFilterItemChange(
+                                                                                    "relation",
+                                                                                    column,
+                                                                                    filterIndex
+                                                                                  ),
+                                                                              },
+                                                                          },
+                                                                          false
+                                                                        )
+                                                                      )
+                                                                    : _vm._e(),
+                                                                  _vm._v(" "),
+                                                                  item.operation !==
+                                                                  undefined
+                                                                    ? _c(
+                                                                        "zd-select",
+                                                                        _vm._b(
+                                                                          {
+                                                                            attrs: {
+                                                                              name:
+                                                                                _vm
+                                                                                  .instance
+                                                                                  .name +
+                                                                                "-" +
+                                                                                column.name +
+                                                                                "-filter-operation-" +
+                                                                                filterIndex,
+                                                                            },
+                                                                          },
+                                                                          "zd-select",
+                                                                          {
+                                                                            autocomplete: false,
+                                                                            showLabel: false,
+                                                                            showHelper: false,
+                                                                            clearable: false,
+                                                                            cssClass:
+                                                                              "zd-mb-2",
+                                                                            datasource:
+                                                                              _vm
+                                                                                .instance
+                                                                                .filterOperationsDatasource,
+                                                                            dataValue:
+                                                                              "value",
+                                                                            dataText:
+                                                                              "text",
+                                                                            value:
+                                                                              item.operation,
+                                                                            events:
+                                                                              {
+                                                                                change:
+                                                                                  _vm.getFilterItemChange(
+                                                                                    "operation",
+                                                                                    column,
+                                                                                    filterIndex
+                                                                                  ),
+                                                                              },
+                                                                          },
+                                                                          false
+                                                                        )
+                                                                      )
+                                                                    : _vm._e(),
+                                                                  _vm._v(" "),
+                                                                  _c(
+                                                                    _vm.getComponentType(
+                                                                      filterIndex
+                                                                    ) ||
+                                                                      column
+                                                                        .componentProps
+                                                                        .component,
+                                                                    _vm._b(
+                                                                      {
+                                                                        tag: "component",
+                                                                        attrs: {
+                                                                          name:
+                                                                            _vm
+                                                                              .instance
+                                                                              .name +
+                                                                            "-" +
+                                                                            column.name +
+                                                                            "-filter-value-" +
+                                                                            filterIndex,
+                                                                        },
+                                                                      },
+                                                                      "component",
+                                                                      Object.assign(
+                                                                        {},
+                                                                        column.componentProps,
+                                                                        {
+                                                                          showLabel: false,
+                                                                          showHelper: true,
+                                                                          autofill: false,
+                                                                          cssClass:
+                                                                            "zd-mb-2",
+                                                                          value:
+                                                                            item.value,
+                                                                          persistentHint: true,
+                                                                          hint: _vm.getComponentHint(
+                                                                            filterIndex
+                                                                          ),
+                                                                          events: {
+                                                                            input:
+                                                                              _vm.getFilterValueChange(
+                                                                                column,
+                                                                                filterIndex
+                                                                              ),
+                                                                          },
+                                                                        }
+                                                                      ),
+                                                                      false
+                                                                    )
+                                                                  ),
+                                                                ],
+                                                                1
+                                                              )
+                                                            }
+                                                          ),
+                                                        ],
+                                                        2
+                                                      ),
+                                                    ],
+                                                    1
+                                                  )
+                                                : _vm._e(),
+                                              _vm._v(" "),
+                                              _vm.instance.resizeColumns
+                                                ? _c(
+                                                    "span",
+                                                    {
+                                                      staticClass:
+                                                        "zd-grid-resize-handle",
+                                                      on: {
+                                                        mousedown: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.resizeMouseDownHandler(
+                                                            column,
+                                                            $event
+                                                          )
+                                                        },
+                                                        click:
+                                                          _vm.resizeClickHandler,
+                                                      },
+                                                    },
+                                                    [_vm._v("‖")]
+                                                  )
+                                                : _vm._e(),
+                                            ],
+                                            2
+                                          ),
+                                        ]
+                                      )
+                                    : _vm._e(),
+                                ]
+                              }
+                            ),
+                          ],
+                          2
+                        ),
+                      ]),
+                    ]
+                  },
+                }
+              : null,
+            _vm.instance.virtualScroll && _vm.scrollData.start > 0
+              ? {
+                  key: "body.prepend",
+                  fn: function (ref) {
+                    var headers = ref.headers;
+                    return [
+                      _c("tr", [
+                        _c("td", {
+                          style: "padding-top:" + _vm.scrollData.startHeight + "px",
+                          attrs: { colspan: headers.length },
+                        }),
+                      ]),
+                    ]
+                  },
+                }
+              : null,
+            _vm.instance.virtualScroll &&
+            _vm.scrollData.start + _vm.scrollData.perPage <
+              (_vm.scrollData.visibleData || []).length
+              ? {
+                  key: "body.append",
+                  fn: function (ref) {
+                    var headers = ref.headers;
+                    return [
+                      _c("tr", [
+                        _c("td", {
+                          style: "padding-top:" + _vm.scrollData.endHeight + "px",
+                          attrs: { colspan: headers.length },
+                        }),
+                      ]),
+                    ]
+                  },
+                }
+              : null,
+            _vm.instance.treeDataStructure.treeData.length
+              ? {
+                  key: "item",
+                  fn: function (ref) {
+                    var item = ref.item;
+                    var isSelected = ref.isSelected;
+                    var index = ref.index;
+                    var headers = ref.headers;
+                    return [
+                      _c(
+                        "tr",
+                        {
+                          directives: [
+                            {
+                              name: "show",
+                              rawName: "v-show",
+                              value: _vm.instance.treeDataStructure.isOpened(item),
+                              expression:
+                                "instance.treeDataStructure.isOpened(item)",
+                            },
+                          ],
+                          class: {
+                            active: isSelected,
+                            current: _vm.isCurrentRow(item),
+                          },
+                          on: {
+                            click: function ($event) {
+                              return _vm.rowClick(item, $event)
+                            },
+                          },
+                        },
+                        [
+                          _vm.instance.selectable
+                            ? _c(
+                                "td",
+                                {
+                                  staticClass:
+                                    "zd-table-cell selectable zd-table-fixed-column",
+                                },
+                                [
+                                  _c("v-checkbox", {
+                                    staticClass: "zd-grid-row-checkbox",
+                                    attrs: {
+                                      "hide-details": "",
+                                      color: "primary",
+                                      disabled: _vm.instance.editing,
+                                      "on-icon": _vm.$getIcon("checkboxOn"),
+                                      "off-icon": _vm.$getIcon("checkboxOff"),
+                                      "true-value": true,
+                                      "false-value": false,
+                                      value: isSelected,
+                                    },
+                                    on: {
+                                      click: function ($event) {
+                                        $event.stopPropagation();
+                                        return _vm.selectClick(
+                                          index,
+                                          !isSelected,
+                                          $event
+                                        )
+                                      },
+                                    },
+                                  }),
+                                ],
+                                1
+                              )
+                            : _vm._e(),
+                          _vm._v(" "),
+                          _vm._l(
+                            _vm.orderHeaders(headers),
+                            function (header, headerIndex) {
+                              return [
+                                _vm._l(
+                                  [
+                                    {
+                                      column: header,
+                                      cellProps: (_vm.instance.cellsApplied[
+                                        _vm.rowKey(item)
+                                      ] || {})[header.name],
+                                    },
+                                  ],
+                                  function (ref) {
+                                    var column = ref.column;
+                                    var cellProps = ref.cellProps;
+                                    return [
+                                      column.isVisible && column.type !== "action"
+                                        ? [
+                                            _c(
+                                              "td",
+                                              {
+                                                key: column.name,
+                                                class: [
+                                                  "zd-table-cell",
+                                                  "text-" + column.align,
+                                                  Object.assign(
+                                                    {},
+                                                    column,
+                                                    cellProps
+                                                  ).cssClass,
+                                                  { first: headerIndex === 0 },
+                                                  {
+                                                    "zd-table-column-editable":
+                                                      column.editable,
+                                                    "zd-table-cell-editable":
+                                                      Object.assign(
+                                                        {},
+                                                        column,
+                                                        cellProps
+                                                      ).editable,
+                                                    "zd-table-fixed-column":
+                                                      column.fixed,
+                                                  },
+                                                ],
+                                                style: [
+                                                  Object.assign(
+                                                    {},
+                                                    column,
+                                                    cellProps
+                                                  ).style,
+                                                  Object.assign(
+                                                    {},
+                                                    column,
+                                                    cellProps
+                                                  ).cssStyle,
+                                                  {
+                                                    left: _vm.getFixedLeft(column),
+                                                  },
+                                                ],
+                                                on: {
+                                                  click: function ($event) {
+                                                    return _vm.cellClick(
+                                                      item,
+                                                      column,
+                                                      $event
+                                                    )
+                                                  },
+                                                },
+                                              },
+                                              [
+                                                column.loading
+                                                  ? _c("v-skeleton-loader", {
+                                                      staticClass:
+                                                        "zd-skeleton-table-cell",
+                                                      attrs: {
+                                                        loading: "",
+                                                        type: "table-cell",
+                                                      },
+                                                    })
+                                                  : _vm._e(),
+                                                _vm._v(" "),
+                                                Object.assign({}, column, cellProps)
+                                                  .editable && _vm.instance.editing
+                                                  ? _c(
+                                                      "span",
+                                                      {
+                                                        directives: [
+                                                          {
+                                                            name: "show",
+                                                            rawName: "v-show",
+                                                            value: !column.loading,
+                                                            expression:
+                                                              "!column.loading",
+                                                          },
+                                                        ],
+                                                        staticClass:
+                                                          "zd-table-cell-inline-edit",
+                                                        style: {
+                                                          width:
+                                                            _vm.calcWidth(
+                                                              column,
+                                                              column.maxWidth ||
+                                                                column.minWidth
+                                                            ) || "unset",
+                                                          "min-width":
+                                                            _vm.calcWidth(
+                                                              column,
+                                                              column.minWidth
+                                                            ) || "unset",
+                                                          "max-width":
+                                                            _vm.calcWidth(
+                                                              column,
+                                                              column.maxWidth
+                                                            ) || "unset",
+                                                        },
+                                                      },
+                                                      [
+                                                        _vm.instance.isEdited(
+                                                          column,
+                                                          item
+                                                        )
+                                                          ? _c(
+                                                              "span",
+                                                              {
+                                                                staticClass:
+                                                                  "zd-table-cell-edit-icon",
+                                                              },
+                                                              [
+                                                                _vm.instance.isValid(
+                                                                  column,
+                                                                  item
+                                                                )
+                                                                  ? _c(
+                                                                      "v-icon",
+                                                                      {
+                                                                        attrs: {
+                                                                          color:
+                                                                            "primary",
+                                                                        },
+                                                                      },
+                                                                      [
+                                                                        _vm._v(
+                                                                          _vm._s(
+                                                                            _vm.$getIcon(
+                                                                              "pencil"
+                                                                            )
+                                                                          )
+                                                                        ),
+                                                                      ]
+                                                                    )
+                                                                  : _c(
+                                                                      "v-icon",
+                                                                      {
+                                                                        attrs: {
+                                                                          color:
+                                                                            "error",
+                                                                        },
+                                                                      },
+                                                                      [
+                                                                        _vm._v(
+                                                                          _vm._s(
+                                                                            _vm.$getIcon(
+                                                                              "warning"
+                                                                            )
+                                                                          )
+                                                                        ),
+                                                                      ]
+                                                                    ),
+                                                              ],
+                                                              1
+                                                            )
+                                                          : _vm._e(),
+                                                        _vm._v(" "),
+                                                        _c(
+                                                          column.componentProps
+                                                            .component,
+                                                          _vm._b(
+                                                            {
+                                                              key:
+                                                                column.name +
+                                                                _vm.rowKey(item),
+                                                              tag: "component",
+                                                            },
+                                                            "component",
+                                                            _vm.getEditableComponent(
+                                                              column,
+                                                              item,
+                                                              cellProps
+                                                            ),
+                                                            false
+                                                          )
+                                                        ),
+                                                      ],
+                                                      1
+                                                    )
+                                                  : _vm.hasToggleIcon(column, item)
+                                                  ? _c(
+                                                      "span",
+                                                      [
+                                                        _c("v-icon", [
+                                                          _vm._v(
+                                                            _vm._s(
+                                                              _vm.$getIcon(
+                                                                column.formatterByRow(
+                                                                  item,
+                                                                  cellProps
+                                                                )
+                                                              )
+                                                            )
+                                                          ),
+                                                        ]),
+                                                      ],
+                                                      1
+                                                    )
+                                                  : _c(
+                                                      "span",
+                                                      {
+                                                        directives: [
+                                                          {
+                                                            name: "show",
+                                                            rawName: "v-show",
+                                                            value: !column.loading,
+                                                            expression:
+                                                              "!column.loading",
+                                                          },
+                                                        ],
+                                                        class: [
+                                                          "zd-table-cell-text",
+                                                          {
+                                                            "zd-table-cell-text-editable":
+                                                              Object.assign(
+                                                                {},
+                                                                column,
+                                                                cellProps
+                                                              ).editable,
+                                                            "overflow-hidden":
+                                                              column.overflow ===
+                                                              "hidden",
+                                                            "overflow-wrap":
+                                                              column.overflow ===
+                                                              "wrap",
+                                                          },
+                                                          !isNaN(column.overflow)
+                                                            ? "overflow-clamp overflow-clamp-" +
+                                                              column.overflow
+                                                            : "",
+                                                        ],
+                                                        style: {
+                                                          width:
+                                                            _vm.calcWidth(
+                                                              column,
+                                                              column.maxWidth ||
+                                                                column.minWidth
+                                                            ) || "unset",
+                                                          "min-width":
+                                                            _vm.calcWidth(
+                                                              column,
+                                                              column.minWidth
+                                                            ) || "unset",
+                                                          "max-width":
+                                                            _vm.calcWidth(
+                                                              column,
+                                                              column.maxWidth
+                                                            ) || "unset",
+                                                        },
+                                                        on: {
+                                                          mouseenter: function (
+                                                            $event
+                                                          ) {
+                                                            return _vm.checkOverflow(
+                                                              $event
+                                                            )
+                                                          },
+                                                          mouseleave: function (
+                                                            $event
+                                                          ) {
+                                                            return _vm.removeTooltip()
+                                                          },
+                                                        },
+                                                      },
+                                                      [
+                                                        _c(
+                                                          "div",
+                                                          {
+                                                            directives: [
+                                                              {
+                                                                name: "show",
+                                                                rawName: "v-show",
+                                                                value:
+                                                                  headerIndex === 0,
+                                                                expression:
+                                                                  "headerIndex === 0",
+                                                              },
+                                                            ],
+                                                            class: [
+                                                              "zd-tree-grid-editable-expand",
+                                                              "level" +
+                                                                item.tree__level,
+                                                            ],
+                                                          },
+                                                          [
+                                                            item.tree__children
+                                                              .length > 0
+                                                              ? _c(
+                                                                  "v-icon",
+                                                                  {
+                                                                    class: {
+                                                                      opened:
+                                                                        item.tree__opened,
+                                                                    },
+                                                                    attrs: {
+                                                                      tabindex:
+                                                                        "-1",
+                                                                    },
+                                                                    on: {
+                                                                      click:
+                                                                        function (
+                                                                          $event
+                                                                        ) {
+                                                                          return _vm.instance.toggleExpand(
+                                                                            item,
+                                                                            index
+                                                                          )
+                                                                        },
+                                                                    },
+                                                                  },
+                                                                  [
+                                                                    _vm._v(
+                                                                      "\n                    " +
+                                                                        _vm._s(
+                                                                          _vm.$getIcon(
+                                                                            "chevronRight"
+                                                                          )
+                                                                        ) +
+                                                                        "\n                  "
+                                                                    ),
+                                                                  ]
+                                                                )
+                                                              : _vm._e(),
+                                                          ],
+                                                          1
+                                                        ),
+                                                        _vm._v(" "),
+                                                        _c("span", {
+                                                          key: item.tree__searched
+                                                            ? "a"
+                                                            : "b",
+                                                          domProps: {
+                                                            innerHTML: _vm._s(
+                                                              _vm.formatSearchResult(
+                                                                column.formatterByRow(
+                                                                  item,
+                                                                  cellProps
+                                                                )
+                                                              )
+                                                            ),
+                                                          },
+                                                        }),
+                                                      ]
+                                                    ),
+                                              ],
+                                              1
+                                            ),
+                                          ]
+                                        : column.isVisible &&
+                                          column.type === "action"
+                                        ? [
+                                            _c(
+                                              "td",
+                                              {
+                                                key: column.name,
+                                                class: [
+                                                  "zd-table-cell",
+                                                  "text-" + column.align,
+                                                  Object.assign(
+                                                    {},
+                                                    column,
+                                                    cellProps
+                                                  ).cssClass,
+                                                ],
+                                                style: [
+                                                  Object.assign(
+                                                    {},
+                                                    column,
+                                                    cellProps
+                                                  ).style,
+                                                  Object.assign(
+                                                    {},
+                                                    column,
+                                                    cellProps
+                                                  ).cssStyle,
+                                                ],
+                                                on: {
+                                                  click: function ($event) {
+                                                    return _vm.cellClick(
+                                                      item,
+                                                      column,
+                                                      $event
+                                                    )
+                                                  },
+                                                },
+                                              },
+                                              _vm._l(
+                                                column.childrenProps,
+                                                function (child) {
+                                                  return _c(
+                                                    child.component,
+                                                    _vm._b(
+                                                      {
+                                                        key:
+                                                          child.name +
+                                                          _vm.rowKey(item),
+                                                        tag: "component",
+                                                      },
+                                                      "component",
+                                                      Object.assign(
+                                                        {},
+                                                        child,
+                                                        _vm.instance.getActionComponent(
+                                                          child,
+                                                          column,
+                                                          item
+                                                        )
+                                                      ),
+                                                      false
+                                                    )
+                                                  )
+                                                }
+                                              ),
+                                              1
+                                            ),
+                                          ]
+                                        : _vm._e(),
+                                    ]
+                                  }
+                                ),
+                              ]
+                            }
+                          ),
+                        ],
+                        2
+                      ),
+                    ]
+                  },
+                }
+              : null,
+            {
+              key: "no-data",
+              fn: function () {
+                return [
+                  _c("zd-iterable-no-data", {
+                    ref: "gridNoData",
+                    attrs: {
+                      name: _vm.instance.name + "_no_data",
+                      instance: _vm.instance,
+                      noDataSlot: _vm.instance.noDataSlot,
+                      noResultSlot: _vm.instance.noResultSlot,
+                      errorSlot: _vm.instance.errorSlot,
+                      empty: !_vm.getData().length,
+                    },
+                    scopedSlots: _vm._u(
+                      [
+                        {
+                          key: "errorSlot",
+                          fn: function () {
+                            return [_vm._t("errorSlot")]
+                          },
+                          proxy: true,
+                        },
+                        {
+                          key: "noResultSlot",
+                          fn: function () {
+                            return [_vm._t("noResultSlot")]
+                          },
+                          proxy: true,
+                        },
+                        {
+                          key: "noDataSlot",
+                          fn: function () {
+                            return [_vm._t("noDataSlot")]
+                          },
+                          proxy: true,
+                        },
+                      ],
+                      null,
+                      true
+                    ),
+                  }),
+                ]
+              },
+              proxy: true,
+            },
+            _vm.instance.showFooter
+              ? {
+                  key: "footer",
+                  fn: function () {
+                    return [
+                      !_vm.$slots.footerSlot
+                        ? [
+                            _c("zd-grid-footer", {
+                              ref: "gridFooter",
+                              attrs: {
+                                name: _vm.instance.name + "_footer",
+                                instance: _vm.instance,
+                                footerSlot: _vm.instance.footerSlot,
+                              },
+                            }),
+                          ]
+                        : _vm._e(),
+                      _vm._v(" "),
+                      _vm._t("footerSlot"),
+                    ]
+                  },
+                  proxy: true,
+                }
+              : null,
+          ],
+          null,
+          true
+        ),
+        model: {
+          value: _vm.instance.selectedRows,
+          callback: function ($$v) {
+            _vm.$set(_vm.instance, "selectedRows", $$v);
+          },
+          expression: "instance.selectedRows",
+        },
+      })
+    };
+    var __vue_staticRenderFns__ = [];
+    __vue_render__._withStripped = true;
+
+      /* style */
+      const __vue_inject_styles__ = function (inject) {
+        if (!inject) return
+        inject("data-v-29a40362_0", { source: ".tek-grid .zd-grid-toolbar {\n  height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n  align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n  margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n  line-height: 22px;\n}\n.tek-grid table thead tr th {\n  padding-right: 15px !important;\n}\n.tek-grid table thead tr th.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 4;\n  background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n  font-weight: 700;\n  font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n  font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n  font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n  transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n  position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n  background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n  width: 22px;\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n  width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 14px;\n  height: 100%;\n  border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n  width: 10px;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n  height: 60%;\n  border-bottom: solid 1px #ccc;\n  position: relative;\n  top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  background: white;\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
+
       };
       /* scoped */
       const __vue_scope_id__ = undefined;
@@ -5546,21 +7318,22 @@
       );
 
     const components = {
-        TekBreadcrumbHeader: __vue_component__$e,
-        TekCardTitle: __vue_component__$d,
-        TekCrudAddButton: __vue_component__$c,
-        TekCrudCancelButton: __vue_component__$b,
-        TekCrudDeleteButton: __vue_component__$a,
-        TekCrudForm: __vue_component__$9,
-        TekCrudSaveButton: __vue_component__$8,
-        TekGrid: __vue_component__$7,
-        TekGridColumnsButton: __vue_component__$6,
-        TekGridLayoutOptions: __vue_component__$5,
-        TekImage: __vue_component__$4,
-        TekProductCard: __vue_component__,
-        TekIterableComponentRender: __vue_component__$2,
-        TekIterableCarousel: __vue_component__$3,
-        TekNotifications: __vue_component__$1,
+        TekBreadcrumbHeader: __vue_component__$f,
+        TekCardTitle: __vue_component__$e,
+        TekCrudAddButton: __vue_component__$d,
+        TekCrudCancelButton: __vue_component__$c,
+        TekCrudDeleteButton: __vue_component__$b,
+        TekCrudForm: __vue_component__$a,
+        TekCrudSaveButton: __vue_component__$9,
+        TekGrid: __vue_component__$8,
+        TekGridColumnsButton: __vue_component__$7,
+        TekGridLayoutOptions: __vue_component__$6,
+        TekImage: __vue_component__$5,
+        TekProductCard: __vue_component__$1,
+        TekIterableComponentRender: __vue_component__$3,
+        TekIterableCarousel: __vue_component__$4,
+        TekNotifications: __vue_component__$2,
+        TekTreeGrid: __vue_component__,
     };
 
     common.Icons.addIcons({
@@ -5581,19 +7354,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$f;
+    exports.TekCardTitle = script$e;
+    exports.TekCrudAddButton = script$d;
+    exports.TekCrudCancelButton = script$c;
+    exports.TekCrudDeleteButton = script$b;
+    exports.TekCrudForm = script$a;
+    exports.TekCrudSaveButton = script$9;
+    exports.TekGrid = script$8;
+    exports.TekGridColumnsButton = script$7;
+    exports.TekGridLayoutOptions = script$6;
+    exports.TekImage = script$5;
+    exports.TekIterableComponentRender = script$3;
+    exports.TekProductCard = script$1;
+    exports.TekTreeGrid = script;
     exports["default"] = TeknisaComponents;
 
     Object.defineProperty(exports, '__esModule', { value: true });