@genesislcap/grid-pro 15.12.0-FUI-2601.1 → 15.13.0

package/dist/esm/columns-tool-panel/columns-tool-panel.js

@@ -1,274 +0,0 @@
-import { applyVisibleOrder, getPickerItems, partitionPickerItems, reorderVisibleIds, } from './columns-tool-panel.utils';
-const PANEL_STYLES = `
-.grid-pro-columns-tool-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-width: 200px;
-  padding: 8px;
-  box-sizing: border-box;
-  color: var(--ag-foreground-color, var(--neutral-foreground-rest));
-  background: var(--ag-control-panel-background-color, var(--neutral-layer-2));
-  font-family: var(--ag-font-family, var(--body-font));
-  font-size: var(--ag-data-font-size, var(--type-ramp-minus-1-font-size));
-}
-.grid-pro-columns-search {
-  width: 100%;
-  margin-bottom: 8px;
-  padding: 6px 8px;
-  box-sizing: border-box;
-  border: 1px solid var(--ag-input-border-color, var(--neutral-stroke-rest));
-  border-radius: 4px;
-  background: var(--ag-background-color, var(--neutral-layer-card-container));
-  color: inherit;
-  font: inherit;
-}
-.grid-pro-columns-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  overflow: auto;
-}
-.grid-pro-columns-divider {
-  height: 1px;
-  margin: 8px 0;
-  background: var(--ag-border-color, var(--neutral-stroke-divider-rest));
-  flex-shrink: 0;
-}
-.grid-pro-columns-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 6px;
-  border-radius: 4px;
-  cursor: default;
-  user-select: none;
-}
-.grid-pro-columns-item[draggable='true'] {
-  cursor: grab;
-}
-.grid-pro-columns-item.dragging {
-  opacity: 0.5;
-}
-.grid-pro-columns-item.drag-over {
-  background: var(--ag-row-hover-color, var(--neutral-fill-hover));
-}
-.grid-pro-columns-handle {
-  opacity: 0.45;
-  letter-spacing: -1px;
-  font-size: 12px;
-}
-.grid-pro-columns-item[draggable='false'] .grid-pro-columns-handle {
-  visibility: hidden;
-}
-.grid-pro-columns-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-`;
-/**
- * Custom columns tool panel. Replaces AG Grid Enterprise `agColumnsToolPanel`.
- *
- * @public
- * @remarks
- * Registered as `gridProColumnsToolPanel` (`GridProToolPanelTypes.columns`).
- * `resolveGridProSideBar` rewrites `sideBar: ['columns']` / `agColumnsToolPanel` to this
- * component so hosts do not need `ColumnsToolPanelModule` — only `SideBarModule`.
- *
- * Layout: search → visible columns (drag to reorder) → divider → hidden columns.
- * Checkboxes toggle visibility via `api.setColumnsVisible`; drag is limited to the
- * visible list and disabled while a search filter is active.
- */
-export class ColumnsToolPanel {
-    constructor() {
-        this.search = '';
-        /** Source colId while a visible-row drag is in progress. */
-        this.dragColId = null;
-        /** Stable listener refs so `destroy` can remove the same functions `init` added. */
-        this.boundRefresh = () => this.refresh();
-    }
-    /**
-     * AG Grid `IToolPanelComp` entry. Builds the DOM once and subscribes to column
-     * events so the picker stays in sync with header menu / API visibility changes.
-     */
-    init(params) {
-        this.params = params;
-        this.api = params.api;
-        this.buildGui();
-        this.refresh();
-        this.api.addEventListener('columnVisible', this.boundRefresh);
-        this.api.addEventListener('columnMoved', this.boundRefresh);
-        this.api.addEventListener('newColumnsLoaded', this.boundRefresh);
-        this.api.addEventListener('displayedColumnsChanged', this.boundRefresh);
-    }
-    /**
-     * Rebuilds both lists from current grid column state.
-     * Displayed columns stay first (grid order); hidden columns follow so search
-     * and drag operate on a single ordered picker model.
-     */
-    refresh() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        if (!this.api || !this.selectedList) {
-            return;
-        }
-        const activeElement = document.activeElement;
-        const activeTestId = activeElement && ((_a = this.eGui) === null || _a === void 0 ? void 0 : _a.contains(activeElement))
-            ? activeElement.getAttribute('data-test-id')
-            : null;
-        const displayed = (_d = (_c = (_b = this.api).getAllDisplayedColumns) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : [];
-        const all = (_g = (_f = (_e = this.api).getColumns) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : [];
-        const displayedIds = new Set(displayed.map((column) => column.getColId()));
-        // Displayed first (current visual order), then any non-displayed columns.
-        const ordered = [...displayed, ...all.filter((column) => !displayedIds.has(column.getColId()))];
-        const items = getPickerItems(ordered);
-        const { selected, unselected } = partitionPickerItems(items, this.search);
-        this.renderList(this.selectedList, selected, true);
-        this.renderList(this.unselectedList, unselected, false);
-        this.divider.style.display = selected.length && unselected.length ? '' : 'none';
-        if (activeTestId) {
-            const restoredElement = this.eGui.querySelector(`[data-test-id="${activeTestId}"]`);
-            restoredElement === null || restoredElement === void 0 ? void 0 : restoredElement.focus();
-        }
-    }
-    /** Root element AG Grid mounts into the sidebar. */
-    getGui() {
-        return this.eGui;
-    }
-    destroy() {
-        if (this.api) {
-            this.api.removeEventListener('columnVisible', this.boundRefresh);
-            this.api.removeEventListener('columnMoved', this.boundRefresh);
-            this.api.removeEventListener('newColumnsLoaded', this.boundRefresh);
-            this.api.removeEventListener('displayedColumnsChanged', this.boundRefresh);
-        }
-        this.api = null;
-    }
-    /** One-time DOM: scoped styles, search, visible list, divider, hidden list. */
-    buildGui() {
-        this.eGui = document.createElement('div');
-        this.eGui.className = 'grid-pro-columns-tool-panel';
-        this.eGui.setAttribute('data-test-id', 'grid-pro-columns-tool-panel');
-        const style = document.createElement('style');
-        style.textContent = PANEL_STYLES;
-        this.eGui.appendChild(style);
-        this.searchInput = document.createElement('input');
-        this.searchInput.type = 'search';
-        this.searchInput.className = 'grid-pro-columns-search';
-        this.searchInput.placeholder = 'Search';
-        this.searchInput.setAttribute('data-test-id', 'grid-pro-columns-search');
-        this.searchInput.addEventListener('input', () => {
-            this.search = this.searchInput.value;
-            this.refresh();
-        });
-        this.eGui.appendChild(this.searchInput);
-        this.selectedList = document.createElement('div');
-        this.selectedList.className = 'grid-pro-columns-list';
-        this.selectedList.setAttribute('data-test-id', 'grid-pro-columns-selected');
-        this.eGui.appendChild(this.selectedList);
-        this.divider = document.createElement('div');
-        this.divider.className = 'grid-pro-columns-divider';
-        this.divider.setAttribute('data-test-id', 'grid-pro-columns-divider');
-        this.eGui.appendChild(this.divider);
-        this.unselectedList = document.createElement('div');
-        this.unselectedList.className = 'grid-pro-columns-list';
-        this.unselectedList.setAttribute('data-test-id', 'grid-pro-columns-unselected');
-        this.eGui.appendChild(this.unselectedList);
-    }
-    renderList(container, items, selected) {
-        container.replaceChildren();
-        for (const item of items) {
-            container.appendChild(this.createItem(item, selected));
-        }
-    }
-    /**
-     * One picker row: drag handle + visibility checkbox + header label.
-     * Drag is only bound for visible rows when search is empty so reorder
-     * matches full grid order, not a filtered subset.
-     */
-    createItem(item, selected) {
-        const row = document.createElement('div');
-        row.className = 'grid-pro-columns-item';
-        row.dataset.colId = item.colId;
-        row.setAttribute('data-test-id', `grid-pro-columns-item-${item.colId}`);
-        const handle = document.createElement('span');
-        handle.className = 'grid-pro-columns-handle';
-        handle.textContent = '⋮⋮';
-        row.appendChild(handle);
-        const checkbox = document.createElement('input');
-        checkbox.type = 'checkbox';
-        checkbox.checked = item.visible;
-        checkbox.disabled = item.lockVisible;
-        checkbox.setAttribute('data-test-id', `grid-pro-columns-check-${item.colId}`);
-        checkbox.addEventListener('change', () => {
-            if (item.lockVisible || !this.api) {
-                return;
-            }
-            this.api.setColumnsVisible([item.colId], checkbox.checked);
-        });
-        row.appendChild(checkbox);
-        const label = document.createElement('span');
-        label.className = 'grid-pro-columns-label';
-        label.textContent = item.headerName;
-        row.appendChild(label);
-        if (selected && !this.search.trim()) {
-            this.bindDrag(row, item.colId);
-        }
-        return row;
-    }
-    /** HTML5 drag-and-drop between visible rows; drop target colId is `colId`. */
-    bindDrag(row, colId) {
-        row.draggable = true;
-        row.addEventListener('dragstart', (event) => {
-            var _a;
-            this.dragColId = colId;
-            (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData('text/plain', colId);
-            row.classList.add('dragging');
-        });
-        row.addEventListener('dragend', () => {
-            this.dragColId = null;
-            row.classList.remove('dragging');
-        });
-        row.addEventListener('dragover', (event) => {
-            event.preventDefault();
-            row.classList.add('drag-over');
-        });
-        row.addEventListener('dragleave', () => {
-            row.classList.remove('drag-over');
-        });
-        row.addEventListener('drop', (event) => {
-            var _a;
-            event.preventDefault();
-            row.classList.remove('drag-over');
-            const fromId = this.dragColId || ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain'));
-            if (fromId) {
-                this.reorderSelected(fromId, colId);
-            }
-        });
-    }
-    /**
-     * Applies a new visible-column order via `applyColumnState({ applyOrder: true })`.
-     * Hidden columns keep their relative positions; only the visible slice is permuted.
-     */
-    reorderSelected(fromId, toId) {
-        var _a, _b, _c, _d, _e, _f;
-        if (!this.api || !this.api.getColumnState || !this.api.applyColumnState) {
-            return;
-        }
-        const displayed = (_c = (_b = (_a = this.api).getAllDisplayedColumns) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : [];
-        const all = (_f = (_e = (_d = this.api).getColumns) === null || _e === void 0 ? void 0 : _e.call(_d)) !== null && _f !== void 0 ? _f : [];
-        const displayedIds = new Set(displayed.map((column) => column.getColId()));
-        const ordered = [...displayed, ...all.filter((column) => !displayedIds.has(column.getColId()))];
-        const items = getPickerItems(ordered);
-        const allVisibleIds = items.filter((item) => item.visible).map((item) => item.colId);
-        const { selected } = partitionPickerItems(items, this.search);
-        const nextOrder = reorderVisibleIds(allVisibleIds, selected.map((item) => item.colId), fromId, toId);
-        if (!nextOrder) {
-            return;
-        }
-        this.api.applyColumnState({
-            state: applyVisibleOrder(this.api.getColumnState(), nextOrder),
-            applyOrder: true,
-        });
-    }
-}

package/dist/esm/columns-tool-panel/columns-tool-panel.utils.js

@@ -1,129 +0,0 @@
-import { GridProToolPanelTypes } from '../grid-pro.types';
-export const gridProColumnsToolPanelDef = {
-    id: 'columns',
-    labelDefault: 'Columns',
-    labelKey: 'columns',
-    iconKey: 'columns',
-    toolPanel: GridProToolPanelTypes.columns,
-};
-const filtersToolPanelDef = {
-    id: 'filters',
-    labelDefault: 'Filters',
-    labelKey: 'filters',
-    iconKey: 'filter',
-    toolPanel: 'agFiltersToolPanel',
-};
-export function toPickerItem(col) {
-    const colDef = col.getColDef();
-    if (colDef.suppressColumnsToolPanel) {
-        return null;
-    }
-    if (typeof col.isPrimary === 'function' && !col.isPrimary()) {
-        return null;
-    }
-    const colId = col.getColId();
-    const headerName = String(colDef.headerName || colDef.field || colId || '');
-    return {
-        colId,
-        headerName,
-        visible: col.isVisible(),
-        lockVisible: Boolean(colDef.lockVisible),
-    };
-}
-export function getPickerItems(columns) {
-    return columns.map(toPickerItem).filter((item) => item != null);
-}
-export function partitionPickerItems(items, search) {
-    const query = search.trim().toLowerCase();
-    const matches = (item) => !query || item.headerName.toLowerCase().includes(query);
-    return {
-        selected: items.filter((item) => item.visible && matches(item)),
-        unselected: items
-            .filter((item) => !item.visible && matches(item))
-            .sort((a, b) => a.headerName.localeCompare(b.headerName, undefined, { sensitivity: 'base' })),
-    };
-}
-export function reorderVisibleIds(allVisibleIds, shownIds, fromId, toId) {
-    const shown = [...shownIds];
-    const fromIndex = shown.indexOf(fromId);
-    const toIndex = shown.indexOf(toId);
-    if (fromIndex < 0 || toIndex < 0 || fromId === toId) {
-        return null;
-    }
-    shown.splice(fromIndex, 1);
-    shown.splice(toIndex, 0, fromId);
-    let index = 0;
-    return allVisibleIds.map((id) => {
-        if (!shownIds.includes(id)) {
-            return id;
-        }
-        const nextId = shown[index];
-        index += 1;
-        return nextId;
-    });
-}
-export function applyVisibleOrder(columnState, visibleOrder) {
-    const byId = new Map(columnState.map((state) => [state.colId, state]));
-    let index = 0;
-    return columnState.map((state) => {
-        if (state.hide) {
-            return state;
-        }
-        const nextId = visibleOrder[index];
-        index += 1;
-        return (nextId && byId.get(nextId)) || state;
-    });
-}
-function isColumnsToolPanel(panel) {
-    if (panel === 'columns' || panel === 'agColumnsToolPanel') {
-        return true;
-    }
-    if (typeof panel === 'string') {
-        return false;
-    }
-    return (panel.toolPanel === 'agColumnsToolPanel' ||
-        panel.toolPanel === GridProToolPanelTypes.columns ||
-        panel.id === 'columns');
-}
-function toColumnsToolPanel(panel) {
-    if (typeof panel === 'string') {
-        return Object.assign({}, gridProColumnsToolPanelDef);
-    }
-    return Object.assign(Object.assign(Object.assign({}, gridProColumnsToolPanelDef), panel), { toolPanel: GridProToolPanelTypes.columns });
-}
-/**
- * Rewrites `sideBar: ['columns']` / `agColumnsToolPanel` to the custom Grid Pro picker.
- */
-export function resolveGridProSideBar(sideBar) {
-    var _a;
-    if (!sideBar) {
-        return sideBar;
-    }
-    if (sideBar === true || sideBar === 'true') {
-        return {
-            toolPanels: [gridProColumnsToolPanelDef, filtersToolPanelDef],
-            defaultToolPanel: 'filters',
-        };
-    }
-    if (sideBar === 'columns' || sideBar === 'agColumnsToolPanel') {
-        return { toolPanels: [gridProColumnsToolPanelDef] };
-    }
-    if (typeof sideBar === 'string') {
-        return sideBar;
-    }
-    if (Array.isArray(sideBar)) {
-        if (!sideBar.some(isColumnsToolPanel)) {
-            return sideBar;
-        }
-        return {
-            toolPanels: sideBar.map((panel) => isColumnsToolPanel(panel) ? toColumnsToolPanel(panel) : panel),
-        };
-    }
-    if (!((_a = sideBar.toolPanels) === null || _a === void 0 ? void 0 : _a.length)) {
-        return sideBar;
-    }
-    if (!sideBar.toolPanels.some(isColumnsToolPanel)) {
-        return sideBar;
-    }
-    return Object.assign(Object.assign({}, sideBar), { toolPanels: sideBar.toolPanels.map((panel) => isColumnsToolPanel(panel) ? toColumnsToolPanel(panel) : panel) });
-}

package/dist/esm/columns-tool-panel/index.js

@@ -1,2 +0,0 @@
-export * from './columns-tool-panel';
-export * from './columns-tool-panel.utils';