@genesislcap/grid-pro 15.25.0 → 15.26.0

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

@@ -0,0 +1,236 @@
+import { css } from '@microsoft/fast-element';
+/**
+ * Styles for {@link ColumnSelection}.
+ * @public
+ */
+export const columnSelectionStyles = css `
+  :host {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .column-selection {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .column-selection-button[data-state='hover'] {
+    background: var(--neutral-fill-hover);
+  }
+
+  .column-selection-panel,
+  .column-selection-panel *,
+  .column-selection-panel *::before,
+  .column-selection-panel *::after {
+    box-sizing: border-box;
+  }
+
+  .column-selection-panel {
+    inset: unset;
+    margin: 0;
+    box-sizing: border-box;
+    width: 280px;
+    max-width: min(280px, 90vw);
+    max-height: 80dvh;
+    overflow-y: auto;
+    border: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
+    border-radius: calc(var(--control-corner-radius, 4) * 1px);
+    background: var(--neutral-layer-floating, var(--neutral-layer-2, #fff));
+    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
+    padding: 0;
+
+    position-area: block-end span-inline-start;
+    position-try-fallbacks: flip-block, flip-inline;
+    margin-block-start: calc(var(--design-unit, 4) * 1px);
+
+    min-width: 200px;
+    color: var(--ag-foreground-color, var(--neutral-foreground-rest));
+    font-family: var(--ag-font-family, var(--body-font));
+    font-size: var(--ag-data-font-size, var(--type-ramp-minus-1-font-size));
+  }
+
+  .column-selection-panel:popover-open {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .grid-pro-columns-toolbar {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--design-unit) * 2px);
+    flex: none;
+    width: 100%;
+    height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
+    min-height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
+    margin: 0;
+    padding: 0 calc(var(--design-unit) * 2px);
+    border-bottom: var(--ag-borders-secondary, 1px solid)
+      var(--ag-secondary-border-color, var(--ag-border-color, var(--neutral-stroke-divider-rest)));
+  }
+
+  .grid-pro-columns-toolbar .grid-pro-columns-search {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto;
+    display: block;
+
+    --design-unit: 3;
+  }
+
+  .grid-pro-columns-toolbar > .grid-pro-columns-search {
+    flex: 1 1 auto !important;
+    height: auto !important;
+    min-height: 0 !important;
+  }
+
+  .grid-pro-columns-select-all {
+    flex: 0 0 auto;
+    margin: 0;
+
+    --design-unit: 3;
+  }
+
+  .grid-pro-columns-select-all.indeterminate::part(control),
+  .grid-pro-columns-select-all[aria-checked='mixed']::part(control) {
+    background: var(--neutral-fill-strong-rest, var(--neutral-stroke-rest, #9aa0a6));
+    border-color: var(--neutral-fill-strong-rest, var(--neutral-stroke-rest, #9aa0a6));
+  }
+
+  .grid-pro-columns-select-all.indeterminate:not([disabled]):hover::part(control),
+  .grid-pro-columns-select-all[aria-checked='mixed']:not([disabled]):hover::part(control) {
+    background: var(--neutral-fill-strong-hover, var(--neutral-stroke-hover, #7d848c));
+    border-color: var(--neutral-fill-strong-hover, var(--neutral-stroke-hover, #7d848c));
+  }
+
+  .grid-pro-columns-select-all.indeterminate::part(checked-indicator),
+  .grid-pro-columns-select-all[aria-checked='mixed']::part(checked-indicator) {
+    opacity: 0%;
+  }
+
+  .grid-pro-columns-select-all.indeterminate::part(indeterminate-indicator),
+  .grid-pro-columns-select-all[aria-checked='mixed']::part(indeterminate-indicator) {
+    width: 10px;
+    height: 2px;
+    border-radius: 1px;
+    background: var(--neutral-fill-input-rest, #fff);
+    opacity: 100%;
+  }
+
+  .grid-pro-columns-select-all.indeterminate:not([disabled]):hover::part(indeterminate-indicator),
+  .grid-pro-columns-select-all[aria-checked='mixed']:not([disabled]):hover::part(
+      indeterminate-indicator
+    ) {
+    background: var(--neutral-fill-input-rest, #fff);
+  }
+
+  .grid-pro-columns-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1 1 0;
+    min-height: 250px;
+    max-height: 400px;
+    padding: 8px;
+  }
+
+  .grid-pro-columns-section {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 0 0 auto;
+  }
+
+  .grid-pro-columns-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 0;
+    border-radius: 4px;
+    cursor: default;
+    user-select: none;
+  }
+
+  .grid-pro-columns-item.dragging {
+    opacity: 50%;
+  }
+
+  .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: 45%;
+    letter-spacing: -1px;
+    font-size: 12px;
+    line-height: 1;
+    touch-action: none;
+  }
+
+  .grid-pro-columns-handle[draggable='true'],
+  .grid-pro-columns-handle.grid-pro-columns-handle-grid-drag,
+  .grid-pro-columns-handle.grid-pro-columns-handle-panel-drag {
+    cursor: grab;
+    opacity: 65%;
+  }
+
+  .grid-pro-columns-handle[draggable='true']:active,
+  .grid-pro-columns-handle.grid-pro-columns-handle-grid-drag:active,
+  .grid-pro-columns-handle.grid-pro-columns-handle-panel-drag:active {
+    cursor: grabbing;
+  }
+
+  .grid-pro-columns-checkbox {
+    flex: 0 0 auto;
+    margin: 0;
+
+    --design-unit: 3;
+  }
+
+  .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;
+  }
+`;
+/**
+ * Host layout when the Grid Pro column-selection toolbar is shown.
+ * @public
+ */
+export const gridProColumnSelectionHostStyles = css `
+  :host(.has-column-selection) {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  :host(.has-column-selection) [part='grid'] {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  .grid-pro-column-selection-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(var(--design-unit, 4) * 2px);
+    width: 100%;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    padding: calc(var(--design-unit, 4) * 2px);
+    border-bottom: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
+    background: var(--neutral-layer-1, transparent);
+  }
+`;

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

