@datarailsshared/dr_renderer 1.5.150 → 1.5.159

package/src/pivot-table/freeze-panes/freeze-panes.css

@@ -0,0 +1,282 @@
+/**
+ * Freeze Panes CSS
+ *
+ * Styles for both transform mode (legacy) and sticky mode (new).
+ */
+
+/* =============================================================================
+   Transform Mode Styles (Legacy)
+   Uses CSS transforms applied via JavaScript on scroll
+   ============================================================================= */
+
+table.pvtTable .axis-freeze-pane {
+    position: relative;
+    z-index: 100;
+}
+
+table.pvtTable .vertical-freeze-pane {
+    position: relative;
+    z-index: 50;
+}
+
+table.pvtTable .horizontal-freeze-pane {
+    position: relative;
+    z-index: 50;
+}
+
+/* Transform mode - thead border pseudo-elements */
+table.pvtTable thead tr th.axis-freeze-pane:before,
+table.pvtTable thead tr th.vertical-freeze-pane:before,
+table.pvtTable.newPvtTable thead tr th.axis-freeze-pane:before,
+table.pvtTable.newPvtTable thead tr th.vertical-freeze-pane:before {
+    content: '';
+    width: calc(100% + 1px);
+    height: 1px;
+    background: white;
+    position: absolute;
+    top: -1px;
+    left: 0;
+}
+
+table.pvtTable thead tr th.axis-freeze-pane:before,
+table.pvtTable thead tr th.vertical-freeze-pane:before {
+    background: #cdcdcd;
+}
+
+table.pvtTable thead tr th.axis-freeze-pane:after,
+table.pvtTable thead tr th.vertical-freeze-pane:after,
+table.pvtTable.newPvtTable thead tr th.axis-freeze-pane:after,
+table.pvtTable.newPvtTable thead tr th.vertical-freeze-pane:after {
+    content: '';
+    width: 1px;
+    height: 100%;
+    background: white;
+    position: absolute;
+    right: -1px;
+    top: 0;
+}
+table.pvtTable thead tr th.axis-freeze-pane:after,
+table.pvtTable thead tr th.vertical-freeze-pane:after {
+    background: #cdcdcd;
+}
+
+/* Transform mode - tbody border pseudo-elements */
+table.pvtTable tbody tr th.horizontal-freeze-pane:before,
+table.pvtTable tbody tr td.horizontal-freeze-pane:before,
+table.pvtTable.newPvtTable tbody tr th.horizontal-freeze-pane:before,
+table.pvtTable.newPvtTable tbody tr td.horizontal-freeze-pane:before {
+    content: '';
+    width: calc(100% + 1px);
+    height: 1px;
+    background: #dfe6ec;
+    position: absolute;
+    top: -1px;
+    left: 0;
+}
+table.pvtTable tbody tr th.horizontal-freeze-pane:before,
+table.pvtTable tbody tr td.horizontal-freeze-pane:before {
+    background: #cdcdcd;
+}
+table.pvtTable tbody tr th.colTotal.horizontal-freeze-pane:before,
+table.pvtTable tbody tr td.colTotal.horizontal-freeze-pane:before {
+    background: transparent;
+}
+
+table.pvtTable tbody tr th.horizontal-freeze-pane:after,
+table.pvtTable tbody tr td.horizontal-freeze-pane:after,
+table.pvtTable.newPvtTable tbody tr th.horizontal-freeze-pane:after,
+table.pvtTable.newPvtTable tbody tr td.horizontal-freeze-pane:after {
+    content: '';
+    width: 1px;
+    height: 100%;
+    background: #dfe6ec;
+    position: absolute;
+    right: -1px;
+    top: 0;
+}
+
+table.pvtTable tbody tr th.horizontal-freeze-pane:after,
+table.pvtTable tbody tr td.horizontal-freeze-pane:after {
+    background: #cdcdcd;
+}
+
+table.pvtTable.newPvtTable tbody tr th.horizontal-freeze-pane.colTotal:after {
+    background: #fff;
+}
+
+/* Transform mode - colorized header handling */
+table.pvtTable.colorized:not(.newPvtTable) tbody tr th.horizontal-freeze-pane,
+table.pvtTable.newPvtTable.colorized tbody tr th.horizontal-freeze-pane:not(.highlighted):not(.colTotal) {
+    background-color: #fff !important;
+}
+
+/* =============================================================================
+   Sticky Mode Styles (New)
+   Uses native CSS position: sticky for freeze panes
+   ============================================================================= */
+
+/* Container must allow sticky positioning to work */
+.sticky-freeze-panes-container {
+    overflow: auto;
+}
+
+/* Axis freeze pane - sticks to top-left corner */
+table.pvtTable .sticky-axis-freeze-pane {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 30;
+    background-color: inherit;
+}
+
+/* Vertical freeze pane - sticks to top (column headers) */
+table.pvtTable .sticky-vertical-freeze-pane {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    background-color: inherit;
+}
+
+/* Horizontal freeze pane - sticks to left (row headers) */
+table.pvtTable .sticky-horizontal-freeze-pane {
+    position: sticky;
+    left: 0;
+    z-index: 10;
+    background-color: inherit;
+}
+
+/* Ensure sticky cells have proper background color to hide scrolled content */
+table.pvtTable thead th.sticky-axis-freeze-pane,
+table.pvtTable thead th.sticky-vertical-freeze-pane {
+    background-color: #f8f8f8;
+}
+
+table.pvtTable.newPvtTable thead th.sticky-axis-freeze-pane,
+table.pvtTable.newPvtTable thead th.sticky-vertical-freeze-pane {
+    background-color: #dfe6ec;
+}
+
+table.pvtTable tbody th.sticky-horizontal-freeze-pane,
+table.pvtTable tbody td.sticky-horizontal-freeze-pane {
+    background-color: #fff;
+}
+
+/* Sticky mode - colorized header handling */
+table.pvtTable.colorized thead th.sticky-axis-freeze-pane,
+table.pvtTable.colorized thead th.sticky-vertical-freeze-pane {
+    background-color: #f8f8f8;
+}
+
+table.pvtTable.newPvtTable.colorized thead th.sticky-axis-freeze-pane,
+table.pvtTable.newPvtTable.colorized thead th.sticky-vertical-freeze-pane {
+    background-color: #dfe6ec;
+}
+
+table.pvtTable.colorized:not(.newPvtTable) tbody tr th.sticky-horizontal-freeze-pane,
+table.pvtTable.newPvtTable.colorized tbody tr th.sticky-horizontal-freeze-pane:not(.highlighted):not(.colTotal) {
+    background-color: #fff;
+}
+
+/* Sticky mode - thead border pseudo-elements */
+table.pvtTable thead tr th.sticky-axis-freeze-pane:before,
+table.pvtTable thead tr th.sticky-vertical-freeze-pane:before,
+table.pvtTable.newPvtTable thead tr th.sticky-axis-freeze-pane:before,
+table.pvtTable.newPvtTable thead tr th.sticky-vertical-freeze-pane:before {
+    content: '';
+    width: calc(100% + 1px);
+    height: 1px;
+    background: white;
+    position: absolute;
+    top: -1px;
+    left: 0;
+}
+
+table.pvtTable thead tr th.sticky-axis-freeze-pane:before,
+table.pvtTable thead tr th.sticky-vertical-freeze-pane:before {
+    background: #cdcdcd;
+}
+
+table.pvtTable thead tr th.sticky-axis-freeze-pane:after,
+table.pvtTable thead tr th.sticky-vertical-freeze-pane:after,
+table.pvtTable.newPvtTable thead tr th.sticky-axis-freeze-pane:after,
+table.pvtTable.newPvtTable thead tr th.sticky-vertical-freeze-pane:after {
+    content: '';
+    width: 1px;
+    height: 100%;
+    background: white;
+    position: absolute;
+    right: -1px;
+    top: 0;
+}
+table.pvtTable thead tr th.sticky-axis-freeze-pane:after,
+table.pvtTable thead tr th.sticky-vertical-freeze-pane:after {
+    background: #cdcdcd;
+}
+
+/* Sticky mode - tbody border pseudo-elements */
+table.pvtTable tbody tr th.sticky-horizontal-freeze-pane:before,
+table.pvtTable tbody tr td.sticky-horizontal-freeze-pane:before,
+table.pvtTable.newPvtTable tbody tr th.sticky-horizontal-freeze-pane:before,
+table.pvtTable.newPvtTable tbody tr td.sticky-horizontal-freeze-pane:before {
+    content: '';
+    width: calc(100% + 1px);
+    height: 1px;
+    background: #dfe6ec;
+    position: absolute;
+    top: -1px;
+    left: 0;
+}
+table.pvtTable tbody tr th.sticky-horizontal-freeze-pane:before,
+table.pvtTable tbody tr td.sticky-horizontal-freeze-pane:before {
+    background: #cdcdcd;
+}
+table.pvtTable tbody tr th.colTotal.sticky-horizontal-freeze-pane:before,
+table.pvtTable tbody tr td.colTotal.sticky-horizontal-freeze-pane:before {
+    background: transparent;
+}
+
+table.pvtTable tbody tr th.sticky-horizontal-freeze-pane:after,
+table.pvtTable tbody tr td.sticky-horizontal-freeze-pane:after,
+table.pvtTable.newPvtTable tbody tr th.sticky-horizontal-freeze-pane:after,
+table.pvtTable.newPvtTable tbody tr td.sticky-horizontal-freeze-pane:after {
+    content: '';
+    width: 1px;
+    height: 100%;
+    background: #dfe6ec;
+    position: absolute;
+    right: -1px;
+    top: 0;
+}
+
+table.pvtTable tbody tr th.sticky-horizontal-freeze-pane:after,
+table.pvtTable tbody tr td.sticky-horizontal-freeze-pane:after {
+    background: #cdcdcd;
+}
+
+table.pvtTable.newPvtTable tbody tr th.sticky-horizontal-freeze-pane.colTotal:after {
+    background: #fff;
+}
+
+table.pvtTable.freeze-panes-rows-disabled .sticky-vertical-freeze-pane {
+    position: relative;
+    top: auto !important;
+}
+
+table.pvtTable.freeze-panes-columns-disabled .sticky-horizontal-freeze-pane {
+    position: relative;
+    left: auto !important;
+}
+
+table.pvtTable.freeze-panes-rows-disabled:not(.freeze-panes-columns-disabled) .sticky-axis-freeze-pane {
+    top: auto !important;
+}
+
+table.pvtTable.freeze-panes-columns-disabled:not(.freeze-panes-rows-disabled) .sticky-axis-freeze-pane {
+    left: auto !important;
+}
+
+table.pvtTable.freeze-panes-rows-disabled.freeze-panes-columns-disabled .sticky-axis-freeze-pane {
+    position: relative;
+    top: auto !important;
+    left: auto !important;
+}

