@zeedhi/teknisa-components-common 1.45.0 → 1.48.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('@zeedhi/common'), require('lodash.get'), require('lodash.debounce'), require('lodash.merge')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', '@zeedhi/common', 'lodash.get', 'lodash.debounce', 'lodash.merge'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/teknisa-components-common"] = {}, global["@zeedhi/core"], global.common, global.lodash.get, global.lodash.debounce, global.lodash.merge));
-})(this, (function (exports, core, common, get, debounce, merge) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('@zeedhi/common'), require('lodash.get'), require('lodash.debounce'), require('lodash.merge'), require('@zeedhi/zd-user-info-common')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', '@zeedhi/common', 'lodash.get', 'lodash.debounce', 'lodash.merge', '@zeedhi/zd-user-info-common'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/teknisa-components-common"] = {}, global["@zeedhi/core"], global.common, global.lodash.get, global.lodash.debounce, global.lodash.merge, global["@zeedhi/zd-user-info-common"]));
+})(this, (function (exports, core, common, get, debounce, merge, zdUserInfoCommon) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1140,9 +1140,11 @@
                           columnComponentName = `${this.grid.name}-filter-AND-CONTAINS-${column.name}-${index}`;
                       }
                       this.filterFormInputs[column.name].push(columnComponentName);
-                      let newColumnComponent = Object.assign(Object.assign(Object.assign({ label: column.label }, column.componentProps), filterItem), { name: columnComponentName });
+                      const newColumnComponent = Object.assign(Object.assign(Object.assign({ label: column.label }, column.componentProps), filterItem), { name: columnComponentName });
                       if (filterItem.helperOptions) {
-                          newColumnComponent = this.getHelperValueComponent(newColumnComponent, filterItem.helperOptions, column);
+                          if (!newColumnComponent.events)
+                              newColumnComponent.events = {};
+                          newColumnComponent.events.change = this.changeHelperEvent.bind(this, column);
                       }
                       filterColumns.push(newColumnComponent);
                   });
@@ -1150,54 +1152,9 @@
           });
           return filterColumns;
       }
-      getHelperValueComponent(component, helperValues, column) {
-          return {
-              name: `${component.name}_helperspan`,
-              component: 'ZdTag',
-              tag: 'span',
-              cssClass: 'zd-display-flex',
-              grid: component.grid,
-              children: [
-                  Object.assign(Object.assign({}, component), { persistentHint: true, events: {
-                          onMounted: this.registerFilterComponentToForm.bind(this),
-                          change: this.clearFilterHelperValue.bind(this, column),
-                      } }),
-                  {
-                      name: `${component.name}_helperdropdown`,
-                      component: 'ZdDropdown',
-                      offsetY: true,
-                      activator: {
-                          name: `${component.name}_helperbutton`,
-                          component: 'ZdButton',
-                          iconName: 'magnify',
-                          icon: true,
-                          small: true,
-                          cssClass: `filter-helper-values-button ${component.showLabel !== false ? 'with-label' : ''}`,
-                      },
-                      children: this.createHelperValueOptions(component, helperValues, column),
-                  },
-              ],
-          };
-      }
-      createHelperValueOptions(component, helperValues, column) {
-          return helperValues.map((value) => ({
-              name: `${component.name}_helpervalue_${value}`,
-              component: 'ZdText',
-              cssClass: 'filter-helper-values-option',
-              text: TekFilterHelper.getLabel(value),
-              events: {
-                  click: this.helperValuesOptionClick.bind(this, component, value, column),
-              },
-          }));
-      }
-      helperValuesOptionClick(component, helperValue, column) {
-          const value = TekFilterHelper.getValue(helperValue, column);
-          const componentObject = core.Metadata.getInstance(component.name);
-          componentObject.value = value;
-          componentObject.hint = TekFilterHelper.getLabel(helperValue);
-          this.setFilterPropsHelperValue(column, component.name, helperValue);
-      }
-      setFilterPropsHelperValue(column, componentName, helperValue) {
+      changeHelperEvent(column, { component }) {
+          const { helperValue } = component;
+          const componentName = component.name;
           if (!Array.isArray(column.filterProps)) {
               column.filterProps.helperValue = helperValue;
           }
@@ -1211,14 +1168,6 @@
               });
           }
       }
