@zeedhi/teknisa-components-common 1.92.1 → 1.93.1

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

@@ -2295,12 +2295,12 @@ class TekGrid extends GridEditable {
         if (!this.toolbarSlotProps)
             this.toolbarSlot = this.gridBase.createToolbarProps();
         this.navigationKeyMapping.left = {
-            event: this.navigateLeft.bind(this),
+            event: this.directionalLeft.bind(this),
             stop: true,
             active: true,
         };
         this.navigationKeyMapping.right = {
-            event: this.navigateRight.bind(this),
+            event: this.directionalRight.bind(this),
             stop: true,
             active: true,
         };
@@ -2700,73 +2700,82 @@ class TekGrid extends GridEditable {
     navigateDown(params) {
         if (!this.isGrouped()) {
             super.navigateDown();
+            return;
         }
-        else {
-            const { index } = params;
-            if (!this.groupedData.length || index === this.groupedData.length)
-                return;
-            const { uniqueKey, currentRow } = this.datasource;
-            const rowIndex = index !== undefined
-                ? index
-                : this.groupedData.findIndex((row) => {
-                    if (currentRow.group) {
-                        return row.group && row.groupValue === currentRow.groupValue;
-                    }
-                    return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
-                });
-            const newRow = this.groupedData[rowIndex + 1];
-            if (newRow && this.isItemVisible(newRow) && !newRow.groupFooter) {
-                this.datasource.currentRow = newRow;
-            }
-            else {
-                this.navigateDown({ index: rowIndex + 1 });
-            }
+        if (this.cellSelection && this.viewNavigate) {
+            this.viewNavigate('down');
+            return;
         }
+        const { index } = params;
+        if (!this.groupedData.length || index === this.groupedData.length)
+            return;
+        const { uniqueKey, currentRow } = this.datasource;
+        const rowIndex = index !== undefined
+            ? index
+            : this.groupedData.findIndex((row) => {
+                if (currentRow.group) {
+                    return row.group && row.groupValue === currentRow.groupValue;
+                }
+                return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
+            });
+        const newRow = this.groupedData[rowIndex + 1];
+        if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
+            this.navigateDown({ index: rowIndex + 1 });
+            return;
+        }
+        this.datasource.currentRow = newRow;
     }
     navigateUp(params) {
         if (!this.isGrouped()) {
             super.navigateUp();
+            return;
         }
-        else {
-            const { index } = params;
-            if (!this.groupedData.length || index === -1)
-                return;
-            const { uniqueKey, currentRow } = this.datasource;
-            let rowIndex;
-            rowIndex = index !== undefined
-                ? index
-                : this.groupedData.findIndex((row) => {
-                    if (currentRow.group) {
-                        return row.group && row.groupValue === currentRow.groupValue;
-                    }
-                    return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
-                });
-            if (rowIndex === -1)
-                rowIndex = this.groupedData.length;
-            const newRow = this.groupedData[rowIndex - 1];
-            if (newRow && this.isItemVisible(newRow) && !newRow.groupFooter) {
-                this.datasource.currentRow = newRow;
-            }
-            else {
-                this.navigateUp({ index: rowIndex - 1 });
-            }
+        if (this.cellSelection && this.viewNavigate) {
+            this.viewNavigate('up');
+            return;
+        }
+        const { index } = params;
+        if (!this.groupedData.length || index === -1)
+            return;
+        const { uniqueKey, currentRow } = this.datasource;
+        let rowIndex;
+        rowIndex = index !== undefined
+            ? index
+            : this.groupedData.findIndex((row) => {
+                if (currentRow.group) {
+                    return row.group && row.groupValue === currentRow.groupValue;
+                }
+                return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
+            });
+        if (rowIndex === -1)
+            rowIndex = this.groupedData.length;
+        const newRow = this.groupedData[rowIndex - 1];
+        if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
+            this.navigateUp({ index: rowIndex - 1 });
+            return;
         }
+        this.datasource.currentRow = newRow;
     }
-    navigateLeft() {
+    directionalLeft() {
         var _a;
         const { currentRow } = this.datasource;
         if (currentRow.group && currentRow.groupOpened) {
             currentRow.groupOpened = false;
+            return;
         }
-        else if ((_a = currentRow.groupHeaders) === null || _a === void 0 ? void 0 : _a.length) {
+        if (!this.cellSelection && ((_a = currentRow.groupHeaders) === null || _a === void 0 ? void 0 : _a.length)) {
             this.datasource.currentRow = currentRow.groupHeaders[currentRow.groupHeaders.length - 1];
+            return;
         }
+        this.navigateLeft();
     }
-    navigateRight() {
+    directionalRight() {
         const { currentRow } = this.datasource;
         if (currentRow.group && !currentRow.groupOpened) {
             currentRow.groupOpened = true;
+            return;
         }
+        this.navigateRight();
     }
     /**
      * Dispatches row click event
@@ -2989,7 +2998,8 @@ class TekGridFilterButton extends Button {
         this.filterModal.hide();
     }
     destroyFilterModal() {
-        this.filterModal.destroy();
+        if (this.filterModal)
+            this.filterModal.destroy();
     }
     createFilterFromColumns() {
         if (!this.filterModal) {

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

@@ -2299,12 +2299,12 @@
           if (!this.toolbarSlotProps)
               this.toolbarSlot = this.gridBase.createToolbarProps();
           this.navigationKeyMapping.left = {
-              event: this.navigateLeft.bind(this),
+              event: this.directionalLeft.bind(this),
               stop: true,
               active: true,
           };
           this.navigationKeyMapping.right = {
-              event: this.navigateRight.bind(this),
+              event: this.directionalRight.bind(this),
               stop: true,
               active: true,
           };
@@ -2704,73 +2704,82 @@
       navigateDown(params) {
           if (!this.isGrouped()) {
               super.navigateDown();
+              return;
           }
-          else {
-              const { index } = params;
-              if (!this.groupedData.length || index === this.groupedData.length)
-                  return;
-              const { uniqueKey, currentRow } = this.datasource;
-              const rowIndex = index !== undefined
-                  ? index
-                  : this.groupedData.findIndex((row) => {
-                      if (currentRow.group) {
-                          return row.group && row.groupValue === currentRow.groupValue;
-                      }
-                      return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
-                  });
-              const newRow = this.groupedData[rowIndex + 1];
-              if (newRow && this.isItemVisible(newRow) && !newRow.groupFooter) {
-                  this.datasource.currentRow = newRow;
-              }
-              else {
-                  this.navigateDown({ index: rowIndex + 1 });
-              }
+          if (this.cellSelection && this.viewNavigate) {
+              this.viewNavigate('down');
+              return;
           }
+          const { index } = params;
+          if (!this.groupedData.length || index === this.groupedData.length)
+              return;
+          const { uniqueKey, currentRow } = this.datasource;
+          const rowIndex = index !== undefined
+              ? index
+              : this.groupedData.findIndex((row) => {
+                  if (currentRow.group) {
+                      return row.group && row.groupValue === currentRow.groupValue;
+                  }
+                  return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
+              });
+          const newRow = this.groupedData[rowIndex + 1];
+          if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
+              this.navigateDown({ index: rowIndex + 1 });
+              return;
+          }
+          this.datasource.currentRow = newRow;
       }
       navigateUp(params) {
           if (!this.isGrouped()) {
               super.navigateUp();
+              return;
           }
-          else {
-              const { index } = params;
-              if (!this.groupedData.length || index === -1)
-                  return;
-              const { uniqueKey, currentRow } = this.datasource;
-              let rowIndex;
-              rowIndex = index !== undefined
-                  ? index
-                  : this.groupedData.findIndex((row) => {
-                      if (currentRow.group) {
-                          return row.group && row.groupValue === currentRow.groupValue;
-                      }
-                      return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
-                  });
-              if (rowIndex === -1)
-                  rowIndex = this.groupedData.length;
-              const newRow = this.groupedData[rowIndex - 1];
-              if (newRow && this.isItemVisible(newRow) && !newRow.groupFooter) {
-                  this.datasource.currentRow = newRow;
-              }
-              else {
-                  this.navigateUp({ index: rowIndex - 1 });
-              }
+          if (this.cellSelection && this.viewNavigate) {
+              this.viewNavigate('up');
+              return;
+          }
+          const { index } = params;
+          if (!this.groupedData.length || index === -1)
+              return;
+          const { uniqueKey, currentRow } = this.datasource;
+          let rowIndex;
+          rowIndex = index !== undefined
+              ? index
+              : this.groupedData.findIndex((row) => {
+                  if (currentRow.group) {
+                      return row.group && row.groupValue === currentRow.groupValue;
+                  }
+                  return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
+              });
+          if (rowIndex === -1)
+              rowIndex = this.groupedData.length;
+          const newRow = this.groupedData[rowIndex - 1];
+          if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
+              this.navigateUp({ index: rowIndex - 1 });
+              return;
           }
+          this.datasource.currentRow = newRow;
       }
-      navigateLeft() {
+      directionalLeft() {
           var _a;
           const { currentRow } = this.datasource;
           if (currentRow.group && currentRow.groupOpened) {
               currentRow.groupOpened = false;
+              return;
           }
-          else if ((_a = currentRow.groupHeaders) === null || _a === void 0 ? void 0 : _a.length) {
+          if (!this.cellSelection && ((_a = currentRow.groupHeaders) === null || _a === void 0 ? void 0 : _a.length)) {
               this.datasource.currentRow = currentRow.groupHeaders[currentRow.groupHeaders.length - 1];
+              return;
           }
+          this.navigateLeft();
       }
-      navigateRight() {
+      directionalRight() {
           const { currentRow } = this.datasource;
           if (currentRow.group && !currentRow.groupOpened) {
               currentRow.groupOpened = true;
+              return;
           }
+          this.navigateRight();
       }
       /**
        * Dispatches row click event
@@ -2993,7 +3002,8 @@
           this.filterModal.hide();
       }
       destroyFilterModal() {
-          this.filterModal.destroy();
+          if (this.filterModal)
+              this.filterModal.destroy();
       }
       createFilterFromColumns() {
           if (!this.filterModal) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.92.1",
+  "version": "1.93.1",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@zeedhi/core": "*"
   },
-  "gitHead": "fd9d5619f6a005aa0c82e22bd53c2fc7db9e40bf"
+  "gitHead": "20420a9274a19f72fbea80d245bf6a517b02a96b"
 }

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

@@ -106,7 +106,7 @@ describe('TekGridFilterButton', () => {
       button.onCreated();
 
       expect(spy).toBeCalledTimes(1);
-      button.click({} as Event);
+      button.click();
       expect(spy).toBeCalledTimes(1);
       expect(button.isVisible).toBeFalsy();
       (instance as any).gridBase.hideFilterModal();

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

@@ -938,6 +938,37 @@ describe('TekGrid', () => {
       spySetFocus.mockReset();
       spyMetadata.mockReset();
     });
+
+    it('when using cellSelection, should use viewNavigate', async () => {
+      const instance = new TekGrid({
+        name: 'grid_navigation_1',
+        component: 'TekGrid',
+        cellSelection: true,
+        columns: [
+          {
+            name: 'name',
+            grouped: true,
+          },
+        ],
+      });
+
+      const elem = document.createElement('DIV');
+      (KeyMap as any).isElementActive = () => true;
+      instance.onCreated();
+      instance.onMounted(elem);
+
+      await flushPromises();
+      const spy = jest.fn();
+      instance.setViewNavigate(spy);
+
+      instance.navigateUp();
+
+      expect(spy).toHaveBeenLastCalledWith('up');
+
+      instance.navigateDown();
+
+      expect(spy).toHaveBeenLastCalledWith('down');
+    });
   });
 
   describe('reloadClick()', () => {

package/tests/unit/components/tek-product-card/product-card.spec.ts

@@ -28,7 +28,7 @@ describe('ProductCard', () => {
         src: '/img/zeedhi.svg',
         productName: 'ProductTest',
         productPrice: '150',
-        errorImagePath: 'image-error.jpg',
+        errorImagePath: 'image-error.avif',
         errorImageText: 'Image not found',
         width: '200',
         height: '400px',
@@ -39,7 +39,7 @@ describe('ProductCard', () => {
       expect(instance.id).toBe('id');
       expect(instance.src).toBe('/img/zeedhi.svg');
       expect(instance.productName).toBe('ProductTest');
-      expect(instance.errorImagePath).toBe('image-error.jpg');
+      expect(instance.errorImagePath).toBe('image-error.avif');
       expect(instance.errorImageText).toBe('Image not found');
       expect(instance.width).toBe('200');
       expect(instance.productPriceFormat).toBe('$150.00');

package/types/components/tek-ag-grid/default-icons.d.ts

@@ -0,0 +1,53 @@
+declare const defaultIcons: {
+    columnGroupOpened: string;
+    columnGroupClosed: string;
+    columnSelectClosed: string;
+    columnSelectOpen: string;
+    columnSelectIndeterminate: string;
+    columnMovePin: string;
+    columnMoveHide: string;
+    columnMoveMove: string;
+    columnMoveLeft: string;
+    columnMoveRight: string;
+    columnMoveGroup: string;
+    columnMoveValue: string;
+    dropNotAllowed: string;
+    groupContracted: string;
+    groupExpanded: string;
+    chart: string;
+    close: string;
+    cancel: string;
+    check: string;
+    first: string;
+    previous: string;
+    next: string;
+    last: string;
+    linked: string;
+    unlinked: string;
+    colorPicker: string;
+    groupLoading: string;
+    menu: string;
+    filter: string;
+    columns: string;
+    maximize: string;
+    minimize: string;
+    menuPin: string;
+    menuValue: string;
+    menuAddRowGroup: string;
+    menuRemoveRowGroup: string;
+    clipboardCopy: string;
+    clipboardPaste: string;
+    rowGroupPanel: string;
+    valuePanel: string;
+    columnDrag: string;
+    rowDrag: string;
+    save: string;
+    smallDown: string;
+    smallLeft: string;
+    smallRight: string;
+    smallUp: string;
+    sortAscending: string;
+    sortDescending: string;
+    sortUnSort: string;
+};
+export default defaultIcons;

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

@@ -0,0 +1,9 @@
+import { IIterable } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+export interface ITekAgGrid extends IIterable {
+    dense?: boolean;
+    frameworkComponents?: IDictionary;
+    gridOptions?: IDictionary;
+    height?: string | number;
+    icons?: IDictionary<string>;
+}

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

@@ -0,0 +1,35 @@
+import { Iterable } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import { ITekAgGrid } from './interfaces';
+/** Grid Component */
+export declare class TekAgGrid extends Iterable implements ITekAgGrid {
+    cssClass: string;
+    dense: boolean;
+    frameworkComponents: IDictionary;
+    gridOptions: IDictionary;
+    height: string | number;
+    icons: IDictionary<string>;
+    gridComponent: any;
+    /**
+     * Creates a new AgGrid.
+     * @param props AgGrid properties
+     */
+    constructor(props: ITekAgGrid);
+    private createOptionsAccessors;
+    private setAccessor;
+    /**
+     * Reload dataset
+     */
+    reload(): Promise<any>;
+    /**
+     * Compares two dates
+     * @param date1
+     * @param date2
+     * @param format
+     * @returns -1 if date1 after date2
+     * @returns 0 if date1 equal date2
+     * @returns 1 if date1 before date2
+     */
+    dateComparator(date1: string | Date, date2: string | Date, format?: string): 1 | -1 | 0;
+    private getDateAsString;
+}

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

@@ -0,0 +1,94 @@
+import { IDatasource, IDictionary, RestDatasource } from '@zeedhi/core';
+import { IDynamicFilterItem, ITekRestDatasource } from './interfaces';
+export declare class TekRestDatasource extends RestDatasource implements ITekRestDatasource {
+    /** Dynamic filter data */
+    dynamicFilter: IDictionary<IDynamicFilterItem[]>;
+    /** Search Join data */
+    searchJoin: IDictionary<Array<string | number>>;
+    /**
+     * URL reserved keys
+     */
+    protected reservedKeys: IDictionary<boolean>;
+    /**
+     * Dynamic Filter Operations
+     */
+    dynamicFilterOperations: IDictionary<boolean>;
+    /**
+     * Dynamic Filter Relations
+     */
+    dynamicFilterRelations: IDictionary<boolean>;
+    /**
+     * Dynamic Filter applied flag
+     */
+    protected dynamicFilterApplied: string;
+    /**
+     * Create new datasource
+     * @param props Datasource properties
+     */
+    constructor(props: ITekRestDatasource);
+    protected updateInternalProperties(datasource?: IDatasource): void;
+    protected getEncodedParam(urlParam: string, datasourceParam?: IDictionary<any>): IDictionary<any>;
+    protected getQueryStringValues(): IDictionary<any>;
+    protected getUrlQueryString(): string;
+    /**
+     * Adds a new dynamic filter position or replace if exists
+     * @param column Dynamic Filter column name
+     * @param value Dynamic Filter value
+     * @returns Promise with data collection
+     */
+    addDynamicFilter(column: string, value: any): Promise<any>;
+    /**
+     * Removes a dynamic filter position
+     * @param column Dynamic Filter column name
+     * @returns Promise with data collection
+     */
+    removeDynamicFilter(column: string): Promise<any>;
+    /**
+     * Sets new dynamic filter value
+     * @param filter Dynamic Filter value
+     * @returns Promise with data collection
+     */
+    setDynamicFilter(filter: IDictionary<any>): Promise<any>;
+    /**
+     * Clears Dynamic filter value
+     * @returns Promise with data collection
+     */
+    clearDynamicFilter(): Promise<any>;
+    /**
+     * Resets page and selected rows and tries to update the url
+     * @returns Promise with data collection
+     */
+    protected updateDynamicFilter(): Promise<any>;
+    /**
+     * Checks if a filter value is valid
+     * @param value Filter value
+     * @returns Is valid filter value
+     */
+    protected isValidDynamicFilterValue(column: string, value?: IDictionary<any>[]): boolean | undefined;
+    /**
+     * Retrieves request params
+     */
+    protected getRequestParams(): any;
+    clone(): {
+        dynamicFilter: IDictionary<IDynamicFilterItem[]>;
+        searchJoin: IDictionary<(string | number)[]>;
+        type: string;
+        route?: string | undefined;
+        lazyLoad?: boolean | undefined;
+        arrayFormat?: "indices" | "brackets" | "repeat" | "comma" | undefined;
+        find?: IDictionary<any> | undefined;
+        currentRow?: IDictionary<any> | undefined;
+        data?: IDictionary<any>[] | undefined;
+        filter?: IDictionary<any> | undefined;
+        limit?: string | number | undefined;
+        loadAll?: boolean | undefined;
+        loading?: boolean | undefined;
+        order?: string[] | undefined;
+        page?: string | number | undefined;
+        search?: string | undefined;
+        searchIn?: string[] | undefined;
+        uniqueKey?: string | undefined;
+        watchUrl?: boolean | undefined;
+        events?: import("@zeedhi/core").IDatasourceEvents<import("@zeedhi/core").IEventParam<any>> | undefined;
+    };
+}

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

@@ -0,0 +1,53 @@
+declare const defaultIcons: {
+    columnGroupOpened: string;
+    columnGroupClosed: string;
+    columnSelectClosed: string;
+    columnSelectOpen: string;
+    columnSelectIndeterminate: string;
+    columnMovePin: string;
+    columnMoveHide: string;
+    columnMoveMove: string;
+    columnMoveLeft: string;
+    columnMoveRight: string;
+    columnMoveGroup: string;
+    columnMoveValue: string;
+    dropNotAllowed: string;
+    groupContracted: string;
+    groupExpanded: string;
+    chart: string;
+    close: string;
+    cancel: string;
+    check: string;
+    first: string;
+    previous: string;
+    next: string;
+    last: string;
+    linked: string;
+    unlinked: string;
+    colorPicker: string;
+    groupLoading: string;
+    menu: string;
+    filter: string;
+    columns: string;
+    maximize: string;
+    minimize: string;
+    menuPin: string;
+    menuValue: string;
+    menuAddRowGroup: string;
+    menuRemoveRowGroup: string;
+    clipboardCopy: string;
+    clipboardPaste: string;
+    rowGroupPanel: string;
+    valuePanel: string;
+    columnDrag: string;
+    rowDrag: string;
+    save: string;
+    smallDown: string;
+    smallLeft: string;
+    smallRight: string;
+    smallUp: string;
+    sortAscending: string;
+    sortDescending: string;
+    sortUnSort: string;
+};
+export default defaultIcons;

package/types/components/tek-grid/filter-dynamic-values.d.ts

@@ -0,0 +1,9 @@
+import { TekGridColumn } from '..';
+export declare class TekFilterDynamicValues {
+    private static values;
+    private static formatDate;
+    static getLabel(name: string): string;
+    static getValue(name: string, column: TekGridColumn): string | string[];
+    static register(name: string, label: string, fn: () => Date | [Date, Date]): void;
+    static unregister(name: string): void;
+}

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

@@ -0,0 +1,19 @@
+import { TekGrid } from './grid';
+export declare class TekGridController {
+    private grid;
+    constructor(grid: TekGrid);
+    get gridTitle(): string;
+    get showAddButton(): boolean;
+    get showDeleteButton(): boolean;
+    get showFilterButton(): boolean;
+    get showColumnsButton(): boolean;
+    get columnsButtonIgnore(): string[];
+    get showLayoutOptions(): boolean;
+    get showFirstDivider(): boolean;
+    get showActionsButton(): boolean;
+    get showExportButton(): boolean;
+    get showActionAndExportButton(): boolean;
+    get isEditing(): boolean;
+    get isNotEditing(): boolean;
+    get disableDeleteButton(): boolean;
+}