@zeedhi/teknisa-components-vuetify 1.107.1 → 1.108.0

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

@@ -2,14 +2,14 @@ import { ModalService, IterableComponentRender, Icons } from '@zeedhi/common';
 import { ZdUserInfo } from '@zeedhi/zd-user-info-vue';
 import { Metadata, Config, dayjs, Singleton, Utils, I18n, Loader, VersionService } from '@zeedhi/core';
 import { Prop, Component, Watch } from 'vue-property-decorator';
-import { BreadcrumbHeader, CardTitle, CrudButton, CrudAddButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, TekGrid as TekGrid$3, TekRestDatasource, TekMemoryDatasource, TekGridColumn, TekGridColumnsButton as TekGridColumnsButton$1, TekGridFilterButton as TekGridFilterButton$1, TekGridLayoutOptions as TekGridLayoutOptions$1, TekFilterHelper, Image, ProductCard, TekTreeGrid, TekUserInfo as TekUserInfo$1, TekUserInfoList as TekUserInfoList$1, TekDragGrid as TekDragGrid$1, IterableCarousel, Loading, Notifications } from '@zeedhi/teknisa-components-common';
+import { BreadcrumbHeader, CardTitle, CrudButton, CrudAddButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, TekGrid as TekGrid$6, TekRestDatasource, TekMemoryDatasource, TekGridColumn, TekDragGrid as TekDragGrid$3, TekGridColumnsButton as TekGridColumnsButton$3, TekGridFilterButton as TekGridFilterButton$3, TekGridLayoutOptions as TekGridLayoutOptions$3, TekFilterHelper, Image, ProductCard, TekTreeGrid, TekUserInfo as TekUserInfo$3, TekUserInfoList as TekUserInfoList$3, IterableCarousel, Loading, Notifications } from '@zeedhi/teknisa-components-common';
 import { PropWatch, ZdComponent, ZdComponentRender, components as components$1, ZdForm, EditableMixin, NavigableTableMixin, ZdGrid, ZdIterableColumnsButton, setFillHeight, ZdIterableComponentRender, ZdLoading, ZdIterable } from '@zeedhi/vuetify';
 import debounce from 'lodash.debounce';
 import Vue from 'vue';
 import Component$1 from 'vue-class-component';
 import { ZdDragGridHandle, ZdDragGridHandleHeader, updateDraggableFixedColumns } from '@zeedhi/zd-drag-grid-vue';
 import draggable from 'vuedraggable';
-import Sortable from 'sortablejs';
+import sortable from 'sortablejs';
 import cloneDeep from 'lodash.clonedeep';
 import '@zeedhi/zd-drag-grid-vue/dist/drag-grid-style.css';
 
@@ -38,7 +38,7 @@ function __decorate(decorators, target, key, desc) {
 /**
  * Teknisa component
  */
-let TekBreadcrumbHeader = class TekBreadcrumbHeader extends ZdComponent {
+let TekBreadcrumbHeader$2 = class TekBreadcrumbHeader extends ZdComponent {
     constructor() {
         super(...arguments);
         this.instanceType = BreadcrumbHeader;
@@ -46,17 +46,17 @@ let TekBreadcrumbHeader = class TekBreadcrumbHeader extends ZdComponent {
 };
 __decorate([
     PropWatch({ type: String, default: '' })
-], TekBreadcrumbHeader.prototype, "title", void 0);
+], TekBreadcrumbHeader$2.prototype, "title", void 0);
 __decorate([
     Prop({ type: Object, default: {} })
-], TekBreadcrumbHeader.prototype, "breadcrumb", void 0);
+], TekBreadcrumbHeader$2.prototype, "breadcrumb", void 0);
 __decorate([
     Prop({ type: Array, default: () => [] })
-], TekBreadcrumbHeader.prototype, "rightSlot", void 0);
-TekBreadcrumbHeader = __decorate([
+], TekBreadcrumbHeader$2.prototype, "rightSlot", void 0);
+TekBreadcrumbHeader$2 = __decorate([
     Component
-], TekBreadcrumbHeader);
-var script$m = TekBreadcrumbHeader;
+], TekBreadcrumbHeader$2);
+var script$n = TekBreadcrumbHeader$2;
 
 function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
     if (typeof shadowMode !== 'boolean') {
@@ -187,7 +187,7 @@ function addStyle(id, css) {
 }
 
 /* script */
-const __vue_script__$n = script$m;
+const __vue_script__$n = script$n;
 
 /* template */
 var __vue_render__$n = function () {
@@ -267,7 +267,7 @@ __vue_render__$n._withStripped = true;
   /* style */
   const __vue_inject_styles__$n = function (inject) {
     if (!inject) return
-    inject("data-v-4982d92e_0", { source: ".tek-breadcrumb-header .tek-breadcrumb-header-title-col {\n  display: flex;\n  padding-top: 5px;\n  padding-left: 0;\n}\n.tek-breadcrumb-header .tek-breadcrumb-header-title-col .tek-breadcrumb-header-slot-right {\n  margin-left: auto;\n}\n.tek-breadcrumb-header .zd-breadcrumbs {\n  padding: 0;\n  font-size: var(--zd-font-body2-size);\n}\n.tek-breadcrumb-header .zd-breadcrumbs .v-breadcrumbs__item--disabled {\n  color: #667080;\n}\n.tek-breadcrumb-header .zd-text {\n  color: #667080;\n}\n.tek-breadcrumb-header .zd-text.tek-breadcrumb-header-title {\n  font-size: 32px;\n  font-weight: bold;\n  line-height: 35px;\n  margin-bottom: 10px;\n}\n.tek-breadcrumb-header .zd-text > p {\n  margin: 0;\n}", map: undefined, media: undefined });
+    inject("data-v-0797b9c0_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 */
@@ -298,7 +298,7 @@ __vue_render__$n._withStripped = true;
 /**
  * TekCardTitle component join an icon, title, rightSlot and a divider
  */
-let TekCardTitle = class TekCardTitle extends ZdComponentRender {
+let TekCardTitle$2 = class TekCardTitle extends ZdComponentRender {
     constructor() {
         super(...arguments);
         this.instanceType = CardTitle;
@@ -306,29 +306,29 @@ let TekCardTitle = class TekCardTitle extends ZdComponentRender {
 };
 __decorate([
     PropWatch({ type: String, default: '' })
-], TekCardTitle.prototype, "title", void 0);
+], TekCardTitle$2.prototype, "title", void 0);
 __decorate([
     PropWatch({ type: String, default: '' })
-], TekCardTitle.prototype, "subtitle", void 0);
+], TekCardTitle$2.prototype, "subtitle", void 0);
 __decorate([
     PropWatch({ type: String, default: '' })
-], TekCardTitle.prototype, "iconName", void 0);
+], TekCardTitle$2.prototype, "iconName", void 0);
 __decorate([
     Prop({ type: Array, default: () => [] })
-], TekCardTitle.prototype, "rightSlot", void 0);
+], TekCardTitle$2.prototype, "rightSlot", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: true })
-], TekCardTitle.prototype, "showDivider", void 0);
+], TekCardTitle$2.prototype, "showDivider", void 0);
 __decorate([
     PropWatch({ type: String, default: '' })
-], TekCardTitle.prototype, "to", void 0);
-TekCardTitle = __decorate([
+], TekCardTitle$2.prototype, "to", void 0);
+TekCardTitle$2 = __decorate([
     Component
-], TekCardTitle);
-var script$l = TekCardTitle;
+], TekCardTitle$2);
+var script$m = TekCardTitle$2;
 
 /* script */
-const __vue_script__$m = script$l;
+const __vue_script__$m = script$m;
 
 /* template */
 var __vue_render__$m = function () {
@@ -437,7 +437,7 @@ __vue_render__$m._withStripped = true;
   /* style */
   const __vue_inject_styles__$m = function (inject) {
     if (!inject) return
-    inject("data-v-dc07bd14_0", { source: ".tek-card-title-row {\n  display: flex;\n  align-items: center;\n}\n.tek-card-title-row .tek-card-title-text {\n  color: var(--v-primary-base);\n  font-weight: bold;\n  font-size: 20px;\n}\n.tek-card-title-row .tek-card-subtitle-text {\n  padding-left: 10px;\n  color: var(--zd-font-color);\n  font-size: 13px;\n}\n.tek-card-title-row .tek-card-title-text,\n.tek-card-title-row .tek-card-subtitle-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: baseline;\n}\n.tek-card-title-row .v-icon {\n  color: var(--v-primary-base);\n  padding-right: calc(var(--zd-default-padding) / 2);\n}\n.tek-card-title .v-divider {\n  margin-bottom: 16px;\n}\n.tek-card-title .tek-card-title-router {\n  text-decoration: none;\n}\n.tek-card-title .tek-card-title-no-router {\n  text-decoration: none;\n  cursor: default;\n}", map: undefined, media: undefined });
+    inject("data-v-7c87feac_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 */
@@ -466,11 +466,11 @@ __vue_render__$m._withStripped = true;
   );
 
 // eslint-disable-next-line prefer-destructuring
-const ZdButton$1 = components$1.ZdButton;
+const ZdButton$2 = components$1.ZdButton;
 /**
  * TekCrudButton component
  */
-let TekCrudButton = class TekCrudButton extends ZdButton$1 {
+let TekCrudButton = class TekCrudButton extends ZdButton$2 {
     constructor() {
         super(...arguments);
         this.instanceType = CrudButton;
@@ -502,7 +502,7 @@ var TekCrudButton$1 = TekCrudButton;
 /**
  * TekCrudAddButton component
  */
-let TekCrudAddButton = class TekCrudAddButton extends TekCrudButton$1 {
+let TekCrudAddButton$2 = class TekCrudAddButton extends TekCrudButton$1 {
     constructor() {
         super(...arguments);
         this.instanceType = CrudAddButton;
@@ -510,26 +510,26 @@ let TekCrudAddButton = class TekCrudAddButton extends TekCrudButton$1 {
 };
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekCrudAddButton.prototype, "flat", void 0);
+], TekCrudAddButton$2.prototype, "flat", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekCrudAddButton.prototype, "icon", void 0);
+], TekCrudAddButton$2.prototype, "icon", void 0);
 __decorate([
     PropWatch({ type: String, default: 'plus' })
-], TekCrudAddButton.prototype, "iconName", void 0);
+], TekCrudAddButton$2.prototype, "iconName", void 0);
 __decorate([
     PropWatch({ type: String, default: '#666' })
-], TekCrudAddButton.prototype, "color", void 0);
+], TekCrudAddButton$2.prototype, "color", void 0);
 __decorate([
     PropWatch({ type: String, default: 'f2' })
-], TekCrudAddButton.prototype, "clickShortcutKey", void 0);
-TekCrudAddButton = __decorate([
+], TekCrudAddButton$2.prototype, "clickShortcutKey", void 0);
+TekCrudAddButton$2 = __decorate([
     Component
-], TekCrudAddButton);
-var script$k = TekCrudAddButton;
+], TekCrudAddButton$2);
+var script$l = TekCrudAddButton$2;
 
 /* script */
-const __vue_script__$l = script$k;
+const __vue_script__$l = script$l;
 
 /* template */
 var __vue_render__$l = function () {
@@ -632,7 +632,7 @@ __vue_render__$l._withStripped = true;
 /**
  * TekCrudCancelButton component
  */
-let TekCrudCancelButton = class TekCrudCancelButton extends TekCrudButton$1 {
+let TekCrudCancelButton$2 = class TekCrudCancelButton extends TekCrudButton$1 {
     constructor() {
         super(...arguments);
         this.instanceType = CrudCancelButton;
@@ -640,20 +640,20 @@ let TekCrudCancelButton = class TekCrudCancelButton extends TekCrudButton$1 {
 };
 __decorate([
     PropWatch({ type: String, default: 'CANCEL' })
-], TekCrudCancelButton.prototype, "label", void 0);
+], TekCrudCancelButton$2.prototype, "label", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekCrudCancelButton.prototype, "outline", void 0);
+], TekCrudCancelButton$2.prototype, "outline", void 0);
 __decorate([
     PropWatch({ type: String, default: 'esc' })
-], TekCrudCancelButton.prototype, "clickShortcutKey", void 0);
-TekCrudCancelButton = __decorate([
+], TekCrudCancelButton$2.prototype, "clickShortcutKey", void 0);
+TekCrudCancelButton$2 = __decorate([
     Component
-], TekCrudCancelButton);
-var script$j = TekCrudCancelButton;
+], TekCrudCancelButton$2);
+var script$k = TekCrudCancelButton$2;
 
 /* script */
-const __vue_script__$k = script$j;
+const __vue_script__$k = script$k;
 
 /* template */
 var __vue_render__$k = function () {
@@ -756,7 +756,7 @@ __vue_render__$k._withStripped = true;
 /**
  * TekCrudDeleteButton component
  */
-let TekCrudDeleteButton = class TekCrudDeleteButton extends TekCrudButton$1 {
+let TekCrudDeleteButton$2 = class TekCrudDeleteButton extends TekCrudButton$1 {
     constructor() {
         super(...arguments);
         this.instanceType = CrudDeleteButton;
@@ -764,26 +764,26 @@ let TekCrudDeleteButton = class TekCrudDeleteButton extends TekCrudButton$1 {
 };
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekCrudDeleteButton.prototype, "flat", void 0);
+], TekCrudDeleteButton$2.prototype, "flat", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekCrudDeleteButton.prototype, "icon", void 0);
+], TekCrudDeleteButton$2.prototype, "icon", void 0);
 __decorate([
     PropWatch({ type: String, default: 'trashCanOutline' })
-], TekCrudDeleteButton.prototype, "iconName", void 0);
+], TekCrudDeleteButton$2.prototype, "iconName", void 0);
 __decorate([
     PropWatch({ type: String, default: '#666' })
-], TekCrudDeleteButton.prototype, "color", void 0);
+], TekCrudDeleteButton$2.prototype, "color", void 0);
 __decorate([
     PropWatch({ type: String, default: 'ctrl+d' })
-], TekCrudDeleteButton.prototype, "clickShortcutKey", void 0);
-TekCrudDeleteButton = __decorate([
+], TekCrudDeleteButton$2.prototype, "clickShortcutKey", void 0);
+TekCrudDeleteButton$2 = __decorate([
     Component
-], TekCrudDeleteButton);
-var script$i = TekCrudDeleteButton;
+], TekCrudDeleteButton$2);
+var script$j = TekCrudDeleteButton$2;
 
 /* script */
