globuswebcomponents 2.8.11 → 2.9.0

package/dist/types/components.d.ts

@@ -5,9 +5,9 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { ArrowPositions, BadgeIconTypes, BadgeTypes, BorderWeights, BreakPoints, ButtonGroupTypes, CheckBoxVariants, CloseButtonPositions, ColorTypes, DetailCellType, DropdownListGroup, DropdownRoles, DropdownTypes, FileIconStyles, FileIconTypes, FileUploadIconType, FileUploadStates, GeneralBackgroundCategories, GeneralColors, GeneralHierarchies, GeneralSizes, GeneralStyles, IllustrationTypes, InputFieldTypes, MetricFeaturedIconTypes, Notification, OnlineIndicatorStates, PaginationDotTypes, PaginationNumberShapes, PaginationTypes, PatternTypes, ProgressStepStates, ProgressStepStatus, ProgressStepTypes, RowAction, StateEnum, StateType, StepperType, TableCellTypes, TableColumn, TabTypes, ThemeTypes } from "./models/reusableModels";
+import { ArrowPositions, BadgeIconTypes, BadgeTypes, BorderWeights, BreakPoints, ButtonGroupTypes, CheckBoxVariants, CloseButtonPositions, ColorTypes, DetailCellType, DropdownListGroup, DropdownOption, DropdownRoles, DropdownTypes, FileIconStyles, FileIconTypes, FileUploadIconType, FileUploadStates, GeneralBackgroundCategories, GeneralColors, GeneralHierarchies, GeneralSizes, GeneralStyles, IllustrationTypes, InputFieldTypes, MetricFeaturedIconTypes, Notification, OnlineIndicatorStates, PaginationDotTypes, PaginationNumberShapes, PaginationTypes, PatternTypes, PortalPlacement, ProgressStepStates, ProgressStepStatus, ProgressStepTypes, RowAction, StateEnum, StateType, StepperType, TableCellTypes, TableColumn, TabTypes, ThemeTypes } from "./models/reusableModels";
 import { StateType as StateType1, ThemeTypes as ThemeTypes1 } from "./components";
