@genesislcap/grid-pro 14.275.3 → 14.276.0

package/dist/esm/status-bar-components/load-more.status-bar.js

@@ -0,0 +1,209 @@
+import { __awaiter } from "tslib";
+import { delay, getCurrentDesignSystemPrefix } from '@genesislcap/foundation-utils';
+const LOADING_DELAY = 500;
+/**
+ * A status bar component that shows a "Load More" button when more rows are available
+ * @public
+ */
+export class LoadMoreStatusBarComponent {
+    constructor() {
+        this.buttonLabel = 'Load More';
+        this.isLoading = false;
+        this.isLeftAligned = false;
+    }
+    init(params) {
+        var _a, _b, _c;
+        this.params = params;
+        this.gridApi = params.api;
+        this.element = document.createElement('div');
+        this.element.classList.add('ag-status-panel', 'ag-load-more-panel');
+        this.element.setAttribute('data-test-id', 'grid-load-more-panel');
+        this.element.setAttribute('role', 'region');
+        this.element.setAttribute('aria-label', 'Load more data controls');
+        this.element.style.display = 'flex';
+        this.element.style.alignItems = 'center';
+        // Determine alignment based on pagination status
+        // When pagination is enabled, load more is aligned left, otherwise right
+        this.isLeftAligned = ((_c = (_b = (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.gridOptionsService) === null || _b === void 0 ? void 0 : _b.gridOptions) === null || _c === void 0 ? void 0 : _c.pagination) || false;
+        this.element.style.justifyContent = this.isLeftAligned ? 'flex-start' : 'flex-end';
+        // Only add padding on the side where the button is
+        this.element.style.paddingLeft = 'var(--ag-grid-size)';
+        this.element.style.paddingRight = 'var(--ag-grid-size)';
+        this.element.style.height = 'var(--ag-status-bar-height)';
+        // Detect the current design system prefix (rapid or zero)
+        this.designSystemPrefix = getCurrentDesignSystemPrefix(this.element, 'zero');
+        this.createProgressRing();
+        this.createLoadMoreButton();
+        this.updateButtonVisibility();
+        // Remove all children first to ensure correct ordering
+        while (this.element.firstChild) {
+            this.element.removeChild(this.element.firstChild);
+        }
+        // Add elements in the correct order based on alignment
+        if (this.isLeftAligned) {
+            // Left-aligned: Button first, then progress ring
+            this.element.appendChild(this.loadMoreButton);
+            this.element.appendChild(this.progressRing);
+        }
+        else {
+            // Right-aligned: Progress ring first, then button
+            this.element.appendChild(this.progressRing);
+            this.element.appendChild(this.loadMoreButton);
+        }
+    }
+    createProgressRing() {
+        // Create the progress ring with the appropriate design system prefix
+        this.progressRing = document.createElement(`${this.designSystemPrefix}-progress-ring`);
+        this.progressRing.setAttribute('data-test-id', 'grid-load-more-progress');
+        this.progressRing.setAttribute('aria-label', 'Loading more data');
+        // Set styles for the progress ring
+        this.progressRing.style.width = '20px';
+        this.progressRing.style.height = '20px';
+        // Different margin based on alignment - when left-aligned, progress ring goes after button
+        this.progressRing.style.margin = this.isLeftAligned ? '0 0 0 8px' : '0 8px 0 0';
+        this.progressRing.style.display = 'none'; // Hidden by default
+    }
+    createLoadMoreButton() {
+        var _a, _b;
+        // Create the button with the appropriate design system prefix
+        this.loadMoreButton = document.createElement(`${this.designSystemPrefix}-button`);
+        this.loadMoreButton.setAttribute('data-test-id', 'grid-load-more-button');
+        // Set button appearance - use custom appearance if provided, otherwise default to 'outline'
+        const appearance = ((_a = this.params) === null || _a === void 0 ? void 0 : _a.appearance) || 'outline';
+        this.loadMoreButton.setAttribute('appearance', appearance);
+        // Set button label - use default
+        this.loadMoreButton.textContent = this.buttonLabel;
+        // Set button styles - improve sizing to match UI better
+        this.loadMoreButton.style.margin = '2px 8px';
+        this.loadMoreButton.style.minWidth = '120px';
+        this.loadMoreButton.style.textAlign = 'center';
+        this.loadMoreButton.style.height = '24px';
+        this.loadMoreButton.style.lineHeight = '20px';
+        // Add native tooltip if provided
+        if ((_b = this.params) === null || _b === void 0 ? void 0 : _b.tooltip) {
+            this.loadMoreButton.setAttribute('title', this.params.tooltip);
+            this.loadMoreButton.setAttribute('aria-describedby', 'grid-load-more-tooltip');
+        }
+        // Set initial ARIA attributes - use tooltip as aria-label if available, otherwise use default
+        this.updateAriaLabel();
+        this.loadMoreButton.setAttribute('role', 'button');
+        // Add event listener for the load more action
+        this.clickHandler = () => __awaiter(this, void 0, void 0, function* () {
+            if (this.isLoading)
+                return; // Prevent multiple clicks
+            try {
+                this.showLoading(true);
+                yield delay(LOADING_DELAY);
+                // Execute the load more action
+                if (this.params.onLoadMore) {
+                    this.params.onLoadMore();
+                }
+                // After the action completes, hide the loading state
+                // this.showLoading(false);
+            }
+            catch (error) {
+                // In case of error, ensure loading state is hidden
+                this.showLoading(false);
+            }
+        });
+        this.loadMoreButton.addEventListener('click', this.clickHandler);
+    }
+    /**
+     * Update the aria-label based on current state and tooltip
+     */
+    updateAriaLabel() {
+        var _a, _b;
+        let ariaLabel;
+        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.tooltip) {
+            // Use tooltip as primary aria-label
+            ariaLabel = this.params.tooltip;
+        }
+        else {
+            // Fall back to descriptive labels based on state
+            if (this.isLoading) {
+                ariaLabel = 'Loading more data';
+            }
+            else if ((_b = this.params) === null || _b === void 0 ? void 0 : _b.moreRows) {
+                ariaLabel = 'Load more rows from server';
+            }
+            else {
+                ariaLabel = 'No more rows available';
+            }
+        }
+        this.loadMoreButton.setAttribute('aria-label', ariaLabel);
+    }
+    /**
+     * Show or hide the loading state
+     */
+    showLoading(loading) {
+        var _a;
+        this.isLoading = loading;
+        if (loading) {
+            // Show loading state
+            this.progressRing.style.display = 'inline-block';
+            this.loadMoreButton.setAttribute('disabled', 'true');
+            this.loadMoreButton.textContent = 'Loading...';
+        }
+        else {
+            // Hide loading state
+            this.progressRing.style.display = 'none';
+            // Reset button state based on moreRows parameter
+            if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.moreRows) {
+                this.loadMoreButton.textContent = 'Load More';
+                this.loadMoreButton.removeAttribute('disabled');
+            }
+            else {
+                this.loadMoreButton.textContent = 'No More Rows';
+                this.loadMoreButton.setAttribute('disabled', 'true');
+            }
+        }
+        // Update aria-label to reflect current state
+        this.updateAriaLabel();
+    }
+    updateButtonVisibility() {
+        // If we don't have params or during loading, don't update
+        if (!this.params || this.isLoading) {
+            return;
+        }
+        // Reset loading state (safeguard)
+        this.progressRing.style.display = 'none';
+        // If we have more rows, enable the button
+        if (this.params.moreRows) {
+            this.loadMoreButton.style.display = 'inline-flex';
+            this.loadMoreButton.textContent = 'Load More';
+            this.loadMoreButton.removeAttribute('disabled');
+        }
+        else {
+            // No more rows available
+            this.loadMoreButton.style.display = 'inline-flex';
+            this.loadMoreButton.textContent = 'No More Rows';
+            this.loadMoreButton.setAttribute('disabled', 'true');
+        }
+        // Update aria-label to reflect current state
+        this.updateAriaLabel();
+    }
+    updateParams(params) {
+        var _a, _b;
+        const prevParams = this.params;
+        this.params = Object.assign(Object.assign({}, this.params), params);
+        // If tooltip changed, update the title attribute
+        if ((prevParams === null || prevParams === void 0 ? void 0 : prevParams.tooltip) !== ((_a = this.params) === null || _a === void 0 ? void 0 : _a.tooltip) && ((_b = this.params) === null || _b === void 0 ? void 0 : _b.tooltip)) {
+            this.loadMoreButton.setAttribute('title', this.params.tooltip);
+        }
+        // If we were loading, but got an update that says no more rows,
+        // we need to stop the loading state immediately
+        if (this.isLoading) {
+            this.showLoading(false);
+        }
+        this.updateButtonVisibility();
+    }
+    getGui() {
+        return this.element;
+    }
+    destroy() {
+        // Clean up event listeners
+        if (this.loadMoreButton && this.clickHandler) {
+            this.loadMoreButton.removeEventListener('click', this.clickHandler);
+        }
+    }
+}

