@genesislcap/grid-pro 15.17.1 → 15.18.0-FUI-2601.4

package/dist/esm/side-bar/side-bar.js

@@ -0,0 +1,204 @@
+import { __decorate } from "tslib";
+import { insertDocumentCSSRule, LifecycleMixin } from '@genesislcap/foundation-utils';
+import { attr, customElement, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { agGridAlpineFontFace } from '../external/fonts';
+import { agThemeFontsId } from '../grid-pro.types';
+import { gridProSideBarChromeStyles } from './side-bar.styles';
+import { getGridProSideBarTemplate } from './side-bar.template';
+import { GridProSideBarTool, initLocalSideBarPanel, } from './side-bar.types';
+/**
+ * The Grid Pro Side Bar element.
+ * @remarks No shadow root — chrome stays in Grid Pro's tree so host CSS still applies.
+ * @public
+ * @remarks
+ * HTML Element: \<grid-pro-side-bar\>
+ */
+let GridProSideBar = class GridProSideBar extends LifecycleMixin(FoundationElement) {
+    constructor() {
+        super(...arguments);
+        this.prefix = 'foundation';
+        this.tools = [];
+        this.open = false;
+        this.activeTool = GridProSideBarTool.columns;
+        this.mountedPanels = new Map();
+    }
+    prefixChanged() {
+        if (this.$fastController) {
+            this.$fastController.template = getGridProSideBarTemplate(this.prefix || 'foundation');
+        }
+    }
+    toolsChanged() {
+        var _a, _b;
+        this.syncSideBarVisibility();
+        if (!((_a = this.tools) === null || _a === void 0 ? void 0 : _a.length)) {
+            this.open = false;
+            this.closeAgToolPanel();
+            (_b = this.panelHost) === null || _b === void 0 ? void 0 : _b.replaceChildren();
+            return;
+        }
+        if (!this.tools.some((t) => t.id === this.activeTool)) {
+            this.activeTool = this.tools[0].id;
+        }
+        this.mountActiveTool();
+    }
+    gridApiChanged() {
+        this.mountActiveTool();
+    }
+    columnDragBridgeChanged() {
+        this.refreshMountedLocalPanels();
+    }
+    panelHostChanged() {
+        this.mountActiveTool();
+    }
+    getToolPanelParams(def) {
+        var _a, _b;
+        return Object.assign(Object.assign({ api: this.gridApi, context: (_b = (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getGridOption) === null || _b === void 0 ? void 0 : _b.call(_a, 'context') }, def.toolPanelParams), { columnDragBridge: this.columnDragBridge });
+    }
+    refreshMountedLocalPanels() {
+        var _a, _b, _c;
+        if (!this.gridApi) {
+            return;
+        }
+        for (const [defId, mounted] of this.mountedPanels) {
+            const def = (_a = this.tools) === null || _a === void 0 ? void 0 : _a.find((t) => t.id === defId);
+            if (def === null || def === void 0 ? void 0 : def.createPanel) {
+                (_c = (_b = mounted.panel).refresh) === null || _c === void 0 ? void 0 : _c.call(_b, this.getToolPanelParams(def));
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncSideBarVisibility();
+        insertDocumentCSSRule(agGridAlpineFontFace, agThemeFontsId('alpine'));
+    }
+    disconnectedCallback() {
+        this.destroyTools();
+        super.disconnectedCallback();
+    }
+    /**
+     * Selects a tool. Clicking the active open tool collapses the panel.
+     * @public
+     */
+    selectTool(tool) {
+        var _a;
+        if (!((_a = this.tools) === null || _a === void 0 ? void 0 : _a.some((t) => t.id === tool))) {
+            return;
+        }
+        if (this.activeTool === tool && this.open) {
+            this.open = false;
+            this.closeAgToolPanel();
+            return;
+        }
+        this.activeTool = tool;
+        this.open = true;
+        this.mountActiveTool();
+    }
+    /**
+     * @internal
+     */
+    handleToolClick(id) {
+        this.selectTool(id);
+    }
+    /**
+     * @public
+     */
+    mountActiveTool() {
+        var _a, _b, _c;
+        if (!this.gridApi || !this.panelHost) {
+            return;
+        }
+        if (!this.open) {
+            this.closeAgToolPanel();
+            return;
+        }
+        const def = (_a = this.tools) === null || _a === void 0 ? void 0 : _a.find((t) => t.id === this.activeTool);
+        if (!def) {
+            this.panelHost.replaceChildren();
+            return;
+        }
+        if (def.createPanel) {
+            this.closeAgToolPanel();
+            let mounted = this.mountedPanels.get(def.id);
+            if (!mounted) {
+                const panel = initLocalSideBarPanel(def.createPanel(), this.getToolPanelParams(def));
+                mounted = { defId: def.id, panel };
+                this.mountedPanels.set(def.id, mounted);
+            }
+            const gui = mounted.panel.getGui();
+            if (gui instanceof HTMLElement &&
+                gui.tagName.toLowerCase() === 'grid-pro-columns-tool-panel') {
+                gui.setAttribute('prefix', this.prefix || 'foundation');
+            }
+            this.panelHost.replaceChildren(gui);
+            (_c = (_b = mounted.panel).refresh) === null || _c === void 0 ? void 0 : _c.call(_b, this.getToolPanelParams(def));
+            return;
+        }
+        if (def.toolPanel != null) {
+            this.panelHost.replaceChildren();
+            if (typeof this.gridApi.openToolPanel === 'function') {
+                this.gridApi.openToolPanel(def.id, this.panelHost);
+            }
+            return;
+        }
+        this.panelHost.replaceChildren();
+    }
+    /**
+     * @public
+     */
+    destroyTools() {
+        var _a, _b, _c, _d;
+        this.closeAgToolPanel();
+        for (const mounted of this.mountedPanels.values()) {
+            (_a = mounted.destroy) === null || _a === void 0 ? void 0 : _a.call(mounted);
+            (_c = (_b = mounted.panel).destroy) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
+        this.mountedPanels.clear();
+        (_d = this.panelHost) === null || _d === void 0 ? void 0 : _d.replaceChildren();
+    }
+    closeAgToolPanel() {
+        var _a;
+        if (typeof ((_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.closeToolPanel) === 'function') {
+            this.gridApi.closeToolPanel();
+        }
+    }
+    syncSideBarVisibility() {
+        var _a;
+        if (!((_a = this.tools) === null || _a === void 0 ? void 0 : _a.length)) {
+            this.setAttribute('hidden', '');
+        }
+        else {
+            this.removeAttribute('hidden');
+        }
+    }
+};
+__decorate([
+    attr
+], GridProSideBar.prototype, "prefix", void 0);
+__decorate([
+    observable
+], GridProSideBar.prototype, "tools", void 0);
+__decorate([
+    observable
+], GridProSideBar.prototype, "gridApi", void 0);
+__decorate([
+    observable
+], GridProSideBar.prototype, "columnDragBridge", void 0);
+__decorate([
+    observable
+], GridProSideBar.prototype, "open", void 0);
+__decorate([
+    observable
+], GridProSideBar.prototype, "activeTool", void 0);
+__decorate([
+    observable
+], GridProSideBar.prototype, "panelHost", void 0);
+GridProSideBar = __decorate([
+    customElement({
+        name: 'grid-pro-side-bar',
+        template: getGridProSideBarTemplate(),
+        styles: gridProSideBarChromeStyles,
+        shadowOptions: null,
+    })
+], GridProSideBar);
+export { GridProSideBar };

package/dist/esm/side-bar/side-bar.styles.js

@@ -0,0 +1,155 @@
+import { css } from '@microsoft/fast-element';
+/**
+ * Layout on the Grid Pro host when `sideBarConfig` is set.
+ * @public
+ */
+export const gridProSideBarHostStyles = css `
+  :host(.has-side-bar) {
+    display: flex;
+    flex-direction: row;
+    min-height: 0;
+  }
+
+  :host(.has-side-bar) [part='grid'] {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+  }
+`;
+/**
+ * Chrome for {@link GridProSideBar}. Uses class selectors (no `:host`) because the
+ * element has no shadow — styles land on Grid Pro's shadow root.
+ * @public
+ */
+export const gridProSideBarChromeStyles = css `
+  .grid-pro-side-bar {
+    --ag-icon-font-family: agGridAlpine;
+    --ag-icon-size: 16px;
+
+    display: flex;
+    flex-direction: row-reverse;
+    flex: 0 0 auto;
+    min-height: 0;
+    height: 100%;
+    z-index: 1;
+    border-left: 1px solid var(--neutral-stroke-divider-rest, var(--ag-border-color));
+    background: var(--neutral-layer-2, var(--ag-control-panel-background-color));
+    color: var(--neutral-foreground-rest, var(--ag-foreground-color));
+  }
+
+  .grid-pro-side-bar-buttons {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 auto;
+    border-left: 1px solid var(--neutral-stroke-divider-rest, var(--ag-border-color));
+  }
+
+  .grid-pro-side-bar-button {
+    margin: 0;
+    height: auto !important;
+    min-height: 0;
+    border-bottom: 1px solid var(--neutral-stroke-divider-rest, var(--ag-border-color));
+  }
+
+  .grid-pro-side-bar-button::part(control) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 8px;
+    border: 0;
+    border-radius: 0;
+    min-width: 0;
+    min-height: 0;
+    height: auto;
+    white-space: nowrap;
+  }
+
+  .grid-pro-side-bar-button::part(content) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .grid-pro-side-bar-button-icon {
+    display: block;
+    font-family: agGridAlpine, sans-serif;
+    font-size: var(--ag-icon-size, 16px);
+    line-height: var(--ag-icon-size, 16px);
+    font-style: normal;
+    font-weight: normal;
+    speak: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .grid-pro-side-bar-button-icon::before {
+    font-family: agGridAlpine, sans-serif;
+    background-color: transparent;
+  }
+
+  .grid-pro-side-bar-button-icon.ag-icon-columns::before {
+    content: '\\f10a';
+  }
+
+  .grid-pro-side-bar-button-icon.ag-icon-filter::before {
+    content: '\\f114';
+  }
+
+  .grid-pro-side-bar-button-icon[hidden] {
+    display: none;
+  }
+
+  .grid-pro-side-bar-button-label {
+    writing-mode: vertical-rl;
+  }
+
+  .grid-pro-side-bar-button:hover::part(control),
+  .grid-pro-side-bar-button[aria-selected='true']::part(control) {
+    background: var(--neutral-fill-hover, rgb(255 255 255 / 6%));
+  }
+
+  .grid-pro-side-bar-button:hover::part(content)::before {
+    background: transparent;
+  }
+
+  .grid-pro-side-bar-panel {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 auto;
+    width: 260px;
+    max-width: 40vw;
+    min-height: 0;
+  }
+
+  .grid-pro-side-bar-panel[hidden] {
+    display: none;
+  }
+
+  .grid-pro-side-bar-panel-host {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .grid-pro-side-bar-panel-host .ag-filter-toolpanel,
+  .grid-pro-side-bar-panel-host .ag-tool-panel-wrapper {
+    height: 100%;
+    width: 100%;
+  }
+
+  .grid-pro-columns-checkbox {
+    margin: 0;
+
+    --design-unit: 3;
+  }
+`;
+/**
+ * Host + chrome. Prefer {@link gridProSideBarHostStyles} on Grid Pro and
+ * {@link gridProSideBarChromeStyles} on the side-bar element.
+ * @public
+ */
+export const gridProSideBarStyles = css `
+  ${gridProSideBarHostStyles}
+  ${gridProSideBarChromeStyles}
+`;

package/dist/esm/side-bar/side-bar.template.js

@@ -0,0 +1,53 @@
+import { html, ref, repeat } from '@microsoft/fast-element';
+/**
+ * Community side bar chrome. Prefix selects DS buttons (`rapid-button`, `zero-button`).
+ * @public
+ */
+export const getGridProSideBarTemplate = (prefix = 'foundation') => {
+    const buttonTag = `${prefix}-button`;
+    return html `
+    <template>
+      <div
+        class="grid-pro-side-bar-buttons"
+        role="tablist"
+        aria-label="Grid tools"
+        ?hidden="${(x) => { var _a; return !((_a = x.tools) === null || _a === void 0 ? void 0 : _a.length); }}"
+      >
+        ${repeat((x) => x.tools, html `
+            <${buttonTag}
+              appearance="lightweight"
+              role="tab"
+              class="grid-pro-side-bar-button"
+              data-test-id="${(x) => `grid-pro-side-bar-tool-${x.id}`}"
+              aria-selected="${(x, c) => c.parent.open &&
+        c.parent.activeTool === x.id}"
+              @click="${(x, c) => c.parent.handleToolClick(x.id)}"
+            >
+              <span
+                class="ag-icon grid-pro-side-bar-button-icon ${(x) => x.iconKey ? `ag-icon-${x.iconKey}` : ''}"
+                aria-hidden="true"
+                ?hidden="${(x) => !x.iconKey}"
+              ></span>
+              <span class="grid-pro-side-bar-button-label">${(x) => x.label}</span>
+            </${buttonTag}>
+          `)}
+      </div>
+      <div
+        class="grid-pro-side-bar-panel"
+        part="side-bar-panel"
+        data-test-id="grid-pro-side-bar-panel"
+        ?hidden="${(x) => !x.open}"
+      >
+        <div
+          class="grid-pro-side-bar-panel-host"
+          data-test-id="grid-pro-side-bar-panel-host"
+          ${ref('panelHost')}
+        ></div>
+      </div>
+    </template>
+  `;
+};
+/**
+ * @public
+ */
+export const gridProSideBarTemplate = getGridProSideBarTemplate();

package/dist/esm/side-bar/side-bar.tools.js

@@ -0,0 +1,26 @@
+import { ColumnsToolPanel } from '../columns-tool-panel';
+import { GridProSideBarTool, } from './side-bar.types';
+/**
+ * Built-in Columns picker (Community, no AG SideBarModule).
+ * @public
+ */
+export const gridProSideBarColumnsTool = {
+    id: GridProSideBarTool.columns,
+    label: 'Columns',
+    iconKey: 'columns',
+    createPanel: () => new ColumnsToolPanel(),
+};
+/**
+ * Preset: Columns picker only. Use in {@link GridProSideBarConfig.tools}.
+ * @public
+ */
+export const GRID_PRO_DEFAULT_SIDE_BAR_TOOLS = [
+    gridProSideBarColumnsTool,
+];
+/**
+ * Default side bar config (Columns only).
+ * @public
+ */
+export const DEFAULT_SIDE_BAR_CONFIG = {
+    tools: [...GRID_PRO_DEFAULT_SIDE_BAR_TOOLS],
+};

package/dist/esm/side-bar/side-bar.types.js

@@ -0,0 +1,45 @@
+/**
+ * Well-known Community side-bar tool ids.
+ * @public
+ */
+export const GridProSideBarTool = {
+    columns: 'columns',
+    filters: 'filters',
+};
+/**
+ * Built-in AG Filters tool (Enterprise `FiltersToolPanelModule` required at app register).
+ * @public
+ */
+export const gridProSideBarFiltersTool = {
+    id: GridProSideBarTool.filters,
+    label: 'Filters',
+    labelKey: 'filters',
+    iconKey: 'filter',
+    toolPanel: 'agFiltersToolPanel',
+};
+/**
+ * Builds a custom tool panel def (AG-style registration into our shell).
+ * @public
+ */
+export function createGridProSideBarTool(def) {
+    return def;
+}
+/**
+ * @internal
+ */
+export function resolveAgSideBarToolPanels(tools) {
+    return tools
+        .filter((t) => t.toolPanel != null && !t.createPanel)
+        .map((t) => {
+        var _a, _b;
+        return (Object.assign({ id: t.id, labelKey: (_a = t.labelKey) !== null && _a !== void 0 ? _a : t.id, labelDefault: t.label, iconKey: (_b = t.iconKey) !== null && _b !== void 0 ? _b : t.id, toolPanel: t.toolPanel }, (t.toolPanelParams != null ? { toolPanelParams: t.toolPanelParams } : {})));
+    });
+}
+/**
+ * @internal
+ */
+export function initLocalSideBarPanel(panel, params) {
+    var _a;
+    (_a = panel.init) === null || _a === void 0 ? void 0 : _a.call(panel, params);
+    return panel;
+}