@genesislcap/grid-pro 14.325.1 → 14.326.0

package/dist/esm/grid-pro.js

@@ -24,7 +24,7 @@ import { AgGridTheme, agThemeFontsId, agThemeTokenMapClassname, DEFAULT_STATUS_B
 import { StatePersistence } from './state-persistence';
 import { LabelValueStatusBarComponent, LoadMoreStatusBarComponent, PaginationStatusBarComponent, ReloadStatusBarComponent, } from './status-bar-components';
 import { ErrorTooltip } from './tooltips';
-import { convertToKebabCase, logger, mergeAndDedupColDefWithColumnState } from './utils';
+import { convertToKebabCase, logger, mergeAndDedupColDefWithColumnState, convertColDefsToColumnStates, } from './utils';
 GridProGenesisDatasource;
 GridProClientSideDatasource;
 GridProServerSideDatasource;
@@ -79,6 +79,9 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     }
     constructor() {
         super();
+        // Cache for total column width to avoid repeated calculations
+        this.cachedTotalColumnWidth = null;
+        this.columnCount = 0;
         this.gridErrorItems = [];
         // Genesis-specific attrs
         this.autoCellRendererByType = false;
@@ -90,6 +93,18 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
          * in local storage if you are using `persist-column-state-key`.
          */
         this.gridAutosizingEnabled = false;
+        /**
+         * Boolean attribute to control whether the grid automatically sizes columns to fit their content.
+         * This will call AG Grid's autoSizeColumns() method to automatically adjust column widths based on content.
+         * @public
+         */
+        this.sizeColumnsToContent = false;
+        /**
+         * Boolean attribute to adjust the size of columns to fit the available horizontal space.
+         * This will call AG Grid's sizeColumnsToFit() method.
+         * @public
+         */
+        this.sizeColumnsToFit = false;
         /**
          * The index to add new rows to when using `applyTransaction` or `applyTransactionAsync`
          */
@@ -122,6 +137,10 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
          * If true, will enable row flashing for all rows for `add` async transactions
          */
         this.enableRowFlashing = false;
+        /**
+         * The default column config to reset to when deleteColumnState is called.
+         */
+        this.defaultColumnConfig = [];
         this.gridFontFace = defaultAgGridFontFace;
         this.columnComponentName = 'grid-pro-column';
         this.theme = AgGridTheme.alpine;
@@ -262,6 +281,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
                 return;
             this.initialised = false;
             (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.destroy();
+            this.invalidateColumnWidthCache();
             // Clear registered events when grid is destroyed
             this.registeredGridEvents.clear();
         });
@@ -432,6 +452,35 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             return this.columnState;
         });
     }
