@zeedhi/teknisa-components-vuetify 1.46.0 → 1.52.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/common'), require('vue-property-decorator'), require('@zeedhi/teknisa-components-common'), require('@zeedhi/vuetify'), require('@zeedhi/core'), require('lodash.debounce'), require('sortablejs'), require('lodash.clonedeep')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/common', 'vue-property-decorator', '@zeedhi/teknisa-components-common', '@zeedhi/vuetify', '@zeedhi/core', 'lodash.debounce', 'sortablejs', 'lodash.clonedeep'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/teknisa-components-vuetify"] = {}, global.common, global["vue-property-decorator"], global["@zeedhi/teknisa-components-common"], global.vuetify, global.core, global.lodash.debounce, global.sortablejs, global.lodash.clonedeep));
-})(this, (function (exports, common, vuePropertyDecorator, teknisaComponentsCommon, vuetify, core, debounce, Sortable, cloneDeep) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/common'), require('@zeedhi/zd-user-info-vue'), require('vue-property-decorator'), require('@zeedhi/teknisa-components-common'), require('@zeedhi/vuetify'), require('@zeedhi/core'), require('lodash.debounce'), require('sortablejs'), require('lodash.clonedeep')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/common', '@zeedhi/zd-user-info-vue', 'vue-property-decorator', '@zeedhi/teknisa-components-common', '@zeedhi/vuetify', '@zeedhi/core', 'lodash.debounce', 'sortablejs', 'lodash.clonedeep'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/teknisa-components-vuetify"] = {}, global.common, global["@zeedhi/zd-user-info-vue"], global["vue-property-decorator"], global["@zeedhi/teknisa-components-common"], global.vuetify, global.core, global.lodash.debounce, global.sortablejs, global.lodash.clonedeep));
+})(this, (function (exports, common, zdUserInfoVue, vuePropertyDecorator, teknisaComponentsCommon, vuetify, core, debounce, Sortable, cloneDeep) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -60,7 +60,7 @@
     TekBreadcrumbHeader = __decorate([
         vuePropertyDecorator.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') {
@@ -191,10 +191,10 @@
     }
 
     /* 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;
@@ -265,34 +265,34 @@
         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,
@@ -335,13 +335,13 @@
     TekCardTitle = __decorate([
         vuePropertyDecorator.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;
@@ -441,34 +441,34 @@
         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,
@@ -541,13 +541,13 @@
     TekCrudAddButton = __decorate([
         vuePropertyDecorator.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;
@@ -612,17 +612,17 @@
         ]
       )
     };
-    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 */
@@ -631,13 +631,13 @@
       
 
       
-      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,
@@ -668,13 +668,13 @@
     TekCrudCancelButton = __decorate([
         vuePropertyDecorator.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;
@@ -739,17 +739,17 @@
         ]
       )
     };
-    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 */
@@ -758,13 +758,13 @@
       
 
       
-      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,
@@ -803,13 +803,13 @@
     TekCrudDeleteButton = __decorate([
         vuePropertyDecorator.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;
@@ -874,17 +874,17 @@
         ]
       )
     };
-    var __vue_staticRenderFns__$c = [];
-    __vue_render__$c._withStripped = true;
+    var __vue_staticRenderFns__$e = [];
+    __vue_render__$e._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$c = undefined;
+      const __vue_inject_styles__$e = undefined;
       /* scoped */
-      const __vue_scope_id__$c = undefined;
+      const __vue_scope_id__$e = undefined;
       /* module identifier */
-      const __vue_module_identifier__$c = undefined;
+      const __vue_module_identifier__$e = undefined;
       /* functional template */
-      const __vue_is_functional_template__$c = false;
+      const __vue_is_functional_template__$e = false;
       /* style inject */
       
       /* style inject SSR */
@@ -893,13 +893,13 @@
       
 
       
-      const __vue_component__$c = /*#__PURE__*/normalizeComponent(
-        { render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
-        __vue_inject_styles__$c,
-        __vue_script__$c,
-        __vue_scope_id__$c,
-        __vue_is_functional_template__$c,
-        __vue_module_identifier__$c,
+      const __vue_component__$e = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
+        __vue_inject_styles__$e,
+        __vue_script__$e,
+        __vue_scope_id__$e,
+        __vue_is_functional_template__$e,
+        __vue_module_identifier__$e,
         false,
         undefined,
         undefined,
@@ -918,13 +918,13 @@
     TekCrudForm = __decorate([
         vuePropertyDecorator.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;
@@ -998,34 +998,34 @@
         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,
@@ -1052,13 +1052,13 @@
     TekCrudSaveButton = __decorate([
         vuePropertyDecorator.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;
@@ -1123,17 +1123,17 @@
         ]
       )
     };
-    var __vue_staticRenderFns__$a = [];
-    __vue_render__$a._withStripped = true;
+    var __vue_staticRenderFns__$c = [];
+    __vue_render__$c._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__$a = undefined;
+      const __vue_inject_styles__$c = undefined;
       /* scoped */
-      const __vue_scope_id__$a = undefined;
+      const __vue_scope_id__$c = undefined;
       /* module identifier */
-      const __vue_module_identifier__$a = undefined;
+      const __vue_module_identifier__$c = undefined;
       /* functional template */
-      const __vue_is_functional_template__$a = false;
+      const __vue_is_functional_template__$c = false;
       /* style inject */
       
       /* style inject SSR */
@@ -1142,13 +1142,13 @@
       
 
       
-      const __vue_component__$a = /*#__PURE__*/normalizeComponent(
-        { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
-        __vue_inject_styles__$a,
-        __vue_script__$a,
-        __vue_scope_id__$a,
-        __vue_is_functional_template__$a,
-        __vue_module_identifier__$a,
+      const __vue_component__$c = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
+        __vue_inject_styles__$c,
+        __vue_script__$c,
+        __vue_scope_id__$c,
+        __vue_is_functional_template__$c,
+        __vue_module_identifier__$c,
         false,
         undefined,
         undefined,
@@ -1631,13 +1631,13 @@
     TekGrid$1 = __decorate([
         vuePropertyDecorator.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;
@@ -1658,7 +1658,7 @@
           { "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": "",
@@ -3219,34 +3219,34 @@
         },
       })
     };
-    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-ecdd6462_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,
@@ -4215,13 +4215,13 @@
     TekGridColumnsButton = __decorate([
         vuePropertyDecorator.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;
@@ -4483,34 +4483,34 @@
         ]
       )
     };
-    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-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,
@@ -4713,13 +4713,13 @@
     TekGridLayoutOptions = __decorate([
         vuePropertyDecorator.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;
@@ -4981,37 +4981,37 @@
         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,
-        undefined,
+      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
       );
 
@@ -5035,13 +5035,13 @@
     TekImage = __decorate([
         vuePropertyDecorator.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;
@@ -5052,17 +5052,17 @@
         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 */
@@ -5071,13 +5071,13 @@
       
 
       
-      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,
@@ -5102,13 +5102,13 @@
     TekIterableCarousel = __decorate([
         vuePropertyDecorator.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;
@@ -5182,17 +5182,17 @@
         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 */
@@ -5201,13 +5201,13 @@
       
 
       
-      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,
@@ -5286,13 +5286,13 @@
     TekIterableComponentRender = __decorate([
         vuePropertyDecorator.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;
@@ -5301,11 +5301,15 @@
             "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 },
             },
             [
@@ -5476,34 +5480,34 @@
           )
         : _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,
@@ -5533,13 +5537,13 @@
     TekLoading = __decorate([
         vuePropertyDecorator.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;
@@ -5563,17 +5567,17 @@
         )
       )
     };
-    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 */
@@ -5582,13 +5586,13 @@
       
 
       
-      const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
-        { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
-        __vue_inject_styles__$3,
-        __vue_script__$3,
-        __vue_scope_id__$3,
-        __vue_is_functional_template__$3,
-        __vue_module_identifier__$3,
+      const __vue_component__$5 = /*#__PURE__*/normalizeComponent(
+        { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
+        __vue_inject_styles__$5,
+        __vue_script__$5,
+        __vue_scope_id__$5,
+        __vue_is_functional_template__$5,
+        __vue_module_identifier__$5,
         false,
         undefined,
         undefined,
@@ -5617,13 +5621,13 @@
     TekNotifications = __decorate([
         vuePropertyDecorator.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;
@@ -5700,34 +5704,34 @@
         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,
@@ -5805,13 +5809,13 @@
     TekProductCard = __decorate([
         vuePropertyDecorator.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;
@@ -5830,12 +5834,16 @@
                 { "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) {
@@ -5945,34 +5953,34 @@
           )
         : _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,
@@ -6366,13 +6374,13 @@
     TekGrid = __decorate([
         vuePropertyDecorator.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;
@@ -6395,7 +6403,7 @@
           { "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": "",
@@ -7679,21 +7687,205 @@
         },
       })
     };
-    var __vue_staticRenderFns__ = [];
-    __vue_render__._withStripped = true;
+    var __vue_staticRenderFns__$2 = [];
+    __vue_render__$2._withStripped = true;
 
       /* style */
-      const __vue_inject_styles__ = function (inject) {
+      const __vue_inject_styles__$2 = function (inject) {
         if (!inject) return
-        inject("data-v-0e6a2a50_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-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 zdUserInfoVue.ZdUserInfo {
+        constructor() {
+            super(...arguments);
+            this.instanceType = teknisaComponentsCommon.TekUserInfo;
+        }
+    };
+    __decorate([
+        vuetify.PropWatch({ type: [String], default: '' }),
+        __metadata("design:type", String)
+    ], TekUserInfo.prototype, "aboutImage", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String], default: '' }),
+        __metadata("design:type", String)
+    ], TekUserInfo.prototype, "defaultEmail", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [Object, String], default: null }),
+        __metadata("design:type", Object)
+    ], TekUserInfo.prototype, "versionInfo", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String], default: '' }),
+        __metadata("design:type", String)
+    ], TekUserInfo.prototype, "versionUrl", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [Array], default: undefined }),
+        __metadata("design:type", Object)
+    ], TekUserInfo.prototype, "bottomSlot", void 0);
+    TekUserInfo = __decorate([
+        vuePropertyDecorator.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__$1 = function (inject) {
+        if (!inject) return
+        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 = vuetify.components.ZdList;
+    let TekUserInfoList = class TekUserInfoList extends ZdList {
+        constructor() {
+            super(...arguments);
+            this.instanceType = teknisaComponentsCommon.TekUserInfoList;
+        }
+    };
+    __decorate([
+        vuetify.PropWatch({ type: [String], default: '' }),
+        __metadata("design:type", String)
+    ], TekUserInfoList.prototype, "parentName", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [Boolean, String], default: true }),
+        __metadata("design:type", Boolean)
+    ], TekUserInfoList.prototype, "dense", void 0);
+    TekUserInfoList = __decorate([
+        vuePropertyDecorator.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 */
@@ -7708,29 +7900,31 @@
         __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__,
     };
 
     common.Icons.addIcons({
@@ -7748,23 +7942,26 @@
             Object.keys(components).forEach((id) => {
                 Vue.component(id, components[id]);
             });
+            Vue.component('ZdUserInfo', zdUserInfoVue.ZdUserInfo);
         },
     };
 
-    exports.TekBreadcrumbHeader = script$g;
-    exports.TekCardTitle = script$f;
-    exports.TekCrudAddButton = script$e;
-    exports.TekCrudCancelButton = script$d;
-    exports.TekCrudDeleteButton = script$c;
-    exports.TekCrudForm = script$b;
-    exports.TekCrudSaveButton = script$a;
-    exports.TekGrid = script$9;
-    exports.TekGridColumnsButton = script$8;
-    exports.TekGridLayoutOptions = script$7;
-    exports.TekImage = script$6;
-    exports.TekIterableComponentRender = script$4;
-    exports.TekProductCard = script$1;
-    exports.TekTreeGrid = script;
+    exports.TekBreadcrumbHeader = script$i;
+    exports.TekCardTitle = script$h;
+    exports.TekCrudAddButton = script$g;
+    exports.TekCrudCancelButton = script$f;
+    exports.TekCrudDeleteButton = script$e;
+    exports.TekCrudForm = script$d;
+    exports.TekCrudSaveButton = script$c;
+    exports.TekGrid = script$b;
+    exports.TekGridColumnsButton = script$a;
+    exports.TekGridLayoutOptions = script$9;
+    exports.TekImage = script$8;
+    exports.TekIterableComponentRender = script$6;
+    exports.TekProductCard = script$3;
+    exports.TekTreeGrid = script$2;
+    exports.TekUserInfo = script$1;
+    exports.TekUserInfoList = script;
     exports["default"] = TeknisaComponents;
 
     Object.defineProperty(exports, '__esModule', { value: true });