package/dist/esm/status-bar-components/pagination.status-bar.js

@@ -0,0 +1,206 @@
+/**
+ * Pagination Status Bar Component for AG Grid
+ * Displays pagination controls and information about current page and total rows
+ * @public
+ */
+export class PaginationStatusBarComponent {
+    init(params) {
+        this.api = params.api;
+        this.eGui = document.createElement('div');
+        this.eGui.className = 'ag-status-panel';
+        this.eGui.setAttribute('data-test-id', 'grid-pagination-panel');
+        this.eGui.setAttribute('role', 'navigation');
+        this.eGui.setAttribute('aria-label', 'Pagination controls');
+        this.eGui.style.display = 'flex';
+        this.eGui.style.alignItems = 'center';
+        this.eGui.style.justifyContent = 'flex-end';
+        this.eGui.style.height = 'var(--ag-status-bar-height)';
+        this.createPaginationPanel();
+        // Initial update
+        this.updateDisplay();
+        // Listen to pagination changes
+        this.paginationChangedHandler = this.updateDisplay.bind(this);
+        this.api.addEventListener('paginationChanged', this.paginationChangedHandler);
+    }
+    getGui() {
+        return this.eGui;
+    }
+    createPaginationPanel() {
+        // Create the main pagination panel
+        this.paginationPanel = document.createElement('div');
+        this.paginationPanel.className = 'ag-paging-panel ag-unselectable';
+        this.paginationPanel.setAttribute('id', 'ag-pagination-clone');
+        this.paginationPanel.setAttribute('data-test-id', 'grid-pagination-controls');
+        // Row summary panel
+        this.paginationSummaryPanel = document.createElement('span');
+        this.paginationSummaryPanel.className = 'ag-paging-row-summary-panel';
+        this.paginationSummaryPanel.setAttribute('role', 'status');
+        this.paginationSummaryPanel.setAttribute('data-test-id', 'grid-pagination-summary');
+        this.paginationSummaryPanel.setAttribute('aria-label', 'Row count summary');
+        // First page button
+        this.firstPageButton = this.createPaginationButton('btFirst', 'ag-paging-button ag-disabled', 'First Page', true);
+        this.firstPageButton.setAttribute('data-test-id', 'grid-pagination-first');
+        // Previous page button
+        this.prevPageButton = this.createPaginationButton('btPrevious', 'ag-paging-button ag-disabled', 'Previous Page', true);
+        this.prevPageButton.setAttribute('data-test-id', 'grid-pagination-previous');
+        // Create the description panel
+        this.descriptionPanel = document.createElement('span');
+        this.descriptionPanel.className = 'ag-paging-description';
+        this.descriptionPanel.setAttribute('role', 'status');
+        this.descriptionPanel.setAttribute('data-test-id', 'grid-pagination-description');
+        this.descriptionPanel.setAttribute('aria-label', 'Current page information');
+        // Page information elements
+        this.pageStartDisplay = document.createElement('span');
+        this.pageStartDisplay.className = 'ag-paging-number';
+        this.pageStartDisplay.setAttribute('id', 'ag-pagination-clone-start-page');
+        this.pageStartDisplay.setAttribute('data-test-id', 'grid-pagination-page-label');
+        this.pageStartDisplay.textContent = 'Page';
+        this.pageNumberDisplay = document.createElement('span');
+        this.pageNumberDisplay.className = 'ag-paging-number';
+        this.pageNumberDisplay.setAttribute('id', 'ag-pagination-clone-start-page-number');
+        this.pageNumberDisplay.setAttribute('ref', 'lbCurrent');
+        this.pageNumberDisplay.setAttribute('data-test-id', 'grid-pagination-current-page');
+        this.pageNumberDisplay.setAttribute('aria-label', 'Current page number');
+        this.pageNumberDisplay.textContent = '1';
+        this.pageOfDisplay = document.createElement('span');
+        this.pageOfDisplay.className = 'ag-paging-number';
+        this.pageOfDisplay.setAttribute('id', 'ag-pagination-clone-of-page');
+        this.pageOfDisplay.setAttribute('data-test-id', 'grid-pagination-of-label');
+        this.pageOfDisplay.textContent = 'of';
+        this.pageNumberTotalDisplay = document.createElement('span');
+        this.pageNumberTotalDisplay.className = 'ag-paging-number';
+        this.pageNumberTotalDisplay.setAttribute('id', 'ag-pagination-clone-of-page-number');
+        this.pageNumberTotalDisplay.setAttribute('ref', 'lbTotal');
+        this.pageNumberTotalDisplay.setAttribute('data-test-id', 'grid-pagination-total-pages');
+        this.pageNumberTotalDisplay.setAttribute('aria-label', 'Total number of pages');
+        this.pageNumberTotalDisplay.textContent = '1';
+        // Next page button
+        this.nextPageButton = this.createPaginationButton('btNext', 'ag-paging-button', 'Next Page', false);
+        this.nextPageButton.setAttribute('data-test-id', 'grid-pagination-next');
+        // Last page button
+        this.lastPageButton = this.createPaginationButton('btLast', 'ag-paging-button', 'Last Page', false);
+        this.lastPageButton.setAttribute('data-test-id', 'grid-pagination-last');
+        // Assemble the description panel
+        this.descriptionPanel.appendChild(this.pageStartDisplay);
+        this.descriptionPanel.appendChild(document.createTextNode(' '));
+        this.descriptionPanel.appendChild(this.pageNumberDisplay);
+        this.descriptionPanel.appendChild(document.createTextNode(' '));
+        this.descriptionPanel.appendChild(this.pageOfDisplay);
+        this.descriptionPanel.appendChild(document.createTextNode(' '));
+        this.descriptionPanel.appendChild(this.pageNumberTotalDisplay);
+        // Assemble the pagination panel
+        this.paginationPanel.appendChild(this.paginationSummaryPanel);
+        this.paginationPanel.appendChild(this.firstPageButton);
+        this.paginationPanel.appendChild(this.prevPageButton);
+        this.paginationPanel.appendChild(this.descriptionPanel);
+        this.paginationPanel.appendChild(this.nextPageButton);
+        this.paginationPanel.appendChild(this.lastPageButton);
+        // Add to main container
+        this.eGui.appendChild(this.paginationPanel);
+        // Add event listeners with keyboard support
+        this.addPaginationEventListeners();
+    }
+    addPaginationEventListeners() {
+        // Click event listeners
+        this.firstPageButton.addEventListener('click', () => this.goToPage('first'));
+        this.prevPageButton.addEventListener('click', () => this.goToPage('previous'));
+        this.nextPageButton.addEventListener('click', () => this.goToPage('next'));
+        this.lastPageButton.addEventListener('click', () => this.goToPage('last'));
+        // Keyboard event listeners for accessibility
+        this.firstPageButton.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.goToPage('first');
+            }
+        });
+        this.prevPageButton.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.goToPage('previous');
+            }
+        });
+        this.nextPageButton.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.goToPage('next');
+            }
+        });
+        this.lastPageButton.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.goToPage('last');
+            }
+        });
+    }
+    createPaginationButton(ref, className, ariaLabel, disabled) {
+        const button = document.createElement('div');
+        button.setAttribute('ref', ref);
+        button.className = className;
+        button.setAttribute('role', 'button');
+        button.setAttribute('aria-label', ariaLabel);
+        button.setAttribute('tabindex', disabled ? '-1' : '0');
+        if (disabled) {
+            button.setAttribute('aria-disabled', 'true');
+        }
+        const iconSpan = document.createElement('span');
+        iconSpan.className = `ag-icon ag-icon-${ref.substring(2).toLowerCase()}`;
+        iconSpan.setAttribute('unselectable', 'on');
+        iconSpan.setAttribute('role', 'presentation');
+        button.appendChild(iconSpan);
+        return button;
+    }
+    goToPage(page) {
+        switch (page) {
+            case 'first':
+                this.api.paginationGoToFirstPage();
+                break;
+            case 'previous':
+                this.api.paginationGoToPreviousPage();
+                break;
+            case 'next':
+                this.api.paginationGoToNextPage();
+                break;
+            case 'last':
+                this.api.paginationGoToLastPage();
+                break;
+        }
+    }
+    updateDisplay() {
+        const currentPage = this.api.paginationGetCurrentPage() + 1; // 1-based for display
+        const totalPages = this.api.paginationGetTotalPages() || 1;
+        const pageSize = this.api.paginationGetPageSize();
+        const rowCount = this.api.paginationGetRowCount();
+        // Update the page numbers
+        this.pageNumberDisplay.textContent = currentPage.toString();
+        this.pageNumberTotalDisplay.textContent = totalPages.toString();
+        // Update the row summary panel
+        const startRow = (currentPage - 1) * pageSize + 1;
+        const endRow = Math.min(currentPage * pageSize, rowCount);
+        this.paginationSummaryPanel.textContent = `${rowCount > 0 ? startRow : 0} to ${endRow} of ${rowCount}`;
+        // Update button states
+        const isFirstPage = currentPage === 1;
+        const isLastPage = currentPage >= totalPages;
+        this.updateButtonState(this.firstPageButton, isFirstPage);
+        this.updateButtonState(this.prevPageButton, isFirstPage);
+        this.updateButtonState(this.nextPageButton, isLastPage);
+        this.updateButtonState(this.lastPageButton, isLastPage);
+    }
+    updateButtonState(button, disabled) {
+        if (disabled) {
+            button.classList.add('ag-disabled');
+            button.setAttribute('aria-disabled', 'true');
+            button.setAttribute('tabindex', '-1');
+        }
+        else {
+            button.classList.remove('ag-disabled');
+            button.setAttribute('aria-disabled', 'false');
+            button.setAttribute('tabindex', '0');
+        }
+    }
+    destroy() {
+        // Remove event listeners
+        if (this.api && this.paginationChangedHandler) {
+            this.api.removeEventListener('paginationChanged', this.paginationChangedHandler);
+        }
+    }
+}

