globuswebcomponents 2.18.3 → 2.18.5

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',
@@ -29,9 +29,9 @@ export class GbTable {
         //   key: 'status',
         //   label: 'Status',
         //   cellComponent: 'gb-button',
-        //   cellProps: row => ({ 
-        //     hierarchy: 'link_gray', 
-        //     size: 'md', 
+        //   cellProps: row => ({
+        //     hierarchy: 'link_gray',
+        //     size: 'md',
         //     icon: 'default',
         //     iconLeading: true,
         //     iconLeadingSwap: 'assets/view.svg'
@@ -600,9 +600,9 @@ export class GbTable {
             this.isScrollable = newScrollable; // only update if different
         }
     }
-    async handleAction(action, row) {
+    async handleAction(action, row, disabled) {
         // console.log('Action clicked:', action, row);
-        this.rowActionClicked.emit({ action, row });
+        this.rowActionClicked.emit({ action, row, disabled });
     }
     renderCell(col, row) {
         var _a, _b, _c, _d, _e, _f;
@@ -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,15 +934,17 @@ 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 => {
                 e.stopPropagation();
                 this.handleAction(action.action, row);
             } })))))), h(Fragment, null, this.openRowIndex === rowIndex && (h("gb-portal", { "anchor-id": `gb-table-trigger-${rowIndex}`, placement: this.dropdownPlacement, anchorEl: this.currentAnchorEl, boundaryEl: this.scrollContainer, dropdownHeight: requestAnimationFrame(() => this.dropdownRef.scrollHeight), open: true }, h("div", { class: "portal_dropdown_wrapper", ref: el => (this.dropdownRef = el) }, this.dropdownOptions.map(action => (h("gb-dropdown-items-with-shortcut", { icon: action.icon ? true : false, state: action.disabled ? StateEnum.Disabled : StateEnum.Default, label: action.label, "icon-src": action.icon, onClick: () => {
-                this.handleAction(action.action, row);
-                this.openRowIndex = null;
+                if (!action.disabled) {
+                    this.handleAction(action.action, row, action.disabled ? true : false);
+                    this.openRowIndex = null;
+                }
             } })))))))))))))))));
     }
     renderGridView() {
@@ -1158,16 +1160,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: '7a7d945137c7931afafaf113cc45a9319f892339', class: `table_wrapper ${this.currentTableLayout}` }, this.tableHeaderConfig && (h("div", { key: 'd894bcf70764a845479d3743c5edcf76845c7755', class: `table-header ${this.currentTableLayout}` }, h("gb-table-header", { key: '553cd6160919a3f0fae9e0e2aa2d658b679f81dc', 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: '31c5fc8987f26c3605c7459a0a991eccc803e5d1', 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: '9ca28599f58c771a6bf7e08eb47ed4a422713759', class: "column-modal" }, h("div", { key: '34ccfe595dddc0c83c087745efc159b962b01b3e', class: "modal_header" }, h("div", { key: '48f8227eafeef3882788bc6781deb712ae7f051c', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '18108400f492ecf1d15fda27443a7f1a9a870427', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '4c737ca0fa8ad27f9f719046d991ad9006e1c657', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '0c2eed39994de713dd8b51116e69472503d69601', class: "content_wrapper" }, h("div", { key: 'a116a5141c64a7adcc01a0f84d7f936c61daa485', 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: '16ebf2a250eaa9d622344451ce1ed6f741c2cbf3', class: "modal-actions" })))))), this.showFilterModalInternal && this.filterConfig && (h("div", { key: 'b6c28aa9011a895e28b4378eff32521c915bc9dc', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: 'eebbb0e57b77ea6462e99c4b2865327cd25b3adf', class: "filter_modal", filterConfig: this.mergedFilterConfig, onClose: e => {
                 e.stopPropagation();
                 this.closeFilterModal();
             }, onApplyFilters: e => this.onApplyFilters(e), onClearFilters: () => this.handleClearFilters() }))), this.internalLoading ? (
@@ -1214,7 +1216,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: '2514588eedcb7fbc2a823e0a15f975af414ee7a9', class: `pagination ${this.currentTableLayout}` }, h("gb-pagination", { key: 'fa371043084ebb51bd3e81f8a9079c8c43b85a33', "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: '7e9e75ae2726ecc6284801dbaaafb080667cb9c8', 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 +1274,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",
@@ -1676,8 +1678,8 @@ export class GbTable {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ action: string; row: any }",
-                    "resolved": "{ action: string; row: any; }",
+                    "original": "{ action: string; row: any; disabled: boolean }",
+                    "resolved": "{ action: string; row: any; disabled: boolean; }",
                     "references": {}
                 }
             }, {
@@ -1856,7 +1858,7 @@ export class GbTable {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ row: any; }",
+                    "original": "{ row: any }",
                     "resolved": "{ row: any; }",
                     "references": {}
                 }
@@ -1866,7 +1868,7 @@ export class GbTable {
         return {
             "handleAction": {
                 "complexType": {
-                    "signature": "(action: string, row: any) => Promise<void>",
+                    "signature": "(action: string, row: any, disabled?: boolean) => Promise<void>",
                     "parameters": [{
                             "name": "action",
                             "type": "string",
@@ -1875,6 +1877,10 @@ export class GbTable {
                             "name": "row",
                             "type": "any",
                             "docs": ""
+                        }, {
+                            "name": "disabled",
+                            "type": "boolean",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {