@zeedhi/teknisa-components-common 1.94.0 → 1.96.0

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

@@ -1,5 +1,5 @@
-import { KeyMap, I18n, FormatterParserProvider, Messages, DatasourceFactory, Metadata, MemoryDatasource, URL, Utils, RestDatasource, Loader, DateHelper, Config, Http, Singleton, VersionService } from '@zeedhi/core';
-import { Form, Button, Tooltip, GridEditable, Grid, ComponentRender, Iterable, Carousel, IterableComponentRender as IterableComponentRender$1, Loading as Loading$1, GridColumnEditable, Report, ColumnNotFoundError, IterableColumnsButtonController, IterableColumnsButton, ModalService, TreeGridEditable, List } from '@zeedhi/common';
+import { KeyMap, I18n, FormatterParserProvider, Messages, DatasourceFactory, Metadata, MemoryDatasource, URL, Utils, RestDatasource, Config, Loader, DateHelper, Http, Singleton, VersionService } from '@zeedhi/core';
+import { Form, Button, Tooltip, GridEditable, Grid, ComponentRender, Iterable, Carousel, IterableComponentRender as IterableComponentRender$1, Loading as Loading$1, GridColumnEditable, Report, ColumnNotFoundError, IterableColumnsButtonController, IterableColumnsButton, ModalService, SelectMultiple, TreeGridEditable, List } from '@zeedhi/common';
 import debounce from 'lodash.debounce';
 import merge from 'lodash.merge';
 import { UserInfo } from '@zeedhi/zd-user-info-common';
@@ -436,6 +436,9 @@ class Image extends ComponentRender {
         this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.createAccessors();
     }