package/src/pivot-table/freeze-panes/index.d.ts

@@ -0,0 +1,115 @@
+declare namespace _exports {
+    export { FreezePanesClassStrings, FreezePanesOptions, FreezePanesTableInfo, FreezePanesInitResult, FreezePanesStrategy, TableOptions };
+}
+declare namespace _exports {
+    export { parseOptions };
+    export { getClassStrings };
+    export { initialize };
+    export { setMode };
+    export { getMode };
+    export { FREEZE_PANES_MODES };
+}
+export = _exports;
+/**
+ * CSS class strings for freeze pane elements.
+ */
+type FreezePanesClassStrings = {
+    /**
+     * - CSS class for horizontally frozen elements.
+     */
+    horizontal: string;
+    /**
+     * - CSS class for vertically frozen elements.
+     */
+    vertical: string;
+    /**
+     * - CSS class for elements frozen on both axes.
+     */
+    axis: string;
+};
+/**
+ * Parsed freeze panes options.
+ */
+type FreezePanesOptions = {
+    /**
+     * - Whether freeze panes is enabled.
+     */
+    enabled: boolean;
+    /**
+     * - The freeze panes mode.
+     */
+    mode: import("./constants").FreezePanesMode;
+};
+/**
+ * Table information for freeze panes initialization.
+ */
+type FreezePanesTableInfo = {
+    /**
+     * - Number of row attributes (columns in row headers).
+     */
+    rowAttrsLength: number;
+};
+/**
+ * Result of freeze panes initialization.
+ */
+type FreezePanesInitResult = {
+    /**
+     * - Function to clean up and destroy the freeze panes instance.
+     */
+    destroy: () => void;
+};
+/**
+ * Freeze panes strategy interface.
+ */
+type FreezePanesStrategy = {
+    /**
+     * - Gets CSS class strings.
+     */
+    getClassStrings: (enabled: boolean) => FreezePanesClassStrings;
+    /**
+     * - Initializes the strategy.
+     */
+    initialize: (container: HTMLElement, tableInfo: FreezePanesTableInfo) => FreezePanesInitResult;
+};
+/**
+ * Table options object containing freeze panes configuration.
+ */
+type TableOptions = {
+    /**
+     * - Whether freeze panes is enabled.
+     */
+    freeze_panes?: boolean | undefined;
+};
+/**
+ * Parses freeze panes options from table options.
+ * Mode is read from global config, not from tableOptions.
+ * @param {TableOptions} tableOptions - Table options object.
+ * @returns {FreezePanesOptions} Parsed freeze panes options.
+ */
+declare function parseOptions(tableOptions: TableOptions): FreezePanesOptions;
+/**
+ * Gets class strings for freeze pane elements based on options.
+ * @param {FreezePanesOptions} options - Parsed freeze panes options.
+ * @returns {FreezePanesClassStrings} Object with horizontal, vertical, and axis class strings.
+ */
+declare function getClassStrings(options: FreezePanesOptions): FreezePanesClassStrings;
+/**
+ * Initializes freeze panes on a container.
+ * @param {HTMLElement} container - The container element.
+ * @param {FreezePanesOptions} options - Parsed freeze panes options.
+ * @param {FreezePanesTableInfo} tableInfo - Table information.
+ * @returns {FreezePanesInitResult | undefined} Cleanup object with destroy function, or undefined if not enabled.
+ */
+declare function initialize(container: HTMLElement, options: FreezePanesOptions, tableInfo: FreezePanesTableInfo): FreezePanesInitResult | undefined;
+/**
+ * Sets the freeze panes mode globally.
+ * @param {import('./constants').FreezePanesMode} mode - The mode to set ('transform' or 'sticky').
+ * @returns {void}
+ */
+declare function setMode(mode: import("./constants").FreezePanesMode): void;
+/**
+ * Gets the current freeze panes mode.
+ * @returns {import('./constants').FreezePanesMode} The current mode.
+ */
+declare function getMode(): import("./constants").FreezePanesMode;
+import { FREEZE_PANES_MODES } from "./constants";

