@zeedhi/teknisa-components-common 1.110.0 → 1.111.0

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

@@ -854,15 +854,15 @@ class GridBase {
             hideButton: () => ({
                 name: `${this.grid.name}_hideTooltip`,
                 component: 'ZdTooltip',
-                label: `{{GridController_${this.grid.componentId}.tooltipName}}`,
+                label: 'TEKGRID_HIDE',
                 bottom: true,
                 children: [
                     {
                         name: `${this.grid.name}_hideButton`,
                         component: 'ZdIcon',
                         iconName: 'mdi-chevron-right',
-                        isVisible: true,
-                        cssClass: `{{GridController_${this.grid.componentId}.toolbarStyle}}`,
+                        isVisible: `{{GridController_${this.grid.componentId}.showHideButton}}`,
+                        cssClass: '',
                         events: {
                             click: this.hideButtonClick.bind(this),
                         },
@@ -931,6 +931,13 @@ class GridBase {
                     },
                 ],
             }),
+            optionsDivider: (index) => ({
+                name: `${this.grid.name}_options_divider${index}`,
+                component: 'ZdDivider',
+                cssClass: 'toolbar-divider',
+                vertical: true,
+                isVisible: `{{GridController_${this.grid.componentId}.showOptionsDivider}}`,
+            }),
             columnsButton: () => ({
                 name: `${this.grid.name}_columns_button_tooltip`,
                 component: 'ZdTooltip',
@@ -967,25 +974,33 @@ class GridBase {
                 children: this.grid.exportActions || this.exportConfigButtons,
             }),
             actionsDivider: (index) => ({
-                name: `${this.grid.name}_divider${index}`,
+                name: `${this.grid.name}_actions_divider${index}`,
                 component: 'ZdDivider',
                 cssClass: 'toolbar-divider',
                 vertical: true,
                 isVisible: `{{GridController_${this.grid.componentId}.showActionsButton}}`,
             }),
             actionsDropdown: () => ({
-                name: `${this.grid.name}_actions_dropdown`,
-                component: 'ZdDropdown',
-                cssClass: 'tekgrid-actions-dropdown',
-                offsetY: true,
-                activator: {
-                    name: `${this.grid.name}_actionsButton`,
-                    component: 'ZdButton',
-                    icon: true,
-                    iconName: 'more',
-                    isVisible: `{{GridController_${this.grid.componentId}.showActionsButton}}`,
-                },
-                children: this.grid.actions,
+                name: `${this.grid.name}_actions_tooltip`,
+                component: 'ZdTooltip',
+                label: 'TEKGRID_ACTIONS',
+                bottom: true,
+                children: [
+                    {
+                        name: `${this.grid.name}_actions_dropdown`,
+                        component: 'ZdDropdown',
+                        cssClass: 'tekgrid-actions-dropdown',
+                        offsetY: true,
+                        activator: {
+                            name: `${this.grid.name}_actionsButton`,
+                            component: 'ZdButton',
+                            icon: true,
+                            iconName: 'more',
+                            isVisible: `{{GridController_${this.grid.componentId}.showActionsButton}}`,
+                        },
+                        children: this.grid.actions,
+                    },
+                ],
             }),
             saveButton: () => ({
                 name: `${this.grid.name}_saveButton`,
@@ -1080,7 +1095,7 @@ class GridBase {
      */
     addDefaultToolbarItems(toolbarDivChildren) {
         const defaultItems = [
-            'addButton', 'deleteButton', 'divider', 'refreshButton', 'divider',
+            'addButton', 'deleteButton', 'divider', 'refreshButton', 'optionsDivider',
             'columnsButton', 'layoutOptions', 'exportDropdown', 'actionsDivider', 'actionsDropdown',
             'saveButton', 'cancelButton', 'divider', 'gridSearch', 'filterButton',
         ];
@@ -1118,7 +1133,8 @@ class GridBase {
             component: 'ZdTag',
             tag: 'div',
             cssStyle: 'display: flex; align-items: center',
-            isVisible: `{{GridController_${this.grid.componentId}.showToolbar}}`,
+            cssClass: `{{GridController_${this.grid.componentId}.toolbarVisible}}`,
+            isVisible: true,
             children: toolbarDivChildren,
         });
         return toolbarItems;
@@ -1129,8 +1145,18 @@ class GridBase {
     hideButtonClick({ event }) {
         if (!event.defaultPrevented) {
             const instance = Metadata.getInstance(`${this.grid.name}_toolbarDiv`);
+            const icon = Metadata.getInstance(`${this.grid.name}_hideButton`);
+            const tooltip = Metadata.getInstance(`${this.grid.name}_hideTooltip`);
             if (instance) {
-                instance.isVisible = !instance.isVisible;
+                instance.cssClass = instance.cssClass === 'toolbar-visible'
+                    ? ''
+                    : 'toolbar-visible';
+                icon.cssClass = icon.cssClass === 'is-rotated'
+                    ? ''
+                    : 'is-rotated';
+                tooltip.label = tooltip.label === 'TEKGRID_HIDE'
+                    ? 'TEKGRID_SHOW'
+                    : 'TEKGRID_HIDE';
             }
         }
     }
@@ -1261,6 +1287,7 @@ Messages.add({
             TEKGRID_DELETE: 'Excluir',
             TEKGRID_REFRESH: 'Atualizar',
             TEKGRID_COLUMNS: 'Colunas',
+            TEKGRID_ACTIONS: 'Ações',
             TEKGRID_SAVE: 'Salvar',
             TEKGRID_CANCEL: 'Cancelar',
             TEKGRID_APPLY: 'Aplicar',
@@ -1333,6 +1360,7 @@ Messages.add({
             TEKGRID_DELETE: 'Delete',
             TEKGRID_REFRESH: 'Refresh',
             TEKGRID_COLUMNS: 'Columns',
+            TEKGRID_ACTIONS: 'Actions',
             TEKGRID_SAVE: 'Save',
             TEKGRID_CANCEL: 'Cancel',
             TEKGRID_APPLY: 'Apply',
@@ -1405,6 +1433,7 @@ Messages.add({
             TEKGRID_DELETE: 'Eliminar',
             TEKGRID_REFRESH: 'Actualizar',
             TEKGRID_COLUMNS: 'Colunas',
+            TEKGRID_ACTIONS: 'Acciónes',
             TEKGRID_SAVE: 'Guardar',
             TEKGRID_CANCEL: 'Cancelar',
             TEKGRID_APPLY: 'Aplicar',
@@ -1468,56 +1497,51 @@ class GridController {
         return this.grid.title;
     }
     get showAddButton() {
-        return this.grid.addButton && !this.isEditing && this.openToolbar;
+        return this.grid.addButton && !this.isEditing;
     }
     get showDeleteButton() {
-        return this.grid.deleteButton !== 'none' && !this.isEditing && this.openToolbar;
+        return this.grid.deleteButton !== 'none' && !this.isEditing;
     }
     get showFilterButton() {
-        return this.grid.filterButton && this.openToolbar;
+        return this.grid.filterButton;
     }
     get showModalFilterProps() {
         return this.grid.modalFilterProps;
     }
     get showSearchInput() {
-        return this.grid.showSearch && this.openToolbar;
-    }
-    get showToolbar() {
-        return this.openToolbar;
-    }
-    set showToolbar(value) {
-        this.openToolbar = value;
-    }
-    get toolbarStyle() {
-        return !this.openToolbar ? 'is-rotated' : '';
-    }
-    get tooltipName() {
-        return !this.openToolbar ? 'TEKGRID_SHOW' : 'TEKGRID_HIDE';
+        return this.grid.showSearch;
     }
     get showReloadButton() {
-        return this.grid.showReload && !this.isEditing && this.openToolbar;
+        return this.grid.showReload && !this.isEditing;
     }
     get showColumnsButton() {
-        return this.grid.columnsButton && !this.isEditing && this.openToolbar;
+        return this.grid.columnsButton && !this.isEditing;
     }
     get columnsButtonIgnore() {
         return this.grid.columnsButtonIgnore;
     }
     get showLayoutOptionsButton() {
-        return this.grid.showLayoutOptions && !this.isEditing && this.openToolbar;
+        return this.grid.showLayoutOptions && !this.isEditing;
     }
     get showDivider() {
-        return !this.isEditing && this.openToolbar;
+        return !this.isEditing;
+    }
+    get showOptionsDivider() {
+        return (this.grid.columnsButton || this.grid.showLayoutOptions || this.grid.showExport)
+            && !this.isEditing;
+    }
+    get showHideButton() {
+        return this.grid.showHideButton;
     }
     get showActionsButton() {
-        return this.grid.actions.length > 0 && !this.isEditing && this.openToolbar;
+        return this.grid.actions.length > 0 && !this.isEditing;
     }
     get showExportButton() {
-        return this.grid.showExport && !this.isEditing && this.openToolbar;
+        return this.grid.showExport && !this.isEditing;
     }
     get showActionAndExportButton() {
         return ((this.showLayoutOptionsButton || this.showColumnsButton)
-            && (this.showActionsButton || this.showExportButton || this.showSearchInput)) && !this.isEditing && this.openToolbar;
+            && (this.showActionsButton || this.showExportButton || this.showSearchInput)) && !this.isEditing;
     }
     get isEditing() {
         return this.grid.editing;
@@ -2274,6 +2298,8 @@ class TekGrid extends GridEditable {
         this.mainGrid = true;
         /* Columns to be ignored on columns button */
         this.columnsButtonIgnore = [];
+        /* Show Hide button */
+        this.showHideButton = true;
         /**
          * Enables column dragging
          * @public
@@ -2390,6 +2416,7 @@ class TekGrid extends GridEditable {
         this.columnFilterButton = this.getInitValue('columnFilterButton', props.columnFilterButton, this.columnFilterButton);
         this.columnsButton = this.getInitValue('columnsButton', props.columnsButton, this.columnsButton);
         this.columnsButtonIgnore = this.getInitValue('columnsButtonIgnore', props.columnsButtonIgnore, this.columnsButtonIgnore);
+        this.showHideButton = this.getInitValue('showHideButton', props.showHideButton, this.showHideButton);
         this.showEditButtons = this.getInitValue('showEditButtons', props.showEditButtons, this.showEditButtons);
         this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
         this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
@@ -3978,6 +4005,8 @@ class TekTreeGrid extends TreeGridEditable {
         };
         /* Show search Input */
         this.showSearch = true;
+        /* Show Hide button */
+        this.showHideButton = true;
         /* Show Column Filter button */
         this.columnFilterButton = false;
         /* Show Columns button */
@@ -4062,6 +4091,7 @@ class TekTreeGrid extends TreeGridEditable {
         this.showEditButtons = this.getInitValue('showEditButtons', props.showEditButtons, this.showEditButtons);
         this.filterButton = this.getInitValue('filterButton', props.filterButton, this.filterButton);
         this.showSearch = this.getInitValue('showSearch', props.showSearch, this.showSearch);
+        this.showHideButton = this.getInitValue('showHideButton', props.showHideButton, this.showHideButton);
         this.columnFilterButton = this.getInitValue('columnFilterButton', props.columnFilterButton, this.columnFilterButton);
         this.columnsButton = this.getInitValue('columnsButton', props.columnsButton, this.columnsButton);
         this.columnsButtonIgnore = this.getInitValue('columnsButtonIgnore', props.columnsButtonIgnore, this.columnsButtonIgnore);
@@ -4328,6 +4358,7 @@ class TekUserInfo extends UserInfo {
                 name: `${this.name}_about_modal`,
                 cssClass: 'about-modal',
                 grid: { cols: 8, sm: 4, lg: 5 },
+                height: '60%',
                 children: [
                     {
                         name: `${this.name}_about_header`,
@@ -4343,19 +4374,23 @@ class TekUserInfo extends UserInfo {
                                 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: [
+                        leftSlot: [
                             {
-                                name: `${this.name}_about_image`,
-                                component: 'ZdImage',
-                                width: '100%',
-                                src: this.aboutImage,
+                                name: `${this.name}_about_row`,
+                                component: 'ZdTag',
+                                tag: 'div',
+                                cssStyle: 'width: 100%',
+                                cssClass: 'zd-justify-center zd-px-6',
+                                isVisible: `{{TekUserInfoController_${this.componentId}.hasAboutImage}}`,
+                                children: [
+                                    {
+                                        name: `${this.name}_about_image`,
+                                        cssClass: 'zd-tekUserInfo-about-image',
+                                        component: 'ZdImage',
+                                        width: '100%',
+                                        src: this.aboutImage,
+                                    },
+                                ],
                             },
                         ],
                     },

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

@@ -858,15 +858,15 @@
               hideButton: () => ({
                   name: `${this.grid.name}_hideTooltip`,
                   component: 'ZdTooltip',
-                  label: `{{GridController_${this.grid.componentId}.tooltipName}}`,
+                  label: 'TEKGRID_HIDE',
                   bottom: true,
                   children: [
                       {
                           name: `${this.grid.name}_hideButton`,
                           component: 'ZdIcon',
                           iconName: 'mdi-chevron-right',
-                          isVisible: true,
-                          cssClass: `{{GridController_${this.grid.componentId}.toolbarStyle}}`,
+                          isVisible: `{{GridController_${this.grid.componentId}.showHideButton}}`,
+                          cssClass: '',
                           events: {
                               click: this.hideButtonClick.bind(this),
                           },
@@ -935,6 +935,13 @@
                       },
                   ],
               }),
+              optionsDivider: (index) => ({
+                  name: `${this.grid.name}_options_divider${index}`,
+                  component: 'ZdDivider',
+                  cssClass: 'toolbar-divider',
+                  vertical: true,
+                  isVisible: `{{GridController_${this.grid.componentId}.showOptionsDivider}}`,
+              }),
               columnsButton: () => ({
                   name: `${this.grid.name}_columns_button_tooltip`,
                   component: 'ZdTooltip',
@@ -971,25 +978,33 @@
                   children: this.grid.exportActions || this.exportConfigButtons,
               }),
               actionsDivider: (index) => ({
-                  name: `${this.grid.name}_divider${index}`,
+                  name: `${this.grid.name}_actions_divider${index}`,
                   component: 'ZdDivider',
                   cssClass: 'toolbar-divider',
                   vertical: true,
                   isVisible: `{{GridController_${this.grid.componentId}.showActionsButton}}`,
               }),
               actionsDropdown: () => ({
-                  name: `${this.grid.name}_actions_dropdown`,
-                  component: 'ZdDropdown',
-                  cssClass: 'tekgrid-actions-dropdown',
-                  offsetY: true,
-                  activator: {
-                      name: `${this.grid.name}_actionsButton`,
-                      component: 'ZdButton',
-                      icon: true,
-                      iconName: 'more',
-                      isVisible: `{{GridController_${this.grid.componentId}.showActionsButton}}`,
-                  },
-                  children: this.grid.actions,
+                  name: `${this.grid.name}_actions_tooltip`,
+                  component: 'ZdTooltip',
+                  label: 'TEKGRID_ACTIONS',
+                  bottom: true,
+                  children: [
+                      {
+                          name: `${this.grid.name}_actions_dropdown`,
+                          component: 'ZdDropdown',
+                          cssClass: 'tekgrid-actions-dropdown',
+                          offsetY: true,
+                          activator: {
+                              name: `${this.grid.name}_actionsButton`,
+                              component: 'ZdButton',
+                              icon: true,
+                              iconName: 'more',
+                              isVisible: `{{GridController_${this.grid.componentId}.showActionsButton}}`,
+                          },
+                          children: this.grid.actions,
+                      },
+                  ],
               }),
               saveButton: () => ({
                   name: `${this.grid.name}_saveButton`,
@@ -1084,7 +1099,7 @@
        */
       addDefaultToolbarItems(toolbarDivChildren) {
           const defaultItems = [
-              'addButton', 'deleteButton', 'divider', 'refreshButton', 'divider',
+              'addButton', 'deleteButton', 'divider', 'refreshButton', 'optionsDivider',
               'columnsButton', 'layoutOptions', 'exportDropdown', 'actionsDivider', 'actionsDropdown',
               'saveButton', 'cancelButton', 'divider', 'gridSearch', 'filterButton',
           ];
@@ -1122,7 +1137,8 @@
               component: 'ZdTag',
               tag: 'div',
               cssStyle: 'display: flex; align-items: center',
-              isVisible: `{{GridController_${this.grid.componentId}.showToolbar}}`,
+              cssClass: `{{GridController_${this.grid.componentId}.toolbarVisible}}`,
+              isVisible: true,
               children: toolbarDivChildren,
           });
           return toolbarItems;
@@ -1133,8 +1149,18 @@
       hideButtonClick({ event }) {
           if (!event.defaultPrevented) {
               const instance = core.Metadata.getInstance(`${this.grid.name}_toolbarDiv`);
+              const icon = core.Metadata.getInstance(`${this.grid.name}_hideButton`);
+              const tooltip = core.Metadata.getInstance(`${this.grid.name}_hideTooltip`);
               if (instance) {
-                  instance.isVisible = !instance.isVisible;
+                  instance.cssClass = instance.cssClass === 'toolbar-visible'
+                      ? ''
+                      : 'toolbar-visible';
+                  icon.cssClass = icon.cssClass === 'is-rotated'
+                      ? ''
+                      : 'is-rotated';
+                  tooltip.label = tooltip.label === 'TEKGRID_HIDE'
+                      ? 'TEKGRID_SHOW'
+                      : 'TEKGRID_HIDE';
               }
           }
       }
@@ -1265,6 +1291,7 @@
               TEKGRID_DELETE: 'Excluir',
               TEKGRID_REFRESH: 'Atualizar',
               TEKGRID_COLUMNS: 'Colunas',
+              TEKGRID_ACTIONS: 'Ações',
               TEKGRID_SAVE: 'Salvar',
               TEKGRID_CANCEL: 'Cancelar',
               TEKGRID_APPLY: 'Aplicar',
@@ -1337,6 +1364,7 @@
               TEKGRID_DELETE: 'Delete',
               TEKGRID_REFRESH: 'Refresh',
               TEKGRID_COLUMNS: 'Columns',
+              TEKGRID_ACTIONS: 'Actions',
               TEKGRID_SAVE: 'Save',
               TEKGRID_CANCEL: 'Cancel',
               TEKGRID_APPLY: 'Apply',
@@ -1409,6 +1437,7 @@
               TEKGRID_DELETE: 'Eliminar',
               TEKGRID_REFRESH: 'Actualizar',
               TEKGRID_COLUMNS: 'Colunas',
+              TEKGRID_ACTIONS: 'Acciónes',
               TEKGRID_SAVE: 'Guardar',
               TEKGRID_CANCEL: 'Cancelar',
               TEKGRID_APPLY: 'Aplicar',
@@ -1472,56 +1501,51 @@
           return this.grid.title;
       }
       get showAddButton() {
-          return this.grid.addButton && !this.isEditing && this.openToolbar;
+          return this.grid.addButton && !this.isEditing;
       }
       get showDeleteButton() {
-          return this.grid.deleteButton !== 'none' && !this.isEditing && this.openToolbar;
+          return this.grid.deleteButton !== 'none' && !this.isEditing;
       }
       get showFilterButton() {
-          return this.grid.filterButton && this.openToolbar;
+          return this.grid.filterButton;
       }
       get showModalFilterProps() {
           return this.grid.modalFilterProps;
       }
       get showSearchInput() {
-          return this.grid.showSearch && this.openToolbar;
-      }
-      get showToolbar() {
-          return this.openToolbar;
-      }
-      set showToolbar(value) {
-          this.openToolbar = value;
-      }
-      get toolbarStyle() {
-          return !this.openToolbar ? 'is-rotated' : '';
-      }
-      get tooltipName() {
-          return !this.openToolbar ? 'TEKGRID_SHOW' : 'TEKGRID_HIDE';
+          return this.grid.showSearch;
       }
       get showReloadButton() {
-          return this.grid.showReload && !this.isEditing && this.openToolbar;
+          return this.grid.showReload && !this.isEditing;
       }
       get showColumnsButton() {
-          return this.grid.columnsButton && !this.isEditing && this.openToolbar;
+          return this.grid.columnsButton && !this.isEditing;
       }
       get columnsButtonIgnore() {
           return this.grid.columnsButtonIgnore;
       }
       get showLayoutOptionsButton() {
-          return this.grid.showLayoutOptions && !this.isEditing && this.openToolbar;
+          return this.grid.showLayoutOptions && !this.isEditing;
       }
       get showDivider() {
-          return !this.isEditing && this.openToolbar;
+          return !this.isEditing;
+      }
+      get showOptionsDivider() {
+          return (this.grid.columnsButton || this.grid.showLayoutOptions || this.grid.showExport)
+              && !this.isEditing;
+      }
+      get showHideButton() {
+          return this.grid.showHideButton;
       }
       get showActionsButton() {
-          return this.grid.actions.length > 0 && !this.isEditing && this.openToolbar;
+          return this.grid.actions.length > 0 && !this.isEditing;
       }
       get showExportButton() {
-          return this.grid.showExport && !this.isEditing && this.openToolbar;
+          return this.grid.showExport && !this.isEditing;
       }
       get showActionAndExportButton() {
           return ((this.showLayoutOptionsButton || this.showColumnsButton)
-              && (this.showActionsButton || this.showExportButton || this.showSearchInput)) && !this.isEditing && this.openToolbar;
+              && (this.showActionsButton || this.showExportButton || this.showSearchInput)) && !this.isEditing;
       }
       get isEditing() {
           return this.grid.editing;
@@ -2278,6 +2302,8 @@
           this.mainGrid = true;
           /* Columns to be ignored on columns button */
           this.columnsButtonIgnore = [];
+          /* Show Hide button */
+          this.showHideButton = true;
           /**
            * Enables column dragging
            * @public
@@ -2394,6 +2420,7 @@
           this.columnFilterButton = this.getInitValue('columnFilterButton', props.columnFilterButton, this.columnFilterButton);
           this.columnsButton = this.getInitValue('columnsButton', props.columnsButton, this.columnsButton);
           this.columnsButtonIgnore = this.getInitValue('columnsButtonIgnore', props.columnsButtonIgnore, this.columnsButtonIgnore);
+          this.showHideButton = this.getInitValue('showHideButton', props.showHideButton, this.showHideButton);
           this.showEditButtons = this.getInitValue('showEditButtons', props.showEditButtons, this.showEditButtons);
           this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
           this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
@@ -3982,6 +4009,8 @@
           };
           /* Show search Input */
           this.showSearch = true;
+          /* Show Hide button */
+          this.showHideButton = true;
           /* Show Column Filter button */
           this.columnFilterButton = false;
           /* Show Columns button */
@@ -4066,6 +4095,7 @@
           this.showEditButtons = this.getInitValue('showEditButtons', props.showEditButtons, this.showEditButtons);
           this.filterButton = this.getInitValue('filterButton', props.filterButton, this.filterButton);
           this.showSearch = this.getInitValue('showSearch', props.showSearch, this.showSearch);
+          this.showHideButton = this.getInitValue('showHideButton', props.showHideButton, this.showHideButton);
           this.columnFilterButton = this.getInitValue('columnFilterButton', props.columnFilterButton, this.columnFilterButton);
           this.columnsButton = this.getInitValue('columnsButton', props.columnsButton, this.columnsButton);
           this.columnsButtonIgnore = this.getInitValue('columnsButtonIgnore', props.columnsButtonIgnore, this.columnsButtonIgnore);
@@ -4332,6 +4362,7 @@
                   name: `${this.name}_about_modal`,
                   cssClass: 'about-modal',
                   grid: { cols: 8, sm: 4, lg: 5 },
+                  height: '60%',
                   children: [
                       {
                           name: `${this.name}_about_header`,
@@ -4347,19 +4378,23 @@
                                   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: [
+                          leftSlot: [
                               {
-                                  name: `${this.name}_about_image`,
-                                  component: 'ZdImage',
-                                  width: '100%',
-                                  src: this.aboutImage,
+                                  name: `${this.name}_about_row`,
+                                  component: 'ZdTag',
+                                  tag: 'div',
+                                  cssStyle: 'width: 100%',
+                                  cssClass: 'zd-justify-center zd-px-6',
+                                  isVisible: `{{TekUserInfoController_${this.componentId}.hasAboutImage}}`,
+                                  children: [
+                                      {
+                                          name: `${this.name}_about_image`,
+                                          cssClass: 'zd-tekUserInfo-about-image',
+                                          component: 'ZdImage',
+                                          width: '100%',
+                                          src: this.aboutImage,
+                                      },
+                                  ],
                               },
                           ],
                       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.110.0",
+  "version": "1.111.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@zeedhi/core": "^1.97.0"
   },
-  "gitHead": "5dc8ed0a31eac861718475f4fd2e65ab0da772cc"
+  "gitHead": "55a6a69ca54e1ee419bdf4608e021222eaf45e51"
 }