@genesislcap/grid-pro 15.25.1 → 15.26.0

package/dist/esm/column-selection/column-selection.js

@@ -0,0 +1,620 @@
+import { __decorate } from "tslib";
+import { LifecycleMixin } from '@genesislcap/foundation-utils';
+import { attr, DOM, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { bindAgColumnPickerDrag } from './column-picker-ag-drag';
+import { applyVisibleOrder, COLUMN_PICKER_SORT_DEFAULT, getPickerItems, orderColumnsForPicker, partitionPickerItems, reorderVisibleIds, resolveColumnPickerSort, } from './column-picker.utils';
+import { columnSelectionStyles as styles } from './column-selection.styles';
+import { getColumnSelectionTemplate } from './column-selection.template';
+import { resolveColumnDragBridgeDirect, resolveColumnDragBridgeFromApi, } from './grid-pro-column-drag-bridge';
+import { resolveColumnsPickerApi } from './resolve-columns-picker-api';
+/** Max animation-frame retries while waiting for AG column-drag bridge beans. */
+const DRAG_BRIDGE_RETRY_MAX_ATTEMPTS = 30;
+/**
+ * Instance API storage — keeps a stable binding across LifecycleMixin + FAST
+ * field-init / suite isolation (plain `private` was null after connectPicker in CI).
+ */
+const pickerApiByElement = new WeakMap();
+/**
+ * Button + popover column picker for Grid Pro (Community).
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<%%prefix%%-column-selection\>
+ *
+ * Provide either `:gridApi` (AG v36) or `:gridHost` (Grid Pro element with `gridApi` / `columnApi`).
+ *
+ * The panel uses the Popover API (`popover="manual"`) so it paints in the top layer and is not
+ * clipped by layout ancestors with `overflow: hidden`. Placement is pure CSS (anchor positioning
+ * via `showPopover({ source })` + `position-area`).
+ *
+ * Layout: select-all + search → column list. Ordering via `sort`
+ * (`selected-first` default, or `ag-grid`). Checkboxes toggle visibility via
+ * `api.setColumnsVisible`; drag handles on hidden rows use AG native DnD onto the grid
+ * (`allowDragFromColumnsToolPanel`); visible rows reorder inside the picker via HTML5 drag.
+ *
+ * @tagname %%prefix%%-column-selection
+ */
+export class ColumnSelection extends LifecycleMixin(FoundationElement) {
+    constructor() {
+        super(...arguments);
+        /** Button label. */
+        this.label = 'Column Selection';
+        /**
+         * Column list ordering.
+         * - `selected-first` (default): visible first (grid display order), then hidden A–Z.
+         * - `ag-grid`: `api.getColumnState()` order (visible/hidden interleaved).
+         */
+        this.sort = COLUMN_PICKER_SORT_DEFAULT;
+        /** Whether the popover is open. */
+        this.open = false;
+        /** Optional explicit AG grid API (v36). */
+        this.gridApi = null;
+        /** Grid Pro host element; column API is bridged when needed. */
+        this.gridHost = null;
+        this.search = '';
+        this.selectedItems = [];
+        this.unselectedItems = [];
+        /** Master checkbox checked when every toggleable column is visible. */
+        this.selectAllChecked = false;
+        /** Master checkbox mixed when some (but not all) toggleable columns are visible. */
+        this.selectAllIndeterminate = false;
+        /** Resolved sort; kept in sync with `@attr sort`. */
+        this.resolvedSort = COLUMN_PICKER_SORT_DEFAULT;
+        /** Source colId while a visible-row drag is in progress. */
+        this.dragColId = null;
+        /** Row currently showing drag-over highlight (avoid observable updates mid-drag). */
+        this.dragOverElement = null;
+        /** Cancels row drag listeners when the selected list re-renders. */
+        this.dragBindingAbort = null;
+        /** AG ToolPanel drag sources registered on hidden-row handles (grid drop). */
+        this.agDragBindings = [];
+        /** Shared DnD bridge from Grid Pro. */
+        this.columnDragBridge = null;
+        /** Retries `bindRowDrag` until the DnD bridge is populated. */
+        this.dragBridgeRetryId = 0;
+        /** Optimistic visibility while the grid applies setColumnsVisible. */
+        this.pendingVisibility = new Map();
+        /** Stable listener refs so close/disconnect can remove the same functions. */
+        this.boundRefresh = () => this.refresh();
+        this.handleClickOutside = (event) => {
+            if (!this.open || !this.root || !event.isTrusted) {
+                return;
+            }
+            if (!event.composedPath().includes(this.root)) {
+                this.open = false;
+            }
+        };
+    }
+    get pickerApi() {
+        var _a;
+        return (_a = pickerApiByElement.get(this)) !== null && _a !== void 0 ? _a : null;
+    }
+    set pickerApi(api) {
+        pickerApiByElement.set(this, api);
+    }
+    /** Query root for picker DOM (shadow panel). */
+    get pickerRoot() {
+        var _a;
+        return (_a = this.panelEl) !== null && _a !== void 0 ? _a : null;
+    }
+    /** Drag reorder / grid drop disabled while search filter is active. */
+    get canDrag() {
+        return !this.search.trim();
+    }
+    /** Handle is draggable onto the grid (hidden columns, or all when using ag-grid sort). */
+    canDragToGrid(item) {
+        if (!this.canDrag || item.lockVisible) {
+            return false;
+        }
+        if (this.resolvedSort === 'ag-grid') {
+            return true;
+        }
+        return !item.visible;
+    }
+    /** Columns in the current (search-filtered) picker lists that can be toggled. */
+    get toggleableItems() {
+        return [...this.selectedItems, ...this.unselectedItems].filter((item) => !item.lockVisible);
+    }
+    openChanged(oldValue) {
+        // Skip field-init notification before other private fields are constructed.
+        if (oldValue === undefined || !this.$fastController.isConnected) {
+            return;
+        }
+        if (this.open) {
+            DOM.queueUpdate(() => {
+                this.subscribePicker();
+                this.refresh();
+                this.showPanel();
+                // Defer listener — showPopover can emit a same-turn mousedown outside the root.
+                requestAnimationFrame(() => {
+                    if (this.open) {
+                        document.addEventListener('mousedown', this.handleClickOutside);
+                    }
+                });
+            });
+        }
+        else {
+            document.removeEventListener('mousedown', this.handleClickOutside);
+            this.unsubscribePicker();
+            this.hidePanel();
+        }
+    }
+    sortChanged() {
+        this.resolvedSort = resolveColumnPickerSort(this.sort);
+        if (this.open) {
+            this.refresh();
+        }
+    }
+    gridApiChanged() {
+        if (this.open) {
+            this.resubscribePicker();
+        }
+    }
+    gridHostChanged() {
+        if (this.open) {
+            this.resubscribePicker();
+        }
+    }
+    panelElChanged() {
+        if (this.open) {
+            DOM.queueUpdate(() => {
+                this.refresh();
+                this.showPanel();
+            });
+        }
+    }
+    /**
+     * Subscribe to grid column events and rebuild picker lists.
+     * Called automatically when the popover opens; exposed for tests/hosts that need an early bind.
+     * @internal
+     */
+    connectPicker() {
+        this.subscribePicker();
+        this.refresh();
+    }
+    /**
+     * Opens or closes the popover.
+     * @public
+     */
+    toggle() {
+        this.open = !this.open;
+    }
+    /**
+     * Closes the popover.
+     * @public
+     */
+    close() {
+        this.open = false;
+    }
+    /**
+     * Rebuilds picker lists from current grid column state.
+     */
+    refresh() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        this.resolvedSort = resolveColumnPickerSort(this.sort);
+        if (!this.pickerApi) {
+            return;
+        }
+        const root = this.pickerRoot;
+        const activeElement = document.activeElement;
+        const activeTestId = activeElement && (root === null || root === void 0 ? void 0 : root.contains(activeElement))
+            ? activeElement.getAttribute('data-test-id')
+            : null;
+        const displayed = (_c = (_b = (_a = this.pickerApi).getAllDisplayedColumns) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : [];
+        const all = (_f = (_e = (_d = this.pickerApi).getColumns) === null || _e === void 0 ? void 0 : _e.call(_d)) !== null && _f !== void 0 ? _f : [];
+        const columnState = (_j = (_h = (_g = this.pickerApi).getColumnState) === null || _h === void 0 ? void 0 : _h.call(_g)) !== null && _j !== void 0 ? _j : [];
+        const ordered = orderColumnsForPicker(displayed, all, this.resolvedSort, columnState);
+        const items = this.applyPendingVisibility(getPickerItems(ordered));
+        const { selected, unselected } = partitionPickerItems(items, this.search, this.resolvedSort);
+        this.selectedItems = selected;
+        this.unselectedItems = unselected;
+        this.syncSelectAllState();
+        if (activeTestId && root) {
+            DOM.queueUpdate(() => {
+                var _a;
+                (_a = root.querySelector(`[data-test-id="${activeTestId}"]`)) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        DOM.queueUpdate(() => {
+            this.bindRowDrag();
+        });
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+        this.hidePanel();
+        this.unsubscribePicker();
+        this.open = false;
+        super.disconnectedCallback();
+    }
+    showPanel() {
+        const panel = this.panelEl;
+        if (!panel || typeof panel.showPopover !== 'function') {
+            return;
+        }
+        if (panel.matches(':popover-open')) {
+            return;
+        }
+        // `source` sets the implicit CSS anchor for position-area / anchor().
+        try {
+            panel.showPopover({
+                source: this.buttonEl,
+            });
+        }
+        catch (_a) {
+            panel.showPopover();
+        }
+    }
+    hidePanel() {
+        const panel = this.panelEl;
+        if (!panel || typeof panel.hidePopover !== 'function') {
+            return;
+        }
+        if (panel.matches(':popover-open')) {
+            panel.hidePopover();
+        }
+    }
+    subscribePicker() {
+        var _a, _b, _c;
+        const api = resolveColumnsPickerApi(this.gridHost, this.gridApi);
+        if (api && this.pickerApi === api) {
+            return;
+        }
+        this.unsubscribePicker();
+        if (!api) {
+            return;
+        }
+        this.pickerApi = api;
+        this.columnDragBridge = (_c = (_b = (_a = this.gridHost) === null || _a === void 0 ? void 0 : _a.getColumnDragBridge) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : null;
+        this.resolvedSort = resolveColumnPickerSort(this.sort);
+        this.pickerApi.addEventListener('columnVisible', this.boundRefresh);
+        this.pickerApi.addEventListener('columnMoved', this.boundRefresh);
+        this.pickerApi.addEventListener('newColumnsLoaded', this.boundRefresh);
+        this.pickerApi.addEventListener('displayedColumnsChanged', this.boundRefresh);
+    }
+    resubscribePicker() {
+        this.subscribePicker();
+        this.refresh();
+    }
+    unsubscribePicker() {
+        var _a;
+        this.dragBridgeRetryId += 1;
+        (_a = this.dragBindingAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        this.dragBindingAbort = null;
+        for (const binding of this.agDragBindings) {
+            binding.remove();
+        }
+        this.agDragBindings = [];
+        this.pendingVisibility.clear();
+        if (this.pickerApi) {
+            this.pickerApi.removeEventListener('columnVisible', this.boundRefresh);
+            this.pickerApi.removeEventListener('columnMoved', this.boundRefresh);
+            this.pickerApi.removeEventListener('newColumnsLoaded', this.boundRefresh);
+            this.pickerApi.removeEventListener('displayedColumnsChanged', this.boundRefresh);
+        }
+        this.pickerApi = null;
+    }
+    syncSelectAllState() {
+        const items = this.toggleableItems;
+        const visibleCount = items.filter((item) => item.visible).length;
+        this.selectAllChecked = items.length > 0 && visibleCount === items.length;
+        this.selectAllIndeterminate = visibleCount > 0 && visibleCount < items.length;
+    }
+    applyPendingVisibility(items) {
+        if (!this.pendingVisibility.size) {
+            return items;
+        }
+        return items.map((item) => {
+            const pending = this.pendingVisibility.get(item.colId);
+            if (pending === undefined) {
+                return item;
+            }
+            if (item.visible === pending) {
+                this.pendingVisibility.delete(item.colId);
+            }
+            return Object.assign(Object.assign({}, item), { visible: pending });
+        });
+    }
+    resolveDragBridge() {
+        var _a;
+        return ((_a = resolveColumnDragBridgeDirect(this.columnDragBridge)) !== null && _a !== void 0 ? _a : resolveColumnDragBridgeFromApi(this.pickerApi));
+    }
+    /**
+     * Visible rows: HTML5 reorder inside the picker.
+     * Hidden rows (or all rows when `sort=ag-grid`): AG ToolPanel drag onto the grid header.
+     */
+    bindRowDrag() {
+        var _a;
+        (_a = this.dragBindingAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        this.dragBindingAbort = null;
+        for (const binding of this.agDragBindings) {
+            binding.remove();
+        }
+        this.agDragBindings = [];
+        const root = this.pickerRoot;
+        if (!this.canDrag || !this.pickerApi || !root) {
+            return;
+        }
+        const bridge = this.resolveDragBridge();
+        const rows = root.querySelectorAll('.grid-pro-columns-item');
+        if (!rows.length) {
+            return;
+        }
+        const abort = new AbortController();
+        this.dragBindingAbort = abort;
+        const { signal } = abort;
+        let needsBridgeRetry = false;
+        let boundGridDrag = false;
+        rows.forEach((row) => {
+            const colId = row.dataset.colId;
+            const handle = row.querySelector('.grid-pro-columns-handle');
+            if (!colId || !handle) {
+                return;
+            }
+            handle.classList.remove('grid-pro-columns-handle-grid-drag', 'grid-pro-columns-handle-panel-drag');
+            handle.removeAttribute('draggable');
+            const item = [...this.selectedItems, ...this.unselectedItems].find((i) => i.colId === colId);
+            if (!item) {
+                return;
+            }
+            const dragToGrid = this.canDragToGrid(item);
+            const reorderInPanel = this.resolvedSort === 'selected-first' &&
+                item.visible &&
+                !row.classList.contains('grid-pro-columns-item--unselected');
+            if (dragToGrid) {
+                if (bridge) {
+                    const binding = bindAgColumnPickerDrag(bridge, this.pickerApi, handle, colId, item.headerName);
+                    if (binding) {
+                        boundGridDrag = true;
+                        this.agDragBindings.push(binding);
+                        handle.classList.add('grid-pro-columns-handle-grid-drag');
+                        if (!reorderInPanel) {
+                            return;
+                        }
+                    }
+                }
+                else {
+                    needsBridgeRetry = true;
+                }
+            }
+            if (!reorderInPanel) {
+                return;
+            }
+            handle.draggable = true;
+            handle.classList.add('grid-pro-columns-handle-panel-drag');
+            handle.addEventListener('dragstart', (event) => {
+                this.onDragStart(event, colId, row);
+            }, { signal });
+            handle.addEventListener('dragend', () => this.onDragEnd(), { signal });
+            row.addEventListener('dragover', (event) => {
+                this.onDragOver(event, row);
+            }, { signal });
+            row.addEventListener('dragleave', (event) => {
+                this.onDragLeave(event, row);
+            }, { signal });
+            row.addEventListener('drop', (event) => {
+                this.onDrop(event, colId);
+            }, { signal });
+        });
+        if (needsBridgeRetry && !boundGridDrag) {
+            this.scheduleDragBridgeRetry();
+        }
+    }
+    scheduleDragBridgeRetry(attempt = 0) {
+        if (attempt > DRAG_BRIDGE_RETRY_MAX_ATTEMPTS || !this.pickerApi || !this.canDrag) {
+            return;
+        }
+        this.dragBridgeRetryId += 1;
+        const retryId = this.dragBridgeRetryId;
+        requestAnimationFrame(() => {
+            if (retryId !== this.dragBridgeRetryId || !this.isConnected) {
+                return;
+            }
+            if (this.resolveDragBridge()) {
+                this.bindRowDrag();
+                return;
+            }
+            this.scheduleDragBridgeRetry(attempt + 1);
+        });
+    }
+    /**
+     * @internal
+     */
+    onSearchInput(value) {
+        this.search = value;
+        this.refresh();
+    }
+    /**
+     * @internal
+     */
+    onSelectAllClick(event) {
+        var _a, _b;
+        (_a = event.preventDefault) === null || _a === void 0 ? void 0 : _a.call(event);
+        (_b = event.stopImmediatePropagation) === null || _b === void 0 ? void 0 : _b.call(event);
+        if (!this.pickerApi) {
+            return;
+        }
+        const items = this.toggleableItems;
+        if (!items.length) {
+            return;
+        }
+        const makeVisible = !this.selectAllChecked;
+        const ids = items.filter((item) => item.visible !== makeVisible).map((item) => item.colId);
+        if (!ids.length) {
+            return;
+        }
+        for (const id of ids) {
+            this.pendingVisibility.set(id, makeVisible);
+        }
+        this.pickerApi.setColumnsVisible(ids, makeVisible);
+        this.refresh();
+    }
+    /**
+     * @internal
+     */
+    onCheckboxClick(item, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.onVisibilityChange(item, !item.visible);
+    }
+    /**
+     * @internal
+     */
+    onVisibilityChange(item, visible) {
+        if (item.lockVisible || !this.pickerApi || item.visible === visible) {
+            return;
+        }
+        this.pendingVisibility.set(item.colId, visible);
+        this.pickerApi.setColumnsVisible([item.colId], visible);
+        this.refresh();
+    }
+    /**
+     * @internal
+     */
+    onDragStart(event, colId, row) {
+        if (!this.canDrag) {
+            event.preventDefault();
+            return;
+        }
+        this.dragColId = colId;
+        if (event.dataTransfer) {
+            event.dataTransfer.setData('text/plain', colId);
+            event.dataTransfer.effectAllowed = 'move';
+        }
+        (row !== null && row !== void 0 ? row : event.currentTarget).classList.add('dragging');
+    }
+    /**
+     * @internal
+     */
+    onDragEnd() {
+        var _a;
+        this.dragColId = null;
+        this.clearDragOverHighlight();
+        (_a = this.pickerRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.grid-pro-columns-item.dragging').forEach((row) => {
+            row.classList.remove('dragging');
+        });
+    }
+    /**
+     * @internal
+     */
+    onDragOver(event, row) {
+        var _a;
+        if (!this.canDrag) {
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+        if (this.dragOverElement !== row) {
+            (_a = this.dragOverElement) === null || _a === void 0 ? void 0 : _a.classList.remove('drag-over');
+            this.dragOverElement = row;
+            row.classList.add('drag-over');
+        }
+    }
+    /**
+     * @internal
+     */
+    onDragLeave(event, row) {
+        if (this.dragOverElement === row && !row.contains(event.relatedTarget)) {
+            row.classList.remove('drag-over');
+            this.dragOverElement = null;
+        }
+    }
+    /**
+     * @internal
+     */
+    onDrop(event, colId) {
+        var _a;
+        event.preventDefault();
+        this.clearDragOverHighlight();
+        const fromId = this.dragColId || ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain'));
+        if (fromId) {
+            this.reorderSelected(fromId, colId);
+        }
+    }
+    clearDragOverHighlight() {
+        var _a;
+        (_a = this.dragOverElement) === null || _a === void 0 ? void 0 : _a.classList.remove('drag-over');
+        this.dragOverElement = null;
+    }
+    /**
+     * 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, _g, _h, _j;
+        if (!this.pickerApi || !this.pickerApi.getColumnState || !this.pickerApi.applyColumnState) {
+            return;
+        }
+        const displayed = (_c = (_b = (_a = this.pickerApi).getAllDisplayedColumns) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : [];
+        const all = (_f = (_e = (_d = this.pickerApi).getColumns) === null || _e === void 0 ? void 0 : _e.call(_d)) !== null && _f !== void 0 ? _f : [];
+        const columnState = (_j = (_h = (_g = this.pickerApi).getColumnState) === null || _h === void 0 ? void 0 : _h.call(_g)) !== null && _j !== void 0 ? _j : [];
+        const ordered = orderColumnsForPicker(displayed, all, this.resolvedSort, columnState);
+        const items = getPickerItems(ordered);
+        const allVisibleIds = items.filter((item) => item.visible).map((item) => item.colId);
+        const { selected } = partitionPickerItems(items, this.search, this.resolvedSort);
+        const shownIds = this.resolvedSort === 'selected-first'
+            ? selected.map((item) => item.colId)
+            : selected.filter((item) => item.visible).map((item) => item.colId);
+        const nextOrder = reorderVisibleIds(allVisibleIds, shownIds, fromId, toId);
+        if (!nextOrder) {
+            return;
+        }
+        this.pickerApi.applyColumnState({
+            state: applyVisibleOrder(columnState, nextOrder),
+            applyOrder: true,
+        });
+    }
+}
+__decorate([
+    attr
+], ColumnSelection.prototype, "label", void 0);
+__decorate([
+    attr
+], ColumnSelection.prototype, "sort", void 0);
+__decorate([
+    observable
+], ColumnSelection.prototype, "open", void 0);
+__decorate([
+    observable
+], ColumnSelection.prototype, "gridApi", void 0);
+__decorate([
+    observable
+], ColumnSelection.prototype, "gridHost", void 0);
+__decorate([
+    observable
+], ColumnSelection.prototype, "root", void 0);
+__decorate([
+    observable
+], ColumnSelection.prototype, "buttonEl", void 0);
+__decorate([
+    observable
+], ColumnSelection.prototype, "panelEl", void 0);
+__decorate([
+    observable
+], ColumnSelection.prototype, "search", void 0);
+__decorate([
+    observable
+], ColumnSelection.prototype, "selectedItems", void 0);
+__decorate([
+    observable
+], ColumnSelection.prototype, "unselectedItems", void 0);
+__decorate([
+    observable
+], ColumnSelection.prototype, "selectAllChecked", void 0);
+__decorate([
+    observable
+], ColumnSelection.prototype, "selectAllIndeterminate", void 0);
+/**
+ * Foundation Column Selection registration.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-column-selection\>
+ */
+export const foundationColumnSelection = ColumnSelection.compose({
+    baseName: 'column-selection',
+    template: getColumnSelectionTemplate('foundation'),
+    styles,
+});