package/src/pivot-table/freeze-panes/index.js

@@ -0,0 +1,143 @@
+// @ts-check
+/**
+ * @fileoverview Freeze panes module for pivot tables.
+ * Provides functionality to freeze rows and columns during scrolling.
+ * @module @datarailsshared/dr_renderer/pivot-table/freeze-panes
+ */
+
+const { FREEZE_PANES_MODES } = require('./constants');
+const transformStrategy = require('./transform-strategy');
+const stickyStrategy = require('./sticky-strategy');
+
+/**
+ * CSS class strings for freeze pane elements.
+ * @typedef {Object} FreezePanesClassStrings
+ * @property {string} horizontal - CSS class for horizontally frozen elements.
+ * @property {string} vertical - CSS class for vertically frozen elements.
+ * @property {string} axis - CSS class for elements frozen on both axes.
+ */
+
+/**
+ * Parsed freeze panes options.
+ * @typedef {Object} FreezePanesOptions
+ * @property {boolean} enabled - Whether freeze panes is enabled.
+ * @property {import('./constants').FreezePanesMode} mode - The freeze panes mode.
+ */
+
+/**
+ * Table information for freeze panes initialization.
+ * @typedef {Object} FreezePanesTableInfo
+ * @property {number} rowAttrsLength - Number of row attributes (columns in row headers).
+ */
+
+/**
+ * Result of freeze panes initialization.
+ * @typedef {Object} FreezePanesInitResult
+ * @property {() => void} destroy - Function to clean up and destroy the freeze panes instance.
+ */
+
+/**
+ * Freeze panes strategy interface.
+ * @typedef {Object} FreezePanesStrategy
+ * @property {(enabled: boolean) => FreezePanesClassStrings} getClassStrings - Gets CSS class strings.
+ * @property {(container: HTMLElement, tableInfo: FreezePanesTableInfo) => FreezePanesInitResult} initialize - Initializes the strategy.
+ */
+
+/**
+ * Table options object containing freeze panes configuration.
+ * @typedef {Object} TableOptions
+ * @property {boolean} [freeze_panes] - Whether freeze panes is enabled.
+ */
+
+/**
+ * Global configuration for freeze panes mode.
+ * This can be modified by the consuming application to change the default mode.
+ * @type {{ mode: import('./constants').FreezePanesMode }}
+ */
+const config = {
+    mode: FREEZE_PANES_MODES.STICKY
+};
+
+/**
+ * Sets the freeze panes mode globally.
+ * @param {import('./constants').FreezePanesMode} mode - The mode to set ('transform' or 'sticky').
+ * @returns {void}
+ */
+function setMode(mode) {
+    if (mode === FREEZE_PANES_MODES.TRANSFORM || mode === FREEZE_PANES_MODES.STICKY) {
+        config.mode = mode;
+    }
+}
+
+/**
+ * Gets the current freeze panes mode.
+ * @returns {import('./constants').FreezePanesMode} The current mode.
+ */
+function getMode() {
+    return config.mode;
+}
+
+/**
+ * Parses freeze panes options from table options.
+ * Mode is read from global config, not from tableOptions.
+ * @param {TableOptions} tableOptions - Table options object.
+ * @returns {FreezePanesOptions} Parsed freeze panes options.
+ */
+function parseOptions(tableOptions) {
+    const enabled = !!tableOptions.freeze_panes;
+
+    return {
+        enabled: enabled,
+        mode: config.mode,
+    };
+}
+
+/**
+ * Gets the appropriate strategy based on mode.
+ * @param {import('./constants').FreezePanesMode} mode - The freeze panes mode.
+ * @returns {FreezePanesStrategy} The strategy module.
+ */
+function getStrategy(mode) {
+    if (mode === FREEZE_PANES_MODES.STICKY) {
+        return stickyStrategy;
+    }
+    return transformStrategy;
+}
+
+/**
+ * Gets class strings for freeze pane elements based on options.
+ * @param {FreezePanesOptions} options - Parsed freeze panes options.
+ * @returns {FreezePanesClassStrings} Object with horizontal, vertical, and axis class strings.
+ */
+function getClassStrings(options) {
+    const strategy = getStrategy(options.mode);
+    return strategy.getClassStrings(options.enabled);
+}
+
+/**
+ * Initializes freeze panes on a container.
+ * @param {HTMLElement} container - The container element.
+ * @param {FreezePanesOptions} options - Parsed freeze panes options.
+ * @param {FreezePanesTableInfo} tableInfo - Table information.
+ * @returns {FreezePanesInitResult | undefined} Cleanup object with destroy function, or undefined if not enabled.
+ */
+function initialize(container, options, tableInfo) {
+    if (!options.enabled) return undefined;
+
+    const strategy = getStrategy(options.mode);
+    return strategy.initialize(container, tableInfo);
+}
+
+module.exports = {
+    // Main API
+    parseOptions: parseOptions,
+    getClassStrings: getClassStrings,
+    initialize: initialize,
+
+    // Configuration API
+    setMode: setMode,
+    getMode: getMode,
+
+    // Constants
+    FREEZE_PANES_MODES: FREEZE_PANES_MODES,
+};

