@highcharts/grid-pro 2.0.0

package/es-modules/Grid/Pro/CellEditing/CellEditingComposition.js

@@ -0,0 +1,198 @@
+/* *
+ *
+ *  Grid Cell Editing class.
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *  - Sebastian Bochan
+ *
+ * */
+'use strict';
+import Defaults from '../../Core/Defaults.js';
+import Globals from '../../Core/Globals.js';
+import CellEditing from './CellEditing.js';
+import CellRendererRegistry from '../CellRendering/CellRendererRegistry.js';
+import GU from '../../Core/GridUtils.js';
+import U from '../../../Core/Utilities.js';
+const { makeHTMLElement } = GU;
+const { addEvent, merge, pushUnique } = U;
+/* *
+ *
+ *  Composition
+ *
+ * */
+/**
+ * @internal
+ */
+var CellEditingComposition;
+(function (CellEditingComposition) {
+    /**
+     * Default options for the cell editing.
+     */
+    const defaultOptions = {
+        accessibility: {
+            announcements: {
+                cellEditing: true
+            }
+        },
+        lang: {
+            accessibility: {
+                cellEditing: {
+                    editable: 'Editable.',
+                    announcements: {
+                        started: 'Entered cell editing mode.',
+                        edited: 'Edited cell value.',
+                        cancelled: 'Editing canceled.',
+                        notValid: 'Provided value is not valid.'
+                    }
+                }
+            }
+        }
+    };
+    /**
+     * Extends the grid classes with cell editing functionality.
+     *
+     * @param TableClass
+     * The class to extend.
+     *
+     * @param TableCellClass
+     * The class to extend.
+     *
+     * @param ColumnClass
+     * The class to extend.
+     */
+    function compose(TableClass, TableCellClass, ColumnClass) {
+        if (!pushUnique(Globals.composed, 'CellEditing')) {
+            return;
+        }
+        merge(true, Defaults.defaultOptions, defaultOptions);
+        addEvent(ColumnClass, 'afterInit', afterColumnInit);
+        addEvent(TableClass, 'beforeInit', initTable);
+        addEvent(TableCellClass, 'keyDown', onCellKeyDown);
+        addEvent(TableCellClass, 'dblClick', onCellDblClick);
+        addEvent(TableCellClass, 'afterRender', addEditableCellA11yHint);
+        addEvent(TableCellClass, 'startedEditing', function () {
+            announceA11yUserEditedCell(this, 'started');
+        });
+        addEvent(TableCellClass, 'stoppedEditing', function (e) {
+            if (e.submit) {
+                this.column.options.cells?.events?.afterEdit?.call(this);
+            }
+            announceA11yUserEditedCell(this, e.submit ? 'edited' : 'cancelled');
+        });
+    }
+    CellEditingComposition.compose = compose;
+    /**
+     * Callback function called before table initialization.
+     */
+    function initTable() {
+        this.cellEditing = new CellEditing(this);
+    }
+    /**
+     * Creates the edit mode renderer for the column.
+     *
+     * @param column
+     * The column to create the edit mode renderer for.
+     */
+    function createEditModeRenderer(column) {
+        const editModeOptions = column.options.cells?.editMode;
+        const selectedEditModeRendererTypeName = editModeOptions?.renderer?.type;
+        const viewRendererTypeName = column.options?.cells?.renderer?.type || 'text';
+        if (selectedEditModeRendererTypeName) {
+            return new CellRendererRegistry.types[selectedEditModeRendererTypeName](column, editModeOptions?.renderer || {});
+        }
+        const ViewRendererType = CellRendererRegistry.types[viewRendererTypeName] ||
+            CellRendererRegistry.types.text;
+        let editModeRendererTypeName = ViewRendererType.defaultEditingRenderer;
+        if (typeof editModeRendererTypeName !== 'string') {
+            editModeRendererTypeName =
+                editModeRendererTypeName[column.dataType] || 'textInput';
+        }
+        return new CellRendererRegistry.types[editModeRendererTypeName](column, editModeRendererTypeName === viewRendererTypeName ? merge(column.options.cells?.renderer, { disabled: false }) || {} : {});
+    }
+    /**
+     * Callback function called after column initialization.
+     */
+    function afterColumnInit() {
+        const { options } = this;
+        if (options?.cells?.editMode?.enabled) {
+            this.editModeRenderer = createEditModeRenderer(this);
+        }
+    }
+    /**
+     * Callback function called when a key is pressed on a cell.
+     *
+     * @param e
+     * The event object.
+     */
+    function onCellKeyDown(e) {
+        if (e.originalEvent?.key !== 'Enter' ||
+            !this.column.editModeRenderer) {
+            return;
+        }
+        this.row.viewport.cellEditing?.startEditing(this);
+    }
+    /**
+     * Callback function called when a cell is double clicked.
+     */
+    function onCellDblClick() {
+        if (this.column.editModeRenderer) {
+            this.row.viewport.cellEditing?.startEditing(this);
+        }
+    }
+    /**
+     * Add the 'editable' hint span element for the editable cell.
+     */
+    function addEditableCellA11yHint() {
+        const a11y = this.row.viewport.grid.accessibility;
+        if (!a11y || this.a11yEditableHint?.isConnected) {
+            return;
+        }
+        const editableLang = this.row.viewport.grid.options
+            ?.lang?.accessibility?.cellEditing?.editable;
+        if (!this.column.options.cells?.editMode?.enabled || !editableLang) {
+            return;
+        }
+        this.a11yEditableHint = makeHTMLElement('span', {
+            className: Globals.getClassName('visuallyHidden'),
+            innerText: ', ' + editableLang
+        }, this.htmlElement);
+    }
+    /**
+     * Announce that the cell editing started.
+     *
+     * @param cell
+     * The cell that is being edited.
+     *
+     * @param msgType
+     * The type of the message.
+     */
+    function announceA11yUserEditedCell(cell, msgType) {
+        const a11y = cell.row.viewport.grid.accessibility;
+        if (!a11y) {
+            return;
+        }
+        const { options } = a11y.grid;
+        if (!options?.accessibility?.announcements?.cellEditing) {
+            return;
+        }
+        const lang = options?.lang?.accessibility?.cellEditing?.announcements;
+        const msg = lang?.[msgType];
+        if (!msg) {
+            return;
+        }
+        a11y.announce(msg);
+    }
+})(CellEditingComposition || (CellEditingComposition = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default CellEditingComposition;

package/es-modules/Grid/Pro/CellRendering/CellContentPro.d.ts

@@ -0,0 +1,23 @@
+import type CellRenderer from './CellRenderer';
+import type TableCell from '../../Core/Table/Body/TableCell';
+import CellContent from '../../Core/Table/CellContent/CellContent.js';
+/**
+ * Represents a cell content in the grid.
+ */
+declare abstract class CellContentPro extends CellContent {
+    /**
+     * The renderer that allows to print content (inputs, selects, etc.)
+     */
+    readonly renderer: CellRenderer;
+    /**
+     * Creates and renders the cell content.
+     *
+     * @param cell
+     * The cell to which the content belongs.
+     *
+     * @param renderer
+     * Renderer that allows print content (inputs, selects, etc.)
+     */
+    constructor(cell: TableCell, renderer: CellRenderer);
+}
+export default CellContentPro;

package/es-modules/Grid/Pro/CellRendering/CellContentPro.js

@@ -0,0 +1,45 @@
+/* *
+ *
+ *  Cell Content Pro abstract class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+import CellContent from '../../Core/Table/CellContent/CellContent.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a cell content in the grid.
+ */
+class CellContentPro extends CellContent {
+    /**
+     * Creates and renders the cell content.
+     *
+     * @param cell
+     * The cell to which the content belongs.
+     *
+     * @param renderer
+     * Renderer that allows print content (inputs, selects, etc.)
+     */
+    constructor(cell, renderer) {
+        super(cell);
+        this.renderer = renderer;
+    }
+}
+/* *
+ *
+ * Default Export
+ *
+ * */
+export default CellContentPro;

package/es-modules/Grid/Pro/CellRendering/CellRenderer.d.ts

@@ -0,0 +1,50 @@
+import type Column from '../../Core/Table/Column';
+import type TableCell from '../../Core/Table/Body/TableCell';
+import type CellContent from '../../Core/Table/CellContent/CellContent';
+/**
+ * Renderer class that initialize all options per column.
+ */
+declare abstract class CellRenderer {
+    /**
+     * Options to control the renderer content.
+     */
+    abstract options: CellRenderer.Options;
+    /**
+     * The column to which the specific renderer belongs.
+     */
+    readonly column: Column;
+    /**
+     * Constructs the CellRenderer instance.
+     *
+     * @param column
+     * The column of the cell.
+     *
+     */
+    constructor(column: Column);
+    /**
+     * Render the cell content.
+     */
+    abstract render(cell: TableCell): CellContent;
+}
+declare namespace CellRenderer {
+    /**
+     * Options to control the renderer content.
+     */
+    interface Options {
+        /**
+         * The cell content type.
+         *
+         * Can be one of the following: `'text'`, `'checkbox'`, `'select'`,
+         * `'textInput'`, `'dateInput'`, `'dateTimeInput'`, `'timeInput'`,
+         * `'numberInput'`, `'sparkline'`.
+         *
+         * You can also create your own custom renderer by extending the
+         * `CellRenderer` class and registering it in the
+         * `CellRendererTypeRegistry`.
+         *
+         * @default 'text'
+         */
+        type: string;
+    }
+}
+export default CellRenderer;

package/es-modules/Grid/Pro/CellRendering/CellRenderer.js

@@ -0,0 +1,41 @@
+/* *
+ *
+ *  Cell Renderer abstract class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Renderer class that initialize all options per column.
+ */
+class CellRenderer {
+    /**
+     * Constructs the CellRenderer instance.
+     *
+     * @param column
+     * The column of the cell.
+     *
+     */
+    constructor(column) {
+        this.column = column;
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default CellRenderer;

package/es-modules/Grid/Pro/CellRendering/CellRendererRegistry.d.ts

@@ -0,0 +1,18 @@
+import type { CellRendererTypeRegistry } from './CellRendererType';
+declare namespace CellRendererRegistry {
+    /**
+     * Record of cell renderer classes
+     */
+    const types: CellRendererTypeRegistry;
+    /**
+     * Method used to register new cell renderer classes.
+     *
+     * @param key
+     * Registry key of the cell renderer class.
+     *
+     * @param CellRendererClass
+     * Cell renderer class (aka class constructor) to register.
+     */
+    function registerRenderer<T extends keyof CellRendererTypeRegistry>(key: T, CellRendererClass: CellRendererTypeRegistry[T]): boolean;
+}
+export default CellRendererRegistry;

package/es-modules/Grid/Pro/CellRendering/CellRendererRegistry.js

@@ -0,0 +1,58 @@
+/* *
+ *
+ *  Cell Renderer Registry
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+/* *
+ *
+ *  Namespace
+ *
+ * */
+var CellRendererRegistry;
+(function (CellRendererRegistry) {
+    /* *
+     *
+     *  Constants
+     *
+     * */
+    /**
+     * Record of cell renderer classes
+     */
+    CellRendererRegistry.types = {};
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /**
+     * Method used to register new cell renderer classes.
+     *
+     * @param key
+     * Registry key of the cell renderer class.
+     *
+     * @param CellRendererClass
+     * Cell renderer class (aka class constructor) to register.
+     */
+    function registerRenderer(key, CellRendererClass) {
+        return (!!key &&
+            !CellRendererRegistry.types[key] &&
+            !!(CellRendererRegistry.types[key] = CellRendererClass));
+    }
+    CellRendererRegistry.registerRenderer = registerRenderer;
+})(CellRendererRegistry || (CellRendererRegistry = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default CellRendererRegistry;

package/es-modules/Grid/Pro/CellRendering/CellRendererType.d.ts

@@ -0,0 +1,48 @@
+/* *
+ *
+ *  Cell Renderer Type
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+
+
+/* *
+ *
+ *  Declarations
+ *
+ * */
+
+/**
+ * Contains all possible class types of the cell renderer registry.
+ */
+export type CellRendererClassType =
+    CellRendererTypeRegistry[keyof CellRendererTypeRegistry];
+
+/**
+ * Contains all possible types of the class registry.
+ */
+export type CellRendererType = CellRendererClassType['prototype'];
+
+/**
+ * Describes the class registry as a record object with class name and their
+ * class types (aka class constructor).
+ */
+export interface CellRendererTypeRegistry {
+    // Extend this interface with the declare module pattern.
+}
+
+/* *
+ *
+ *  Export
+ *
+ * */
+
+export default CellRendererType;

package/es-modules/Grid/Pro/CellRendering/CellRenderersComposition.d.ts

@@ -0,0 +1,18 @@
+import type CellRendererType from './CellRendererType';
+declare module '../../Core/Options' {
+    interface ColumnCellOptions {
+        /**
+         * Options to control the cell content rendering.
+         */
+        renderer?: CellRendererType['options'];
+    }
+}
+declare module '../../Core/Table/Column' {
+    export default interface Column {
+        /**
+         * The cell view renderer instance for the column.
+         */
+        cellRenderer: CellRendererType;
+    }
+}
+export default CellRenderersComposition;

package/es-modules/Grid/Pro/CellRendering/CellRenderersComposition.js

@@ -0,0 +1,79 @@
+/* *
+ *
+ *  Cell Content Pro composition
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+import CellRendererRegistry from './CellRendererRegistry.js';
+import Globals from '../../Core/Globals.js';
+import U from '../../../Core/Utilities.js';
+const { addEvent, pushUnique } = U;
+/* *
+ *
+ *  Composition
+ *
+ * */
+/**
+ * @internal
+ */
+var CellRenderersComposition;
+(function (CellRenderersComposition) {
+    /**
+     * Extends the grid classes with cell editing functionality.
+     *
+     * @param ColumnClass
+     * The class to extend.
+     */
+    function compose(ColumnClass) {
+        if (!pushUnique(Globals.composed, 'CellRenderers')) {
+            return;
+        }
+        addEvent(ColumnClass, 'afterInit', afterColumnInit);
+        ColumnClass.prototype.createCellContent = createCellContent;
+    }
+    CellRenderersComposition.compose = compose;
+    /**
+     * Init a type of content for a column.
+     * @param this
+     * Current column.
+     */
+    function afterColumnInit() {
+        const rendererType = this.options.cells?.renderer?.type || 'text';
+        let Renderer = CellRendererRegistry.types[rendererType];
+        if (!Renderer) {
+            // eslint-disable-next-line no-console
+            console.warn(`The cell renderer of type "${rendererType}" is not registered. Using default text renderer instead.`);
+            Renderer = CellRendererRegistry.types.text;
+        }
+        this.cellRenderer = new Renderer(this, this.options.cells?.renderer || {});
+    }
+    /**
+     * Render content of cell.
+     * @param this
+     * Current column.
+     *
+     * @param cell
+     * Current cell.
+     *
+     * @returns
+     * Formatted cell content.
+     */
+    function createCellContent(cell) {
+        return this.cellRenderer.render(cell);
+    }
+})(CellRenderersComposition || (CellRenderersComposition = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default CellRenderersComposition;

package/es-modules/Grid/Pro/CellRendering/ContentTypes/CheckboxContent.d.ts

@@ -0,0 +1,30 @@
+import type CheckboxRenderer from '../Renderers/CheckboxRenderer';
+import type DataTable from '../../../../Data/DataTable';
+import type { EditModeContent } from '../../CellEditing/CellEditMode';
+import type TableCell from '../../../Core/Table/Body/TableCell';
+import CellContentPro from '../CellContentPro.js';
+/**
+ * Represents a checkbox type of cell content.
+ */
+declare class CheckboxContent extends CellContentPro implements EditModeContent {
+    finishAfterChange: boolean;
+    blurHandler?: (e: FocusEvent) => void;
+    keyDownHandler?: (e: KeyboardEvent) => void;
+    changeHandler?: (e: Event) => void;
+    /**
+     * The HTML input element representing the checkbox.
+     */
+    private input;
+    constructor(cell: TableCell, renderer: CheckboxRenderer, parentElement?: HTMLElement);
+    protected add(parentElement?: HTMLElement): HTMLInputElement;
+    update(): void;
+    get rawValue(): string;
+    get value(): DataTable.CellType;
+    getMainElement(): HTMLInputElement;
+    destroy(): void;
+    private readonly onChange;
+    private readonly onKeyDown;
+    private readonly onBlur;
+    private readonly onCellKeyDown;
+}
+export default CheckboxContent;