@zeedhi/teknisa-components-vuetify 1.45.0 → 1.50.0

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

@@ -1,7 +1,8 @@
 import { Modal, ModalService, Icons } from '@zeedhi/common';
+import { ZdUserInfo } from '@zeedhi/zd-user-info-vue';
 import { Prop, Component, Watch } from 'vue-property-decorator';
-import { BreadcrumbHeader, CardTitle, CrudButton, CrudAddButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, TekGrid as TekGrid$2, TekRestDatasource, TekMemoryDatasource, TekGridColumn, TekGridColumnsButton as TekGridColumnsButton$1, TekGridLayoutOptions as TekGridLayoutOptions$1, TekFilterHelper, Image, IterableCarousel, IterableComponentRender, Loading, Notifications, ProductCard, TekTreeGrid } from '@zeedhi/teknisa-components-common';
-import { ZdComponent, ZdComponentRender, components as components$1, ZdForm, ZdGrid, ZdIterableColumnsButton, ZdIterable, ZdLoading } from '@zeedhi/vuetify';
+import { BreadcrumbHeader, CardTitle, CrudButton, CrudAddButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, TekGrid as TekGrid$2, TekRestDatasource, TekMemoryDatasource, TekGridColumn, TekGridColumnsButton as TekGridColumnsButton$1, TekGridLayoutOptions as TekGridLayoutOptions$1, TekFilterHelper, Image, IterableCarousel, IterableComponentRender, Loading, Notifications, ProductCard, TekTreeGrid, TekUserInfo as TekUserInfo$1, TekUserInfoList as TekUserInfoList$1 } from '@zeedhi/teknisa-components-common';
+import { PropWatch, ZdComponent, ZdComponentRender, components as components$1, ZdForm, ZdGrid, ZdIterableColumnsButton, ZdIterable, ZdLoading } from '@zeedhi/vuetify';
 import { Metadata, Config, dayjs, Singleton, Utils, I18n, Loader } from '@zeedhi/core';
 import debounce from 'lodash.debounce';
 import Sortable from 'sortablejs';
@@ -43,7 +44,7 @@ let TekBreadcrumbHeader = class TekBreadcrumbHeader extends ZdComponent {
     }
 };
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekBreadcrumbHeader.prototype, "title", void 0);
 __decorate([
@@ -57,7 +58,7 @@ __decorate([
 TekBreadcrumbHeader = __decorate([
     Component
 ], TekBreadcrumbHeader);
-var script$g = TekBreadcrumbHeader;
+var script$i = TekBreadcrumbHeader;
 
 function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
     if (typeof shadowMode !== 'boolean') {
@@ -188,10 +189,10 @@ function addStyle(id, css) {
 }
 
 /* script */
-const __vue_script__$g = script$g;
+const __vue_script__$i = script$i;
 
 /* template */
-var __vue_render__$g = function () {
+var __vue_render__$i = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -262,34 +263,34 @@ var __vue_render__$g = function () {
     1
   )
 };
-var __vue_staticRenderFns__$g = [];
-__vue_render__$g._withStripped = true;
+var __vue_staticRenderFns__$i = [];
+__vue_render__$i._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$g = function (inject) {
+  const __vue_inject_styles__$i = 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 });
 
   };
   /* scoped */
-  const __vue_scope_id__$g = undefined;
+  const __vue_scope_id__$i = undefined;
   /* module identifier */
-  const __vue_module_identifier__$g = undefined;
+  const __vue_module_identifier__$i = undefined;
   /* functional template */
-  const __vue_is_functional_template__$g = false;
+  const __vue_is_functional_template__$i = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$g = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$g, staticRenderFns: __vue_staticRenderFns__$g },
-    __vue_inject_styles__$g,
-    __vue_script__$g,
-    __vue_scope_id__$g,
-    __vue_is_functional_template__$g,
-    __vue_module_identifier__$g,
+  const __vue_component__$i = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$i, staticRenderFns: __vue_staticRenderFns__$i },
+    __vue_inject_styles__$i,
+    __vue_script__$i,
+    __vue_scope_id__$i,
+    __vue_is_functional_template__$i,
+    __vue_module_identifier__$i,
     false,
     createInjector,
     undefined,
@@ -306,15 +307,15 @@ let TekCardTitle = class TekCardTitle extends ZdComponentRender {
     }
 };
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekCardTitle.prototype, "title", void 0);
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekCardTitle.prototype, "subtitle", void 0);
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekCardTitle.prototype, "iconName", void 0);
 __decorate([
@@ -322,23 +323,23 @@ __decorate([
     __metadata("design:type", Array)
 ], TekCardTitle.prototype, "rightSlot", void 0);
 __decorate([
-    Prop({ type: [Boolean, String], default: true }),
+    PropWatch({ type: [Boolean, String], default: true }),
     __metadata("design:type", Boolean)
 ], TekCardTitle.prototype, "showDivider", void 0);
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekCardTitle.prototype, "to", void 0);
 TekCardTitle = __decorate([
     Component
 ], TekCardTitle);
-var script$f = TekCardTitle;
+var script$h = TekCardTitle;
 
 /* script */
-const __vue_script__$f = script$f;
+const __vue_script__$h = script$h;
 
 /* template */
-var __vue_render__$f = function () {
+var __vue_render__$h = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -438,34 +439,34 @@ var __vue_render__$f = function () {
     1
   )
 };
-var __vue_staticRenderFns__$f = [];
-__vue_render__$f._withStripped = true;
+var __vue_staticRenderFns__$h = [];
+__vue_render__$h._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$f = function (inject) {
+  const __vue_inject_styles__$h = 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 });
 
   };
   /* scoped */
-  const __vue_scope_id__$f = undefined;
+  const __vue_scope_id__$h = undefined;
   /* module identifier */
-  const __vue_module_identifier__$f = undefined;
+  const __vue_module_identifier__$h = undefined;
   /* functional template */
-  const __vue_is_functional_template__$f = false;
+  const __vue_is_functional_template__$h = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$f = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$f, staticRenderFns: __vue_staticRenderFns__$f },
-    __vue_inject_styles__$f,
-    __vue_script__$f,
-    __vue_scope_id__$f,
-    __vue_is_functional_template__$f,
-    __vue_module_identifier__$f,
+  const __vue_component__$h = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$h, staticRenderFns: __vue_staticRenderFns__$h },
+    __vue_inject_styles__$h,
+    __vue_script__$h,
+    __vue_scope_id__$h,
+    __vue_is_functional_template__$h,
+    __vue_module_identifier__$h,
     false,
     createInjector,
     undefined,
@@ -516,35 +517,35 @@ let TekCrudAddButton = class TekCrudAddButton extends TekCrudButton$1 {
     }
 };
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekCrudAddButton.prototype, "flat", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekCrudAddButton.prototype, "icon", void 0);
 __decorate([
-    Prop({ type: String, default: 'plus' }),
+    PropWatch({ type: String, default: 'plus' }),
     __metadata("design:type", String)
 ], TekCrudAddButton.prototype, "iconName", void 0);
 __decorate([
-    Prop({ type: String, default: '#666' }),
+    PropWatch({ type: String, default: '#666' }),
     __metadata("design:type", String)
 ], TekCrudAddButton.prototype, "color", void 0);
 __decorate([
-    Prop({ type: String, default: 'f2' }),
+    PropWatch({ type: String, default: 'f2' }),
     __metadata("design:type", String)
 ], TekCrudAddButton.prototype, "clickShortcutKey", void 0);
 TekCrudAddButton = __decorate([
     Component
 ], TekCrudAddButton);
-var script$e = TekCrudAddButton;
+var script$g = TekCrudAddButton;
 
 /* script */
-const __vue_script__$e = script$e;
+const __vue_script__$g = script$g;
 
 /* template */