+    load(event, element) {
+        this.callEvent('load', { event, element, component: this });
+    }
 }
 
 /**
@@ -1029,6 +1032,7 @@ class GridBase {
                         component: 'TekGridFilterButton',
                         grid: this.grid,
                         gridName: this.grid.name,
+                        showCheckboxAll: this.grid.showCheckboxAllFilter,
                         isVisible: `{{GridController_${this.grid.componentId}.showFilterButton}}`,
                         events: {
                             onCreated: this.loadFilterButton.bind(this),
@@ -2217,6 +2221,7 @@ class TekGrid extends GridEditable {
         this.groupedData = [];
         this.toolbarSlotProps = false;
         this.editNewRowsOnly = false;
+        this.showCheckboxAllFilter = Config.gridShowCheckboxAllFilter || false;
         this.defaultLazy = false;
         this.groups = [];
         this.summary = {};
@@ -2247,6 +2252,7 @@ class TekGrid extends GridEditable {
         this.exportActions = props.exportActions || this.exportActions;
         this.groupsOpened = this.getInitValue('groupsOpened', props.groupsOpened, this.groupsOpened);
         this.showSummaryTotal = this.getInitValue('showSummaryTotal', props.showSummaryTotal, this.showSummaryTotal);
+        this.showCheckboxAllFilter = this.getInitValue('showCheckboxAllFilter', props.showCheckboxAllFilter, this.showCheckboxAllFilter);
         this.editNewRowsOnly = this.getInitValue('editNewRowsOnly', props.editNewRowsOnly, this.editNewRowsOnly);
         this.mainGrid = this.getInitValue('mainGrid', props.mainGrid, this.mainGrid);
         this.actions = props.actions || this.actions;
@@ -2450,6 +2456,7 @@ class TekGrid extends GridEditable {
     }
     updateGroupedData(lazyLoad) {
         return __awaiter(this, void 0, void 0, function* () {
+            this.initSummaryColumns();
             this.groupedData = [];
             this.groupColumns = this.columns.filter((column) => column.grouped);
             this.groupColumnNames = this.groupColumns.map((column) => column.name);
@@ -2921,9 +2928,11 @@ class TekFilterHelper {
 class TekGridFilterButton extends Button {
     constructor(props) {
         super(props);
+        this.showCheckboxAll = false;
         this.filterFormInputs = {};
         this.gridName = this.getInitValue('gridName', props.gridName, this.gridName);
         this.grid = this.getInitValue('grid', props.grid, undefined);
+        this.showCheckboxAll = this.getInitValue('showCheckboxAll', props.showCheckboxAll, this.showCheckboxAll);
         this.createAccessors();
         if (!this.grid)
             this.loadGrid();
@@ -3005,6 +3014,7 @@ class TekGridFilterButton extends Button {
         if (!this.filterModal) {
             const originalProps = {
                 height: 'auto',
+                maxHeight: '18.75rem',
                 persistent: true,
                 title: 'FILTER',
             };
@@ -3025,31 +3035,24 @@ class TekGridFilterButton extends Button {
                     {
                         name: `${this.grid.name}-filter-header-container`,
                         component: 'ZdContainer',
-                        cssClass: 'zd-pa-0',
+                        cssClass: 'zd-pa-0 zd-display-flex',
                         children: [
                             {
-                                name: `${this.grid.name}-filter-modal-header`,
-                                component: 'ZdHeader',
-                                color: 'transparent',
-                                padless: true,
-                                elevation: 0,
-                                leftSlot: [
-                                    {
-                                        name: `${this.grid.name}-filter-title`,
-                                        component: 'ZdText',
-                                        cssStyle: `color: ${'var(--v-primary-base);'}`,
-                                        text: `${mergeModalFilterProps.title}`,
-                                        tag: 'h3',
-                                    },
-                                ],
-                                rightSlot: [
-                                    {
-                                        name: `${this.grid.name}-filter-close-button`,
-                                        component: 'ZdModalCloseButton',
-                                        small: true,
-                                        modalName: `${this.grid.name}-filter-modal`,
-                                    },
-                                ],
+                                name: `${this.grid.name}-filter-title`,
+                                component: 'ZdText',
+                                cssStyle: `color: ${'var(--v-primary-base);'}`,
+                                text: mergeModalFilterProps.title,
+                                tag: 'h3',
+                            },
+                            {
+                                name: `${this.grid.name}-filter-spacer`,
+                                component: 'VSpacer',
+                            },
+                            {
+                                name: `${this.grid.name}-filter-close-button`,
+                                component: 'ZdModalCloseButton',
+                                small: true,
+                                modalName: `${this.grid.name}-filter-modal`,
                             },
                         ],
                     },
@@ -3057,14 +3060,14 @@ class TekGridFilterButton extends Button {
                         name: `${this.grid.name}-filter-content-container`,
                         component: 'ZdContainer',
                         scrollView: true,
-                        cssClass: 'zd-my-2 zd-pa-0',
-                        maxHeight: '18.75rem',
-                        height: this.grid.modalFilterProps.height,
+                        cssClass: 'zd-my-2 zd-pa-0 tek-grid-filter-content-container',
+                        maxHeight: mergeModalFilterProps.maxHeight,
+                        height: mergeModalFilterProps.height,
                         children: [
                             {
                                 name: `${this.grid.name}-filter-form`,
                                 component: 'ZdForm',
-                                cssClass: 'zd-my-2',
+                                cssClass: 'zd-my-2 zd-pa-0',
                                 children: this.getFilterModalComponents(),
                                 events: {
                                     onMounted: this.loadFilterValues.bind(this),
@@ -3146,14 +3149,36 @@ class TekGridFilterButton extends Button {
         super.onBeforeDestroy();
         this.destroyFilterModal();
     }
+    formatFormValue(filterForm) {
+        return Object.keys(filterForm.value).reduce((result, item) => {
+            try {
+                const itemInstance = filterForm.getChildInstance(item);
+                if (!(itemInstance instanceof SelectMultiple) || !itemInstance.checkboxAll)
+                    return result;
+                // when selectmultiple with checkboxAll, should either remove it from the filter or
+                // change the value to T, depending on selectAllCompatibilityMode
+                if (Config.selectAllCompatibilityMode) {
+                    result[item] = 'T';
+                    return result;
+                }
+                delete result[item];
+                return result;
+            }
+            catch (e) {
+                return result;
+            }
+        }, Object.assign({}, filterForm.value));
+    }
     applyFilter({ event }) {
         const filterForm = Metadata.getInstance(`${this.grid.name}-filter-form`);
         if (filterForm.validate()) {
             const { datasource } = this.grid;
             const filter = {};
+            const formValue = this.formatFormValue(filterForm);
             if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
-                Object.keys(filterForm.value).forEach((item) => {
-                    if (filterForm.value[item] && !(Array.isArray(filterForm.value[item]) && !filterForm.value[item].length)) {
+                Object.keys(formValue).forEach((item) => {
+                    const itemValue = formValue[item];
+                    if (itemValue && !(Array.isArray(itemValue) && !itemValue.length)) {
                         const relationAndOperationAndName = item.split(`${this.grid.name}-filter-`)[1];
                         const [relation, operation] = relationAndOperationAndName.split('-');
                         let columnName = relationAndOperationAndName.split(`${relation}-${operation}-`)[1];
@@ -3161,7 +3186,7 @@ class TekGridFilterButton extends Button {
                         if (!filter[columnName]) {
                             filter[columnName] = [];
                         }
-                        const value = filterForm.value[item];
+                        const value = itemValue;
                         filter[columnName].push({
                             relation,
                             operation,
@@ -3173,11 +3198,11 @@ class TekGridFilterButton extends Button {
                 this.setFilter(filter, event, datasource.setDynamicFilter.bind(datasource));
             }
             else {
-                Object.keys(filterForm.value).forEach((item) => {
+                Object.keys(formValue).forEach((item) => {
                     let columnName = item.split(`${this.grid.name}-filter-AND-CONTAINS-`)[1];
                     columnName = columnName.split('-').slice(0, -1).join('-'); // remove index
-                    if (filterForm.value[item]) {
-                        filter[columnName] = filterForm.value[item];
+                    if (formValue[item]) {
+                        filter[columnName] = formValue[item];
                     }
                 });
                 datasource.filter = filter;
@@ -3220,6 +3245,7 @@ class TekGridFilterButton extends Button {
             if (column.filterable && filterProps && filterProps.length > 0) {
                 this.filterFormInputs[column.name] = [];
                 filterProps.forEach((filterItem, index) => {
+                    var _a;
                     const { datasource } = this.grid;
                     if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
                         const relation = filterItem.relation || 'AND';
@@ -3236,6 +3262,9 @@ class TekGridFilterButton extends Button {
                             newColumnComponent.events = {};
                         newColumnComponent.events.change = this.changeHelperEvent.bind(this, column);
                     }
+                    if (newColumnComponent.component === 'ZdSelectMultiple') {
+                        newColumnComponent.showCheckboxAll = (_a = newColumnComponent.showCheckboxAll) !== null && _a !== void 0 ? _a : this.showCheckboxAll;
+                    }
                     filterColumns.push(newColumnComponent);
                 });
             }
@@ -3555,6 +3584,7 @@ class TekTreeGrid extends TreeGridEditable {
             },
         ];
         this.toolbarSlotProps = false;
+        this.showCheckboxAllFilter = false;
         this.title = this.getInitValue('title', props.title, this.title);
         this.addButton = this.getInitValue('addButton', props.addButton, this.addButton);
         this.deleteButton = this.getInitValue('deleteButton', props.deleteButton, this.deleteButton);
@@ -3570,6 +3600,7 @@ class TekTreeGrid extends TreeGridEditable {
         this.showExport = this.getInitValue('showExport', props.showExport, this.showExport);
         this.showReload = this.getInitValue('showReload', props.showReload, this.showReload);
         this.exportConfig = this.getInitValue('exportConfig', props.exportConfig, this.exportConfig);
+        this.showCheckboxAllFilter = this.getInitValue('showCheckboxAllFilter', props.showCheckboxAllFilter, this.showCheckboxAllFilter);
         this.exportActions = props.exportActions || this.exportActions;
         this.actions = props.actions || this.actions;
         this.toolbarSlotProps = props.toolbarSlot !== undefined;

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

@@ -440,6 +440,9 @@
           this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
           this.createAccessors();
       }
+      load(event, element) {
+          this.callEvent('load', { event, element, component: this });
+      }
   }
 
   /**
@@ -1033,6 +1036,7 @@
                           component: 'TekGridFilterButton',
                           grid: this.grid,
                           gridName: this.grid.name,
+                          showCheckboxAll: this.grid.showCheckboxAllFilter,
                           isVisible: `{{GridController_${this.grid.componentId}.showFilterButton}}`,
                           events: {
                               onCreated: this.loadFilterButton.bind(this),
@@ -2221,6 +2225,7 @@
           this.groupedData = [];
           this.toolbarSlotProps = false;
           this.editNewRowsOnly = false;
+          this.showCheckboxAllFilter = core.Config.gridShowCheckboxAllFilter || false;
           this.defaultLazy = false;
           this.groups = [];
           this.summary = {};
@@ -2251,6 +2256,7 @@
           this.exportActions = props.exportActions || this.exportActions;
           this.groupsOpened = this.getInitValue('groupsOpened', props.groupsOpened, this.groupsOpened);
           this.showSummaryTotal = this.getInitValue('showSummaryTotal', props.showSummaryTotal, this.showSummaryTotal);
+          this.showCheckboxAllFilter = this.getInitValue('showCheckboxAllFilter', props.showCheckboxAllFilter, this.showCheckboxAllFilter);
           this.editNewRowsOnly = this.getInitValue('editNewRowsOnly', props.editNewRowsOnly, this.editNewRowsOnly);
           this.mainGrid = this.getInitValue('mainGrid', props.mainGrid, this.mainGrid);
           this.actions = props.actions || this.actions;
@@ -2454,6 +2460,7 @@
       }
       updateGroupedData(lazyLoad) {
           return __awaiter(this, void 0, void 0, function* () {
+              this.initSummaryColumns();
               this.groupedData = [];
               this.groupColumns = this.columns.filter((column) => column.grouped);
               this.groupColumnNames = this.groupColumns.map((column) => column.name);
@@ -2925,9 +2932,11 @@
   class TekGridFilterButton extends common.Button {
       constructor(props) {
           super(props);
+          this.showCheckboxAll = false;
           this.filterFormInputs = {};
           this.gridName = this.getInitValue('gridName', props.gridName, this.gridName);
           this.grid = this.getInitValue('grid', props.grid, undefined);
+          this.showCheckboxAll = this.getInitValue('showCheckboxAll', props.showCheckboxAll, this.showCheckboxAll);
           this.createAccessors();
           if (!this.grid)
               this.loadGrid();
@@ -3009,6 +3018,7 @@
           if (!this.filterModal) {
               const originalProps = {
                   height: 'auto',
+                  maxHeight: '18.75rem',
                   persistent: true,
                   title: 'FILTER',
               };
@@ -3029,31 +3039,24 @@
                       {
                           name: `${this.grid.name}-filter-header-container`,
                           component: 'ZdContainer',
-                          cssClass: 'zd-pa-0',
+                          cssClass: 'zd-pa-0 zd-display-flex',
                           children: [
                               {
-                                  name: `${this.grid.name}-filter-modal-header`,
-                                  component: 'ZdHeader',
-                                  color: 'transparent',
-                                  padless: true,
-                                  elevation: 0,
-                                  leftSlot: [
-                                      {
-                                          name: `${this.grid.name}-filter-title`,
-                                          component: 'ZdText',
-                                          cssStyle: `color: ${'var(--v-primary-base);'}`,
-                                          text: `${mergeModalFilterProps.title}`,
-                                          tag: 'h3',
-                                      },
-                                  ],
-                                  rightSlot: [
-                                      {
-                                          name: `${this.grid.name}-filter-close-button`,
-                                          component: 'ZdModalCloseButton',
-                                          small: true,
-                                          modalName: `${this.grid.name}-filter-modal`,
-                                      },
-                                  ],
+                                  name: `${this.grid.name}-filter-title`,
+                                  component: 'ZdText',
+                                  cssStyle: `color: ${'var(--v-primary-base);'}`,
+                                  text: mergeModalFilterProps.title,
+                                  tag: 'h3',
+                              },
+                              {
+                                  name: `${this.grid.name}-filter-spacer`,
+                                  component: 'VSpacer',
+                              },
+                              {
+                                  name: `${this.grid.name}-filter-close-button`,
+                                  component: 'ZdModalCloseButton',
+                                  small: true,
+                                  modalName: `${this.grid.name}-filter-modal`,
                               },
                           ],
                       },
@@ -3061,14 +3064,14 @@
                           name: `${this.grid.name}-filter-content-container`,
                           component: 'ZdContainer',
                           scrollView: true,
-                          cssClass: 'zd-my-2 zd-pa-0',
-                          maxHeight: '18.75rem',
-                          height: this.grid.modalFilterProps.height,
+                          cssClass: 'zd-my-2 zd-pa-0 tek-grid-filter-content-container',
+                          maxHeight: mergeModalFilterProps.maxHeight,
+                          height: mergeModalFilterProps.height,
                           children: [
                               {
                                   name: `${this.grid.name}-filter-form`,
                                   component: 'ZdForm',
-                                  cssClass: 'zd-my-2',
+                                  cssClass: 'zd-my-2 zd-pa-0',
                                   children: this.getFilterModalComponents(),
                                   events: {
                                       onMounted: this.loadFilterValues.bind(this),
@@ -3150,14 +3153,36 @@
           super.onBeforeDestroy();
           this.destroyFilterModal();
       }
+      formatFormValue(filterForm) {
+          return Object.keys(filterForm.value).reduce((result, item) => {
+              try {
+                  const itemInstance = filterForm.getChildInstance(item);
+                  if (!(itemInstance instanceof common.SelectMultiple) || !itemInstance.checkboxAll)
+                      return result;
+                  // when selectmultiple with checkboxAll, should either remove it from the filter or
+                  // change the value to T, depending on selectAllCompatibilityMode
+                  if (core.Config.selectAllCompatibilityMode) {
+                      result[item] = 'T';
+                      return result;
+                  }
+                  delete result[item];
+                  return result;
+              }
+              catch (e) {
+                  return result;
+              }
+          }, Object.assign({}, filterForm.value));
+      }
       applyFilter({ event }) {
           const filterForm = core.Metadata.getInstance(`${this.grid.name}-filter-form`);
           if (filterForm.validate()) {
               const { datasource } = this.grid;
               const filter = {};
+              const formValue = this.formatFormValue(filterForm);
               if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
-                  Object.keys(filterForm.value).forEach((item) => {
-                      if (filterForm.value[item] && !(Array.isArray(filterForm.value[item]) && !filterForm.value[item].length)) {
+                  Object.keys(formValue).forEach((item) => {
+                      const itemValue = formValue[item];
+                      if (itemValue && !(Array.isArray(itemValue) && !itemValue.length)) {
                           const relationAndOperationAndName = item.split(`${this.grid.name}-filter-`)[1];
                           const [relation, operation] = relationAndOperationAndName.split('-');
                           let columnName = relationAndOperationAndName.split(`${relation}-${operation}-`)[1];
@@ -3165,7 +3190,7 @@
                           if (!filter[columnName]) {
                               filter[columnName] = [];
                           }
-                          const value = filterForm.value[item];
+                          const value = itemValue;
                           filter[columnName].push({
                               relation,
                               operation,
@@ -3177,11 +3202,11 @@
                   this.setFilter(filter, event, datasource.setDynamicFilter.bind(datasource));
               }
               else {
-                  Object.keys(filterForm.value).forEach((item) => {
+                  Object.keys(formValue).forEach((item) => {
                       let columnName = item.split(`${this.grid.name}-filter-AND-CONTAINS-`)[1];
                       columnName = columnName.split('-').slice(0, -1).join('-'); // remove index
-                      if (filterForm.value[item]) {
-                          filter[columnName] = filterForm.value[item];
+                      if (formValue[item]) {
+                          filter[columnName] = formValue[item];
                       }
                   });
                   datasource.filter = filter;
@@ -3224,6 +3249,7 @@
               if (column.filterable && filterProps && filterProps.length > 0) {
                   this.filterFormInputs[column.name] = [];
                   filterProps.forEach((filterItem, index) => {
+                      var _a;
                       const { datasource } = this.grid;
                       if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
                           const relation = filterItem.relation || 'AND';
@@ -3240,6 +3266,9 @@
                               newColumnComponent.events = {};
                           newColumnComponent.events.change = this.changeHelperEvent.bind(this, column);
                       }
+                      if (newColumnComponent.component === 'ZdSelectMultiple') {
+                          newColumnComponent.showCheckboxAll = (_a = newColumnComponent.showCheckboxAll) !== null && _a !== void 0 ? _a : this.showCheckboxAll;
+                      }
                       filterColumns.push(newColumnComponent);
                   });
               }
@@ -3559,6 +3588,7 @@
               },
           ];
           this.toolbarSlotProps = false;
+          this.showCheckboxAllFilter = false;
           this.title = this.getInitValue('title', props.title, this.title);
           this.addButton = this.getInitValue('addButton', props.addButton, this.addButton);
           this.deleteButton = this.getInitValue('deleteButton', props.deleteButton, this.deleteButton);
@@ -3574,6 +3604,7 @@
           this.showExport = this.getInitValue('showExport', props.showExport, this.showExport);
           this.showReload = this.getInitValue('showReload', props.showReload, this.showReload);
           this.exportConfig = this.getInitValue('exportConfig', props.exportConfig, this.exportConfig);
+          this.showCheckboxAllFilter = this.getInitValue('showCheckboxAllFilter', props.showCheckboxAllFilter, this.showCheckboxAllFilter);
           this.exportActions = props.exportActions || this.exportActions;
           this.actions = props.actions || this.actions;
           this.toolbarSlotProps = props.toolbarSlot !== undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.94.0",
+  "version": "1.96.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@zeedhi/core": "*"
   },
-  "gitHead": "2df809b3be18f0f4e986276267c761fe500009cb"
+  "gitHead": "dfe5f1a2a802cfea057de278b8e41f6858b43073"
 }

package/tests/unit/components/tek-grid/grid-filter-button.spec.ts

@@ -1,10 +1,10 @@
 /* eslint-disable no-underscore-dangle */
 
 import {
-  Button, Date, Form, IButton, IForm, IModal, Modal, ModalService,
+  Button, Date, Form, IButton, IForm, IModal, ISelectMultiple, Modal, ModalService, SelectMultiple,
 } from '@zeedhi/common';
 import {
-  Http, Metadata, DateHelper,
+  Http, Metadata, DateHelper, Config,
 } from '@zeedhi/core';
 import {
   IFilterPropsComponent,
@@ -207,6 +207,133 @@ describe('TekGridFilterButton', () => {
       spy.mockReset();
     });
 
+    it('when creating a SelectMultiple filter, default should not add showCheckboxAll prop', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick5',
+        component: 'TekGrid',
+        columns: [
+          {
+            name: 'id',
+            filterable: true,
+            filterProps: [{
+              name: 'id_edit', label: 'id', component: 'ZdSelectMultiple', showCheckboxAll: false,
+            }],
+          },
+          {
+            name: 'name',
+            filterable: true,
+            filterProps: [{ name: 'name_edit', label: 'name', component: 'ZdSelectMultiple' }],
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+      clickOnFilterButton(instance);
+
+      expect(formElements[0].showCheckboxAll).toBeFalsy();
+      expect(formElements[1].showCheckboxAll).toBeFalsy();
+
+      spy.mockReset();
+    });
+
+    it('when using the prop showCheckboxAllFilter, should add showCheckboxAll prop to SelectMultiple filters', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick5',
+        component: 'TekGrid',
+        showCheckboxAllFilter: true,
+        columns: [
+          {
+            name: 'id',
+            filterable: true,
+            filterProps: [{
+              name: 'id_edit', label: 'id', component: 'ZdSelectMultiple', showCheckboxAll: false,
+            }],
+          },
+          {
+            name: 'name',
+            filterable: true,
+            filterProps: [{ name: 'name_edit', label: 'name', component: 'ZdSelectMultiple' }],
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+      clickOnFilterButton(instance);
+
+      expect(formElements[0].showCheckboxAll).toBeFalsy();
+      expect(formElements[1].showCheckboxAll).toBeTruthy();
+
+      spy.mockReset();
+    });
+
+    it('when creating a SelectMultiple filter, should change the filter value depending on checkboxAll', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick5',
+        component: 'TekGrid',
+        columns: [
+          {
+            name: 'id',
+            filterable: true,
+            filterProps: [{
+              name: 'id_edit', label: 'id', component: 'ZdSelectMultiple', showCheckboxAll: false,
+            }],
+          },
+        ],
+      });
+
+      let form: IForm = { name: 'form', component: 'ZdForm' };
+      let select: ISelectMultiple = { name: 'select', component: 'ZdSelectMultiple' };
+      let applyButton: IButton = { name: 'apply', component: 'ZdButton' };
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        const modalFooter = getChild(modal.children || [], `${instance.name}-filter-footer`);
+        form = getChild(modal.children || [], `${instance.name}-filter-form`);
+        select = getChild(form.children || [], `${instance.name}-filter-AND-CONTAINS-id-0`);
+        applyButton = getChild(modalFooter.rightSlot, `${instance.name}-filter-okButton`);
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+      clickOnFilterButton(instance);
+      const applyButtonObject = new Button(applyButton);
+
+      const formObject = new Form(form);
+      const selectObject = new SelectMultiple(select);
+      jest.spyOn(Metadata, 'getInstance').mockReturnValue(formObject);
+      jest.spyOn(formObject, 'getChildInstance').mockReturnValue(selectObject);
+
+      formObject.value['grid_filterClick5-filter-AND-CONTAINS-id-0'] = ['example'];
+      setClick(applyButtonObject);
+
+      expect(instance.datasource.filter).toEqual({
+        id: ['example'],
+      });
+
+      selectObject.checkboxAll = true;
+      setClick(applyButtonObject);
+
+      expect(instance.datasource.filter).toEqual({});
+
+      (Config as any).set({ selectAllCompatibilityMode: true });
+      setClick(applyButtonObject);
+      expect(instance.datasource.filter).toEqual({ id: 'T' });
+
+      spy.mockReset();
+    });
+
     it('should create modal with filterable and ordered form elements', () => {
       const instance = new TekGrid({
         name: 'grid-filter-order',

package/tests/unit/components/tek-image/Image.spec.ts

@@ -43,4 +43,25 @@ describe('Image', () => {
       expect(instance.fillHeight).toBeTruthy();
     });
   });
+
+  describe('load event', () => {
+    it('should call load event', () => {
+      const load = jest.fn();
+      const instance = new Image({
+        name: 'image',
+        component: 'TekImage',
+        events: {
+          load,
+        },
+      });
+
+      const event = {} as Event;
+      const element = {} as HTMLElement;
+      instance.load(event, element);
+
+      expect(load).toHaveBeenCalledWith({
+        event, element, component: instance,
+      });
+    });
+  });
 });

package/types/components/tek-grid/grid-filter-button.d.ts

@@ -9,6 +9,7 @@ import { TekTreeGrid } from '../tek-tree-grid/tree-grid';
 export declare class TekGridFilterButton extends Button implements ITekGridFilterButton {
     gridName?: string;
     grid: TekGrid | TekTreeGrid;
+    showCheckboxAll: boolean;
     private filterModal?;
     protected filterFormInputs: IDictionary<string[]>;
     constructor(props: ITekGridFilterButton);
@@ -19,6 +20,7 @@ export declare class TekGridFilterButton extends Button implements ITekGridFilte
     destroyFilterModal(): void;
     private createFilterFromColumns;
     onBeforeDestroy(): void;
+    private formatFormValue;
     private applyFilter;
     private setFilter;
     private clearFilter;

package/types/components/tek-grid/grid.d.ts

@@ -72,6 +72,7 @@ export declare class TekGrid extends GridEditable implements ITekGrid {
     filterOperationsDatasource: Datasource;
     editNewRowsOnly: boolean;
     protected keyShortcutKeyMapping: any;
+    showCheckboxAllFilter: boolean;
     /**
      * TekGrid class constructor
      * @param props TekGrid properties