globuswebcomponents 2.10.13 → 2.11.1

package/dist/types/components.d.ts

@@ -769,9 +769,6 @@ export namespace Components {
           * @default false
          */
         "twentyfourHr": boolean;
-        /**
-          * @default null
-         */
         "value": Date | Date[] | null;
     }
     interface GbDatePickerListItem {
@@ -1070,9 +1067,6 @@ export namespace Components {
         "state": StateType;
     }
     interface GbFilterModal {
-        /**
-          * @default {     title: 'Filter',     enableDateRange: true,     showClearButton: true,     additionalFields: [       {         tag: 'gb-input-dropdown',         key: 'approvalStatus',         event: 'dropdownItemSelected',         props: {           type: 'tags',           icon: false,           showLabel: true,           label: 'Approval status',           placeholder: 'Select approval status',           items: ['Draft', 'Pending', 'Approved', 'Rejected'],           destructive: false,         },         default: {           value: [],         },       },       {         tag: 'gb-slider',         key: 'amountRange',         event: 'thumbValueChanged',         props: {           showHeading: true,           heading: 'Amount range',         },         default: {           leftControl: 50,           rightControl: 100,         },       },       {         tag: 'gb-input-dropdown',         key: 'disbursementStatus',         event: 'dropdownItemSelected',         props: {           type: 'default',           showLabel: true,           label: 'Disbursement status',           placeholder: 'Select disbursement status',           items: ['Disbursed', 'Not Disbursed'],         },       },       //   {       //     tag: 'gb-input-dropdown',       //     key: 'facilityCategory',       //     props: {       //       showLabel: true,       //       label: 'Facility category',       //       placeholder: 'Select facility category',       //       items: ['Retail', 'Commercial', 'Corporate'],       //     },       //   },     ],     initialValues: {       pageNumber: 1,       pageSize: 10,     },   }
-         */
         "filterConfig": FilterConfig;
     }
     interface GbHeader {
@@ -2214,7 +2208,7 @@ export namespace Components {
          */
         "actionsType": 'none' | 'dropdown' | '';
         /**
-          * @default [     // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },     // { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },     // { key: 'role', label: 'Role' },     // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: (row) => ({color: row.amount > 200 ? 'green' : ''}) },     // {     //   key: 'status',     //   label: 'Status',     //   cellComponent: 'gb-badge',     //   cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),     //   cellSlots: {     //     default: {     //       tag: 'p',     //       content: row => row.status,     //     },     //   },     // },   ]
+          * @default [     // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },     // {     //   key: 'name',     //   label: 'Name',     //   sortable: true,     //   sortType: 'string',     //   helpIcon: true,     //   supportingText: row => row.role,     //   mobile: { position: 'top_right' },     // },     // { key: 'role', label: 'Role' },     // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },     // {     //   key: 'status',     //   label: 'Status',     //   cellComponent: 'gb-badge',     //   cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),     //   cellSlots: {     //     default: {     //       tag: 'p',     //       content: row => row.status,     //     },     //   },     // },   ]
          */
         "columns": TableColumn[];
         /**
@@ -2222,7 +2216,7 @@ export namespace Components {
          */
         "data": any[];
         /**
-          * @default [     // { label: 'View', action: 'view', icon: 'assets/view.svg', disabled: false },     // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },     // { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: true },   ]
+          * @default [     // { label: 'View', action: 'view', icon: 'assets/view.svg', disabled: false },     // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },     // { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: false },   ]
          */
         "dropdownOptions"?: DropdownOption[];
         /**
@@ -2250,6 +2244,11 @@ export namespace Components {
     featuredIconSwap?: string;
   };
         "filterConfig": FilterConfig;
+        "gridCardConfig"?: {
+    name?: { key: string };
+    badges?: { key: string; label?: string }[];
+    button?: { icon: string; text: string; action: string };
+  };
         /**
           * @default false
          */
@@ -2265,7 +2264,7 @@ export namespace Components {
     totalItems?: number;
   };
         /**
-          * @default [     // { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },     // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },     // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },   ]
+          * @default [     // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },     // { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },     // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },   ]
          */
         "rowActions": RowAction[];
         /**
@@ -2293,7 +2292,7 @@ export namespace Components {
          */
         "tableHeadColor": 'gray' | 'blue';
         /**
-          * @default {     tableHeading: false,     tableHeadingLabel: 'Suspicious outflows',     showDateFilter: true,     showFilter: true,     showColumnOptions: true,     showSearch: true,     showExport: true,     showRefreshButton: false,     datePickerMode: 'range',     inputPlaceholder: 'Transaction reference',   }
+          * @default {     tableHeading: false,     tableHeadingLabel: 'Suspicious outflows',     showDateFilter: true,     showFilter: true,     showColumnOptions: true,     showSearch: true,     showExport: true,     showRefreshButton: false,     showLayoutToggle: true,     datePickerMode: 'range',     inputPlaceholder: 'Transaction reference',   }
          */
         "tableHeaderConfig": {
     tableHeading?: boolean;
@@ -3821,11 +3820,10 @@ declare global {
         "inputValueChanged": void;
         "dateChange": string | string[];
         "exportClicked": { dataType: string; exportType: string };
+        "refreshButtonClicked": void;
+        "layoutButtonClicked": string;
         "rowClicked": { row: any };
-        "applyFilters": {
-    filters: any;
-    pagination: any;
-  };
+        "applyFilters": any;
     }
     interface HTMLGbTableElement extends Components.GbTable, HTMLStencilElement {
         addEventListener<K extends keyof HTMLGbTableElementEventMap>(type: K, listener: (this: HTMLGbTableElement, ev: GbTableCustomEvent<HTMLGbTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4961,9 +4959,6 @@ declare namespace LocalJSX {
           * @default false
          */
         "twentyfourHr"?: boolean;
-        /**
-          * @default null
-         */
         "value"?: Date | Date[] | null;
     }
     interface GbDatePickerListItem {
@@ -5273,9 +5268,6 @@ declare namespace LocalJSX {
         "state"?: StateType;
     }
     interface GbFilterModal {
-        /**
-          * @default {     title: 'Filter',     enableDateRange: true,     showClearButton: true,     additionalFields: [       {         tag: 'gb-input-dropdown',         key: 'approvalStatus',         event: 'dropdownItemSelected',         props: {           type: 'tags',           icon: false,           showLabel: true,           label: 'Approval status',           placeholder: 'Select approval status',           items: ['Draft', 'Pending', 'Approved', 'Rejected'],           destructive: false,         },         default: {           value: [],         },       },       {         tag: 'gb-slider',         key: 'amountRange',         event: 'thumbValueChanged',         props: {           showHeading: true,           heading: 'Amount range',         },         default: {           leftControl: 50,           rightControl: 100,         },       },       {         tag: 'gb-input-dropdown',         key: 'disbursementStatus',         event: 'dropdownItemSelected',         props: {           type: 'default',           showLabel: true,           label: 'Disbursement status',           placeholder: 'Select disbursement status',           items: ['Disbursed', 'Not Disbursed'],         },       },       //   {       //     tag: 'gb-input-dropdown',       //     key: 'facilityCategory',       //     props: {       //       showLabel: true,       //       label: 'Facility category',       //       placeholder: 'Select facility category',       //       items: ['Retail', 'Commercial', 'Corporate'],       //     },       //   },     ],     initialValues: {       pageNumber: 1,       pageSize: 10,     },   }
-         */
         "filterConfig"?: FilterConfig;
         "onApplyFilters"?: (event: GbFilterModalCustomEvent<Record<string, any>>) => void;
         "onClearFilters"?: (event: GbFilterModalCustomEvent<void>) => void;
@@ -6447,7 +6439,7 @@ declare namespace LocalJSX {
          */
         "actionsType"?: 'none' | 'dropdown' | '';
         /**
-          * @default [     // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },     // { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },     // { key: 'role', label: 'Role' },     // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: (row) => ({color: row.amount > 200 ? 'green' : ''}) },     // {     //   key: 'status',     //   label: 'Status',     //   cellComponent: 'gb-badge',     //   cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),     //   cellSlots: {     //     default: {     //       tag: 'p',     //       content: row => row.status,     //     },     //   },     // },   ]
+          * @default [     // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },     // {     //   key: 'name',     //   label: 'Name',     //   sortable: true,     //   sortType: 'string',     //   helpIcon: true,     //   supportingText: row => row.role,     //   mobile: { position: 'top_right' },     // },     // { key: 'role', label: 'Role' },     // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },     // {     //   key: 'status',     //   label: 'Status',     //   cellComponent: 'gb-badge',     //   cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),     //   cellSlots: {     //     default: {     //       tag: 'p',     //       content: row => row.status,     //     },     //   },     // },   ]
          */
         "columns"?: TableColumn[];
         /**
@@ -6455,7 +6447,7 @@ declare namespace LocalJSX {
          */
         "data"?: any[];
         /**
-          * @default [     // { label: 'View', action: 'view', icon: 'assets/view.svg', disabled: false },     // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },     // { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: true },   ]
+          * @default [     // { label: 'View', action: 'view', icon: 'assets/view.svg', disabled: false },     // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },     // { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: false },   ]
          */
         "dropdownOptions"?: DropdownOption[];
         /**
@@ -6483,18 +6475,22 @@ declare namespace LocalJSX {
     featuredIconSwap?: string;
   };
         "filterConfig"?: FilterConfig;
+        "gridCardConfig"?: {
+    name?: { key: string };
+    badges?: { key: string; label?: string }[];
+    button?: { icon: string; text: string; action: string };
+  };
         /**
           * @default false
          */
         "loading"?: boolean;
-        "onApplyFilters"?: (event: GbTableCustomEvent<{
-    filters: any;
-    pagination: any;
-  }>) => void;
+        "onApplyFilters"?: (event: GbTableCustomEvent<any>) => void;
         "onDateChange"?: (event: GbTableCustomEvent<string | string[]>) => void;
         "onExportClicked"?: (event: GbTableCustomEvent<{ dataType: string; exportType: string }>) => void;
         "onInputValueChanged"?: (event: GbTableCustomEvent<void>) => void;
+        "onLayoutButtonClicked"?: (event: GbTableCustomEvent<string>) => void;
         "onPageItemSelected"?: (event: GbTableCustomEvent<{ pageSize: any; pageNumber: number }>) => void;
+        "onRefreshButtonClicked"?: (event: GbTableCustomEvent<void>) => void;
         "onRowActionClicked"?: (event: GbTableCustomEvent<{ action: string; row: any }>) => void;
         "onRowClicked"?: (event: GbTableCustomEvent<{ row: any }>) => void;
         "onSelectionChanged"?: (event: GbTableCustomEvent<any[]>) => void;
@@ -6509,7 +6505,7 @@ declare namespace LocalJSX {
     totalItems?: number;
   };
         /**
-          * @default [     // { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },     // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },     // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },   ]
+          * @default [     // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },     // { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },     // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },   ]
          */
         "rowActions"?: RowAction[];
         /**
@@ -6537,7 +6533,7 @@ declare namespace LocalJSX {
          */
         "tableHeadColor"?: 'gray' | 'blue';
         /**
-          * @default {     tableHeading: false,     tableHeadingLabel: 'Suspicious outflows',     showDateFilter: true,     showFilter: true,     showColumnOptions: true,     showSearch: true,     showExport: true,     showRefreshButton: false,     datePickerMode: 'range',     inputPlaceholder: 'Transaction reference',   }
+          * @default {     tableHeading: false,     tableHeadingLabel: 'Suspicious outflows',     showDateFilter: true,     showFilter: true,     showColumnOptions: true,     showSearch: true,     showExport: true,     showRefreshButton: false,     showLayoutToggle: true,     datePickerMode: 'range',     inputPlaceholder: 'Transaction reference',   }
          */
         "tableHeaderConfig"?: {
     tableHeading?: boolean;

package/dist/types/models/reusableModels.d.ts

@@ -116,6 +116,10 @@ export interface TableColumn {
     mobile?: {
         position?: MobilePosition;
     };
+    gridCard?: {
+        buttonIcon?: string;
+        buttonText?: string;
+    };
 }
 export interface RowAction {
     label: string;
@@ -132,20 +136,27 @@ export interface DropdownOption {
     disabled?: boolean;
 }
 export type PortalPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export interface FilterField {
+    tag: 'gb-date-range' | 'gb-input-dropdown' | 'gb-slider' | string;
+    key: string | {
+        start: string;
+        end: string;
+    };
+    event: string | {
+        start: string;
+        end: string;
+    };
+    label?: string;
+    props?: any;
+    default?: any;
+}
 export interface FilterConfig {
     title: string;
-    enableDateRange: boolean;
-    dateRangeLabel?: string;
     showClearButton?: boolean;
-    additionalFields?: {
-        tag: string;
-        key: string;
-        event: string;
-        props: any;
-        default?: any;
-    }[];
+    fields: FilterField[];
     initialValues: {
         pageNumber: number;
         pageSize: number;
     };
+    appliedValues?: Record<string, any>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "globuswebcomponents",
-  "version": "2.10.13",
+  "version": "2.11.1",
   "description": "Globus One",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",