-      registerFilterComponentToForm({ component }) {
-          const form = core.Metadata.getInstance(`${this.grid.name}-filter-form`);
-          form.registerInput(component);
-      }
-      clearFilterHelperValue(column, { component }) {
-          this.setFilterPropsHelperValue(column, component.name, '');
-          component.hint = '';
-      }
       loadFilterValues({ component }) {
           const { datasource } = this.grid;
           if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
@@ -1693,6 +1642,8 @@
           }
           this.lazyLoad = this.getInitValue('lazyLoad', props.lazyLoad, this.lazyLoad);
           this.createAccessors();
+          this.createObjAccessors(this.dynamicFilter, 'dynamicFilter');
+          this.createObjAccessors(this.searchJoin, 'searchJoin');
           if (!this.lazyLoad) {
               this.get();
           }
@@ -1872,6 +1823,8 @@
               this.searchJoin = this.getInitValue('searchJoin', props.searchJoin, {});
           }
           this.createAccessors();
+          this.createObjAccessors(this.dynamicFilter, 'dynamicFilter');
+          this.createObjAccessors(this.searchJoin, 'searchJoin');
           this.get();
       }
       updateReservedKeys() {
@@ -2018,61 +1971,70 @@
       }
       getRowByDynamicFilter(row) {
           let filtered;
-          Object.keys(this.dynamicFilter).forEach((key) => {
-              const filterItems = this.dynamicFilter[key];
-              filterItems.forEach((item) => {
-                  if (filtered === false && item.relation === 'AND')
-                      return;
-                  if (filtered === true && item.relation === 'OR')
-                      return;
-                  const columnValue = core.Utils.normalize(row[key].toString());
-                  let value = '';
-                  if (Array.isArray(item.value)) {
-                      value = item.value.map((val) => core.Utils.normalize(val.toString()));
-                      switch (item.operation) {
-                          case 'IN':
-                              filtered = value.includes(columnValue);
-                              break;
-                          case 'NOT_IN':
-                              filtered = !value.includes(columnValue);
-                              break;
-                          case 'BETWEEN':
-                              filtered = (Number(columnValue) || columnValue) >= (Number(value[0]) || value[0])
-                                  && (Number(columnValue) || columnValue) <= (Number(value[1]) || value[1]);
-                              break;
+          try {
+              Object.keys(this.dynamicFilter).forEach((key) => {
+                  const filterItems = this.dynamicFilter[key];
+                  filterItems.forEach((item) => {
+                      if (filtered === false && item.relation === 'AND')
+                          return;
+                      if (filtered === true && item.relation === 'OR')
+                          return;
+                      const columnValue = core.Utils.normalize(row[key].toString());
+                      let value = '';
+                      if (Array.isArray(item.value)) {
+                          value = item.value.map((val) => core.Utils.normalize(val.toString()));
+                          switch (item.operation) {
+                              case 'IN':
+                                  filtered = value.includes(columnValue);
+                                  break;
+                              case 'NOT_IN':
+                                  filtered = !value.includes(columnValue);
+                                  break;
+                              case 'BETWEEN':
+                                  filtered = (Number(columnValue) || columnValue) >= (Number(value[0]) || value[0])
+                                      && (Number(columnValue) || columnValue) <= (Number(value[1]) || value[1]);
+                                  break;
+                              default:
+                                  break;
+                          }
                       }
-                  }
-                  else {
-                      value = core.Utils.normalize(item.value.toString());
-                      switch (item.operation) {
-                          case 'CONTAINS':
-                              filtered = columnValue.indexOf(value) !== -1;
-                              break;
-                          case 'NOT_CONTAINS':
-                              filtered = columnValue.indexOf(value) === -1;
-                              break;
-                          case 'EQUALS':
-                              filtered = columnValue === value;
-                              break;
-                          case 'NOT_EQUALS':
-                              filtered = columnValue !== value;
-                              break;
-                          case 'GREATER_THAN':
-                              filtered = (Number(columnValue) || columnValue) > (Number(value) || value);
-                              break;
-                          case 'LESS_THAN':
-                              filtered = (Number(columnValue) || columnValue) < (Number(value) || value);
-                              break;
-                          case 'GREATER_THAN_EQUALS':
-                              filtered = (Number(columnValue) || columnValue) >= (Number(value) || value);
-                              break;
-                          case 'LESS_THAN_EQUALS':
-                              filtered = (Number(columnValue) || columnValue) <= (Number(value) || value);
-                              break;
+                      else {
+                          value = core.Utils.normalize(item.value.toString());
+                          switch (item.operation) {
+                              case 'CONTAINS':
+                                  filtered = columnValue.indexOf(value) !== -1;
+                                  break;
+                              case 'NOT_CONTAINS':
+                                  filtered = columnValue.indexOf(value) === -1;
+                                  break;
+                              case 'EQUALS':
+                                  filtered = columnValue === value;
+                                  break;
+                              case 'NOT_EQUALS':
+                                  filtered = columnValue !== value;
+                                  break;
+                              case 'GREATER_THAN':
+                                  filtered = (Number(columnValue) || columnValue) > (Number(value) || value);
+                                  break;
+                              case 'LESS_THAN':
+                                  filtered = (Number(columnValue) || columnValue) < (Number(value) || value);
+                                  break;
+                              case 'GREATER_THAN_EQUALS':
+                                  filtered = (Number(columnValue) || columnValue) >= (Number(value) || value);
+                                  break;
+                              case 'LESS_THAN_EQUALS':
+                                  filtered = (Number(columnValue) || columnValue) <= (Number(value) || value);
+                                  break;
+                              default:
+                                  break;
+                          }
                       }
-                  }
+                  });
               });
-          });
+          }
+          catch (_a) {
+              // do nothing
+          }
           return filtered;
       }
       getRowBySearchJoin(row) {
@@ -3037,88 +2999,19 @@
   }
 
   class TekFilterHelper {
-      static formatDate(date, column) {
-          if (column.componentProps.dateFormat) {
-              return core.dayjs(date).format(column.componentProps.dateFormat);
-          }
-          return core.dayjs(date).format(core.Config.dateFormat);
-      }
       static getLabel(name) {
-          return core.I18n.translate(this.values[name].label);
+          return core.DateHelper.getLabel(name);
       }
       static getValue(name, column) {
-          if (!this.values[name])
-              return '';
-          const value = this.values[name].fn();
-          if (Array.isArray(value)) {
-              return value.map((item) => this.formatDate(item, column));
-          }
-          return this.formatDate(value, column);
+          return core.DateHelper.getValue(name, column.componentProps.dateFormat);
       }
       static register(name, label, fn) {
-          this.values[name] = {
-              label,
-              fn,
-          };
+          core.DateHelper.register(name, label, fn);
       }
       static unregister(name) {
-          delete this.values[name];
+          core.DateHelper.unregister(name);
       }
-  }
-  TekFilterHelper.values = {
-      TODAY: {
-          label: 'TEKGRID_HELPERVALUE_TODAY',
-          fn: () => core.dayjs().toDate(),
-      },
-      TOMORROW: {
-          label: 'TEKGRID_HELPERVALUE_TOMORROW',
-          fn: () => core.dayjs().add(1, 'day').toDate(),
-      },
-      YESTERDAY: {
-          label: 'TEKGRID_HELPERVALUE_YESTERDAY',
-          fn: () => core.dayjs().subtract(1, 'day').toDate(),
-      },
-      LAST_7_DAYS: {
-          label: 'TEKGRID_HELPERVALUE_LAST_7_DAYS',
-          fn: () => {
-              const end = core.dayjs().toDate();
-              const start = core.dayjs().subtract(7, 'day').toDate();
-              return [start, end];
-          },
-      },
-      NEXT_7_DAYS: {
-          label: 'TEKGRID_HELPERVALUE_NEXT_7_DAYS',
-          fn: () => {
-              const start = core.dayjs().toDate();
-              const end = core.dayjs().add(7, 'day').toDate();
-              return [start, end];
-          },
-      },
-      CURRENT_WEEK: {
-          label: 'TEKGRID_HELPERVALUE_CURRENT_WEEK',
-          fn: () => {
-              const start = core.dayjs().startOf('week').toDate();
-              const end = core.dayjs().endOf('week').toDate();
-              return [start, end];
-          },
-      },
-      CURRENT_MONTH: {
-          label: 'TEKGRID_HELPERVALUE_CURRENT_MONTH',
-          fn: () => {
-              const start = core.dayjs().startOf('month').toDate();
-              const end = core.dayjs().endOf('month').toDate();
-              return [start, end];
-          },
-      },
-      CURRENT_YEAR: {
-          label: 'TEKGRID_HELPERVALUE_CURRENT_YEAR',
-          fn: () => {
-              const start = core.dayjs().startOf('year').toDate();
-              const end = core.dayjs().endOf('year').toDate();
-              return [start, end];
-          },
-      },
-  };
+  }
 
   /* TekTreeGrid Class */
   class TekTreeGrid extends common.TreeGridEditable {
@@ -3284,6 +3177,422 @@
       }
   }
 
+  class TekUserInfoController {
+      constructor(component) {
+          this.component = component;
+      }
+      get versionInfo() {
+          return this.component.versionInfo;
+      }
+      get name() {
+          var _a;
+          return ((_a = this.versionInfo) === null || _a === void 0 ? void 0 : _a.name) || '';
+      }
+      set name(value) {
+          if (!this.versionInfo)
+              return;
+          this.versionInfo.name = value;
+      }
+      get version() {
+          var _a;
+          return ((_a = this.versionInfo) === null || _a === void 0 ? void 0 : _a.version) || '';
+      }
+      set version(value) {
+          if (!this.versionInfo)
+              return;
+          this.versionInfo.version = value;
+      }
+      get defaultEmail() {
+          return this.component.defaultEmail;
+      }
+      set defaultEmail(value) {
+          this.component.defaultEmail = value;
+      }
+      get hasDefaultEmail() {
+          return !!this.component.defaultEmail;
+      }
+      get hasAboutImage() {
+          return !!this.component.aboutImage;
+      }
+      mergeText(name, version) {
+          return `${name} - <b>${version}</b>`;
+      }
+      get mainVersion() {
+          var _a;
+          if (!((_a = this.versionInfo) === null || _a === void 0 ? void 0 : _a.name) || !this.versionInfo.version)
+              return '';
+          return this.mergeText(this.versionInfo.name, this.versionInfo.version);
+      }
+      getItems(tab) {
+          if (!this.versionInfo)
+              return [];
+          const tabInfo = this.versionInfo[tab];
+          return tabInfo.map((item) => this.mergeText(item.name, item.version));
+      }
+      get frontendItems() {
+          return this.getItems('frontend');
+      }
+      get backendItems() {
+          return this.getItems('backend');
+      }
+      get modulesItems() {
+          return this.getItems('modules');
+      }
+  }
+
+  class TekUserInfo extends zdUserInfoCommon.UserInfo {
+      constructor(props) {
+          super(props);
+          /**
+          * Data about the application version
+          */
+          this.versionInfo = null;
+          /**
+          * Default email address to be defined in the Report Bug form
+          */
+          this.defaultEmail = '';
+          /**
+          * Url from which the version info will be retrieved
+          */
+          this.versionUrl = '';
+          /**
+          * Path to the image to be shown on about modal
+          */
+          this.aboutImage = '';
+          this.versionInfo = this.getInitValue('versionInfo', props.versionInfo, this.versionInfo);
+          this.defaultEmail = this.getInitValue('defaultEmail', props.defaultEmail, this.defaultEmail);
+          this.versionUrl = this.getInitValue('versionUrl', props.versionUrl, this.versionUrl);
+          this.aboutImage = this.getInitValue('aboutImage', props.aboutImage, this.aboutImage);
+          this.createAccessors();
+          this.propBottomSlot = props.bottomSlot;
+      }
+      getBottomSlot() {
+          return [
+              {
+                  name: `${this.name}_bottom_list`,
+                  component: 'TekUserInfoList',
+                  parentName: this.name,
+              },
+          ];
+      }
+      onAboutClick() {
+          if (!this.aboutModal) {
+              this.aboutModal = common.ModalService.create({
+                  name: `${this.name}_about_modal`,
+                  cssClass: 'about-modal',
+                  children: [
+                      {
+                          name: `${this.name}_about_header`,
+                          component: 'ZdHeader',
+                          color: 'transparent',
+                          padless: true,
+                          elevation: 0,
+                          rightSlot: [
+                              {
+                                  name: `${this.name}_about_close_button`,
+                                  component: 'ZdModalCloseButton',
+                                  small: true,
+                                  modalName: `${this.name}_about_modal`,
+                              },
+                          ],
+                      },
+                      {
+                          name: `${this.name}_about_row`,
+                          component: 'ZdTag',
+                          tag: 'div',
+                          cssClass: 'zd-justify-center zd-px-6',
+                          isVisible: `{{TekUserInfoController_${this.componentId}.hasAboutImage}}`,
+                          children: [
+                              {
+                                  name: `${this.name}_about_image`,
+                                  component: 'ZdImage',
+                                  width: '100%',
+                                  src: this.aboutImage,
+                              },
+                          ],
+                      },
+                      {
+                          name: `${this.name}_version_tabs`,
+                          cssClass: 'zd-pt-3',
+                          component: 'ZdTabs',
+                          tabs: [
+                              {
+                                  name: `${this.name}_version_frontend_tab`,
+                                  tabTitle: 'Frontend',
+                                  children: this.getVersionTree('frontend'),
+                              },
+                              {
+                                  name: `${this.name}_version_backend_tab`,
+                                  tabTitle: 'Backend',
+                                  children: this.getVersionTree('backend'),
+                              },
+                              {
+                                  name: `${this.name}_version_modules_tab`,
+                                  tabTitle: 'Modules',
+                                  children: this.getVersionTree('modules'),
+                              },
+                          ],
+                      },
+                  ],
+              });
+          }
+          this.aboutModal.show();
+      }
+      getVersionTree(tab) {
+          if (!this.versionInfo)
+              return [];
+          const main = {
+              name: `${this.name}_version_${tab}_main`,
+              component: 'ZdText',
+              text: `{{TekUserInfoController_${this.componentId}.mainVersion}}`,
+          };
+          const itemsComponent = {
+              name: `${this.name}_version_${tab}`,
+              component: 'ZdText',
+              cssClass: 'zd-pl-4',
+              text: `{{TekUserInfoController_${this.componentId}.${tab}Items}}`,
+          };
+          return [main, itemsComponent];
+      }
+      onReportClick() {
+          if (!this.reportModal) {
+              this.reportModal = common.ModalService.create({
+                  name: `${this.name}_report_modal`,
+                  children: [
+                      {
+                          name: `${this.name}_report_header`,
+                          component: 'ZdHeader',
+                          color: 'transparent',
+                          padless: true,
+                          elevation: 0,
+                          leftSlot: [
+                              {
+                                  name: `${this.name}_report_title`,
+                                  component: 'ZdText',
+                                  text: 'TEKUSERINFO_REPORT_ERROR',
+                                  cssClass: 'zd-theme-font-title',
+                              },
+                          ],
+                          rightSlot: [
+                              {
+                                  name: `${this.name}_report_close_button`,
+                                  component: 'ZdModalCloseButton',
+                                  small: true,
+                                  modalName: `${this.name}_report_modal`,
+                              },
+                          ],
+                      },
+                      {
+                          name: `${this.name}_report_form`,
+                          component: 'ZdForm',
+                          cssClass: 'zd-pt-4',
+                          children: [
+                              {
+                                  name: 'report_email',
+                                  component: 'ZdTextInput',
+                                  label: 'E-mail',
+                                  grid: {
+                                      cols: '12',
+                                  },
+                                  value: `{{TekUserInfoController_${this.componentId}.defaultEmail}}`,
+                                  readonly: `{{TekUserInfoController_${this.componentId}.hasDefaultEmail}}`,
+                                  validations: {
+                                      required: {},
+                                      email: {},
+                                  },
+                              },
+                              {
+                                  name: 'report_cc',
+                                  component: 'ZdTextInput',
+                                  label: 'CC',
+                                  placeholder: 'TEKUSERINFO_EMAIL_PLACEHOLDER',
+                                  grid: {
+                                      cols: '12',
+                                  },
+                              },
+                              {
+                                  name: 'report_type',
+                                  component: 'ZdSelect',
+                                  label: 'TEKUSERINFO_TYPE',
+                                  dataValue: 'value',
+                                  dataText: 'text',
+                                  datasource: {
+                                      uniqueKey: 'value',
+                                      translate: true,
+                                      data: [
+                                          { value: '0', text: 'TEKUSERINFO_ERROR' },
+                                          { value: '1', text: 'TEKUSERINFO_IMPROVEMENT' },
+                                      ],
+                                  },
+                                  grid: {
+                                      cols: '12',
+                                  },
+                                  validations: {
+                                      required: {},
+                                  },
+                              },
+                              {
+                                  name: 'report_description',
+                                  component: 'ZdTextarea',
+                                  label: 'TEKUSERINFO_DESCRIPTION',
+                                  grid: {
+                                      cols: '12',
+                                  },
+                                  validations: {
+                                      required: {},
+                                  },
+                              },
+                          ],
+                      },
+                      {
+                          name: `${this.name}_report_footer`,
+                          component: 'ZdFooter',
+                          color: 'transparent',
+                          padless: true,
+                          rightSlot: [
+                              {
+                                  name: `${this.name}_report_cancel`,
+                                  component: 'ZdButton',
+                                  label: 'TEKUSERINFO_CANCEL',
+                                  outline: true,
+                                  events: {
+                                      click: () => { var _a; (_a = this.reportModal) === null || _a === void 0 ? void 0 : _a.hide(); },
+                                  },
+                              },
+                              {
+                                  name: `${this.name}_report_send`,
+                                  component: 'ZdButton',
+                                  label: 'TEKUSERINFO_SEND',
+                                  events: {
+                                      click: (args) => this.onSendReport(args),
+                                  },
+                              },
+                          ],
+                      },
+                  ],
+              });
+          }
+          this.reportModal.show();
+      }
+      onSendReport({ event, element }) {
+          if (!this.reportModal)
+              return;
+          const form = core.Metadata.getInstance(`${this.name}_report_form`);
+          if (!form.validate())
+              return;
+          this.callEvent('onSendReport', {
+              event, element, component: this, form,
+          });
+          this.reportModal.hide();
+      }
+      onCreated() {
+          super.onCreated();
+          core.Loader.addController(`TekUserInfoController_${this.componentId}`, new TekUserInfoController(this));
+          this.bottomSlot = this.propBottomSlot ? this.propBottomSlot : this.getBottomSlot();
+      }
+      onMounted(element) {
+          const _super = Object.create(null, {
+              onMounted: { get: () => super.onMounted }
+          });
+          return __awaiter(this, void 0, void 0, function* () {
+              _super.onMounted.call(this, element);
+              if (this.versionUrl) {
+                  const res = yield core.Http.get(this.versionUrl);
+                  this.versionInfo = res.data.versionInfo;
+              }
+          });
+      }
+  }
+  core.Messages.add({
+      'pt-BR': {
+          translation: {
+              TEKUSERINFO_ABOUT: 'Sobre',
+              TEKUSERINFO_REPORT_ERROR: 'Reportar Erro',
+              TEKUSERINFO_EMAIL_PLACEHOLDER: 'Separe e-mails usando ";"',
+              TEKUSERINFO_TYPE: 'Tipo',
+              TEKUSERINFO_ERROR: 'Erro',
+              TEKUSERINFO_IMPROVEMENT: 'Melhoria',
+              TEKUSERINFO_DESCRIPTION: 'Descrição',
+              TEKUSERINFO_CANCEL: 'Cancelar',
+              TEKUSERINFO_SEND: 'Enviar',
+          },
+      },
+      'en-US': {
+          translation: {
+              TEKUSERINFO_ABOUT: 'About',
+              TEKUSERINFO_REPORT_ERROR: 'Report Bug',
+              TEKUSERINFO_EMAIL_PLACEHOLDER: 'Separate e-mails using ";"',
+              TEKUSERINFO_TYPE: 'Type',
+              TEKUSERINFO_ERROR: 'Bug',
+              TEKUSERINFO_IMPROVEMENT: 'Improvement',
+              TEKUSERINFO_DESCRIPTION: 'Description',
+              TEKUSERINFO_CANCEL: 'Cancel',
+              TEKUSERINFO_SEND: 'Send',
+          },
+      },
+      'es-ES': {
+          translation: {
+              TEKUSERINFO_ABOUT: 'Sobre',
+              TEKUSERINFO_REPORT_ERROR: 'Reportar Error',
+              TEKUSERINFO_EMAIL_PLACEHOLDER: 'Separar e-mails usando ";"',
+              TEKUSERINFO_TYPE: 'Tipo',
+              TEKUSERINFO_ERROR: 'Error',
+              TEKUSERINFO_IMPROVEMENT: 'Mejora',
+              TEKUSERINFO_DESCRIPTION: 'Descripción',
+              TEKUSERINFO_CANCEL: 'Cancelar',
+              TEKUSERINFO_SEND: 'Enviar',
+          },
+      },
+  });
+
+  class TekUserInfoList extends common.List {
+      constructor(props) {
+          super(props);
+          /**
+           * Name of the user info component
+           */
+          this.parentName = '';
+          this.dense = true;
+          this.parentName = props.parentName || '';
+          this.items = this.getItems();
+      }
+      getItems() {
+          const parent = this.parentName ? core.Metadata.getInstance(this.parentName) : this.parent;
+          if (!(parent instanceof TekUserInfo)) {
+              throw Error(`Could not find the TekUserInfo component associated with ${this.name} TekUserInfoList`);
+          }
+          return [
+              {
+                  name: `${parent.name}_version`,
+                  component: 'ZdListItem',
+                  title: `{{TekUserInfoController_${parent.componentId}.name}}`,
+                  subtitle: `{{TekUserInfoController_${parent.componentId}.version}}`,
+                  cssClass: 'zd-px-2',
+              },
+              {
+                  name: `${parent.name}_about`,
+                  component: 'ZdListItem',
+                  title: 'TEKUSERINFO_ABOUT',
+                  prependIcon: 'infoOutline',
+                  cssClass: 'zd-px-2',
+                  events: {
+                      click: () => parent.onAboutClick(),
+                  },
+              },
+              {
+                  name: `${parent.name}_report`,
+                  component: 'ZdListItem',
+                  title: 'TEKUSERINFO_REPORT_ERROR',
+                  prependIcon: 'mdi-ladybug',
+                  cssClass: 'zd-px-2',
+                  events: {
+                      click: () => parent.onReportClick(),
+                  },
+              },
+          ];
+      }
+  }
+
   core.Messages.add({
       'pt-BR': {
           translation: {
@@ -3356,6 +3665,8 @@
   exports.TekMemoryDatasource = TekMemoryDatasource;
   exports.TekRestDatasource = TekRestDatasource;
   exports.TekTreeGrid = TekTreeGrid;
+  exports.TekUserInfo = TekUserInfo;
+  exports.TekUserInfoList = TekUserInfoList;
   exports.columnAggregationValues = columnAggregationValues;
 
   Object.defineProperty(exports, '__esModule', { value: true });