-const __vue_script__$j = script$i;
+const __vue_script__$j = script$j;
 
 /* template */
 var __vue_render__$j = function () {
@@ -886,19 +886,19 @@ __vue_render__$j._withStripped = true;
 /**
  * TekCrudForm component
  */
-let TekCrudForm = class TekCrudForm extends ZdForm {
+let TekCrudForm$2 = class TekCrudForm extends ZdForm {
     constructor() {
         super(...arguments);
         this.instanceType = CrudForm;
     }
 };
-TekCrudForm = __decorate([
+TekCrudForm$2 = __decorate([
     Component
-], TekCrudForm);
-var script$h = TekCrudForm;
+], TekCrudForm$2);
+var script$i = TekCrudForm$2;
 
 /* script */
-const __vue_script__$i = script$h;
+const __vue_script__$i = script$i;
 
 /* template */
 var __vue_render__$i = function () {
@@ -993,7 +993,7 @@ __vue_render__$i._withStripped = true;
   /* style */
   const __vue_inject_styles__$i = function (inject) {
     if (!inject) return
-    inject("data-v-c0dcf978_0", { source: ".tek-crud-form {\n  outline: none;\n  overflow-x: hidden;\n  padding-bottom: 4px;\n}\n.tek-crud-form > .row {\n  height: 100%;\n  align-content: flex-start;\n  margin: 0 -12px;\n}\n.tek-crud-form > .row.row--dense {\n  margin: 0 -4px;\n}", map: undefined, media: undefined });
+    inject("data-v-18d9c2cd_0", { source: ".tek-crud-form {\n  outline: none;\n  overflow-x: hidden;\n  padding-bottom: 4px;\n}\n.tek-crud-form > .row {\n  height: 100%;\n  align-content: flex-start;\n  margin: 0 -12px;\n}\n.tek-crud-form > .row.row--dense {\n  margin: 0 -4px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -1024,7 +1024,7 @@ __vue_render__$i._withStripped = true;
 /**
  * TekCrudSaveButton component
  */
-let TekCrudSaveButton = class TekCrudSaveButton extends TekCrudButton$1 {
+let TekCrudSaveButton$2 = class TekCrudSaveButton extends TekCrudButton$1 {
     constructor() {
         super(...arguments);
         this.instanceType = CrudSaveButton;
@@ -1032,17 +1032,17 @@ let TekCrudSaveButton = class TekCrudSaveButton extends TekCrudButton$1 {
 };
 __decorate([
     PropWatch({ type: String, default: 'SAVE' })
-], TekCrudSaveButton.prototype, "label", void 0);
+], TekCrudSaveButton$2.prototype, "label", void 0);
 __decorate([
     PropWatch({ type: String, default: 'ctrl+enter' })
-], TekCrudSaveButton.prototype, "clickShortcutKey", void 0);
-TekCrudSaveButton = __decorate([
+], TekCrudSaveButton$2.prototype, "clickShortcutKey", void 0);
+TekCrudSaveButton$2 = __decorate([
     Component
-], TekCrudSaveButton);
-var script$g = TekCrudSaveButton;
+], TekCrudSaveButton$2);
+var script$h = TekCrudSaveButton$2;
 
 /* script */
-const __vue_script__$h = script$g;
+const __vue_script__$h = script$h;
 
 /* template */
 var __vue_render__$h = function () {
@@ -1143,14 +1143,14 @@ __vue_render__$h._withStripped = true;
   );
 
 // eslint-disable-next-line prefer-destructuring
-const ZdGridEditable = components$1.ZdGridEditable;
+const ZdGridEditable$1 = components$1.ZdGridEditable;
 /**
  * TekGrid component
  */
-let TekGrid$1 = class TekGrid extends ZdGridEditable {
+let TekGrid$5 = class TekGrid extends ZdGridEditable$1 {
     constructor() {
         super(...arguments);
-        this.instanceType = TekGrid$3;
+        this.instanceType = TekGrid$6;
         this.visibleRowsLength = 0;
         this.debouncedDatasourceGet = debounce((instance) => {
             const event = new Event('change', { cancelable: true });
@@ -1569,106 +1569,109 @@ let TekGrid$1 = class TekGrid extends ZdGridEditable {
 };
 __decorate([
     PropWatch({ type: [String], default: '' })
-], TekGrid$1.prototype, "title", void 0);
+], TekGrid$5.prototype, "title", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: false })
-], TekGrid$1.prototype, "addButton", void 0);
+], TekGrid$5.prototype, "addButton", void 0);
 __decorate([
     PropWatch({ type: [String], default: 'none' })
-], TekGrid$1.prototype, "deleteButton", void 0);
+], TekGrid$5.prototype, "deleteButton", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: false })
-], TekGrid$1.prototype, "columnsButton", void 0);
+], TekGrid$5.prototype, "columnsButton", void 0);
 __decorate([
     Prop({ type: [Array, String], default: () => [] })
-], TekGrid$1.prototype, "columnsButtonIgnore", void 0);
+], TekGrid$5.prototype, "columnsButtonIgnore", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: true })
-], TekGrid$1.prototype, "showEditButtons", void 0);
+], TekGrid$5.prototype, "showEditButtons", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: false })
-], TekGrid$1.prototype, "filterButton", void 0);
+], TekGrid$5.prototype, "filterButton", void 0);
 __decorate([
     PropWatch({ type: [Object] })
-], TekGrid$1.prototype, "modalFilterProps", void 0);
+], TekGrid$5.prototype, "modalFilterProps", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: true })
-], TekGrid$1.prototype, "showSearch", void 0);
+], TekGrid$5.prototype, "showSearch", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: false })
-], TekGrid$1.prototype, "columnFilterButton", void 0);
+], TekGrid$5.prototype, "columnFilterButton", void 0);
 __decorate([
     PropWatch({ type: Boolean, default: false })
-], TekGrid$1.prototype, "hideActions", void 0);
+], TekGrid$5.prototype, "hideActions", void 0);
 __decorate([
     Prop({ type: [Array], default: () => [] })
-], TekGrid$1.prototype, "actions", void 0);
+], TekGrid$5.prototype, "actions", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekGrid$1.prototype, "dragColumns", void 0);
+], TekGrid$5.prototype, "dragColumns", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekGrid$1.prototype, "resizeColumns", void 0);
+], TekGrid$5.prototype, "resizeColumns", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekGrid$1.prototype, "showLayoutOptions", void 0);
+], TekGrid$5.prototype, "showLayoutOptions", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: false })
-], TekGrid$1.prototype, "showExport", void 0);
+], TekGrid$5.prototype, "showExport", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekGrid$1.prototype, "showReload", void 0);
+], TekGrid$5.prototype, "showReload", void 0);
 __decorate([
     PropWatch({ type: [String, Array] })
-], TekGrid$1.prototype, "exportConfig", void 0);
+], TekGrid$5.prototype, "exportConfig", void 0);
 __decorate([
     Prop({ type: [Array] })
-], TekGrid$1.prototype, "exportActions", void 0);
+], TekGrid$5.prototype, "exportActions", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: false })
-], TekGrid$1.prototype, "groupsOpened", void 0);
+], TekGrid$5.prototype, "groupsOpened", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekGrid$1.prototype, "showSummaryTotal", void 0);
+], TekGrid$5.prototype, "showSummaryTotal", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekGrid$1.prototype, "mainGrid", void 0);
+], TekGrid$5.prototype, "mainGrid", void 0);
 __decorate([
     PropWatch({ type: [String], default: undefined })
-], TekGrid$1.prototype, "xlsDefaultType", void 0);
+], TekGrid$5.prototype, "xlsDefaultType", void 0);
 __decorate([
     PropWatch({
         type: [String, Boolean],
         default: Config.gridShowCheckboxAllFilter,
     })
-], TekGrid$1.prototype, "showCheckboxAllFilter", void 0);
+], TekGrid$5.prototype, "showCheckboxAllFilter", void 0);
 __decorate([
     PropWatch({ type: [Boolean], default: true })
-], TekGrid$1.prototype, "toolbarOpened", void 0);
+], TekGrid$5.prototype, "toolbarOpened", void 0);
 __decorate([
     PropWatch({ type: [Object] })
-], TekGrid$1.prototype, "defaultFilter", void 0);
+], TekGrid$5.prototype, "defaultFilter", void 0);
 __decorate([
     PropWatch({ type: [String] })
-], TekGrid$1.prototype, "reportTitle", void 0);
+], TekGrid$5.prototype, "reportTitle", void 0);
+__decorate([
+    PropWatch({ type: [Array] })
+], TekGrid$5.prototype, "toolbarConfig", void 0);
 __decorate([
     Prop({
         type: Array,
         default: () => undefined,
     })
-], TekGrid$1.prototype, "toolbarSlot", void 0);
+], TekGrid$5.prototype, "toolbarSlot", void 0);
 __decorate([
     Watch('instance.title')
-], TekGrid$1.prototype, "updateTitle", null);
-TekGrid$1 = __decorate([
+], TekGrid$5.prototype, "updateTitle", null);
+TekGrid$5 = __decorate([
     Component({
         mixins: [EditableMixin, NavigableTableMixin],
     })
-], TekGrid$1);
-var TekGrid$2 = TekGrid$1;
+], TekGrid$5);
+var script$g = TekGrid$5;
 
 /* script */
-const __vue_script__$g = TekGrid$2;
+const __vue_script__$g = script$g;
 
 /* template */
 var __vue_render__$g = function () {
@@ -2880,7 +2883,7 @@ __vue_render__$g._withStripped = true;
   /* style */
   const __vue_inject_styles__$g = function (inject) {
     if (!inject) return
-    inject("data-v-241bc9e5_0", { source: ".tek-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n  height: 38px;\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  flex-grow: 1;\n  line-height: 22px;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: var(--row-active-color);\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-first-group-cell {\n  display: flex;\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 .zd-table-group-two-plus-container {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation {\n  top: unset;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation :not(.first-group) {\n  margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation.first-group {\n  width: 14px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\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  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n}\n.tek-grid table tbody tr.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 .zd-table-two-plus-groups {\n  display: flex !important;\n}\n.tek-grid table .zd-table-two-plus-groups .zd-table-cell-text {\n  position: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation {\n  top: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: flex;\n  position: relative;\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: 1rem;\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  top: -10%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid table .footer .zd-grid-row-checkbox {\n  display: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tek-grid-export-landscape i {\n  transform: rotate(-90deg);\n}\n.tek-grid-export-multioption-text {\n  padding-left: 3px;\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n  cursor: default;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}\n.is-rotated {\n  transform: rotate(180deg);\n  transition: transform 0.3s ease;\n}", map: undefined, media: undefined });
+    inject("data-v-20634d70_0", { source: ".tek-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n  height: 38px;\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  flex-grow: 1;\n  line-height: 22px;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: var(--row-active-color);\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-first-group-cell {\n  display: flex;\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 .zd-table-group-two-plus-container {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation {\n  top: unset;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation :not(.first-group) {\n  margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation.first-group {\n  width: 14px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\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  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n}\n.tek-grid table tbody tr.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 .zd-table-two-plus-groups {\n  display: flex !important;\n}\n.tek-grid table .zd-table-two-plus-groups .zd-table-cell-text {\n  position: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation {\n  top: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: flex;\n  position: relative;\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: 1rem;\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  top: -10%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid table .footer .zd-grid-row-checkbox {\n  display: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tek-grid-export-landscape i {\n  transform: rotate(-90deg);\n}\n.tek-grid-export-multioption-text {\n  padding-left: 3px;\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n  cursor: default;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}\n.is-rotated {\n  transform: rotate(180deg);\n  transition: transform 0.3s ease;\n  margin-right: 3.7px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -2911,21 +2914,21 @@ __vue_render__$g._withStripped = true;
 /**
  * tek Grid cell identation component
  */
-let TekGridCellIdentation = class TekGridCellIdentation extends Vue {
+let TekGridCellIdentation$2 = class TekGridCellIdentation extends Vue {
 };
 __decorate([
     Prop({ type: [Number] })
-], TekGridCellIdentation.prototype, "groupIndex", void 0);
+], TekGridCellIdentation$2.prototype, "groupIndex", void 0);
 __decorate([
     Prop({ type: [Boolean] })
-], TekGridCellIdentation.prototype, "groupFooter", void 0);
+], TekGridCellIdentation$2.prototype, "groupFooter", void 0);
 __decorate([
     Prop({ type: [Boolean] })
-], TekGridCellIdentation.prototype, "groupSummary", void 0);
-TekGridCellIdentation = __decorate([
+], TekGridCellIdentation$2.prototype, "groupSummary", void 0);
+TekGridCellIdentation$2 = __decorate([
     Component
-], TekGridCellIdentation);
-var script$f = TekGridCellIdentation;
+], TekGridCellIdentation$2);
+var script$f = TekGridCellIdentation$2;
 
 /* script */
 const __vue_script__$f = script$f;
@@ -2954,7 +2957,7 @@ __vue_render__$f._withStripped = true;
   /* style */
   const __vue_inject_styles__$f = function (inject) {
     if (!inject) return
-    inject("data-v-ae0ff78e_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: undefined, media: undefined });
+    inject("data-v-83efa3d2_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -2982,18 +2985,18 @@ __vue_render__$f._withStripped = true;
     undefined
   );
 
-let TekGridHeaderIndentation = class TekGridHeaderIndentation extends Vue {
+let TekGridHeaderIndentation$2 = class TekGridHeaderIndentation extends Vue {
 };
 __decorate([
     Prop({ type: String })
-], TekGridHeaderIndentation.prototype, "name", void 0);
+], TekGridHeaderIndentation$2.prototype, "name", void 0);
 __decorate([
     Prop({ type: Number })
-], TekGridHeaderIndentation.prototype, "groupIndex", void 0);
-TekGridHeaderIndentation = __decorate([
+], TekGridHeaderIndentation$2.prototype, "groupIndex", void 0);
+TekGridHeaderIndentation$2 = __decorate([
     Component$1
-], TekGridHeaderIndentation);
-var script$e = TekGridHeaderIndentation;
+], TekGridHeaderIndentation$2);
+var script$e = TekGridHeaderIndentation$2;
 
 /* script */
 const __vue_script__$e = script$e;
@@ -3045,7 +3048,7 @@ __vue_render__$e._withStripped = true;
     undefined
   );
 
-let TekGridColumnFilter = class TekGridColumnFilter extends Vue {
+let TekGridColumnFilter$2 = class TekGridColumnFilter extends Vue {
     itemChange(type, filterIndex, params) {
         this.$emit('itemChange', { type, filterIndex, params });
     }
@@ -3055,35 +3058,35 @@ let TekGridColumnFilter = class TekGridColumnFilter extends Vue {
 };
 __decorate([
     Prop({ type: Boolean, default: false })
-], TekGridColumnFilter.prototype, "hasFilterData", void 0);
+], TekGridColumnFilter$2.prototype, "hasFilterData", void 0);
 __decorate([
     Prop({ type: Function, required: true })
-], TekGridColumnFilter.prototype, "getFilterActivatorEvents", void 0);
+], TekGridColumnFilter$2.prototype, "getFilterActivatorEvents", void 0);
 __decorate([
     Prop({ type: Object, required: true })
-], TekGridColumnFilter.prototype, "column", void 0);
+], TekGridColumnFilter$2.prototype, "column", void 0);
 __decorate([
     Prop({ type: Array, default: [] })
-], TekGridColumnFilter.prototype, "columnFilterOptions", void 0);
+], TekGridColumnFilter$2.prototype, "columnFilterOptions", void 0);
 __decorate([
     Prop({ type: String, required: true })
-], TekGridColumnFilter.prototype, "instanceName", void 0);
+], TekGridColumnFilter$2.prototype, "instanceName", void 0);
 __decorate([
     Prop({ type: Object, required: true })
-], TekGridColumnFilter.prototype, "filterRelationsDatasource", void 0);
+], TekGridColumnFilter$2.prototype, "filterRelationsDatasource", void 0);
 __decorate([
     Prop({ type: Object, required: true })
-], TekGridColumnFilter.prototype, "filterOperationsDatasource", void 0);
+], TekGridColumnFilter$2.prototype, "filterOperationsDatasource", void 0);
 __decorate([
     Prop({ type: Function, required: true })
-], TekGridColumnFilter.prototype, "getComponentHint", void 0);
+], TekGridColumnFilter$2.prototype, "getComponentHint", void 0);
 __decorate([
     Prop({ type: Function, required: true })
-], TekGridColumnFilter.prototype, "getComponentType", void 0);
-TekGridColumnFilter = __decorate([
+], TekGridColumnFilter$2.prototype, "getComponentType", void 0);
+TekGridColumnFilter$2 = __decorate([
     Component$1
-], TekGridColumnFilter);
-var script$d = TekGridColumnFilter;
+], TekGridColumnFilter$2);
+var script$d = TekGridColumnFilter$2;
 
 /* script */
 const __vue_script__$d = script$d;
@@ -3300,84 +3303,895 @@ __vue_render__$d._withStripped = true;
     undefined
   );
 
