@genesislcap/grid-pro 15.13.1 → 15.14.0-FUI-2601.2

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

@@ -0,0 +1,312 @@
+import { __decorate } from "tslib";
+import { DOM, attr, customElement, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { columnsToolPanelStyles as styles } from './columns-tool-panel.styles';
+import { columnsToolPanelTemplate } from './columns-tool-panel.template';
+import { applyVisibleOrder, getPickerItems, partitionPickerItems, reorderVisibleIds, } from './columns-tool-panel.utils';
+/**
+ * Custom columns tool panel. Replaces AG Grid Enterprise `agColumnsToolPanel`.
+ *
+ * @public
+ * @remarks
+ * Registered as `gridProColumnsToolPanel` (`GridProToolPanelTypes.columns`).
+ * `resolveGridProSideBar` rewrites `sideBar: ['columns']` / `agColumnsToolPanel` to this
+ * component when using AG's Enterprise `SideBarModule`.
+ *
+ * Prefer mounting via `with-side-bar` on {@link GridProBeta} for a Community-only UI
+ * that does not register any AG Enterprise modules.
+ *
+ * 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.
+ *
+ * HTML Element: \<grid-pro-columns-tool-panel\>
+ */
+let ColumnsToolPanel = class ColumnsToolPanel extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.prefix = 'foundation';
+        /** 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;
+        /** Optimistic visibility while the grid applies setColumnsVisible. */
+        this.pendingVisibility = new Map();
+        this.search = '';
+        this.selectedItems = [];
+        this.unselectedItems = [];
+        /** Stable listener refs so `destroy` can remove the same functions `init` added. */
+        this.boundRefresh = () => this.refresh();
+    }
+    /** Drag reorder is only allowed on the full visible list (no active search). */
+    get canDrag() {
+        return !this.search.trim();
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        const sideBarPrefix = (_a = this.closest('grid-pro-side-bar')) === null || _a === void 0 ? void 0 : _a.getAttribute('prefix');
+        if (sideBarPrefix && sideBarPrefix !== this.prefix) {
+            this.prefix = sideBarPrefix;
+        }
+        this.classList.add('grid-pro-columns-tool-panel');
+        this.setAttribute('data-test-id', 'grid-pro-columns-tool-panel');
+        this.refresh();
+    }
+    /**
+     * AG Grid `IToolPanelComp` entry. 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.api.addEventListener('columnVisible', this.boundRefresh);
+        this.api.addEventListener('columnMoved', this.boundRefresh);
+        this.api.addEventListener('newColumnsLoaded', this.boundRefresh);
+        this.api.addEventListener('displayedColumnsChanged', this.boundRefresh);
+        this.refresh();
+    }
+    /**
+     * 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;
+        if (!this.api) {
+            return;
+        }
+        const activeElement = document.activeElement;
+        const activeTestId = activeElement && this.contains(activeElement)
+            ? activeElement.getAttribute('data-test-id')
+            : null;
+        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()));
+        // Displayed first (current visual order), then any non-displayed columns.
+        const ordered = [...displayed, ...all.filter((column) => !displayedIds.has(column.getColId()))];
+        const items = this.applyPendingVisibility(getPickerItems(ordered));
+        const { selected, unselected } = partitionPickerItems(items, this.search);
+        this.selectedItems = selected;
+        this.unselectedItems = unselected;
+        if (activeTestId) {
+            DOM.queueUpdate(() => {
+                var _a;
+                (_a = this.querySelector(`[data-test-id="${activeTestId}"]`)) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        DOM.queueUpdate(() => this.bindSelectedRowDrag());
+    }
+    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 });
+        });
+    }
+    /** HTML5 drag on visible row handles only (disabled while search is active). */
+    bindSelectedRowDrag() {
+        var _a;
+        (_a = this.dragBindingAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        this.dragBindingAbort = null;
+        if (!this.canDrag) {
+            return;
+        }
+        const rows = this.querySelectorAll('[data-test-id="grid-pro-columns-selected"] .grid-pro-columns-item');
+        if (!rows.length) {
+            return;
+        }
+        const abort = new AbortController();
+        this.dragBindingAbort = abort;
+        const { signal } = abort;
+        rows.forEach((row) => {
+            const colId = row.dataset.colId;
+            const handle = row.querySelector('.grid-pro-columns-handle');
+            if (!colId || !handle || handle.hidden) {
+                return;
+            }
+            handle.draggable = true;
+            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 });
+        });
+    }
+    /** Root element AG Grid mounts into the sidebar. */
+    getGui() {
+        return this;
+    }
+    destroy() {
+        var _a;
+        (_a = this.dragBindingAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        this.dragBindingAbort = null;
+        this.pendingVisibility.clear();
+        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;
+    }
+    /**
+     * @internal
+     */
+    onSearchInput(value) {
+        this.search = value;
+        this.refresh();
+    }
+    /**
+     * @internal
+     */
+    onCheckboxClick(item, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.onVisibilityChange(item, !item.visible);
+    }
+    /**
+     * @internal
+     */
+    onVisibilityChange(item, visible) {
+        if (item.lockVisible || !this.api || item.visible === visible) {
+            return;
+        }
+        this.pendingVisibility.set(item.colId, visible);
+        this.api.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() {
+        this.dragColId = null;
+        this.clearDragOverHighlight();
+        this.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;
+        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,
+        });
+    }
+};
+__decorate([
+    attr
+], ColumnsToolPanel.prototype, "prefix", void 0);
+__decorate([
+    observable
+], ColumnsToolPanel.prototype, "search", void 0);
+__decorate([
+    observable
+], ColumnsToolPanel.prototype, "selectedItems", void 0);
+__decorate([
+    observable
+], ColumnsToolPanel.prototype, "unselectedItems", void 0);
+ColumnsToolPanel = __decorate([
+    customElement({
+        name: 'grid-pro-columns-tool-panel',
+        template: columnsToolPanelTemplate,
+        styles,
+        shadowOptions: null,
+    })
+], ColumnsToolPanel);
+export { ColumnsToolPanel };

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

