globuswebcomponents 2.18.3 → 2.18.4

package/dist/cjs/reusableModels-_LRAKnsh.js.map

@@ -1 +1 @@
-{"version":3,"file":"reusableModels-_LRAKnsh.js","sources":["src/models/reusableModels.ts"],"sourcesContent":["export type GeneralSizes = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs' | 'profile_lg' | 'profile_md' | 'profile_sm';\r\n\r\nexport type GeneralHierarchies = 'primary' | 'secondary_gray' | 'secondary_color' | 'tertiary_gray' | 'tertiary_color' | 'link_gray' | 'link_color';\r\n\r\nexport enum StateEnum {\r\n  Default = 'default',\r\n  Disabled = 'disabled',\r\n}\r\n\r\nexport type ArrowPositions = 'bottom_center' | 'bottom_left' | 'bottom_right' | 'top_center' | 'left' | 'right' | 'none' | 'center';\r\n\r\nexport type CheckBoxVariants = 'checkbox' | 'check_circle' | 'radio';\r\n\r\nexport enum BorderWeights {\r\n  VeryLight = 'very_light',\r\n  Light = 'light',\r\n  Regular = 'regular',\r\n  Heavy = 'heavy',\r\n}\r\n\r\nexport enum OnlineIndicatorStates {\r\n  Online = 'online',\r\n  Offline = 'offline',\r\n}\r\n\r\nexport type BreakPoints = 'desktop' | 'mobile';\r\n\r\nexport type FileUploadIconType = 'solid' | 'outline';\r\n\r\nexport type FileUploadStates = 'default' | 'in_progress' | 'complete' | 'hover' | 'disabled' | 'error';\r\n\r\nexport type GeneralColors = 'default' | 'gray' | 'primary' | 'error' | 'warning' | 'success' | 'discovery' | 'information' | 'pink' | 'purple' | 'white';\r\n\r\nexport type PaginationNumberShapes = 'square' | 'circle';\r\n\r\nexport type PaginationTypes =\r\n  | 'page_default'\r\n  | 'page_minimal_center_aligned'\r\n  | 'card_default'\r\n  | 'card_minimal_right_aligned'\r\n  | 'card_minimal_left_aligned'\r\n  | 'card_minimal_center_aligned'\r\n  | 'card_button_group_right_aligned'\r\n  | 'card_button_group_left_aligned'\r\n  | 'card_button_group_center_aligned';\r\n\r\nexport type TabTypes =\r\n  | 'button_primary'\r\n  | 'button_gray'\r\n  | 'button_white'\r\n  | 'rounded_button_white'\r\n  | 'underline'\r\n  | 'underline_filled'\r\n  | 'line'\r\n  | 'button_white_border'\r\n  | 'rounded_button_white_border'\r\n  | 'button_gray_border';\r\n\r\nexport type GeneralBackgroundCategories = 'plain_background' | 'colored_background';\r\n\r\nexport type InputFieldTypes =\r\n  | 'default'\r\n  | 'icon_leading'\r\n  | 'leading_dropdown'\r\n  | 'trailing_dropdown'\r\n  | 'leading_text'\r\n  | 'payment_input'\r\n  | 'tags'\r\n  | 'trailing_button'\r\n  | 'password'\r\n  | 'password_icon_leading'\r\n  | 'count';\r\n\r\nexport type DropdownTypes = 'default' | 'icon_leading' | 'avatar_leading' | 'dot_leading' | 'checkbox' | 'search' | 'tags';\r\n\r\nexport type ColorTypes = 'gray' | 'blue' | 'cyan' | 'pink' | 'purple' | 'green' | 'yellow' | 'red' | 'white';\r\n\r\nexport type DropdownItemTypes = string | number | { name: string | number; username: string; selected?: boolean };\r\n\r\nexport type PaginationDotTypes = 'dot' | 'line';\r\n\r\nexport type FileIconStyles = 'default' | 'gray' | 'solid';\r\n\r\nexport type FileIconTypes = 'pdf' | 'csv' | 'jpg' | 'jpeg' | 'ppt' | 'pptx' | 'doc' | 'docx' | 'xls' | 'xlsx' | 'svg' | 'txt' | 'zip' | 'rar' | 'mp3' | 'mp4' | 'png' | 'empty';\r\n\r\nexport type TableCellTypes = 'text' | 'lead_text' | 'lead_checkbox' | 'badge';\r\n\r\nexport type ProgressStepStatus = 'incomplete' | 'current' | 'complete';\r\n\r\nexport type ProgressStepTypes = 'icon_only' | 'icon_left' | 'icon_top' | 'text_line' | 'featured_icon_left' | 'featured_icon_top';\r\n\r\nexport type ProgressStepStates = 'default' | 'destructive';\r\n\r\nexport type BadgeTypes = 'pill_color' | 'pill_outline' | 'badge_color' | 'badge_modern';\r\n\r\nexport type GeneralStyles = 'standard' | 'compact';\r\n\r\nexport type StateType = 'default' | 'disabled' | 'applied' | 'loading' | 'open';\r\n\r\nexport type ButtonGroupTypes = 'false' | 'leading' | 'only' | 'dot' | 'checkbox';\r\n\r\nexport type ThemeTypes = 'system' | 'light' | 'dark';\r\n\r\nexport type BadgeIconTypes = 'dot' | 'avatar' | 'icon_leading' | 'icon_trailing' | 'country' | 'only' | 'false';\r\n\r\nexport type DropdownRoles = { badgeLabel: string; badgeColor: GeneralColors; badgeType: BadgeTypes };\r\n\r\nexport type StepperType = {\r\n  state: ProgressStepStates;\r\n  status: ProgressStepStatus;\r\n  label?: string;\r\n  supportingText?: string;\r\n};\r\n\r\nexport type DetailCellType = 'information' | 'document' | 'status' | 'button';\r\n\r\nexport type MetricFeaturedIconTypes = 'glassmorphism' | 'circular_filled';\r\n\r\nexport interface DropdownListGroup {\r\n  icon: string;\r\n  label: string;\r\n  shortcut: string;\r\n}\r\n\r\nexport type CloseButtonPositions = 'left' | 'right';\r\n\r\nexport interface Notification {\r\n  label: string;\r\n  time: string;\r\n  desc: string;\r\n  icon: string;\r\n}\r\n\r\nexport type IllustrationTypes = 'cloud' | 'box' | 'documents' | 'credit_card';\r\n\r\nexport type PatternTypes = 'circles' | 'grid' | 'grid_dot' | 'squares';\r\n\r\nexport type MobilePosition = 'top_left' | 'top_right' | 'bottom_left' | 'bottom_right';\r\n\r\nexport interface TableColumn {\r\n  key: string;\r\n  label: string;\r\n  value?: (row: any) => any;\r\n  supportingText?: string | ((row: any) => string);\r\n  width?: string;\r\n  align?: 'left' | 'center' | 'right';\r\n  helpIcon?: boolean;\r\n  sortable?: boolean;\r\n  sortType?: 'string' | 'number' | 'date';\r\n  visible?: boolean;\r\n  cellComponent?: string;\r\n  searchable?: boolean;\r\n  cellProps?: ((row: any) => { [key: string]: any }) | { [key: string]: any };\r\n  cellEvent?: string | string[];\r\n  hasAvatar?: boolean;\r\n  cellAvatar?: {\r\n    props?: {};\r\n    slots?: {\r\n      initials?: string | ((row: any) => string | any);\r\n      image?: string | ((row: any) => string | any);\r\n    };\r\n  };\r\n  cellSlots?: {\r\n    default?: {\r\n      tag?: string; // e.g., 'p', 'span' to wrap content\r\n      content: (row: any) => string | any; // Function to get slot content\r\n    };\r\n    named?: {\r\n      [slotName: string]: {\r\n        tag: string; // e.g., 'p', 'h1', 'span'\r\n        content: (row: any) => string | any; // Function to get slot content\r\n      };\r\n    };\r\n  };\r\n  cellClass?: string | ((row: any) => string);\r\n  cellStyle?: { [key: string]: string } | ((row: any) => { [key: string]: string });\r\n  splitCell?: {\r\n    left: (row: any) => string | number;\r\n    right: (row: any) => string | number;\r\n    separator?: string;\r\n    leftStyle?: (row: any) => { [key: string]: string };\r\n    rightStyle?: (row: any) => { [key: string]: string };\r\n  };\r\n  mobile?: {\r\n    position?: MobilePosition;\r\n  };\r\n  gridCard?: {\r\n    buttonIcon?: string;\r\n    buttonText?: string;\r\n  };\r\n}\r\n\r\nexport interface RowAction {\r\n  label?: string;\r\n  icon?: string;\r\n  action: string; // emitted event name\r\n  disabled?: boolean;\r\n  destructive?: boolean;\r\n  type?: 'button' | 'dropdown' | 'custom';\r\n}\r\n\r\nexport interface DropdownOption {\r\n  label: string;\r\n  icon?: string;\r\n  action: string; // emitted event name\r\n  disabled?: boolean;\r\n}\r\n\r\nexport type PortalPlacement =\r\n  | 'top'\r\n  | 'top-start'\r\n  | 'top-end'\r\n  | 'bottom'\r\n  | 'bottom-start'\r\n  | 'bottom-end'\r\n  | 'left'\r\n  | 'left-start'\r\n  | 'left-end'\r\n  | 'right'\r\n  | 'right-start'\r\n  | 'right-end';\r\n\r\nexport interface FilterField {\r\n  tag: string;\r\n  columnKey?: string; // ← the actual row property to filter on\r\n  key: string | { start: string; end: string }; // date ranges need two keys\r\n  event: string | { start: string; end: string }; // date ranges need two events\r\n  label?: string;\r\n  props?: any;\r\n  default?: any;\r\n}\r\n\r\nexport interface FilterConfig {\r\n  mode?: 'internal' | 'external';\r\n  title?: string;\r\n  showClearButton?: boolean;\r\n  fields?: FilterField[];\r\n  initialValues?: {\r\n    pageNumber: number;\r\n    pageSize: number;\r\n  };\r\n  appliedValues?: Record<string, any>;\r\n}\r\n\r\nexport type IconStyles = 'stroke' | 'two-tone' | 'duotone' | 'solid' | 'bulk';\r\n\r\nexport type IconTypes = 'rounded' | 'sharp';\r\n\r\nexport type SubMenuChild = {\r\n  label: string;\r\n  icon: string;\r\n};\r\n\r\nexport type SubMenuItem = {\r\n  label: string;\r\n  icon: string;\r\n  children?: SubMenuChild[];\r\n};\r\n"],"names":["StateEnum","BorderWeights","OnlineIndicatorStates"],"mappings":";;AAIYA;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACvB,CAAC,EAHWA,iBAAS,KAATA,iBAAS,GAGpB,EAAA,CAAA,CAAA;AAMWC;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,YAAwB;AACxB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,aAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EALWA,qBAAa,KAAbA,qBAAa,GAKxB,EAAA,CAAA,CAAA;AAEWC;AAAZ,CAAA,UAAY,qBAAqB,EAAA;AAC/B,IAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EAHWA,6BAAqB,KAArBA,6BAAqB,GAGhC,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"reusableModels-_LRAKnsh.js","sources":["src/models/reusableModels.ts"],"sourcesContent":["export type GeneralSizes = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs' | 'profile_lg' | 'profile_md' | 'profile_sm';\r\n\r\nexport type GeneralHierarchies = 'primary' | 'secondary_gray' | 'secondary_color' | 'tertiary_gray' | 'tertiary_color' | 'link_gray' | 'link_color';\r\n\r\nexport enum StateEnum {\r\n  Default = 'default',\r\n  Disabled = 'disabled',\r\n}\r\n\r\nexport type ArrowPositions = 'bottom_center' | 'bottom_left' | 'bottom_right' | 'top_center' | 'left' | 'right' | 'none' | 'center';\r\n\r\nexport type CheckBoxVariants = 'checkbox' | 'check_circle' | 'radio';\r\n\r\nexport enum BorderWeights {\r\n  VeryLight = 'very_light',\r\n  Light = 'light',\r\n  Regular = 'regular',\r\n  Heavy = 'heavy',\r\n}\r\n\r\nexport enum OnlineIndicatorStates {\r\n  Online = 'online',\r\n  Offline = 'offline',\r\n}\r\n\r\nexport type BreakPoints = 'desktop' | 'mobile';\r\n\r\nexport type FileUploadIconType = 'solid' | 'outline';\r\n\r\nexport type FileUploadStates = 'default' | 'in_progress' | 'complete' | 'hover' | 'disabled' | 'error';\r\n\r\nexport type GeneralColors = 'default' | 'gray' | 'primary' | 'error' | 'warning' | 'success' | 'discovery' | 'information' | 'pink' | 'purple' | 'white';\r\n\r\nexport type PaginationNumberShapes = 'square' | 'circle';\r\n\r\nexport type PaginationTypes =\r\n  | 'page_default'\r\n  | 'page_minimal_center_aligned'\r\n  | 'card_default'\r\n  | 'card_minimal_right_aligned'\r\n  | 'card_minimal_left_aligned'\r\n  | 'card_minimal_center_aligned'\r\n  | 'card_button_group_right_aligned'\r\n  | 'card_button_group_left_aligned'\r\n  | 'card_button_group_center_aligned';\r\n\r\nexport type TabTypes =\r\n  | 'button_primary'\r\n  | 'button_gray'\r\n  | 'button_white'\r\n  | 'rounded_button_white'\r\n  | 'underline'\r\n  | 'underline_filled'\r\n  | 'line'\r\n  | 'button_white_border'\r\n  | 'rounded_button_white_border'\r\n  | 'button_gray_border';\r\n\r\nexport type GeneralBackgroundCategories = 'plain_background' | 'colored_background';\r\n\r\nexport type InputFieldTypes =\r\n  | 'default'\r\n  | 'icon_leading'\r\n  | 'leading_dropdown'\r\n  | 'trailing_dropdown'\r\n  | 'leading_text'\r\n  | 'payment_input'\r\n  | 'tags'\r\n  | 'trailing_button'\r\n  | 'password'\r\n  | 'password_icon_leading'\r\n  | 'count';\r\n\r\nexport type DropdownTypes = 'default' | 'icon_leading' | 'avatar_leading' | 'dot_leading' | 'checkbox' | 'search' | 'tags';\r\n\r\nexport type ColorTypes = 'gray' | 'blue' | 'cyan' | 'pink' | 'purple' | 'green' | 'yellow' | 'red' | 'white';\r\n\r\nexport type DropdownItemTypes = string | number | { name: string | number; username: string; selected?: boolean };\r\n\r\nexport type PaginationDotTypes = 'dot' | 'line';\r\n\r\nexport type FileIconStyles = 'default' | 'gray' | 'solid';\r\n\r\nexport type FileIconTypes = 'pdf' | 'csv' | 'jpg' | 'jpeg' | 'ppt' | 'pptx' | 'doc' | 'docx' | 'xls' | 'xlsx' | 'svg' | 'txt' | 'zip' | 'rar' | 'mp3' | 'mp4' | 'png' | 'empty';\r\n\r\nexport type TableCellTypes = 'text' | 'lead_text' | 'lead_checkbox' | 'badge';\r\n\r\nexport type ProgressStepStatus = 'incomplete' | 'current' | 'complete';\r\n\r\nexport type ProgressStepTypes = 'icon_only' | 'icon_left' | 'icon_top' | 'text_line' | 'featured_icon_left' | 'featured_icon_top';\r\n\r\nexport type ProgressStepStates = 'default' | 'destructive';\r\n\r\nexport type BadgeTypes = 'pill_color' | 'pill_outline' | 'badge_color' | 'badge_modern';\r\n\r\nexport type GeneralStyles = 'standard' | 'compact';\r\n\r\nexport type StateType = 'default' | 'disabled' | 'applied' | 'loading' | 'open';\r\n\r\nexport type ButtonGroupTypes = 'false' | 'leading' | 'only' | 'dot' | 'checkbox';\r\n\r\nexport type ThemeTypes = 'system' | 'light' | 'dark';\r\n\r\nexport type BadgeIconTypes = 'dot' | 'avatar' | 'icon_leading' | 'icon_trailing' | 'country' | 'only' | 'false';\r\n\r\nexport type DropdownRoles = { badgeLabel: string; badgeColor: GeneralColors; badgeType: BadgeTypes };\r\n\r\nexport type StepperType = {\r\n  state: ProgressStepStates;\r\n  status: ProgressStepStatus;\r\n  label?: string;\r\n  supportingText?: string;\r\n};\r\n\r\nexport type DetailCellType = 'information' | 'document' | 'status' | 'button';\r\n\r\nexport type MetricFeaturedIconTypes = 'glassmorphism' | 'circular_filled';\r\n\r\nexport interface DropdownListGroup {\r\n  icon: string;\r\n  label: string;\r\n  shortcut: string;\r\n}\r\n\r\nexport type CloseButtonPositions = 'left' | 'right';\r\n\r\nexport interface Notification {\r\n  label: string;\r\n  time: string;\r\n  desc: string;\r\n  icon: string;\r\n}\r\n\r\nexport type IllustrationTypes = 'cloud' | 'box' | 'documents' | 'credit_card';\r\n\r\nexport type PatternTypes = 'circles' | 'grid' | 'grid_dot' | 'squares';\r\n\r\nexport type MobilePosition = 'top_left' | 'top_right' | 'bottom_left' | 'bottom_right';\r\n\r\nexport interface TableColumn {\r\n  key: string;\r\n  label: string;\r\n  value?: (row: any) => any;\r\n  supportingText?: string | ((row: any) => string);\r\n  width?: string;\r\n  align?: 'left' | 'center' | 'right';\r\n  helpIcon?: boolean;\r\n  sortable?: boolean;\r\n  sortType?: 'string' | 'number' | 'date';\r\n  visible?: boolean;\r\n  cellComponent?: string;\r\n  searchable?: boolean;\r\n  cellProps?: ((row: any) => { [key: string]: any }) | { [key: string]: any };\r\n  cellEvent?: string | string[];\r\n  hasAvatar?: boolean;\r\n  cellAvatar?: {\r\n    props?: {};\r\n    slots?: {\r\n      initials?: string | ((row: any) => string | any);\r\n      image?: string | ((row: any) => string | any);\r\n    };\r\n  };\r\n  cellSlots?: {\r\n    default?: {\r\n      tag?: string; // e.g., 'p', 'span' to wrap content\r\n      content: (row: any) => string | any; // Function to get slot content\r\n    };\r\n    named?: {\r\n      [slotName: string]: {\r\n        tag: string; // e.g., 'p', 'h1', 'span'\r\n        content: (row: any) => string | any; // Function to get slot content\r\n      };\r\n    };\r\n  };\r\n  cellClass?: string | ((row: any) => string);\r\n  cellStyle?: { [key: string]: string } | ((row: any) => { [key: string]: string });\r\n  truncate?: boolean;\r\n  splitCell?: {\r\n    left: (row: any) => string | number;\r\n    right: (row: any) => string | number;\r\n    separator?: string;\r\n    leftStyle?: (row: any) => { [key: string]: string };\r\n    rightStyle?: (row: any) => { [key: string]: string };\r\n  };\r\n  mobile?: {\r\n    position?: MobilePosition;\r\n  };\r\n  gridCard?: {\r\n    buttonIcon?: string;\r\n    buttonText?: string;\r\n  };\r\n}\r\n\r\nexport interface RowAction {\r\n  label?: string;\r\n  icon?: string;\r\n  action: string; // emitted event name\r\n  disabled?: boolean;\r\n  destructive?: boolean;\r\n  type?: 'button' | 'dropdown' | 'custom';\r\n}\r\n\r\nexport interface DropdownOption {\r\n  label: string;\r\n  icon?: string;\r\n  action: string; // emitted event name\r\n  disabled?: boolean;\r\n}\r\n\r\nexport type PortalPlacement =\r\n  | 'top'\r\n  | 'top-start'\r\n  | 'top-end'\r\n  | 'bottom'\r\n  | 'bottom-start'\r\n  | 'bottom-end'\r\n  | 'left'\r\n  | 'left-start'\r\n  | 'left-end'\r\n  | 'right'\r\n  | 'right-start'\r\n  | 'right-end';\r\n\r\nexport interface FilterField {\r\n  tag: string;\r\n  columnKey?: string; // ← the actual row property to filter on\r\n  key: string | { start: string; end: string }; // date ranges need two keys\r\n  event: string | { start: string; end: string }; // date ranges need two events\r\n  label?: string;\r\n  props?: any;\r\n  default?: any;\r\n}\r\n\r\nexport interface FilterConfig {\r\n  mode?: 'internal' | 'external';\r\n  title?: string;\r\n  showClearButton?: boolean;\r\n  fields?: FilterField[];\r\n  initialValues?: {\r\n    pageNumber: number;\r\n    pageSize: number;\r\n  };\r\n  appliedValues?: Record<string, any>;\r\n}\r\n\r\nexport type IconStyles = 'stroke' | 'two-tone' | 'duotone' | 'solid' | 'bulk';\r\n\r\nexport type IconTypes = 'rounded' | 'sharp';\r\n\r\nexport type SubMenuChild = {\r\n  label: string;\r\n  icon: string;\r\n};\r\n\r\nexport type SubMenuItem = {\r\n  label: string;\r\n  icon: string;\r\n  children?: SubMenuChild[];\r\n};\r\n"],"names":["StateEnum","BorderWeights","OnlineIndicatorStates"],"mappings":";;AAIYA;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACvB,CAAC,EAHWA,iBAAS,KAATA,iBAAS,GAGpB,EAAA,CAAA,CAAA;AAMWC;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,YAAwB;AACxB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,aAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EALWA,qBAAa,KAAbA,qBAAa,GAKxB,EAAA,CAAA,CAAA;AAEWC;AAAZ,CAAA,UAAY,qBAAqB,EAAA;AAC/B,IAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EAHWA,6BAAqB,KAArBA,6BAAqB,GAGhC,EAAA,CAAA,CAAA;;"}

package/dist/collection/components/gb-button/readme.md

@@ -28,6 +28,13 @@
 | `tooltipText`       | `tooltip-text`        |             | `string`                                                                                                                      | `''`              |
 
 
+## Events
+
+| Event           | Description | Type                |
+| --------------- | ----------- | ------------------- |
+| `buttonClicked` |             | `CustomEvent<void>` |
+
+
 ## Methods
 
 ### `getNativeButton() => Promise<HTMLButtonElement | null>`

package/dist/collection/components/gb-sidebar/gb-sidebar.css

@@ -2651,6 +2651,7 @@
 .simple_sidebar_div {
   transition: all 0.3s ease-in-out;
   position: relative;
+  height: 100%;
 }
 .pattern {
   position: absolute;

package/dist/collection/components/gb-table/gb-table.css

@@ -2740,10 +2740,17 @@ thead {
 }
 .body_text {
   width: 100%;
+}
+.body_text.text_truncate {
+  display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.table_detail.cell_truncate {
+  max-width: 0;
+  overflow: hidden;
+}
 .text_and_supporting_text {
   display: flex;
   flex-direction: column;

package/dist/collection/components/gb-table/gb-table.js

@@ -4,7 +4,7 @@ export class GbTable {
     constructor() {
         this.loading = false;
         this.columns = [
-        // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },
+        // { key: 'id', label: '#', width: '10rem', sortable: true, sortType: 'string', truncate: true, mobile: { position: 'top_left' } },
         // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },
         // {
         //   key: 'name',
@@ -673,9 +673,9 @@ export class GbTable {
         if (col.hasAvatar) {
             const avatarInitials = typeof col.cellAvatar.slots.initials === 'function' ? col.cellAvatar.slots.initials(row) : col.cellAvatar.slots.initials;
             const avatarImage = typeof col.cellAvatar.slots.image === 'function' ? getAssetPath(col.cellAvatar.slots.image(row)) : getAssetPath(col.cellAvatar.slots.image);
-            return (h("div", { class: "avatar_cell" }, h("gb-avatar", { size: "sm", text: avatarInitials ? true : avatarImage ? false : null, "show-border": "false" }, h("h1", { slot: "initials" }, avatarInitials), h("img", { slot: "image", src: avatarImage })), h("p", { class: `body_text text-sm-regular ${resolvedClass}`, style: resolvedStyle }, value)));
+            return (h("div", { class: "avatar_cell" }, h("gb-avatar", { size: "sm", text: avatarInitials ? true : avatarImage ? false : null, "show-border": "false" }, h("h1", { slot: "initials" }, avatarInitials), h("img", { slot: "image", src: avatarImage })), h("p", { class: `body_text text-sm-regular ${col.truncate ? 'text_truncate' : ''} ${resolvedClass}`, style: resolvedStyle, title: col.truncate ? String(value !== null && value !== void 0 ? value : '') : undefined }, value)));
         }
-        return (h(Fragment, null, h("p", { class: `body_text text-sm-regular ${resolvedClass}`, style: resolvedStyle }, value), supporting && (h("div", { class: "supporting" }, h("p", { class: "text-xs-regular" }, supporting)))));
+        return (h(Fragment, null, h("p", { class: `body_text text-sm-regular ${col.truncate ? 'text_truncate' : ''} ${resolvedClass}`, style: resolvedStyle, title: col.truncate ? String(value !== null && value !== void 0 ? value : '') : undefined }, value), supporting && (h("div", { class: "supporting" }, h("p", { class: "text-xs-regular" }, supporting)))));
     }
     getCellValue(col, row) {
         if (col.value) {
@@ -934,7 +934,7 @@ export class GbTable {
                 this.toggleRow(row);
             } }))), this.internalColumns
             .filter(col => col.visible)
-            .map((col, index) => (h(Fragment, null, h("td", { style: { textAlign: col.align || 'left' }, class: `table_detail ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''} ${this.isScrollable ? 'has_border' : ''}` }, this.renderCell(col, row))))), this.showActionsColumn && (h("td", { class: { table_detail: true, actions_cell: true, sticky_right: this.stickyLastColumn, has_border: this.isScrollable }, style: { width: '50px' } }, h(Fragment, null, h("div", { class: "action_buttons" }, this.rowActions.map(action => (h(Fragment, null, action.type === 'dropdown' ? (h("gb-button", { id: `gb-table-trigger-${rowIndex}`, ref: el => (this.actionButtonRefs[rowIndex] = el), class: "dropdown_button", hierarchy: "tertiary_gray", size: "md", icon: "only", iconLeading: true, iconLeadingSwap: "assets/more-horizontal.svg", onClick: e => {
+            .map((col, index) => (h(Fragment, null, h("td", { style: { textAlign: col.align || 'left' }, class: `table_detail ${col.truncate ? 'cell_truncate' : ''} ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''} ${this.isScrollable ? 'has_border' : ''}` }, this.renderCell(col, row))))), this.showActionsColumn && (h("td", { class: { table_detail: true, actions_cell: true, sticky_right: this.stickyLastColumn, has_border: this.isScrollable }, style: { width: '50px' } }, h(Fragment, null, h("div", { class: "action_buttons" }, this.rowActions.map(action => (h(Fragment, null, action.type === 'dropdown' ? (h("gb-button", { id: `gb-table-trigger-${rowIndex}`, ref: el => (this.actionButtonRefs[rowIndex] = el), class: "dropdown_button", hierarchy: "tertiary_gray", size: "md", icon: "only", iconLeading: true, iconLeadingSwap: "assets/more-horizontal.svg", onClick: e => {
                 e.stopPropagation();
                 this.toggleDropdown(rowIndex);
             } })) : action.type === 'custom' ? (this.renderCustomAction(row)) : (h("gb-button", { hierarchy: "tertiary_gray", size: "md", icon: "only", destructive: action.destructive, iconLeading: true, iconLeadingSwap: action.icon, onClick: e => {
@@ -1158,16 +1158,16 @@ export class GbTable {
         window.removeEventListener('resize', this.checkViewport);
     }
     render() {
-        return (h("div", { key: '8c68636f7500ede9d90a74fbae682430d78389d2', class: `table_wrapper ${this.currentTableLayout}` }, this.tableHeaderConfig && (h("div", { key: 'f47b79ae8c7c475932c7a048e86f9c5fa3ca2b55', class: `table-header ${this.currentTableLayout}` }, h("gb-table-header", { key: '6018e4d34911558e9bc7b604d08f1d7f919825c0', type: this.tableHeaderConfig.type, mode: this.tableHeaderConfig.datePickerMode, "table-heading": this.tableHeaderConfig.tableHeading, "table-heading-label": this.tableHeaderConfig.tableHeadingLabel, "show-search": this.tableHeaderConfig.showSearch, "show-date-filter": this.tableHeaderConfig.showDateFilter, "show-filter": this.tableHeaderConfig.showFilter, "show-export": this.tableHeaderConfig.showExport, "show-column-options": this.tableHeaderConfig.showColumnOptions, "show-refresh-button": this.tableHeaderConfig.showRefreshButton, "input-placeholder": this.tableHeaderConfig.inputPlaceholder, "date-picker-placeholder": this.tableHeaderConfig.datePickerPlaceholder, "show-entire-data": this.tableHeaderConfig.showEntireData, "show-layout-toggle": this.tableHeaderConfig.showLayoutToggle, "filter-state": Object.keys(this.appliedFilterValues).length > 0 ? 'applied' : 'default', "filter-count": Object.keys(this.appliedFilterValues).length, "export-button-state": this.tableHeaderConfig.exportButtonState, "pdf-state": this.tableHeaderConfig.pdfState, "csv-state": this.tableHeaderConfig.csvState, "pdf-sub-dropdown": this.tableHeaderConfig.pdfSubDropdown, "csv-sub-dropdown": this.tableHeaderConfig.csvSubDropdown, onInputValueChanged: this.emitSearchValue.bind(this), onDateChange: this.emitDateChange.bind(this), onColumnOptionsButtonClicked: this.columnOptionsButtonClicked(), onExportClicked: e => this.exportButtonClicked(e), onFilterButtonClicked: () => this.openFilterModal(), onRefreshButtonClicked: () => this.onRefreshButtonClicked(), onLayoutButtonClicked: e => this.switchTableLayout(e), onTableControlClicked: e => this.emitTableContolClickedEvent(e) }))), this.showColumnsPanel && this.columns.length > 0 && (h("div", { key: '937e6144ce423156fe23e1976d2a7422e90f27a1', class: "dialog", style: {
+        return (h("div", { key: 'ae2fa96cbec415c81f3da4bf23be2d554f647191', class: `table_wrapper ${this.currentTableLayout}` }, this.tableHeaderConfig && (h("div", { key: '0b1adf00e958704ac66bb7668cf7aad5d9ce9eb4', class: `table-header ${this.currentTableLayout}` }, h("gb-table-header", { key: '917206d14c27e5c6950ecbd2a9aa97400fec96a8', type: this.tableHeaderConfig.type, mode: this.tableHeaderConfig.datePickerMode, "table-heading": this.tableHeaderConfig.tableHeading, "table-heading-label": this.tableHeaderConfig.tableHeadingLabel, "show-search": this.tableHeaderConfig.showSearch, "show-date-filter": this.tableHeaderConfig.showDateFilter, "show-filter": this.tableHeaderConfig.showFilter, "show-export": this.tableHeaderConfig.showExport, "show-column-options": this.tableHeaderConfig.showColumnOptions, "show-refresh-button": this.tableHeaderConfig.showRefreshButton, "input-placeholder": this.tableHeaderConfig.inputPlaceholder, "date-picker-placeholder": this.tableHeaderConfig.datePickerPlaceholder, "show-entire-data": this.tableHeaderConfig.showEntireData, "show-layout-toggle": this.tableHeaderConfig.showLayoutToggle, "filter-state": Object.keys(this.appliedFilterValues).length > 0 ? 'applied' : 'default', "filter-count": Object.keys(this.appliedFilterValues).length, "export-button-state": this.tableHeaderConfig.exportButtonState, "pdf-state": this.tableHeaderConfig.pdfState, "csv-state": this.tableHeaderConfig.csvState, "pdf-sub-dropdown": this.tableHeaderConfig.pdfSubDropdown, "csv-sub-dropdown": this.tableHeaderConfig.csvSubDropdown, onInputValueChanged: this.emitSearchValue.bind(this), onDateChange: this.emitDateChange.bind(this), onColumnOptionsButtonClicked: this.columnOptionsButtonClicked(), onExportClicked: e => this.exportButtonClicked(e), onFilterButtonClicked: () => this.openFilterModal(), onRefreshButtonClicked: () => this.onRefreshButtonClicked(), onLayoutButtonClicked: e => this.switchTableLayout(e), onTableControlClicked: e => this.emitTableContolClickedEvent(e) }))), this.showColumnsPanel && this.columns.length > 0 && (h("div", { key: '9a99f15120f1a1911fd03bf44d26ac4beb961d4e', class: "dialog", style: {
                 transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
-            } }, h("div", { key: '279d4e41d2b4264dacc7fc021fa99ceb49ea2e76', class: "column-modal" }, h("div", { key: '7c0752cdfdb617a93c257a113e0673b7187f57b0', class: "modal_header" }, h("div", { key: 'de74dd966e39f656983e1c837a29b84c451eb377', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: 'f77b8f9e36fa68ccc987c49cd0afb150884f903f', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '32efdc5e46f90e68b38c44532bc2ac50c367645d', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '9b625cfb3d4598ffd2ba29469b7fc36375b329f1', class: "content_wrapper" }, h("div", { key: '4d404d8f88da5b6cc17f9cf308c5b07ce1bcd2a5', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
+            } }, h("div", { key: 'a7ab27435df71be5087bfc4fcfec3d7571252ca9', class: "column-modal" }, h("div", { key: '5d5bb605cd2d05e68ef259563c61a2aab3352c14', class: "modal_header" }, h("div", { key: '26ec42334edc975df4fb532bb840ca870b7faeca', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '717f8d2ddbae5935e228e13ccec7f26b2bfefde9', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '5ca9b3c7824e3c0ffe619c921766eace57614a54', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '087b3ca005357c088688648ea84421065164f21e', class: "content_wrapper" }, h("div", { key: '50da6717460160dbaa5ce2523a8ec6d4d24002ff', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
                 if (this.draggedIndex !== null && this.draggedIndex !== index) {
                     this.reorderColumns(this.draggedIndex, index);
                 }
                 this.draggedIndex = null;
             } }, h("div", { class: "label_and_dragger" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M8 6H8.00635M8 12H8.00635M8 18H8.00635M15.9937 6H16M15.9937 12H16M15.9937 18H16", stroke: "var(--color-icon, #4B5565)", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { class: "label text-md-regular" }, col.label)), h("gb-toggle", { size: "sm", state: StateEnum.Default, position: "right", pressed: col.visible, text: false, onToggleClicked: e => {
                 this.toggleColumn(e, col.key);
-            } })))), h("div", { key: '531a7fde8b7492b3bdaa9bffea44d6fbe7a4a5c6', class: "modal-actions" })))))), this.showFilterModalInternal && this.filterConfig && (h("div", { key: 'edb25713549ebc1adf5356672d7c87f5cd8e41c5', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: 'c7fa8d4babe63bf7f9d4711ddd748f6c1ea06fff', class: "filter_modal", filterConfig: this.mergedFilterConfig, onClose: e => {
+            } })))), h("div", { key: '7e98353adfc9b47ca063b678b3146cab71c20dde', class: "modal-actions" })))))), this.showFilterModalInternal && this.filterConfig && (h("div", { key: 'ff2d7ab91b0e3038402c126fddddbab3490945d5', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: 'e850525900a5a5056d22a49456d1f9eaf36bab45', class: "filter_modal", filterConfig: this.mergedFilterConfig, onClose: e => {
                 e.stopPropagation();
                 this.closeFilterModal();
             }, onApplyFilters: e => this.onApplyFilters(e), onClearFilters: () => this.handleClearFilters() }))), this.internalLoading ? (
@@ -1214,7 +1214,7 @@ export class GbTable {
                 ? this.renderDesktopView()
                 : this.currentTableLayout === 'grid'
                     ? this.renderGridView()
-                    : null)), this.paginationConfig && (h("div", { key: '889778c8abb8c539378ac5f0ba775674e31636a6', class: `pagination ${this.currentTableLayout}` }, h("gb-pagination", { key: 'e2faec7a21180ad464cce837c8ab62a2d6b158fd', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.paginationConfig.paginationMode === 'internal' ? this.internalPageSize : this.paginationConfig.pageSize, "current-page": this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage, "total-pages": this.totalPages, onPageItemSelected: this.handlePageChange.bind(this) }))), this.showToast && (h("gb-toast", { key: '842a6ed5efcdeed1f0a08582e22e01273b555878', class: `toast ${this.toastVisible ? 'visible' : ''}`, color: "information", "main-text": this.filterMessage, breakpoint: "desktop", size: "floating", onClose: () => this.hideToast() }))));
+                    : null)), this.paginationConfig && (h("div", { key: '9aabe280c5be2024301df78a00aa9bc64d520375', class: `pagination ${this.currentTableLayout}` }, h("gb-pagination", { key: 'd007afb510d97a2d96abf9fa3bfb3b0e8cf7b20f', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.paginationConfig.paginationMode === 'internal' ? this.internalPageSize : this.paginationConfig.pageSize, "current-page": this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage, "total-pages": this.totalPages, onPageItemSelected: this.handlePageChange.bind(this) }))), this.showToast && (h("gb-toast", { key: '725b91f6037e2ca8496d326f60919489e16c9fe4', class: `toast ${this.toastVisible ? 'visible' : ''}`, color: "information", "main-text": this.filterMessage, breakpoint: "desktop", size: "floating", onClose: () => this.hideToast() }))));
     }
     static get is() { return "gb-table"; }
     static get encapsulation() { return "shadow"; }
@@ -1272,7 +1272,7 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },\r\n    // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },\r\n    // {\r\n    //   key: 'name',\r\n    //   label: 'Name',\r\n    //   sortable: true,\r\n    //   sortType: 'string',\r\n    //   helpIcon: true,\r\n    //   searchable: true,\r\n    //   hasAvatar: true,\r\n    //   cellAvatar: {\r\n    //     // image: '',\r\n    //     slots: {\r\n    //       // initials: row => row.name.split(' ').map((nm: string) => nm.charAt(0)),\r\n    //       image: row => row.image,\r\n    //     },\r\n    //   },\r\n    //   mobile: { position: 'top_right' },\r\n    // },\r\n    // { key: 'role', label: 'Role', searchable: true },\r\n    // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },\r\n    // {\r\n    //   key: 'status',\r\n    //   label: 'Status',\r\n    //   cellComponent: 'gb-button',\r\n    //   cellProps: row => ({ \r\n    //     hierarchy: 'link_gray', \r\n    //     size: 'md', \r\n    //     icon: 'default',\r\n    //     iconLeading: true,\r\n    //     iconLeadingSwap: 'assets/view.svg'\r\n    //   }),\r\n    //   cellEvent: 'buttonClicked',\r\n    //   cellSlots: {\r\n    //     default: {\r\n    //       tag: 'p',\r\n    //       content: row => row.status,\r\n    //     },\r\n    //   },\r\n    // },\r\n  ]"
+                "defaultValue": "[\r\n    // { key: 'id', label: '#', width: '10rem', sortable: true, sortType: 'string', truncate: true, mobile: { position: 'top_left' } },\r\n    // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },\r\n    // {\r\n    //   key: 'name',\r\n    //   label: 'Name',\r\n    //   sortable: true,\r\n    //   sortType: 'string',\r\n    //   helpIcon: true,\r\n    //   searchable: true,\r\n    //   hasAvatar: true,\r\n    //   cellAvatar: {\r\n    //     // image: '',\r\n    //     slots: {\r\n    //       // initials: row => row.name.split(' ').map((nm: string) => nm.charAt(0)),\r\n    //       image: row => row.image,\r\n    //     },\r\n    //   },\r\n    //   mobile: { position: 'top_right' },\r\n    // },\r\n    // { key: 'role', label: 'Role', searchable: true },\r\n    // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },\r\n    // {\r\n    //   key: 'status',\r\n    //   label: 'Status',\r\n    //   cellComponent: 'gb-button',\r\n    //   cellProps: row => ({ \r\n    //     hierarchy: 'link_gray', \r\n    //     size: 'md', \r\n    //     icon: 'default',\r\n    //     iconLeading: true,\r\n    //     iconLeadingSwap: 'assets/view.svg'\r\n    //   }),\r\n    //   cellEvent: 'buttonClicked',\r\n    //   cellSlots: {\r\n    //     default: {\r\n    //       tag: 'p',\r\n    //       content: row => row.status,\r\n    //     },\r\n    //   },\r\n    // },\r\n  ]"
             },
             "data": {
                 "type": "unknown",