-let TekGridColumnsOptionsController = class TekGridColumnsOptionsController {
-    constructor(modal) {
-        this.columnData = {};
-        this.fixedColumns = [];
-        this.visibleColumns = [];
-        this.groupedColumns = [];
-        this.otherColumns = [];
-        this.aggregationData = [];
-        this.selectedColumnNames = [];
-        this.searchValue = '';
-        this.showGroups = true;
-        this.updatingSelect = false;
-        this.modal = modal;
-    }
-    updateArrays() {
-        this.fixedColumns = [];
-        this.visibleColumns = [];
-        this.groupedColumns = [];
-        this.otherColumns = [];
-        Object.keys(this.columnData).forEach((name) => {
-            const column = this.columnData[name];
-            if (this.instanceValue && this.instanceValue.ignoreColumns.indexOf(column.name) === -1) {
-                if (column.grouped) {
-                    this.groupedColumns.push(column);
-                }
-                else if (column.fixed) {
-                    this.fixedColumns.push(column);
-                }
-                else if (column.isVisible) {
-                    this.visibleColumns.push(column);
-                }
-                else {
-                    this.otherColumns.push(column);
-                }
-            }
-        });
-    }
-    set instance(instance) {
-        this.instanceValue = instance;
-        this.iterableComponent = instance.iterableComponent;
-        this.showGroups = instance.iterableComponent instanceof TekGrid$3;
-        this.aggregationData = instance.getAggregationSelectData();
-        this.columnData = {};
-        this.iterableComponent.columns.forEach((column) => {
-            this.columnData[column.name] = {
-                name: column.name,
-                label: column.label,
-                fixed: column.fixed,
-                isVisible: column.isVisible,
-                align: column.align,
-                grouped: column.grouped || false,
-                groupOpened: column.groupOpened || false,
-                aggregation: column.aggregation,
-                aggregationText: this.getAggregationText(column.aggregation),
-                selected: false,
-            };
-        });
-        this.updateArrays();
-        this.selectedColumnNames = [];
-    }
-    getAggregationText(aggregation) {
-        let result = '';
-        if (aggregation) {
-            const idx = this.aggregationData.findIndex((item) => item.value === aggregation);
-            if (idx !== -1) {
-                result = ` (${this.aggregationData[idx].text})`;
-            }
-        }
-        return result;
+/**
+ * Teknisa component
+ */
+let TekBreadcrumbHeader = class TekBreadcrumbHeader extends ZdComponent {
+    constructor() {
+        super(...arguments);
+        this.instanceType = BreadcrumbHeader;
     }
-    columnInSearch(column) {
-        return (!this.searchValue || Utils.normalize(column.label).indexOf(Utils.normalize(this.searchValue)) !== -1);
+};
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekBreadcrumbHeader.prototype, "title", void 0);
+__decorate([
+    Prop({ type: Object, default: {} })
+], TekBreadcrumbHeader.prototype, "breadcrumb", void 0);
+__decorate([
+    Prop({ type: Array, default: () => [] })
+], TekBreadcrumbHeader.prototype, "rightSlot", void 0);
+TekBreadcrumbHeader = __decorate([
+    Component
+], TekBreadcrumbHeader);
+var TekBreadcrumbHeader$1 = TekBreadcrumbHeader;
+
+/**
+ * TekCardTitle component join an icon, title, rightSlot and a divider
+ */
+let TekCardTitle = class TekCardTitle extends ZdComponentRender {
+    constructor() {
+        super(...arguments);
+        this.instanceType = CardTitle;
     }
-    get fixedColumnData() {
-        return this.fixedColumns.filter(this.columnInSearch.bind(this));
+};
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekCardTitle.prototype, "title", void 0);
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekCardTitle.prototype, "subtitle", void 0);
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekCardTitle.prototype, "iconName", void 0);
+__decorate([
+    Prop({ type: Array, default: () => [] })
+], TekCardTitle.prototype, "rightSlot", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: true })
+], TekCardTitle.prototype, "showDivider", void 0);
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekCardTitle.prototype, "to", void 0);
+TekCardTitle = __decorate([
+    Component
+], TekCardTitle);
+var TekCardTitle$1 = TekCardTitle;
+
+/**
+ * TekCrudAddButton component
+ */
+let TekCrudAddButton = class TekCrudAddButton extends TekCrudButton$1 {
+    constructor() {
+        super(...arguments);
+        this.instanceType = CrudAddButton;
     }
-    set fixedColumnData(_data) {
-        // do nothing
+};
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekCrudAddButton.prototype, "flat", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekCrudAddButton.prototype, "icon", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'plus' })
+], TekCrudAddButton.prototype, "iconName", void 0);
+__decorate([
+    PropWatch({ type: String, default: '#666' })
+], TekCrudAddButton.prototype, "color", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'f2' })
+], TekCrudAddButton.prototype, "clickShortcutKey", void 0);
+TekCrudAddButton = __decorate([
+    Component
+], TekCrudAddButton);
+var TekCrudAddButton$1 = TekCrudAddButton;
+
+/**
+ * TekCrudCancelButton component
+ */
+let TekCrudCancelButton = class TekCrudCancelButton extends TekCrudButton$1 {
+    constructor() {
+        super(...arguments);
+        this.instanceType = CrudCancelButton;
+    }
+};
+__decorate([
+    PropWatch({ type: String, default: 'CANCEL' })
+], TekCrudCancelButton.prototype, "label", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekCrudCancelButton.prototype, "outline", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'esc' })
+], TekCrudCancelButton.prototype, "clickShortcutKey", void 0);
+TekCrudCancelButton = __decorate([
+    Component
+], TekCrudCancelButton);
+var TekCrudCancelButton$1 = TekCrudCancelButton;
+
+/**
+ * TekCrudDeleteButton component
+ */
+let TekCrudDeleteButton = class TekCrudDeleteButton extends TekCrudButton$1 {
+    constructor() {
+        super(...arguments);
+        this.instanceType = CrudDeleteButton;
+    }
+};
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekCrudDeleteButton.prototype, "flat", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekCrudDeleteButton.prototype, "icon", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'trashCanOutline' })
+], TekCrudDeleteButton.prototype, "iconName", void 0);
+__decorate([
+    PropWatch({ type: String, default: '#666' })
+], TekCrudDeleteButton.prototype, "color", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'ctrl+d' })
+], TekCrudDeleteButton.prototype, "clickShortcutKey", void 0);
+TekCrudDeleteButton = __decorate([
+    Component
+], TekCrudDeleteButton);
+var TekCrudDeleteButton$1 = TekCrudDeleteButton;
+
+/**
+ * TekCrudForm component
+ */
+let TekCrudForm = class TekCrudForm extends ZdForm {
+    constructor() {
+        super(...arguments);
+        this.instanceType = CrudForm;
+    }
+};
+TekCrudForm = __decorate([
+    Component
+], TekCrudForm);
+var TekCrudForm$1 = TekCrudForm;
+
+/**
+ * TekCrudSaveButton component
+ */
+let TekCrudSaveButton = class TekCrudSaveButton extends TekCrudButton$1 {
+    constructor() {
+        super(...arguments);
+        this.instanceType = CrudSaveButton;
+    }
+};
+__decorate([
+    PropWatch({ type: String, default: 'SAVE' })
+], TekCrudSaveButton.prototype, "label", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'ctrl+enter' })
+], TekCrudSaveButton.prototype, "clickShortcutKey", void 0);
+TekCrudSaveButton = __decorate([
+    Component
+], TekCrudSaveButton);
+var TekCrudSaveButton$1 = TekCrudSaveButton;
+
+// eslint-disable-next-line prefer-destructuring
+const ZdGridEditable = components$1.ZdGridEditable;
+/**
+ * TekGrid component
+ */
+let TekGrid$3 = class TekGrid extends ZdGridEditable {
+    constructor() {
+        super(...arguments);
+        this.instanceType = TekGrid$6;
+        this.visibleRowsLength = 0;
+        this.debouncedDatasourceGet = debounce((instance) => {
+            const event = new Event('change', { cancelable: true });
+            instance.callEvent('beforeApplyFilter', { component: instance, event });
+            if (event.defaultPrevented)
+                return;
+            const { datasource } = instance;
+            if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+                datasource.updateDynamicFilter();
+            }
+            else {
+                datasource.get();
+            }
+        }, 500);
+        this.debouncedFilterChange = debounce((column, index, params) => this.filterValueChange(column, index, params), 1000);
+        this.operationList = '';
+        this.defaultOperation = '';
+        this.defaultRelation = '';
+        this.lastFilter = '';
+    }
+    updateTitle(instanceUpdateTitle) {
+        if (this.instance.toolbarSlot[0].name === `${this.instance.name}_gridTitle`) {
+            this.instance.toolbarSlot[0].text = instanceUpdateTitle;
+        }
+    }
+    mounted() {
+        this.originalChangeLayout = this.instance.changeLayout;
+        this.instance.changeLayout = this.onChangeLayout;
+        this.instance.viewUpdateScrollData = this.calcScrollData;
+        this.instance.viewUpdateFixedColumns = this.updateFixedColumns.bind(this);
+    }
+    minimumColumnWidth(column) {
+        let minWidth = this.superMethods(ZdGrid).minimumColumnWidth.call(this, column);
+        if (this.instance.columnFilterButton && column && column.filterable) {
+            minWidth += 15;
+        }
+        return minWidth;
+    }
+    onChangeLayout(event, element) {
+        if (this.originalChangeLayout) {
+            this.originalChangeLayout.call(this.instance, event, element);
+        }
+        if (this.instance.showLayoutOptions) {
+            try {
+                const layoutOptions = Metadata.getInstance(`${this.instance.name}_layout_options`);
+                layoutOptions.layoutEdited = true;
+            }
+            catch (_a) {
+                // do nothing
+            }
+        }
+        setTimeout(this.updateFixedColumns.bind(this));
+    }
+    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, params) {
+        return this.filterItemChange(prop, column, index, params);
+    }
+    getFilterValueChange(column, index, params) {
+        return this.debouncedFilterChange(column, index, params);
+    }
+    isOperationArrayValues(operation) {
+        return ['IN', 'NOT_IN', 'BETWEEN'].includes(operation);
+    }
+    getComponentType(index) {
+        const operationListArray = this.operationList.split(';');
+        return this.isOperationArrayValues(operationListArray[index]) ? 'ZdTextInput' : '';
+    }
+    getComponentHint(index) {
+        const operationListArray = this.operationList.split(';');
+        return this.isOperationArrayValues(operationListArray[index]) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
+    }
+    filterItemChange(prop, column, index, { component, event, element }) {
+        const { name } = component;
+        const valueInputName = name.replace(`-filter-${prop}-`, '-filter-value-');
+        const valueInput = Metadata.getInstance(valueInputName);
+        const operationListArray = this.operationList.split(';');
+        if (prop === 'operation' && operationListArray[index] !== component.value) {
+            operationListArray[index] = component.value;
+            this.operationList = operationListArray.join(';');
+        }
+        try {
+            valueInput.setFocus();
+        }
+        catch (_a) {
+            // do nothing
+        }
+        const { datasource } = this.instance;
+        if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+            if (datasource.dynamicFilter[column.name] && datasource.dynamicFilter[column.name][index]) {
+                this.lastFilter = JSON.stringify(datasource.dynamicFilter);
+                const { value } = datasource.dynamicFilter[column.name][index];
+                if (prop === 'operation') {
+                    if (this.isOperationArrayValues(component.value) && !Array.isArray(value)) {
+                        datasource.dynamicFilter[column.name][index].value = [value];
+                    }
+                    if (!this.isOperationArrayValues(component.value) && Array.isArray(value)) {
+                        [datasource.dynamicFilter[column.name][index].value] = value;
+                    }
+                }
+                datasource.dynamicFilter[column.name][index][prop] = component.value;
+                if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
+                    this.debouncedDatasourceGet(this.instance);
+                    this.onChangeLayout(event, element);
+                }
+            }
+        }
+    }
+    convertToDateFormat(column, value, revert) {
+        const dateFormat = column.componentProps.dateFormat || Config.dateFormat;
+        const displayFormat = column.componentProps.displayFormat || Config.displayFormat;
+        if (revert) {
+            if (dayjs(value, displayFormat).isValid() || !dayjs(value, dateFormat).isValid()) {
+                return value;
+            }
+            return dayjs(value, dateFormat).format(displayFormat);
+        }
+        if (dayjs(value, dateFormat).isValid() || !dayjs(value, displayFormat).isValid()) {
+            return value;
+        }
+        return dayjs(value, displayFormat).format(dateFormat);
+    }
+    checkDateValueFormat(column, value, revert = false) {
+        if (['ZdDate', 'ZdDateRange'].includes(column.componentProps.component)) {
+            if (Array.isArray(value)) {
+                return value.map((item) => this.convertToDateFormat(column, item, revert));
+            }
+            return this.convertToDateFormat(column, value, revert);
+        }
+        return value;
+    }
+    filterValueChange(column, index, { component, event, element }) {
+        let { value } = component;
+        const { datasource } = this.instance;
+        if (!(element === null || element === void 0 ? void 0 : element.offsetParent))
+            return;
+        if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+            this.lastFilter = JSON.stringify(datasource.dynamicFilter);
+            if (value) {
+                if (!datasource.dynamicFilter[column.name]) {
+                    datasource.dynamicFilter[column.name] = [];
+                }
+                if (!datasource.dynamicFilter[column.name][index]) {
+                    const { name } = component;
+                    let relation;
+                    if (index > 0) {
+                        const relationSelectName = name.replace('-filter-value-', '-filter-relation-');
+                        const relationSelect = Metadata.getInstance(relationSelectName);
+                        relation = relationSelect.value;
+                    }
+                    else {
+                        relation = 'AND';
+                    }
+                    const operationSelectName = name.replace('-filter-value-', '-filter-operation-');
+                    const operationSelect = Metadata.getInstance(operationSelectName);
+                    const operation = operationSelect.value;
+                    if (this.isOperationArrayValues(operation)) {
+                        value = value.split(';');
+                    }
+                    value = this.checkDateValueFormat(column, value);
+                    datasource.dynamicFilter[column.name].push({
+                        relation,
+                        operation,
+                        value,
+                    });
+                }
+                else {
+                    if (this.isOperationArrayValues(datasource.dynamicFilter[column.name][index].operation)) {
+                        value = value.split(';');
+                    }
+                    value = this.checkDateValueFormat(column, value);
+                    datasource.dynamicFilter[column.name][index].value = value;
+                }
+            }
+            else if (datasource.dynamicFilter[column.name] && datasource.dynamicFilter[column.name][index]) {
+                this.defaultOperation = datasource.dynamicFilter[column.name][index].operation;
+                this.defaultRelation = datasource.dynamicFilter[column.name][index].relation;
+                datasource.dynamicFilter[column.name].splice(index, 1);
+                if (datasource.dynamicFilter[column.name].length === 1) {
+                    datasource.dynamicFilter[column.name][0].relation = 'AND';
+                }
+                if (!datasource.dynamicFilter[column.name].length) {
+                    delete datasource.dynamicFilter[column.name];
+                }
+            }
+            if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
+                this.debouncedDatasourceGet(this.instance);
+                this.onChangeLayout(event, element);
+                this.clearHelperValues(column);
+            }
+        }
+        else {
+            this.lastFilter = JSON.stringify(this.instance.datasource.filter);
+            if (value) {
+                this.instance.datasource.addFilter(column.name, value);
+            }
+            else {
+                this.instance.datasource.removeFilter(column.name);
+            }
+            if (this.lastFilter !== JSON.stringify(this.instance.datasource.filter)) {
+                this.debouncedDatasourceGet(this.instance);
+                this.onChangeLayout(event, element);
+                this.clearHelperValues(column);
+            }
+        }
+    }
+    clearHelperValues(column) {
+        if (!Array.isArray(column.filterProps)) {
+            column.filterProps.helperValue = '';
+        }
+        else {
+            column.filterProps.forEach((prop) => {
+                prop.helperValue = '';
+            });
+        }
+    }
+    getColumnFilterOptions(column) {
+        const filterOptions = [];
+        const { datasource } = this.instance;
+        if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+            const dynamicFilter = datasource.dynamicFilter[column.name];
+            if (dynamicFilter && dynamicFilter.length > 0) {
+                dynamicFilter.forEach((item) => {
+                    let { value } = item;
+                    if (this.isOperationArrayValues(item.operation) && Array.isArray(value)) {
+                        value = this.checkDateValueFormat(column, value, true);
+                        value = value.join(';');
+                    }
+                    filterOptions.push(Object.assign(Object.assign({}, item), { value }));
+                });
+            }
+            filterOptions.push({
+                operation: this.defaultOperation,
+                relation: this.defaultRelation,
+                value: '',
+            });
+        }
+        else {
+            const option = {
+                operation: undefined,
+                relation: undefined,
+                value: this.instance.datasource.filter[column.name] || '',
+            };
+            filterOptions.push(option);
+        }
+        return filterOptions;
+    }
+    isCurrentRowGroup(row) {
+        const { uniqueKey, currentRow } = this.instance.datasource;
+        return !!((row.group && row.groupValue === currentRow.groupValue)
+            || (row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey]));
+    }
+    isCurrentRow(row) {
+        const { uniqueKey, currentRow } = this.instance.datasource;
+        return !this.instance.cellSelection && (!!((row.group && row.groupValue === currentRow.groupValue)
+            || (row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey])));
+    }
+    getVisibleData() {
+        const groupColumns = !!this.instance.groupColumnNames.length;
+        if (groupColumns || (this.instance.showSummaryTotal && this.instance.summaryColumns.length)) {
+            this.scrollData.visibleData = this.instance.groupedData.filter((row) => this.instance.isItemVisible(row));
+        }
+        else {
+            this.scrollData.visibleData = this.instance.datasource.data;
+        }
+    }
+    cellDoubleClick(row, column, event) {
+        this.instance.cellDoubleClick(row, column, event, this.$el);
+    }
+    getData() {
+        let data;
+        const groupColumns = !!this.instance.groupColumnNames.length;
+        if (groupColumns || (this.instance.showSummaryTotal && this.instance.summaryColumns.length)) {
+            data = this.instance.groupedData;
+        }
+        else {
+            data = this.renderedData;
+        }
+        this.getVisibleData();
+        return data;
+    }
+    rowClick(row, event) {
+        if (row.group || row.groupFooter || row.groupSummary) {
+            this.instance.groupRowClick(row, event, this.$el);
+        }
+        else {
+            this.instance.rowClick(row, event, this.$el);
+        }
+    }
+    rowDoubleClick(row, event) {
+        if (row.group || row.groupFooter || row.groupSummary) {
+            this.instance.groupRowDoubleClick(row, event, this.$el);
+        }
+        else {
+            this.instance.rowDoubleClick(row, event, this.$el);
+        }
+    }
+    orderHeaders(headers) {
+        return headers.sort((a, b) => {
+            if (a.fixed === b.fixed)
+                return 0;
+            if (!a.fixed && b.fixed)
+                return 1;
+            return -1;
+        }).filter((item) => (item instanceof TekGridColumn) && (item.isVisible));
+    }
+    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);
+        });
+    }
+    get headers() {
+        this.$nextTick(() => {
+            if (this.$el)
+                this.updateFixedColumns.call(this);
+        });
+        return this.instance.columns;
+    }
+    getColumnsDOMOrder() {
+        return this.orderHeaders(this.instance.columns);
+    }
+    resizeMouseMoveHandler(event) {
+        this.superMethods(ZdGrid).resizeMouseMoveHandler.call(this, event);
+    }
+    checkIfVirtualRow(item) {
+        this.visibleRowsLength = this.scrollData.visibleData.length;
+        const { uniqueKey } = this.instance.datasource;
+        const index = this.scrollData.visibleData.findIndex((row) => {
+            if (Object.keys(row).length !== Object.keys(item).length) {
+                return false;
+            }
+            if (item.group) {
+                if (item.groupColumnName === row.groupColumnName && item.groupValue === row.groupValue)
+                    return true;
+            }
+            else if (item.groupFooter) {
+                if (item.groupIndex === row.groupIndex && item.groupValue === row.groupValue)
+                    return true;
+            }
+            else if (item.groupSummary && row.groupSummary)
+                return true;
+            else
+                return (item[uniqueKey] === row[uniqueKey]);
+            return false;
+        });
+        const startIndex = this.scrollData.start - this.instance.virtualScrollCache;
+        const endIndex = this.scrollData.start + this.scrollData.perPage + this.instance.virtualScrollCache;
+        return (!this.instance.virtualScroll
+            || (index >= startIndex && index <= endIndex));
+    }
+    get getEndHeight() {
+        if (this.instance.groupColumns) {
+            const finalIndex = Math.max(this.visibleRowsLength - this.scrollData.start
+                - this.scrollData.perPage - this.instance.virtualScrollCache, 0);
+            const { rowHeight } = this.scrollData;
+            return finalIndex * rowHeight;
+        }
+        return this.scrollData.endHeight;
+    }
+    openGroup(item) {
+        this.instance.openGroup(item);
+        this.getVisibleData();
+    }
+    isCellEditable(row, column, canEdit) {
+        const rowKey = this.rowKey(row);
+        const cellsApplied = (this.instance.cellsApplied[rowKey] || {})[column.name];
+        return Object.assign(Object.assign({}, column), cellsApplied).editable && canEdit && !row.groupFooter;
+    }
+};
+__decorate([
+    PropWatch({ type: [String], default: '' })
+], TekGrid$3.prototype, "title", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false })
+], TekGrid$3.prototype, "addButton", void 0);
+__decorate([
+    PropWatch({ type: [String], default: 'none' })
+], TekGrid$3.prototype, "deleteButton", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false })
+], TekGrid$3.prototype, "columnsButton", void 0);
+__decorate([
+    Prop({ type: [Array, String], default: () => [] })
+], TekGrid$3.prototype, "columnsButtonIgnore", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: true })
+], TekGrid$3.prototype, "showEditButtons", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false })
+], TekGrid$3.prototype, "filterButton", void 0);
+__decorate([
+    PropWatch({ type: [Object] })
+], TekGrid$3.prototype, "modalFilterProps", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: true })
+], TekGrid$3.prototype, "showSearch", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false })
+], TekGrid$3.prototype, "columnFilterButton", void 0);
+__decorate([
+    PropWatch({ type: Boolean, default: false })
+], TekGrid$3.prototype, "hideActions", void 0);
+__decorate([
+    Prop({ type: [Array], default: () => [] })
+], TekGrid$3.prototype, "actions", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekGrid$3.prototype, "dragColumns", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekGrid$3.prototype, "resizeColumns", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekGrid$3.prototype, "showLayoutOptions", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: false })
+], TekGrid$3.prototype, "showExport", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekGrid$3.prototype, "showReload", void 0);
+__decorate([
+    PropWatch({ type: [String, Array] })
+], TekGrid$3.prototype, "exportConfig", void 0);
+__decorate([
+    Prop({ type: [Array] })
+], TekGrid$3.prototype, "exportActions", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: false })
+], TekGrid$3.prototype, "groupsOpened", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekGrid$3.prototype, "showSummaryTotal", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekGrid$3.prototype, "mainGrid", void 0);
+__decorate([
+    PropWatch({ type: [String], default: undefined })
+], TekGrid$3.prototype, "xlsDefaultType", void 0);
+__decorate([
+    PropWatch({
+        type: [String, Boolean],
+        default: Config.gridShowCheckboxAllFilter,
+    })
+], TekGrid$3.prototype, "showCheckboxAllFilter", void 0);
+__decorate([
+    PropWatch({ type: [Boolean], default: true })
+], TekGrid$3.prototype, "toolbarOpened", void 0);
+__decorate([
+    PropWatch({ type: [Object] })
+], TekGrid$3.prototype, "defaultFilter", void 0);
+__decorate([
+    PropWatch({ type: [String] })
+], TekGrid$3.prototype, "reportTitle", void 0);
+__decorate([
+    PropWatch({ type: [Array] })
+], TekGrid$3.prototype, "toolbarConfig", void 0);
+__decorate([
+    Prop({
+        type: Array,
+        default: () => undefined,
+    })
+], TekGrid$3.prototype, "toolbarSlot", void 0);
+__decorate([
+    Watch('instance.title')
+], TekGrid$3.prototype, "updateTitle", null);
+TekGrid$3 = __decorate([
+    Component({
+        mixins: [EditableMixin, NavigableTableMixin],
+    })
+], TekGrid$3);
+var TekGrid$4 = TekGrid$3;
+
+/**
+ * tek Grid cell identation component
+ */
+let TekGridCellIdentation = class TekGridCellIdentation extends Vue {
+};
+__decorate([
+    Prop({ type: [Number] })
+], TekGridCellIdentation.prototype, "groupIndex", void 0);
+__decorate([
+    Prop({ type: [Boolean] })
+], TekGridCellIdentation.prototype, "groupFooter", void 0);
+__decorate([
+    Prop({ type: [Boolean] })
+], TekGridCellIdentation.prototype, "groupSummary", void 0);
+TekGridCellIdentation = __decorate([
+    Component
+], TekGridCellIdentation);
+var TekGridCellIdentation$1 = TekGridCellIdentation;
+
+let TekGridHeaderIndentation = class TekGridHeaderIndentation extends Vue {
+};
+__decorate([
+    Prop({ type: String })
+], TekGridHeaderIndentation.prototype, "name", void 0);
+__decorate([
+    Prop({ type: Number })
+], TekGridHeaderIndentation.prototype, "groupIndex", void 0);
+TekGridHeaderIndentation = __decorate([
+    Component$1
+], TekGridHeaderIndentation);
+var TekGridHeaderIndentation$1 = TekGridHeaderIndentation;
+
+let TekGridColumnFilter = class TekGridColumnFilter extends Vue {
+    itemChange(type, filterIndex, params) {
+        this.$emit('itemChange', { type, filterIndex, params });
+    }
+    valueChange(filterIndex, params) {
+        this.$emit('valueChange', { filterIndex, params });
+    }
+};
+__decorate([
+    Prop({ type: Boolean, default: false })
+], TekGridColumnFilter.prototype, "hasFilterData", void 0);
+__decorate([
+    Prop({ type: Function, required: true })
+], TekGridColumnFilter.prototype, "getFilterActivatorEvents", void 0);
+__decorate([
+    Prop({ type: Object, required: true })
+], TekGridColumnFilter.prototype, "column", void 0);
+__decorate([
+    Prop({ type: Array, default: [] })
+], TekGridColumnFilter.prototype, "columnFilterOptions", void 0);
+__decorate([
+    Prop({ type: String, required: true })
+], TekGridColumnFilter.prototype, "instanceName", void 0);
+__decorate([
+    Prop({ type: Object, required: true })
+], TekGridColumnFilter.prototype, "filterRelationsDatasource", void 0);
+__decorate([
+    Prop({ type: Object, required: true })
+], TekGridColumnFilter.prototype, "filterOperationsDatasource", void 0);
+__decorate([
+    Prop({ type: Function, required: true })
+], TekGridColumnFilter.prototype, "getComponentHint", void 0);
+__decorate([
+    Prop({ type: Function, required: true })
+], TekGridColumnFilter.prototype, "getComponentType", void 0);
+TekGridColumnFilter = __decorate([
+    Component$1
+], TekGridColumnFilter);
+var TekGridColumnFilter$1 = TekGridColumnFilter;
+
+/**
+ * TekDragGrid component
+ */
+let TekDragGrid$1 = class TekDragGrid extends TekGrid$4 {
+    constructor() {
+        super(...arguments);
+        this.instanceType = TekDragGrid$3;
+        this.dragColumnWidth = 24;
+    }
+    dragOnMove(event) {
+        return this.instance.onDragMove(event, event.draggedContext.element, this.$el);
+    }
+    dragOnStart(event) {
+        this.instance.onDragStart(event, this.instance.datasource.data[event.oldIndex], this.$el);
+    }
+    dragOnEnd(event) {
+        this.instance.onDragEnd(event, this.instance.datasource.data[event.newIndex], this.$el);
+    }
+    updateFixedColumns() {
+        return updateDraggableFixedColumns.bind(this)(this.dragColumnWidth);
+    }
+    get cssVars() {
+        return {
+            '--drag-column-width': `${this.dragColumnWidth}px`,
+        };
+    }
+};
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekDragGrid$1.prototype, "orderColumnName", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'asc' })
+], TekDragGrid$1.prototype, "orderMode", void 0);
+TekDragGrid$1 = __decorate([
+    Component({
+        mixins: [EditableMixin, NavigableTableMixin],
+        components: { draggable, ZdDragGridHandle, ZdDragGridHandleHeader },
+    })
+], TekDragGrid$1);
+var TekDragGrid$2 = TekDragGrid$1;
+
+let TekGridColumnsOptionsController = class TekGridColumnsOptionsController {
+    constructor(modal) {
+        this.columnData = {};
+        this.fixedColumns = [];
+        this.visibleColumns = [];
+        this.groupedColumns = [];
+        this.otherColumns = [];
+        this.aggregationData = [];
+        this.selectedColumnNames = [];
+        this.searchValue = '';
+        this.showGroups = true;
+        this.updatingSelect = false;
+        this.modal = modal;
+    }
+    updateArrays() {
+        this.fixedColumns = [];
+        this.visibleColumns = [];
+        this.groupedColumns = [];
+        this.otherColumns = [];
+        Object.keys(this.columnData).forEach((name) => {
+            const column = this.columnData[name];
+            if (this.instanceValue && this.instanceValue.ignoreColumns.indexOf(column.name) === -1) {
+                if (column.grouped) {
+                    this.groupedColumns.push(column);
+                }
+                else if (column.fixed) {
+                    this.fixedColumns.push(column);
+                }
+                else if (column.isVisible) {
+                    this.visibleColumns.push(column);
+                }
+                else {
+                    this.otherColumns.push(column);
+                }
+            }
+        });
+    }
+    set instance(instance) {
+        this.instanceValue = instance;
+        this.iterableComponent = instance.iterableComponent;
+        this.showGroups = instance.iterableComponent instanceof TekGrid$6;
+        this.aggregationData = instance.getAggregationSelectData();
+        this.columnData = {};
+        this.iterableComponent.columns.forEach((column) => {
+            this.columnData[column.name] = {
+                name: column.name,
+                label: column.label,
+                fixed: column.fixed,
+                isVisible: column.isVisible,
+                align: column.align,
+                grouped: column.grouped || false,
+                groupOpened: column.groupOpened || false,
+                aggregation: column.aggregation,
+                aggregationText: this.getAggregationText(column.aggregation),
+                selected: false,
+            };
+        });
+        this.updateArrays();
+        this.selectedColumnNames = [];
+    }
+    getAggregationText(aggregation) {
+        let result = '';
+        if (aggregation) {
+            const idx = this.aggregationData.findIndex((item) => item.value === aggregation);
+            if (idx !== -1) {
+                result = ` (${this.aggregationData[idx].text})`;
+            }
+        }
+        return result;
+    }
+    columnInSearch(column) {
+        return (!this.searchValue || Utils.normalize(column.label).indexOf(Utils.normalize(this.searchValue)) !== -1);
+    }
+    get fixedColumnData() {
+        return this.fixedColumns.filter(this.columnInSearch.bind(this));
+    }
+    set fixedColumnData(_data) {
+        // do nothing
     }
     get visibleColumnData() {
         return this.visibleColumns.filter(this.columnInSearch.bind(this));
@@ -3629,7 +4443,7 @@ let TekGridColumnsOptionsController = class TekGridColumnsOptionsController {
     }
     columnContainerMounted({ element }) {
         if (element) {
-            Sortable.create(element, {
+            sortable.create(element, {
                 handle: '.tek-grid-column-option-box',
                 group: 'column-container',
                 filter: '.no-data, .tek-grid-column-option-grouped-true',
@@ -4200,10 +5014,10 @@ TekGridColumnsOptionsModal.modalDef = {
 /**
  * TekGrid Columns Button component
  */
-let TekGridColumnsButton = class TekGridColumnsButton extends ZdIterableColumnsButton {
+let TekGridColumnsButton$1 = class TekGridColumnsButton extends ZdIterableColumnsButton {
     constructor() {
         super(...arguments);
-        this.instanceType = TekGridColumnsButton$1;
+        this.instanceType = TekGridColumnsButton$3;
         this.menuIsOpened = false;
         this.sortableInitialized = false;
     }
@@ -4213,7 +5027,7 @@ let TekGridColumnsButton = class TekGridColumnsButton extends ZdIterableColumnsB
             this.$nextTick(() => {
                 const columnsTableBody = document.querySelector(`#${this.instance.name}_columns_table tbody`);
                 if (columnsTableBody) {
-                    Sortable.create(columnsTableBody, {
+                    sortable.create(columnsTableBody, {
                         handle: '.sortHandle',
                         dragClass: 'tek-grid-columns-button-sortable-drag',
                         onEnd: this.sortEnd,
@@ -4249,24 +5063,24 @@ let TekGridColumnsButton = class TekGridColumnsButton extends ZdIterableColumnsB
 };
 __decorate([
     PropWatch({ type: [Boolean, String], default: false })
-], TekGridColumnsButton.prototype, "hideGroups", void 0);
+], TekGridColumnsButton$1.prototype, "hideGroups", void 0);
 __decorate([
     Watch('menuIsOpened')
-], TekGridColumnsButton.prototype, "menuOpenedChange", null);
-TekGridColumnsButton = __decorate([
+], TekGridColumnsButton$1.prototype, "menuOpenedChange", null);
+TekGridColumnsButton$1 = __decorate([
     Component
-], TekGridColumnsButton);
-var script$c = TekGridColumnsButton;
+], TekGridColumnsButton$1);
+var TekGridColumnsButton$2 = TekGridColumnsButton$1;
 
 // eslint-disable-next-line prefer-destructuring
-const ZdButton = components$1.ZdButton;
+const ZdButton$1 = components$1.ZdButton;
 /**
  * TekGrid Columns Button component
  */
-let TekGridFilterButton = class TekGridFilterButton extends ZdButton {
+let TekGridFilterButton$1 = class TekGridFilterButton extends ZdButton$1 {
     constructor() {
         super(...arguments);
-        this.instanceType = TekGridFilterButton$1;
+        this.instanceType = TekGridFilterButton$3;
     }
     filterClick({ event }) {
         this.instance.click(event);
@@ -4293,25 +5107,25 @@ let TekGridFilterButton = class TekGridFilterButton extends ZdButton {
 };
 __decorate([
     PropWatch({ type: [String], default: '' })
-], TekGridFilterButton.prototype, "gridName", void 0);
+], TekGridFilterButton$1.prototype, "gridName", void 0);
 __decorate([
     PropWatch({ type: [Object, String], default: () => { } })
-], TekGridFilterButton.prototype, "grid", void 0);
+], TekGridFilterButton$1.prototype, "grid", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: false })
-], TekGridFilterButton.prototype, "showCheckboxAll", void 0);
-TekGridFilterButton = __decorate([
+], TekGridFilterButton$1.prototype, "showCheckboxAll", void 0);
+TekGridFilterButton$1 = __decorate([
     Component
-], TekGridFilterButton);
-var script$b = TekGridFilterButton;
+], TekGridFilterButton$1);
+var TekGridFilterButton$2 = TekGridFilterButton$1;
 
 /**
  * TekGridLayoutOptions component
  */
-let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender {
+let TekGridLayoutOptions$1 = class TekGridLayoutOptions extends ZdComponentRender {
     constructor() {
         super(...arguments);
-        this.instanceType = TekGridLayoutOptions$1;
+        this.instanceType = TekGridLayoutOptions$3;
     }
     created() {
         this.instance.viewApplyLayout = this.applyLayout;
@@ -4437,7 +5251,7 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
                 !== oldDynamicFilter)
             && !groupParamsChanged) {
             // Se os parametros de agrupamento tiverem sido alterados um get é feito automaticamente
-            if (grid instanceof TekGrid$3) {
+            if (grid instanceof TekGrid$6) {
                 grid.loadAfterTasks();
             }
             else {
@@ -4540,15 +5354,15 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
         event.stopImmediatePropagation();
     }
 };
-TekGridLayoutOptions = __decorate([
+TekGridLayoutOptions$1 = __decorate([
     Component
-], TekGridLayoutOptions);
-var script$a = TekGridLayoutOptions;
+], TekGridLayoutOptions$1);
+var TekGridLayoutOptions$2 = TekGridLayoutOptions$1;
 
 /**
  * DocTable component
  */
-let TekImage = class TekImage extends ZdComponent {
+let TekImage$1 = class TekImage extends ZdComponent {
     constructor() {
         super(...arguments);
         this.instanceType = Image;
@@ -4564,54 +5378,54 @@ let TekImage = class TekImage extends ZdComponent {
 };
 __decorate([
     PropWatch({ type: String, default: '' })
-], TekImage.prototype, "to", void 0);
+], TekImage$1.prototype, "to", void 0);
 __decorate([
     PropWatch({ type: String, default: '' })
-], TekImage.prototype, "src", void 0);
+], TekImage$1.prototype, "src", void 0);
 __decorate([
     PropWatch({ type: [Number, String], default: 'auto' })
-], TekImage.prototype, "height", void 0);
+], TekImage$1.prototype, "height", void 0);
 __decorate([
     PropWatch({ type: [Number, String], default: 'auto' })
-], TekImage.prototype, "minHeight", void 0);
+], TekImage$1.prototype, "minHeight", void 0);
 __decorate([
     PropWatch({ type: [Number, String], default: 'none' })
-], TekImage.prototype, "maxHeight", void 0);
+], TekImage$1.prototype, "maxHeight", void 0);
 __decorate([
     PropWatch({ type: [Number, String], default: 'auto' })
-], TekImage.prototype, "width", void 0);
+], TekImage$1.prototype, "width", void 0);
 __decorate([
     PropWatch({ type: [Number, String], default: 'auto' })
-], TekImage.prototype, "minWidth", void 0);
+], TekImage$1.prototype, "minWidth", void 0);
 __decorate([
     PropWatch({ type: [Number, String], default: 'none' })
-], TekImage.prototype, "maxWidth", void 0);
+], TekImage$1.prototype, "maxWidth", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: false })
-], TekImage.prototype, "fillHeight", void 0);
-TekImage = __decorate([
+], TekImage$1.prototype, "fillHeight", void 0);
+TekImage$1 = __decorate([
     Component
-], TekImage);
-var script$9 = TekImage;
+], TekImage$1);
+var TekImage$2 = TekImage$1;
 
 /**
  * ZdIterableComponentRender component
  */
