@zeedhi/teknisa-components-common 1.45.0 → 1.48.0

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

@@ -1,8 +1,9 @@
-import { KeyMap, I18n, FormatterParserProvider, Messages, Metadata, DatasourceFactory, RestDatasource, URL, MemoryDatasource, Utils, Loader, dayjs, Config } from '@zeedhi/core';
-import { Form, Button, Tooltip, GridEditable, Grid, ComponentRender, Iterable, Carousel, Loading as Loading$1, ModalService, GridColumnEditable, Report, IterableColumnsButtonController, IterableColumnsButton, TreeGridEditable } from '@zeedhi/common';
+import { KeyMap, I18n, FormatterParserProvider, Messages, Metadata, DatasourceFactory, RestDatasource, URL, MemoryDatasource, Utils, Loader, DateHelper, Http } from '@zeedhi/core';
+import { Form, Button, Tooltip, GridEditable, Grid, ComponentRender, Iterable, Carousel, Loading as Loading$1, ModalService, GridColumnEditable, Report, IterableColumnsButtonController, IterableColumnsButton, TreeGridEditable, List } from '@zeedhi/common';
 import get from 'lodash.get';
 import debounce from 'lodash.debounce';
 import merge from 'lodash.merge';
+import { UserInfo } from '@zeedhi/zd-user-info-common';
 
 /**
  * Form to be used on Crud operations
@@ -1134,9 +1135,11 @@ class GridBase {
                         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);
                 });
@@ -1144,54 +1147,9 @@ class GridBase {
         });
         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 = 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;
         }
@@ -1205,14 +1163,6 @@ class GridBase {
             });
         }
     }
-    registerFilterComponentToForm({ component }) {
-        const form = 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) {
@@ -1687,6 +1637,8 @@ class TekRestDatasource extends RestDatasource {
         }
         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();
         }
@@ -1866,6 +1818,8 @@ class TekMemoryDatasource extends MemoryDatasource {
             this.searchJoin = this.getInitValue('searchJoin', props.searchJoin, {});
         }
         this.createAccessors();
+        this.createObjAccessors(this.dynamicFilter, 'dynamicFilter');
+        this.createObjAccessors(this.searchJoin, 'searchJoin');
         this.get();
     }
     updateReservedKeys() {
@@ -2012,61 +1966,70 @@ class TekMemoryDatasource extends MemoryDatasource {
     }
     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 = Utils.normalize(row[key].toString());
-                let value = '';
-                if (Array.isArray(item.value)) {
-                    value = item.value.map((val) => 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 = Utils.normalize(row[key].toString());
+                    let value = '';
+                    if (Array.isArray(item.value)) {
+                        value = item.value.map((val) => 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 = 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 = 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) {
@@ -3031,88 +2994,19 @@ class TekGridLayoutOptions extends ComponentRender {
 }
 
 class TekFilterHelper {
-    static formatDate(date, column) {
-        if (column.componentProps.dateFormat) {
-            return dayjs(date).format(column.componentProps.dateFormat);
-        }
-        return dayjs(date).format(Config.dateFormat);
-    }
     static getLabel(name) {
-        return I18n.translate(this.values[name].label);
+        return 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 DateHelper.getValue(name, column.componentProps.dateFormat);
     }
     static register(name, label, fn) {
-        this.values[name] = {
-            label,
-            fn,
-        };
+        DateHelper.register(name, label, fn);
     }
     static unregister(name) {
-        delete this.values[name];
+        DateHelper.unregister(name);
     }
-}
-TekFilterHelper.values = {
-    TODAY: {
-        label: 'TEKGRID_HELPERVALUE_TODAY',
-        fn: () => dayjs().toDate(),
-    },
-    TOMORROW: {
-        label: 'TEKGRID_HELPERVALUE_TOMORROW',
-        fn: () => dayjs().add(1, 'day').toDate(),
-    },
-    YESTERDAY: {
-        label: 'TEKGRID_HELPERVALUE_YESTERDAY',
-        fn: () => dayjs().subtract(1, 'day').toDate(),
-    },
-    LAST_7_DAYS: {
-        label: 'TEKGRID_HELPERVALUE_LAST_7_DAYS',
-        fn: () => {
-            const end = dayjs().toDate();
-            const start = dayjs().subtract(7, 'day').toDate();
-            return [start, end];
-        },
-    },
-    NEXT_7_DAYS: {
-        label: 'TEKGRID_HELPERVALUE_NEXT_7_DAYS',
-        fn: () => {
-            const start = dayjs().toDate();
-            const end = dayjs().add(7, 'day').toDate();
-            return [start, end];
-        },
-    },
-    CURRENT_WEEK: {
-        label: 'TEKGRID_HELPERVALUE_CURRENT_WEEK',
-        fn: () => {
-            const start = dayjs().startOf('week').toDate();
-            const end = dayjs().endOf('week').toDate();
-            return [start, end];
-        },
-    },
-    CURRENT_MONTH: {
-        label: 'TEKGRID_HELPERVALUE_CURRENT_MONTH',
-        fn: () => {
-            const start = dayjs().startOf('month').toDate();
-            const end = dayjs().endOf('month').toDate();
-            return [start, end];
-        },
-    },
-    CURRENT_YEAR: {
-        label: 'TEKGRID_HELPERVALUE_CURRENT_YEAR',
-        fn: () => {
-            const start = dayjs().startOf('year').toDate();
-            const end = dayjs().endOf('year').toDate();
-            return [start, end];
-        },
-    },
-};
+}
 
 /* TekTreeGrid Class */
 class TekTreeGrid extends TreeGridEditable {
@@ -3278,6 +3172,422 @@ class TekTreeGrid extends TreeGridEditable {
     }
 }
 
+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 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 = 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 = 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 = Metadata.getInstance(`${this.name}_report_form`);
+        if (!form.validate())
+            return;
+        this.callEvent('onSendReport', {
+            event, element, component: this, form,
+        });
+        this.reportModal.hide();
+    }
+    onCreated() {
+        super.onCreated();
+        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 Http.get(this.versionUrl);
+                this.versionInfo = res.data.versionInfo;
+            }
+        });
+    }
+}
+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 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 ? 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(),
+                },
+            },
+        ];
+    }
+}
+
 Messages.add({
     'pt-BR': {
         translation: {
@@ -3326,4 +3636,4 @@ Messages.add({
     },
 });
 
-export { BreadcrumbHeader, CardTitle, CrudAddButton, CrudButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, DynamicFilterOperations, DynamicFilterRelations, Image, IterableCarousel, IterableComponentRender, Loading, Notifications, ProductCard, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridLayoutOptions, TekMemoryDatasource, TekRestDatasource, TekTreeGrid, columnAggregationValues };
+export { BreadcrumbHeader, CardTitle, CrudAddButton, CrudButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, DynamicFilterOperations, DynamicFilterRelations, Image, IterableCarousel, IterableComponentRender, Loading, Notifications, ProductCard, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridLayoutOptions, TekMemoryDatasource, TekRestDatasource, TekTreeGrid, TekUserInfo, TekUserInfoList, columnAggregationValues };