+    /**
+     * Deletes the saved column state for the current grid
+     * @param resetToDefault - Whether to reset columns to their default configuration. Defaults to true.
+     * @remarks This removes the persisted column state from storage, allowing the grid to use default column configuration
+     * @public
+     */
+    deleteColumnState() {
+        return __awaiter(this, arguments, void 0, function* (resetToDefault = true) {
+            var _a;
+            if (this.statePersistanceEnabled()) {
+                yield this.statePersistence.deleteColumnState(this.persistColumnStateKey);
+                this.columnState = [];
+            }
+            if (resetToDefault && this.columnApi) {
+                if (((_a = this.defaultColumnConfig) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    // Convert ColDef[] to ColumnState[] using utility function
+                    const columnState = convertColDefsToColumnStates(this.defaultColumnConfig);
+                    this.columnApi.applyColumnState({
+                        state: columnState,
+                        applyOrder: true,
+                    });
+                }
+                else {
+                    this.columnApi.resetColumnState();
+                }
+                this.handleColumnSizing();
+            }
+        });
+    }
     restoreColumnState() {
         return __awaiter(this, void 0, void 0, function* () {
             var _a;
@@ -495,6 +544,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         const gridOnChangeCallback = () => {
             debounceSaveColumnState();
             this.debouncedColumnAutosize.bind(this)();
+            this.invalidateColumnWidthCache();
         };
         Array.from(this.attributes).forEach((attribute) => {
             const attrName = this.agPropertiesMap[attribute.name];
@@ -502,7 +552,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
                 return;
             this.agAttributes[attrName] = attribute.value;
         });
-        const { columnDefs, components, defaultColDef, getRowId, onGridReady, onFilterChanged } = options, rest = __rest(options, ["columnDefs", "components", "defaultColDef", "getRowId", "onGridReady", "onFilterChanged"]);
+        const { columnDefs, components, defaultColDef, getRowId, onGridReady, onFilterChanged, onFirstDataRendered } = options, rest = __rest(options, ["columnDefs", "components", "defaultColDef", "getRowId", "onGridReady", "onFilterChanged", "onFirstDataRendered"]);
         const derivedOptions = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.gridOptionsConfig), { defaultColDef: Object.assign({ enableCellChangeFlash: this.enableCellFlashing, filter: true, resizable: true, sortable: true }, defaultColDef), components: this.combineAllGridComponents(components), suppressDragLeaveHidesColumns: true }), this.eventsAndCallbacks), { onGridReady: (event) => {
                 this.gridApi = event.api;
                 this.columnApi = event.columnApi;
@@ -529,6 +579,13 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
                 this.restoreColumnState.bind(this)();
                 this.restoreCachedFilterConfig.bind(this)();
                 this.debouncedColumnAutosize.bind(this)();
+            }, onFirstDataRendered: (event) => {
+                // Handle column sizing
+                this.handleColumnSizing();
+                // Call the original onFirstDataRendered if provided
+                if (onFirstDataRendered) {
+                    onFirstDataRendered(event);
+                }
             }, onColumnPinned: gridOnChangeCallback, onColumnResized: gridOnChangeCallback, onColumnMoved: gridOnChangeCallback, onDisplayedColumnsChanged: gridOnChangeCallback, onFilterChanged: (filterChangedEvent) => {
                 debouceSaveFiltermodel();
                 if (onFilterChanged) {
@@ -757,6 +814,94 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             };
         }
     }
+    /**
+     * Handles column sizing based on sizeColumnsToContent and sizeColumnsToFit attributes
+     * @private
+     */
+    handleColumnSizing() {
+        if (!this.sizeColumnsToContent && !this.sizeColumnsToFit)
+            return;
+        if (this.sizeColumnsToContent && this.sizeColumnsToFit && this.columnApi && this.gridApi) {
+            this.handleBothSizingModes();
+        }
+        else {
+            this.handleIndividualSizingModes();
+        }
+    }
+    /**
+     * Handles when both sizeColumnsToContent and sizeColumnsToFit are enabled
+     * @private
+     */
+    handleBothSizingModes() {
+        const totalColumnWidth = this.calculateTotalColumnWidth();
+        const gridWidth = this.getGridWidth();
+        if (totalColumnWidth > gridWidth) {
+            if (!this.columnApi)
+                return;
+            this.columnApi.autoSizeAllColumns();
+        }
+        else {
+            if (!this.gridApi)
+                return;
+            this.gridApi.sizeColumnsToFit();
+        }
+    }
+    /**
+     * Handles individual sizing modes when only one is enabled
+     * @private
+     */
+    handleIndividualSizingModes() {
+        if (this.sizeColumnsToContent && this.columnApi) {
+            this.columnApi.autoSizeAllColumns();
+        }
+        if (this.sizeColumnsToFit && this.gridApi) {
+            this.gridApi.sizeColumnsToFit();
+        }
+    }
+    /**
+     * Calculates the total width of all columns
+     * @private
+     */
+    calculateTotalColumnWidth() {
+        if (!this.columnApi) {
+            return 0;
+        }
+        const allColumns = this.columnApi.getAllGridColumns();
+        const currentColumnCount = allColumns.length;
+        // Check if cache is still valid (same number of columns)
+        if (this.cachedTotalColumnWidth !== null && this.columnCount === currentColumnCount) {
+            return this.cachedTotalColumnWidth;
+        }
+        // Calculate and cache the total width
+        this.cachedTotalColumnWidth = allColumns.reduce((sum, col) => sum + (col.getActualWidth() || 0), 0);
+        this.columnCount = currentColumnCount;
+        return this.cachedTotalColumnWidth;
+    }
+    /**
+     * Invalidates the cached column width calculation
+     * @private
+     * @remarks This method is called automatically when column changes occur (resize, move, pin, etc.)
+     * to ensure the cached width calculation remains accurate.
+     */
+    invalidateColumnWidthCache() {
+        this.cachedTotalColumnWidth = null;
+        this.columnCount = 0;
+    }
+    /**
+     * Gets the available grid width with fallbacks
+     * @private
+     */
+    getGridWidth() {
+        const gridElement = this;
+        let gridWidth = (gridElement === null || gridElement === void 0 ? void 0 : gridElement.clientWidth) || 0;
+        if (gridWidth === 0 && this.gridSlot) {
+            gridWidth = this.gridSlot.clientWidth || 0;
+        }
+        if (gridWidth === 0) {
+            gridWidth = this.clientWidth || 0;
+        }
+        return gridWidth;
+    }
     get observedAttributes() {
         // allow properties to be supplied either lowercased or kebab-cased
         // this allows the user to either supply (for example) enableSorting or enabled-sorting
@@ -831,6 +976,12 @@ __decorate([
 __decorate([
     attr({ mode: 'boolean', attribute: 'grid-autosizing' })
 ], GridPro.prototype, "gridAutosizingEnabled", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'size-columns-to-content' })
+], GridPro.prototype, "sizeColumnsToContent", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'size-columns-to-fit' })
+], GridPro.prototype, "sizeColumnsToFit", void 0);
 __decorate([
     attr({ attribute: 'add-index' })
 ], GridPro.prototype, "addIndex", void 0);