-let TekIterableComponentRender = class TekIterableComponentRender extends ZdIterableComponentRender {
+let TekIterableComponentRender$1 = class TekIterableComponentRender extends ZdIterableComponentRender {
     constructor() {
         super(...arguments);
         this.instanceType = IterableComponentRender;
     }
 };
-TekIterableComponentRender = __decorate([
+TekIterableComponentRender$1 = __decorate([
     Component
-], TekIterableComponentRender);
-var script$8 = TekIterableComponentRender;
+], TekIterableComponentRender$1);
+var TekIterableComponentRender$2 = TekIterableComponentRender$1;
 
 /**
  * Product card component
  */
-let TekProductCard = class TekProductCard extends ZdComponentRender {
+let TekProductCard$1 = class TekProductCard extends ZdComponentRender {
     constructor() {
         super(...arguments);
         this.instanceType = ProductCard;
@@ -4626,54 +5440,54 @@ let TekProductCard = class TekProductCard extends ZdComponentRender {
 };
 __decorate([
     PropWatch({ type: String, default: '' })
-], TekProductCard.prototype, "id", void 0);
+], TekProductCard$1.prototype, "id", void 0);
 __decorate([
     PropWatch({ type: String, default: '' })
-], TekProductCard.prototype, "to", void 0);
+], TekProductCard$1.prototype, "to", void 0);
 __decorate([
     PropWatch({ type: String, default: '' })
-], TekProductCard.prototype, "src", void 0);
+], TekProductCard$1.prototype, "src", void 0);
 __decorate([
     PropWatch({ type: String, default: '' })
-], TekProductCard.prototype, "errorImagePath", void 0);
+], TekProductCard$1.prototype, "errorImagePath", void 0);
 __decorate([
     PropWatch({ type: String, default: 'UNAVAILABLE_IMAGE' })
-], TekProductCard.prototype, "errorImageText", void 0);
+], TekProductCard$1.prototype, "errorImageText", void 0);
 __decorate([
     PropWatch({ type: String, default: '' })
-], TekProductCard.prototype, "productName", void 0);
+], TekProductCard$1.prototype, "productName", void 0);
 __decorate([
     PropWatch({ type: String })
-], TekProductCard.prototype, "productSupplier", void 0);
+], TekProductCard$1.prototype, "productSupplier", void 0);
 __decorate([
     PropWatch({ type: String })
-], TekProductCard.prototype, "productBrand", void 0);
+], TekProductCard$1.prototype, "productBrand", void 0);
 __decorate([
     PropWatch({ type: [String, Number] })
-], TekProductCard.prototype, "productPrice", void 0);
+], TekProductCard$1.prototype, "productPrice", void 0);
 __decorate([
     PropWatch({ type: String, default: '' })
-], TekProductCard.prototype, "width", void 0);
+], TekProductCard$1.prototype, "width", void 0);
 __decorate([
     PropWatch({ type: [Number, String], default: 'auto' })
-], TekProductCard.prototype, "height", void 0);
+], TekProductCard$1.prototype, "height", void 0);
 __decorate([
     PropWatch({ type: [Number, String], default: 'none' })
-], TekProductCard.prototype, "maxHeight", void 0);
+], TekProductCard$1.prototype, "maxHeight", void 0);
 __decorate([
     PropWatch({ type: [Number, String], default: 'none' })
-], TekProductCard.prototype, "minHeight", void 0);
-TekProductCard = __decorate([
+], TekProductCard$1.prototype, "minHeight", void 0);
+TekProductCard$1 = __decorate([
     Component
-], TekProductCard);
-var script$7 = TekProductCard;
+], TekProductCard$1);
+var TekProductCard$2 = TekProductCard$1;
 
 // eslint-disable-next-line prefer-destructuring