-var __vue_render__$e = function () {
+var __vue_render__$g = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -609,17 +610,17 @@ var __vue_render__$e = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$e = [];
-__vue_render__$e._withStripped = true;
+var __vue_staticRenderFns__$g = [];
+__vue_render__$g._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$e = undefined;
+  const __vue_inject_styles__$g = undefined;
   /* scoped */
-  const __vue_scope_id__$e = undefined;
+  const __vue_scope_id__$g = undefined;
   /* module identifier */
-  const __vue_module_identifier__$e = undefined;
+  const __vue_module_identifier__$g = undefined;
   /* functional template */
-  const __vue_is_functional_template__$e = false;
+  const __vue_is_functional_template__$g = false;
   /* style inject */
   
   /* style inject SSR */
@@ -628,13 +629,13 @@ __vue_render__$e._withStripped = true;
   
 
   
-  const __vue_component__$e = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
-    __vue_inject_styles__$e,
-    __vue_script__$e,
-    __vue_scope_id__$e,
-    __vue_is_functional_template__$e,
-    __vue_module_identifier__$e,
+  const __vue_component__$g = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$g, staticRenderFns: __vue_staticRenderFns__$g },
+    __vue_inject_styles__$g,
+    __vue_script__$g,
+    __vue_scope_id__$g,
+    __vue_is_functional_template__$g,
+    __vue_module_identifier__$g,
     false,
     undefined,
     undefined,
@@ -651,27 +652,27 @@ let TekCrudCancelButton = class TekCrudCancelButton extends TekCrudButton$1 {
     }
 };
 __decorate([
-    Prop({ type: String, default: 'CANCEL' }),
+    PropWatch({ type: String, default: 'CANCEL' }),
     __metadata("design:type", String)
 ], TekCrudCancelButton.prototype, "label", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekCrudCancelButton.prototype, "outline", void 0);
 __decorate([
-    Prop({ type: String, default: 'esc' }),
+    PropWatch({ type: String, default: 'esc' }),
     __metadata("design:type", String)
 ], TekCrudCancelButton.prototype, "clickShortcutKey", void 0);
 TekCrudCancelButton = __decorate([
     Component
 ], TekCrudCancelButton);
-var script$d = TekCrudCancelButton;
+var script$f = TekCrudCancelButton;
 
 /* script */
-const __vue_script__$d = script$d;
+const __vue_script__$f = script$f;
 
 /* template */
-var __vue_render__$d = function () {
+var __vue_render__$f = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -736,17 +737,17 @@ var __vue_render__$d = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$d = [];
-__vue_render__$d._withStripped = true;
+var __vue_staticRenderFns__$f = [];
+__vue_render__$f._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$d = undefined;
+  const __vue_inject_styles__$f = undefined;
   /* scoped */
-  const __vue_scope_id__$d = undefined;
+  const __vue_scope_id__$f = undefined;
   /* module identifier */
-  const __vue_module_identifier__$d = undefined;
+  const __vue_module_identifier__$f = undefined;
   /* functional template */
-  const __vue_is_functional_template__$d = false;
+  const __vue_is_functional_template__$f = false;
   /* style inject */
   
   /* style inject SSR */
@@ -755,13 +756,13 @@ __vue_render__$d._withStripped = true;
   
 
   
-  const __vue_component__$d = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
-    __vue_inject_styles__$d,
-    __vue_script__$d,
-    __vue_scope_id__$d,
-    __vue_is_functional_template__$d,
-    __vue_module_identifier__$d,
+  const __vue_component__$f = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$f, staticRenderFns: __vue_staticRenderFns__$f },
+    __vue_inject_styles__$f,
+    __vue_script__$f,
+    __vue_scope_id__$f,
+    __vue_is_functional_template__$f,
+    __vue_module_identifier__$f,
     false,
     undefined,
     undefined,
@@ -778,35 +779,35 @@ let TekCrudDeleteButton = class TekCrudDeleteButton extends TekCrudButton$1 {
     }
 };
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekCrudDeleteButton.prototype, "flat", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekCrudDeleteButton.prototype, "icon", void 0);
 __decorate([
-    Prop({ type: String, default: 'trashCanOutline' }),
+    PropWatch({ type: String, default: 'trashCanOutline' }),
     __metadata("design:type", String)
 ], TekCrudDeleteButton.prototype, "iconName", void 0);
 __decorate([
-    Prop({ type: String, default: '#666' }),
+    PropWatch({ type: String, default: '#666' }),
     __metadata("design:type", String)
 ], TekCrudDeleteButton.prototype, "color", void 0);
 __decorate([
-    Prop({ type: String, default: 'ctrl+d' }),
+    PropWatch({ type: String, default: 'ctrl+d' }),
     __metadata("design:type", String)
 ], TekCrudDeleteButton.prototype, "clickShortcutKey", void 0);
 TekCrudDeleteButton = __decorate([
     Component
 ], TekCrudDeleteButton);
-var script$c = TekCrudDeleteButton;
+var script$e = TekCrudDeleteButton;
 
 /* script */
-const __vue_script__$c = script$c;
+const __vue_script__$e = script$e;
 
 /* template */
