@zeedhi/teknisa-components-vuetify 1.15.0 → 1.35.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/tek-components-vuetify.esm.js +1586 -642
  2. package/dist/tek-components-vuetify.umd.js +1588 -644
  3. package/package.json +2 -2
  4. package/types/components/tek-grid/TekGrid.d.ts +3 -4
  5. package/types/components/tek-grid/TekGridColumnsButton.d.ts +2 -0
  6. package/types/components/tek-grid/TekGridColumnsOptionsController.d.ts +60 -0
  7. package/types/components/tek-grid/TekGridColumnsOptionsModal.d.ts +9 -0
package/dist/tek-components-vuetify.esm.js CHANGED
@@ -1,10 +1,10 @@
1
- import { Icons } from '@zeedhi/common';
1
+ import { ModalService, Icons } from '@zeedhi/common';
2
2
  import { Prop, Component, Watch } from 'vue-property-decorator';
3
3
  import { BreadcrumbHeader, CardTitle, CrudButton, CrudAddButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, TekGrid as TekGrid$1, TekRestDatasource, TekGridColumnsButton as TekGridColumnsButton$1, TekGridLayoutOptions as TekGridLayoutOptions$1, Image, IterableCarousel, IterableComponentRender, Notifications, ProductCard } from '@zeedhi/teknisa-components-common';
4
- import { ZdComponent, ZdComponentRender, components as components$1, ZdForm, ZdIterableColumnsButton, ZdIterable } from '@zeedhi/vuetify';
5
- import { Metadata } from '@zeedhi/core';
4
+ import { ZdComponent, ZdComponentRender, components as components$1, ZdForm, ZdGrid, ZdIterableColumnsButton, ZdIterable } from '@zeedhi/vuetify';
5
+ import { Metadata, normalize, I18n, Loader } from '@zeedhi/core';
6
6
  import debounce from 'lodash.debounce';
7
- import sortable from 'sortablejs';
7
+ import Sortable from 'sortablejs';
8
8
 
9
9
  /*! *****************************************************************************
10
10
  Copyright (c) Microsoft Corporation.
@@ -262,7 +262,7 @@ __vue_render__$e._withStripped = true;
262
262
  /* style */
263
263
  const __vue_inject_styles__$e = function (inject) {
264
264
  if (!inject) return
265
- inject("data-v-cb6f4dac_0", { source: ".tek-breadcrumb-header .tek-breadcrumb-header-title-col {\n display: flex;\n padding-top: 5px;\n padding-left: 0;\n}\n.tek-breadcrumb-header .tek-breadcrumb-header-title-col .tek-breadcrumb-header-slot-right {\n margin-left: auto;\n}\n.tek-breadcrumb-header .zd-breadcrumbs {\n padding: 0;\n font-size: var(--zd-font-body2-size);\n}\n.tek-breadcrumb-header .zd-breadcrumbs .v-breadcrumbs__item--disabled {\n color: #667080;\n}\n.tek-breadcrumb-header .zd-text {\n color: #667080;\n}\n.tek-breadcrumb-header .zd-text.tek-breadcrumb-header-title {\n font-size: 32px;\n font-weight: bold;\n line-height: 35px;\n margin-bottom: 10px;\n}\n.tek-breadcrumb-header .zd-text > p {\n margin: 0;\n}\n\n/*# sourceMappingURL=TekBreadcrumbHeader.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-breadcrumb-header/TekBreadcrumbHeader.vue","TekBreadcrumbHeader.vue"],"names":[],"mappings":"AAiCA;EACA,aAAA;EACA,gBAAA;EACA,eAAA;AChCA;ADkCA;EACA,iBAAA;AChCA;ADmCA;EACA,UAAA;EACA,oCAAA;ACjCA;ADmCA;EACA,cAAA;ACjCA;ADoCA;EACA,cAAA;AClCA;ADoCA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,mBAAA;AClCA;ADqCA;EACA,SAAA;ACnCA;;AAEA,kDAAkD","file":"TekBreadcrumbHeader.vue","sourcesContent":["<template>\n <div class=\"tek-breadcrumb-header\">\n <zd-breadcrumbs\n v-bind=\"instance.breadcrumb\"\n />\n <v-col class=\"tek-breadcrumb-header-title-col\" cols=\"12\">\n <zd-text\n class=\"tek-breadcrumb-header-title\"\n v-bind=\"{\n name: `${instance.name}-title`,\n text: $t(instance.title),\n }\"\n />\n <span class=\"tek-breadcrumb-header-slot-right\" >\n <span v-if=\"instance.rightSlot.length\">\n <component\n v-for=\"(child, index) in instance.rightSlot\"\n v-bind=\"child\"\n :is=\"child.component\"\n :key=\"index\"\n >\n </component>\n </span>\n <slot name=\"rightSlot\"></slot>\n </span>\n </v-col>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./TekBreadcrumbHeader.ts\"></script>\n\n<style lang=\"scss\">\n.tek-breadcrumb-header {\n .tek-breadcrumb-header-title-col {\n display: flex;\n padding-top: 5px;\n padding-left: 0;\n\n .tek-breadcrumb-header-slot-right {\n margin-left: auto;\n }\n }\n .zd-breadcrumbs {\n padding: 0;\n font-size: var(--zd-font-body2-size);\n\n .v-breadcrumbs__item--disabled {\n color: #667080;\n }\n }\n .zd-text {\n color: #667080;\n\n &.tek-breadcrumb-header-title {\n font-size: 32px;\n font-weight: bold;\n line-height: 35px;\n margin-bottom: 10px;\n }\n\n > p {\n margin: 0;\n }\n }\n}\n</style>",".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}\n\n/*# sourceMappingURL=TekBreadcrumbHeader.vue.map */"]}, media: undefined });
265
+ inject("data-v-cb6f4dac_0", { source: ".tek-breadcrumb-header .tek-breadcrumb-header-title-col {\n display: flex;\n padding-top: 5px;\n padding-left: 0;\n}\n.tek-breadcrumb-header .tek-breadcrumb-header-title-col .tek-breadcrumb-header-slot-right {\n margin-left: auto;\n}\n.tek-breadcrumb-header .zd-breadcrumbs {\n padding: 0;\n font-size: var(--zd-font-body2-size);\n}\n.tek-breadcrumb-header .zd-breadcrumbs .v-breadcrumbs__item--disabled {\n color: #667080;\n}\n.tek-breadcrumb-header .zd-text {\n color: #667080;\n}\n.tek-breadcrumb-header .zd-text.tek-breadcrumb-header-title {\n font-size: 32px;\n font-weight: bold;\n line-height: 35px;\n margin-bottom: 10px;\n}\n.tek-breadcrumb-header .zd-text > p {\n margin: 0;\n}", map: undefined, media: undefined });
266
266
 
267
267
  };
268
268
  /* scoped */
@@ -435,7 +435,7 @@ __vue_render__$d._withStripped = true;
435
435
  /* style */
436
436
  const __vue_inject_styles__$d = function (inject) {
437
437
  if (!inject) return
438
- inject("data-v-520a641c_0", { source: ".tek-card-title-row {\n display: flex;\n align-items: center;\n}\n.tek-card-title-row .tek-card-title-text {\n color: var(--v-primary-base);\n font-weight: bold;\n font-size: 20px;\n}\n.tek-card-title-row .tek-card-subtitle-text {\n padding-left: 10px;\n color: var(--zd-font-color);\n font-size: 13px;\n}\n.tek-card-title-row .tek-card-title-text,\n.tek-card-title-row .tek-card-subtitle-text {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: baseline;\n}\n.tek-card-title-row .v-icon {\n color: var(--v-primary-base);\n padding-right: calc(var(--zd-default-padding) / 2);\n}\n.tek-card-title .v-divider {\n margin-bottom: 16px;\n}\n.tek-card-title .tek-card-title-router {\n text-decoration: none;\n}\n.tek-card-title .tek-card-title-no-router {\n text-decoration: none;\n cursor: default;\n}\n\n/*# sourceMappingURL=TekCardTitle.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-card-title/TekCardTitle.vue","TekCardTitle.vue"],"names":[],"mappings":"AAgDA;EACA,aAAA;EACA,mBAAA;AC/CA;ADiDA;EACA,4BAAA;EACA,iBAAA;EACA,eAAA;AC/CA;ADkDA;EACA,kBAAA;EACA,2BAAA;EACA,eAAA;AChDA;ADmDA;;EAEA,mBAAA;EACA,gBAAA;EACA,uBAAA;EACA,wBAAA;ACjDA;ADoDA;EACA,4BAAA;EACA,kDAAA;AClDA;ADsDA;EACA,mBAAA;ACpDA;ADuDA;EACA,qBAAA;ACrDA;ADwDA;EACA,qBAAA;EACA,eAAA;ACtDA;;AAEA,2CAA2C","file":"TekCardTitle.vue","sourcesContent":["<template>\n <div :class=\"['tek-card-title', instance.cssClass]\">\n <div\n class=\"tek-card-content zd-display-flex zd-justify-space-between zd-align-center\"\n >\n <span class=\"tek-card-title-content\">\n <router-link\n :class=\"[\n {\n 'tek-card-title-router': instance.to !== '',\n 'tek-card-title-no-router': instance.to === '',\n },\n ]\"\n :to=\"instance.to\"\n >\n <span class=\"tek-card-title-row\">\n <v-icon v-if=\"instance.iconName\">{{\n $getIcon(instance.iconName)\n }}</v-icon>\n <span v-if=\"instance.title\" class=\"tek-card-title-text\">{{\n $t(instance.title)\n }}</span>\n <span v-if=\"instance.subtitle\" class=\"tek-card-subtitle-text\">{{\n $t(instance.subtitle)\n }}</span>\n </span>\n </router-link>\n </span>\n <span class=\"tek-card-title-slot-right\">\n <span v-if=\"instance.rightSlot.length\">\n <component\n v-for=\"(child, index) in instance.rightSlot\"\n v-bind=\"child\"\n :is=\"child.component\"\n :key=\"index\"\n ></component>\n </span>\n <slot name=\"rightSlot\"></slot>\n </span>\n </div>\n <v-divider v-if=\"instance.showDivider\" />\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./TekCardTitle.ts\"></script>\n\n<style lang=\"scss\">\n.tek-card-title {\n &-row {\n display: flex;\n align-items: center;\n\n .tek-card-title-text {\n color: var(--v-primary-base);\n font-weight: bold;\n font-size: 20px;\n }\n\n .tek-card-subtitle-text {\n padding-left: 10px;\n color: var(--zd-font-color);\n font-size: 13px;\n }\n\n .tek-card-title-text,\n .tek-card-subtitle-text {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: baseline;\n }\n\n .v-icon {\n color: var(--v-primary-base);\n padding-right: calc(var(--zd-default-padding) / 2);\n }\n }\n\n .v-divider {\n margin-bottom: 16px;\n }\n\n .tek-card-title-router {\n text-decoration: none;\n }\n\n .tek-card-title-no-router {\n text-decoration: none;\n cursor: default;\n }\n}\n</style>",".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}\n\n/*# sourceMappingURL=TekCardTitle.vue.map */"]}, media: undefined });
438
+ inject("data-v-520a641c_0", { source: ".tek-card-title-row {\n display: flex;\n align-items: center;\n}\n.tek-card-title-row .tek-card-title-text {\n color: var(--v-primary-base);\n font-weight: bold;\n font-size: 20px;\n}\n.tek-card-title-row .tek-card-subtitle-text {\n padding-left: 10px;\n color: var(--zd-font-color);\n font-size: 13px;\n}\n.tek-card-title-row .tek-card-title-text,\n.tek-card-title-row .tek-card-subtitle-text {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: baseline;\n}\n.tek-card-title-row .v-icon {\n color: var(--v-primary-base);\n padding-right: calc(var(--zd-default-padding) / 2);\n}\n.tek-card-title .v-divider {\n margin-bottom: 16px;\n}\n.tek-card-title .tek-card-title-router {\n text-decoration: none;\n}\n.tek-card-title .tek-card-title-no-router {\n text-decoration: none;\n cursor: default;\n}", map: undefined, media: undefined });
439
439
 
440
440
  };
441
441
  /* scoped */
@@ -604,17 +604,15 @@ var __vue_staticRenderFns__$c = [];
604
604
  __vue_render__$c._withStripped = true;
605
605
 
606
606
  /* style */
607
- const __vue_inject_styles__$c = function (inject) {
608
- if (!inject) return
609
- inject("data-v-2348feb6_0", { source: "\n\n/*# sourceMappingURL=TekCrudAddButton.vue.map */", map: {"version":3,"sources":["TekCrudAddButton.vue"],"names":[],"mappings":";;AAEA,+CAA+C","file":"TekCrudAddButton.vue"}, media: undefined });
610
-
611
- };
607
+ const __vue_inject_styles__$c = undefined;
612
608
  /* scoped */
613
609
  const __vue_scope_id__$c = undefined;
614
610
  /* module identifier */
615
611
  const __vue_module_identifier__$c = undefined;
616
612
  /* functional template */
617
613
  const __vue_is_functional_template__$c = false;
614
+ /* style inject */
615
+
618
616
  /* style inject SSR */
619
617
 
620
618
  /* style inject shadow dom */
@@ -629,7 +627,7 @@ __vue_render__$c._withStripped = true;
629
627
  __vue_is_functional_template__$c,
630
628
  __vue_module_identifier__$c,
631
629
  false,
632
- createInjector,
630
+ undefined,
633
631
  undefined,
634
632
  undefined
635
633
  );
@@ -733,17 +731,15 @@ var __vue_staticRenderFns__$b = [];
733
731
  __vue_render__$b._withStripped = true;
734
732
 
735
733
  /* style */
736
- const __vue_inject_styles__$b = function (inject) {
737
- if (!inject) return
738
- inject("data-v-9a0382a2_0", { source: "\n\n/*# sourceMappingURL=TekCrudCancelButton.vue.map */", map: {"version":3,"sources":["TekCrudCancelButton.vue"],"names":[],"mappings":";;AAEA,kDAAkD","file":"TekCrudCancelButton.vue"}, media: undefined });
739
-
740
- };
734
+ const __vue_inject_styles__$b = undefined;
741
735
  /* scoped */
742
736
  const __vue_scope_id__$b = undefined;
743
737
  /* module identifier */
744
738
  const __vue_module_identifier__$b = undefined;
745
739
  /* functional template */
746
740
  const __vue_is_functional_template__$b = false;
741
+ /* style inject */
742
+
747
743
  /* style inject SSR */
748
744
 
749
745
  /* style inject shadow dom */
@@ -758,7 +754,7 @@ __vue_render__$b._withStripped = true;
758
754
  __vue_is_functional_template__$b,
759
755
  __vue_module_identifier__$b,
760
756
  false,
761
- createInjector,
757
+ undefined,
762
758
  undefined,
763
759
  undefined
764
760
  );
@@ -870,17 +866,15 @@ var __vue_staticRenderFns__$a = [];
870
866
  __vue_render__$a._withStripped = true;
871
867
 
872
868
  /* style */
873
- const __vue_inject_styles__$a = function (inject) {
874
- if (!inject) return
875
- inject("data-v-4e8555cd_0", { source: "\n\n/*# sourceMappingURL=TekCrudDeleteButton.vue.map */", map: {"version":3,"sources":["TekCrudDeleteButton.vue"],"names":[],"mappings":";;AAEA,kDAAkD","file":"TekCrudDeleteButton.vue"}, media: undefined });
876
-
877
- };
869
+ const __vue_inject_styles__$a = undefined;
878
870
  /* scoped */
879
871
  const __vue_scope_id__$a = undefined;
880
872
  /* module identifier */
881
873
  const __vue_module_identifier__$a = undefined;
882
874
  /* functional template */
883
875
  const __vue_is_functional_template__$a = false;
876
+ /* style inject */
877
+
884
878
  /* style inject SSR */
885
879
 
886
880
  /* style inject shadow dom */
@@ -895,7 +889,7 @@ __vue_render__$a._withStripped = true;
895
889
  __vue_is_functional_template__$a,
896
890
  __vue_module_identifier__$a,
897
891
  false,
898
- createInjector,
892
+ undefined,
899
893
  undefined,
900
894
  undefined
901
895
  );
@@ -998,7 +992,7 @@ __vue_render__$9._withStripped = true;
998
992
  /* style */
999
993
  const __vue_inject_styles__$9 = function (inject) {
1000
994
  if (!inject) return
1001
- inject("data-v-aa2c2e04_0", { source: ".tek-crud-form {\n outline: none;\n}\n\n/*# sourceMappingURL=TekCrudForm.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/crud/TekCrudForm.vue","TekCrudForm.vue"],"names":[],"mappings":"AA0BA;EACA,aAAA;ACzBA;;AAEA,0CAA0C","file":"TekCrudForm.vue","sourcesContent":["<template>\n <v-form ref=\"form\"\n v-show=\"instance.isVisible\"\n :class=\"['tek-crud-form', instance.cssClass]\"\n :name=\"instance.name\"\n @submit.prevent=\"submit($event)\"\n tabindex=\"0\"\n >\n <v-row dense :justify=\"instance.justify\" :align=\"instance.align\">\n <v-col\n v-for=\"child in instance.childrenProps\" :key=\"child.name\"\n v-bind=\"instance.childrenGrid[child.name]\">\n <component\n :is=\"child.component\" v-bind=\"child\"\n :parent=\"instance\"\n @update:value=\"instance.updateChild(child, $event)\">\n </component>\n </v-col>\n </v-row>\n <slot></slot>\n </v-form>\n</template>\n\n<script lang=\"ts\" src=\"./TekCrudForm.ts\"></script>\n\n<style lang=\"scss\">\n.tek-crud-form {\n outline: none;\n}\n</style>",".tek-crud-form {\n outline: none;\n}\n\n/*# sourceMappingURL=TekCrudForm.vue.map */"]}, media: undefined });
995
+ inject("data-v-aa2c2e04_0", { source: ".tek-crud-form {\n outline: none;\n}", map: undefined, media: undefined });
1002
996
 
1003
997
  };
1004
998
  /* scoped */
@@ -1121,17 +1115,15 @@ var __vue_staticRenderFns__$8 = [];
1121
1115
  __vue_render__$8._withStripped = true;
1122
1116
 
1123
1117
  /* style */
1124
- const __vue_inject_styles__$8 = function (inject) {
1125
- if (!inject) return
1126
- inject("data-v-6dc04329_0", { source: "\n\n/*# sourceMappingURL=TekCrudSaveButton.vue.map */", map: {"version":3,"sources":["TekCrudSaveButton.vue"],"names":[],"mappings":";;AAEA,gDAAgD","file":"TekCrudSaveButton.vue"}, media: undefined });
1127
-
1128
- };
1118
+ const __vue_inject_styles__$8 = undefined;
1129
1119
  /* scoped */
1130
1120
  const __vue_scope_id__$8 = undefined;
1131
1121
  /* module identifier */
1132
1122
  const __vue_module_identifier__$8 = undefined;
1133
1123
  /* functional template */
1134
1124
  const __vue_is_functional_template__$8 = false;
1125
+ /* style inject */
1126
+
1135
1127
  /* style inject SSR */
1136
1128
 
1137
1129
  /* style inject shadow dom */
@@ -1146,7 +1138,7 @@ __vue_render__$8._withStripped = true;
1146
1138
  __vue_is_functional_template__$8,
1147
1139
  __vue_module_identifier__$8,
1148
1140
  false,
1149
- createInjector,
1141
+ undefined,
1150
1142
  undefined,
1151
1143
  undefined
1152
1144
  );