-const ZdTreeGridEditable = components$1.ZdTreeGridEditable;
+const ZdTreeGridEditable$1 = components$1.ZdTreeGridEditable;
 /**
  * TekGrid component
  */
-let TekGrid = class TekGrid extends ZdTreeGridEditable {
+let TekGrid$1 = class TekGrid extends ZdTreeGridEditable$1 {
     constructor() {
         super(...arguments);
         this.instanceType = TekTreeGrid;
@@ -5007,133 +5821,133 @@ let TekGrid = class TekGrid extends ZdTreeGridEditable {
 };
 __decorate([
     PropWatch({ type: [String], default: '' })
-], TekGrid.prototype, "title", void 0);
+], TekGrid$1.prototype, "title", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: false })
-], TekGrid.prototype, "addButton", void 0);
+], TekGrid$1.prototype, "addButton", void 0);
 __decorate([
     PropWatch({ type: [String], default: 'none' })
-], TekGrid.prototype, "deleteButton", void 0);
+], TekGrid$1.prototype, "deleteButton", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: false })
-], TekGrid.prototype, "columnsButton", void 0);
+], TekGrid$1.prototype, "columnsButton", void 0);
 __decorate([
     Prop({ type: [Array, String], default: () => [] })
-], TekGrid.prototype, "columnsButtonIgnore", void 0);
+], TekGrid$1.prototype, "columnsButtonIgnore", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: true })
-], TekGrid.prototype, "showEditButtons", void 0);
+], TekGrid$1.prototype, "showEditButtons", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: false })
-], TekGrid.prototype, "filterButton", void 0);
+], TekGrid$1.prototype, "filterButton", void 0);
 __decorate([
     PropWatch({ type: [Object] })
-], TekGrid.prototype, "modalFilterProps", void 0);
+], TekGrid$1.prototype, "modalFilterProps", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: true })
-], TekGrid.prototype, "showSearch", void 0);
+], TekGrid$1.prototype, "showSearch", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: false })
-], TekGrid.prototype, "columnFilterButton", void 0);
+], TekGrid$1.prototype, "columnFilterButton", void 0);
 __decorate([
     Prop({ type: [Array], default: () => [] })
-], TekGrid.prototype, "actions", void 0);
+], TekGrid$1.prototype, "actions", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekGrid.prototype, "dragColumns", void 0);
+], TekGrid$1.prototype, "dragColumns", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekGrid.prototype, "mainGrid", void 0);
+], TekGrid$1.prototype, "mainGrid", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekGrid.prototype, "resizeColumns", void 0);
+], TekGrid$1.prototype, "resizeColumns", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekGrid.prototype, "showLayoutOptions", void 0);
+], TekGrid$1.prototype, "showLayoutOptions", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: false })
-], TekGrid.prototype, "showExport", void 0);
+], TekGrid$1.prototype, "showExport", void 0);
 __decorate([
     PropWatch({ type: [String, Boolean], default: true })
-], TekGrid.prototype, "showReload", void 0);
+], TekGrid$1.prototype, "showReload", void 0);
 __decorate([
     PropWatch({ type: [Object] })
-], TekGrid.prototype, "defaultFilter", void 0);
+], TekGrid$1.prototype, "defaultFilter", void 0);
 __decorate([
     PropWatch({ type: [String] })
-], TekGrid.prototype, "reportTitle", void 0);
+], TekGrid$1.prototype, "reportTitle", void 0);
 __decorate([
     Prop({ type: [String, Array] })
-], TekGrid.prototype, "exportConfig", void 0);
+], TekGrid$1.prototype, "exportConfig", void 0);
 __decorate([
     Prop({ type: [Array] })
-], TekGrid.prototype, "exportActions", void 0);
+], TekGrid$1.prototype, "exportActions", void 0);
 __decorate([
     Prop({
         type: Array,
         default: () => undefined,
     })
-], TekGrid.prototype, "toolbarSlot", void 0);
+], TekGrid$1.prototype, "toolbarSlot", void 0);
 __decorate([
     Watch('instance.title')
-], TekGrid.prototype, "updateTitle", null);
-TekGrid = __decorate([
+], TekGrid$1.prototype, "updateTitle", null);
+TekGrid$1 = __decorate([
     Component
-], TekGrid);
-var script$6 = TekGrid;
+], TekGrid$1);
+var TekGrid$2 = TekGrid$1;
 
-let TekUserInfo = class TekUserInfo extends ZdUserInfo {
+let TekUserInfo$1 = class TekUserInfo extends ZdUserInfo {
     constructor() {
         super(...arguments);
-        this.instanceType = TekUserInfo$1;
+        this.instanceType = TekUserInfo$3;
     }
 };
 __decorate([
     PropWatch({ type: [String], default: '' })
-], TekUserInfo.prototype, "aboutImage", void 0);
+], TekUserInfo$1.prototype, "aboutImage", void 0);
 __decorate([
     PropWatch({ type: [String], default: '' })
-], TekUserInfo.prototype, "defaultEmail", void 0);
+], TekUserInfo$1.prototype, "defaultEmail", void 0);
 __decorate([
     PropWatch({ type: [Object, String], default: null })
-], TekUserInfo.prototype, "versionInfo", void 0);
+], TekUserInfo$1.prototype, "versionInfo", void 0);
 __decorate([
     PropWatch({ type: [String], default: '' })
-], TekUserInfo.prototype, "versionUrl", void 0);
+], TekUserInfo$1.prototype, "versionUrl", void 0);
 __decorate([
     Prop({ type: [Array], default: undefined })
-], TekUserInfo.prototype, "bottomSlot", void 0);
-TekUserInfo = __decorate([
+], TekUserInfo$1.prototype, "bottomSlot", void 0);
+TekUserInfo$1 = __decorate([
     Component
-], TekUserInfo);
-var script$5 = TekUserInfo;
+], TekUserInfo$1);
+var TekUserInfo$2 = TekUserInfo$1;
 
 // eslint-disable-next-line prefer-destructuring
-const ZdList = components$1.ZdList;
-let TekUserInfoList = class TekUserInfoList extends ZdList {
+const ZdList$1 = components$1.ZdList;
+let TekUserInfoList$1 = class TekUserInfoList extends ZdList$1 {
     constructor() {
         super(...arguments);
-        this.instanceType = TekUserInfoList$1;
+        this.instanceType = TekUserInfoList$3;
     }
 };
 __decorate([
     PropWatch({ type: [String], default: '' })
-], TekUserInfoList.prototype, "parentName", void 0);
+], TekUserInfoList$1.prototype, "parentName", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: true })
-], TekUserInfoList.prototype, "dense", void 0);
-TekUserInfoList = __decorate([
+], TekUserInfoList$1.prototype, "dense", void 0);
+TekUserInfoList$1 = __decorate([
     Component
-], TekUserInfoList);
-var script$4 = TekUserInfoList;
+], TekUserInfoList$1);
+var TekUserInfoList$2 = TekUserInfoList$1;
 
 /**
  * TekDragGrid component
  */
-let TekDragGrid = class TekDragGrid extends TekGrid$2 {
+let TekDragGrid = class TekDragGrid extends TekGrid$4 {
     constructor() {
         super(...arguments);
-        this.instanceType = TekDragGrid$1;
+        this.instanceType = TekDragGrid$3;
         this.dragColumnWidth = 24;
     }
     dragOnMove(event) {
@@ -5166,10 +5980,10 @@ TekDragGrid = __decorate([
         components: { draggable, ZdDragGridHandle, ZdDragGridHandleHeader },
     })
 ], TekDragGrid);
-var script$3 = TekDragGrid;
+var script$c = TekDragGrid;
 
 /* script */
-const __vue_script__$c = script$3;
+const __vue_script__$c = script$c;
 
 /* template */
 var __vue_render__$c = function () {
@@ -6352,7 +7166,7 @@ __vue_render__$c._withStripped = true;
   /* style */
   const __vue_inject_styles__$c = function (inject) {
     if (!inject) return
-    inject("data-v-605f8700_0", { source: ".tek-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n  height: 38px;\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  flex-grow: 1;\n  line-height: 22px;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: var(--row-active-color);\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-first-group-cell {\n  display: flex;\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 .zd-table-group-two-plus-container {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation {\n  top: unset;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation :not(.first-group) {\n  margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation.first-group {\n  width: 14px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\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  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n}\n.tek-grid table tbody tr.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 .zd-table-two-plus-groups {\n  display: flex !important;\n}\n.tek-grid table .zd-table-two-plus-groups .zd-table-cell-text {\n  position: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation {\n  top: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: flex;\n  position: relative;\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: 1rem;\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  top: -10%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid table .footer .zd-grid-row-checkbox {\n  display: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tek-grid-export-landscape i {\n  transform: rotate(-90deg);\n}\n.tek-grid-export-multioption-text {\n  padding-left: 3px;\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n  cursor: default;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}\n.is-rotated {\n  transform: rotate(180deg);\n  transition: transform 0.3s ease;\n}", map: undefined, media: undefined });
+    inject("data-v-4a00b46f_0", { source: ".tek-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n  height: 38px;\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  flex-grow: 1;\n  line-height: 22px;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: var(--row-active-color);\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-first-group-cell {\n  display: flex;\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 .zd-table-group-two-plus-container {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation {\n  top: unset;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation :not(.first-group) {\n  margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation.first-group {\n  width: 14px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\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  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n}\n.tek-grid table tbody tr.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 .zd-table-two-plus-groups {\n  display: flex !important;\n}\n.tek-grid table .zd-table-two-plus-groups .zd-table-cell-text {\n  position: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation {\n  top: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: flex;\n  position: relative;\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: 1rem;\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  top: -10%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid table .footer .zd-grid-row-checkbox {\n  display: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tek-grid-export-landscape i {\n  transform: rotate(-90deg);\n}\n.tek-grid-export-multioption-text {\n  padding-left: 3px;\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n  cursor: default;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}\n.is-rotated {\n  transform: rotate(180deg);\n  transition: transform 0.3s ease;\n  margin-right: 3.7px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -6380,8 +7194,69 @@ __vue_render__$c._withStripped = true;
     undefined
   );
 
+/**
+ * TekGrid Columns Button component
+ */
+let TekGridColumnsButton = class TekGridColumnsButton extends ZdIterableColumnsButton {
+    constructor() {
+        super(...arguments);
+        this.instanceType = TekGridColumnsButton$3;
+        this.menuIsOpened = false;
+        this.sortableInitialized = false;
+    }
+    menuOpenedChange() {
+        if (this.menuIsOpened && !this.sortableInitialized) {
+            this.sortableInitialized = true;
+            this.$nextTick(() => {
+                const columnsTableBody = document.querySelector(`#${this.instance.name}_columns_table tbody`);
+                if (columnsTableBody) {
+                    sortable.create(columnsTableBody, {
+                        handle: '.sortHandle',
+                        dragClass: 'tek-grid-columns-button-sortable-drag',
+                        onEnd: this.sortEnd,
+                    });
+                }
+            });
+        }
+    }
+    sortEnd(event) {
+        const grid = this.instance.iterableComponent;
+        const newOrder = Array.from(event.srcElement.querySelectorAll('tr')).map((row) => row.getAttribute('name'));
+        const groupColumnNames = [];
+        const newColumns = newOrder.map((columnName) => {
+            const column = grid.getColumn(columnName);
+            if (column.grouped) {
+                groupColumnNames.push(columnName);
+            }
+            return column;
+        });
+        const ignoredColumns = grid.columns.filter((column) => this.instance.ignoreColumns.indexOf(column.name) !== -1);
+        grid.columns = newColumns.concat(ignoredColumns);
+        if ((grid.updateGrouping) && JSON.stringify(groupColumnNames) !== JSON.stringify(grid.groupColumnNames)) {
+            grid.updateGrouping();
+        }
+        grid.changeLayout();
+    }
+    moreOptions() {
+        TekGridColumnsOptionsModal.show(this.instance);
+    }
+    close() {
+        this.menuIsOpened = false;
+    }
+};
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false })
+], TekGridColumnsButton.prototype, "hideGroups", void 0);
+__decorate([
+    Watch('menuIsOpened')
+], TekGridColumnsButton.prototype, "menuOpenedChange", null);
+TekGridColumnsButton = __decorate([
+    Component
+], TekGridColumnsButton);
+var script$b = TekGridColumnsButton;
+
 /* script */