-var __vue_render__$c = function () {
+var __vue_render__$e = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -871,17 +872,17 @@ var __vue_render__$c = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$c = [];
-__vue_render__$c._withStripped = true;
+var __vue_staticRenderFns__$e = [];
+__vue_render__$e._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$c = undefined;
+  const __vue_inject_styles__$e = undefined;
   /* scoped */
-  const __vue_scope_id__$c = undefined;
+  const __vue_scope_id__$e = undefined;
   /* module identifier */
-  const __vue_module_identifier__$c = undefined;
+  const __vue_module_identifier__$e = undefined;
   /* functional template */
-  const __vue_is_functional_template__$c = false;
+  const __vue_is_functional_template__$e = false;
   /* style inject */
   
   /* style inject SSR */
@@ -890,13 +891,13 @@ __vue_render__$c._withStripped = true;
   
 
   
-  const __vue_component__$c = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
-    __vue_inject_styles__$c,
-    __vue_script__$c,
-    __vue_scope_id__$c,
-    __vue_is_functional_template__$c,
-    __vue_module_identifier__$c,
+  const __vue_component__$e = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
+    __vue_inject_styles__$e,
+    __vue_script__$e,
+    __vue_scope_id__$e,
+    __vue_is_functional_template__$e,
+    __vue_module_identifier__$e,
     false,
     undefined,
     undefined,
@@ -915,13 +916,13 @@ let TekCrudForm = class TekCrudForm extends ZdForm {
 TekCrudForm = __decorate([
     Component
 ], TekCrudForm);
-var script$b = TekCrudForm;
+var script$d = TekCrudForm;
 
 /* script */
-const __vue_script__$b = script$b;
+const __vue_script__$d = script$d;
 
 /* template */
-var __vue_render__$b = function () {
+var __vue_render__$d = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -995,34 +996,34 @@ var __vue_render__$b = function () {
     2
   )
 };
-var __vue_staticRenderFns__$b = [];
-__vue_render__$b._withStripped = true;
+var __vue_staticRenderFns__$d = [];
+__vue_render__$d._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$b = function (inject) {
+  const __vue_inject_styles__$d = function (inject) {
     if (!inject) return
     inject("data-v-12f9560c_0", { source: ".tek-crud-form {\n  outline: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$b = undefined;
+  const __vue_scope_id__$d = undefined;
   /* module identifier */
-  const __vue_module_identifier__$b = undefined;
+  const __vue_module_identifier__$d = undefined;
   /* functional template */
-  const __vue_is_functional_template__$b = false;
+  const __vue_is_functional_template__$d = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$b = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
-    __vue_inject_styles__$b,
-    __vue_script__$b,
-    __vue_scope_id__$b,
-    __vue_is_functional_template__$b,
-    __vue_module_identifier__$b,
+  const __vue_component__$d = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
+    __vue_inject_styles__$d,
+    __vue_script__$d,
+    __vue_scope_id__$d,
+    __vue_is_functional_template__$d,
+    __vue_module_identifier__$d,
     false,
     createInjector,
     undefined,
@@ -1039,23 +1040,23 @@ let TekCrudSaveButton = class TekCrudSaveButton extends TekCrudButton$1 {
     }
 };
 __decorate([
-    Prop({ type: String, default: 'SAVE' }),
+    PropWatch({ type: String, default: 'SAVE' }),
     __metadata("design:type", String)
 ], TekCrudSaveButton.prototype, "label", void 0);
 __decorate([
-    Prop({ type: String, default: 'ctrl+enter' }),
+    PropWatch({ type: String, default: 'ctrl+enter' }),
     __metadata("design:type", String)
 ], TekCrudSaveButton.prototype, "clickShortcutKey", void 0);
 TekCrudSaveButton = __decorate([
     Component
 ], TekCrudSaveButton);
-var script$a = TekCrudSaveButton;
+var script$c = TekCrudSaveButton;
 
 /* script */
-const __vue_script__$a = script$a;
+const __vue_script__$c = script$c;
 
 /* template */
-var __vue_render__$a = function () {
+var __vue_render__$c = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1120,17 +1121,17 @@ var __vue_render__$a = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$a = [];
-__vue_render__$a._withStripped = true;
+var __vue_staticRenderFns__$c = [];
+__vue_render__$c._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$a = undefined;
+  const __vue_inject_styles__$c = undefined;
   /* scoped */
-  const __vue_scope_id__$a = undefined;
+  const __vue_scope_id__$c = undefined;
   /* module identifier */
-  const __vue_module_identifier__$a = undefined;
+  const __vue_module_identifier__$c = undefined;
   /* functional template */
-  const __vue_is_functional_template__$a = false;
+  const __vue_is_functional_template__$c = false;
   /* style inject */
   
   /* style inject SSR */
@@ -1139,13 +1140,13 @@ __vue_render__$a._withStripped = true;
   
 
   
-  const __vue_component__$a = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
-    __vue_inject_styles__$a,
-    __vue_script__$a,
-    __vue_scope_id__$a,
-    __vue_is_functional_template__$a,
-    __vue_module_identifier__$a,
+  const __vue_component__$c = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
+    __vue_inject_styles__$c,
+    __vue_script__$c,
+    __vue_scope_id__$c,
+    __vue_is_functional_template__$c,
+    __vue_module_identifier__$c,
     false,
     undefined,
     undefined,
@@ -1547,19 +1548,19 @@ let TekGrid$1 = class TekGrid extends ZdGridEditable {
     }
 };
 __decorate([
-    Prop({ type: [String], default: '' }),
+    PropWatch({ type: [String], default: '' }),
     __metadata("design:type", String)
 ], TekGrid$1.prototype, "title", void 0);
 __decorate([
-    Prop({ type: [Boolean, String], default: false }),
+    PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
 ], TekGrid$1.prototype, "addButton", void 0);
 __decorate([
-    Prop({ type: [String], default: 'none' }),
+    PropWatch({ type: [String], default: 'none' }),
     __metadata("design:type", String)
 ], TekGrid$1.prototype, "deleteButton", void 0);
 __decorate([
-    Prop({ type: [Boolean, String], default: false }),
+    PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
 ], TekGrid$1.prototype, "columnsButton", void 0);
 __decorate([
@@ -1567,15 +1568,15 @@ __decorate([
     __metadata("design:type", Object)
 ], TekGrid$1.prototype, "columnsButtonIgnore", void 0);
 __decorate([
-    Prop({ type: [Boolean, String], default: false }),
+    PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
 ], TekGrid$1.prototype, "filterButton", void 0);
 __decorate([
-    Prop({ type: [Boolean, String], default: true }),
+    PropWatch({ type: [Boolean, String], default: true }),
     __metadata("design:type", Object)
 ], TekGrid$1.prototype, "showSearch", void 0);
 __decorate([
-    Prop({ type: [Boolean, String], default: false }),
+    PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
 ], TekGrid$1.prototype, "columnFilterButton", void 0);
 __decorate([
@@ -1583,27 +1584,27 @@ __decorate([
     __metadata("design:type", Array)
 ], TekGrid$1.prototype, "actions", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekGrid$1.prototype, "dragColumns", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekGrid$1.prototype, "resizeColumns", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekGrid$1.prototype, "showLayoutOptions", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: false }),
+    PropWatch({ type: [String, Boolean], default: false }),
     __metadata("design:type", Object)
 ], TekGrid$1.prototype, "showExport", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekGrid$1.prototype, "showReload", void 0);
 __decorate([
-    Prop({ type: [String, Array] }),
+    PropWatch({ type: [String, Array] }),
     __metadata("design:type", Array)
 ], TekGrid$1.prototype, "exportConfig", void 0);
 __decorate([
@@ -1611,11 +1612,11 @@ __decorate([
     __metadata("design:type", Array)
 ], TekGrid$1.prototype, "exportActions", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: false }),
+    PropWatch({ type: [String, Boolean], default: false }),
     __metadata("design:type", Object)
 ], TekGrid$1.prototype, "groupsOpened", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekGrid$1.prototype, "showSummaryTotal", void 0);
 __decorate([
@@ -1628,13 +1629,13 @@ __decorate([
 TekGrid$1 = __decorate([
     Component
 ], TekGrid$1);
-var script$9 = TekGrid$1;
+var script$b = TekGrid$1;
 
 /* script */
-const __vue_script__$9 = script$9;
+const __vue_script__$b = script$b;
 
 /* template */
-var __vue_render__$9 = function () {
+var __vue_render__$b = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1655,7 +1656,7 @@ var __vue_render__$9 = function () {
       { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
       { "zd-grid-loading": _vm.instance.datasource.loading },
     ],
-    style: [_vm.cssColorVars, _vm.instance.cssStyle],
+    style: [_vm.cssColorVars, _vm.$styleObject(_vm.instance.cssStyle)],
     attrs: {
       id: _vm.instance.name,
       "fixed-header": "",
@@ -1676,6 +1677,9 @@ var __vue_render__$9 = function () {
       "disable-sort": "",
       "disable-filtering": "",
       tabindex: "0",
+      "loading-text": _vm.$t(_vm.instance.loadingText),
+      "no-data-text": _vm.$t(_vm.instance.noDataText),
+      "no-results-text": _vm.$t(_vm.instance.noResultText),
     },
     on: {
       "current-items": function ($event) {
@@ -3213,34 +3217,34 @@ var __vue_render__$9 = function () {
     },
   })
 };
-var __vue_staticRenderFns__$9 = [];
-__vue_render__$9._withStripped = true;
+var __vue_staticRenderFns__$b = [];
+__vue_render__$b._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$9 = function (inject) {
+  const __vue_inject_styles__$b = function (inject) {
     if (!inject) return
-    inject("data-v-0ced07c0_0", { source: ".tek-grid .zd-grid-toolbar {\n  height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n  align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n  margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n  line-height: 22px;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th {\n  padding-right: 15px !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n  background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n  background: #3c3c3c !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n  font-weight: 700;\n  font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n  font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n  font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n  transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n  position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n  background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n  background: #3c3c3c !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n  width: 22px;\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n  width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 14px;\n  height: 100%;\n  border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n  width: 10px;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n  height: 60%;\n  border-bottom: solid 1px #ccc;\n  position: relative;\n  top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
+    inject("data-v-7cb50338_0", { source: ".tek-grid .zd-grid-toolbar {\n  height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n  align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n  margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n  line-height: 22px;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th {\n  padding-right: 15px !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n  background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n  background: #3c3c3c !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n  font-weight: 700;\n  font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n  font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n  font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n  transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n  position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n  background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n  background: #3c3c3c !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n  width: 22px;\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n  width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 14px;\n  height: 100%;\n  border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n  width: 10px;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n  height: 60%;\n  border-bottom: solid 1px #ccc;\n  position: relative;\n  top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$9 = undefined;
+  const __vue_scope_id__$b = undefined;
   /* module identifier */
-  const __vue_module_identifier__$9 = undefined;
+  const __vue_module_identifier__$b = undefined;
   /* functional template */
-  const __vue_is_functional_template__$9 = false;
+  const __vue_is_functional_template__$b = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$9 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
-    __vue_inject_styles__$9,
-    __vue_script__$9,
-    __vue_scope_id__$9,
-    __vue_is_functional_template__$9,
-    __vue_module_identifier__$9,
+  const __vue_component__$b = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
+    __vue_inject_styles__$b,
+    __vue_script__$b,
+    __vue_scope_id__$b,
+    __vue_is_functional_template__$b,
+    __vue_module_identifier__$b,
     false,
     createInjector,
     undefined,
@@ -4197,7 +4201,7 @@ let TekGridColumnsButton = class TekGridColumnsButton extends ZdIterableColumnsB
     }
 };
 __decorate([
-    Prop({ type: [Boolean, String], default: false }),
+    PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
 ], TekGridColumnsButton.prototype, "hideGroups", void 0);
 __decorate([
@@ -4209,13 +4213,13 @@ __decorate([
 TekGridColumnsButton = __decorate([
     Component
 ], TekGridColumnsButton);
-var script$8 = TekGridColumnsButton;
+var script$a = TekGridColumnsButton;
 
 /* script */
-const __vue_script__$8 = script$8;
+const __vue_script__$a = script$a;
 
 /* template */
-var __vue_render__$8 = function () {
+var __vue_render__$a = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -4477,34 +4481,34 @@ var __vue_render__$8 = function () {
     ]
   )
 };
-var __vue_staticRenderFns__$8 = [];
-__vue_render__$8._withStripped = true;
+var __vue_staticRenderFns__$a = [];
+__vue_render__$a._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$8 = function (inject) {
+  const __vue_inject_styles__$a = function (inject) {
     if (!inject) return
-    inject("data-v-04ff1434_0", { source: ".tek-grid-columns-button-options {\n  max-height: 250px;\n  display: flex;\n  flex-direction: column;\n  background-color: #fff;\n}\n.tek-grid-columns-button-options.theme--dark {\n  background-color: #1e1e1e;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper {\n  flex: 1;\n  overflow-y: auto;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table {\n  padding: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);\n  font-size: 13px;\n  border-spacing: 0;\n  width: 100%;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table thead tr th {\n  padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n  text-align: left;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td {\n  padding: var(--spacing-1) var(--spacing-2);\n  white-space: nowrap;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name {\n  cursor: -webkit-grab;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name > span {\n  padding-right: 4px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-aggregation {\n  max-width: 150px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer {\n  display: flex;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer .zd-button {\n  flex: 1;\n}\n.tek-grid-columns-button-sortable-drag {\n  background: white;\n}\n.tek-grid-column-option-box {\n  margin: var(--spacing-1);\n  background: #ccc;\n  padding: 2px var(--spacing-1);\n  cursor: pointer;\n}\n.tek-grid-column-option-box > * {\n  display: inline-block;\n}\n.tek-grid-column-option-box > .zd-icon {\n  font-size: 0.9rem;\n  margin-left: var(--spacing-2);\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true {\n  cursor: default;\n  background: #fafafa;\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true > .zd-icon {\n  display: none;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true {\n  background: var(--v-primary-base);\n  color: white;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true > .zd-icon {\n  color: white;\n}\n.tek-grid-column-option-container-col {\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container {\n  background: #eee;\n  padding: var(--spacing-1);\n  max-height: 100px;\n  min-height: 42px;\n  align-content: center;\n  position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .tek-iterable-footer {\n  display: none !important;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .zd-text.no-data {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-size: 0.7rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-label {\n  font-weight: var(--zd-font-body2-weight);\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-select-all {\n  position: absolute;\n  top: 0.5rem;\n  right: var(--spacing-1);\n  color: var(--v-primary-base);\n  cursor: pointer;\n  font-size: 0.8rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-drop-here {\n  position: absolute;\n  z-index: 100;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 35px;\n}\n.tek-grid-column-option-detail-name {\n  color: var(--v-primary-base);\n  font-weight: var(--zd-font-body2-weight);\n  font-size: 1.1rem;\n  margin-top: var(--spacing-6);\n}", map: undefined, media: undefined });
+    inject("data-v-1cfc4ef2_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 */
-  const __vue_scope_id__$8 = undefined;
+  const __vue_scope_id__$a = undefined;
   /* module identifier */
-  const __vue_module_identifier__$8 = undefined;
+  const __vue_module_identifier__$a = undefined;
   /* functional template */
-  const __vue_is_functional_template__$8 = false;
+  const __vue_is_functional_template__$a = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$8 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
-    __vue_inject_styles__$8,
-    __vue_script__$8,
-    __vue_scope_id__$8,
-    __vue_is_functional_template__$8,
-    __vue_module_identifier__$8,
+  const __vue_component__$a = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
+    __vue_inject_styles__$a,
+    __vue_script__$a,
+    __vue_scope_id__$a,
+    __vue_is_functional_template__$a,
+    __vue_module_identifier__$a,
     false,
     createInjector,
     undefined,
@@ -4707,13 +4711,13 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
 TekGridLayoutOptions = __decorate([
     Component
 ], TekGridLayoutOptions);
-var script$7 = TekGridLayoutOptions;
+var script$9 = TekGridLayoutOptions;
 
 /* script */
-const __vue_script__$7 = script$7;
+const __vue_script__$9 = script$9;
 
 /* template */
-var __vue_render__$7 = function () {
+var __vue_render__$9 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -4975,36 +4979,36 @@ var __vue_render__$7 = function () {
     1
   )
 };
-var __vue_staticRenderFns__$7 = [];
-__vue_render__$7._withStripped = true;
+var __vue_staticRenderFns__$9 = [];
+__vue_render__$9._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$7 = function (inject) {
+  const __vue_inject_styles__$9 = function (inject) {
     if (!inject) return
     inject("data-v-162a7d24_0", { source: ".tek-grid-layout-options-badge .v-badge__badge {\n  font-size: var(--zd-font-caption-size);\n  font-weight: var(--zd-font-caption-weight);\n  line-height: 14px;\n  pointer-events: none;\n  background-color: var(--zd-badge-background-color) !important;\n}\n.tek-grid-layout-options-badge .v-badge__badge span {\n  color: var(--zd-badge-text-color) !important;\n}\n.tek-grid-layout-item {\n  font-size: 13px;\n  cursor: pointer;\n  min-height: 30px;\n}\n.tek-grid-layout-item.selected {\n  font-weight: 700;\n}\n.tek-grid-layout-item:hover.theme--light {\n  background: #eee;\n}\n.tek-grid-layout-item:hover .tek-grid-layout-item-buttons {\n  display: inherit;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons {\n  display: none;\n  position: absolute;\n  right: 5px;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons .v-icon {\n  font-size: 12px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$7 = undefined;
+  const __vue_scope_id__$9 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$7 = undefined;
+  const __vue_module_identifier__$9 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$7 = false;
+  const __vue_is_functional_template__$9 = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$7 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
-    __vue_inject_styles__$7,
-    __vue_script__$7,
-    __vue_scope_id__$7,
-    __vue_is_functional_template__$7,
-    __vue_module_identifier__$7,
-    false,
-    createInjector,
+  const __vue_component__$9 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
+    __vue_inject_styles__$9,
+    __vue_script__$9,
+    __vue_scope_id__$9,
+    __vue_is_functional_template__$9,
+    __vue_module_identifier__$9,
+    false,
+    createInjector,
     undefined,
     undefined
   );
@@ -5019,23 +5023,23 @@ let TekImage = class TekImage extends ZdComponent {
     }
 };
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekImage.prototype, "to", void 0);
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekImage.prototype, "src", void 0);
 TekImage = __decorate([
     Component
 ], TekImage);
-var script$6 = TekImage;
+var script$8 = TekImage;
 
 /* script */
-const __vue_script__$6 = script$6;
+const __vue_script__$8 = script$8;
 
 /* template */
-var __vue_render__$6 = function () {
+var __vue_render__$8 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -5046,17 +5050,17 @@ var __vue_render__$6 = function () {
     1
   )
 };
-var __vue_staticRenderFns__$6 = [];
-__vue_render__$6._withStripped = true;
+var __vue_staticRenderFns__$8 = [];
+__vue_render__$8._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$6 = undefined;
+  const __vue_inject_styles__$8 = undefined;
   /* scoped */
-  const __vue_scope_id__$6 = undefined;
+  const __vue_scope_id__$8 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$6 = undefined;
+  const __vue_module_identifier__$8 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$6 = false;
+  const __vue_is_functional_template__$8 = false;
   /* style inject */
   
   /* style inject SSR */
@@ -5065,13 +5069,13 @@ __vue_render__$6._withStripped = true;
   
 
   
-  const __vue_component__$6 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
-    __vue_inject_styles__$6,
-    __vue_script__$6,
-    __vue_scope_id__$6,
-    __vue_is_functional_template__$6,
-    __vue_module_identifier__$6,
+  const __vue_component__$8 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
+    __vue_inject_styles__$8,
+    __vue_script__$8,
+    __vue_scope_id__$8,
+    __vue_is_functional_template__$8,
+    __vue_module_identifier__$8,
     false,
     undefined,
     undefined,
@@ -5096,13 +5100,13 @@ __decorate([
 TekIterableCarousel = __decorate([
     Component
 ], TekIterableCarousel);
-var script$5 = TekIterableCarousel;
+var script$7 = TekIterableCarousel;
 
 /* script */
-const __vue_script__$5 = script$5;
+const __vue_script__$7 = script$7;
 
 /* template */
-var __vue_render__$5 = function () {
+var __vue_render__$7 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -5176,17 +5180,17 @@ var __vue_render__$5 = function () {
     1
   )
 };
-var __vue_staticRenderFns__$5 = [];
-__vue_render__$5._withStripped = true;
+var __vue_staticRenderFns__$7 = [];
+__vue_render__$7._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$5 = undefined;
+  const __vue_inject_styles__$7 = undefined;
   /* scoped */
-  const __vue_scope_id__$5 = undefined;
+  const __vue_scope_id__$7 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$5 = undefined;
+  const __vue_module_identifier__$7 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$5 = false;
+  const __vue_is_functional_template__$7 = false;
   /* style inject */
   
   /* style inject SSR */
@@ -5195,13 +5199,13 @@ __vue_render__$5._withStripped = true;
   
 
   
-  const __vue_component__$5 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
-    __vue_inject_styles__$5,
-    __vue_script__$5,
-    __vue_scope_id__$5,
-    __vue_is_functional_template__$5,
-    __vue_module_identifier__$5,
+  const __vue_component__$7 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
+    __vue_inject_styles__$7,
+    __vue_script__$7,
+    __vue_scope_id__$7,
+    __vue_is_functional_template__$7,
+    __vue_module_identifier__$7,
     false,
     undefined,
     undefined,
@@ -5230,7 +5234,7 @@ __decorate([
     __metadata("design:type", Object)
 ], TekIterableComponentRender.prototype, "componentMetadata", void 0);
 __decorate([
-    Prop({ type: String, default: 'row' }),
+    PropWatch({ type: String, default: 'row' }),
     __metadata("design:type", String)
 ], TekIterableComponentRender.prototype, "rowPropName", void 0);
 __decorate([
@@ -5266,27 +5270,27 @@ __decorate([
     __metadata("design:type", Array)
 ], TekIterableComponentRender.prototype, "noResultSlot", void 0);
 __decorate([
-    Prop({ type: [Number, String], default: 'auto' }),
+    PropWatch({ type: [Number, String], default: 'auto' }),
     __metadata("design:type", Object)
 ], TekIterableComponentRender.prototype, "height", void 0);
 __decorate([
-    Prop({ type: [Number, String], default: 'none' }),
+    PropWatch({ type: [Number, String], default: 'none' }),
     __metadata("design:type", Object)
 ], TekIterableComponentRender.prototype, "maxHeight", void 0);
 __decorate([
-    Prop({ type: [Number, String], default: 'none' }),
+    PropWatch({ type: [Number, String], default: 'none' }),
     __metadata("design:type", Object)
 ], TekIterableComponentRender.prototype, "minHeight", void 0);
 TekIterableComponentRender = __decorate([
     Component
 ], TekIterableComponentRender);
-var script$4 = TekIterableComponentRender;
+var script$6 = TekIterableComponentRender;
 
 /* script */
-const __vue_script__$4 = script$4;
+const __vue_script__$6 = script$6;
 
 /* template */
-var __vue_render__$4 = function () {
+var __vue_render__$6 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -5295,11 +5299,15 @@ var __vue_render__$4 = function () {
         "div",
         {
           class: ["tek-iterable-component-render", _vm.instance.cssClass],
-          style: Object.assign({}, _vm.instance.cssStyle, {
-            height: _vm.$formatSize(_vm.instance.height),
-            minHeight: _vm.$formatSize(_vm.instance.minHeight),
-            maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
-          }),
+          style: Object.assign(
+            {},
+            {
+              height: _vm.$formatSize(_vm.instance.height),
+              minHeight: _vm.$formatSize(_vm.instance.minHeight),
+              maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+            },
+            _vm.$styleObject(_vm.instance.cssStyle)
+          ),
           attrs: { id: _vm.instance.name },
         },
         [
@@ -5470,34 +5478,34 @@ var __vue_render__$4 = function () {
       )
     : _vm._e()
 };
-var __vue_staticRenderFns__$4 = [];
-__vue_render__$4._withStripped = true;
+var __vue_staticRenderFns__$6 = [];
+__vue_render__$6._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$4 = function (inject) {
+  const __vue_inject_styles__$6 = function (inject) {
     if (!inject) return
-    inject("data-v-1447399a_0", { source: ".tek-iterable-component-render[data-v-1447399a] {\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-1447399a],\n.tek-iterable-component-render .no--data[data-v-1447399a] {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n}\n.tek-iterable-component-render .no--data[data-v-1447399a] {\n  color: rgba(0, 0, 0, 0.38);\n}\n.tek-iterable-component-render .tek-iterable-toolbar[data-v-1447399a] {\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-1447399a] {\n  padding: 5px 0;\n  display: flex;\n  width: 100%;\n}", map: undefined, media: undefined });
+    inject("data-v-4336f203_0", { source: ".tek-iterable-component-render[data-v-4336f203] {\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-4336f203],\n.tek-iterable-component-render .no--data[data-v-4336f203] {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n}\n.tek-iterable-component-render .no--data[data-v-4336f203] {\n  color: rgba(0, 0, 0, 0.38);\n}\n.tek-iterable-component-render .tek-iterable-toolbar[data-v-4336f203] {\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-4336f203] {\n  padding: 5px 0;\n  display: flex;\n  width: 100%;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$4 = "data-v-1447399a";
+  const __vue_scope_id__$6 = "data-v-4336f203";
   /* module identifier */
-  const __vue_module_identifier__$4 = undefined;
+  const __vue_module_identifier__$6 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$4 = false;
+  const __vue_is_functional_template__$6 = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$4 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
-    __vue_inject_styles__$4,
-    __vue_script__$4,
-    __vue_scope_id__$4,
-    __vue_is_functional_template__$4,
-    __vue_module_identifier__$4,
+  const __vue_component__$6 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
+    __vue_inject_styles__$6,
+    __vue_script__$6,
+    __vue_scope_id__$6,
+    __vue_is_functional_template__$6,
+    __vue_module_identifier__$6,
     false,
     createInjector,
     undefined,
@@ -5513,27 +5521,27 @@ let TekLoading = class TekLoading extends ZdLoading {
     }
 };
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekLoading.prototype, "text", void 0);
 __decorate([
-    Prop({ type: String, default: loading }),
+    PropWatch({ type: String, default: loading }),
     __metadata("design:type", String)
 ], TekLoading.prototype, "image", void 0);
 __decorate([
-    Prop({ type: [Number, String], default: 999 }),
+    PropWatch({ type: [Number, String], default: 999 }),
     __metadata("design:type", Object)
 ], TekLoading.prototype, "zdIndex", void 0);
 TekLoading = __decorate([
     Component
 ], TekLoading);
-var script$3 = TekLoading;
+var script$5 = TekLoading;
 
 /* script */
-const __vue_script__$3 = script$3;
+const __vue_script__$5 = script$5;
 
 /* template */
-var __vue_render__$3 = function () {
+var __vue_render__$5 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -5557,17 +5565,17 @@ var __vue_render__$3 = function () {
     )
   )
 };
-var __vue_staticRenderFns__$3 = [];
-__vue_render__$3._withStripped = true;
+var __vue_staticRenderFns__$5 = [];
+__vue_render__$5._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$3 = undefined;
+  const __vue_inject_styles__$5 = undefined;
   /* scoped */
-  const __vue_scope_id__$3 = undefined;
+  const __vue_scope_id__$5 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$3 = undefined;
+  const __vue_module_identifier__$5 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$3 = false;
+  const __vue_is_functional_template__$5 = false;
   /* style inject */
   
   /* style inject SSR */
@@ -5576,13 +5584,13 @@ __vue_render__$3._withStripped = true;
   
 
   
-  const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
-    __vue_inject_styles__$3,
-    __vue_script__$3,
-    __vue_scope_id__$3,
-    __vue_is_functional_template__$3,
-    __vue_module_identifier__$3,
+  const __vue_component__$5 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
+    __vue_inject_styles__$5,
+    __vue_script__$5,
+    __vue_scope_id__$5,
+    __vue_is_functional_template__$5,
+    __vue_module_identifier__$5,
     false,
     undefined,
     undefined,
@@ -5605,19 +5613,19 @@ let TekNotifications = class TekNotifications extends ZdIterable {
     }
 };
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekNotifications.prototype, "allNotificationsPath", void 0);
 TekNotifications = __decorate([
     Component
 ], TekNotifications);
-var script$2 = TekNotifications;
+var script$4 = TekNotifications;
 
 /* script */
-const __vue_script__$2 = script$2;
+const __vue_script__$4 = script$4;
 
 /* template */
-var __vue_render__$2 = function () {
+var __vue_render__$4 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -5694,34 +5702,34 @@ var __vue_render__$2 = function () {
     1
   )
 };
-var __vue_staticRenderFns__$2 = [];
-__vue_render__$2._withStripped = true;
+var __vue_staticRenderFns__$4 = [];
+__vue_render__$4._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$2 = function (inject) {
+  const __vue_inject_styles__$4 = function (inject) {
     if (!inject) return
     inject("data-v-30efacc6_0", { source: ".tek-notifications .tek-card-title .mark-read-text {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  display: inline-block;\n}\n.tek-notifications .tek-card-title .mark-read-text p {\n  margin-bottom: 0px;\n}\n.tek-notifications .tek-card-title hr.v-divider {\n  margin-bottom: 0px;\n}\n.tek-notifications ul.tek-notifications-list {\n  list-style: none;\n  padding: 0;\n}\n.tek-notifications ul.tek-notifications-list li {\n  border-bottom: solid 1px rgba(0, 0, 0, 0.12);\n  color: #667080;\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  line-height: 14px;\n  padding: 10px 20px 10px 0;\n  position: relative;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-subject {\n  font-weight: 700;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-read-mark {\n  width: 10px;\n  height: 10px;\n  background-color: var(--v-primary-base);\n  border-radius: 50%;\n  position: absolute;\n  right: 2px;\n  top: 12px;\n}\n.tek-notifications ul.tek-notifications-list li:last-child {\n  border-bottom: none;\n}\n.tek-notifications .tek-notification-show-all {\n  text-decoration: none;\n  text-align: center;\n  padding-top: 10px;\n  font-weight: 700;\n  display: block;\n  border-top: solid 1px rgba(0, 0, 0, 0.12);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$2 = undefined;
+  const __vue_scope_id__$4 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$2 = undefined;
+  const __vue_module_identifier__$4 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$2 = false;
+  const __vue_is_functional_template__$4 = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
-    __vue_inject_styles__$2,
-    __vue_script__$2,
-    __vue_scope_id__$2,
-    __vue_is_functional_template__$2,
-    __vue_module_identifier__$2,
+  const __vue_component__$4 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
+    __vue_inject_styles__$4,
+    __vue_script__$4,
+    __vue_scope_id__$4,
+    __vue_is_functional_template__$4,
+    __vue_module_identifier__$4,
     false,
     createInjector,
     undefined,
@@ -5745,67 +5753,67 @@ let TekProductCard = class TekProductCard extends ZdComponentRender {
     }
 };
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekProductCard.prototype, "id", void 0);
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekProductCard.prototype, "to", void 0);
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekProductCard.prototype, "src", void 0);
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekProductCard.prototype, "errorImagePath", void 0);
 __decorate([
-    Prop({ type: String, default: 'UNAVAILABLE_IMAGE' }),
+    PropWatch({ type: String, default: 'UNAVAILABLE_IMAGE' }),
     __metadata("design:type", String)
 ], TekProductCard.prototype, "errorImageText", void 0);
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekProductCard.prototype, "productName", void 0);
 __decorate([
-    Prop({ type: String }),
+    PropWatch({ type: String }),
     __metadata("design:type", String)
 ], TekProductCard.prototype, "productSupplier", void 0);
 __decorate([
-    Prop({ type: String }),
+    PropWatch({ type: String }),
     __metadata("design:type", String)
 ], TekProductCard.prototype, "productBrand", void 0);
 __decorate([
-    Prop({ type: [String, Number] }),
+    PropWatch({ type: [String, Number] }),
     __metadata("design:type", Object)
 ], TekProductCard.prototype, "productPrice", void 0);
 __decorate([
-    Prop({ type: String, default: '' }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], TekProductCard.prototype, "width", void 0);
 __decorate([
-    Prop({ type: [Number, String], default: 'auto' }),
+    PropWatch({ type: [Number, String], default: 'auto' }),
     __metadata("design:type", Object)
 ], TekProductCard.prototype, "height", void 0);
 __decorate([
-    Prop({ type: [Number, String], default: 'none' }),
+    PropWatch({ type: [Number, String], default: 'none' }),
     __metadata("design:type", Object)
 ], TekProductCard.prototype, "maxHeight", void 0);
 __decorate([
-    Prop({ type: [Number, String], default: 'none' }),
+    PropWatch({ type: [Number, String], default: 'none' }),
     __metadata("design:type", Object)
 ], TekProductCard.prototype, "minHeight", void 0);
 TekProductCard = __decorate([
     Component
 ], TekProductCard);
-var script$1 = TekProductCard;
+var script$3 = TekProductCard;
 
 /* script */
-const __vue_script__$1 = script$1;
+const __vue_script__$3 = script$3;
 
 /* template */
-var __vue_render__$1 = function () {
+var __vue_render__$3 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -5824,12 +5832,16 @@ var __vue_render__$1 = function () {
             { "theme--light": !_vm.$vuetify.theme.dark || _vm.instance.light },
             _vm.instance.cssClass,
           ],
-          style: Object.assign({}, _vm.instance.cssStyle, {
-            width: _vm.instance.width,
-            height: _vm.$formatSize(_vm.instance.height),
-            minHeight: _vm.$formatSize(_vm.instance.minHeight),
-            maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
-          }),
+          style: Object.assign(
+            {},
+            {
+              width: _vm.instance.width,
+              height: _vm.$formatSize(_vm.instance.height),
+              minHeight: _vm.$formatSize(_vm.instance.minHeight),
+              maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+            },
+            _vm.$styleObject(_vm.instance.cssStyle)
+          ),
           attrs: { id: _vm.instance.name },
           on: {
             click: function ($event) {
@@ -5939,34 +5951,34 @@ var __vue_render__$1 = function () {
       )
     : _vm._e()
 };
-var __vue_staticRenderFns__$1 = [];
-__vue_render__$1._withStripped = true;
+var __vue_staticRenderFns__$3 = [];
+__vue_render__$3._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$1 = function (inject) {
+  const __vue_inject_styles__$3 = function (inject) {
     if (!inject) return
-    inject("data-v-3dd89d23_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-0ad251e8_0", { source: ".tek-product-card * {\n  text-decoration: none;\n}\n.tek-product-card .v-card {\n  padding: 0%;\n}\n.tek-product-card .v-card .tek-image-content {\n  text-align: center;\n}\n.tek-product-card .v-card .tek-product-card-image-container {\n  position: relative;\n}\n.tek-product-card .v-card .tek-product-card-info {\n  display: flex;\n  flex-direction: column;\n  padding: 5px 10px 10px 10px;\n  color: var(--zd-font-color);\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-title {\n  white-space: nowrap;\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 16px;\n  line-height: 19px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-supplier {\n  font-size: var(--zd-font-body2-size);\n  line-height: 14px;\n  color: #c4c4c4;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 10px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-brand {\n  font-size: var(--zd-font-body2-size);\n  line-height: 14px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-price {\n  font-weight: var(--zd-font-body4-weight);\n  font-size: var(--zd-font-body4-size);\n  line-height: 16px;\n}\n.tek-product-card--link .v-card {\n  cursor: pointer;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$1 = undefined;
+  const __vue_scope_id__$3 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$1 = undefined;
+  const __vue_module_identifier__$3 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$1 = false;
+  const __vue_is_functional_template__$3 = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
-    __vue_inject_styles__$1,
-    __vue_script__$1,
-    __vue_scope_id__$1,
-    __vue_is_functional_template__$1,
-    __vue_module_identifier__$1,
+  const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
+    __vue_inject_styles__$3,
+    __vue_script__$3,
+    __vue_scope_id__$3,
+    __vue_is_functional_template__$3,
+    __vue_module_identifier__$3,
     false,
     createInjector,
     undefined,
@@ -6287,19 +6299,19 @@ let TekGrid = class TekGrid extends ZdTreeGridEditable {
     }
 };
 __decorate([
-    Prop({ type: [String], default: '' }),
+    PropWatch({ type: [String], default: '' }),
     __metadata("design:type", String)
 ], TekGrid.prototype, "title", void 0);
 __decorate([
-    Prop({ type: [Boolean, String], default: false }),
+    PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
 ], TekGrid.prototype, "addButton", void 0);
 __decorate([
-    Prop({ type: [String], default: 'none' }),
+    PropWatch({ type: [String], default: 'none' }),
     __metadata("design:type", String)
 ], TekGrid.prototype, "deleteButton", void 0);
 __decorate([
-    Prop({ type: [Boolean, String], default: false }),
+    PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
 ], TekGrid.prototype, "columnsButton", void 0);
 __decorate([
@@ -6307,15 +6319,15 @@ __decorate([
     __metadata("design:type", Object)
 ], TekGrid.prototype, "columnsButtonIgnore", void 0);
 __decorate([
-    Prop({ type: [Boolean, String], default: false }),
+    PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
 ], TekGrid.prototype, "filterButton", void 0);
 __decorate([
-    Prop({ type: [Boolean, String], default: true }),
+    PropWatch({ type: [Boolean, String], default: true }),
     __metadata("design:type", Object)
 ], TekGrid.prototype, "showSearch", void 0);
 __decorate([
-    Prop({ type: [Boolean, String], default: false }),
+    PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
 ], TekGrid.prototype, "columnFilterButton", void 0);
 __decorate([
@@ -6323,23 +6335,23 @@ __decorate([
     __metadata("design:type", Array)
 ], TekGrid.prototype, "actions", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekGrid.prototype, "dragColumns", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekGrid.prototype, "resizeColumns", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekGrid.prototype, "showLayoutOptions", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: false }),
+    PropWatch({ type: [String, Boolean], default: false }),
     __metadata("design:type", Object)
 ], TekGrid.prototype, "showExport", void 0);
 __decorate([
-    Prop({ type: [String, Boolean], default: true }),
+    PropWatch({ type: [String, Boolean], default: true }),
     __metadata("design:type", Object)
 ], TekGrid.prototype, "showReload", void 0);
 __decorate([
@@ -6360,13 +6372,13 @@ __decorate([
 TekGrid = __decorate([
     Component
 ], TekGrid);
-var script = TekGrid;
+var script$2 = TekGrid;
 
 /* script */
-const __vue_script__ = script;
+const __vue_script__$2 = script$2;
 
 /* template */
-var __vue_render__ = function () {
+var __vue_render__$2 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -6389,7 +6401,7 @@ var __vue_render__ = function () {
       { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
       { "zd-grid-loading": _vm.instance.datasource.loading },
     ],
-    style: [_vm.cssColorVars, _vm.instance.cssStyle],
+    style: [_vm.cssColorVars, _vm.$styleObject(_vm.instance.cssStyle)],
     attrs: {
       id: _vm.instance.name,
       "fixed-header": "",
@@ -6409,6 +6421,9 @@ var __vue_render__ = function () {
       "disable-sort": "",
       "disable-filtering": "",
       tabindex: "0",
+      "loading-text": _vm.$t(_vm.instance.loadingText),
+      "no-data-text": _vm.$t(_vm.instance.noDataText),
+      "no-results-text": _vm.$t(_vm.instance.noResultText),
     },
     on: {
       "current-items": function ($event) {
@@ -7670,21 +7685,205 @@ var __vue_render__ = function () {
     },
   })
 };
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+var __vue_staticRenderFns__$2 = [];
+__vue_render__$2._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$2 = function (inject) {
+    if (!inject) return
+    inject("data-v-dd43cdf2_0", { source: ".tek-grid .zd-grid-toolbar {\n  height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n  align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n  margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n  line-height: 22px;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th {\n  padding-right: 15px !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n  background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n  background: #3c3c3c !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n  font-weight: 700;\n  font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n  font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n  font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n  transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n  position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n  background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n  background: #3c3c3c !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n  width: 22px;\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n  width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 14px;\n  height: 100%;\n  border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n  width: 10px;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n  height: 60%;\n  border-bottom: solid 1px #ccc;\n  position: relative;\n  top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$2 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$2 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$2 = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
+    __vue_inject_styles__$2,
+    __vue_script__$2,
+    __vue_scope_id__$2,
+    __vue_is_functional_template__$2,
+    __vue_module_identifier__$2,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
+let TekUserInfo = class TekUserInfo extends ZdUserInfo {
+    constructor() {
+        super(...arguments);
+        this.instanceType = TekUserInfo$1;
+    }
+};
+__decorate([
+    PropWatch({ type: [String], default: '' }),
+    __metadata("design:type", String)
+], TekUserInfo.prototype, "aboutImage", void 0);
+__decorate([
+    PropWatch({ type: [String], default: '' }),
+    __metadata("design:type", String)
+], TekUserInfo.prototype, "defaultEmail", void 0);
+__decorate([
+    PropWatch({ type: [Object, String], default: null }),
+    __metadata("design:type", Object)
+], TekUserInfo.prototype, "versionInfo", void 0);
+__decorate([
+    PropWatch({ type: [String], default: '' }),
+    __metadata("design:type", String)
+], TekUserInfo.prototype, "versionUrl", void 0);
+__decorate([
+    Prop({ type: [Array], default: undefined }),
+    __metadata("design:type", Object)
+], TekUserInfo.prototype, "bottomSlot", void 0);
+TekUserInfo = __decorate([
+    Component
+], TekUserInfo);
+var script$1 = TekUserInfo;
+
+/* script */
+const __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("zd-user-info", {
+    attrs: {
+      id: _vm.instance.name,
+      "instance-object": _vm.instance,
+      name: "user-info",
+    },
+    scopedSlots: _vm._u(
+      [
+        {
+          key: "headerSlot",
+          fn: function () {
+            return [_vm._t("headerSlot")]
+          },
+          proxy: true,
+        },
+        {
+          key: "topSlot",
+          fn: function () {
+            return [_vm._t("topSlot")]
+          },
+          proxy: true,
+        },
+        {
+          key: "centerSlot",
+          fn: function () {
+            return [_vm._t("centerSlot")]
+          },
+          proxy: true,
+        },
+        {
+          key: "bottomSlot",
+          fn: function () {
+            return [_vm._t("bottomSlot")]
+          },
+          proxy: true,
+        },
+      ],
+      null,
+      true
+    ),
+  })
+};
+var __vue_staticRenderFns__$1 = [];
+__vue_render__$1._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = function (inject) {
+  const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-3ef85802_0", { source: ".tek-grid .zd-grid-toolbar {\n  height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n  align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n  margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n  line-height: 22px;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th {\n  padding-right: 15px !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n  background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n  background: #3c3c3c !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n  display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n  cursor: pointer;\n  font-size: 15px;\n  width: 15px;\n  padding: 0 3px;\n  opacity: 0;\n  color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n  opacity: 1;\n  color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n  opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n  background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n  background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n  font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n  background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n  font-weight: 700;\n  font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n  font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n  font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n  transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n  position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n  background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n  background: #3c3c3c !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n  width: 22px;\n  display: inline-block;\n  vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n  width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n  width: 8px;\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 14px;\n  height: 100%;\n  border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n  width: 10px;\n  margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n  height: 60%;\n  border-bottom: solid 1px #ccc;\n  position: relative;\n  top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n  border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.tekgrid-actions-dropdown > * {\n  display: block;\n}\n.tek-grid-column-filter-menu {\n  padding: 12px 12px 0 12px;\n  max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n  background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n  background: #1e1e1e;\n}\n.filter-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.filter-helper-values-option {\n  cursor: pointer;\n}\n.filter-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
+    inject("data-v-d9bc3516_0", { source: ".about-modal {\n  height: 80%;\n  overflow-y: unset;\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-container {\n  display: flex;\n  flex-direction: column;\n}\n.about-modal .zd-tabs, .about-modal .v-tabs-items {\n  overflow-y: auto;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
+  const __vue_scope_id__$1 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$1 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$1 = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+    __vue_inject_styles__$1,
+    __vue_script__$1,
+    __vue_scope_id__$1,
+    __vue_is_functional_template__$1,
+    __vue_module_identifier__$1,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
+// eslint-disable-next-line prefer-destructuring
+const ZdList = components$1.ZdList;
+let TekUserInfoList = class TekUserInfoList extends ZdList {
+    constructor() {
+        super(...arguments);
+        this.instanceType = TekUserInfoList$1;
+    }
+};
+__decorate([
+    PropWatch({ type: [String], default: '' }),
+    __metadata("design:type", String)
+], TekUserInfoList.prototype, "parentName", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: true }),
+    __metadata("design:type", Boolean)
+], TekUserInfoList.prototype, "dense", void 0);
+TekUserInfoList = __decorate([
+    Component
+], TekUserInfoList);
+var script = TekUserInfoList;
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("zd-list", {
+    attrs: {
+      id: _vm.instance.name,
+      "instance-object": _vm.instance,
+      name: "list",
+    },
+  })
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
   const __vue_scope_id__ = undefined;
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -7699,29 +7898,31 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    createInjector,
+    undefined,
     undefined,
     undefined
   );
 
 const components = {
-    TekBreadcrumbHeader: __vue_component__$g,
-    TekCardTitle: __vue_component__$f,
-    TekCrudAddButton: __vue_component__$e,
-    TekCrudCancelButton: __vue_component__$d,
-    TekCrudDeleteButton: __vue_component__$c,
-    TekCrudForm: __vue_component__$b,
-    TekCrudSaveButton: __vue_component__$a,
-    TekGrid: __vue_component__$9,
-    TekGridColumnsButton: __vue_component__$8,
-    TekGridLayoutOptions: __vue_component__$7,
-    TekImage: __vue_component__$6,
-    TekProductCard: __vue_component__$1,
-    TekIterableComponentRender: __vue_component__$4,
-    TekIterableCarousel: __vue_component__$5,
-    TekLoading: __vue_component__$3,
-    TekNotifications: __vue_component__$2,
-    TekTreeGrid: __vue_component__,
+    TekBreadcrumbHeader: __vue_component__$i,
+    TekCardTitle: __vue_component__$h,
+    TekCrudAddButton: __vue_component__$g,
+    TekCrudCancelButton: __vue_component__$f,
+    TekCrudDeleteButton: __vue_component__$e,
+    TekCrudForm: __vue_component__$d,
+    TekCrudSaveButton: __vue_component__$c,
+    TekGrid: __vue_component__$b,
+    TekGridColumnsButton: __vue_component__$a,
+    TekGridLayoutOptions: __vue_component__$9,
+    TekImage: __vue_component__$8,
+    TekProductCard: __vue_component__$3,
+    TekIterableComponentRender: __vue_component__$6,
+    TekIterableCarousel: __vue_component__$7,
+    TekLoading: __vue_component__$5,
+    TekNotifications: __vue_component__$4,
+    TekTreeGrid: __vue_component__$2,
+    TekUserInfo: __vue_component__$1,
+    TekUserInfoList: __vue_component__,
 };
 
 Icons.addIcons({
@@ -7739,7 +7940,8 @@ const TeknisaComponents = {
         Object.keys(components).forEach((id) => {
             Vue.component(id, components[id]);
         });
+        Vue.component('ZdUserInfo', ZdUserInfo);
     },
 };
 
-export { script$g as TekBreadcrumbHeader, script$f as TekCardTitle, script$e as TekCrudAddButton, script$d as TekCrudCancelButton, script$c as TekCrudDeleteButton, script$b as TekCrudForm, script$a as TekCrudSaveButton, script$9 as TekGrid, script$8 as TekGridColumnsButton, script$7 as TekGridLayoutOptions, script$6 as TekImage, script$4 as TekIterableComponentRender, script$1 as TekProductCard, script as TekTreeGrid, TeknisaComponents as default };
+export { script$i as TekBreadcrumbHeader, script$h as TekCardTitle, script$g as TekCrudAddButton, script$f as TekCrudCancelButton, script$e as TekCrudDeleteButton, script$d as TekCrudForm, script$c as TekCrudSaveButton, script$b as TekGrid, script$a as TekGridColumnsButton, script$9 as TekGridLayoutOptions, script$8 as TekImage, script$6 as TekIterableComponentRender, script$3 as TekProductCard, script$2 as TekTreeGrid, script$1 as TekUserInfo, script as TekUserInfoList, TeknisaComponents as default };