@genesislcap/grid-pro 15.63.0 → 15.64.0

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

@@ -0,0 +1,171 @@
+import { __decorate } from "tslib";
+import { LifecycleMixin } from '@genesislcap/foundation-utils';
+import { observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { GridProStatusBarTypes } from '../grid-pro.types';
+import { LabelValueStatusBarComponent, LoadMoreStatusBarComponent, ReloadStatusBarComponent, RowCountStatusBarComponent, } from '../status-bar-components';
+import { logger } from '../utils/logger';
+import { resolveStatusBarPanels, } from './resolve-status-bar-panels';
+import { statusBarStyles as styles } from './status-bar.styles';
+import { getStatusBarTemplate } from './status-bar.template';
+const PANEL_CTORS = {
+    [GridProStatusBarTypes.labelValue]: LabelValueStatusBarComponent,
+    [GridProStatusBarTypes.loadMore]: LoadMoreStatusBarComponent,
+    [GridProStatusBarTypes.reload]: ReloadStatusBarComponent,
+    [GridProStatusBarTypes.rowCount]: RowCountStatusBarComponent,
+};
+/**
+ * Status bar under the grid. Mounts the existing `IStatusPanelComp` panels.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<%%prefix%%-grid-pro-status-bar\>
+ *
+ * @tagname %%prefix%%-grid-pro-status-bar
+ */
+export class GridProStatusBar extends LifecycleMixin(FoundationElement) {
+    constructor() {
+        super(...arguments);
+        /** Grid Pro host that owns the api, datasource, and `statusBarConfig`. */
+        this.gridHost = null;
+        /** Optional explicit AG grid API (v36). Falls back to `gridHost.gridApi` when present. */
+        this.gridApi = null;
+        /**
+         * Panel config. Grid Pro binds its own `statusBarConfig` here.
+         * When unset, `gridHost.statusBarConfig` is used.
+         */
+        this.statusBarConfig = null;
+        this.panels = new Map();
+        this.warnedPanelTypes = new Set();
+    }
+    gridHostChanged() {
+        this.syncPanels();
+    }
+    gridApiChanged() {
+        this.syncPanels();
+    }
+    statusBarConfigChanged() {
+        this.syncPanels();
+    }
+    leftElChanged() {
+        this.syncPanels();
+    }
+    rightElChanged() {
+        this.syncPanels();
+    }
+    /**
+     * Rebuilds the mounted panels from the current host / api / config.
+     * @public
+     */
+    syncPanels() {
+        var _a;
+        if (!this.leftEl || !this.rightEl) {
+            return;
+        }
+        this.releasePanels();
+        const host = this.gridHost;
+        const api = this.resolveApi();
+        if (!(host === null || host === void 0 ? void 0 : host.withStatusBar) || !api) {
+            return;
+        }
+        const defs = resolveStatusBarPanels({
+            withStatusBar: host.withStatusBar,
+            statusBarConfig: (_a = this.statusBarConfig) !== null && _a !== void 0 ? _a : host.statusBarConfig,
+            isServerSide: host.isServerSide,
+            isInfiniteRowModel: host.isInfiniteRowModel,
+            gridProDatasource: host.gridProDatasource,
+        });
+        for (const def of defs) {
+            this.mountPanel(def, api);
+        }
+    }
+    /**
+     * Returns a mounted panel by type.
+     * @public
+     */
+    getStatusPanel(key) {
+        return this.panels.get(key);
+    }
+    /**
+     * Destroys the mounted panels. Call before the grid api is destroyed.
+     * @internal
+     */
+    releasePanels() {
+        var _a, _b, _c, _d, _e;
+        for (const panel of this.panels.values()) {
+            (_a = panel.destroy) === null || _a === void 0 ? void 0 : _a.call(panel);
+            (_c = (_b = panel.getGui) === null || _b === void 0 ? void 0 : _b.call(panel)) === null || _c === void 0 ? void 0 : _c.remove();
+        }
+        this.panels.clear();
+        (_d = this.leftEl) === null || _d === void 0 ? void 0 : _d.replaceChildren();
+        (_e = this.rightEl) === null || _e === void 0 ? void 0 : _e.replaceChildren();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.panels.size) {
+            this.syncPanels();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // foundation-layout moves the grid without tearing it down; keep the panels for the reconnect.
+        if (!this.shouldRunDisconnect) {
+            queueMicrotask(() => {
+                if (!this.isConnected) {
+                    this.releasePanels();
+                }
+            });
+            return;
+        }
+        this.releasePanels();
+    }
+    resolveApi() {
+        var _a, _b, _c;
+        return (_c = (_a = this.gridApi) !== null && _a !== void 0 ? _a : (_b = this.gridHost) === null || _b === void 0 ? void 0 : _b.gridApi) !== null && _c !== void 0 ? _c : null;
+    }
+    mountPanel(def, api) {
+        var _a, _b;
+        const Ctor = PANEL_CTORS[def.statusPanel];
+        if (!Ctor) {
+            if (!this.warnedPanelTypes.has(def.statusPanel)) {
+                this.warnedPanelTypes.add(def.statusPanel);
+                logger.warn(`Grid Pro status bar: no panel for type '${def.statusPanel}', skipping it`);
+            }
+            return;
+        }
+        const panel = new Ctor();
+        const params = Object.assign(Object.assign({ api, context: {} }, def.statusPanelParams), (_b = (_a = this.gridHost) === null || _a === void 0 ? void 0 : _a.getStatusPanelState) === null || _b === void 0 ? void 0 : _b.call(_a, def.statusPanel));
+        panel.init(params);
+        const gui = panel.getGui();
+        const target = def.align === 'right' ? this.rightEl : this.leftEl;
+        target.appendChild(gui);
+        this.panels.set(def.statusPanel, panel);
+    }
+}
+__decorate([
+    observable
+], GridProStatusBar.prototype, "gridHost", void 0);
+__decorate([
+    observable
+], GridProStatusBar.prototype, "gridApi", void 0);
+__decorate([
+    observable
+], GridProStatusBar.prototype, "statusBarConfig", void 0);
+__decorate([
+    observable
+], GridProStatusBar.prototype, "leftEl", void 0);
+__decorate([
+    observable
+], GridProStatusBar.prototype, "rightEl", void 0);
+/**
+ * Foundation Grid Pro Status Bar registration.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-grid-pro-status-bar\>
+ */
+export const foundationGridProStatusBar = GridProStatusBar.compose({
+    baseName: 'grid-pro-status-bar',
+    template: getStatusBarTemplate(),
+    styles,
+});

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

@@ -0,0 +1,49 @@
+import { css } from '@microsoft/fast-element';
+/**
+ * Status-bar host styles. Tokens follow the grid so the bar matches.
+ * @public
+ */
+export const statusBarStyles = css `
+  :host {
+    display: flex;
+    flex: 0 0 auto;
+    align-self: stretch;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .ag-status-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--ag-grid-size, 4px) * 2);
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--ag-status-bar-height, 32.5px);
+    padding: 0 calc(var(--ag-grid-size, 4px) * 2);
+    background: var(
+      --ag-status-bar-background-color,
+      var(--ag-header-background-color, var(--neutral-layer-2))
+    );
+    border-block-start: 1px solid
+      var(--ag-border-color, var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest)));
+    color: var(--ag-foreground-color, var(--neutral-foreground-rest));
+    font-size: var(--ag-data-font-size, var(--type-ramp-minus-1-font-size));
+  }
+
+  .ag-status-bar-left,
+  .ag-status-bar-right {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: calc(var(--ag-grid-size, 4px) * 2);
+  }
+
+  .ag-status-bar-right {
+    margin-inline-start: auto;
+  }
+
+  .ag-status-name-value {
+    padding-block: var(--ag-grid-size, 4px);
+  }
+`;

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

@@ -0,0 +1,16 @@
+import { html, ref } from '@microsoft/fast-element';
+/**
+ * Community status-bar layout: left-aligned info panels, right-aligned actions.
+ * @public
+ */
+export const getStatusBarTemplate = () => html `
+  <div class="ag-status-bar" part="status-bar" data-test-id="grid-pro-status-bar">
+    <div class="ag-status-bar-left" part="status-bar-left" ${ref('leftEl')}></div>
+    <div class="ag-status-bar-right" part="status-bar-right" ${ref('rightEl')}></div>
+  </div>
+`;
+/**
+ * Default status bar template.
+ * @public
+ */
+export const statusBarTemplate = getStatusBarTemplate();

package/dist/esm/status-bar-components/row-count.status-bar.js

@@ -48,7 +48,8 @@ export class RowCountStatusBarComponent {
         return this.element;
     }
     destroy() {
-        if (this.api && this.modelUpdatedHandler) {
+        var _a, _b;
+        if (this.api && this.modelUpdatedHandler && !((_b = (_a = this.api).isDestroyed) === null || _b === void 0 ? void 0 : _b.call(_a))) {
             this.api.removeEventListener('modelUpdated', this.modelUpdatedHandler);
             this.api.removeEventListener('rowDataUpdated', this.modelUpdatedHandler);
         }