package/src/pivot-table/freeze-panes/sticky-strategy.d.ts

@@ -0,0 +1,38 @@
+/**
+ * CSS class strings for freeze pane elements.
+ */
+export type FreezePanesClassStrings = import("./index").FreezePanesClassStrings;
+/**
+ * Table information for freeze panes initialization.
+ */
+export type FreezePanesTableInfo = import("./index").FreezePanesTableInfo;
+/**
+ * Result of freeze panes initialization.
+ */
+export type FreezePanesInitResult = import("./index").FreezePanesInitResult;
+/**
+ * Threshold check result indicating which freeze behaviors are enabled.
+ */
+export type ThresholdResult = {
+    /**
+     * - Whether rows should be frozen (vertical sticky).
+     */
+    freezeRows: boolean;
+    /**
+     * - Whether columns should be frozen (horizontal sticky).
+     */
+    freezeColumns: boolean;
+};
+/**
+ * Gets class strings for sticky mode.
+ * @param {boolean} enabled - Whether freeze panes is enabled.
+ * @returns {FreezePanesClassStrings} Object with horizontal, vertical, and axis class strings.
+ */
+export function getClassStrings(enabled: boolean): FreezePanesClassStrings;
+/**
+ * Initializes the sticky strategy.
+ * @param {HTMLElement} container - The container element.
+ * @param {FreezePanesTableInfo} tableInfo - Table information.
+ * @returns {FreezePanesInitResult} Object with destroy function to clean up the observer.
+ */
+export function initialize(container: HTMLElement, tableInfo: FreezePanesTableInfo): FreezePanesInitResult;