-export { ArrowPositions, BadgeIconTypes, BadgeTypes, BorderWeights, BreakPoints, ButtonGroupTypes, CheckBoxVariants, CloseButtonPositions, ColorTypes, DetailCellType, DropdownListGroup, DropdownRoles, DropdownTypes, FileIconStyles, FileIconTypes, FileUploadIconType, FileUploadStates, GeneralBackgroundCategories, GeneralColors, GeneralHierarchies, GeneralSizes, GeneralStyles, IllustrationTypes, InputFieldTypes, MetricFeaturedIconTypes, Notification, OnlineIndicatorStates, PaginationDotTypes, PaginationNumberShapes, PaginationTypes, PatternTypes, ProgressStepStates, ProgressStepStatus, ProgressStepTypes, RowAction, StateEnum, StateType, StepperType, TableCellTypes, TableColumn, TabTypes, ThemeTypes } from "./models/reusableModels";
+export { ArrowPositions, BadgeIconTypes, BadgeTypes, BorderWeights, BreakPoints, ButtonGroupTypes, CheckBoxVariants, CloseButtonPositions, ColorTypes, DetailCellType, DropdownListGroup, DropdownOption, DropdownRoles, DropdownTypes, FileIconStyles, FileIconTypes, FileUploadIconType, FileUploadStates, GeneralBackgroundCategories, GeneralColors, GeneralHierarchies, GeneralSizes, GeneralStyles, IllustrationTypes, InputFieldTypes, MetricFeaturedIconTypes, Notification, OnlineIndicatorStates, PaginationDotTypes, PaginationNumberShapes, PaginationTypes, PatternTypes, PortalPlacement, ProgressStepStates, ProgressStepStatus, ProgressStepTypes, RowAction, StateEnum, StateType, StepperType, TableCellTypes, TableColumn, TabTypes, ThemeTypes } from "./models/reusableModels";
 export { StateType as StateType1, ThemeTypes as ThemeTypes1 } from "./components";
 export namespace Components {
     interface GbActionPanel {
@@ -431,6 +431,7 @@ export namespace Components {
           * @default false
          */
         "event": boolean;
+        "getNativeButton": () => Promise<HTMLButtonElement | null>;
         /**
           * @default 'primary'
          */
@@ -741,7 +742,7 @@ export namespace Components {
          */
         "fullWidth": boolean;
         /**
-          * @default 'left'
+          * @default 'right'
          */
         "iconPosition": CloseButtonPositions;
         /**
@@ -1210,7 +1211,7 @@ export namespace Components {
         "fullWidth": boolean;
         "size": GeneralSizes;
         /**
-          * @default [     // {     //   name: 'All accounts',     //   index: 0,     //   badgeCount: '5',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },   ]
+          * @default [     // {     //   name: 'All accounts',     //   index: 0,     //   badgeCount: '5',     // },     // {     //   name: 'LCY Accounts',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'FCY',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },   ]
          */
         "tabs": { name: string; index: number; badgeCount?: string }[];
         "type": TabTypes;
@@ -1291,7 +1292,10 @@ export namespace Components {
           * @default false
          */
         "loading": boolean;
-        "menuPosition": 'top' | ' bottom';
+        /**
+          * @default 'bottom'
+         */
+        "menuPosition": 'top' | 'bottom';
         /**
           * @default ''
          */
@@ -1314,7 +1318,13 @@ export namespace Components {
           * @default false
          */
         "showSearchInput": boolean;
+        /**
+          * @default 'md'
+         */
         "size": GeneralSizes;
+        /**
+          * @default 'default'
+         */
         "state": 'default' | 'focused' | 'disabled' | 'filled';
         /**
           * @default false
@@ -1324,6 +1334,9 @@ export namespace Components {
           * @default false
          */
         "text": boolean;
+        /**
+          * @default 'default'
+         */
         "type": DropdownTypes;
         /**
           * @default [     // { name: 'Mock Item A', username: 1, selected: false },     // { name: 'Mock Item B', username: 2, selected: false },     // { name: 'Mock Item C', username: 3, selected: false },     // 45,     // 50,     // 20,     // 25,     // 90,     // 'Activated',     // 'Deactivated',     // 'Transaction Status',   ]
@@ -1742,15 +1755,16 @@ export namespace Components {
         "type": PatternTypes;
     }
     interface GbPortal {
+        "anchorEl"?: HTMLElement;
         "anchorId"?: string;
         /**
           * @default false
          */
         "open": boolean;
         /**
-          * @default 'bottom-start'
+          * @default 'bottom-end'
          */
-        "placement": any;
+        "placement": PortalPlacement;
     }
     interface GbProgressBar {
         "labelPosition": 'right' | 'bottom' | 'top_floating' | 'bottom_floating';
@@ -2189,25 +2203,65 @@ export namespace Components {
          */
         "actionsType": 'none' | 'dropdown' | '';
         /**
-          * @default [     { key: 'id', label: '#', width: '70px' },     { key: 'date', label: 'Date' },     { key: 'name', label: 'Name' },     { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     { key: 'level', label: 'Level' },     { key: 'customer', label: 'Customer' },     { key: 'amount', label: 'Amount' },     {       key: 'status',       label: 'Status',       cellComponent: 'gb-badge',       cellProps: row => ({         color: row.status === 'Completed' ? 'success' : 'error',         type: 'badge_modern',         size: 'sm',         icon: 'dot',       }),       cellSlots: row => <p>{row.status}</p>,     },     // {     //   key: '',     //   label: '',     //   cellComponent: 'gb-button',     //   width: '50px',     //   cellProps: () => ({     //     hierarchy: 'tertiary_gray',     //     size: 'sm',     //     icon: 'only',     //     iconLeading: true,     //     iconLeadingSwap: 'assets/more-horizontal.svg',     //   }),     // },   ]
+          * @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, mobile: { position: 'top_right' } },     { key: 'role', label: 'Role' },     { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },     {       key: 'status',       label: 'Status',       render: row => (         <gb-badge color={row.status === 'Completed' ? 'success' : 'error'} type="badge_modern" size="sm" icon="dot">           <p>{row.status}</p>         </gb-badge>       ),       mobile: { position: 'bottom_right' },     },     // {     //   key: '',     //   label: '',     //   cellComponent: 'gb-button',     //   width: '50px',     //   cellProps: () => ({     //     hierarchy: 'tertiary_gray',     //     size: 'sm',     //     icon: 'only',     //     iconLeading: true,     //     iconLeadingSwap: 'assets/more-horizontal.svg',     //   }),     // },   ]
          */
         "columns": TableColumn[];
         /**
-          * @default [     {       id: '#3057',       date: 'Jan 3, 2022',       name: 'Emmanuel Kadiri',       role: 'Frontend developer',       level: 'Today',       customer: 'John Doe',       amount: '$120.00',       status: 'Completed',     },     {       id: '#3058',       date: 'Jan 4, 2022',       customer: 'Sarah Johnson',       amount: '$85.50',       status: 'Pending',     },     {       id: '#3059',       date: 'Jan 5, 2022',       customer: 'Michael Brown',       amount: '$230.75',       status: 'Cancelled',     },     {       id: '#3060',       date: 'Jan 6, 2022',       customer: 'Emily Davis',       amount: '$59.99',       status: 'Completed',     },     {       id: '#3061',       date: 'Jan 7, 2022',       customer: 'Daniel Wilson',       amount: '$410.00',       status: 'Pending',     },   ]
+          * @default [     {       id: '#3001',       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' },   ]
          */
         "data": any[];
         /**
-          * @default [{ label: 'View', action: 'view', 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: true },   ]
          */
-        "rowActions"?: RowAction[];
+        "dropdownOptions"?: DropdownOption[];
+        /**
+          * @default {     mainText: 'No data available',     supportingText: 'Try adjusting your filters or check back later.',     color: 'gray',     illustrationIcon: 'assets/alert-circle.svg',     theme: 'light',   }
+         */
+        "emptyStateConfig": { mainText: string; supportingText?: string; color?: GeneralColors; illustrationIcon?: string; theme?: ThemeTypes; primaryButtonIcon?: string };
+        /**
+          * @default {     paginationMode: 'internal',     entriesDropdownMenuPosition: 'top',     currentPage: 1,     pageSize: 10,     totalItems: null,   }
+         */
+        "paginationConfig": {
+    paginationMode: 'internal' | 'external';
+    entriesDropdownMenuPosition: 'top' | 'bottom';
+    currentPage?: number;
+    pageSize?: number;
+    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' },   ]
+         */
+        "rowActions": RowAction[];
+        /**
+          * @default true
+         */
+        "showActionsColumn": boolean;
         /**
           * @default false
          */
+        "showCheckbox": boolean;
+        /**
+          * @default true
+         */
         "stickyFirstColumn": boolean;
         /**
           * @default true
          */
         "stickyLastColumn": boolean;
+        /**
+          * @default {     tableHeading: false,     tableHeadingLabel: 'Suspicious outflows',     showDateFilter: true,     showFilter: true,     showColumnOptions: true,     showSearch: true,     showExport: true,     showRefreshButton: true,     datePickerMode: 'single',   }
+         */
+        "tableHeaderConfig": {
+    tableHeading: boolean;
+    tableHeadingLabel: string;
+    showDateFilter: boolean;
+    showFilter: boolean;
+    showColumnOptions: boolean;
+    showSearch: boolean;
+    showExport: boolean;
+    showRefreshButton: boolean;
+    datePickerMode: 'single' | 'range';
+  };
     }
     interface GbTableCell {
         "type": TableCellTypes;
@@ -2226,7 +2280,7 @@ export namespace Components {
          */
         "datePickerDisabled": boolean;
         /**
-          * @default 'right'
+          * @default 'left'
          */
         "datePickerDropdownPosition": CloseButtonPositions;
         /**
@@ -2307,7 +2361,7 @@ export namespace Components {
          */
         "showSearch": boolean;
         /**
-          * @default true
+          * @default false
          */
         "tableHeading": boolean;
         /**
@@ -3690,6 +3744,9 @@ declare global {
     interface HTMLGbTableElementEventMap {
         "rowActionClick": { action: string; row: any };
         "pageItemSelected": { pageSize: any; pageNumber: number };
+        "selectionChanged": any[];
+        "inputValueChanged": void;
+        "dateChange": string | string[];
     }
     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;
@@ -4802,7 +4859,7 @@ declare namespace LocalJSX {
          */
         "fullWidth"?: boolean;
         /**
-          * @default 'left'
+          * @default 'right'
          */
         "iconPosition"?: CloseButtonPositions;
         /**
@@ -5289,7 +5346,7 @@ declare namespace LocalJSX {
         "onTabItemClicked"?: (event: GbHorizontalTabsCustomEvent<number>) => void;
         "size"?: GeneralSizes;
         /**
-          * @default [     // {     //   name: 'All accounts',     //   index: 0,     //   badgeCount: '5',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },   ]
+          * @default [     // {     //   name: 'All accounts',     //   index: 0,     //   badgeCount: '5',     // },     // {     //   name: 'LCY Accounts',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'FCY',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },   ]
          */
         "tabs"?: { name: string; index: number; badgeCount?: string }[];
         "type"?: TabTypes;
@@ -5367,7 +5424,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "loading"?: boolean;
-        "menuPosition"?: 'top' | ' bottom';
+        /**
+          * @default 'bottom'
+         */
+        "menuPosition"?: 'top' | 'bottom';
         "onDropdownItemSelected"?: (event: GbInputDropdownCustomEvent<any>) => void;
         "onInputValueChanged"?: (event: GbInputDropdownCustomEvent<string>) => void;
         /**
@@ -5392,7 +5452,13 @@ declare namespace LocalJSX {
           * @default false
          */
         "showSearchInput"?: boolean;
+        /**
+          * @default 'md'
+         */
         "size"?: GeneralSizes;
+        /**
+          * @default 'default'
+         */
         "state"?: 'default' | 'focused' | 'disabled' | 'filled';
         /**
           * @default false
@@ -5402,6 +5468,9 @@ declare namespace LocalJSX {
           * @default false
          */
         "text"?: boolean;
+        /**
+          * @default 'default'
+         */
         "type"?: DropdownTypes;
         /**
           * @default [     // { name: 'Mock Item A', username: 1, selected: false },     // { name: 'Mock Item B', username: 2, selected: false },     // { name: 'Mock Item C', username: 3, selected: false },     // 45,     // 50,     // 20,     // 25,     // 90,     // 'Activated',     // 'Deactivated',     // 'Transaction Status',   ]
@@ -5831,15 +5900,16 @@ declare namespace LocalJSX {
         "type"?: PatternTypes;
     }
     interface GbPortal {
+        "anchorEl"?: HTMLElement;
         "anchorId"?: string;
         /**
           * @default false
          */
         "open"?: boolean;
         /**
-          * @default 'bottom-start'
+          * @default 'bottom-end'
          */
-        "placement"?: any;
+        "placement"?: PortalPlacement;
     }
     interface GbProgressBar {
         "labelPosition"?: 'right' | 'bottom' | 'top_floating' | 'bottom_floating';
@@ -6289,27 +6359,70 @@ declare namespace LocalJSX {
          */
         "actionsType"?: 'none' | 'dropdown' | '';
         /**
-          * @default [     { key: 'id', label: '#', width: '70px' },     { key: 'date', label: 'Date' },     { key: 'name', label: 'Name' },     { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     // { key: 'role', label: 'Role' },     { key: 'level', label: 'Level' },     { key: 'customer', label: 'Customer' },     { key: 'amount', label: 'Amount' },     {       key: 'status',       label: 'Status',       cellComponent: 'gb-badge',       cellProps: row => ({         color: row.status === 'Completed' ? 'success' : 'error',         type: 'badge_modern',         size: 'sm',         icon: 'dot',       }),       cellSlots: row => <p>{row.status}</p>,     },     // {     //   key: '',     //   label: '',     //   cellComponent: 'gb-button',     //   width: '50px',     //   cellProps: () => ({     //     hierarchy: 'tertiary_gray',     //     size: 'sm',     //     icon: 'only',     //     iconLeading: true,     //     iconLeadingSwap: 'assets/more-horizontal.svg',     //   }),     // },   ]
+          * @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, mobile: { position: 'top_right' } },     { key: 'role', label: 'Role' },     { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },     {       key: 'status',       label: 'Status',       render: row => (         <gb-badge color={row.status === 'Completed' ? 'success' : 'error'} type="badge_modern" size="sm" icon="dot">           <p>{row.status}</p>         </gb-badge>       ),       mobile: { position: 'bottom_right' },     },     // {     //   key: '',     //   label: '',     //   cellComponent: 'gb-button',     //   width: '50px',     //   cellProps: () => ({     //     hierarchy: 'tertiary_gray',     //     size: 'sm',     //     icon: 'only',     //     iconLeading: true,     //     iconLeadingSwap: 'assets/more-horizontal.svg',     //   }),     // },   ]
          */
         "columns"?: TableColumn[];
         /**
-          * @default [     {       id: '#3057',       date: 'Jan 3, 2022',       name: 'Emmanuel Kadiri',       role: 'Frontend developer',       level: 'Today',       customer: 'John Doe',       amount: '$120.00',       status: 'Completed',     },     {       id: '#3058',       date: 'Jan 4, 2022',       customer: 'Sarah Johnson',       amount: '$85.50',       status: 'Pending',     },     {       id: '#3059',       date: 'Jan 5, 2022',       customer: 'Michael Brown',       amount: '$230.75',       status: 'Cancelled',     },     {       id: '#3060',       date: 'Jan 6, 2022',       customer: 'Emily Davis',       amount: '$59.99',       status: 'Completed',     },     {       id: '#3061',       date: 'Jan 7, 2022',       customer: 'Daniel Wilson',       amount: '$410.00',       status: 'Pending',     },   ]
+          * @default [     {       id: '#3001',       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' },   ]
          */
         "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 },   ]
+         */
+        "dropdownOptions"?: DropdownOption[];
+        /**
+          * @default {     mainText: 'No data available',     supportingText: 'Try adjusting your filters or check back later.',     color: 'gray',     illustrationIcon: 'assets/alert-circle.svg',     theme: 'light',   }
+         */
+        "emptyStateConfig"?: { mainText: string; supportingText?: string; color?: GeneralColors; illustrationIcon?: string; theme?: ThemeTypes; primaryButtonIcon?: string };
+        "onDateChange"?: (event: GbTableCustomEvent<string | string[]>) => void;
+        "onInputValueChanged"?: (event: GbTableCustomEvent<void>) => void;
         "onPageItemSelected"?: (event: GbTableCustomEvent<{ pageSize: any; pageNumber: number }>) => void;
         "onRowActionClick"?: (event: GbTableCustomEvent<{ action: string; row: any }>) => void;
+        "onSelectionChanged"?: (event: GbTableCustomEvent<any[]>) => void;
         /**
-          * @default [{ label: 'View', action: 'view', disabled: true }]
+          * @default {     paginationMode: 'internal',     entriesDropdownMenuPosition: 'top',     currentPage: 1,     pageSize: 10,     totalItems: null,   }
+         */
+        "paginationConfig"?: {
+    paginationMode: 'internal' | 'external';
+    entriesDropdownMenuPosition: 'top' | 'bottom';
+    currentPage?: number;
+    pageSize?: number;
+    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' },   ]
          */
         "rowActions"?: RowAction[];
+        /**
+          * @default true
+         */
+        "showActionsColumn"?: boolean;
         /**
           * @default false
          */
+        "showCheckbox"?: boolean;
+        /**
+          * @default true
+         */
         "stickyFirstColumn"?: boolean;
         /**
           * @default true
          */
         "stickyLastColumn"?: boolean;
+        /**
+          * @default {     tableHeading: false,     tableHeadingLabel: 'Suspicious outflows',     showDateFilter: true,     showFilter: true,     showColumnOptions: true,     showSearch: true,     showExport: true,     showRefreshButton: true,     datePickerMode: 'single',   }
+         */
+        "tableHeaderConfig"?: {
+    tableHeading: boolean;
+    tableHeadingLabel: string;
+    showDateFilter: boolean;
+    showFilter: boolean;
+    showColumnOptions: boolean;
+    showSearch: boolean;
+    showExport: boolean;
+    showRefreshButton: boolean;
+    datePickerMode: 'single' | 'range';
+  };
     }
     interface GbTableCell {
         "type"?: TableCellTypes;
@@ -6328,7 +6441,7 @@ declare namespace LocalJSX {
          */
         "datePickerDisabled"?: boolean;
         /**
-          * @default 'right'
+          * @default 'left'
          */
         "datePickerDropdownPosition"?: CloseButtonPositions;
         /**
@@ -6415,7 +6528,7 @@ declare namespace LocalJSX {
          */
         "showSearch"?: boolean;
         /**
-          * @default true
+          * @default false
          */
         "tableHeading"?: boolean;
         /**

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

@@ -73,13 +73,18 @@ export interface Notification {
 }
 export type IllustrationTypes = 'cloud' | 'box' | 'documents' | 'credit_card';
 export type PatternTypes = 'circles' | 'grid' | 'grid_dot' | 'squares';
+export type MobilePosition = 'top_left' | 'top_right' | 'bottom_left' | 'bottom_right';
 export interface TableColumn {
     key: string;
     label: string;
     width?: string;
     align?: 'left' | 'center' | 'right';
     stickyRight?: boolean;
+    helpIcon?: boolean;
     sortable?: boolean;
+    sortType?: 'string' | 'number' | 'date';
+    sortComparator?: (a: any, b: any) => number;
+    render?: (row: any) => any;
     cellComponent?: string;
     cellActionType?: 'dropdown' | 'void';
     cellProps?: {
@@ -87,10 +92,21 @@ export interface TableColumn {
     };
     cellSlots?: JSX.Element | ((row: any) => JSX.Element);
     onClick?: () => void;
+    mobile?: {
+        position?: MobilePosition;
+    };
 }
 export interface RowAction {
     label: string;
     icon?: string;
     action: string;
     disabled?: boolean;
+    type?: 'button' | 'dropdown';
+}
+export interface DropdownOption {
+    label: string;
+    icon?: string;
+    action: string;
+    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';

package/package.json

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