@@ -0,0 +1,122 @@
+import { css } from '@microsoft/fast-element';
+/**
+ * Styles for {@link ColumnsToolPanel}.
+ * Class selectors only — the element has no shadow root so styles land on the
+ * parent root (Grid Pro shadow / document); `:host` would target the wrong node.
+ * @public
+ */
+export const columnsToolPanelStyles = css `
+  .grid-pro-columns-tool-panel {
+    display: flex;
+    flex-grow: 1;
+    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-wrap {
+    flex: 0 0 auto;
+    width: 100%;
+    margin-bottom: 8px;
+  }
+
+  .grid-pro-columns-search-wrap > * {
+    flex: 0 0 auto !important;
+    height: auto !important;
+    min-height: 0 !important;
+    width: 100%;
+  }
+
+  .grid-pro-columns-search {
+    width: 100%;
+    display: block;
+  }
+
+  .grid-pro-columns-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1 1 0;
+    min-height: 0;
+    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-divider[hidden] {
+    display: none;
+  }
+
+  .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.dragging {
+    opacity: 0.5;
+  }
+
+  .grid-pro-columns-item.drag-over {
+    background: var(--ag-row-hover-color, var(--neutral-fill-hover));
+  }
+
+  .grid-pro-columns-handle {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    min-height: 24px;
+    margin: -4px 0;
+    padding: 4px 6px;
+    box-sizing: border-box;
+    opacity: 0.45;
+    letter-spacing: -1px;
+    font-size: 12px;
+    line-height: 1;
+    touch-action: none;
+  }
+
+  .grid-pro-columns-handle[draggable='true'] {
+    cursor: grab;
+  }
+
+  .grid-pro-columns-handle[draggable='true']:active {
+    cursor: grabbing;
+  }
+
+  .grid-pro-columns-item--unselected .grid-pro-columns-handle,
+  .grid-pro-columns-handle[hidden] {
+    visibility: hidden;
+  }
+
+  .grid-pro-columns-checkbox {
+    flex: 0 0 auto;
+  }
+
+  .grid-pro-columns-checkbox[aria-checked='true']:not([disabled]):hover::part(checked-indicator) {
+    fill: var(--foreground-on-accent-hover);
+  }
+
+  .grid-pro-columns-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;

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

@@ -0,0 +1,79 @@
+import { html, repeat } from '@microsoft/fast-element';
+/**
+ * Columns tool panel template with Design System prefix (`rapid-text-field`, etc.).
+ * @public
+ */
+export const getColumnsToolPanelTemplate = (prefix = 'foundation') => {
+    const textField = `${prefix}-text-field`;
+    const checkbox = `${prefix}-checkbox`;
+    return html `
+    <template>
+      <div class="grid-pro-columns-search-wrap">
+        <${textField}
+          class="grid-pro-columns-search"
+          placeholder="Search"
+          data-test-id="grid-pro-columns-search"
+          :value="${(x) => x.search}"
+          @input="${(x, c) => x.onSearchInput(c.event.target.value)}"
+        ></${textField}>
+      </div>
+      <div class="grid-pro-columns-list" data-test-id="grid-pro-columns-selected">
+        ${repeat((x) => x.selectedItems, html `
+            <div
+              class="grid-pro-columns-item"
+              data-col-id="${(x) => x.colId}"
+              data-test-id="${(x) => `grid-pro-columns-item-${x.colId}`}"
+            >
+              <span
+                class="grid-pro-columns-handle"
+                data-test-id="${(x) => `grid-pro-columns-handle-${x.colId}`}"
+                ?hidden="${(x, c) => !c.parent.canDrag}"
+                aria-hidden="${(x, c) => String(!c.parent.canDrag)}"
+              >
+                ⋮⋮
+              </span>
+              <${checkbox}
+                class="grid-pro-columns-checkbox"
+                data-test-id="${(x) => `grid-pro-columns-check-${x.colId}`}"
+                ?checked="${(x) => x.visible}"
+                ?disabled="${(x) => x.lockVisible}"
+                @click="${(x, c) => c.parent.onCheckboxClick(x, c.event)}"
+              ></${checkbox}>
+              <span class="grid-pro-columns-label">${(x) => x.headerName}</span>
+            </div>
+          `, { recycle: false })}
+      </div>
+      <div
+        class="grid-pro-columns-divider"
+        data-test-id="grid-pro-columns-divider"
+        ?hidden="${(x) => !x.selectedItems.length || !x.unselectedItems.length}"
+      ></div>
+      <div class="grid-pro-columns-list" data-test-id="grid-pro-columns-unselected">
+        ${repeat((x) => x.unselectedItems, html `
+            <div
+              class="grid-pro-columns-item grid-pro-columns-item--unselected"
+              data-col-id="${(x) => x.colId}"
+              data-test-id="${(x) => `grid-pro-columns-item-${x.colId}`}"
+            >
+              <span class="grid-pro-columns-handle" aria-hidden="true"></span>
+              <${checkbox}
+                class="grid-pro-columns-checkbox"
+                data-test-id="${(x) => `grid-pro-columns-check-${x.colId}`}"
+                ?checked="${(x) => x.visible}"
+                ?disabled="${(x) => x.lockVisible}"
+                @click="${(x, c) => c.parent.onCheckboxClick(x, c.event)}"
+              ></${checkbox}>
+              <span class="grid-pro-columns-label">${(x) => x.headerName}</span>
+            </div>
+          `, { recycle: false })}
+      </div>
+    </template>
+  `;
+};
+/**
+ * Default columns tool panel template (`foundation-*` components).
+ * @public
+ */
+export const columnsToolPanelTemplate = html `
+  ${(x) => getColumnsToolPanelTemplate(x.prefix || 'foundation')}
+`;

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

@@ -0,0 +1,129 @@
+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

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