-const __vue_script__$b = script$c;
+const __vue_script__$b = script$b;
 
 /* template */
 var __vue_render__$b = function () {
@@ -6645,7 +7520,7 @@ __vue_render__$b._withStripped = true;
   /* style */
   const __vue_inject_styles__$b = function (inject) {
     if (!inject) return
-    inject("data-v-046576c4_0", { source: ".tek-grid-columns-button-options {\n  max-height: 250px;\n  display: flex;\n  flex-direction: column;\n  background-color: #fff;\n}\n.tek-grid-columns-button-options.theme--dark {\n  background-color: #1e1e1e;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper {\n  flex: 1;\n  overflow-y: auto;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table {\n  padding: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);\n  font-size: 13px;\n  border-spacing: 0;\n  width: 100%;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table thead tr th {\n  padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n  text-align: left;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  background-color: var(--zd-background-base);\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td {\n  padding: var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name {\n  cursor: -webkit-grab;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name > span {\n  padding-right: 4px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-aggregation {\n  max-width: 150px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer {\n  display: flex;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer .zd-button {\n  flex: 1;\n}\n.tek-grid-columns-button-sortable-drag {\n  background: white;\n}\n.tek-grid-column-option-box {\n  margin: var(--spacing-1);\n  background: #ccc;\n  padding: 2px var(--spacing-1);\n  cursor: pointer;\n}\n.tek-grid-column-option-box > * {\n  display: inline-block;\n}\n.tek-grid-column-option-box > .zd-icon {\n  font-size: 0.9rem;\n  margin-left: var(--spacing-2);\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true {\n  cursor: default;\n  background: #fafafa;\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true > .zd-icon {\n  display: none;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true {\n  background: var(--v-primary-base);\n  color: white;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true > .zd-icon {\n  color: white;\n}\n.tek-grid-column-option-container-col {\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container {\n  background: #eee;\n  padding: var(--spacing-1);\n  max-height: 100px;\n  min-height: 42px;\n  align-content: center;\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .tek-iterable-footer {\n  display: none !important;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .zd-text.no-data {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-size: 0.7rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-label {\n  font-weight: var(--zd-font-body2-weight);\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-select-all {\n  position: absolute;\n  top: 0.5rem;\n  right: var(--spacing-1);\n  color: var(--v-primary-base);\n  cursor: pointer;\n  font-size: 0.8rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-drop-here {\n  position: absolute;\n  z-index: 100;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 35px;\n}\n.tek-grid-column-option-detail-name {\n  color: var(--v-primary-base);\n  font-weight: var(--zd-font-body2-weight);\n  font-size: 1.1rem;\n  margin-top: var(--spacing-6);\n}", map: undefined, media: undefined });
+    inject("data-v-08307fa9_0", { source: ".tek-grid-columns-button-options {\n  max-height: 250px;\n  display: flex;\n  flex-direction: column;\n  background-color: #fff;\n}\n.tek-grid-columns-button-options.theme--dark {\n  background-color: #1e1e1e;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper {\n  flex: 1;\n  overflow-y: auto;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table {\n  padding: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);\n  font-size: 13px;\n  border-spacing: 0;\n  width: 100%;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table thead tr th {\n  padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n  text-align: left;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  background-color: var(--zd-background-base);\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td {\n  padding: var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name {\n  cursor: -webkit-grab;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name > span {\n  padding-right: 4px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-aggregation {\n  max-width: 150px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer {\n  display: flex;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer .zd-button {\n  flex: 1;\n}\n.tek-grid-columns-button-sortable-drag {\n  background: white;\n}\n.tek-grid-column-option-box {\n  margin: var(--spacing-1);\n  background: #ccc;\n  padding: 2px var(--spacing-1);\n  cursor: pointer;\n}\n.tek-grid-column-option-box > * {\n  display: inline-block;\n}\n.tek-grid-column-option-box > .zd-icon {\n  font-size: 0.9rem;\n  margin-left: var(--spacing-2);\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true {\n  cursor: default;\n  background: #fafafa;\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true > .zd-icon {\n  display: none;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true {\n  background: var(--v-primary-base);\n  color: white;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true > .zd-icon {\n  color: white;\n}\n.tek-grid-column-option-container-col {\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container {\n  background: #eee;\n  padding: var(--spacing-1);\n  max-height: 100px;\n  min-height: 42px;\n  align-content: center;\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .tek-iterable-footer {\n  display: none !important;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .zd-text.no-data {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-size: 0.7rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-label {\n  font-weight: var(--zd-font-body2-weight);\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-select-all {\n  position: absolute;\n  top: 0.5rem;\n  right: var(--spacing-1);\n  color: var(--v-primary-base);\n  cursor: pointer;\n  font-size: 0.8rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-drop-here {\n  position: absolute;\n  z-index: 100;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 35px;\n}\n.tek-grid-column-option-detail-name {\n  color: var(--v-primary-base);\n  font-weight: var(--zd-font-body2-weight);\n  font-size: 1.1rem;\n  margin-top: var(--spacing-6);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -6673,8 +7548,55 @@ __vue_render__$b._withStripped = true;
     undefined
   );
 
+// eslint-disable-next-line prefer-destructuring
+const ZdButton = components$1.ZdButton;
+/**
+ * TekGrid Columns Button component
+ */
+let TekGridFilterButton = class TekGridFilterButton extends ZdButton {
+    constructor() {
+        super(...arguments);
+        this.instanceType = TekGridFilterButton$3;
+    }
+    filterClick({ event }) {
+        this.instance.click(event);
+    }
+    getEvents() {
+        const on = this.$listeners;
+        const events = Object.assign({}, this.instance.events);
+        Object.keys(on).forEach((eventName) => {
+            const callback = this.instance.events[eventName];
+            events[eventName] = ({ event, component, element }) => {
+                if (callback && typeof callback === 'function') {
+                    callback({ event, component, element });
+                }
+                const onEvent = on[eventName];
+                if (typeof onEvent === 'function') {
+                    onEvent(event);
+                    return;
+                }
+                onEvent.forEach((fn) => fn(event));
+            };
+        });
+        return events;
+    }
+};
+__decorate([
+    PropWatch({ type: [String], default: '' })
+], TekGridFilterButton.prototype, "gridName", void 0);
+__decorate([
+    PropWatch({ type: [Object, String], default: () => { } })
+], TekGridFilterButton.prototype, "grid", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false })
+], TekGridFilterButton.prototype, "showCheckboxAll", void 0);
+TekGridFilterButton = __decorate([
+    Component
+], TekGridFilterButton);
+var script$a = TekGridFilterButton;
+
 /* script */