@@ -858,6 +1009,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'persist-filter-model-key' })
 ], GridPro.prototype, "persistFilterModelKey", void 0);
+__decorate([
+    attr({ attribute: 'default-column-config' })
+], GridPro.prototype, "defaultColumnConfig", void 0);
 __decorate([
     attr({ attribute: 'header-case-type' })
 ], GridPro.prototype, "headerCaseType", void 0);

package/dist/esm/state-persistence/kv-state.js

@@ -28,6 +28,11 @@ export class KVStorageStatePersistence {
             ]);
         });
     }
+    deleteColumnState(persistColumnStateKey) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.kvStorage.delete([persistColumnStateKey]);
+        });
+    }
     migrateLocalStorageToKVStorage(persistColumnStateKey) {
         return __awaiter(this, void 0, void 0, function* () {
             var _a;

package/dist/esm/state-persistence/local-state.js

@@ -24,6 +24,13 @@ export class LocalStorageStatePersistence {
             this.session.setLocalStorageItem('gridOptions', JSON.stringify(existingOptions));
         });
     }
+    deleteColumnState(persistColumnStateKey) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const existingOptions = JSON.parse(this.session.getLocalStorageItem('gridOptions') || '{}');
+            delete existingOptions[persistColumnStateKey];
+            this.session.setLocalStorageItem('gridOptions', JSON.stringify(existingOptions));
+        });
+    }
     getFilterModel(persistFilterModelKey) {
         return __awaiter(this, void 0, void 0, function* () {
             const localStorageGridOptions = this.session.getLocalStorageItem('gridOptions');

package/dist/esm/utils/array.js

@@ -1,3 +1,34 @@
+/**
+ * Converts a ColDef to a ColumnState
+ * @param colDef - The column definition to convert
+ * @returns The corresponding ColumnState
+ * @public
+ */
+export function convertColDefToColumnState(colDef) {
+    return {
+        colId: colDef.field || colDef.colId || '',
+        hide: colDef.hide || false,
+        width: colDef.width || null,
+        pinned: colDef.pinned || null,
+        sort: colDef.sort || null,
+        sortIndex: colDef.sortIndex || null,
+        aggFunc: colDef.aggFunc || null,
+        rowGroup: colDef.rowGroup || false,
+        rowGroupIndex: colDef.rowGroupIndex || null,
+        pivot: colDef.pivot || false,
+        pivotIndex: colDef.pivotIndex || null,
+        flex: colDef.flex || null,
+    };
+}
+/**
+ * Converts an array of ColDef to an array of ColumnState
+ * @param colDefs - The column definitions to convert
+ * @returns The corresponding ColumnState array
+ * @public
+ */
+export function convertColDefsToColumnStates(colDefs) {
+    return colDefs.map(convertColDefToColumnState);
+}
 /**
  * Merges two arrays, one of `ColDef` and one of `ColumnState`, and deduplicates them.
  * @remarks ColDef uses `field` and ColumnState uses `colId` to identify columns.