@@ -1160,7 +1152,6 @@ let TekGrid = class TekGrid extends ZdGridEditable {
1160
1152
  constructor() {
1161
1153
  super(...arguments);
1162
1154
  this.instanceType = TekGrid$1;
1163
- this.minimumColumnWidth = 70;
1164
1155
  this.debouncedDatasourceGet = debounce((instance) => {
1165
1156
  if (instance.events.beforeApplyFilter) {
1166
1157
  instance.events.beforeApplyFilter({ component: instance });
@@ -1172,14 +1163,18 @@ let TekGrid = class TekGrid extends ZdGridEditable {
1172
1163
  this.defaultRelation = '';
1173
1164
  this.lastFilter = '';
1174
1165
  }
1175
- created() {
1176
- this.minimumColumnWidth = 70;
1177
- }
1178
1166
  mounted() {
1179
1167
  this.originalChangeLayout = this.instance.changeLayout;
1180
1168
  this.instance.changeLayout = this.onChangeLayout;
1181
1169
  this.instance.viewUpdateScrollData = this.calcScrollData;
1182
1170
  }
1171
+ minimumColumnWidth(column) {
1172
+ let minWidth = this.superMethods(ZdGrid).minimumColumnWidth.call(this, column);
1173
+ if (this.instance.columnFilterButton && column && column.filterable) {
1174
+ minWidth += 15;
1175
+ }
1176
+ return minWidth;
1177
+ }
1183
1178
  onChangeLayout(event, element) {
1184
1179
  if (this.originalChangeLayout) {
1185
1180
  this.originalChangeLayout.call(this.instance, event, element);
@@ -1189,27 +1184,6 @@ let TekGrid = class TekGrid extends ZdGridEditable {
1189
1184
  layoutOptions.layoutEdited = true;
1190
1185
  }
1191
1186
  }
1192
- calcWidth(width) {
1193
- if (width.indexOf('%') !== -1 && this.$el) {
1194
- const percent = Number(width.replace('%', '')) / 100;
1195
- const tableWidth = this.$el.clientWidth;
1196
- return `${Math.max(this.minimumColumnWidth, Math.trunc(Number(tableWidth) * percent))}px`;
1197
- }
1198
- return width;
1199
- }
1200
- calcColumnLabelWidth(column) {
1201
- if (column.maxWidth || column.minWidth) {
1202
- let width = parseInt(this.calcWidth(column.maxWidth) || this.calcWidth(column.minWidth), 10) - 16;
1203
- if (column.sortable) {
1204
- width -= 16;
1205
- }
1206
- if (column.filterable) {
1207
- width -= 16;
1208
- }
1209
- return `${width}px`;
1210
- }
1211
- return 'unset';
1212
- }
1213
1187
  getFilterActivatorEvents(on) {
1214
1188
  const events = {};
1215
1189
  Object.keys(on).forEach((eventName) => {
@@ -1359,6 +1333,14 @@ let TekGrid = class TekGrid extends ZdGridEditable {
1359
1333
  }
1360
1334
  return this.renderedData;
1361
1335
  }
1336
+ rowClick(row, event) {
1337
+ if (row.group || row.groupFooter || row.groupSummary) {
1338
+ this.instance.groupRowClick(row, event, this.$el);
1339
+ }
1340
+ else {
1341
+ this.instance.rowClick(row, event, this.$el);
1342
+ }
1343
+ }
1362
1344
  };
1363
1345
  __decorate([
1364
1346
  Prop({ type: [String], default: '' }),
@@ -1376,6 +1358,10 @@ __decorate([
1376
1358
  Prop({ type: [Boolean, String], default: false }),
1377
1359
  __metadata("design:type", Object)
1378
1360
  ], TekGrid.prototype, "columnsButton", void 0);
1361
+ __decorate([
1362
+ Prop({ type: [Array, String], default: () => [] }),
1363
+ __metadata("design:type", Object)
1364
+ ], TekGrid.prototype, "columnsButtonIgnore", void 0);
1379
1365
  __decorate([
1380
1366
  Prop({ type: [Boolean, String], default: false }),
1381
1367
  __metadata("design:type", Object)
@@ -1454,7 +1440,12 @@ var __vue_render__$7 = function() {
1454
1440
  }
1455
1441
  ],
1456
1442
  ref: "grid",
1457
- class: ["zd-grid", "tek-grid", _vm.instance.cssClass],
1443
+ class: [
1444
+ "zd-grid",
1445
+ "tek-grid",
1446
+ _vm.instance.cssClass,
1447
+ { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight }
1448
+ ],
1458
1449
  style: [_vm.cssColorVars, _vm.instance.cssStyle],
1459
1450
  attrs: {
1460
1451
  "fixed-header": "",
@@ -1485,19 +1476,25 @@ var __vue_render__$7 = function() {
1485
1476
  key: "top",
1486
1477
  fn: function() {
1487
1478
  return [
1488
- _c(
1489
- "zd-grid-top",
1490
- {
1491
- ref: "gridTopSlot",
1492
- attrs: {
1493
- name: _vm.instance.name + "_top",
1494
- toolbarSlot: _vm.instance.toolbarSlot,
1495
- instance: _vm.instance
1496
- }
1497
- },
1498
- [_vm._t("toolbarSlot")],
1499
- 2
1500
- )
1479
+ !_vm.$slots.toolbarSlot
1480
+ ? [
1481
+ _c("zd-grid-top", {
1482
+ ref: "gridTopSlot",
1483
+ attrs: {
1484
+ name: _vm.instance.name + "_top",
1485
+ toolbarSlot: _vm.instance.toolbarSlot,
1486
+ instance: _vm.instance
1487
+ }
1488
+ })
1489
+ ]
1490
+ : _vm._e(),
1491
+ _vm._v(" "),
1492
+ _vm._t("toolbarSlot"),
1493
+ _vm._v(" "),
1494
+ _c("span", {
1495
+ ref: "gridTooltip",
1496
+ staticClass: "zd-grid-cell-tooltip"
1497
+ })
1501
1498
  ]
1502
1499
  },
1503
1500
  proxy: true
@@ -1590,366 +1587,459 @@ var __vue_render__$7 = function() {
1590
1587
  style: {
1591
1588
  "background-color":
1592
1589
  _vm.instance.headerBackground,
1593
- "min-width":
1594
- _vm.calcWidth(column.minWidth) ||
1595
- "unset",
1596
- "max-width":
1597
- _vm.calcWidth(column.maxWidth) ||
1598
- "unset"
1590
+ width:
1591
+ _vm.calcWidth(
1592
+ column,
1593
+ column.maxWidth || column.minWidth
1594
+ ) || "unset"
1599
1595
  },
1600
1596
  attrs: { index: index }
1601
1597
  },
1602
1598
  [
1603
- column.type !== "action"
1604
- ? [
1605
- index === 0 &&
1606
- _vm.instance.groupColumnNames.length >
1607
- 0
1608
- ? _vm._l(
1609
- _vm.instance.groupColumnNames,
1610
- function(name, groupIndex) {
1611
- return _c("span", {
1612
- key: name,
1613
- class: [
1614
- "tek-grid-header-group-identation",
1615
- {
1616
- "first-group":
1617
- groupIndex === 0
1599
+ _c(
1600
+ "span",
1601
+ {
1602
+ staticClass: "zd-table-header-cell",
1603
+ style: {
1604
+ width: _vm.calcHeaderCellWidth(column)
1605
+ }
1606
+ },
1607
+ [
1608
+ column.type !== "action"
1609
+ ? [
1610
+ index === 0 &&
1611
+ _vm.instance.groupColumnNames
1612
+ .length > 0
1613
+ ? _vm._l(
1614
+ _vm.instance
1615
+ .groupColumnNames,
1616
+ function(name, groupIndex) {
1617
+ return _c("span", {
1618
+ key: name,
1619
+ class: [
1620
+ "tek-grid-header-group-identation",
1621
+ {
1622
+ "first-group":
1623
+ groupIndex === 0
1624
+ }
1625
+ ]
1626
+ })
1627
+ }
1628
+ )
1629
+ : _vm._e(),
1630
+ _vm._v(" "),
1631
+ column.sortable &&
1632
+ column.align === "right" &&
1633
+ !_vm.instance.editing
1634
+ ? _c(
1635
+ "span",
1636
+ {
1637
+ staticClass:
1638
+ "zd-table-cell-sort zd-mr-1",
1639
+ on: {
1640
+ click: function(
1641
+ $event
1642
+ ) {
1643
+ return _vm.instance.changeColumnOrder(
1644
+ column
1645
+ )
1646
+ }
1618
1647
  }
1619
- ]
1620
- })
1621
- }
1622
- )
1623
- : _vm._e(),
1624
- _vm._v(" "),
1625
- column.sortable &&
1626
- column.align === "right" &&
1627
- !_vm.instance.editing
1628
- ? _c(
1648
+ },
1649
+ [
1650
+ column.sortable &&
1651
+ column.align ===
1652
+ "right" &&
1653
+ !_vm.instance.editing
1654
+ ? _c(
1655
+ "v-icon",
1656
+ {
1657
+ staticClass:
1658
+ "zd-table-cell-sort-icon",
1659
+ attrs: {
1660
+ small: ""
1661
+ }
1662
+ },
1663
+ [
1664
+ _vm._v(
1665
+ "\n " +
1666
+ _vm._s(
1667
+ _vm.$getIcon(
1668
+ "chevronUp"
1669
+ )
1670
+ ) +
1671
+ "\n "
1672
+ )
1673
+ ]
1674
+ )
1675
+ : _vm._e(),
1676
+ _vm._v(" "),
1677
+ _vm.instance.datasource.findOrderIndex(
1678
+ column.name
1679
+ ) >= 0
1680
+ ? _c(
1681
+ "span",
1682
+ {
1683
+ staticClass:
1684
+ "zd-table-cell-sort-order left"
1685
+ },
1686
+ [
1687
+ _vm._v(
1688
+ "\n " +
1689
+ _vm._s(
1690
+ _vm.instance.datasource.findOrderIndex(
1691
+ column.name
1692
+ ) + 1
1693
+ ) +
1694
+ "\n "
1695
+ )
1696
+ ]
1697
+ )
1698
+ : _vm._e()
1699
+ ],
1700
+ 1
1701
+ )
1702
+ : _vm._e(),
1703
+ _vm._v(" "),
1704
+ _c(
1629
1705
  "span",
1630
1706
  {
1631
- staticClass:
1632
- "zd-table-cell-sort",
1707
+ class: [
1708
+ "zd-table-cell-name",
1709
+ {
1710
+ "overflow-hidden":
1711
+ column.overflow ===
1712
+ "hidden",
1713
+ "overflow-wrap":
1714
+ column.overflow ===
1715
+ "wrap"
1716
+ },
1717
+ !isNaN(column.overflow)
1718
+ ? "overflow-clamp overflow-clamp-" +
1719
+ column.overflow
1720
+ : ""
1721
+ ],
1633
1722
  on: {
1634
1723
  click: function($event) {
1635
1724
  return _vm.instance.changeColumnOrder(
1636
1725
  column
1637
1726
  )
1727
+ },
1728
+ mouseenter: function(
1729
+ $event
1730
+ ) {
1731
+ return _vm.checkOverflow(
1732
+ $event
1733
+ )
1734
+ },
1735
+ mouseleave: function(
1736
+ $event
1737
+ ) {
1738
+ return _vm.removeTooltip()
1638
1739
  }
1639
1740
  }
1640
1741
  },
1641
1742
  [
1642
- column.sortable &&
1643
- column.align === "right" &&
1644
- !_vm.instance.editing
1645
- ? _c(
1646
- "v-icon",
1647
- {
1648
- staticClass:
1649
- "zd-table-cell-sort-icon",
1650
- attrs: { small: "" }
1651
- },
1652
- [
1653
- _vm._v(
1654
- _vm._s(
1655
- _vm.$getIcon(
1656
- "chevronUp"
1657
- )
1658
- )
1659
- )
1660
- ]
1661
- )
1662
- : _vm._e(),
1663
- _vm._v(" "),
1664
- _vm.instance.datasource.findOrderIndex(
1665
- column.name
1666
- ) >= 0
1743
+ _vm._v(
1744
+ "\n " +
1745
+ _vm._s(
1746
+ _vm.$t(column.label)
1747
+ ) +
1748
+ "\n "
1749
+ ),
1750
+ column.aggregation
1667
1751
  ? _c(
1668
1752
  "span",
1669
1753
  {
1670
1754
  staticClass:
1671
- "zd-table-cell-sort-order left"
1755
+ "tek-grid-column-aggregation"
1672
1756
  },
1673
1757
  [
1674
1758
  _vm._v(
1675
- _vm._s(
1676
- _vm.instance.datasource.findOrderIndex(
1677
- column.name
1678
- ) + 1
1679
- )
1759
+ "(" +
1760
+ _vm._s(
1761
+ _vm.$t(
1762
+ "TEKGRID_AGGREGATION_" +
1763
+ column.aggregation
1764
+ )
1765
+ ) +
1766
+ ")"
1680
1767
  )
1681
1768
  ]
1682
1769
  )
1683
1770
  : _vm._e()
1684
- ],
1685
- 1
1686
- )
1687
- : _vm._e(),
1688
- _vm._v(" "),
1689
- _c(
1690
- "span",
1691
- {
1692
- class: [
1693
- "zd-table-cell-name",
1694
- {
1695
- "overflow-hidden":
1696
- column.overflow ===
1697
- "hidden",
1698
- "overflow-wrap":
1699
- column.overflow === "wrap"
1700
- },
1701
- !isNaN(column.overflow)
1702
- ? "overflow-clamp overflow-clamp-" +
1703
- column.overflow
1704
- : ""
1705
- ],
1706
- style: {
1707
- "max-width": _vm.calcColumnLabelWidth(
1708
- column
1709
- )
1710
- },
1711
- on: {
1712
- click: function($event) {
1713
- return _vm.instance.changeColumnOrder(
1714
- column
1715
- )
1716
- }
1717
- }
1718
- },
1719
- [
1720
- _vm._v(
1721
- "\n " +
1722
- _vm._s(_vm.$t(column.label)) +
1723
- "\n "
1771
+ ]
1724
1772
  ),
1725
- column.aggregation
1773
+ _vm._v(" "),
1774
+ column.sortable &&
1775
+ column.align !== "right" &&
1776
+ !_vm.instance.editing
1726
1777
  ? _c(
1727
1778
  "span",
1728
1779
  {
1729
1780
  staticClass:
1730
- "tek-grid-column-aggregation"
1781
+ "zd-table-cell-sort zd-ml-1",
1782
+ on: {
1783
+ click: function(
1784
+ $event
1785
+ ) {
1786
+ return _vm.instance.changeColumnOrder(
1787
+ column
1788
+ )
1789
+ }
1790
+ }
1731
1791
  },
1732
1792
  [
1733
- _vm._v(
1734
- "(" +
1735
- _vm._s(
1736
- _vm.$t(
1737
- "TEKGRID_AGGREGATION_" +
1738
- column.aggregation
1739
- )
1740
- ) +
1741
- ")"
1742
- )
1743
- ]
1793
+ column.sortable &&
1794
+ column.align !==
1795
+ "right" &&
1796
+ !_vm.instance.editing
1797
+ ? _c(
1798
+ "v-icon",
1799
+ {
1800
+ staticClass:
1801
+ "zd-table-cell-sort-icon",
1802
+ attrs: {
1803
+ small: ""
1804
+ }
1805
+ },
1806
+ [
1807
+ _vm._v(
1808
+ "\n " +
1809
+ _vm._s(
1810
+ _vm.$getIcon(
1811
+ "chevronUp"
1812
+ )
1813
+ ) +
1814
+ "\n "
1815
+ )
1816
+ ]
1817
+ )
1818
+ : _vm._e(),
1819
+ _vm._v(" "),
1820
+ _vm.instance.datasource.findOrderIndex(
1821
+ column.name
1822
+ ) >= 0
1823
+ ? _c(
1824
+ "span",
1825
+ {
1826
+ staticClass:
1827
+ "zd-table-cell-sort-order"
1828
+ },
1829
+ [
1830
+ _vm._v(
1831
+ "\n " +
1832
+ _vm._s(
1833
+ _vm.instance.datasource.findOrderIndex(
1834
+ column.name
1835
+ ) + 1
1836
+ ) +
1837
+ "\n "
1838
+ )
1839
+ ]
1840
+ )
1841
+ : _vm._e()
1842
+ ],
1843
+ 1
1744
1844
  )
1745
1845
  : _vm._e()
1746
1846
  ]
1747
- ),
1748
- _vm._v(" "),
1749
- column.sortable &&
1750
- column.align !== "right" &&
1751
- !_vm.instance.editing
1752
- ? _c(
1847
+ : [
1848
+ _c(
1753
1849
  "span",
1754
1850
  {
1755
1851
  staticClass:
1756
- "zd-table-cell-sort",
1757
- on: {
1758
- click: function($event) {
1759
- return _vm.instance.changeColumnOrder(
1760
- column
1761
- )
1762
- }
1763
- }
1852
+ "zd-table-cell-name"
1764
1853
  },
1765
1854
  [
1766
- column.sortable &&
1767
- column.align !== "right" &&
1768
- !_vm.instance.editing
1769
- ? _c(
1770
- "v-icon",
1771
- {
1772
- staticClass:
1773
- "zd-table-cell-sort-icon",
1774
- attrs: { small: "" }
1775
- },
1776
- [
1777
- _vm._v(
1778
- _vm._s(
1779
- _vm.$getIcon(
1780
- "chevronUp"
1781
- )
1782
- )
1783
- )
1784
- ]
1785
- )
1786
- : _vm._e(),
1787
- _vm._v(" "),
1788
- _vm.instance.datasource.findOrderIndex(
1789
- column.name
1790
- ) >= 0
1791
- ? _c(
1792
- "span",
1793
- {
1794
- staticClass:
1795
- "zd-table-cell-sort-order"
1796
- },
1797
- [
1798
- _vm._v(
1799
- _vm._s(
1800
- _vm.instance.datasource.findOrderIndex(
1801
- column.name
1802
- ) + 1
1803
- )
1804
- )
1805
- ]
1806
- )
1807
- : _vm._e()
1808
- ],
1809
- 1
1810
- )
1811
- : _vm._e()
1812
- ]
1813
- : [
1814
- _c(
1815
- "span",
1816
- {
1817
- staticClass: "zd-table-cell-name"
1818
- },
1819
- [
1820
- _vm._v(
1821
- _vm._s(_vm.$t(column.label))
1855
+ _vm._v(
1856
+ _vm._s(_vm.$t(column.label))
1857
+ )
1858
+ ]
1822
1859
  )
1823
- ]
1824
- )
1825
- ],
1826
- _vm._v(" "),
1827
- _vm.instance.columnFilterButton &&
1828
- column.filterable
1829
- ? _c(
1830
- "span",
1831
- {
1832
- class: [
1833
- "tek-grid-column-filter-button",
1834
- {
1835
- "has-filter-data": _vm.instance.columnHasFilterData(
1836
- column
1837
- )
1838
- }
1839
- ]
1840
- },
1841
- [
1842
- _c(
1843
- "v-menu",
1860
+ ],
1861
+ _vm._v(" "),
1862
+ _vm.instance.columnFilterButton &&
1863
+ column.filterable
1864
+ ? _c(
1865
+ "span",
1844
1866
  {
1845
- attrs: {
1846
- "offset-overflow": "",
1847
- "offset-y": "",
1848
- "min-width": 200,
1849
- transition:
1850
- "scale-transition",
1851
- "content-class":
1852
- "tek-grid-column-filter-menu",
1853
- "close-on-content-click": false
1854
- },
1855
- scopedSlots: _vm._u(
1856
- [
1857
- {
1858
- key: "activator",
1859
- fn: function(ref) {
1860
- var on = ref.on;
1861
- return [
1862
- _c(
1863
- "v-icon",
1864
- _vm._g(
1865
- {},
1866
- Object.assign(
1867
- {},
1868
- _vm.getFilterActivatorEvents(
1869
- on
1870
- )
1871
- )
1872
- ),
1873
- [
1874
- _vm._v(
1875
- _vm._s(
1876
- _vm.$getIcon(
1877
- "filter"
1878
- )
1879
- )
1880
- )
1881
- ]
1882
- )
1883
- ]
1884
- }
1885
- }
1886
- ],
1887
- null,
1888
- true
1889
- )
1867
+ class: [
1868
+ "tek-grid-column-filter-button",
1869
+ {
1870
+ "has-filter-data": _vm.instance.columnHasFilterData(
1871
+ column
1872
+ )
1873
+ }
1874
+ ]
1890
1875
  },
1891
1876
  [
1892
- _vm._v(" "),
1893
- _vm._l(
1894
- _vm.getColumnFilterOptions(
1895
- column
1896
- ),
1897
- function(item, filterIndex) {
1898
- return _c(
1899
- "span",
1900
- { key: filterIndex },
1877
+ _c(
1878
+ "v-menu",
1879
+ {
1880
+ attrs: {
1881
+ "offset-overflow": "",
1882
+ "offset-y": "",
1883
+ "min-width": 200,
1884
+ transition:
1885
+ "scale-transition",
1886
+ "content-class":
1887
+ "tek-grid-column-filter-menu",
1888
+ "close-on-content-click": false
1889
+ },
1890
+ scopedSlots: _vm._u(
1901
1891
  [
1902
- filterIndex > 0
1903
- ? _c(
1904
- "zd-radio",
1905
- _vm._b(
1906
- {
1907
- attrs: {
1908
- name:
1909
- _vm
1910
- .instance
1911
- .name +
1912
- "-" +
1913
- column.name +
1914
- "-filter-relation-" +
1915
- filterIndex
1916
- }
1917
- },
1918
- "zd-radio",
1919
- {
1920
- showLabel: false,
1921
- showHelper: false,
1922
- vertical: false,
1923
- cssClass:
1924
- "zd-mb-2",
1925
- datasource:
1926
- _vm.instance
1927
- .filterRelationsDatasource,
1928
- dataValue:
1929
- "value",
1930
- dataLabel:
1931
- "text",
1932
- value:
1933
- item.relation,
1934
- events: {
1935
- change: _vm.getFilterItemChange(
1936
- "relation",
1937
- column,
1938
- filterIndex
1892
+ {
1893
+ key: "activator",
1894
+ fn: function(ref) {
1895
+ var on = ref.on;
1896
+ return [
1897
+ _c(
1898
+ "v-icon",
1899
+ _vm._g(
1900
+ {},
1901
+ Object.assign(
1902
+ {},
1903
+ _vm.getFilterActivatorEvents(
1904
+ on
1939
1905
  )
1940
- }
1941
- },
1942
- false
1906
+ )
1907
+ ),
1908
+ [
1909
+ _vm._v(
1910
+ _vm._s(
1911
+ _vm.$getIcon(
1912
+ "filter"
1913
+ )
1914
+ )
1915
+ )
1916
+ ]
1943
1917
  )
1944
- )
1945
- : _vm._e(),
1946
- _vm._v(" "),
1947
- item.operation !==
1948
- undefined
1949
- ? _c(
1950
- "zd-select",
1918
+ ]
1919
+ }
1920
+ }
1921
+ ],
1922
+ null,
1923
+ true
1924
+ )
1925
+ },
1926
+ [
1927
+ _vm._v(" "),
1928
+ _vm._l(
1929
+ _vm.getColumnFilterOptions(
1930
+ column
1931
+ ),
1932
+ function(
1933
+ item,
1934
+ filterIndex
1935
+ ) {
1936
+ return _c(
1937
+ "span",
1938
+ { key: filterIndex },
1939
+ [
1940
+ filterIndex > 0
1941
+ ? _c(
1942
+ "zd-radio",
1943
+ _vm._b(
1944
+ {
1945
+ attrs: {
1946
+ name:
1947
+ _vm
1948
+ .instance
1949
+ .name +
1950
+ "-" +
1951
+ column.name +
1952
+ "-filter-relation-" +
1953
+ filterIndex
1954
+ }
1955
+ },
1956
+ "zd-radio",
1957
+ {
1958
+ showLabel: false,
1959
+ showHelper: false,
1960
+ vertical: false,
1961
+ cssClass:
1962
+ "zd-mb-2",
1963
+ datasource:
1964
+ _vm
1965
+ .instance
1966
+ .filterRelationsDatasource,
1967
+ dataValue:
1968
+ "value",
1969
+ dataLabel:
1970
+ "text",
1971
+ value:
1972
+ item.relation,
1973
+ events: {
1974
+ change: _vm.getFilterItemChange(
1975
+ "relation",
1976
+ column,
1977
+ filterIndex
1978
+ )
1979
+ }
1980
+ },
1981
+ false
1982
+ )
1983
+ )
1984
+ : _vm._e(),
1985
+ _vm._v(" "),
1986
+ item.operation !==
1987
+ undefined
1988
+ ? _c(
1989
+ "zd-select",
1990
+ _vm._b(
1991
+ {
1992
+ attrs: {
1993
+ name:
1994
+ _vm
1995
+ .instance
1996
+ .name +
1997
+ "-" +
1998
+ column.name +
1999
+ "-filter-operation-" +
2000
+ filterIndex
2001
+ }
2002
+ },
2003
+ "zd-select",
2004
+ {
2005
+ autocomplete: false,
2006
+ showLabel: false,
2007
+ showHelper: false,
2008
+ clearable: false,
2009
+ cssClass:
2010
+ "zd-mb-2",
2011
+ datasource:
2012
+ _vm
2013
+ .instance
2014
+ .filterOperationsDatasource,
2015
+ dataValue:
2016
+ "value",
2017
+ dataText:
2018
+ "text",
2019
+ value:
2020
+ item.operation,
2021
+ events: {
2022
+ change: _vm.getFilterItemChange(
2023
+ "operation",
2024
+ column,
2025
+ filterIndex
2026
+ )
2027
+ }
2028
+ },
2029
+ false
2030
+ )
2031
+ )
2032
+ : _vm._e(),
2033
+ _vm._v(" "),
2034
+ _c(
2035
+ _vm.componentType ||
2036
+ column
2037
+ .componentProps
2038
+ .component,
1951
2039
  _vm._b(
1952
2040
  {
2041
+ tag:
2042
+ "component",
1953
2043
  attrs: {
1954
2044
  name:
1955
2045
  _vm
@@ -1957,116 +2047,70 @@ var __vue_render__$7 = function() {
1957
2047
  .name +
1958
2048
  "-" +
1959
2049
  column.name +
1960
- "-filter-operation-" +
2050
+ "-filter-value-" +
1961
2051
  filterIndex
1962
2052
  }
1963
2053
  },
1964
- "zd-select",
1965
- {
1966
- autocomplete: false,
1967
- showLabel: false,
1968
- showHelper: false,
1969
- clearable: false,
1970
- cssClass:
1971
- "zd-mb-2",
1972
- datasource:
1973
- _vm.instance
1974
- .filterOperationsDatasource,
1975
- dataValue:
1976
- "value",
1977
- dataText:
1978
- "text",
1979
- value:
1980
- item.operation,
1981
- events: {
1982
- change: _vm.getFilterItemChange(
1983
- "operation",
1984
- column,
1985
- filterIndex
1986
- )
2054
+ "component",
2055
+ Object.assign(
2056
+ {},
2057
+ column.componentProps,
2058
+ {
2059
+ showLabel: false,
2060
+ showHelper: true,
2061
+ autofill: false,
2062
+ cssClass:
2063
+ "zd-mb-2",
2064
+ value:
2065
+ item.value,
2066
+ persistentHint: true,
2067
+ events: {
2068
+ input: _vm.getFilterValueChange(
2069
+ column,
2070
+ filterIndex
2071
+ )
2072
+ }
1987
2073
  }
1988
- },
2074
+ ),
1989
2075
  false
1990
2076
  )
1991
2077
  )
1992
- : _vm._e(),
1993
- _vm._v(" "),
1994
- _c(
1995
- _vm.componentType ||
1996
- column
1997
- .componentProps
1998
- .component,
1999
- _vm._b(
2000
- {
2001
- tag: "component",
2002
- attrs: {
2003
- name:
2004
- _vm.instance
2005
- .name +
2006
- "-" +
2007
- column.name +
2008
- "-filter-value-" +
2009
- filterIndex
2010
- }
2011
- },
2012
- "component",
2013
- Object.assign(
2014
- {},
2015
- column.componentProps,
2016
- {
2017
- showLabel: false,
2018
- showHelper: true,
2019
- autofill: false,
2020
- cssClass:
2021
- "zd-mb-2",
2022
- value:
2023
- item.value,
2024
- persistentHint: true,
2025
- events: {
2026
- input: _vm.getFilterValueChange(
2027
- column,
2028
- filterIndex
2029
- )
2030
- }
2031
- }
2032
- ),
2033
- false
2034
- )
2078
+ ],
2079
+ 1
2035
2080
  )
2036
- ],
2037
- 1
2081
+ }
2038
2082
  )
2039
- }
2083
+ ],
2084
+ 2
2040
2085
  )
2041
2086
  ],
2042
- 2
2087
+ 1
2043
2088
  )
2044
- ],
2045
- 1
2046
- )
2047
- : _vm._e(),
2048
- _vm._v(" "),
2049
- _vm.instance.resizeColumns
2050
- ? _c(
2051
- "span",
2052
- {
2053
- staticClass:
2054
- "zd-grid-resize-handle",
2055
- on: {
2056
- mousedown: function($event) {
2057
- return _vm.resizeMouseDownHandler(
2058
- column,
2059
- $event
2060
- )
2089
+ : _vm._e(),
2090
+ _vm._v(" "),
2091
+ _vm.instance.resizeColumns
2092
+ ? _c(
2093
+ "span",
2094
+ {
2095
+ staticClass:
2096
+ "zd-grid-resize-handle",
2097
+ on: {
2098
+ mousedown: function($event) {
2099
+ return _vm.resizeMouseDownHandler(
2100
+ column,
2101
+ $event
2102
+ )
2103
+ },
2104
+ click: _vm.resizeClickHandler
2105
+ }
2061
2106
  },
2062
- click: _vm.resizeClickHandler
2063
- }
2064
- },
2065
- [_vm._v("‖")]
2066
- )
2067
- : _vm._e()
2068
- ],
2069
- 2
2107
+ [_vm._v("‖")]
2108
+ )
2109
+ : _vm._e()
2110
+ ],
2111
+ 2
2112
+ )
2113
+ ]
2070
2114
  )
2071
2115
  : _vm._e()
2072
2116
  ]
@@ -2281,11 +2325,18 @@ var __vue_render__$7 = function() {
2281
2325
  ).editable
2282
2326
  }
2283
2327
  ],
2284
- style: Object.assign(
2285
- {},
2286
- column,
2287
- cellProps
2288
- ).style,
2328
+ style: [
2329
+ Object.assign(
2330
+ {},
2331
+ column,
2332
+ cellProps
2333
+ ).style,
2334
+ Object.assign(
2335
+ {},
2336
+ column,
2337
+ cellProps
2338
+ ).cssStyle
2339
+ ],
2289
2340
  on: {
2290
2341
  click: function($event) {
2291
2342
  return _vm.cellClick(
@@ -2362,15 +2413,18 @@ var __vue_render__$7 = function() {
2362
2413
  style: {
2363
2414
  width:
2364
2415
  _vm.calcWidth(
2416
+ column,
2365
2417
  column.maxWidth ||
2366
2418
  column.minWidth
2367
2419
  ) || "unset",
2368
2420
  "min-width":
2369
2421
  _vm.calcWidth(
2422
+ column,
2370
2423
  column.minWidth
2371
2424
  ) || "unset",
2372
2425
  "max-width":
2373
2426
  _vm.calcWidth(
2427
+ column,
2374
2428
  column.maxWidth
2375
2429
  ) || "unset"
2376
2430
  }
@@ -2513,17 +2567,34 @@ var __vue_render__$7 = function() {
2513
2567
  style: {
2514
2568
  width:
2515
2569
  _vm.calcWidth(
2570
+ column,
2516
2571
  column.maxWidth ||
2517
2572
  column.minWidth
2518
2573
  ) || "unset",
2519
2574
  "min-width":
2520
2575
  _vm.calcWidth(
2576
+ column,
2521
2577
  column.minWidth
2522
2578
  ) || "unset",
2523
2579
  "max-width":
2524
2580
  _vm.calcWidth(
2581
+ column,
2525
2582
  column.maxWidth
2526
2583
  ) || "unset"
2584
+ },
2585
+ on: {
2586
+ mouseenter: function(
2587
+ $event
2588
+ ) {
2589
+ return _vm.checkOverflow(
2590
+ $event
2591
+ )
2592
+ },
2593
+ mouseleave: function(
2594
+ $event
2595
+ ) {
2596
+ return _vm.removeTooltip()
2597
+ }
2527
2598
  }
2528
2599
  },
2529
2600
  [
@@ -2552,7 +2623,24 @@ var __vue_render__$7 = function() {
2552
2623
  key: column.name,
2553
2624
  class: [
2554
2625
  "zd-table-cell",
2555
- "text-" + column.align
2626
+ "text-" + column.align,
2627
+ Object.assign(
2628
+ {},
2629
+ column,
2630
+ cellProps
2631
+ ).cssClass
2632
+ ],
2633
+ style: [
2634
+ Object.assign(
2635
+ {},
2636
+ column,
2637
+ cellProps
2638
+ ).style,
2639
+ Object.assign(
2640
+ {},
2641
+ column,
2642
+ cellProps
2643
+ ).cssStyle
2556
2644
  ],
2557
2645
  on: {
2558
2646
  click: function($event) {
@@ -2626,7 +2714,7 @@ var __vue_render__$7 = function() {
2626
2714
  key: "no-data",
2627
2715
  fn: function() {
2628
2716
  return [
2629
- _c("zd-grid-no-data", {
2717
+ _c("zd-iterable-no-data", {
2630
2718
  ref: "gridNoData",
2631
2719
  attrs: {
2632
2720
  name: _vm.instance.name + "_no_data",
@@ -2672,19 +2760,20 @@ var __vue_render__$7 = function() {
2672
2760
  key: "footer",
2673
2761
  fn: function() {
2674
2762
  return [
2675
- _c(
2676
- "zd-grid-footer",
2677
- {
2678
- ref: "gridFooter",
2679
- attrs: {
2680
- name: _vm.instance.name + "_footer",
2681
- instance: _vm.instance,
2682
- footerSlot: _vm.instance.footerSlot
2683
- }
2684
- },
2685
- [_vm._t("footerSlot")],
2686
- 2
2687
- )
2763
+ !_vm.$slots.footerSlot
2764
+ ? [
2765
+ _c("zd-grid-footer", {
2766
+ ref: "gridFooter",
2767
+ attrs: {
2768
+ name: _vm.instance.name + "_footer",
2769
+ instance: _vm.instance,
2770
+ footerSlot: _vm.instance.footerSlot
2771
+ }
2772
+ })
2773
+ ]
2774
+ : _vm._e(),
2775
+ _vm._v(" "),
2776
+ _vm._t("footerSlot")
2688
2777
  ]
2689
2778
  },
2690
2779
  proxy: true
@@ -2709,7 +2798,7 @@ __vue_render__$7._withStripped = true;
2709
2798
  /* style */
2710
2799
  const __vue_inject_styles__$7 = function (inject) {
2711
2800
  if (!inject) return
2712
- inject("data-v-948bc68a_0", { source: ".tek-grid .zd-grid-toolbar {\n height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n line-height: 22px;\n}\n.tek-grid table thead tr th {\n padding-right: 15px !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n cursor: pointer;\n font-size: 15px;\n width: 15px;\n padding: 0 3px;\n opacity: 0;\n color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n opacity: 1;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n opacity: 1;\n}\n.tek-grid table tbody tr.footer {\n background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n font-weight: 700;\n font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation {\n width: 22px;\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n width: 8px;\n display: inline-block;\n vertical-align: middle;\n margin-left: 14px;\n height: 100%;\n border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n width: 10px;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n height: 60%;\n border-bottom: solid 1px #ccc;\n position: relative;\n top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n height: auto;\n}\n.tekgrid-actions-dropdown > * {\n display: block;\n}\n.tek-grid-column-filter-menu {\n background: white;\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}\n\n/*# sourceMappingURL=TekGrid.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-grid/TekGrid.vue","TekGrid.vue"],"names":[],"mappings":"AAqbA;EACA,YAAA;ACpbA;ADsbA;EACA,mBAAA;ACpbA;ADubA;EACA,YAAA;ACrbA;ADwbA;EACA,iBAAA;ACtbA;AD6bA;EACA,8BAAA;AC3bA;AD6bA;EACA,qBAAA;AC3bA;AD6bA;EACA,eAAA;EACA,eAAA;EACA,WAAA;EACA,cAAA;EACA,UAAA;EACA,WAAA;AC3bA;AD+bA;EACA,UAAA;EACA,4BAAA;AC7bA;ADqcA;EACA,UAAA;ACncA;AD4cA;EACA,mBAAA;AC1cA;AD4cA;EACA,gBAAA;AC1cA;AD8cA;EACA,gBAAA;AC5cA;AD8cA;EACA,gBAAA;EACA,eAAA;AC5cA;ADkdA;EACA,iBAAA;AChdA;ADkdA;EACA,eAAA;AChdA;ADkdA;EACA,yBAAA;AChdA;ADqdA;EACA,qBAAA;EACA,sBAAA;ACndA;AD0dA;EACA,WAAA;EACA,qBAAA;EACA,sBAAA;ACxdA;AD0dA;EACA,WAAA;ACxdA;AD4dA;EACA,UAAA;EACA,qBAAA;EACA,sBAAA;EACA,iBAAA;EACA,YAAA;EACA,2BAAA;AC1dA;AD4dA;EACA,WAAA;EACA,iBAAA;AC1dA;AD6dA;EACA,WAAA;EACA,6BAAA;EACA,kBAAA;EACA,SAAA;AC3dA;AD8dA;EACA,iBAAA;AC5dA;ADkeA;EACA,YAAA;ACheA;ADseA;EACA,cAAA;ACneA;ADueA;EACA,iBAAA;EACA,yBAAA;EACA,iBAAA;ACpeA;;AAEA,sCAAsC","file":"TekGrid.vue","sourcesContent":["<template>\n <v-data-table\n v-show=\"instance.isVisible\"\n ref=\"grid\"\n v-model=\"instance.selectedRows\"\n fixed-header\n disable-pagination\n hide-default-header\n hide-default-footer\n :class=\"['zd-grid', 'tek-grid', instance.cssClass]\"\n :name=\"instance.name\"\n :headers=\"instance.columns\"\n :height=\"instance.height\"\n :items=\"getData()\"\n :search=\"instance.datasource.search\"\n :show-select=\"instance.selectable\"\n :dense=\"instance.dense\"\n :loading=\"instance.datasource.loading\"\n :item-key=\"instance.datasource.uniqueKey\"\n :style=\"[cssColorVars, instance.cssStyle]\"\n disable-sort\n disable-filtering\n tabindex=\"0\"\n @current-items=\"changeData($event)\"\n >\n <template v-slot:top>\n <zd-grid-top\n :name=\"instance.name+'_top'\"\n :toolbarSlot=\"instance.toolbarSlot\"\n :instance=\"instance\"\n ref=\"gridTopSlot\">\n <slot name=\"toolbarSlot\"></slot>\n </zd-grid-top>\n </template>\n\n <template v-if=\"instance.showHeader\" v-slot:header=\"{ props, on }\">\n <thead class=\"zd-grid-table-header\">\n <tr>\n <th class=\"zd-table-cell selectable\" v-if=\"instance.selectable\" :style=\"'background-color: '+instance.headerBackground\">\n <v-checkbox\n hide-details\n color=\"primary\"\n :disabled=\"instance.editing\"\n :on-icon=\"$getIcon('checkboxOn')\"\n :off-icon=\"$getIcon('checkboxOff')\"\n :indeterminate-icon=\"$getIcon('checkboxIndeterminate')\"\n class=\"zd-grid-header-checkbox\"\n :input-value=\"props.everyItem\"\n :indeterminate=\"!props.everyItem && props.someItems\"\n @click.stop=\"on['toggle-select-all'](!props.everyItem); selectAllClick(!props.everyItem, $event);\"\n ></v-checkbox>\n </th>\n <template v-for=\"(column, index) in props.headers\">\n <th\n v-if=\"column.isVisible && instance.groupColumnNames.indexOf(column.name) === -1 && getColWidth(column)\"\n :key=\"column.name\"\n :index=\"index\"\n :class=\"[\n 'zd-table-cell',\n 'column-th-'+ column.name + '-' + instance.name,\n {\n sortable: column.sortable && !instance.editing,\n sortHandle: instance.dragColumns,\n },\n 'text-' + column.align,\n instance.datasource.getOrderByColumn(column.name),\n instance.datasource.getOrderByColumn(column.name) !== null ? 'active' : ''\n ]\"\n :style=\"{\n 'background-color': instance.headerBackground,\n 'min-width': calcWidth(column.minWidth) || 'unset',\n 'max-width': calcWidth(column.maxWidth) || 'unset'\n }\"\n >\n <template v-if=\"column.type !== 'action'\">\n <template v-if=\"index === 0 && instance.groupColumnNames.length > 0\">\n <span\n v-for=\"(name, groupIndex) in instance.groupColumnNames\"\n :key=\"name\"\n :class=\"[\n 'tek-grid-header-group-identation',\n {\n 'first-group': groupIndex === 0,\n }\n ]\"\n ></span>\n </template>\n <span\n class=\"zd-table-cell-sort\"\n v-if=\"column.sortable && column.align === 'right' && !instance.editing\"\n @click=\"instance.changeColumnOrder(column)\"\n >\n <v-icon class=\"zd-table-cell-sort-icon\" small v-if=\"column.sortable && column.align === 'right' && !instance.editing\">{{ $getIcon('chevronUp') }}</v-icon>\n <span class=\"zd-table-cell-sort-order left\" v-if=\"instance.datasource.findOrderIndex(column.name) >= 0\">{{ instance.datasource.findOrderIndex(column.name) + 1}}</span>\n </span>\n <span\n :class=\"[\n 'zd-table-cell-name',\n {\n 'overflow-hidden': column.overflow === 'hidden',\n 'overflow-wrap': column.overflow === 'wrap'\n },\n (!isNaN(column.overflow) ? 'overflow-clamp overflow-clamp-'+column.overflow : '')\n ]\"\n :style=\"{\n 'max-width': calcColumnLabelWidth(column)\n }\"\n @click=\"instance.changeColumnOrder(column)\"\n >\n {{ $t(column.label) }}\n <span\n v-if=\"column.aggregation\"\n class=\"tek-grid-column-aggregation\"\n >({{ $t('TEKGRID_AGGREGATION_'+column.aggregation) }})</span>\n </span>\n <span\n class=\"zd-table-cell-sort\"\n v-if=\"column.sortable && column.align !== 'right' && !instance.editing\"\n @click=\"instance.changeColumnOrder(column)\"\n >\n <v-icon class=\"zd-table-cell-sort-icon\" small v-if=\"column.sortable && column.align !== 'right' && !instance.editing\">{{ $getIcon('chevronUp') }}</v-icon>\n <span class=\"zd-table-cell-sort-order\" v-if=\"instance.datasource.findOrderIndex(column.name) >= 0\">{{ instance.datasource.findOrderIndex(column.name) + 1}}</span>\n </span>\n </template>\n <template v-else>\n <span class=\"zd-table-cell-name\">{{ $t(column.label) }}</span>\n </template>\n <span\n v-if=\"instance.columnFilterButton && column.filterable\"\n :class=\"[\n 'tek-grid-column-filter-button',\n {\n 'has-filter-data': instance.columnHasFilterData(column)\n }\n ]\"\n >\n <v-menu\n offset-overflow\n offset-y\n :min-width=\"200\"\n transition=\"scale-transition\"\n content-class=\"tek-grid-column-filter-menu\"\n :close-on-content-click=\"false\"\n >\n <template v-slot:activator=\"{ on }\">\n <v-icon v-on=\"{ ...getFilterActivatorEvents(on) }\">{{ $getIcon('filter') }}</v-icon>\n </template>\n <span\n v-for=\"(item, filterIndex) in getColumnFilterOptions(column)\"\n :key=\"filterIndex\"\n >\n <zd-radio\n :name=\"`${instance.name}-${column.name}-filter-relation-${filterIndex}`\"\n v-if=\"filterIndex > 0\"\n v-bind=\"{\n showLabel: false,\n showHelper: false,\n vertical: false,\n cssClass: 'zd-mb-2',\n datasource: instance.filterRelationsDatasource,\n dataValue: 'value',\n dataLabel: 'text',\n value: item.relation,\n events: {\n change: getFilterItemChange('relation', column, filterIndex),\n },\n }\"\n />\n <zd-select\n :name=\"`${instance.name}-${column.name}-filter-operation-${filterIndex}`\"\n v-if=\"item.operation !== undefined\"\n v-bind=\"{\n autocomplete: false,\n showLabel: false,\n showHelper: false,\n clearable: false,\n cssClass: 'zd-mb-2',\n datasource: instance.filterOperationsDatasource,\n dataValue: 'value',\n dataText: 'text',\n value: item.operation,\n events: {\n change: getFilterItemChange('operation', column, filterIndex),\n },\n }\"\n />\n <component\n :name=\"`${instance.name}-${column.name}-filter-value-${filterIndex}`\"\n :is=\"componentType || column.componentProps.component\"\n v-bind=\"{\n ...column.componentProps,\n showLabel: false,\n showHelper: true,\n autofill: false,\n cssClass: 'zd-mb-2',\n value: item.value,\n persistentHint: true,\n events: {\n input: getFilterValueChange(column, filterIndex)\n },\n }\"\n />\n </span>\n </v-menu>\n </span>\n <span\n v-if=\"instance.resizeColumns\"\n class=\"zd-grid-resize-handle\"\n @mousedown=\"resizeMouseDownHandler(column, $event)\"\n @click=\"resizeClickHandler\"\n >‖</span>\n </th>\n </template>\n </tr>\n </thead>\n </template>\n\n <template\n v-if=\"instance.virtualScroll && scrollData.start > 0\"\n v-slot:body.prepend=\"{ headers }\"\n >\n <tr>\n <td\n :colspan=\"headers.length\"\n :style=\"'padding-top:'+scrollData.startHeight+'px'\"\n >\n </td>\n </tr>\n </template>\n\n <template\n v-if=\"instance.virtualScroll && scrollData.start + scrollData.perPage < (scrollData.visibleData || []).length\"\n v-slot:body.append=\"{ headers }\"\n >\n <tr>\n <td\n :colspan=\"headers.length\"\n :style=\"'padding-top:'+scrollData.endHeight+'px'\"\n >\n </td>\n </tr>\n </template> \n\n <template v-if=\"instance.datasource.data.length\" v-slot:item=\"{ item, select, isSelected, headers }\">\n <tr \n v-if=\"item.group && instance.isItemVisible(item)\"\n :class=\"{\n current: isCurrentRow(item),\n }\"\n @click=\"rowClick(item, $event)\"\n >\n <td\n colspan=\"999\"\n class=\"zd-table-cell text-left zd-table-group-header\"\n >\n <template>\n <span\n v-for=\"(groupHeader, groupIndex) in item.groupHeaders\"\n :key=\"groupHeader.groupColumnName\"\n :class=\"[\n 'tek-grid-body-group-identation',\n {\n 'first-group': groupIndex === 0,\n },\n ]\"\n ></span>\n </template>\n <v-icon\n :class=\"{ closed: !item.groupOpened }\"\n @click=\"instance.openGroup(item)\"\n :key=\"item.groupIndex + '_' + item.groupValue\"\n >{{ $getIcon('expand') }}</v-icon>\n <span>{{ item.groupLabel + ': ' + item.groupValue }}</span>\n </td>\n </tr>\n <tr\n v-else-if=\"instance.isItemVisible(item)\"\n :class=\"{\n active: isSelected,\n current: isCurrentRow(item),\n footer: item.groupFooter,\n summary: item.groupSummary,\n }\"\n @click=\"rowClick(item, $event)\"\n >\n <td class=\"zd-table-cell selectable\" v-if=\"instance.selectable\">\n <v-checkbox\n hide-details\n color=\"primary\"\n class=\"zd-grid-row-checkbox\"\n :disabled=\"instance.editing\"\n :on-icon=\"$getIcon('checkboxOn')\"\n :off-icon=\"$getIcon('checkboxOff')\"\n :true-value=\"true\"\n :false-value=\"false\"\n :input-value=\"isSelected\"\n @click.stop=\"select(!isSelected); selectRowClick(item, !isSelected, $event);\"\n ></v-checkbox>\n </td>\n <template v-for=\"(header, index) in headers\">\n <template v-for=\"{ column, cellProps } in [{ column: header, cellProps: item.groupFooter ? {} : (instance.cellsApplied[rowKey(item)] || {})[header.name] }]\">\n <template v-if=\"column.isVisible && instance.groupColumnNames.indexOf(column.name) === -1 && column.type !== 'action'\">\n <td\n :key=\"column.name\"\n :class=\"[\n 'zd-table-cell',\n 'text-' + column.align,\n {...column, ...cellProps}.cssClass,\n {\n 'zd-table-column-editable': column.editable,\n 'zd-table-cell-editable': {...column, ...cellProps}.editable,\n }\n ]\"\n :style=\"{...column, ...cellProps}.style\"\n @click=\"cellClick(item, column, $event)\"\n >\n <template v-if=\"index === 0 && instance.groupColumnNames.length > 0\">\n <span\n v-for=\"(name, groupIndex) in instance.groupColumnNames\"\n :key=\"name\"\n :class=\"[\n 'tek-grid-body-group-identation',\n {\n 'first-group': groupIndex === 0,\n 'group-footer': item.groupFooter && groupIndex === item.groupIndex,\n 'group-footer-no-line': (item.groupFooter && groupIndex > item.groupIndex) || item.groupSummary,\n }\n ]\"\n ></span>\n </template>\n <v-skeleton-loader class=\"zd-skeleton-table-cell\" v-if=\"column.loading\" loading type=\"table-cell\"/>\n <span\n v-show=\"!column.loading\"\n v-if=\"{...column, ...cellProps}.editable && instance.editing && !item.groupFooter\"\n class=\"zd-table-cell-inline-edit\"\n :style=\"{\n 'width': calcWidth(column.maxWidth || column.minWidth) || 'unset',\n 'min-width': calcWidth(column.minWidth) || 'unset',\n 'max-width': calcWidth(column.maxWidth) || 'unset'\n }\"\n >\n <span class=\"zd-table-cell-edit-icon\" v-if=\"instance.isEdited(column, item)\">\n <v-icon v-if=\"instance.isValid(column, item)\" color=\"primary\">{{ $getIcon('pencil') }}</v-icon>\n <v-icon v-else color=\"error\">{{ $getIcon('warning') }}</v-icon>\n </span>\n <component\n :is=\"column.componentProps.component\"\n :key=\"column.name + rowKey(item)\"\n v-bind=\"getEditableComponent(column, item, cellProps)\" />\n </span>\n <span v-else-if=\"hasToggleIcon(column, item)\">\n <v-icon>{{ $getIcon(column.formatterByRow(item, cellProps)) }}</v-icon>\n </span>\n <span v-else\n v-show=\"!column.loading\"\n :class=\"[\n 'zd-table-cell-text',\n {\n 'zd-table-cell-text-editable': {...column, ...cellProps}.editable && !item.groupFooter,\n 'overflow-hidden': column.overflow === 'hidden',\n 'overflow-wrap': column.overflow === 'wrap'\n },\n (!isNaN(column.overflow) ? 'overflow-clamp overflow-clamp-'+column.overflow : '')\n ]\"\n :style=\"{\n 'width': calcWidth(column.maxWidth || column.minWidth) || 'unset',\n 'min-width': calcWidth(column.minWidth) || 'unset',\n 'max-width': calcWidth(column.maxWidth) || 'unset'\n }\"\n >\n {{ column.formatterByRow(item, cellProps) }}\n </span>\n </td>\n </template>\n <template v-else-if=\"column.isVisible && column.type === 'action'\">\n <td\n :key=\"column.name\"\n :class=\"['zd-table-cell', 'text-' + column.align]\"\n @click=\"cellClick(item, column, $event)\"\n >\n <template v-if=\"index === 0 && instance.groupColumnNames.length > 0\">\n <span\n v-for=\"name in instance.groupColumnNames\"\n :key=\"name\"\n class=\"tek-grid-body-group-identation\"\n ></span>\n </template>\n <component\n v-for=\"child in column.childrenProps\"\n :key=\"child.name + rowKey(item)\"\n :is=\"child.component\"\n v-bind=\"instance.getActionComponent(child, column, item)\"\n ></component>\n </td>\n </template>\n </template>\n </template>\n </tr>\n </template>\n\n <template v-slot:no-data>\n <zd-grid-no-data\n :name=\"instance.name+'_no_data'\"\n :instance=\"instance\"\n :noDataSlot=\"instance.noDataSlot\"\n :noResultSlot=\"instance.noResultSlot\"\n :errorSlot=\"instance.errorSlot\"\n ref=\"gridNoData\"\n >\n <template v-slot:errorSlot>\n <slot name=\"errorSlot\"></slot>\n </template>\n <template v-slot:noResultSlot>\n <slot name=\"noResultSlot\"></slot>\n </template>\n <template v-slot:noDataSlot>\n <slot name=\"noDataSlot\"></slot>\n </template>\n </zd-grid-no-data>\n </template>\n\n <template v-if=\"instance.showFooter\" v-slot:footer>\n <zd-grid-footer\n :name=\"instance.name+'_footer'\"\n :instance=\"instance\"\n :footerSlot=\"instance.footerSlot\"\n ref=\"gridFooter\">\n <slot name=\"footerSlot\"></slot>\n </zd-grid-footer>\n </template>\n </v-data-table>\n</template>\n\n<script lang=\"ts\" src=\"./TekGrid.ts\"></script>\n\n<style lang=\"scss\">\n.tek-grid {\n .zd-grid-toolbar {\n height: 36px;\n\n .zd-grid-toolbar-slot {\n align-items: center;\n }\n\n .toolbar-divider {\n margin: 10px;\n }\n\n .toolbar-title {\n line-height: 22px;\n }\n }\n\n table {\n thead {\n tr {\n th {\n padding-right: 15px !important;\n\n .tek-grid-column-filter-button {\n display: inline-block;\n\n .v-icon {\n cursor: pointer;\n font-size: 15px;\n width: 15px;\n padding: 0 3px;\n opacity: 0;\n color: #ccc;\n }\n\n &.has-filter-data {\n .v-icon {\n opacity: 1;\n color: var(--v-primary-base);\n }\n }\n }\n }\n\n th:hover {\n .tek-grid-column-filter-button {\n .v-icon {\n opacity: 1;\n }\n }\n }\n }\n }\n\n tbody {\n tr {\n &.footer {\n background: #f6f6f6;\n\n td.zd-table-cell {\n font-weight: 700;\n }\n }\n\n &.summary {\n background: #eee;\n\n td.zd-table-cell {\n font-weight: 700;\n font-size: 15px;\n }\n }\n\n td {\n &.zd-table-cell {\n &.zd-table-group-header {\n font-weight: bold;\n\n .v-icon {\n font-size: 21px;\n\n &.closed {\n transform: rotate(-90deg);\n }\n }\n }\n\n .zd-table-cell-text {\n display: inline-block;\n vertical-align: middle;\n }\n }\n }\n }\n }\n\n .tek-grid-header-group-identation {\n width: 22px;\n display: inline-block;\n vertical-align: middle;\n\n &.first-group {\n width: 20px;\n }\n }\n\n .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 &.first-group {\n width: 10px;\n margin-left: 10px;\n }\n\n &.group-footer {\n height: 60%;\n border-bottom: solid 1px #ccc;\n position: relative;\n top: -25%;\n }\n\n &.group-footer-no-line {\n border-left: none;\n }\n }\n }\n\n .zd-skeleton-table-cell {\n .v-skeleton-loader__table-cell {\n height: auto;\n }\n }\n}\n\n.tekgrid-actions-dropdown {\n > * {\n display: block;\n }\n}\n\n.tek-grid-column-filter-menu {\n background: white;\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}\n</style>",".tek-grid .zd-grid-toolbar {\n height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n line-height: 22px;\n}\n.tek-grid table thead tr th {\n padding-right: 15px !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n cursor: pointer;\n font-size: 15px;\n width: 15px;\n padding: 0 3px;\n opacity: 0;\n color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n opacity: 1;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n opacity: 1;\n}\n.tek-grid table tbody tr.footer {\n background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n font-weight: 700;\n font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n display: inline-block;\n vertical-align: middle;\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\n.tekgrid-actions-dropdown > * {\n display: block;\n}\n\n.tek-grid-column-filter-menu {\n background: white;\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}\n\n/*# sourceMappingURL=TekGrid.vue.map */"]}, media: undefined });
2801
+ inject("data-v-044b178a_0", { source: ".tek-grid .zd-grid-toolbar {\n height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n line-height: 22px;\n}\n.tek-grid table thead tr th {\n padding-right: 15px !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n cursor: pointer;\n font-size: 15px;\n width: 15px;\n padding: 0 3px;\n opacity: 0;\n color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n opacity: 1;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n opacity: 1;\n}\n.tek-grid table tbody tr.footer {\n background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n font-weight: 700;\n font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation {\n width: 22px;\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n width: 8px;\n display: inline-block;\n vertical-align: middle;\n margin-left: 14px;\n height: 100%;\n border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n width: 10px;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n height: 60%;\n border-bottom: solid 1px #ccc;\n position: relative;\n top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n height: auto;\n}\n.tekgrid-actions-dropdown > * {\n display: block;\n}\n.tek-grid-column-filter-menu {\n background: white;\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}", map: undefined, media: undefined });
2713
2802
 
2714
2803
  };
2715
2804
  /* scoped */
@@ -2737,6 +2826,763 @@ __vue_render__$7._withStripped = true;
2737
2826
  undefined
2738
2827
  );
2739
2828
 
2829
+ class TekGridColumnsOptionsController {
2830
+ constructor(modal) {
2831
+ this.columnData = {};
2832
+ this.visibleColumns = [];
2833
+ this.groupedColumns = [];
2834
+ this.otherColumns = [];
2835
+ this.aggregationData = [];
2836
+ this.selectedColumnNames = [];
2837
+ this.searchValue = '';
2838
+ this.updatingSelect = false;
2839
+ this.modal = modal;
2840
+ }
2841
+ updateArrays() {
2842
+ this.visibleColumns = [];
2843
+ this.groupedColumns = [];
2844
+ this.otherColumns = [];
2845
+ Object.keys(this.columnData).forEach((name) => {
2846
+ const column = this.columnData[name];
2847
+ if (this.instanceValue && this.instanceValue.ignoreColumns.indexOf(column.name) === -1) {
2848
+ if (column.grouped) {
2849
+ this.groupedColumns.push(column);
2850
+ }
2851
+ else if (column.isVisible) {
2852
+ this.visibleColumns.push(column);
2853
+ }
2854
+ else {
2855
+ this.otherColumns.push(column);
2856
+ }
2857
+ }
2858
+ });
2859
+ }
2860
+ set instance(instance) {
2861
+ this.instanceValue = instance;
2862
+ this.iterableComponent = instance.iterableComponent;
2863
+ this.aggregationData = instance.getAggregationSelectData();
2864
+ this.columnData = {};
2865
+ this.iterableComponent.columns.forEach((column) => {
2866
+ this.columnData[column.name] = {
2867
+ name: column.name,
2868
+ label: column.label,
2869
+ isVisible: column.isVisible,
2870
+ align: column.align,
2871
+ grouped: column.grouped || false,
2872
+ groupOpened: column.groupOpened || false,
2873
+ aggregation: column.aggregation,
2874
+ aggregationText: this.getAggregationText(column.aggregation),
2875
+ selected: false,
2876
+ };
2877
+ });
2878
+ this.updateArrays();
2879
+ this.selectedColumnNames = [];
2880
+ }
2881
+ getAggregationText(aggregation) {
2882
+ let result = '';
2883
+ if (aggregation) {
2884
+ const idx = this.aggregationData.findIndex((item) => item.value === aggregation);
2885
+ if (idx !== -1) {
2886
+ result = ` (${this.aggregationData[idx].text})`;
2887
+ }
2888
+ }
2889
+ return result;
2890
+ }
2891
+ columnInSearch(column) {
2892
+ return (!this.searchValue || normalize(column.label).indexOf(normalize(this.searchValue)) !== -1);
2893
+ }
2894
+ get visibleColumnData() {
2895
+ return this.visibleColumns.filter(this.columnInSearch.bind(this));
2896
+ }
2897
+ set visibleColumnData(_data) {
2898
+ // do nothing
2899
+ }
2900
+ get groupedColumnData() {
2901
+ return this.groupedColumns.filter(this.columnInSearch.bind(this));
2902
+ }
2903
+ set groupedColumnData(_data) {
2904
+ // do nothing
2905
+ }
2906
+ get otherColumnData() {
2907
+ return this.otherColumns.filter(this.columnInSearch.bind(this));
2908
+ }
2909
+ set otherColumnData(_data) {
2910
+ // do nothing
2911
+ }
2912
+ get hasSelectedColumn() {
2913
+ return this.selectedColumnNames.length > 0;
2914
+ }
2915
+ get hasNoSelectedColumn() {
2916
+ return !this.hasSelectedColumn;
2917
+ }
2918
+ get detailColumnName() {
2919
+ const columnNames = this.selectedColumnNames.length
2920
+ ? this.selectedColumnNames.join(', ')
2921
+ : I18n.translate('TEKGRID_SELECT_COLUMN');
2922
+ return `${I18n.translate('TEKGRID_DETAILS_FOR')} ${columnNames}`;
2923
+ }
2924
+ get hasNoVisibleColumns() {
2925
+ return this.visibleColumns.length === 0;
2926
+ }
2927
+ get hasNoGroupedColumns() {
2928
+ return this.groupedColumns.length === 0;
2929
+ }
2930
+ get hasNoOtherColumns() {
2931
+ return this.otherColumns.length === 0;
2932
+ }
2933
+ get hasNoSingleSelection() {
2934
+ return this.selectedColumnNames.length !== 1;
2935
+ }
2936
+ get selectedColumnLabel() {
2937
+ return this.selectedColumnNames.length === 1 ? this.columnData[this.selectedColumnNames[0]].label : '';
2938
+ }
2939
+ set selectedColumnLabel(value) {
2940
+ if (this.selectedColumnNames.length === 1) {
2941
+ this.columnData[this.selectedColumnNames[0]].label = value;
2942
+ }
2943
+ }
2944
+ getSameValue(propName) {
2945
+ const isEqual = this.selectedColumnNames.length > 0
2946
+ && this.selectedColumnNames
2947
+ .every((name) => this.columnData[name][propName] === this.columnData[this.selectedColumnNames[0]][propName]);
2948
+ return isEqual ? this.columnData[this.selectedColumnNames[0]][propName] : undefined;
2949
+ }
2950
+ setSameValue(propName, value) {
2951
+ this.selectedColumnNames.forEach((name) => {
2952
+ this.columnData[name][propName] = value;
2953
+ });
2954
+ }
2955
+ get groupInSelection() {
2956
+ return this.hasNoSelectedColumn || this.selectedColumnNames.some((name) => this.columnData[name].grouped);
2957
+ }
2958
+ get notGroupInSelection() {
2959
+ return this.hasNoSelectedColumn || this.selectedColumnNames.some((name) => !this.columnData[name].grouped);
2960
+ }
2961
+ get selectedColumnGroupOpened() {
2962
+ return this.getSameValue('groupOpened');
2963
+ }
2964
+ set selectedColumnGroupOpened(value) {
2965
+ this.setSameValue('groupOpened', value);
2966
+ }
2967
+ selectMounted({ component }) {
2968
+ this.updatingSelect = true;
2969
+ if (component.name === 'tekGridColumnsOptionsColumnAlignment') {
2970
+ component.value = this.selectedColumnsAlignment;
2971
+ }
2972
+ else if (component.name === 'tekGridColumnsOptionsColumnAggregation') {
2973
+ component.value = this.selectedColumnsAggregation;
2974
+ }
2975
+ // prevent changing column value from here
2976
+ setTimeout(() => { this.updatingSelect = false; }, 0);
2977
+ }
2978
+ selectChange({ component }) {
2979
+ if (this.updatingSelect)
2980
+ return;
2981
+ if (component.name === 'tekGridColumnsOptionsColumnAlignment') {
2982
+ this.setSameValue('align', component.value);
2983
+ }
2984
+ else {
2985
+ this.setSameValue('aggregation', component.value);
2986
+ this.setSameValue('aggregationText', this.getAggregationText(component.value));
2987
+ }
2988
+ }
2989
+ updateSelects() {
2990
+ this.selectedColumnsAlignment = this.updateSelect('align');
2991
+ this.selectedColumnsAggregation = this.updateSelect('aggregation');
2992
+ }
2993
+ updateSelect(propName) {
2994
+ this.updatingSelect = true;
2995
+ const propValue = this.getSameValue(propName);
2996
+ const selectNames = {
2997
+ align: 'tekGridColumnsOptionsColumnAlignment',
2998
+ aggregation: 'tekGridColumnsOptionsColumnAggregation',
2999
+ };
3000
+ const instances = Metadata.getInstances(selectNames[propName]);
3001
+ if (instances[0]) {
3002
+ instances[0].value = propValue;
3003
+ }
3004
+ // prevent changing column value from here
3005
+ setTimeout(() => { this.updatingSelect = false; }, 0);
3006
+ return propValue;
3007
+ }
3008
+ columnRemoveClick(column) {
3009
+ column.isVisible = false;
3010
+ this.selectedColumnNames.splice(this.selectedColumnNames.indexOf(column.name), 1);
3011
+ this.otherColumns.push(column);
3012
+ }
3013
+ columnVisibleRemoveClick({ element }) {
3014
+ const columnName = element === null || element === void 0 ? void 0 : element.getAttribute('columnname');
3015
+ if (columnName) {
3016
+ const column = this.columnData[columnName];
3017
+ this.columnRemoveClick(column);
3018
+ this.visibleColumns.splice(this.visibleColumns.indexOf(column), 1);
3019
+ }
3020
+ }
3021
+ columnGroupedRemoveClick({ element }) {
3022
+ const columnName = element === null || element === void 0 ? void 0 : element.getAttribute('columnname');
3023
+ if (columnName) {
3024
+ const column = this.columnData[columnName];
3025
+ this.columnRemoveClick(column);
3026
+ this.groupedColumns.splice(this.groupedColumns.indexOf(column), 1);
3027
+ }
3028
+ }
3029
+ isMacPlatform() {
3030
+ return /Mac/.test(navigator.platform);
3031
+ }
3032
+ isMobilePlatform() {
3033
+ return /iPhone|iPad|Android/.test(navigator.platform);
3034
+ }
3035
+ columnClick({ element, event }) {
3036
+ const columnName = element.getAttribute('columnname');
3037
+ if (columnName) {
3038
+ const mouseEvent = event;
3039
+ const multiple = (this.isMacPlatform() && mouseEvent.metaKey) || mouseEvent.ctrlKey || this.isMobilePlatform();
3040
+ if (!multiple) {
3041
+ Object.keys(this.columnData).forEach((name) => {
3042
+ const column = this.columnData[name];
3043
+ column.selected = (column.name === columnName);
3044
+ });
3045
+ }
3046
+ else {
3047
+ this.columnData[columnName].selected = !this.columnData[columnName].selected;
3048
+ }
3049
+ const orderedColumns = this.visibleColumns.concat(this.groupedColumns).concat(this.otherColumns);
3050
+ this.selectedColumnNames = orderedColumns.filter((column) => column.selected).map((column) => column.name);
3051
+ this.updateSelects();
3052
+ }
3053
+ }
3054
+ removeFromSourceList(columnName) {
3055
+ const column = this.columnData[columnName];
3056
+ const visibleIdx = this.visibleColumns.indexOf(column);
3057
+ if (visibleIdx !== -1) {
3058
+ this.visibleColumns.splice(visibleIdx, 1);
3059
+ }
3060
+ else {
3061
+ const groupedIdx = this.groupedColumns.indexOf(column);
3062
+ if (groupedIdx !== -1) {
3063
+ this.groupedColumns.splice(groupedIdx, 1);
3064
+ }
3065
+ else {
3066
+ const otherIdx = this.otherColumns.indexOf(column);
3067
+ if (otherIdx !== -1) {
3068
+ this.otherColumns.splice(otherIdx, 1);
3069
+ }
3070
+ }
3071
+ }
3072
+ }
3073
+ onDragEnd(event) {
3074
+ const columnName = event.item.getAttribute('columnname');
3075
+ if (this.selectedColumnNames.indexOf(columnName) === -1) {
3076
+ this.selectedColumnNames = [columnName];
3077
+ this.updateSelects();
3078
+ setTimeout(() => {
3079
+ Object.keys(this.columnData).forEach((name) => {
3080
+ const column = this.columnData[name];
3081
+ column.selected = (column.name === columnName);
3082
+ });
3083
+ });
3084
+ }
3085
+ this.selectedColumnNames.forEach((name, index) => {
3086
+ const newIndex = event.newIndex + index;
3087
+ if (name) {
3088
+ this.removeFromSourceList(name);
3089
+ const column = this.columnData[name];
3090
+ if (event.to.id === 'tekGridColumnsOptionsVisibleColumns') {
3091
+ column.isVisible = true;
3092
+ column.grouped = false;
3093
+ column.groupOpened = false;
3094
+ this.visibleColumns.splice(newIndex, 0, column);
3095
+ }
3096
+ else if (event.to.id === 'tekGridColumnsOptionsOtherColumns') {
3097
+ column.isVisible = false;
3098
+ column.grouped = false;
3099
+ column.groupOpened = false;
3100
+ this.otherColumns.splice(newIndex, 0, column);
3101
+ }
3102
+ else if (event.to.id === 'tekGridColumnsOptionsGroupedColumns') {
3103
+ column.isVisible = true;
3104
+ column.grouped = true;
3105
+ column.aggregation = undefined;
3106
+ column.aggregationText = '';
3107
+ this.groupedColumns.splice(newIndex, 0, column);
3108
+ }
3109
+ }
3110
+ });
3111
+ }
3112
+ columnContainerMounted({ element }) {
3113
+ if (element) {
3114
+ Sortable.create(element, {
3115
+ handle: '.tek-grid-column-option-box',
3116
+ group: 'column-container',
3117
+ filter: '.no-data, .tek-grid-column-option-grouped-true',
3118
+ onEnd: this.onDragEnd.bind(this),
3119
+ });
3120
+ }
3121
+ }
3122
+ selectAll({ component }) {
3123
+ let list;
3124
+ if (component.name === 'tekGridColumnsOptionsVisibleSelectAll') {
3125
+ list = this.visibleColumns;
3126
+ }
3127
+ else if (component.name === 'tekGridColumnsOptionsOtherSelectAll') {
3128
+ list = this.otherColumns;
3129
+ }
3130
+ else {
3131
+ list = this.groupedColumns;
3132
+ }
3133
+ this.selectedColumnNames = list.map((column) => column.name);
3134
+ Object.keys(this.columnData).forEach((columnName) => {
3135
+ const column = this.columnData[columnName];
3136
+ column.selected = this.selectedColumnNames.indexOf(column.name) !== -1;
3137
+ });
3138
+ }
3139
+ cancelChanges() {
3140
+ this.modal.hide();
3141
+ }
3142
+ applyChanges({ event, element }) {
3143
+ const ignoredColumns = this.iterableComponent.columns
3144
+ .filter((column) => this.instanceValue && this.instanceValue.ignoreColumns.indexOf(column.name) !== -1);
3145
+ const orderedColumns = this.groupedColumns.concat(this.visibleColumns).concat(this.otherColumns).concat(ignoredColumns);
3146
+ if (this.iterableComponent) {
3147
+ this.iterableComponent.columns = orderedColumns.map((orderColumn) => {
3148
+ const columnIdx = this.iterableComponent.columns.findIndex((column) => column.name === orderColumn.name);
3149
+ const iterableColumn = this.iterableComponent.columns[columnIdx];
3150
+ iterableColumn.isVisible = orderColumn.isVisible;
3151
+ iterableColumn.grouped = orderColumn.grouped;
3152
+ iterableColumn.groupOpened = orderColumn.groupOpened;
3153
+ iterableColumn.label = orderColumn.label;
3154
+ iterableColumn.align = orderColumn.align;
3155
+ iterableColumn.aggregation = orderColumn.aggregation;
3156
+ return iterableColumn;
3157
+ });
3158
+ const { datasource } = this.iterableComponent;
3159
+ const order = datasource.order.filter((item) => {
3160
+ const columnName = item.split('.')[0];
3161
+ return this.groupedColumns.findIndex((column) => column.name === columnName) === -1;
3162
+ });
3163
+ datasource.order = this.groupedColumns.map((column) => `${column.name}.asc`).concat(order);
3164
+ this.iterableComponent.changeLayout(event, element);
3165
+ }
3166
+ this.modal.hide();
3167
+ }
3168
+ }
3169
+
3170
+ class TekGridColumnsOptionsModal {
3171
+ static show(instance) {
3172
+ if (!TekGridColumnsOptionsModal.modal) {
3173
+ TekGridColumnsOptionsModal.modal = ModalService.create(TekGridColumnsOptionsModal.modalDef);
3174
+ TekGridColumnsOptionsModal.controller = new TekGridColumnsOptionsController(TekGridColumnsOptionsModal.modal);
3175
+ Loader.addController(TekGridColumnsOptionsModal.controllerName, TekGridColumnsOptionsModal.controller);
3176
+ }
3177
+ TekGridColumnsOptionsModal.controller.instance = instance;
3178
+ TekGridColumnsOptionsModal.modal.show();
3179
+ }
3180
+ static hide() {
3181
+ if (TekGridColumnsOptionsModal.modal) {
3182
+ TekGridColumnsOptionsModal.modal.hide();
3183
+ }
3184
+ }
3185
+ }
3186
+ TekGridColumnsOptionsModal.controllerName = `TekGridColumnsOptionsController_${new Date().getTime()}`;
3187
+ TekGridColumnsOptionsModal.modalDef = {
3188
+ name: 'tekGridColumnsOptionsModal',
3189
+ title: '',
3190
+ persistent: true,
3191
+ children: [
3192
+ {
3193
+ name: 'tekGridColumnsOptionsCloseButtonHeader',
3194
+ component: 'ZdHeader',
3195
+ color: 'transparent',
3196
+ padless: true,
3197
+ elevation: 0,
3198
+ cssClass: 'zd-ml-n1 zd-mb-4',
3199
+ leftSlot: [
3200
+ {
3201
+ name: 'tekGridColumnsOptionsTitleText',
3202
+ component: 'ZdText',
3203
+ text: 'TEKGRID_COLUMNS_OPTIONS',
3204
+ cssClass: 'zd-theme-font-title',
3205
+ },
3206
+ ],
3207
+ rightSlot: [
3208
+ {
3209
+ name: 'tekGridColumnsOptionsCloseModalButton',
3210
+ component: 'ZdModalCloseButton',
3211
+ small: true,
3212
+ modalName: 'tekGridColumnsOptionsModal',
3213
+ },
3214
+ ],
3215
+ },
3216
+ {
3217
+ name: 'tekGridColumnsOptionsSearchRow',
3218
+ component: 'ZdRow',
3219
+ children: [
3220
+ {
3221
+ name: 'tekGridColumnsOptionsSearchCol',
3222
+ component: 'ZdCol',
3223
+ cols: 12,
3224
+ children: [
3225
+ {
3226
+ name: 'tekGridColumnsOptionsSearchInput',
3227
+ component: 'ZdTextInput',
3228
+ showLabel: false,
3229
+ showHelper: false,
3230
+ placeholder: 'SEARCH',
3231
+ appendIcon: 'magnify',
3232
+ value: `{{${TekGridColumnsOptionsModal.controllerName}.searchValue}}`,
3233
+ },
3234
+ ],
3235
+ },
3236
+ ],
3237
+ },
3238
+ {
3239
+ name: 'tekGridColumnsOptionsVisibleRow',
3240
+ component: 'ZdRow',
3241
+ children: [
3242
+ {
3243
+ name: 'tekGridColumnsOptionsVisibleCol',
3244
+ component: 'ZdCol',
3245
+ cols: 12,
3246
+ cssClass: 'tek-grid-column-option-container-col',
3247
+ children: [
3248
+ {
3249
+ name: 'tekGridColumnsOptionsVisibleLabel',
3250
+ component: 'ZdText',
3251
+ text: 'TEKGRID_VISIBLE_COLUMNS',
3252
+ cssClass: 'tek-grid-column-option-label',
3253
+ },
3254
+ {
3255
+ name: 'tekGridColumnsOptionsVisibleSelectAll',
3256
+ component: 'ZdText',
3257
+ text: 'TEKGRID_SELECT_ALL',
3258
+ cssClass: 'tek-grid-column-option-select-all',
3259
+ events: {
3260
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
3261
+ },
3262
+ },
3263
+ {
3264
+ name: 'tekGridColumnsOptionsVisibleDropHere',
3265
+ component: 'ZdText',
3266
+ text: 'TEKGRID_DROP_COLUMNS',
3267
+ cssClass: 'tek-grid-column-option-drop-here',
3268
+ isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoVisibleColumns}}`,
3269
+ },
3270
+ {
3271
+ name: 'tekGridColumnsOptionsVisibleColumns',
3272
+ component: 'TekIterableComponentRender',
3273
+ id: 'tekGridColumnsOptionsVisibleColumns',
3274
+ cssClass: 'tek-grid-column-option-container',
3275
+ datasource: {
3276
+ uniqueKey: 'name',
3277
+ data: `{{${TekGridColumnsOptionsModal.controllerName}.visibleColumnData}}`,
3278
+ },
3279
+ noDataSlot: [],
3280
+ events: {
3281
+ onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
3282
+ },
3283
+ componentMetadata: {
3284
+ name: 'tekGridColumnsOptionsVisibleColumn_<<row.name>>',
3285
+ component: 'ZdTag',
3286
+ columnName: '<<row.name>>',
3287
+ cssClass: 'tek-grid-column-option-box zd-elevation-1 '
3288
+ + 'tek-grid-column-option-selected-<<row.selected>>',
3289
+ tag: 'div',
3290
+ children: [
3291
+ {
3292
+ name: 'tekGridColumnsOptionsVisibleColumnText_<<row.name>>',
3293
+ columnName: '<<row.name>>',
3294
+ component: 'ZdText',
3295
+ text: '<<row.label>><<row.aggregationText>>',
3296
+ },
3297
+ {
3298
+ name: 'tekGridColumnsOptionsVisibleColumnRemove_<<row.name>>',
3299
+ columnName: '<<row.name>>',
3300
+ component: 'ZdIcon',
3301
+ iconName: 'close',
3302
+ events: {
3303
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.columnVisibleRemoveClick}}`,
3304
+ },
3305
+ },
3306
+ ],
3307
+ events: {
3308
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
3309
+ },
3310
+ },
3311
+ },
3312
+ ],
3313
+ },
3314
+ ],
3315
+ },
3316
+ {
3317
+ name: 'tekGridColumnsOptionsGroupedRow',
3318
+ component: 'ZdRow',
3319
+ children: [
3320
+ {
3321
+ name: 'tekGridColumnsOptionsGroupedCol',
3322
+ component: 'ZdCol',
3323
+ cssClass: 'tek-grid-column-option-container-col',
3324
+ cols: 12,
3325
+ children: [
3326
+ {
3327
+ name: 'tekGridColumnsOptionsGroupedLabel',
3328
+ component: 'ZdText',
3329
+ text: 'TEKGRID_GROUPED_COLUMNS',
3330
+ cssClass: 'tek-grid-column-option-label',
3331
+ },
3332
+ {
3333
+ name: 'tekGridColumnsOptionsGroupedSelectAll',
3334
+ component: 'ZdText',
3335
+ text: 'TEKGRID_SELECT_ALL',
3336
+ cssClass: 'tek-grid-column-option-select-all',
3337
+ events: {
3338
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
3339
+ },
3340
+ },
3341
+ {
3342
+ name: 'tekGridColumnsOptionsGroupedDropHere',
3343
+ component: 'ZdText',
3344
+ text: 'TEKGRID_DROP_COLUMNS',
3345
+ cssClass: 'tek-grid-column-option-drop-here',
3346
+ isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoGroupedColumns}}`,
3347
+ },
3348
+ {
3349
+ name: 'tekGridColumnsOptionsGroupedColumns',
3350
+ component: 'TekIterableComponentRender',
3351
+ id: 'tekGridColumnsOptionsGroupedColumns',
3352
+ cssClass: 'tek-grid-column-option-container',
3353
+ datasource: {
3354
+ uniqueKey: 'name',
3355
+ data: `{{${TekGridColumnsOptionsModal.controllerName}.groupedColumnData}}`,
3356
+ },
3357
+ noDataSlot: [],
3358
+ events: {
3359
+ onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
3360
+ },
3361
+ componentMetadata: {
3362
+ name: 'tekGridColumnsOptionsGroupedColumn_<<row.name>>',
3363
+ component: 'ZdTag',
3364
+ columnName: '<<row.name>>',
3365
+ cssClass: 'tek-grid-column-option-box zd-elevation-1 '
3366
+ + 'tek-grid-column-option-selected-<<row.selected>>',
3367
+ tag: 'div',
3368
+ children: [
3369
+ {
3370
+ name: 'tekGridColumnsOptionsGroupedColumnText_<<row.name>>',
3371
+ columnName: '<<row.name>>',
3372
+ component: 'ZdText',
3373
+ text: '<<row.label>><<row.aggregationText>>',
3374
+ },
3375
+ {
3376
+ name: 'tekGridColumnsOptionsGroupedColumnRemove_<<row.name>>',
3377
+ columnName: '<<row.name>>',
3378
+ component: 'ZdIcon',
3379
+ iconName: 'close',
3380
+ events: {
3381
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.columnGroupedRemoveClick}}`,
3382
+ },
3383
+ },
3384
+ ],
3385
+ events: {
3386
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
3387
+ },
3388
+ },
3389
+ },
3390
+ ],
3391
+ },
3392
+ ],
3393
+ },
3394
+ {
3395
+ name: 'tekGridColumnsOptionsOtherRow',
3396
+ component: 'ZdRow',
3397
+ children: [
3398
+ {
3399
+ name: 'tekGridColumnsOptionsOtherCol',
3400
+ component: 'ZdCol',
3401
+ cssClass: 'tek-grid-column-option-container-col',
3402
+ cols: 12,
3403
+ children: [
3404
+ {
3405
+ name: 'tekGridColumnsOptionsOtherLabel',
3406
+ component: 'ZdText',
3407
+ text: 'TEKGRID_OTHER_COLUMNS',
3408
+ cssClass: 'tek-grid-column-option-label',
3409
+ },
3410
+ {
3411
+ name: 'tekGridColumnsOptionsOtherSelectAll',
3412
+ component: 'ZdText',
3413
+ text: 'TEKGRID_SELECT_ALL',
3414
+ cssClass: 'tek-grid-column-option-select-all',
3415
+ events: {
3416
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
3417
+ },
3418
+ },
3419
+ {
3420
+ name: 'tekGridColumnsOptionsOtherDropHere',
3421
+ component: 'ZdText',
3422
+ text: 'TEKGRID_DROP_COLUMNS',
3423
+ cssClass: 'tek-grid-column-option-drop-here',
3424
+ isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoOtherColumns}}`,
3425
+ },
3426
+ {
3427
+ name: 'tekGridColumnsOptionsOtherColumns',
3428
+ component: 'TekIterableComponentRender',
3429
+ id: 'tekGridColumnsOptionsOtherColumns',
3430
+ cssClass: 'tek-grid-column-option-container',
3431
+ datasource: {
3432
+ uniqueKey: 'name',
3433
+ data: `{{${TekGridColumnsOptionsModal.controllerName}.otherColumnData}}`,
3434
+ },
3435
+ noDataSlot: [],
3436
+ events: {
3437
+ onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
3438
+ },
3439
+ componentMetadata: {
3440
+ name: 'tekGridColumnsOptionsOtherColumn_<<row.name>>',
3441
+ component: 'ZdText',
3442
+ columnName: '<<row.name>>',
3443
+ text: '<<row.label>><<row.aggregationText>>',
3444
+ cssClass: 'tek-grid-column-option-box zd-elevation-1 '
3445
+ + 'tek-grid-column-option-selected-<<row.selected>>',
3446
+ events: {
3447
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
3448
+ },
3449
+ },
3450
+ },
3451
+ ],
3452
+ },
3453
+ ],
3454
+ },
3455
+ {
3456
+ name: 'tekGridColumnsOptionsDetailColumnName',
3457
+ component: 'ZdText',
3458
+ cssClass: 'tek-grid-column-option-detail-name',
3459
+ text: `{{${TekGridColumnsOptionsModal.controllerName}.detailColumnName}}`,
3460
+ grid: {
3461
+ xs: 12,
3462
+ },
3463
+ },
3464
+ {
3465
+ name: 'tekGridColumnsOptionsDetailRow',
3466
+ component: 'ZdRow',
3467
+ children: [
3468
+ {
3469
+ name: 'tekGridColumnsOptionsDetailCol',
3470
+ component: 'ZdCol',
3471
+ cols: 12,
3472
+ children: [
3473
+ {
3474
+ name: 'tekGridColumnsOptionsDetailForm',
3475
+ component: 'ZdForm',
3476
+ cssClass: 'tek-grid-column-option-detail-form',
3477
+ children: [
3478
+ {
3479
+ name: 'tekGridColumnsOptionsColumnLabel',
3480
+ component: 'ZdTextInput',
3481
+ label: 'TEKGRID_COLUMN_LABEL',
3482
+ showHelper: false,
3483
+ clearable: false,
3484
+ disabled: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoSingleSelection}}`,
3485
+ value: `{{${TekGridColumnsOptionsModal.controllerName}.selectedColumnLabel}}`,
3486
+ grid: {
3487
+ xs: 12,
3488
+ md: 6,
3489
+ },
3490
+ },
3491
+ {
3492
+ name: 'tekGridColumnsOptionsColumnAlignment',
3493
+ component: 'ZdSelect',
3494
+ autocomplete: false,
3495
+ label: 'TEKGRID_COLUMN_ALIGNMENT',
3496
+ disabled: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoSelectedColumn}}`,
3497
+ showHelper: false,
3498
+ clearable: false,
3499
+ grid: {
3500
+ xs: 6,
3501
+ md: 2,
3502
+ },
3503
+ dataText: 'text',
3504
+ dataValue: 'value',
3505
+ datasource: {
3506
+ data: [
3507
+ { text: 'TEKGRID_LEFT', value: 'left' },
3508
+ { text: 'TEKGRID_CENTER', value: 'center' },
3509
+ { text: 'TEKGRID_RIGHT', value: 'right' },
3510
+ ],
3511
+ translate: 'text',
3512
+ },
3513
+ events: {
3514
+ change: `{{${TekGridColumnsOptionsModal.controllerName}.selectChange}}`,
3515
+ onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.selectMounted}}`,
3516
+ },
3517
+ },
3518
+ {
3519
+ name: 'tekGridColumnsOptionsColumnAggregation',
3520
+ component: 'ZdSelect',
3521
+ autocomplete: false,
3522
+ label: 'TEKGRID_COLUMN_AGGREGATION',
3523
+ showHelper: false,
3524
+ disabled: `{{${TekGridColumnsOptionsModal.controllerName}.groupInSelection}}`,
3525
+ dataText: 'text',
3526
+ dataValue: 'value',
3527
+ grid: {
3528
+ xs: 6,
3529
+ md: 2,
3530
+ },
3531
+ datasource: {
3532
+ data: `{{${TekGridColumnsOptionsModal.controllerName}.aggregationData}}`,
3533
+ },
3534
+ events: {
3535
+ change: `{{${TekGridColumnsOptionsModal.controllerName}.selectChange}}`,
3536
+ onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.selectMounted}}`,
3537
+ },
3538
+ },
3539
+ {
3540
+ name: 'tekGridColumnsOptionsColumnGroupOpened',
3541
+ component: 'ZdCheckbox',
3542
+ cssClass: 'zd-form-input-align',
3543
+ disabled: `{{${TekGridColumnsOptionsModal.controllerName}.notGroupInSelection}}`,
3544
+ label: 'TEKGRID_COLUMN_GROUP_OPENED',
3545
+ value: `{{${TekGridColumnsOptionsModal.controllerName}.selectedColumnGroupOpened}}`,
3546
+ grid: {
3547
+ xs: 6,
3548
+ md: 2,
3549
+ },
3550
+ },
3551
+ ],
3552
+ },
3553
+ ],
3554
+ },
3555
+ ],
3556
+ },
3557
+ {
3558
+ name: 'tekGridColumnsOptionsDetailFooter',
3559
+ component: 'ZdFooter',
3560
+ padless: true,
3561
+ color: 'transparent',
3562
+ cssClass: 'zd-mt-6',
3563
+ rightSlot: [
3564
+ {
3565
+ name: 'tekGridColumnsOptionsDetailCancel',
3566
+ component: 'ZdButton',
3567
+ outline: true,
3568
+ label: 'TEKGRID_CANCEL',
3569
+ events: {
3570
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.cancelChanges}}`,
3571
+ },
3572
+ },
3573
+ {
3574
+ name: 'tekGridColumnsOptionsDetailApply',
3575
+ component: 'ZdButton',
3576
+ label: 'TEKGRID_APPLY',
3577
+ events: {
3578
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.applyChanges}}`,
3579
+ },
3580
+ },
3581
+ ],
3582
+ },
3583
+ ],
3584
+ };
3585
+
2740
3586
  /**
2741
3587
  * TekGrid Columns Button component
2742
3588
  */
@@ -2753,7 +3599,7 @@ let TekGridColumnsButton = class TekGridColumnsButton extends ZdIterableColumnsB
2753
3599
  this.$nextTick(() => {
2754
3600
  const columnsTableBody = document.querySelector(`#${this.instance.name}_columns_table tbody`);
2755
3601
  if (columnsTableBody) {
2756
- sortable.create(columnsTableBody, {
3602
+ Sortable.create(columnsTableBody, {
2757
3603
  handle: '.sortHandle',
2758
3604
  dragClass: 'tek-grid-columns-button-sortable-drag',
2759
3605
  onEnd: this.sortEnd,
@@ -2773,12 +3619,19 @@ let TekGridColumnsButton = class TekGridColumnsButton extends ZdIterableColumnsB
2773
3619
  }
2774
3620
  return column;
2775
3621
  });
2776
- grid.columns = newColumns;
3622
+ const ignoredColumns = grid.columns.filter((column) => this.instance.ignoreColumns.indexOf(column.name) !== -1);
3623
+ grid.columns = newColumns.concat(ignoredColumns);
2777
3624
  if (JSON.stringify(groupColumnNames) !== JSON.stringify(grid.groupColumnNames)) {
2778
3625
  grid.updateGroupedData();
2779
3626
  }
2780
3627
  grid.changeLayout();
2781
3628
  }
3629
+ moreOptions() {
3630
+ TekGridColumnsOptionsModal.show(this.instance);
3631
+ }
3632
+ close() {
3633
+ this.menuIsOpened = false;
3634
+ }
2782
3635
  };
2783
3636
  __decorate([
2784
3637
  Watch('menuIsOpened'),
@@ -2865,141 +3718,180 @@ var __vue_render__$6 = function() {
2865
3718
  },
2866
3719
  [
2867
3720
  _vm._v(" "),
2868
- _c(
2869
- "table",
2870
- {
2871
- staticClass: "tek-grid-columns-button-table",
2872
- attrs: { id: _vm.instance.name + "_columns_table" }
2873
- },
2874
- [
2875
- _c("thead", [
2876
- _c("tr", [
2877
- _c("th"),
2878
- _vm._v(" "),
2879
- _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_VISIBLE")))]),
2880
- _vm._v(" "),
2881
- _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_GROUPED")))]),
2882
- _vm._v(" "),
2883
- _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_AGGREGATION")))])
2884
- ])
2885
- ]),
2886
- _vm._v(" "),
2887
- _c(
2888
- "tbody",
2889
- _vm._l(_vm.instance.iterableComponent.columns, function(column) {
2890
- return _c(
2891
- "tr",
2892
- { key: column.name, attrs: { name: column.name } },
2893
- [
2894
- _c(
2895
- "td",
2896
- {
2897
- staticClass:
2898
- "tek-grid-columns-button-column-name sortHandle"
2899
- },
2900
- [
2901
- _c("span", [_vm._v("⦙⦙")]),
2902
- _vm._v(_vm._s(column.label) + "\n ")
2903
- ]
2904
- ),
2905
- _vm._v(" "),
2906
- _c(
2907
- "td",
2908
- [
2909
- _c("zd-checkbox", {
2910
- attrs: {
2911
- name:
2912
- _vm.instance.name +
2913
- "_column_visible_" +
2914
- column.name,
2915
- value: column.isVisible,
2916
- disabled: column.grouped,
2917
- events: {
2918
- change: _vm.instance.controller.showHideColumn.bind(
2919
- _vm.instance.controller,
2920
- column
2921
- )
2922
- }
2923
- }
2924
- })
2925
- ],
2926
- 1
2927
- ),
2928
- _vm._v(" "),
2929
- _c(
2930
- "td",
2931
- [
2932
- column.type !== "action"
2933
- ? _c("zd-checkbox", {
2934
- attrs: {
2935
- name:
2936
- _vm.instance.name +
2937
- "_column_grouped_" +
2938
- column.name,
2939
- value: column.grouped,
2940
- events: {
2941
- change: _vm.instance.controller.changeGroupedColumn.bind(
2942
- _vm.instance.controller,
2943
- column
2944
- )
2945
- }
3721
+ _c("div", { staticClass: "tek-grid-columns-button-table-wrapper" }, [
3722
+ _c(
3723
+ "table",
3724
+ {
3725
+ staticClass: "tek-grid-columns-button-table",
3726
+ attrs: { id: _vm.instance.name + "_columns_table" }
3727
+ },
3728
+ [
3729
+ _c("thead", [
3730
+ _c("tr", [
3731
+ _c("th"),
3732
+ _vm._v(" "),
3733
+ _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_VISIBLE")))]),
3734
+ _vm._v(" "),
3735
+ _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_GROUPED")))]),
3736
+ _vm._v(" "),
3737
+ _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_AGGREGATION")))])
3738
+ ])
3739
+ ]),
3740
+ _vm._v(" "),
3741
+ _c(
3742
+ "tbody",
3743
+ _vm._l(_vm.instance.filteredColumns(), function(column) {
3744
+ return _c(
3745
+ "tr",
3746
+ { key: column.name, attrs: { name: column.name } },
3747
+ [
3748
+ _c(
3749
+ "td",
3750
+ {
3751
+ staticClass:
3752
+ "tek-grid-columns-button-column-name sortHandle"
3753
+ },
3754
+ [
3755
+ _c("span", [_vm._v("⦙⦙")]),
3756
+ _vm._v(_vm._s(column.label) + "\n ")
3757
+ ]
3758
+ ),
3759
+ _vm._v(" "),
3760
+ _c(
3761
+ "td",
3762
+ [
3763
+ _c("zd-checkbox", {
3764
+ attrs: {
3765
+ name:
3766
+ _vm.instance.name +
3767
+ "_column_visible_" +
3768
+ column.name,
3769
+ value: column.isVisible,
3770
+ disabled: column.grouped,
3771
+ events: {
3772
+ change: _vm.instance.controller.showHideColumn.bind(
3773
+ _vm.instance.controller,
3774
+ column
3775
+ )
2946
3776
  }
2947
- })
2948
- : _vm._e()
2949
- ],
2950
- 1
2951
- ),
2952
- _vm._v(" "),
2953
- _c(
2954
- "td",
2955
- {
2956
- staticClass: "tek-grid-columns-button-column-aggregation"
2957
- },
2958
- [
2959
- column.type !== "action"
2960
- ? _c(
2961
- "zd-select",
2962
- _vm._b(
2963
- {
2964
- attrs: {
2965
- name:
2966
- _vm.instance.name +
2967
- "_column_aggregation_" +
2968
- column.name
2969
- }
2970
- },
2971
- "zd-select",
2972
- {
2973
- value: column.aggregation,
2974
- disabled: column.grouped,
3777
+ }
3778
+ })
3779
+ ],
3780
+ 1
3781
+ ),
3782
+ _vm._v(" "),
3783
+ _c(
3784
+ "td",
3785
+ [
3786
+ column.type !== "action"
3787
+ ? _c("zd-checkbox", {
3788
+ attrs: {
3789
+ name:
3790
+ _vm.instance.name +
3791
+ "_column_grouped_" +
3792
+ column.name,
3793
+ value: column.grouped,
2975
3794
  events: {
2976
- change: _vm.instance.controller.changeAggregationColumn.bind(
3795
+ change: _vm.instance.controller.changeGroupedColumn.bind(
2977
3796
  _vm.instance.controller,
2978
3797
  column
2979
3798
  )
2980
- },
2981
- dataText: "text",
2982
- dataValue: "value",
2983
- autocomplete: false,
2984
- showHelper: false,
2985
- showLabel: false,
2986
- datasource: {
2987
- data: _vm.instance.getAggregationSelectData()
2988
3799
  }
2989
- },
2990
- false
3800
+ }
3801
+ })
3802
+ : _vm._e()
3803
+ ],
3804
+ 1
3805
+ ),
3806
+ _vm._v(" "),
3807
+ _c(
3808
+ "td",
3809
+ {
3810
+ staticClass:
3811
+ "tek-grid-columns-button-column-aggregation"
3812
+ },
3813
+ [
3814
+ column.type !== "action"
3815
+ ? _c(
3816
+ "zd-select",
3817
+ _vm._b(
3818
+ {
3819
+ attrs: {
3820
+ name:
3821
+ _vm.instance.name +
3822
+ "_column_aggregation_" +
3823
+ column.name
3824
+ }
3825
+ },
3826
+ "zd-select",
3827
+ {
3828
+ value: column.aggregation,
3829
+ disabled: column.grouped,
3830
+ events: {
3831
+ change: _vm.instance.controller.changeAggregationColumn.bind(
3832
+ _vm.instance.controller,
3833
+ column
3834
+ )
3835
+ },
3836
+ dataText: "text",
3837
+ dataValue: "value",
3838
+ autocomplete: false,
3839
+ showHelper: false,
3840
+ showLabel: false,
3841
+ datasource: {
3842
+ data: _vm.instance.getAggregationSelectData()
3843
+ }
3844
+ },
3845
+ false
3846
+ )
2991
3847
  )
2992
- )
2993
- : _vm._e()
2994
- ],
2995
- 1
2996
- )
2997
- ]
2998
- )
2999
- }),
3000
- 0
3001
- )
3002
- ]
3848
+ : _vm._e()
3849
+ ],
3850
+ 1
3851
+ )
3852
+ ]
3853
+ )
3854
+ }),
3855
+ 0
3856
+ )
3857
+ ]
3858
+ )
3859
+ ]),
3860
+ _vm._v(" "),
3861
+ _c(
3862
+ "div",
3863
+ { staticClass: "tek-grid-columns-button-table-footer" },
3864
+ [
3865
+ _c("zd-button", {
3866
+ attrs: {
3867
+ name: _vm.instance.name + "_columns_table_footer_button",
3868
+ label: "TEKGRID_MORE_OPTIONS",
3869
+ small: "",
3870
+ outline: "",
3871
+ cssClass: "zd-ma-2 zd-mr-1"
3872
+ },
3873
+ on: {
3874
+ click: function($event) {
3875
+ return _vm.moreOptions()
3876
+ }
3877
+ }
3878
+ }),
3879
+ _vm._v(" "),
3880
+ _c("zd-button", {
3881
+ attrs: {
3882
+ name: _vm.instance.name + "_columns_table_footer_close",
3883
+ label: "TEKGRID_CLOSE",
3884
+ small: "",
3885
+ cssClass: "zd-ma-2 zd-ml-1"
3886
+ },
3887
+ on: {
3888
+ click: function($event) {
3889
+ return _vm.close()
3890
+ }
3891
+ }
3892
+ })
3893
+ ],
3894
+ 1
3003
3895
  )
3004
3896
  ]
3005
3897
  )
@@ -3010,7 +3902,7 @@ __vue_render__$6._withStripped = true;
3010
3902
  /* style */
3011
3903
  const __vue_inject_styles__$6 = function (inject) {
3012
3904
  if (!inject) return
3013
- inject("data-v-11d7088a_0", { source: ".tek-grid-columns-button-table {\n padding: var(--spacing-2);\n background-color: white;\n font-size: 13px;\n}\n.tek-grid-columns-button-table thead tr th {\n padding: var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n text-align: left;\n}\n.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-table tbody tr td.tek-grid-columns-button-column-name {\n cursor: -webkit-grab;\n}\n.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-table tbody tr td.tek-grid-columns-button-column-aggregation {\n max-width: 150px;\n}\n.tek-grid-columns-button-options {\n max-height: 250px;\n}\n.tek-grid-columns-button-sortable-drag {\n background: white;\n}\n\n/*# sourceMappingURL=TekGridColumnsButton.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-grid/TekGridColumnsButton.vue","TekGridColumnsButton.vue"],"names":[],"mappings":"AAyFA;EACA,yBAAA;EACA,uBAAA;EACA,eAAA;ACxFA;AD4FA;EACA,0CAAA;EACA,mBAAA;EACA,gBAAA;AC1FA;ADiGA;EACA,0CAAA;EACA,mBAAA;AC/FA;ADiGA;EACA,oBAAA;AC/FA;ADiGA;EACA,kBAAA;AC/FA;ADmGA;EACA,gBAAA;ACjGA;ADwGA;EACA,iBAAA;ACrGA;ADwGA;EACA,iBAAA;ACrGA;;AAEA,mDAAmD","file":"TekGridColumnsButton.vue","sourcesContent":["<template>\n <v-menu \n v-show=\"instance.isVisible\"\n v-model=\"menuIsOpened\"\n :class=\"['zd-iterable-columns-button', 'tek-grid-columns-button', instance.cssClass]\"\n :style=\"instance.cssStyle\"\n :closeOnContentClick=\"false\"\n offset-y\n content-class=\"zd-iterable-columns-button-options tek-grid-columns-button-options\"\n >\n <template v-slot:activator=\"{ on }\"> \n <span v-on=\"{ ...$attrs['dropdown-activator'] }\">\n <zd-button\n :name=\"instance.name\"\n :instance-object=\"instance\"\n v-bind=\"{\n events: getEvents(on)\n }\"\n />\n </span>\n </template>\n <table class=\"tek-grid-columns-button-table\" :id=\"instance.name + '_columns_table'\">\n <thead>\n <tr>\n <th><!--Name--></th>\n <th>{{ $t('TEKGRID_COLUMN_VISIBLE') }}</th>\n <th>{{ $t('TEKGRID_COLUMN_GROUPED') }}</th>\n <th>{{ $t('TEKGRID_COLUMN_AGGREGATION') }}</th>\n </tr>\n </thead>\n <tbody>\n <tr\n v-for=\"column in instance.iterableComponent.columns\"\n :key=\"column.name\"\n :name=\"column.name\"\n >\n <td class=\"tek-grid-columns-button-column-name sortHandle\">\n <span>⦙⦙</span>{{ column.label }}\n </td>\n <td>\n <zd-checkbox\n :name=\"instance.name + '_column_visible_' + column.name\"\n :value=\"column.isVisible\"\n :disabled=\"column.grouped\"\n :events=\"{\n change: instance.controller.showHideColumn.bind(instance.controller, column)\n }\"\n />\n </td>\n <td>\n <zd-checkbox\n v-if=\"column.type !== 'action'\"\n :name=\"instance.name + '_column_grouped_' + column.name\"\n :value=\"column.grouped\"\n :events=\"{\n change: instance.controller.changeGroupedColumn.bind(instance.controller, column)\n }\"\n />\n </td>\n <td class=\"tek-grid-columns-button-column-aggregation\">\n <zd-select\n v-if=\"column.type !== 'action'\"\n :name=\"instance.name + '_column_aggregation_' + column.name\"\n v-bind=\"{\n value: column.aggregation,\n disabled: column.grouped,\n events: {\n change: instance.controller.changeAggregationColumn.bind(instance.controller, column)\n },\n dataText: 'text',\n dataValue: 'value',\n autocomplete: false,\n showHelper: false,\n showLabel: false,\n datasource: {\n data: instance.getAggregationSelectData(),\n },\n }\"\n />\n </td>\n </tr>\n </tbody>\n </table>\n </v-menu>\n</template>\n\n<script lang=\"ts\" src=\"./TekGridColumnsButton.ts\"></script>\n\n<style lang=\"scss\">\n.tek-grid-columns-button-table {\n padding: var(--spacing-2);\n background-color: white;\n font-size: 13px;\n\n thead {\n tr {\n th {\n padding: var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n text-align: left;\n }\n }\n }\n\n tbody {\n tr {\n td {\n padding: var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n\n &.tek-grid-columns-button-column-name {\n cursor: -webkit-grab;\n\n > span {\n padding-right: 4px;\n }\n }\n\n &.tek-grid-columns-button-column-aggregation {\n max-width: 150px;\n }\n }\n }\n }\n}\n\n.tek-grid-columns-button-options {\n max-height: 250px;\n}\n\n.tek-grid-columns-button-sortable-drag {\n background: white;\n}\n</style>",".tek-grid-columns-button-table {\n padding: var(--spacing-2);\n background-color: white;\n font-size: 13px;\n}\n.tek-grid-columns-button-table thead tr th {\n padding: var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n text-align: left;\n}\n.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-table tbody tr td.tek-grid-columns-button-column-name {\n cursor: -webkit-grab;\n}\n.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-table tbody tr td.tek-grid-columns-button-column-aggregation {\n max-width: 150px;\n}\n\n.tek-grid-columns-button-options {\n max-height: 250px;\n}\n\n.tek-grid-columns-button-sortable-drag {\n background: white;\n}\n\n/*# sourceMappingURL=TekGridColumnsButton.vue.map */"]}, media: undefined });
3905
+ inject("data-v-0b148da7_0", { source: ".tek-grid-columns-button-options {\n max-height: 250px;\n display: flex;\n flex-direction: column;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper {\n flex: 1;\n overflow-y: auto;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table {\n padding: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);\n background-color: white;\n font-size: 13px;\n border-spacing: 0;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table thead tr th {\n padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n text-align: left;\n background: white;\n position: sticky;\n top: 0;\n z-index: 10;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td {\n padding: var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name {\n cursor: -webkit-grab;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name > span {\n padding-right: 4px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-aggregation {\n max-width: 150px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer {\n display: flex;\n background: white;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer .zd-button {\n flex: 1;\n}\n.tek-grid-columns-button-sortable-drag {\n background: white;\n}\n.tek-grid-column-option-box {\n margin: var(--spacing-1);\n background: #ccc;\n padding: 2px var(--spacing-1);\n cursor: pointer;\n}\n.tek-grid-column-option-box > * {\n display: inline-block;\n}\n.tek-grid-column-option-box > .zd-icon {\n font-size: 0.9rem;\n margin-left: var(--spacing-2);\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true {\n cursor: default;\n background: #fafafa;\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true > .zd-icon {\n display: none;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true {\n background: var(--v-primary-base);\n color: white;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true > .zd-icon {\n color: white;\n}\n.tek-grid-column-option-container-col {\n position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container {\n background: #eee;\n padding: var(--spacing-1);\n max-height: 100px;\n min-height: 42px;\n align-content: center;\n position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .tek-iterable-footer {\n display: none !important;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .zd-text.no-data {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n font-size: 0.7rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-label {\n font-weight: var(--zd-font-body2-weight);\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-select-all {\n position: absolute;\n top: 0.5rem;\n right: var(--spacing-1);\n color: var(--v-primary-base);\n cursor: pointer;\n font-size: 0.8rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-drop-here {\n position: absolute;\n z-index: 100;\n left: 50%;\n transform: translateX(-50%);\n top: 35px;\n}\n.tek-grid-column-option-detail-name {\n color: var(--v-primary-base);\n font-weight: var(--zd-font-body2-weight);\n font-size: 1.1rem;\n margin-top: var(--spacing-6);\n}", map: undefined, media: undefined });
3014
3906
 
3015
3907
  };
3016
3908
  /* scoped */
@@ -3068,10 +3960,14 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
3068
3960
  });
3069
3961
  if (layout) {
3070
3962
  tableElement.style.width = layout.gridWidth;
3963
+ grid.datasource.order = layout.order !== undefined ? layout.order : grid.datasource.order;
3071
3964
  grid.columns = layout.columns.map((column) => {
3072
3965
  const col = gridColumns[column.name];
3966
+ col.label = column.label !== undefined ? column.label : col.label;
3967
+ col.align = column.align !== undefined ? column.align : col.align;
3073
3968
  col.isVisible = column.isVisible !== undefined ? column.isVisible : col.isVisible;
3074
3969
  col.grouped = !!column.grouped;
3970
+ col.groupOpened = !!column.groupOpened;
3075
3971
  col.aggregation = column.aggregation;
3076
3972
  col.minWidth = column.minWidth || '';
3077
3973
  col.maxWidth = column.maxWidth || '';
@@ -3088,10 +3984,14 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
3088
3984
  });
3089
3985
  }
3090
3986
  else {
3987
+ grid.datasource.order = [...this.instance.originalDatasourceOrder];
3091
3988
  grid.columns = this.instance.originalColumnProps.map((column) => {
3092
3989
  const col = gridColumns[column.name];
3093
3990
  col.isVisible = column.isVisible;
3991
+ col.label = column.label;
3992
+ col.align = column.align;
3094
3993
  col.grouped = column.grouped;
3994
+ col.groupOpened = column.groupOpened;
3095
3995
  col.aggregation = column.aggregation;
3096
3996
  col.minWidth = column.minWidth || '';
3097
3997
  col.maxWidth = column.maxWidth || '';
@@ -3112,16 +4012,20 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
3112
4012
  return {
3113
4013
  name: layoutName,
3114
4014
  gridWidth,
4015
+ order: grid.datasource.order,
3115
4016
  columns: grid.columns.map((column, index) => {
3116
4017
  const columnElement = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector(`tr th:not(.selectable)[index="${index}"]`);
3117
4018
  return {
3118
4019
  name: column.name,
4020
+ label: column.label,
4021
+ align: column.align,
3119
4022
  width: columnElement ? window.getComputedStyle(columnElement).width : 'unset',
3120
4023
  minWidth: column.minWidth,
3121
4024
  maxWidth: column.maxWidth,
3122
4025
  filter: '',
3123
4026
  isVisible: column.isVisible,
3124
4027
  grouped: column.grouped,
4028
+ groupOpened: column.groupOpened,
3125
4029
  aggregation: column.aggregation,
3126
4030
  };
3127
4031
  }),
@@ -3391,7 +4295,7 @@ __vue_render__$5._withStripped = true;
3391
4295
  /* style */
3392
4296
  const __vue_inject_styles__$5 = function (inject) {
3393
4297
  if (!inject) return
3394
- inject("data-v-29ce02fa_0", { source: ".tek-grid-layout-options-badge .v-badge__badge {\n font-size: var(--zd-font-caption-size);\n font-weight: var(--zd-font-caption-weight);\n line-height: 14px;\n pointer-events: none;\n background-color: var(--zd-badge-background-color) !important;\n}\n.tek-grid-layout-options-badge .v-badge__badge span {\n color: var(--zd-badge-text-color) !important;\n}\n.tek-grid-layout-item {\n font-size: 13px;\n cursor: pointer;\n min-height: 30px;\n}\n.tek-grid-layout-item.selected {\n font-weight: 700;\n}\n.tek-grid-layout-item:hover {\n background: #eee;\n}\n.tek-grid-layout-item:hover .tek-grid-layout-item-buttons {\n display: inherit;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons {\n display: none;\n position: absolute;\n right: 5px;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons .v-icon {\n font-size: 12px;\n}\n\n/*# sourceMappingURL=TekGridLayoutOptions.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-grid/TekGridLayoutOptions.vue","TekGridLayoutOptions.vue"],"names":[],"mappings":"AA6GA;EACA,sCAAA;EACA,0CAAA;EACA,iBAAA;EACA,oBAAA;EACA,6DAAA;AC5GA;AD8GA;EACA,4CAAA;AC5GA;ADkHA;EACA,eAAA;EACA,eAAA;EACA,gBAAA;AC/GA;ADiHA;EACA,gBAAA;AC/GA;ADkHA;EACA,gBAAA;AChHA;ADkHA;EACA,gBAAA;AChHA;ADoHA;EACA,aAAA;EACA,kBAAA;EACA,UAAA;AClHA;ADoHA;EACA,eAAA;AClHA;;AAEA,mDAAmD","file":"TekGridLayoutOptions.vue","sourcesContent":["<template>\n <v-menu\n v-show=\"instance.isVisible\"\n :name=\"instance.name\" \n :class=\"['tek-grid-layout-options', instance.cssClass]\"\n :style=\"instance.cssStyle\"\n offset-y\n ref=\"layoutMenu\"\n :closeOnContentClick=\"false\"\n >\n <template v-slot:activator=\"{ on: onMenu }\"> \n <v-tooltip bottom>\n <template v-slot:activator=\"{ on: onTooltip }\">\n <span v-on=\"{ ...onMenu, ...onTooltip }\">\n <v-badge\n overlap\n class=\"tek-grid-layout-options-badge\"\n dot\n :offsetX=\"12\"\n :offsetY=\"12\"\n :value=\"instance.layoutEdited\"\n >\n <zd-button\n :name=\"instance.name + '_button'\"\n icon-name=\"layout\"\n icon\n ></zd-button>\n </v-badge>\n </span>\n </template>\n <span>{{ $t('LAYOUT') + (instance.currentLayoutName || $t('DEFAULT_LAYOUT')) }}</span>\n </v-tooltip>\n </template>\n <v-list>\n <v-list-item>\n <zd-text-input\n :name=\"instance.name+'_new_layout'\"\n ref=\"inputNewLayout\"\n v-bind=\"{\n showHelper: false,\n showLabel: false,\n placeholder: 'NEW_LAYOUT',\n appendOuterIcon: 'confirmLayout',\n autofocus: true,\n autofill: false,\n keyMap: {\n enter: {\n event: confirmLayoutClick,\n input: true,\n active: true,\n },\n },\n events: {\n appendOuterIconClick: confirmLayoutClick,\n },\n }\"\n />\n </v-list-item>\n <v-list-item\n :class=\"['tek-grid-layout-item', {\n selected: instance.currentLayoutName === ''\n }]\"\n @click=\"instance.applyLayout('')\"\n >\n {{ $t('DEFAULT_LAYOUT') }}\n </v-list-item>\n <v-list-item\n v-for=\"item in instance.layoutNames\"\n :key=\"item\"\n :class=\"['tek-grid-layout-item', {\n selected: item === instance.currentLayoutName\n }]\"\n @click=\"instance.applyLayout(item)\"\n >\n {{ item }}\n <span class=\"tek-grid-layout-item-buttons\">\n <zd-button\n :name=\"'tek-grid-layout-item-update_' + item\"\n v-bind=\"{\n small: true,\n icon: true,\n iconName: 'updateLayout',\n events: {\n click: ({ event }) => { updateLayout(event, item) },\n },\n }\"\n />\n <zd-button\n :name=\"'tek-grid-layout-item-delete_' + item\"\n v-bind=\"{\n small: true,\n icon: true,\n iconName: 'delete',\n events: {\n click: ({ event }) => { deleteLayout(event, item) },\n },\n }\"\n />\n </span>\n </v-list-item>\n </v-list>\n </v-menu>\n</template>\n\n<script lang=\"ts\" src=\"./TekGridLayoutOptions.ts\"></script>\n\n<style lang=\"scss\">\n.tek-grid-layout-options {\n &-badge {\n .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 span {\n color: var(--zd-badge-text-color) !important;\n }\n }\n }\n}\n\n.tek-grid-layout-item {\n font-size: 13px;\n cursor: pointer;\n min-height: 30px;\n\n &.selected {\n font-weight: 700;\n }\n\n &:hover {\n background: #eee;\n\n .tek-grid-layout-item-buttons {\n display: inherit;\n }\n }\n\n .tek-grid-layout-item-buttons {\n display: none;\n position: absolute;\n right: 5px;\n\n .v-icon {\n font-size: 12px;\n }\n }\n}\n</style>",".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\n.tek-grid-layout-item {\n font-size: 13px;\n cursor: pointer;\n min-height: 30px;\n}\n.tek-grid-layout-item.selected {\n font-weight: 700;\n}\n.tek-grid-layout-item:hover {\n background: #eee;\n}\n.tek-grid-layout-item:hover .tek-grid-layout-item-buttons {\n display: inherit;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons {\n display: none;\n position: absolute;\n right: 5px;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons .v-icon {\n font-size: 12px;\n}\n\n/*# sourceMappingURL=TekGridLayoutOptions.vue.map */"]}, media: undefined });
4298
+ inject("data-v-29ce02fa_0", { source: ".tek-grid-layout-options-badge .v-badge__badge {\n font-size: var(--zd-font-caption-size);\n font-weight: var(--zd-font-caption-weight);\n line-height: 14px;\n pointer-events: none;\n background-color: var(--zd-badge-background-color) !important;\n}\n.tek-grid-layout-options-badge .v-badge__badge span {\n color: var(--zd-badge-text-color) !important;\n}\n.tek-grid-layout-item {\n font-size: 13px;\n cursor: pointer;\n min-height: 30px;\n}\n.tek-grid-layout-item.selected {\n font-weight: 700;\n}\n.tek-grid-layout-item:hover {\n background: #eee;\n}\n.tek-grid-layout-item:hover .tek-grid-layout-item-buttons {\n display: inherit;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons {\n display: none;\n position: absolute;\n right: 5px;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons .v-icon {\n font-size: 12px;\n}", map: undefined, media: undefined });
3395
4299
 
3396
4300
  };
3397
4301
  /* scoped */
@@ -3518,22 +4422,62 @@ var __vue_render__$3 = function() {
3518
4422
  var _c = _vm._self._c || _h;
3519
4423
  return _c(
3520
4424
  "div",
3521
- { staticClass: "tek-iterable-carousel" },
4425
+ {
4426
+ directives: [
4427
+ {
4428
+ name: "show",
4429
+ rawName: "v-show",
4430
+ value: _vm.instance.isVisible,
4431
+ expression: "instance.isVisible"
4432
+ }
4433
+ ],
4434
+ class: ["tek-iterable-carousel", _vm.instance.cssClass],
4435
+ style: _vm.instance.cssStyle,
4436
+ attrs: { name: _vm.instance.name }
4437
+ },
3522
4438
  [
3523
4439
  _vm.instance.iterable.datasource.loading
3524
4440
  ? _c("v-progress-circular", {
3525
4441
  staticClass: "zd-frame",
3526
4442
  attrs: { indeterminate: "", size: "64", color: "primary" }
3527
4443
  })
3528
- : _vm.instance.iterable.datasource.error
3529
- ? _c("span", { staticClass: "error--text" }, [
3530
- _vm._v(_vm._s(_vm.$t(_vm.instance.iterable.datasource.error)))
3531
- ])
3532
- : !_vm.instance.iterable.datasource.data.length
3533
- ? _c("span", { staticClass: "no--data" }, [
3534
- _vm._v(_vm._s(_vm.$t("NO_DATA")))
3535
- ])
3536
- : _vm._e(),
4444
+ : _c("zd-iterable-no-data", {
4445
+ ref: "iterableNoData",
4446
+ attrs: {
4447
+ name: _vm.instance.name + "_no_data",
4448
+ instance: _vm.instance.iterable,
4449
+ noDataSlot: _vm.instance.iterable.noDataSlot,
4450
+ noResultSlot: _vm.instance.iterable.noResultSlot,
4451
+ errorSlot: _vm.instance.iterable.errorSlot
4452
+ },
4453
+ scopedSlots: _vm._u(
4454
+ [
4455
+ {
4456
+ key: "errorSlot",
4457
+ fn: function() {
4458
+ return [_vm._t("errorSlot")]
4459
+ },
4460
+ proxy: true
4461
+ },
4462
+ {
4463
+ key: "noResultSlot",
4464
+ fn: function() {
4465
+ return [_vm._t("noResultSlot")]
4466
+ },
4467
+ proxy: true
4468
+ },
4469
+ {
4470
+ key: "noDataSlot",
4471
+ fn: function() {
4472
+ return [_vm._t("noDataSlot")]
4473
+ },
4474
+ proxy: true
4475
+ }
4476
+ ],
4477
+ null,
4478
+ true
4479
+ )
4480
+ }),
3537
4481
  _vm._v(" "),
3538
4482
  _c("zd-carousel", {
3539
4483
  attrs: {
@@ -3822,7 +4766,7 @@ __vue_render__$2._withStripped = true;
3822
4766
  /* style */
3823
4767
  const __vue_inject_styles__$2 = function (inject) {
3824
4768
  if (!inject) return
3825
- inject("data-v-02c0169b_0", { source: ".tek-iterable-component-render[data-v-02c0169b] {\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n -webkit-box-flex: 1;\n flex: 1 1 auto;\n}\n.tek-iterable-component-render .error--text[data-v-02c0169b],\n.tek-iterable-component-render .no--data[data-v-02c0169b] {\n text-align: center;\n width: 100%;\n font-size: 14px;\n}\n.tek-iterable-component-render .no--data[data-v-02c0169b] {\n color: rgba(0, 0, 0, 0.38);\n}\n.tek-iterable-component-render .tek-iterable-toolbar[data-v-02c0169b] {\n display: flex;\n justify-content: space-between;\n margin-bottom: 16px;\n align-items: center;\n width: 100%;\n}\n.tek-iterable-component-render .tek-iterable-footer[data-v-02c0169b] {\n padding: 5px 0;\n display: flex;\n width: 100%;\n}\n\n/*# sourceMappingURL=TekIterableComponentRender.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-iterable-component-render/TekIterableComponentRender.vue","TekIterableComponentRender.vue"],"names":[],"mappings":"AAkGA;EACA,WAAA;EACA,aAAA;EACA,eAAA;EACA,mBAAA;EACA,cAAA;ACjGA;ADmGA;;EAEA,kBAAA;EACA,WAAA;EACA,eAAA;ACjGA;ADoGA;EACA,0BAAA;AClGA;ADqGA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,mBAAA;EACA,WAAA;ACnGA;ADsGA;EACA,cAAA;EACA,aAAA;EACA,WAAA;ACpGA;;AAEA,yDAAyD","file":"TekIterableComponentRender.vue","sourcesContent":["<template>\n <div v-if=\"instance.isVisible\" :class=\"['tek-iterable-component-render', instance.cssClass]\">\n <div class=\"tek-iterable-toolbar\" v-if=\"instance.toolbarSlot.length || !!$slots.toolbarSlot\">\n <div class=\"tek-iterable-toolbar-slot\">\n <component\n v-for=\"(child, index) in instance.toolbarSlot\"\n :key=\"index\"\n :is=\"child.component\"\n :parent=\"instance\"\n v-bind=\"child\"\n ></component>\n <slot name=\"toolbarSlot\"></slot>\n </div>\n </div>\n\n <v-progress-circular\n v-if=\"instance.datasource.loading\"\n indeterminate\n class=\"zd-frame\"\n size=\"64\"\n color=\"primary\"\n ></v-progress-circular>\n\n <template v-else-if=\"instance.datasource.error\">\n <component\n v-for=\"(child, index) in instance.errorSlot\"\n :key=\"index\"\n :is=\"child.component\"\n :parent=\"instance\"\n v-bind=\"child\"\n ></component>\n <slot name=\"errorSlot\"></slot>\n <span\n v-if=\"instance.errorSlot.length === 0\"\n class=\"error--text\"\n >{{ $t(instance.datasource.error) }}</span>\n </template>\n\n <component\n v-else-if=\"instance.datasource.data.length\"\n v-for=\"(row) in instance.datasource.data\"\n :key=\"JSON.stringify(row)\"\n :is=\"instance.componentMetadata.component\"\n v-bind=\"instance.getComponentMetadata(row)\"\n />\n\n <template\n v-else-if=\"!instance.datasource.currentRow[instance.datasource.uniqueKey]\"\n class=\"no--data\">\n <template\n v-if=\"instance.datasource.search\">\n <component\n v-for=\"(child, index) in instance.noResultSlot\"\n :key=\"index\"\n :is=\"child.component\"\n :parent=\"instance\"\n v-bind=\"child\"\n ></component>\n <slot name=\"noResultSlot\"></slot>\n </template>\n <template\n v-else>\n <component\n v-for=\"(child, index) in instance.noDataSlot\"\n :key=\"index\"\n :is=\"child.component\"\n :parent=\"instance\"\n v-bind=\"child\"\n ></component>\n <slot name=\"noDataSlot\"></slot>\n </template>\n </template>\n\n <component\n v-else\n :key=\"JSON.stringify(instance.datasource.currentRow)\"\n :is=\"instance.componentMetadata.component\"\n v-bind=\"instance.getComponentMetadata(instance.datasource.currentRow)\"\n />\n\n <div class=\"tek-iterable-footer\">\n <template v-if=\"instance.footerSlot || !!$slots.footerSlot\">\n <component\n v-for=\"(child, index) in instance.footerSlot\"\n :key=\"index\"\n :is=\"child.component\"\n :parent=\"instance\"\n v-bind=\"child\"\n ></component>\n <slot name=\"footerSlot\"></slot>\n </template>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./TekIterableComponentRender.ts\"></script>\n\n<style lang=\"scss\" scoped>\n.tek-iterable-component-render {\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n -webkit-box-flex: 1;\n flex: 1 1 auto;\n\n .error--text,\n .no--data {\n text-align: center;\n width: 100%;\n font-size: 14px;\n }\n\n .no--data {\n color: rgba(0, 0, 0, 0.38);\n }\n\n .tek-iterable-toolbar {\n display: flex;\n justify-content: space-between;\n margin-bottom: 16px;\n align-items: center;\n width: 100%;\n }\n\n .tek-iterable-footer {\n padding: 5px 0;\n display: flex;\n width: 100%;\n }\n}\n</style>",".tek-iterable-component-render {\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,\n.tek-iterable-component-render .no--data {\n text-align: center;\n width: 100%;\n font-size: 14px;\n}\n.tek-iterable-component-render .no--data {\n color: rgba(0, 0, 0, 0.38);\n}\n.tek-iterable-component-render .tek-iterable-toolbar {\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 {\n padding: 5px 0;\n display: flex;\n width: 100%;\n}\n\n/*# sourceMappingURL=TekIterableComponentRender.vue.map */"]}, media: undefined });
4769
+ inject("data-v-02c0169b_0", { source: ".tek-iterable-component-render[data-v-02c0169b] {\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n -webkit-box-flex: 1;\n flex: 1 1 auto;\n}\n.tek-iterable-component-render .error--text[data-v-02c0169b],\n.tek-iterable-component-render .no--data[data-v-02c0169b] {\n text-align: center;\n width: 100%;\n font-size: 14px;\n}\n.tek-iterable-component-render .no--data[data-v-02c0169b] {\n color: rgba(0, 0, 0, 0.38);\n}\n.tek-iterable-component-render .tek-iterable-toolbar[data-v-02c0169b] {\n display: flex;\n justify-content: space-between;\n margin-bottom: 16px;\n align-items: center;\n width: 100%;\n}\n.tek-iterable-component-render .tek-iterable-footer[data-v-02c0169b] {\n padding: 5px 0;\n display: flex;\n width: 100%;\n}", map: undefined, media: undefined });
3826
4770
 
3827
4771
  };
3828
4772
  /* scoped */
@@ -3961,7 +4905,7 @@ __vue_render__$1._withStripped = true;
3961
4905
  /* style */
3962
4906
  const __vue_inject_styles__$1 = function (inject) {
3963
4907
  if (!inject) return
3964
- inject("data-v-552c53cd_0", { source: ".tek-notifications .tek-card-title .mark-read-text {\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n display: inline-block;\n}\n.tek-notifications .tek-card-title .mark-read-text p {\n margin-bottom: 0px;\n}\n.tek-notifications .tek-card-title hr.v-divider {\n margin-bottom: 0px;\n}\n.tek-notifications ul.tek-notifications-list {\n list-style: none;\n padding: 0;\n}\n.tek-notifications ul.tek-notifications-list li {\n border-bottom: solid 1px rgba(0, 0, 0, 0.12);\n color: #667080;\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n line-height: 14px;\n padding: 10px 20px 10px 0;\n position: relative;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-subject {\n font-weight: 700;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-read-mark {\n width: 10px;\n height: 10px;\n background-color: var(--v-primary-base);\n border-radius: 50%;\n position: absolute;\n right: 2px;\n top: 12px;\n}\n.tek-notifications ul.tek-notifications-list li:last-child {\n border-bottom: none;\n}\n.tek-notifications .tek-notification-show-all {\n text-decoration: none;\n text-align: center;\n padding-top: 10px;\n font-weight: 700;\n display: block;\n border-top: solid 1px rgba(0, 0, 0, 0.12);\n}\n\n/*# sourceMappingURL=TekNotifications.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-notifications/TekNotifications.vue","TekNotifications.vue"],"names":[],"mappings":"AAyBA;EACA,oCAAA;EACA,wCAAA;EACA,qBAAA;ACxBA;ADyBA;EACA,kBAAA;ACvBA;AD2BA;EACA,kBAAA;ACzBA;AD6BA;EACA,gBAAA;EACA,UAAA;AC3BA;AD6BA;EACA,4CAAA;EACA,cAAA;EACA,oCAAA;EACA,wCAAA;EACA,iBAAA;EACA,yBAAA;EACA,kBAAA;AC3BA;AD6BA;EACA,gBAAA;AC3BA;AD8BA;EACA,WAAA;EACA,YAAA;EACA,uCAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;EACA,SAAA;AC5BA;AD+BA;EACA,mBAAA;AC7BA;ADkCA;EACA,qBAAA;EACA,kBAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,yCAAA;AChCA;;AAEA,+CAA+C","file":"TekNotifications.vue","sourcesContent":["<template>\n <div class=\"tek-notifications\">\n <tek-card-title v-bind=\"instance.cardTitle\" />\n <span v-if=\"instance.datasource.error\" class=\"error--text\">{{ $t(instance.datasource.error) }}</span>\n <span v-else-if=\"!instance.datasource.data.length\">{{$t('NO_NOTIFICATIONS')}}</span>\n <ul v-else class=\"tek-notifications-list\">\n <li v-for=\"notification in instance.datasource.data\"\n :key=\"notification.id\"\n @click=\"notificationClick($event, notification)\">\n <span class=\"tek-notification-subject\">{{ notification.subject }}</span>\n <span class=\"tek-notification-body\"> - {{ notification.body }}</span>\n <span v-if=\"!notification.read\" class=\"tek-notification-read-mark\"></span>\n </li>\n </ul>\n <router-link v-if=\"instance.allNotificationsPath\" class=\"tek-notification-show-all\" :to=\"instance.allNotificationsPath\">\n <div @click=\"showAll($event)\">{{ $t('SEE_ALL_NOTIFICATIONS') }}</div>\n </router-link>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./TekNotifications.ts\"></script>\n\n<style lang=\"scss\">\n.tek-notifications {\n .tek-card-title {\n .mark-read-text {\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n display: inline-block;\n p {\n margin-bottom: 0px;\n }\n }\n\n hr.v-divider {\n margin-bottom: 0px;\n }\n }\n\n ul.tek-notifications-list {\n list-style: none;\n padding: 0;\n\n li {\n border-bottom: solid 1px rgba(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-notification-subject {\n font-weight: 700;\n }\n\n .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\n &:last-child {\n border-bottom: none;\n }\n }\n }\n\n .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,.12);\n }\n}\n</style>",".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}\n\n/*# sourceMappingURL=TekNotifications.vue.map */"]}, media: undefined });
4908
+ inject("data-v-552c53cd_0", { source: ".tek-notifications .tek-card-title .mark-read-text {\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n display: inline-block;\n}\n.tek-notifications .tek-card-title .mark-read-text p {\n margin-bottom: 0px;\n}\n.tek-notifications .tek-card-title hr.v-divider {\n margin-bottom: 0px;\n}\n.tek-notifications ul.tek-notifications-list {\n list-style: none;\n padding: 0;\n}\n.tek-notifications ul.tek-notifications-list li {\n border-bottom: solid 1px rgba(0, 0, 0, 0.12);\n color: #667080;\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n line-height: 14px;\n padding: 10px 20px 10px 0;\n position: relative;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-subject {\n font-weight: 700;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-read-mark {\n width: 10px;\n height: 10px;\n background-color: var(--v-primary-base);\n border-radius: 50%;\n position: absolute;\n right: 2px;\n top: 12px;\n}\n.tek-notifications ul.tek-notifications-list li:last-child {\n border-bottom: none;\n}\n.tek-notifications .tek-notification-show-all {\n text-decoration: none;\n text-align: center;\n padding-top: 10px;\n font-weight: 700;\n display: block;\n border-top: solid 1px rgba(0, 0, 0, 0.12);\n}", map: undefined, media: undefined });
3965
4909
 
3966
4910
  };
3967
4911
  /* scoped */
@@ -4180,7 +5124,7 @@ __vue_render__._withStripped = true;
4180
5124
  /* style */
4181
5125
  const __vue_inject_styles__ = function (inject) {
4182
5126
  if (!inject) return
4183
- inject("data-v-541eabd6_0", { source: ".tek-product-card * {\n text-decoration: none;\n}\n.tek-product-card .v-card {\n padding: 0%;\n}\n.tek-product-card .v-card .tek-image-content {\n text-align: center;\n}\n.tek-product-card .v-card .tek-product-card-image-container {\n position: relative;\n}\n.tek-product-card .v-card .tek-product-card-info {\n display: flex;\n flex-direction: column;\n padding: 5px 10px 10px 10px;\n color: var(--zd-font-color);\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-title {\n white-space: nowrap;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 16px;\n line-height: 19px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-supplier {\n font-size: var(--zd-font-body2-size);\n line-height: 14px;\n color: #c4c4c4;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 10px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-brand {\n font-size: var(--zd-font-body2-size);\n line-height: 14px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-price {\n font-weight: var(--zd-font-body4-weight);\n font-size: var(--zd-font-body4-size);\n line-height: 16px;\n}\n.tek-product-card--link .v-card {\n cursor: pointer;\n}\n\n/*# sourceMappingURL=TekProductCard.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-product-card/TekProductCard.vue","TekProductCard.vue"],"names":[],"mappings":"AA4CA;EACA,qBAAA;AC3CA;AD8CA;EACA,WAAA;AC5CA;AD6CA;EACA,kBAAA;AC3CA;AD6CA;EACA,kBAAA;AC3CA;AD6CA;EACA,aAAA;EACA,sBAAA;EACA,2BAAA;EACA,2BAAA;AC3CA;AD6CA;EACA,mBAAA;EACA,WAAA;EACA,gBAAA;EACA,uBAAA;EACA,eAAA;EACA,iBAAA;AC3CA;AD6CA;EACA,oCAAA;EACA,iBAAA;EACA,cAAA;AC3CA;AD6CA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,iBAAA;AC3CA;AD6CA;EACA,oCAAA;EACA,iBAAA;AC3CA;AD6CA;EACA,wCAAA;EACA,oCAAA;EACA,iBAAA;AC3CA;ADkDA;EACA,eAAA;AChDA;;AAEA,6CAA6C","file":"TekProductCard.vue","sourcesContent":["<template >\n <div\n v-if=\"instance.isVisible\"\n :class=\"[\n 'tek-product-card',\n { 'tek-product-card--link': instance.events.click },\n instance.cssClass\n ]\"\n :style=\"{ width: instance.width }\"\n @click=\"click($event)\"\n >\n <zd-card :name=\"instance.name\" :elevation=\"2\" :to=\"instance.to\">\n <div class=\"tek-product-card-image-container\">\n <zd-image\n :name=\"instance.name+'_image'\"\n :src=\"instance.src\"\n :errorImagePath=\"instance.errorImagePath\"\n :errorImageText=\"$t(instance.errorImageText)\"\n width=\"100%\"\n object-fit=\"contain\"\n height= \"210px\"\n />\n </div>\n <div class=\"tek-product-card-info\">\n <v-tooltip :disabled=\"disableTooltip\" top>\n <template v-slot:activator=\"{ on }\">\n <div v-on=\"on\" ref=\"productDiv\" class=\"tek-product-card-title\">{{ instance.productName }}</div>\n </template>\n <span>{{ instance.productName }}</span>\n </v-tooltip>\n <div v-if=\"instance.productSupplier\" class=\"tek-product-card-supplier\">{{ instance.productSupplier }}</div>\n <div class=\"tek-product-card-footer\">\n <div v-if=\"instance.productPrice\" class=\"tek-product-card-price\">{{ instance.productPriceFormat }}</div>\n <div v-if=\"instance.productBrand\" class=\"tek-product-card-brand\">{{ instance.productBrand }}</div>\n </div>\n </div>\n </zd-card>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./TekProductCard.ts\"></script>\n\n<style lang=\"scss\">\n.tek-product-card {\n * {\n text-decoration: none;\n }\n\n .v-card {\n padding: 0%;\n .tek-image-content {\n text-align: center;\n }\n .tek-product-card-image-container {\n position: relative;\n }\n .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-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-supplier {\n font-size: var(--zd-font-body2-size);\n line-height: 14px;\n color: #c4c4c4;\n }\n .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-brand {\n font-size: var(--zd-font-body2-size);\n line-height: 14px;\n }\n .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 }\n }\n }\n\n &--link {\n .v-card {\n cursor: pointer;\n }\n }\n}\n</style>",".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}\n\n/*# sourceMappingURL=TekProductCard.vue.map */"]}, media: undefined });
5127
+ inject("data-v-541eabd6_0", { source: ".tek-product-card * {\n text-decoration: none;\n}\n.tek-product-card .v-card {\n padding: 0%;\n}\n.tek-product-card .v-card .tek-image-content {\n text-align: center;\n}\n.tek-product-card .v-card .tek-product-card-image-container {\n position: relative;\n}\n.tek-product-card .v-card .tek-product-card-info {\n display: flex;\n flex-direction: column;\n padding: 5px 10px 10px 10px;\n color: var(--zd-font-color);\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-title {\n white-space: nowrap;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 16px;\n line-height: 19px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-supplier {\n font-size: var(--zd-font-body2-size);\n line-height: 14px;\n color: #c4c4c4;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 10px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-brand {\n font-size: var(--zd-font-body2-size);\n line-height: 14px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-price {\n font-weight: var(--zd-font-body4-weight);\n font-size: var(--zd-font-body4-size);\n line-height: 16px;\n}\n.tek-product-card--link .v-card {\n cursor: pointer;\n}", map: undefined, media: undefined });
4184
5128
 
4185
5129
  };
4186
5130
  /* scoped */