-const __vue_script__$a = script$b;
+const __vue_script__$a = script$a;
 
 /* template */
 var __vue_render__$a = function () {
@@ -6703,7 +7625,7 @@ __vue_render__$a._withStripped = true;
   /* style */
   const __vue_inject_styles__$a = function (inject) {
     if (!inject) return
-    inject("data-v-312d9169_0", { source: ".zd-container.tek-grid-filter-content-container {\n  position: relative;\n  left: calc(var(--zd-default-padding) * -1) !important;\n  padding-left: var(--zd-default-padding) !important;\n  width: calc(100% + var(--zd-default-padding) * 2) !important;\n  padding-right: var(--zd-default-padding) !important;\n  max-width: none !important;\n}", map: undefined, media: undefined });
+    inject("data-v-708089c0_0", { source: ".zd-container.tek-grid-filter-content-container {\n  position: relative;\n  left: calc(var(--zd-default-padding) * -1) !important;\n  padding-left: var(--zd-default-padding) !important;\n  width: calc(100% + var(--zd-default-padding) * 2) !important;\n  padding-right: var(--zd-default-padding) !important;\n  max-width: none !important;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -6731,8 +7653,248 @@ __vue_render__$a._withStripped = true;
     undefined
   );
 
+/**
+ * TekGridLayoutOptions component
+ */
+let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender {
+    constructor() {
+        super(...arguments);
+        this.instanceType = TekGridLayoutOptions$3;
+    }
+    created() {
+        this.instance.viewApplyLayout = this.applyLayout;
+        this.instance.viewGetCurrentLayout = this.getCurrentLayout;
+    }
+    confirmLayoutClick({ component }) {
+        const layoutName = component.value;
+        if (layoutName) {
+            const newLayout = this.getCurrentLayout(layoutName);
+            this.instance.newLayout(newLayout);
+        }
+        this.$refs.layoutMenu.isActive = false;
+        component.value = '';
+    }
+    datasourceDynamicFilter(datasource) {
+        if (datasource instanceof TekRestDatasource)
+            return datasource.dynamicFilter;
+        return {};
+    }
+    applyLayout(layout) {
+        var _a;
+        let groupParamsChanged = false;
+        const tableElement = this.getParentTable();
+        if (!tableElement)
+            return;
+        const { grid } = this.instance;
+        const gridColumns = {};
+        let layoutChanged = false;
+        const gridColumnNames = [];
+        grid.columns.forEach((column) => {
+            var _a, _b;
+            gridColumns[column.name] = column;
+            gridColumnNames.push(column.name);
+            const layoutHasCol = (_a = layout === null || layout === void 0 ? void 0 : layout.columns) === null || _a === void 0 ? void 0 : _a.find((layCol) => layCol.name === column.name);
+            // if column doesnt exist in the layout, push it
+            if (layout && !layoutHasCol) {
+                layoutChanged = true;
+                (_b = layout.columns) === null || _b === void 0 ? void 0 : _b.push(column);
+            }
+        });
+        const oldOrder = JSON.stringify(grid.datasource.order);
+        const oldFilter = JSON.stringify(grid.datasource.filter);
+        const oldDynamicFilter = JSON.stringify(this.datasourceDynamicFilter(grid.datasource));
+        if (layout) {
+            // removes columns that are in the layout but not in grid
+            layout.columns = (_a = layout.columns) === null || _a === void 0 ? void 0 : _a.filter((column) => {
+                const isInGrid = gridColumnNames.includes(column.name);
+                if (!isInGrid)
+                    layoutChanged = true;
+                return isInGrid;
+            });
+            if (layoutChanged) {
+                this.instance.updateLayout(layout.name, this.getCurrentLayout(layout.name));
+            }
+            tableElement.style.width = layout.gridWidth || 'auto';
+            grid.datasource.order = layout.order !== undefined ? layout.order : grid.datasource.order;
+            grid.datasource.filter = layout.filter !== undefined ? layout.filter : grid.datasource.filter;
+            if (grid.datasource instanceof TekRestDatasource
+                && layout.dynamicFilter !== undefined) {
+                grid.datasource.dynamicFilter = this.getHelperValues(layout.dynamicFilter, layout.columns || grid.columns);
+            }
+            if (layout.columns) {
+                grid.columns = layout.columns.map((column) => {
+                    const col = gridColumns[column.name];
+                    col.label = column.label !== undefined ? column.label : col.label;
+                    col.align = column.align !== undefined ? column.align : col.align;
+                    col.isVisible = column.isVisible !== undefined ? column.isVisible : col.isVisible;
+                    col.fixed = !!column.fixed;
+                    col.grouped = !!column.grouped;
+                    col.groupOpened = !!column.groupOpened;
+                    col.aggregation = column.aggregation;
+                    col.minWidth = column.minWidth || '';
+                    col.maxWidth = column.maxWidth || '';
+                    col.width = column.width;
+                    this.setHelperValue(col, column.filterHelperValue || '');
+                    return col;
+                });
+                // wait to change column orders
+                this.$nextTick(() => {
+                    grid.columns.forEach((_column, index) => {
+                        const columnElement = tableElement.querySelector(`tr th:not(.selectable)[index="${index}"]`);
+                        if (columnElement) {
+                            columnElement.style.width = layout.columns[index].width || 'unset';
+                        }
+                    });
+                });
+            }
+        }
+        else {
+            grid.datasource.order = [...this.instance.originalDatasourceOrder];
+            grid.datasource.filter = Object.assign({}, this.instance.originalDatasourceFilter);
+            if (grid.datasource instanceof TekRestDatasource) {
+                grid.datasource.dynamicFilter = this.getHelperValues(this.instance.originalDatasourceDynamicFilter, this.instance.originalColumnProps);
+            }
+            grid.columns = this.instance.originalColumnProps.map((column) => {
+                const col = gridColumns[column.name];
+                groupParamsChanged = groupParamsChanged
+                    || col.grouped !== column.grouped
+                    || col.groupOpened !== column.groupOpened
+                    || col.aggregation !== column.aggregation;
+                col.isVisible = column.isVisible;
+                col.label = column.label;
+                col.align = column.align;
+                col.fixed = column.fixed;
+                col.grouped = column.grouped;
+                col.groupOpened = column.groupOpened;
+                col.aggregation = column.aggregation;
+                col.minWidth = column.minWidth || '';
+                col.maxWidth = column.maxWidth || '';
+                col.width = column.width;
+                this.setHelperValue(col, column.filterHelperValue || '');
+                return col;
+            });
+            tableElement.style.width = '100%';
+            const columnElements = Array.from(tableElement.querySelectorAll('tr th:not(.selectable)'));
+            columnElements.forEach((item) => {
+                item.style.width = 'unset';
+            });
+        }
+        if ((JSON.stringify(grid.datasource.order) !== oldOrder
+            || JSON.stringify(grid.datasource.filter) !== oldFilter
+            || JSON.stringify(this.datasourceDynamicFilter(grid.datasource))
+                !== oldDynamicFilter)
+            && !groupParamsChanged) {
+            // Se os parametros de agrupamento tiverem sido alterados um get é feito automaticamente
+            if (grid instanceof TekGrid$6) {
+                grid.loadAfterTasks();
+            }
+            else {
+                grid.datasource.get();
+            }
+        }
+        this.$refs.layoutMenu.isActive = false;
+    }
+    setHelperValue(column, value) {
+        if (column instanceof TekGridColumn) {
+            if (!Array.isArray(column.filterProps) && typeof value === 'string') {
+                column.filterProps.helperValue = value;
+            }
+            else if (Array.isArray(column.filterProps) && Array.isArray(value)) {
+                column.filterProps.forEach((prop, index) => {
+                    prop.value = value[index];
+                });
+            }
+        }
+    }
+    getHelperValues(dynamicFilter, columns) {
+        const filter = cloneDeep(dynamicFilter);
+        Object.keys(filter).forEach((columnName) => {
+            const filterOptions = filter[columnName];
+            const column = columns[columns.findIndex((col) => col.name === columnName)];
+            const { filterHelperValue } = column;
+            filterOptions.forEach((item) => {
+                if (['IN', 'NOT_IN', 'BETWEEN'].includes(item.operation)
+                    && !Array.isArray(item.value)) {
+                    item.value = item.value.split(';');
+                }
+                let helperValue = '';
+                if (!Array.isArray(filterHelperValue)) {
+                    helperValue = filterHelperValue;
+                }
+                else {
+                    Object.keys(filterHelperValue).forEach((key) => {
+                        const value = filterHelperValue[key] || '';
+                        if (`${item.relation || 'AND'}-${item.operation || 'CONTAINS'}`
+                            === key) {
+                            helperValue = value;
+                        }
+                    });
+                }
+                if (helperValue) {
+                    const columnObj = this.instance.grid.getColumn(column.name);
+                    item.value = TekFilterHelper.getValue(helperValue, columnObj);
+                }
+            });
+        });
+        return filter;
+    }
+    getCurrentLayout(layoutName) {
+        const { grid } = this.instance;
+        const tableElement = this.getParentTable();
+        const gridWidth = tableElement
+            ? window.getComputedStyle(tableElement).width
+            : 'auto';
+        return {
+            name: layoutName,
+            gridWidth,
+            order: grid.datasource.order,
+            filter: grid.datasource.filter,
+            dynamicFilter: this.datasourceDynamicFilter(grid.datasource),
+            columns: grid.columns.map((column, index) => {
+                const columnElement = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector(`tr th:not(.selectable)[index="${index}"]`);
+                return {
+                    name: column.name,
+                    label: column.label,
+                    align: column.align,
+                    width: columnElement ? window.getComputedStyle(columnElement).width : 'unset',
+                    minWidth: column.minWidth,
+                    maxWidth: column.maxWidth,
+                    isVisible: column.isVisible,
+                    fixed: column.fixed,
+                    grouped: column.grouped,
+                    groupOpened: column.groupOpened,
+                    aggregation: column.aggregation,
+                    filterHelperValue: this.instance.getHelperValue(column),
+                };
+            }),
+        };
+    }
+    getParentTable() {
+        var _a;
+        return (_a = this.$el.closest('.zd-grid')) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('table')[0];
+    }
+    applyOrUpdateLayout(event, layoutName) {
+        if (this.instance.layoutEdited) {
+            this.instance.updateLayout(layoutName, this.getCurrentLayout(layoutName));
+            event.stopImmediatePropagation();
+            this.$refs.layoutMenu.isActive = false;
+        }
+        else {
+            this.instance.applyLayout(layoutName);
+        }
+    }
+    deleteLayout(event, layoutName) {
+        this.instance.deleteLayout(layoutName);
+        event.stopImmediatePropagation();
+    }
+};
+TekGridLayoutOptions = __decorate([
+    Component
+], TekGridLayoutOptions);
+var script$9 = TekGridLayoutOptions;
+
 /* script */
-const __vue_script__$9 = script$a;
+const __vue_script__$9 = script$9;
 
 /* template */
 var __vue_render__$9 = function () {
@@ -7025,7 +8187,7 @@ __vue_render__$9._withStripped = true;
   /* style */
   const __vue_inject_styles__$9 = function (inject) {
     if (!inject) return
-    inject("data-v-24abb7d6_0", { source: ".tek-grid-layout-options-badge .v-badge__badge {\n  font-size: var(--zd-font-caption-size);\n  font-weight: var(--zd-font-caption-weight);\n  line-height: 14px;\n  pointer-events: none;\n  background-color: var(--zd-badge-background-color) !important;\n}\n.tek-grid-layout-options-badge .v-badge__badge span {\n  color: var(--zd-badge-text-color) !important;\n}\n.tek-grid-layout-item {\n  font-size: 13px;\n  cursor: pointer;\n  min-height: 30px;\n}\n.tek-grid-layout-item.selected {\n  font-weight: 700;\n}\n.tek-grid-layout-item:hover.theme--light {\n  background: #eee;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons {\n  position: absolute;\n  right: 16px;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons .v-icon {\n  font-size: 18px;\n}\n.tek-grid-layout-item-header {\n  max-width: 270px;\n  font-size: 13px;\n  font-weight: bold;\n  color: var(--v-primary-base) !important;\n  line-height: 18px;\n}\n.tek-grid-layout-item-header.edited {\n  color: var(--v-error-darken2) !important;\n}\n.tek-grid-layout-item-discard {\n  min-height: 30px;\n  padding-top: 10px;\n}", map: undefined, media: undefined });
+    inject("data-v-0d0ae3d8_0", { source: ".tek-grid-layout-options-badge .v-badge__badge {\n  font-size: var(--zd-font-caption-size);\n  font-weight: var(--zd-font-caption-weight);\n  line-height: 14px;\n  pointer-events: none;\n  background-color: var(--zd-badge-background-color) !important;\n}\n.tek-grid-layout-options-badge .v-badge__badge span {\n  color: var(--zd-badge-text-color) !important;\n}\n.tek-grid-layout-item {\n  font-size: 13px;\n  cursor: pointer;\n  min-height: 30px;\n}\n.tek-grid-layout-item.selected {\n  font-weight: 700;\n}\n.tek-grid-layout-item:hover.theme--light {\n  background: #eee;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons {\n  position: absolute;\n  right: 16px;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons .v-icon {\n  font-size: 18px;\n}\n.tek-grid-layout-item-header {\n  max-width: 270px;\n  font-size: 13px;\n  font-weight: bold;\n  color: var(--v-primary-base) !important;\n  line-height: 18px;\n}\n.tek-grid-layout-item-header.edited {\n  color: var(--v-error-darken2) !important;\n}\n.tek-grid-layout-item-discard {\n  min-height: 30px;\n  padding-top: 10px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -7053,8 +8215,57 @@ __vue_render__$9._withStripped = true;
     undefined
   );
 
+/**
+ * DocTable component
+ */
+let TekImage = class TekImage extends ZdComponent {
+    constructor() {
+        super(...arguments);
+        this.instanceType = Image;
+    }
+    mounted() {
+        if (this.instance.fillHeight) {
+            setFillHeight(this.$el);
+        }
+    }
+    load(event) {
+        this.instance.load(event, this.$el);
+    }
+};
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekImage.prototype, "to", void 0);
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekImage.prototype, "src", void 0);
+__decorate([
+    PropWatch({ type: [Number, String], default: 'auto' })
+], TekImage.prototype, "height", void 0);
+__decorate([
+    PropWatch({ type: [Number, String], default: 'auto' })
+], TekImage.prototype, "minHeight", void 0);
+__decorate([
+    PropWatch({ type: [Number, String], default: 'none' })
+], TekImage.prototype, "maxHeight", void 0);
+__decorate([
+    PropWatch({ type: [Number, String], default: 'auto' })
+], TekImage.prototype, "width", void 0);
+__decorate([
+    PropWatch({ type: [Number, String], default: 'auto' })
+], TekImage.prototype, "minWidth", void 0);
+__decorate([
+    PropWatch({ type: [Number, String], default: 'none' })
+], TekImage.prototype, "maxWidth", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false })
+], TekImage.prototype, "fillHeight", void 0);
+TekImage = __decorate([
+    Component
+], TekImage);
+var script$8 = TekImage;
+
 /* script */
-const __vue_script__$8 = script$9;
+const __vue_script__$8 = script$8;
 
 /* template */
 var __vue_render__$8 = function () {
@@ -7139,10 +8350,10 @@ __decorate([
 TekIterableCarousel = __decorate([
     Component
 ], TekIterableCarousel);
-var script$2 = TekIterableCarousel;
+var script$7 = TekIterableCarousel;
 
 /* script */
-const __vue_script__$7 = script$2;
+const __vue_script__$7 = script$7;
 
 /* template */
 var __vue_render__$7 = function () {
@@ -7251,8 +8462,22 @@ __vue_render__$7._withStripped = true;
     undefined
   );
 
+/**
+ * ZdIterableComponentRender component
+ */
+let TekIterableComponentRender = class TekIterableComponentRender extends ZdIterableComponentRender {
+    constructor() {
+        super(...arguments);
+        this.instanceType = IterableComponentRender;
+    }
+};
+TekIterableComponentRender = __decorate([
+    Component
+], TekIterableComponentRender);
+var script$6 = TekIterableComponentRender;
+
 /* script */
-const __vue_script__$6 = script$8;
+const __vue_script__$6 = script$6;
 
 /* template */
 var __vue_render__$6 = function () {
@@ -7452,11 +8677,11 @@ __vue_render__$6._withStripped = true;
   /* style */
   const __vue_inject_styles__$6 = function (inject) {
     if (!inject) return
-    inject("data-v-d9a525a4_0", { source: ".tek-iterable-component-render[data-v-d9a525a4] {\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-d9a525a4],\n.tek-iterable-component-render .no--data[data-v-d9a525a4] {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n}\n.tek-iterable-component-render .no--data[data-v-d9a525a4] {\n  color: rgba(0, 0, 0, 0.38);\n}\n.tek-iterable-component-render .tek-iterable-toolbar[data-v-d9a525a4] {\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-d9a525a4] {\n  padding: 5px 0;\n  display: flex;\n  width: 100%;\n}", map: undefined, media: undefined });
+    inject("data-v-3a016221_0", { source: ".tek-iterable-component-render[data-v-3a016221] {\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-3a016221],\n.tek-iterable-component-render .no--data[data-v-3a016221] {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n}\n.tek-iterable-component-render .no--data[data-v-3a016221] {\n  color: rgba(0, 0, 0, 0.38);\n}\n.tek-iterable-component-render .tek-iterable-toolbar[data-v-3a016221] {\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-3a016221] {\n  padding: 5px 0;\n  display: flex;\n  width: 100%;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$6 = "data-v-d9a525a4";
+  const __vue_scope_id__$6 = "data-v-3a016221";
   /* module identifier */
   const __vue_module_identifier__$6 = undefined;
   /* functional template */
@@ -7500,10 +8725,10 @@ __decorate([
 TekLoading = __decorate([
     Component
 ], TekLoading);
-var script$1 = TekLoading;
+var script$5 = TekLoading;
 
 /* script */
-const __vue_script__$5 = script$1;
+const __vue_script__$5 = script$5;
 
 /* template */
 var __vue_render__$5 = function () {
@@ -7583,10 +8808,10 @@ __decorate([
 TekNotifications = __decorate([
     Component
 ], TekNotifications);
-var script = TekNotifications;
+var script$4 = TekNotifications;
 
 /* script */
-const __vue_script__$4 = script;
+const __vue_script__$4 = script$4;
 
 /* template */
 var __vue_render__$4 = function () {
@@ -7672,7 +8897,7 @@ __vue_render__$4._withStripped = true;
   /* style */
   const __vue_inject_styles__$4 = function (inject) {
     if (!inject) return
-    inject("data-v-30efacc6_0", { source: ".tek-notifications .tek-card-title .mark-read-text {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  display: inline-block;\n}\n.tek-notifications .tek-card-title .mark-read-text p {\n  margin-bottom: 0px;\n}\n.tek-notifications .tek-card-title hr.v-divider {\n  margin-bottom: 0px;\n}\n.tek-notifications ul.tek-notifications-list {\n  list-style: none;\n  padding: 0;\n}\n.tek-notifications ul.tek-notifications-list li {\n  border-bottom: solid 1px rgba(0, 0, 0, 0.12);\n  color: #667080;\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  line-height: 14px;\n  padding: 10px 20px 10px 0;\n  position: relative;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-subject {\n  font-weight: 700;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-read-mark {\n  width: 10px;\n  height: 10px;\n  background-color: var(--v-primary-base);\n  border-radius: 50%;\n  position: absolute;\n  right: 2px;\n  top: 12px;\n}\n.tek-notifications ul.tek-notifications-list li:last-child {\n  border-bottom: none;\n}\n.tek-notifications .tek-notification-show-all {\n  text-decoration: none;\n  text-align: center;\n  padding-top: 10px;\n  font-weight: 700;\n  display: block;\n  border-top: solid 1px rgba(0, 0, 0, 0.12);\n}", map: undefined, media: undefined });
+    inject("data-v-21d49cb8_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 */
@@ -7700,8 +8925,68 @@ __vue_render__$4._withStripped = true;
     undefined
   );
 
+/**
+ * Product card component
+ */
+let TekProductCard = class TekProductCard extends ZdComponentRender {
+    constructor() {
+        super(...arguments);
+        this.instanceType = ProductCard;
+        this.disableTooltip = true;
+    }
+    mounted() {
+        const element = this.$refs.productDiv;
+        setTimeout(() => {
+            this.disableTooltip = !element || element.scrollWidth === element.clientWidth;
+        }, 100);
+    }
+};
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekProductCard.prototype, "id", void 0);
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekProductCard.prototype, "to", void 0);
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekProductCard.prototype, "src", void 0);
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekProductCard.prototype, "errorImagePath", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'UNAVAILABLE_IMAGE' })
+], TekProductCard.prototype, "errorImageText", void 0);
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekProductCard.prototype, "productName", void 0);
+__decorate([
+    PropWatch({ type: String })
+], TekProductCard.prototype, "productSupplier", void 0);
+__decorate([
+    PropWatch({ type: String })
+], TekProductCard.prototype, "productBrand", void 0);
+__decorate([
+    PropWatch({ type: [String, Number] })
+], TekProductCard.prototype, "productPrice", void 0);
+__decorate([
+    PropWatch({ type: String, default: '' })
+], TekProductCard.prototype, "width", void 0);
+__decorate([
+    PropWatch({ type: [Number, String], default: 'auto' })
+], TekProductCard.prototype, "height", void 0);
+__decorate([
+    PropWatch({ type: [Number, String], default: 'none' })
+], TekProductCard.prototype, "maxHeight", void 0);
+__decorate([
+    PropWatch({ type: [Number, String], default: 'none' })
+], TekProductCard.prototype, "minHeight", void 0);
+TekProductCard = __decorate([
+    Component
+], TekProductCard);
+var script$3 = TekProductCard;
+
 /* script */
-const __vue_script__$3 = script$7;
+const __vue_script__$3 = script$3;
 
 /* template */
 var __vue_render__$3 = function () {
@@ -7843,7 +9128,7 @@ __vue_render__$3._withStripped = true;
   /* style */
   const __vue_inject_styles__$3 = function (inject) {
     if (!inject) return
-    inject("data-v-356ccff0_0", { source: ".tek-product-card * {\n  text-decoration: none;\n}\n.tek-product-card .v-card {\n  padding: 0%;\n}\n.tek-product-card .v-card .tek-image-content {\n  text-align: center;\n}\n.tek-product-card .v-card .tek-product-card-image-container {\n  position: relative;\n}\n.tek-product-card .v-card .tek-product-card-info {\n  display: flex;\n  flex-direction: column;\n  padding: 5px 10px 10px 10px;\n  color: var(--zd-font-color);\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-title {\n  white-space: nowrap;\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 16px;\n  line-height: 19px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-supplier {\n  font-size: var(--zd-font-body2-size);\n  line-height: 14px;\n  color: #c4c4c4;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 10px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-brand {\n  font-size: var(--zd-font-body2-size);\n  line-height: 14px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-price {\n  font-weight: var(--zd-font-body4-weight);\n  font-size: var(--zd-font-body4-size);\n  line-height: 16px;\n}\n.tek-product-card--link .v-card {\n  cursor: pointer;\n}", map: undefined, media: undefined });
+    inject("data-v-9a8efbf2_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 */
@@ -7871,8 +9156,422 @@ __vue_render__$3._withStripped = true;
     undefined
   );
 
+// eslint-disable-next-line prefer-destructuring
+const ZdTreeGridEditable = components$1.ZdTreeGridEditable;
+/**
+ * TekGrid component
+ */
+let TekGrid = class TekGrid extends ZdTreeGridEditable {
+    constructor() {
+        super(...arguments);
+        this.instanceType = TekTreeGrid;
+        this.debouncedDatasourceGet = debounce((instance) => {
+            if (instance.events.beforeApplyFilter) {
+                instance.events.beforeApplyFilter({ component: instance });
+            }
+            const { datasource } = instance;
+            if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+                datasource.updateDynamicFilter();
+            }
+            else {
+                datasource.get();
+            }
+        }, 500);
+        this.debouncedFilterChange = debounce((column, index, params) => this.filterValueChange(column, index, params), 1000);
+        this.operationList = '';
+        this.defaultOperation = '';
+        this.defaultRelation = '';
+        this.lastFilter = '';
+        this.tableHeader = null;
+        this.tableBody = null;
+    }
+    updateTitle(instanceUpdateTitle) {
+        if (this.instance.toolbarSlot[0].name === `${this.instance.name}_gridTitle`) {
+            this.instance.toolbarSlot[0].text = instanceUpdateTitle;
+        }
+    }
+    mounted() {
+        this.originalChangeTekGridLayout = this.instance.changeLayout;
+        this.instance.changeLayout = this.onChangeTekGridLayout;
+        this.updateFixedColumns();
+        this.orderColumnVisibility();
+    }
+    minimumColumnWidth(column) {
+        let minWidth = column && column.sortable ? 50 : 34;
+        if (this.instance.columnFilterButton && column && column.filterable) {
+            minWidth += 15;
+        }
+        return minWidth;
+    }
+    onChangeTekGridLayout(event, element) {
+        if (this.originalChangeTekGridLayout) {
+            this.originalChangeTekGridLayout.call(this.instance, event, element);
+        }
+        if (this.instance.showLayoutOptions) {
+            try {
+                const layoutOptions = Metadata.getInstance(`${this.instance.name}_layout_options`);
+                layoutOptions.layoutEdited = true;
+            }
+            catch (_a) {
+                // do nothing
+            }
+        }
+        this.updateFixedColumns();
+    }
+    getFilterActivatorEvents(on, column) {
+        const events = {};
+        Object.keys(on).forEach((eventName) => {
+            events[eventName] = (event) => {
+                this.defaultOperation = 'CONTAINS';
+                this.defaultRelation = 'AND';
+                this.operationList = this.getColumnFilterOptions(column).map((item) => item.operation).join(';');
+                on[eventName](event);
+            };
+        });
+        return events;
+    }
+    getFilterItemChange(prop, column, index, params) {
+        return this.filterItemChange(prop, column, index, params);
+    }
+    getFilterValueChange(column, index, params) {
+        return this.debouncedFilterChange(column, index, params);
+    }
+    isOperationArrayValues(operation) {
+        return ['IN', 'NOT_IN', 'BETWEEN'].includes(operation);
+    }
+    getComponentType(index) {
+        const operationListArray = this.operationList.split(';');
+        return this.isOperationArrayValues(operationListArray[index]) ? 'ZdTextInput' : '';
+    }
+    getComponentHint(index) {
+        const operationListArray = this.operationList.split(';');
+        return this.isOperationArrayValues(operationListArray[index]) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
+    }
+    filterItemChange(prop, column, index, { component, event, element }) {
+        const { name } = component;
+        const valueInputName = name.replace(`-filter-${prop}-`, '-filter-value-');
+        const valueInput = Metadata.getInstance(valueInputName);
+        const operationListArray = this.operationList.split(';');
+        if (prop === 'operation' && operationListArray[index] !== component.value) {
+            operationListArray[index] = component.value;
+            this.operationList = operationListArray.join(';');
+        }
+        try {
+            valueInput.setFocus();
+        }
+        catch (_a) {
+            // do nothing
+        }
+        const { datasource } = this.instance;
+        if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+            if (datasource.dynamicFilter[column.name] && datasource.dynamicFilter[column.name][index]) {
+                this.lastFilter = JSON.stringify(datasource.dynamicFilter);
+                const { value } = datasource.dynamicFilter[column.name][index];
+                if (prop === 'operation') {
+                    if (this.isOperationArrayValues(component.value) && !Array.isArray(value)) {
+                        datasource.dynamicFilter[column.name][index].value = [value];
+                    }
+                    if (!this.isOperationArrayValues(component.value) && Array.isArray(value)) {
+                        [datasource.dynamicFilter[column.name][index].value] = value;
+                    }
+                }
+                datasource.dynamicFilter[column.name][index][prop] = component.value;
+                if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
+                    this.debouncedDatasourceGet(this.instance);
+                    this.onChangeTekGridLayout(event, element);
+                }
+            }
+        }
+    }
+    orderColumnVisibility() {
+        const columnsInvisible = this.instance.columns.filter((column) => column.isVisible === false);
+        if (!columnsInvisible) {
+            return;
+        }
+        const columnsVisible = this.instance.columns.filter((column) => column.isVisible === true);
+        const newOrderColumns = [];
+        if (columnsVisible) {
+            newOrderColumns.push(...columnsVisible);
+        }
+        if (columnsInvisible) {
+            newOrderColumns.push(...columnsInvisible);
+        }
+        this.instance.columns = newOrderColumns;
+    }
+    convertToDateFormat(column, value, revert) {
+        const dateFormat = column.componentProps.dateFormat || Config.dateFormat;
+        const displayFormat = column.componentProps.displayFormat || Config.displayFormat;
+        if (revert) {
+            if (dayjs(value, displayFormat).isValid() || !dayjs(value, dateFormat).isValid()) {
+                return value;
+            }
+            return dayjs(value, dateFormat).format(displayFormat);
+        }
+        if (dayjs(value, dateFormat).isValid() || !dayjs(value, displayFormat).isValid()) {
+            return value;
+        }
+        return dayjs(value, displayFormat).format(dateFormat);
+    }
+    checkDateValueFormat(column, value, revert = false) {
+        if (['ZdDate', 'ZdDateRange'].includes(column.componentProps.component)) {
+            if (Array.isArray(value)) {
+                return value.map((item) => this.convertToDateFormat(column, item, revert));
+            }
+            return this.convertToDateFormat(column, value, revert);
+        }
+        return value;
+    }
+    filterValueChange(column, index, { component, event, element }) {
+        let { value } = component;
+        const { datasource } = this.instance;
+        if (!(element === null || element === void 0 ? void 0 : element.offsetParent))
+            return;
+        if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+            this.lastFilter = JSON.stringify(datasource.dynamicFilter);
+            if (value) {
+                if (!datasource.dynamicFilter[column.name]) {
+                    datasource.dynamicFilter[column.name] = [];
+                }
+                if (!datasource.dynamicFilter[column.name][index]) {
+                    const { name } = component;
+                    let relation;
+                    if (index > 0) {
+                        const relationSelectName = name.replace('-filter-value-', '-filter-relation-');
+                        const relationSelect = Metadata.getInstance(relationSelectName);
+                        relation = relationSelect.value;
+                    }
+                    else {
+                        relation = 'AND';
+                    }
+                    const operationSelectName = name.replace('-filter-value-', '-filter-operation-');
+                    const operationSelect = Metadata.getInstance(operationSelectName);
+                    const operation = operationSelect.value;
+                    if (this.isOperationArrayValues(operation)) {
+                        value = value.split(';');
+                    }
+                    value = this.checkDateValueFormat(column, value);
+                    datasource.dynamicFilter[column.name].push({
+                        relation,
+                        operation,
+                        value,
+                    });
+                }
+                else {
+                    if (this.isOperationArrayValues(datasource.dynamicFilter[column.name][index].operation)) {
+                        value = value.split(';');
+                    }
+                    value = this.checkDateValueFormat(column, value);
+                    datasource.dynamicFilter[column.name][index].value = value;
+                }
+            }
+            else if (datasource.dynamicFilter[column.name] && datasource.dynamicFilter[column.name][index]) {
+                this.defaultOperation = datasource.dynamicFilter[column.name][index].operation;
+                this.defaultRelation = datasource.dynamicFilter[column.name][index].relation;
+                datasource.dynamicFilter[column.name].splice(index, 1);
+                if (datasource.dynamicFilter[column.name].length === 1) {
+                    datasource.dynamicFilter[column.name][0].relation = 'AND';
+                }
+                if (!datasource.dynamicFilter[column.name].length) {
+                    delete datasource.dynamicFilter[column.name];
+                }
+            }
+            if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
+                this.debouncedDatasourceGet(this.instance);
+                this.onChangeTekGridLayout(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.onChangeTekGridLayout(event, element);
+                this.clearHelperValues(column);
+            }
+        }
+    }
+    clearHelperValues(column) {
+        if (!Array.isArray(column.filterProps)) {
+            column.filterProps.helperValue = '';
+        }
+        else {
+            column.filterProps.forEach((prop) => {
+                prop.helperValue = '';
+            });
+        }
+    }
+    getColumnFilterOptions(column) {
+        const filterOptions = [];
+        const { datasource } = this.instance;
+        if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+            const dynamicFilter = datasource.dynamicFilter[column.name];
+            if (dynamicFilter && dynamicFilter.length > 0) {
+                dynamicFilter.forEach((item) => {
+                    let { value } = item;
+                    if (this.isOperationArrayValues(item.operation) && Array.isArray(value)) {
+                        value = this.checkDateValueFormat(column, value, true);
+                        value = value.join(';');
+                    }
+                    filterOptions.push(Object.assign(Object.assign({}, item), { value }));
+                });
+            }
+            filterOptions.push({
+                operation: this.defaultOperation,
+                relation: this.defaultRelation,
+                value: '',
+            });
+        }
+        else {
+            const option = {
+                operation: undefined,
+                relation: undefined,
+                value: this.instance.datasource.filter[column.name] || '',
+            };
+            filterOptions.push(option);
+        }
+        return filterOptions;
+    }
+    isCurrentRow(row) {
+        const { uniqueKey, currentRow } = this.instance.datasource;
+        return !this.instance.cellSelection && !!((row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey]));
+    }
+    getVisibleData() {
+        this.scrollData.visibleData = this.instance.datasource.data;
+        return this.scrollData.visibleData;
+    }
+    getData() {
+        return this.instance.treeDataStructure.searchHasNoData
+            ? []
+            : this.instance.treeDataStructure.treeData || this.renderedData;
+    }
+    rowClick(row, event) {
+        this.instance.rowClick(row, event, this.$el);
+    }
+    orderHeaders(headers) {
+        return headers.sort((a, b) => {
+            if (a.fixed === b.fixed)
+                return 0;
+            if (!a.fixed && b.fixed)
+                return 1;
+            return -1;
+        }).filter((item) => (item instanceof TekGridColumn) && (item.isVisible));
+    }
+    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;
+    }
+    setSpanWidth(column) {
+        return column.width;
+    }
+};
+__decorate([
+    PropWatch({ type: [String], default: '' })
+], TekGrid.prototype, "title", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false })
+], TekGrid.prototype, "addButton", void 0);
+__decorate([
+    PropWatch({ type: [String], default: 'none' })
+], TekGrid.prototype, "deleteButton", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false })
+], TekGrid.prototype, "columnsButton", void 0);
+__decorate([
+    Prop({ type: [Array, String], default: () => [] })
+], TekGrid.prototype, "columnsButtonIgnore", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: true })
+], TekGrid.prototype, "showEditButtons", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false })
+], TekGrid.prototype, "filterButton", void 0);
+__decorate([
+    PropWatch({ type: [Object] })
+], TekGrid.prototype, "modalFilterProps", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: true })
+], TekGrid.prototype, "showSearch", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false })
+], TekGrid.prototype, "columnFilterButton", void 0);
+__decorate([
+    Prop({ type: [Array], default: () => [] })
+], TekGrid.prototype, "actions", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekGrid.prototype, "dragColumns", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekGrid.prototype, "mainGrid", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekGrid.prototype, "resizeColumns", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekGrid.prototype, "showLayoutOptions", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: false })
+], TekGrid.prototype, "showExport", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: true })
+], TekGrid.prototype, "showReload", void 0);
+__decorate([
+    PropWatch({ type: [Object] })
+], TekGrid.prototype, "defaultFilter", void 0);
+__decorate([
+    PropWatch({ type: [String] })
+], TekGrid.prototype, "reportTitle", void 0);
+__decorate([
+    Prop({ type: [String, Array] })
+], TekGrid.prototype, "exportConfig", void 0);
+__decorate([
+    Prop({ type: [Array] })
+], TekGrid.prototype, "exportActions", void 0);
+__decorate([
+    Prop({
+        type: Array,
+        default: () => undefined,
+    })
+], TekGrid.prototype, "toolbarSlot", void 0);
+__decorate([
+    Watch('instance.title')
+], TekGrid.prototype, "updateTitle", null);
+TekGrid = __decorate([
+    Component
+], TekGrid);
+var script$2 = TekGrid;
+
 /* script */
