globuswebcomponents 2.9.2 → 2.10.1

package/dist/globuscomponents/readme.md

@@ -54,6 +54,7 @@ Type: `Promise<HTMLButtonElement>`
  - [gb-file-upload](../gb-file-upload)
  - [gb-file-upload-item-base](../gb-file-upload-item-base)
  - [gb-filter-button](../gb-filter-button)
+ - [gb-filter-modal](../gb-filter-modal)
  - [gb-input-dropdown](../gb-input-dropdown)
  - [gb-input-field](../gb-input-field)
  - [gb-modal-action](../gb-modal-action)
@@ -82,6 +83,7 @@ graph TD;
   gb-file-upload --> gb-button
   gb-file-upload-item-base --> gb-button
   gb-filter-button --> gb-button
+  gb-filter-modal --> gb-button
   gb-input-dropdown --> gb-button
   gb-input-field --> gb-button
   gb-modal-action --> gb-button

package/dist/types/components/gb-table/gb-table.d.ts

@@ -61,6 +61,7 @@ export declare class GbTable {
     actionsType: 'none' | 'dropdown' | '';
     showCheckbox: boolean;
     tableHeadColor: 'gray' | 'blue';
+    rowKey: string | ((row: any) => string);
     internalCurrentPage: number;
     internalPageSize: number;
     openRowIndex: number | null;
@@ -79,8 +80,9 @@ export declare class GbTable {
         y: number;
     };
     showFilterModalInternal: boolean;
+    isFilterModalVisible: boolean;
     internalLoading: boolean;
-    rowActionClick: EventEmitter<{
+    rowActionClicked: EventEmitter<{
         action: string;
         row: any;
     }>;
@@ -98,6 +100,10 @@ export declare class GbTable {
     rowClicked: EventEmitter<{
         row: any;
     }>;
+    applyFilters: EventEmitter<{
+        filters: any;
+        pagination: any;
+    }>;
     private isDraggingModal;
     private dragOffset;
     private actionButtonRefs;
@@ -112,6 +118,7 @@ export declare class GbTable {
     private checkScrollability;
     private handleAction;
     private renderCell;
+    private getCellValue;
     emitPaginationDetails({ detail }: {
         detail: any;
     }): void;
@@ -121,14 +128,14 @@ export declare class GbTable {
     private get sortedData();
     private get allSelected();
     private get isIndeterminate();
+    private getRowId;
     private toggleAll;
     private toggleRow;
     private emitSelection;
     private get displayedData();
     private handlePageChange;
     private get totalPages();
-    onDataChange(newValue: any[], _oldValue: any[]): void;
-    onTotalItemsChange(newValue: number, _oldValue: number): void;
+    onDataChange(): void;
     onLoadingChange(newValue: boolean, _oldValue: boolean): void;
     private renderHeaderIcons;
     renderDesktopView(): any;
@@ -147,6 +154,7 @@ export declare class GbTable {
     private onModalPointerUp;
     private openFilterModal;
     private closeFilterModal;
+    onApplyFilters(detail: any): void;
     disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -2214,11 +2214,11 @@ export namespace Components {
          */
         "actionsType": 'none' | 'dropdown' | '';
         /**
-          * @default [     { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     { key: 'date', label: 'Date', 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' },     {       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, // Get status value from row         },       },     },   ]
+          * @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' },     {       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[];
         /**
-          * @default [     // {     //   id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',     //   date: 'Jan 1, 2022',     //   name: 'Emma Johnson',     //   role: 'Frontend Developer',     //   level: 'Today',     //   customer: 'John Doe',     //   amount: '$120.00',     //   status: 'Completed',     // },     { id: '#3002', date: 'Jan 2, 2022', name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },     { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },     { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },     { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },     { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },     { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },     { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },     { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },     { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },     { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },     { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },     { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },     { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },     { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },     { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },     { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },     { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },     { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },     { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },     { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },     { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },     { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },     { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },     { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },     { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },     { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },     { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },     { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },     { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },   ]
+          * @default [     // {     //   id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',     //   date: 'Jan 1, 2022',     //   name: 'Emma Johnson',     //   role: 'Frontend Developer',     //   level: 'Today',     //   customer: 'John Doe',     //   amount: '$120.00',     //   status: 'Completed',     // },     // { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },     // { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },     // { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },     // { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },     // { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },     { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },     { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },     { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },     { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },     { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },     { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },     { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },     { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },     { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },     { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },     { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },     { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },     { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },     { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },     { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },     { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },     { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },     { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },     { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },     { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },     { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },     { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },     { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },     { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },     { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },     { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },     { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },     { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },   ]
          */
         "data": any[];
         /**
@@ -2271,20 +2271,24 @@ export namespace Components {
           * @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' },   ]
          */
         "rowActions": RowAction[];
+        /**
+          * @default 'id'
+         */
+        "rowKey": string | ((row: any) => string);
         /**
           * @default true
          */
         "showActionsColumn": boolean;
         /**
-          * @default true
+          * @default false
          */
         "showCheckbox": boolean;
         /**
-          * @default true
+          * @default false
          */
         "stickyFirstColumn": boolean;
         /**
-          * @default true
+          * @default false
          */
         "stickyLastColumn": boolean;
         /**
@@ -3814,13 +3818,17 @@ declare global {
         new (): HTMLGbTabButtonBaseElement;
     };
     interface HTMLGbTableElementEventMap {
-        "rowActionClick": { action: string; row: any };
+        "rowActionClicked": { action: string; row: any };
         "pageItemSelected": { pageSize: any; pageNumber: number };
         "selectionChanged": any[];
         "inputValueChanged": void;
         "dateChange": string | string[];
         "exportClicked": { dataType: string; exportType: string };
         "rowClicked": { row: any };
+        "applyFilters": {
+    filters: any;
+    pagination: 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;
@@ -6442,11 +6450,11 @@ declare namespace LocalJSX {
          */
         "actionsType"?: 'none' | 'dropdown' | '';
         /**
-          * @default [     { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     { key: 'date', label: 'Date', 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' },     {       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, // Get status value from row         },       },     },   ]
+          * @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' },     {       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[];
         /**
-          * @default [     // {     //   id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',     //   date: 'Jan 1, 2022',     //   name: 'Emma Johnson',     //   role: 'Frontend Developer',     //   level: 'Today',     //   customer: 'John Doe',     //   amount: '$120.00',     //   status: 'Completed',     // },     { id: '#3002', date: 'Jan 2, 2022', name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },     { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },     { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },     { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },     { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },     { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },     { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },     { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },     { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },     { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },     { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },     { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },     { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },     { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },     { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },     { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },     { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },     { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },     { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },     { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },     { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },     { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },     { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },     { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },     { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },     { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },     { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },     { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },     { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },   ]
+          * @default [     // {     //   id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',     //   date: 'Jan 1, 2022',     //   name: 'Emma Johnson',     //   role: 'Frontend Developer',     //   level: 'Today',     //   customer: 'John Doe',     //   amount: '$120.00',     //   status: 'Completed',     // },     // { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },     // { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },     // { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },     // { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },     // { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },     { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },     { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },     { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },     { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },     { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },     { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },     { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },     { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },     { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },     { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },     { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },     { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },     { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },     { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },     { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },     { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },     { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },     { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },     { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },     { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },     { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },     { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },     { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },     { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },     { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },     { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },     { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },     { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },   ]
          */
         "data"?: any[];
         /**
@@ -6485,11 +6493,15 @@ declare namespace LocalJSX {
           * @default false
          */
         "loading"?: boolean;
+        "onApplyFilters"?: (event: GbTableCustomEvent<{
+    filters: any;
+    pagination: any;
+  }>) => void;
         "onDateChange"?: (event: GbTableCustomEvent<string | string[]>) => void;
         "onExportClicked"?: (event: GbTableCustomEvent<{ dataType: string; exportType: string }>) => void;
         "onInputValueChanged"?: (event: GbTableCustomEvent<void>) => void;
         "onPageItemSelected"?: (event: GbTableCustomEvent<{ pageSize: any; pageNumber: number }>) => void;
-        "onRowActionClick"?: (event: GbTableCustomEvent<{ action: string; row: any }>) => void;
+        "onRowActionClicked"?: (event: GbTableCustomEvent<{ action: string; row: any }>) => void;
         "onRowClicked"?: (event: GbTableCustomEvent<{ row: any }>) => void;
         "onSelectionChanged"?: (event: GbTableCustomEvent<any[]>) => void;
         /**
@@ -6506,20 +6518,24 @@ declare namespace LocalJSX {
           * @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' },   ]
          */
         "rowActions"?: RowAction[];
+        /**
+          * @default 'id'
+         */
+        "rowKey"?: string | ((row: any) => string);
         /**
           * @default true
          */
         "showActionsColumn"?: boolean;
         /**
-          * @default true
+          * @default false
          */
         "showCheckbox"?: boolean;
         /**
-          * @default true
+          * @default false
          */
         "stickyFirstColumn"?: boolean;
         /**
-          * @default true
+          * @default false
          */
         "stickyLastColumn"?: boolean;
         /**

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

@@ -76,6 +76,8 @@ export type MobilePosition = 'top_left' | 'top_right' | 'bottom_left' | 'bottom_
 export interface TableColumn {
     key: string;
     label: string;
+    transform?: {};
+    value?: (row: any) => any;
     supportingText?: string | ((row: any) => string);
     width?: string;
     align?: 'left' | 'center' | 'right';
@@ -127,6 +129,7 @@ export type PortalPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bott
 export interface FilterConfig {
     title: string;
     enableDateRange: boolean;
+    dateRangeLabel?: string;
     showClearButton?: boolean;
     additionalFields?: {
         tag: string;

package/package.json

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

package/dist/components/p-3Du3w-pS.js.map

@@ -1 +0,0 @@
-{"file":"p-3Du3w-pS.js","mappings":";;AAAA,MAAM,eAAe,GAAG,8zuEAA8zuE;;MCQz0uE,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQ2B,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AA0ClD;IAvCS,iBAAiB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;AAC5B,YAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;YAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;;IAIzC,MAAM,GAAA;QACJ,OAAO;AACL,YAAA,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,gBAAgB,EAAC,KAAK,EAAE,CAAG,EAAA,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAG,IAAA,EAAA,CAAA;YACjG,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EACvC,KAAK,EAAE,CAAG,EAAA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAI,CAAA,EAAA,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,EACpE,OAAO,EAAC,gBAAgB,EAEvB,EAAA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IACvC,WAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,CAAuB,oBAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EACtI,CACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,0GAA0G,EAC5G,MAAM,EAAC,SAAS,EACH,cAAA,EAAA,KAAK,EACH,gBAAA,EAAA,OAAO,EACN,iBAAA,EAAA,OAAO,EACvB,CAAA,CACE,IACJ,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,UAAU,IAC3C,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,CAAwB,qBAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EACvI,CACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,0GAA0G,EAC5G,MAAM,EAAC,SAAS,kBACH,KAAK,EAAA,gBAAA,EACH,OAAO,EACN,iBAAA,EAAA,OAAO,GACvB,CACE,IACJ,IAAI,CACF;SACT;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-toggle-base/gb-toggle-base.css?tag=gb-toggle-base&encapsulation=shadow","src/components/gb-toggle-base/gb-toggle-base.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n/* Basic Styles for the Toggle */\r\ninput[type=\"checkbox\"] {\r\n  display: none; /* Hide native checkbox */\r\n}\r\n\r\nlabel {\r\n    display: inline-block;\r\n    border-radius: var(--rounded-lg);\r\n    position: relative;\r\n    background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n    cursor: pointer;\r\n    transition: background-color 0.3s ease;\r\n    padding: 0.125rem;\r\n}\r\n\r\nlabel.sm{\r\n    width: 2.25rem;\r\n    height: 1.25rem;\r\n}\r\n\r\nlabel.md{\r\n    width: 2.75rem;\r\n    height: 1.5rem;\r\n}\r\n\r\nlabel.pressed.default {\r\n  background-color: var(--color-background-selected, #075db2);\r\n}\r\n\r\nlabel.disabled{\r\n    background-color: var(--color-background-disabled, #F6F8FA);\r\n}\r\n\r\nlabel.pressed.disabled {\r\n  background-color: var(--color-background-gray-subtle, #E3E8EF); /* Light gray background when pressed and in disabled state */\r\n}\r\n\r\n/* Circle inside the toggle */\r\nlabel::before {\r\n  content: '';\r\n  position: absolute;\r\n  background-color: var(--color-icon-inverse, #FFFFFF);\r\n  border-radius: 50%;\r\n  transition: transform 0.3s ease;\r\n  filter: drop-shadow(0px 1px 2px rgba(16, 24, 40, 0.06)) drop-shadow(0px 1px 3px rgba(16, 24, 40, 0.10));\r\n}\r\n\r\nlabel.sm::before{\r\n  width: 1rem;\r\n  height: 1rem;\r\n  top: 0.25rem;\r\n  left: 0.25rem;\r\n}\r\n\r\nlabel.md::before{\r\n  width: 1.25rem;\r\n  height: 1.25rem;\r\n  top: 0.24rem;\r\n  left: 0.25rem;\r\n}\r\n\r\nlabel.sm.pressed::before {\r\n  transform: translateX(16px); /* Move the white circle to the right when pressed */\r\n}\r\n\r\nlabel.md.pressed::before {\r\n  transform: translateX(20px); /* Move the white circle to the right when pressed */\r\n}\r\n\r\nlabel.disabled::before {\r\n  background-color: var(--color-icon-disabled, #CDD5DF); /* Change circle background when disabled */\r\n}\r\n\r\nlabel.pressed.disabled::before {\r\n  background-color: var(--color-background-gray-bold, #9AA4B2); /* Change circle background when disabled */\r\n}\r\n\r\n/* Checkmark SVG Styles */\r\n.default_checked_svg,\r\n.disabled_checked_svg {\r\n  position: absolute;\r\n  transform: translate(-50%, -50%);\r\n  width: 12px;\r\n  height: 12px;\r\n  display: none; /* Hidden by default */\r\n}\r\n\r\n.pressed .default_checked_svg {\r\n  display: block; /* Show checkmark when pressed and default */\r\n}\r\n\r\n.pressed .disabled_checked_svg {\r\n  display: block; /* Show checkmark when pressed and disabled */\r\n}\r\n\r\n.default_checked_svg.sm,\r\n.disabled_checked_svg.sm{\r\n    top: 0.75rem;\r\n    right: 0;\r\n}\r\n\r\n.default_checked_svg.md,\r\n.disabled_checked_svg.md{\r\n    top: 0.85rem;\r\n    right: 0.1rem;\r\n}\r\n\r\n\r\n","import { Component, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\nimport { GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-toggle-base',\r\n  styleUrl: 'gb-toggle-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbToggleBase {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() state: StateEnum;\r\n  @Prop({ mutable: true }) pressed: boolean = false;\r\n  @Event() toggleClicked: EventEmitter<boolean>;\r\n\r\n  private handleToggleClick() {\r\n    if (this.state === 'default') {\r\n      this.pressed = !this.pressed;\r\n      this.toggleClicked.emit(this.pressed);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return [\r\n      <input type=\"checkbox\" id=\"customCheckbox\" class={`${this.pressed ? 'pressed' : ''}`} readonly />,\r\n      <label\r\n        onClick={() => this.handleToggleClick()}\r\n        class={`${this.size} ${this.state} ${this.pressed ? 'pressed' : ''}`}\r\n        htmlFor=\"customCheckbox\"\r\n      >\r\n        {this.pressed && this.state === 'default' ? (\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" class={`default_checked_svg ${this.size}`}>\r\n            <path\r\n              d=\"M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667\"\r\n              stroke=\"#075DB2\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        ) : this.pressed && this.state === 'disabled' ? (\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" class={`disabled_checked_svg ${this.size}`}>\r\n            <path\r\n              d=\"M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667\"\r\n              stroke=\"#E3E8EF\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        ) : null}\r\n      </label>,\r\n    ];\r\n  }\r\n}"],"version":3}

package/dist/components/p-BAGZEYW2.js.map

@@ -1 +0,0 @@
-{"file":"p-BAGZEYW2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-filter-modal/gb-filter-modal.css?tag=gb-filter-modal&encapsulation=shadow","src/components/gb-filter-modal/gb-filter-modal.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.filter_modal_wrapper {\r\n  background-color: white;\r\n  width: 27.5rem;\r\n  height: 100vh;\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-radius: var(--rounded-none);\r\n  background: var(--color-surface, #ffffff);\r\n  box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.filter_modal_header {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  align-self: stretch;\r\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  position: relative;\r\n}\r\n\r\n.filter_modal_content {\r\n  display: flex;\r\n  padding: var(--spacing-5) var(--spacing-6) var(--spacing-5) var(--spacing-16);\r\n  align-items: flex-start;\r\n  gap: 1rem;\r\n  align-self: stretch;\r\n}\r\n\r\n.close_button {\r\n  position: absolute;\r\n  left: 1rem;\r\n  bottom: 0.5rem;\r\n}\r\n\r\n.filter_content_container {\r\n  display: flex;\r\n  flex: 1 0 0;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  gap: 0.5rem;\r\n  align-self: stretch;\r\n}\r\n\r\n.filter_content {\r\n  display: flex;\r\n  padding: var(--spacing-4) 1.5rem;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-6);\r\n  flex: 1 0 0;\r\n}\r\n\r\n.field {\r\n  width: 100%;\r\n}\r\n\r\n.filter_modal_actions {\r\n  display: flex;\r\n  padding: var(--spacing-none) 0 0 0;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  align-self: stretch;\r\n  border-top: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.modal_actions_content {\r\n  display: flex;\r\n  padding: var(--spacing-4) var(--spacing-6);\r\n  align-items: center;\r\n  gap: var(--spacing-5);\r\n  align-self: stretch;\r\n}\r\n\r\n.btn {\r\n  width: 100%;\r\n}\r\n","import { Component, Prop, State, Event, EventEmitter, h, Fragment } from '@stencil/core';\r\nimport { FilterConfig } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-filter-modal',\r\n  styleUrl: 'gb-filter-modal.css',\r\n  shadow: true,\r\n})\r\nexport class GbFilterModal {\r\n  @Prop() filterConfig: FilterConfig = {\r\n    title: 'Filter',\r\n    enableDateRange: true,\r\n    showClearButton: true,\r\n    additionalFields: [\r\n      {\r\n        tag: 'gb-input-dropdown',\r\n        key: 'approvalStatus',\r\n        event: 'dropdownItemSelected',\r\n        props: {\r\n          type: 'tags',\r\n          icon: false,\r\n          showLabel: true,\r\n          label: 'Approval status',\r\n          placeholder: 'Select approval status',\r\n          items: ['Draft', 'Pending', 'Approved', 'Rejected'],\r\n          destructive: false,\r\n        },\r\n        default: {\r\n          value: [],\r\n        },\r\n      },\r\n      {\r\n        tag: 'gb-slider',\r\n        key: 'amountRange',\r\n        event: 'thumbValueChanged',\r\n        props: {\r\n          showHeading: true,\r\n          heading: 'Amount range',\r\n        },\r\n        default: {\r\n          leftControl: 50,\r\n          rightControl: 100,\r\n        },\r\n      },\r\n      {\r\n        tag: 'gb-input-dropdown',\r\n        key: 'disbursementStatus',\r\n        event: 'dropdownItemSelected',\r\n        props: {\r\n          type: 'default',\r\n          showLabel: true,\r\n          label: 'Disbursement status',\r\n          placeholder: 'Select disbursement status',\r\n          items: ['Disbursed', 'Not Disbursed'],\r\n        },\r\n      },\r\n      //   {\r\n      //     tag: 'gb-input-dropdown',\r\n      //     key: 'facilityCategory',\r\n      //     props: {\r\n      //       showLabel: true,\r\n      //       label: 'Facility category',\r\n      //       placeholder: 'Select facility category',\r\n      //       items: ['Retail', 'Commercial', 'Corporate'],\r\n      //     },\r\n      //   },\r\n    ],\r\n    initialValues: {\r\n      pageNumber: 1,\r\n      pageSize: 10,\r\n    },\r\n  };\r\n  @State() formValues: Record<string, any> = {};\r\n  @State() renderKey = 0;\r\n  @Event() applyFilters: EventEmitter<Record<string, any>>;\r\n  @Event() clearFilters: EventEmitter<void>;\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  componentWillLoad() {\r\n    this.formValues = {\r\n      ...(this.filterConfig.initialValues || {}),\r\n    };\r\n\r\n    // this.filterConfig.additionalFields?.forEach(field => {\r\n    //   if (this.formValues[field.key] === undefined) {\r\n    //     this.formValues[field.key] = null;\r\n    //   }\r\n    // });\r\n\r\n    if (this.filterConfig.enableDateRange) {\r\n      this.formValues.startDate = null;\r\n      this.formValues.endDate = null;\r\n    }\r\n  }\r\n\r\n  handleFieldChange(key: string, value: any) {\r\n    this.formValues = {\r\n      ...this.formValues,\r\n      [key]: value,\r\n    };\r\n\r\n  }\r\n\r\n  handleClearClick() {\r\n    const resetValues = {\r\n      ...(this.filterConfig.initialValues || {}),\r\n    };\r\n\r\n    this.filterConfig.additionalFields?.forEach(field => {\r\n      resetValues[field.key] = field.default ?? null;\r\n    });\r\n\r\n    this.formValues = resetValues;\r\n    this.renderKey++;\r\n  }\r\n\r\n  handleApplyClick() {\r\n    const { pageNumber, pageSize, ...filters } = this.formValues;\r\n    // console.log({\r\n    //   filters,\r\n    //   pagination: {\r\n    //     pageNumber: pageNumber ?? 1,\r\n    //     pageSize: pageSize ?? 10,\r\n    //   },\r\n    // });\r\n\r\n    this.applyFilters.emit({\r\n      filters,\r\n      pagination: {\r\n        pageNumber: pageNumber ?? 1,\r\n        pageSize: pageSize ?? 10,\r\n      },\r\n    });\r\n  }\r\n\r\n  capitalize(str: string) {\r\n    return str.charAt(0).toUpperCase() + str.slice(1);\r\n  }\r\n\r\n  emitCloseEvent() {\r\n    this.close.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"filter_modal_wrapper\">\r\n        <div class=\"filter_modal_header\">\r\n          <div class=\"filter_modal_content\">\r\n            <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.emitCloseEvent()}></gb-button-close>\r\n            <p class=\"display-xs-semi-bold\">{this.filterConfig.title}</p>\r\n          </div>\r\n        </div>\r\n        <div class=\"filter_content_container\">\r\n          <div class=\"filter_content\" key={this.renderKey}>\r\n            {this.filterConfig.additionalFields && (\r\n              <>\r\n                {this.filterConfig.additionalFields.map(field => {\r\n                  const Tag = field.tag;\r\n\r\n                  const eventHandler = {\r\n                    [`on${this.capitalize(field.event)}`]: (e: CustomEvent) => this.handleFieldChange(field.key, e.detail),\r\n                  };\r\n\r\n                  return (\r\n                    <div class=\"field\">\r\n                      <Tag {...field.props} {...eventHandler} />\r\n                    </div>\r\n                  );\r\n                })}\r\n              </>\r\n            )}\r\n          </div>\r\n        </div>\r\n        <div class=\"filter_modal_actions\">\r\n          <div class=\"modal_actions_content\">\r\n            <div class=\"btn\">\r\n              <gb-button size=\"xl\" hierarchy=\"secondary_gray\" icon=\"default\" onClick={() => this.handleClearClick()}>\r\n                <p>Clear filter</p>\r\n              </gb-button>\r\n            </div>\r\n            <div class=\"btn\">\r\n              <gb-button size=\"xl\" hierarchy=\"primary\" icon=\"default\" onClick={() => this.handleApplyClick()}>\r\n                <p>Apply</p>\r\n              </gb-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}