@@ -0,0 +1,96 @@
+import { html, ref, repeat } from '@microsoft/fast-element';
+/**
+ * Column Selection button + popover with embedded picker UI.
+ * @param prefix - Design-system prefix for button/icon/checkbox/text-field.
+ * @public
+ */
+export const getColumnSelectionTemplate = (prefix = 'foundation') => {
+    const textField = `${prefix}-text-field`;
+    const checkbox = `${prefix}-checkbox`;
+    const columnRow = html `
+    <div
+      class="${(x) => `grid-pro-columns-item${x.visible ? '' : ' grid-pro-columns-item--unselected'}`}"
+      data-col-id="${(x) => x.colId}"
+      data-test-id="${(x) => `grid-pro-columns-item-${x.colId}`}"
+    >
+      <${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-handle"
+        data-test-id="${(x) => `grid-pro-columns-handle-${x.colId}`}"
+        aria-hidden="${(x, c) => {
+        const panel = c.parent;
+        return String(!(panel.canDrag && (x.visible || panel.canDragToGrid(x))));
+    }}"
+      >
+        ⋮⋮
+      </span>
+      <span class="grid-pro-columns-label">${(x) => x.headerName}</span>
+    </div>
+  `;
+    return html `
+    <div
+      class="column-selection"
+      part="column-selection"
+      data-test-id="column-selection"
+      ${ref('root')}
+    >
+      <${prefix}-button
+        ${ref('buttonEl')}
+        part="column-selection-button"
+        exportparts="control: column-selection-button-control, content: column-selection-button-content"
+        class="column-selection-button"
+        appearance="neutral"
+        data-state="${(x) => (x.open ? 'hover' : undefined)}"
+        aria-pressed="${(x) => (x.open ? 'true' : 'false')}"
+        @click=${(x) => x.toggle()}
+      >
+        <${prefix}-icon size="lg" name="columns" slot="start"></${prefix}-icon>
+        ${(x) => x.label}
+      </${prefix}-button>
+      <div
+        ${ref('panelEl')}
+        class="column-selection-panel"
+        part="column-selection-panel"
+        data-test-id="column-selection-panel"
+        popover="manual"
+      >
+        <div class="grid-pro-columns-toolbar" data-test-id="grid-pro-columns-toolbar">
+          <${checkbox}
+            class="grid-pro-columns-select-all"
+            data-test-id="grid-pro-columns-select-all"
+            :checked="${(x) => x.selectAllChecked}"
+            :indeterminate="${(x) => x.selectAllIndeterminate}"
+            aria-checked="${(x) => x.selectAllIndeterminate ? 'mixed' : x.selectAllChecked ? 'true' : 'false'}"
+            @click="${(x, c) => x.onSelectAllClick(c.event)}"
+          ></${checkbox}>
+          <${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-list">
+          <div class="grid-pro-columns-section" data-test-id="grid-pro-columns-selected">
+            ${repeat((x) => x.selectedItems, columnRow, { recycle: false })}
+          </div>
+          <div class="grid-pro-columns-section" data-test-id="grid-pro-columns-unselected">
+            ${repeat((x) => x.unselectedItems, columnRow, { recycle: false })}
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+};
+/**
+ * Default column selection template (`foundation-*` components).
+ * @public
+ */
+export const columnSelectionTemplate = getColumnSelectionTemplate();

package/dist/esm/column-selection/grid-pro-column-drag-bridge.js

@@ -0,0 +1,62 @@
+import { _ColumnMoveModule as ColumnMoveModule, } from 'ag-grid-community';
+/** Context key on `gridOptions.context` for AG column drag integration.
+ * @public
+ */
+export const GRID_PRO_COLUMN_DRAG_BRIDGE_CONTEXT_KEY = 'gridProColumnDragBridge';
+/** @internal Writes DnD beans onto the shared bridge object in grid context. */
+export function syncColumnDragBridge(beans) {
+    var _a, _b;
+    if (!(beans === null || beans === void 0 ? void 0 : beans.dragAndDrop) || !beans.gos) {
+        return false;
+    }
+    const context = (_a = beans.gos.get('context')) !== null && _a !== void 0 ? _a : (_b = beans.gridOptions) === null || _b === void 0 ? void 0 : _b.context;
+    const bridge = context === null || context === void 0 ? void 0 : context[GRID_PRO_COLUMN_DRAG_BRIDGE_CONTEXT_KEY];
+    if (!bridge) {
+        return false;
+    }
+    bridge.dragAndDrop = beans.dragAndDrop;
+    bridge.gos = beans.gos;
+    return true;
+}
+/** @internal Populates {@link GridProColumnDragBridge} once core DnD beans exist. */
+class GridProColumnDragBridgeInit {
+    constructor() {
+        this.beanName = 'gridProColumnDragBridgeInit';
+        this.beans = null;
+    }
+    wireBeans(beans) {
+        this.beans = beans;
+    }
+    postConstruct() {
+        syncColumnDragBridge(this.beans);
+        queueMicrotask(() => syncColumnDragBridge(this.beans));
+    }
+}
+/**
+ * Registers drag-and-drop beans on `gridOptions.context` so custom tool panels
+ * can call `dragAndDrop.addDragSource` (same contract as Enterprise Columns panel).
+ * @internal
+ */
+export const gridProColumnDragBridgeModule = {
+    moduleName: 'GridProColumnDragBridge',
+    version: ColumnMoveModule.version,
+    beans: [GridProColumnDragBridgeInit],
+    dependsOn: [ColumnMoveModule],
+};
+/** @public */
+export function resolveColumnDragBridge(context) {
+    const bridge = context === null || context === void 0 ? void 0 : context[GRID_PRO_COLUMN_DRAG_BRIDGE_CONTEXT_KEY];
+    return resolveColumnDragBridgeDirect(bridge);
+}
+/** @public */
+export function resolveColumnDragBridgeDirect(bridge) {
+    if (!(bridge === null || bridge === void 0 ? void 0 : bridge.dragAndDrop) || !(bridge === null || bridge === void 0 ? void 0 : bridge.gos)) {
+        return null;
+    }
+    return bridge;
+}
+/** @public */
+export function resolveColumnDragBridgeFromApi(api) {
+    var _a;
+    return resolveColumnDragBridge((_a = api === null || api === void 0 ? void 0 : api.getGridOption) === null || _a === void 0 ? void 0 : _a.call(api, 'context'));
+}

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

@@ -0,0 +1,7 @@
+export * from './column-selection';
+export * from './column-selection.styles';
+export * from './column-selection.template';
+export * from './resolve-columns-picker-api';
+export * from './column-picker.utils';
+export * from './grid-pro-column-drag-bridge';
+export * from './column-picker-ag-drag';

package/dist/esm/column-selection/resolve-columns-picker-api.js

@@ -0,0 +1,42 @@
+/**
+ * Resolves an AG `gridApi` suitable for {@link ColumnSelection}.
+ * Classic Grid Pro (v29) exposes column helpers on `columnApi` — bridge when needed.
+ * @public
+ */
+export function resolveColumnsPickerApi(gridHost, gridApi) {
+    const resolvedApi = (gridApi !== null && gridApi !== void 0 ? gridApi : gridHost === null || gridHost === void 0 ? void 0 : gridHost.gridApi);
+    if (!resolvedApi) {
+        return null;
+    }
+    if (typeof resolvedApi.setColumnsVisible === 'function' &&
+        typeof resolvedApi.getColumns === 'function') {
+        return resolvedApi;
+    }
+    const columnApi = gridHost === null || gridHost === void 0 ? void 0 : gridHost.columnApi;
+    if (!columnApi) {
+        return null;
+    }
+    return new Proxy(resolvedApi, {
+        get(target, prop, receiver) {
+            switch (prop) {
+                case 'getColumns':
+                    return () => { var _a, _b; return (_b = (_a = columnApi.getAllGridColumns) === null || _a === void 0 ? void 0 : _a.call(columnApi)) !== null && _b !== void 0 ? _b : []; };
+                case 'getAllDisplayedColumns':
+                    return () => { var _a, _b; return (_b = (_a = columnApi.getAllDisplayedColumns) === null || _a === void 0 ? void 0 : _a.call(columnApi)) !== null && _b !== void 0 ? _b : []; };
+                case 'getColumnState':
+                    return () => { var _a, _b; return (_b = (_a = columnApi.getColumnState) === null || _a === void 0 ? void 0 : _a.call(columnApi)) !== null && _b !== void 0 ? _b : []; };
+                case 'setColumnsVisible':
+                    return (ids, visible) => {
+                        var _a;
+                        for (const id of ids) {
+                            (_a = columnApi.setColumnVisible) === null || _a === void 0 ? void 0 : _a.call(columnApi, id, visible);
+                        }
+                    };
+                case 'applyColumnState':
+                    return (opts) => { var _a; return (_a = columnApi.applyColumnState) === null || _a === void 0 ? void 0 : _a.call(columnApi, opts); };
+                default:
+                    return Reflect.get(target, prop, receiver);
+            }
+        },
+    });
+}

package/dist/esm/grid-pro-beta.js

@@ -4,7 +4,7 @@ import { avoidTreeShaking, LifecycleMixin, respondToVisibility, } from '@genesis
 import { baseLayerLuminance, StandardLuminance } from '@microsoft/fast-components';
 import { attr, DOM, observable } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
-import { CellStyleModule, CheckboxEditorModule, ClientSideRowModelApiModule, ClientSideRowModelModule, ColumnApiModule, ColumnAutoSizeModule, createGrid, CsvExportModule, CustomEditorModule, CustomFilterModule, DateEditorModule, DateFilterModule, EventApiModule, HighlightChangesModule, InfiniteRowModelModule, ModuleRegistry, NumberEditorModule, NumberFilterModule, PaginationModule, RenderApiModule, RowApiModule, RowDragModule, RowSelectionModule, RowStyleModule, SelectEditorModule, TextEditorModule, TextFilterModule, TooltipModule, } from 'ag-grid-community';
+import { CellStyleModule, CheckboxEditorModule, ClientSideRowModelApiModule, ClientSideRowModelModule, ColumnApiModule, ColumnAutoSizeModule, createGrid, CsvExportModule, CustomEditorModule, CustomFilterModule, DateEditorModule, DateFilterModule, DragAndDropModule, EventApiModule, HighlightChangesModule, InfiniteRowModelModule, ModuleRegistry, NumberEditorModule, NumberFilterModule, PaginationModule, RenderApiModule, RowApiModule, RowDragModule, RowSelectionModule, RowStyleModule, SelectEditorModule, TextEditorModule, TextFilterModule, TooltipModule, _ColumnMoveModule as ColumnMoveModule, } from 'ag-grid-community';
 import * as changeCase from 'change-case';
 import debounce from 'lodash.debounce';
 import { GridProCell } from './cell';
@@ -12,6 +12,8 @@ import { DateEditor, MultiselectEditor, NumberEditor, SelectEditor, StringEditor
 import { ActionRenderer, ActionsMenuRenderer, BooleanRenderer, EditableRenderer, IconRenderer, SelectRenderer, StatusPillRenderer, } from './cell-renderers';
 import { GridProColumn, resolveVisibleColumnFields } from './column';
 import { EnumColumnFilter, EnumColumnFloatingFilter, GridProFilterTypes } from './column-filters';
+import { ColumnSelection } from './column-selection';
+import { GRID_PRO_COLUMN_DRAG_BRIDGE_CONTEXT_KEY, gridProColumnDragBridgeModule, } from './column-selection/grid-pro-column-drag-bridge';
 import { GridProClientSideDatasource, GridProInfiniteDatasource, GridProServerSideDatasource, } from './datasource';
 import { baseDatasourceEventNames } from './datasource/base.types';
 import { GridProGenesisDatasource, gridProGenesisDatasourceEventNames, } from './grid-pro-genesis-datasource';
@@ -22,7 +24,7 @@ import { StatePersistence } from './state-persistence';
 import { LabelValueStatusBarComponent, LoadMoreStatusBarComponent, ReloadStatusBarComponent, RowCountStatusBarComponent, } from './status-bar-components';
 import { ErrorTooltip } from './tooltips';
 import { convertToKebabCase, logger, mergeAndDedupColDefWithColumnState, sanitizeColumnState, } from './utils';
-avoidTreeShaking(GridProGenesisDatasource, GridProClientSideDatasource, GridProServerSideDatasource, GridProInfiniteDatasource, GridProCell, GridProColumn);
+avoidTreeShaking(GridProGenesisDatasource, GridProClientSideDatasource, GridProServerSideDatasource, GridProInfiniteDatasource, GridProCell, GridProColumn, ColumnSelection);
 ModuleRegistry.registerModules([
     CsvExportModule,
     ClientSideRowModelModule,
@@ -50,6 +52,9 @@ ModuleRegistry.registerModules([
     CheckboxEditorModule,
     CustomFilterModule,
     InfiniteRowModelModule,
+    DragAndDropModule,
+    ColumnMoveModule,
+    gridProColumnDragBridgeModule,
     // ValidationModule,
 ]);
 const DEBOUNCE_TIME = 400;
@@ -86,6 +91,10 @@ function findDeclaredAccessor(target, key) {
  * @remarks Re-emits AG Grid public API events when listeners are registered via `addEventListener` (event names match AG Grid public event strings). The same AG Grid events are also dispatched as native `Event`s with lowercased `type` and payload on `agGridDetails` (for example `addEventListener('columnresized', ...)`).
  */
 export class GridProBeta extends LifecycleMixin(FoundationElement) {
+    /** @internal Shared AG column-drag bridge for custom tool panels. */
+    getColumnDragBridge() {
+        return this.columnDragBridge;
+    }
     rowDataChanged(_, rowData) {
         // `initialised` flips true right after createGrid(), but `gridApi` is only assigned in the
         // async onGridReady callback — so a binding push in that window would crash on an undefined
@@ -109,6 +118,9 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
             this.initGrid();
         }
     }
+    enableColumnSelectionChanged() {
+        this.syncColumnSelectionHostLayout();
+    }
     getfilterModel() {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.persistFilterModelKey) {
@@ -154,6 +166,8 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
          * If true, will enable row flashing for all rows for `add` async transactions
          */
         this.enableRowFlashing = false;
+        /** Wired to `gridOptions.context` for columns picker → grid drag (see bridge module). */
+        this.columnDragBridge = {};
         this.columnComponentName = 'grid-pro-column';
         this.themeMode = 'dark';
         /**
@@ -172,6 +186,11 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
          * This requires AG Grid Enterprise module to be available for the status bar to be displayed when enabled.
          */
         this.withStatusBar = false;
+        /**
+         * Shows a Column Selection button above the grid.
+         * @public
+         */
+        this.enableColumnSelection = false;
         this.applyingDatasourceGridOptions = false;
         this.rehydrationAttempted = false;
         this.rootEventsListeners = [];
@@ -306,6 +325,7 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
     connectedCallback() {
         var _a;
         super.connectedCallback();
+        this.syncColumnSelectionHostLayout();
         this.disposed = false;
         const luminanceTarget = (_a = this.provider) !== null && _a !== void 0 ? _a : this;
         this.luminanceSubscription = baseLayerLuminance.subscribe(this.luminanceObserver, luminanceTarget);
@@ -375,6 +395,9 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
         }
         this.performDisconnectCleanup();
     }
+    syncColumnSelectionHostLayout() {
+        this.classList.toggle('has-column-selection', this.enableColumnSelection);
+    }
     performDisconnectCleanup() {
         if (this.debounced) {
             clearTimeout(this.debounced);
@@ -988,6 +1011,7 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
     get gridParams() {
         return {
             globalListener: this.boundGlobalEventListener,
+            modules: [gridProColumnDragBridgeModule, ColumnMoveModule, DragAndDropModule],
         };
     }
     /**
@@ -1154,6 +1178,10 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
     setLocalGridOptions(derivedOptions) {
         // Merge options with reflected AG properties from attributes
         this.agGridOptions = Object.assign(Object.assign({}, this.agGridOptions), copyAttributesToGridOptions(derivedOptions, this.agAttributes));
+        this.agGridOptions.context = Object.assign(Object.assign({}, this.agGridOptions.context), { [GRID_PRO_COLUMN_DRAG_BRIDGE_CONTEXT_KEY]: this.columnDragBridge });
+        if (this.agGridOptions.allowDragFromColumnsToolPanel == null) {
+            this.agGridOptions.allowDragFromColumnsToolPanel = true;
+        }
     }
     /**
      * Clears the local grid options, this is used to clear the grid options when the grid is restarted.
@@ -1486,6 +1514,9 @@ __decorate([
 __decorate([
     attr({ mode: 'boolean', attribute: 'with-status-bar' })
 ], GridProBeta.prototype, "withStatusBar", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'enable-column-selection' })
+], GridProBeta.prototype, "enableColumnSelection", void 0);
 __decorate([
     observable
 ], GridProBeta.prototype, "customErrorHandlerTemplate", void 0);

package/dist/esm/grid-pro.styles.js

@@ -1,5 +1,6 @@
 import { alertFlashPhaseProperty } from '@genesislcap/foundation-ui';
 import { css } from '@microsoft/fast-element';
+import { gridProColumnSelectionHostStyles } from './column-selection/column-selection.styles';
 import { errorHandlerDialogStyles } from './datasource/error-handler.dialog';
 import { ROW_MATCH_ALERT_CELL_CLASS, ROW_MATCH_ALERT_CLASS } from './datasource/row-match.classes';
 import { agExternalStockStyles } from './external';
@@ -86,6 +87,7 @@ export const foundationGridProStyles = css `
   ${agExternalStockStyles}
   ${errorHandlerDialogStyles}
   ${agDragGhostShadowDomStyles}
+  ${gridProColumnSelectionHostStyles}
   ${rowMatchAlertStyles}
   :host {
     --datasource-error-background-color: var(--neutral-layer-4);

package/dist/esm/grid-pro.template.js

@@ -1,4 +1,4 @@
-import { html, ref } from '@microsoft/fast-element';
+import { html, ref, when } from '@microsoft/fast-element';
 import { getErrorHandlerDialogTemplate } from './datasource/error-handler.dialog';
 /**
  * Get a Design System prefixed The Grid Pro template.
@@ -8,6 +8,13 @@ import { getErrorHandlerDialogTemplate } from './datasource/error-handler.dialog
  */
 export const getGridProTemplate = (prefix = 'foundation') => html `
   <template>
+    ${when((x) => !!x.enableColumnSelection, html `
+        <div class="grid-pro-column-selection-toolbar" part="actions">
+          <${prefix}-column-selection
+            :gridHost="${(x) => x}"
+          ></${prefix}-column-selection>
+        </div>
+      `)}
     <span part="grid" data-ag-theme-mode=${(x) => x.themeMode} class="${(x) => x.classNames}">
       <slot name="grid" ${ref('gridSlot')}></slot>
       <slot></slot>

package/dist/esm/index.js

@@ -2,6 +2,7 @@ export * from './cell';
 export * from './cell-renderers';
 export * from './cell-editors';
 export * from './column';
+export * from './column-selection';
 export * from './column-filters';
 export * from './datasource';
 export * from './external';