-const __vue_script__$2 = script$6;
+const __vue_script__$2 = script$2;
 
 /* template */
 var __vue_render__$2 = function () {
@@ -8669,7 +10368,7 @@ __vue_render__$2._withStripped = true;
   /* style */
   const __vue_inject_styles__$2 = function (inject) {
     if (!inject) return
-    inject("data-v-1b6893dd_0", { source: ".tek-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n  height: 38px;\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  flex-grow: 1;\n  line-height: 22px;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: var(--row-active-color);\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-first-group-cell {\n  display: flex;\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 .zd-table-group-two-plus-container {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation {\n  top: unset;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation :not(.first-group) {\n  margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation.first-group {\n  width: 14px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\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  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n}\n.tek-grid table tbody tr.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 .zd-table-two-plus-groups {\n  display: flex !important;\n}\n.tek-grid table .zd-table-two-plus-groups .zd-table-cell-text {\n  position: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation {\n  top: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: flex;\n  position: relative;\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: 1rem;\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  top: -10%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid table .footer .zd-grid-row-checkbox {\n  display: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tek-grid-export-landscape i {\n  transform: rotate(-90deg);\n}\n.tek-grid-export-multioption-text {\n  padding-left: 3px;\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n  cursor: default;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}\n.is-rotated {\n  transform: rotate(180deg);\n  transition: transform 0.3s ease;\n}", map: undefined, media: undefined });
+    inject("data-v-a7ff331a_0", { source: ".tek-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n  height: 38px;\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  flex-grow: 1;\n  line-height: 22px;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: var(--row-active-color);\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-first-group-cell {\n  display: flex;\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 .zd-table-group-two-plus-container {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation {\n  top: unset;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation :not(.first-group) {\n  margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation.first-group {\n  width: 14px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\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  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n}\n.tek-grid table tbody tr.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 .zd-table-two-plus-groups {\n  display: flex !important;\n}\n.tek-grid table .zd-table-two-plus-groups .zd-table-cell-text {\n  position: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation {\n  top: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation:not(.first-group) {\n  top: unset;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: flex;\n  position: relative;\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: 1rem;\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  top: -10%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid table .footer .zd-grid-row-checkbox {\n  display: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tek-grid-export-landscape i {\n  transform: rotate(-90deg);\n}\n.tek-grid-export-multioption-text {\n  padding-left: 3px;\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n  cursor: default;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}\n.is-rotated {\n  transform: rotate(180deg);\n  transition: transform 0.3s ease;\n  margin-right: 3.7px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -8697,8 +10396,34 @@ __vue_render__$2._withStripped = true;
     undefined
   );
 
+let TekUserInfo = class TekUserInfo extends ZdUserInfo {
+    constructor() {
+        super(...arguments);
+        this.instanceType = TekUserInfo$3;
+    }
+};
+__decorate([
+    PropWatch({ type: [String], default: '' })
+], TekUserInfo.prototype, "aboutImage", void 0);
+__decorate([
+    PropWatch({ type: [String], default: '' })
+], TekUserInfo.prototype, "defaultEmail", void 0);
+__decorate([
+    PropWatch({ type: [Object, String], default: null })
+], TekUserInfo.prototype, "versionInfo", void 0);
+__decorate([
+    PropWatch({ type: [String], default: '' })
+], TekUserInfo.prototype, "versionUrl", void 0);
+__decorate([
+    Prop({ type: [Array], default: undefined })
+], TekUserInfo.prototype, "bottomSlot", void 0);
+TekUserInfo = __decorate([
+    Component
+], TekUserInfo);
+var script$1 = TekUserInfo;
+
 /* script */
-const __vue_script__$1 = script$5;
+const __vue_script__$1 = script$1;
 
 /* template */
 var __vue_render__$1 = function () {
@@ -8753,7 +10478,7 @@ __vue_render__$1._withStripped = true;
   /* style */
   const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-52978667_0", { source: ".about-modal {\n  flex-grow: 0;\n  overflow-y: unset;\n  width: auto;\n  border: 3px solid var(--v-primary-base);\n}\n.about-modal .zd-modal-card, .about-modal .zd-modal-card-text, .about-modal .zd-modal-container, .about-modal .zd-tabs {\n  height: 100%;\n}\n.about-modal .zd-modal-card-text {\n  padding: 8px !important;\n}\n.about-modal .zd-modal-container {\n  display: flex;\n  flex-direction: column;\n}\n.about-modal .zd-tabs, .about-modal .v-tabs-items {\n  overflow-y: auto;\n}\n.about-modal .zd-image-valid {\n  width: 50%;\n  align-items: center;\n}\n.about-modal #basic-user-info_version_tabs {\n  height: 300px !important;\n}\n.about-modal #basic-user-info_about_image {\n  text-align: center;\n}", map: undefined, media: undefined });
+    inject("data-v-2ce8ec91_0", { source: ".about-modal {\n  flex-grow: 0;\n  overflow-y: unset;\n  width: auto;\n  border: 3px solid var(--v-primary-base);\n}\n.about-modal .zd-modal-card, .about-modal .zd-modal-card-text, .about-modal .zd-modal-container, .about-modal .zd-tabs {\n  height: 100%;\n}\n.about-modal .zd-modal-card-text {\n  padding: 8px !important;\n}\n.about-modal .zd-modal-container {\n  display: flex;\n  flex-direction: column;\n}\n.about-modal .zd-tabs, .about-modal .v-tabs-items {\n  overflow-y: auto;\n}\n.about-modal .zd-image-valid {\n  width: 50%;\n  align-items: center;\n}\n.about-modal #basic-user-info_version_tabs {\n  height: 300px !important;\n}\n.about-modal #basic-user-info_about_image {\n  text-align: center;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -8781,8 +10506,27 @@ __vue_render__$1._withStripped = true;
     undefined
   );
 
+// eslint-disable-next-line prefer-destructuring
+const ZdList = components$1.ZdList;
+let TekUserInfoList = class TekUserInfoList extends ZdList {
+    constructor() {
+        super(...arguments);
+        this.instanceType = TekUserInfoList$3;
+    }
+};
+__decorate([
+    PropWatch({ type: [String], default: '' })
+], TekUserInfoList.prototype, "parentName", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: true })
+], TekUserInfoList.prototype, "dense", void 0);
+TekUserInfoList = __decorate([
+    Component
+], TekUserInfoList);
+var script = TekUserInfoList;
+
 /* script */
-const __vue_script__ = script$4;
+const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {
@@ -8877,4 +10621,4 @@ const TeknisaComponents = {
 const packageContent = require('../package.json');
 VersionService.addPackageVersion(packageContent.name, packageContent.version);
 
-export { script$m as TekBreadcrumbHeader, script$l as TekCardTitle, script$k as TekCrudAddButton, script$j as TekCrudCancelButton, script$i as TekCrudDeleteButton, script$h as TekCrudForm, script$g as TekCrudSaveButton, script$3 as TekDragGrid, TekGrid$2 as TekGrid, script$f as TekGridCellIdentation, script$d as TekGridColumnFilter, script$c as TekGridColumnsButton, script$b as TekGridFilterButton, script$e as TekGridHeaderIndentation, script$a as TekGridLayoutOptions, script$9 as TekImage, script$8 as TekIterableComponentRender, script$7 as TekProductCard, script$6 as TekTreeGrid, script$5 as TekUserInfo, script$4 as TekUserInfoList, TeknisaComponents as default };
+export { TekBreadcrumbHeader$1 as TekBreadcrumbHeader, TekCardTitle$1 as TekCardTitle, TekCrudAddButton$1 as TekCrudAddButton, TekCrudCancelButton$1 as TekCrudCancelButton, TekCrudDeleteButton$1 as TekCrudDeleteButton, TekCrudForm$1 as TekCrudForm, TekCrudSaveButton$1 as TekCrudSaveButton, TekDragGrid$2 as TekDragGrid, TekGrid$4 as TekGrid, TekGridCellIdentation$1 as TekGridCellIdentation, TekGridColumnFilter$1 as TekGridColumnFilter, TekGridColumnsButton$2 as TekGridColumnsButton, TekGridFilterButton$2 as TekGridFilterButton, TekGridHeaderIndentation$1 as TekGridHeaderIndentation, TekGridLayoutOptions$2 as TekGridLayoutOptions, TekImage$2 as TekImage, TekIterableComponentRender$2 as TekIterableComponentRender, TekProductCard$2 as TekProductCard, TekGrid$2 as TekTreeGrid, TekUserInfo$2 as TekUserInfo, TekUserInfoList$2 as TekUserInfoList, TeknisaComponents as default };