package/dist/esm/status-bar-components/reload.status-bar.js

@@ -0,0 +1,162 @@
+import { __awaiter } from "tslib";
+import { delay, getCurrentDesignSystemPrefix } from '@genesislcap/foundation-utils';
+// Delay in milliseconds to keep the icon in disabled state for visual feedback
+const RELOAD_DELAY = 500;
+/**
+ * A status bar component that shows a refresh icon to reload the grid data
+ * @public
+ */
+export class ReloadStatusBarComponent {
+    constructor() {
+        this.isReloading = false;
+    }
+    init(params) {
+        this.params = params;
+        this.element = document.createElement('div');
+        this.element.classList.add('ag-status-panel', 'ag-reload-panel');
+        this.element.setAttribute('data-test-id', 'grid-reload-panel');
+        this.element.setAttribute('role', 'region');
+        this.element.setAttribute('aria-label', 'Reload data controls');
+        this.element.style.display = 'flex';
+        this.element.style.alignItems = 'center';
+        this.element.style.justifyContent = 'center';
+        this.element.style.paddingLeft = 'var(--ag-grid-size)';
+        this.element.style.height = 'var(--ag-status-bar-height)';
+        // Detect the current design system prefix (rapid or zero)
+        this.designSystemPrefix = getCurrentDesignSystemPrefix(this.element, 'zero');
+        this.createRefreshIcon();
+        this.createProgressRing();
+        // Initially show the icon, hide the progress ring
+        this.element.appendChild(this.refreshIcon);
+        this.element.appendChild(this.progressRing);
+        this.progressRing.style.display = 'none';
+    }
+    createProgressRing() {
+        // Create the progress ring with the appropriate design system prefix
+        this.progressRing = document.createElement(`${this.designSystemPrefix}-progress-ring`);
+        this.progressRing.setAttribute('data-test-id', 'grid-reload-progress');
+        this.progressRing.setAttribute('aria-label', 'Reloading data');
+        // Set styles for the progress ring
+        this.progressRing.style.width = '20px';
+        this.progressRing.style.height = '20px';
+        this.progressRing.style.margin = '4px';
+        this.progressRing.style.display = 'none'; // Hidden by default
+    }
+    createRefreshIcon() {
+        var _a, _b, _c, _d;
+        // For design systems that support icons
+        if (this.designSystemPrefix === 'zero' || this.designSystemPrefix === 'rapid') {
+            this.refreshIcon = document.createElement(`${this.designSystemPrefix}-icon`);
+            // Use custom icon if provided, otherwise default to 'refresh'
+            const iconName = ((_a = this.params) === null || _a === void 0 ? void 0 : _a.icon) || 'refresh';
+            this.refreshIcon.setAttribute('name', iconName);
+            this.refreshIcon.setAttribute('aria-label', ((_b = this.params) === null || _b === void 0 ? void 0 : _b.tooltip) || 'Reload grid data');
+        }
+        else {
+            // Fallback for systems without icon components
+            this.refreshIcon = document.createElement('div');
+            this.refreshIcon.textContent = '↻'; // Unicode refresh symbol
+            this.refreshIcon.setAttribute('aria-label', ((_c = this.params) === null || _c === void 0 ? void 0 : _c.tooltip) || 'Reload grid data');
+        }
+        // Add accessibility attributes
+        this.refreshIcon.setAttribute('data-test-id', 'grid-reload-button');
+        this.refreshIcon.setAttribute('role', 'button');
+        this.refreshIcon.setAttribute('tabindex', '0');
+        // Set common styles for the icon - make it larger
+        this.refreshIcon.style.cursor = 'pointer';
+        this.refreshIcon.style.width = '28px';
+        this.refreshIcon.style.height = '28px';
+        this.refreshIcon.style.display = 'flex';
+        this.refreshIcon.style.alignItems = 'center';
+        this.refreshIcon.style.justifyContent = 'center';
+        this.refreshIcon.style.fontSize = '20px'; // Increase text size for fallback icon
+        // Add native tooltip if provided
+        if ((_d = this.params) === null || _d === void 0 ? void 0 : _d.tooltip) {
+            this.refreshIcon.setAttribute('title', this.params.tooltip);
+        }
+        // Add hover effect
+        this.mouseoverHandler = () => {
+            if (!this.isReloading) {
+                this.refreshIcon.style.opacity = '0.7';
+            }
+        };
+        this.refreshIcon.addEventListener('mouseover', this.mouseoverHandler);
+        this.mouseoutHandler = () => {
+            if (!this.isReloading) {
+                this.refreshIcon.style.opacity = '1';
+            }
+        };
+        this.refreshIcon.addEventListener('mouseout', this.mouseoutHandler);
+        // Add click event listener
+        this.clickHandler = () => __awaiter(this, void 0, void 0, function* () {
+            if (this.isReloading)
+                return; // Prevent multiple clicks
+            try {
+                this.showReloading(true);
+                yield delay(RELOAD_DELAY);
+                // Execute the reload action if provided
+                if (this.params.onReload) {
+                    this.params.onReload();
+                }
+                // Reset the icon state
+                this.showReloading(false);
+            }
+            catch (error) {
+                // In case of error, ensure icon state is reset
+                this.showReloading(false);
+            }
+        });
+        this.refreshIcon.addEventListener('click', this.clickHandler);
+        // Add keyboard support for accessibility
+        this.refreshIcon.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                // Trigger the same click handler
+                this.clickHandler(new MouseEvent('click'));
+            }
+        });
+    }
+    /**
+     * Show or hide the reloading state
+     */
+    showReloading(reloading) {
+        this.isReloading = reloading;
+        if (reloading) {
+            // Hide the icon and show the progress ring
+            this.refreshIcon.style.display = 'none';
+            this.progressRing.style.display = 'inline-block';
+        }
+        else {
+            // Show the icon and hide the progress ring
+            this.refreshIcon.style.display = 'inline-flex';
+            this.progressRing.style.display = 'none';
+        }
+    }
+    updateParams(params) {
+        var _a, _b;
+        const prevParams = this.params;
+        this.params = Object.assign(Object.assign({}, this.params), params);
+        // If tooltip changed, update the title attribute and aria-label
+        if ((prevParams === null || prevParams === void 0 ? void 0 : prevParams.tooltip) !== ((_a = this.params) === null || _a === void 0 ? void 0 : _a.tooltip)) {
+            if ((_b = this.params) === null || _b === void 0 ? void 0 : _b.tooltip) {
+                this.refreshIcon.setAttribute('title', this.params.tooltip);
+                this.refreshIcon.setAttribute('aria-label', this.params.tooltip);
+            }
+            else {
+                this.refreshIcon.removeAttribute('title');
+                this.refreshIcon.setAttribute('aria-label', 'Reload grid data');
+            }
+        }
+    }
+    getGui() {
+        return this.element;
+    }
+    destroy() {
+        // Clean up event listeners
+        if (this.refreshIcon) {
+            this.refreshIcon.removeEventListener('mouseover', this.mouseoverHandler);
+            this.refreshIcon.removeEventListener('mouseout', this.mouseoutHandler);
+            this.refreshIcon.removeEventListener('click', this.clickHandler);
+        }
+    }
+}