@highcharts/grid-pro 2.0.0

package/es-modules/Grid/Core/UI/ToolbarButton.js

@@ -0,0 +1,191 @@
+/* *
+ *
+ *  Grid Toolbar Button 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 SvgIcons from './SvgIcons.js';
+import Globals from '../Globals.js';
+import GridUtils from '../GridUtils.js';
+const { makeHTMLElement } = GridUtils;
+/* *
+ *
+ *  Class
+ *
+ * */
+class ToolbarButton {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(options) {
+        /**
+         * Used to remove the event listeners when the button is destroyed.
+         */
+        this.eventListenerDestroyers = [];
+        /**
+         * Whether the button is active.
+         */
+        this.isActive = false;
+        this.options = options;
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    /**
+     * Adds the button to the toolbar.
+     *
+     * @param toolbar
+     * The toolbar to add the button to.
+     */
+    add(toolbar) {
+        const cfg = this.options;
+        this.toolbar = toolbar;
+        toolbar.buttons.push(this);
+        const wrapper = makeHTMLElement('span', cfg.classNameKey && {
+            className: Globals.getClassName(cfg.classNameKey)
+        }, toolbar.container);
+        this.wrapper = wrapper;
+        const button = this.buttonEl = makeHTMLElement('button', {
+            className: (Globals.getClassName('button') +
+                (this.isActive ? ' active' : ''))
+        }, wrapper);
+        button.setAttribute('type', 'button');
+        button.setAttribute('tabindex', '-1');
+        this.setA11yAttributes(button);
+        this.setIcon(cfg.icon);
+        this.refreshState();
+        this.addEventListeners();
+        return this;
+    }
+    setA11yAttributes(button) {
+        const { accessibility, tooltip } = this.options;
+        const { ariaLabel, ariaExpanded, ariaControls } = accessibility || {};
+        if (tooltip) {
+            button.title = tooltip;
+        }
+        if (ariaLabel) {
+            button.setAttribute('aria-label', ariaLabel);
+        }
+        if (typeof ariaExpanded === 'boolean') {
+            button.setAttribute('aria-expanded', ariaExpanded);
+        }
+        if (ariaControls) {
+            button.setAttribute('aria-controls', ariaControls);
+        }
+    }
+    focus() {
+        this.buttonEl?.focus();
+        const tb = this.toolbar;
+        if (tb) {
+            tb.focusCursor = tb.buttons.indexOf(this);
+        }
+    }
+    /**
+     * Sets the icon for the button.
+     *
+     * @param icon
+     * The icon to set.
+     */
+    setIcon(icon) {
+        this.icon?.remove();
+        this.icon = SvgIcons.createGridIcon(icon);
+        this.buttonEl?.appendChild(this.icon);
+    }
+    setActive(active) {
+        this.isActive = active;
+        this.buttonEl?.classList.toggle('active', active);
+        this.renderActiveIndicator(active);
+    }
+    setHighlighted(highlighted) {
+        this.buttonEl?.classList.toggle('highlighted', highlighted);
+        const ariaExpanded = this.options.accessibility?.ariaExpanded;
+        if (typeof ariaExpanded === 'boolean') {
+            this.buttonEl?.setAttribute('aria-expanded', highlighted);
+        }
+    }
+    /**
+     * Destroys the button.
+     */
+    destroy() {
+        this.removeEventListeners();
+        this.wrapper?.remove();
+        // Unregister from toolbar
+        this.toolbar?.buttons.splice(this.toolbar.buttons.indexOf(this), 1);
+        delete this.toolbar;
+    }
+    /**
+     * Initializes the state of the button.
+     */
+    refreshState() {
+        // Do nothing, to be overridden by subclasses
+    }
+    /**
+     * Handles the click event for the button.
+     *
+     * @param event
+     * The mouse event.
+     */
+    clickHandler(event) {
+        this.options.onClick?.(event, this);
+    }
+    /**
+     * Renders the active indicator for the button.
+     *
+     * @param render
+     * Whether the active indicator should be rendered.
+     */
+    renderActiveIndicator(render) {
+        const button = this.buttonEl;
+        if (!button) {
+            return;
+        }
+        this.activeIndicator?.remove();
+        if (!render) {
+            delete this.activeIndicator;
+            return;
+        }
+        this.activeIndicator = makeHTMLElement('div', {
+            className: Globals.getClassName('toolbarButtonActiveIndicator')
+        }, button);
+    }
+    /**
+     * Adds event listeners to the button.
+     */
+    addEventListeners() {
+        const clickListener = (event) => {
+            this.clickHandler(event);
+        };
+        this.buttonEl?.addEventListener('click', clickListener);
+        this.eventListenerDestroyers.push(() => {
+            this.buttonEl?.removeEventListener('click', clickListener);
+        });
+    }
+    /**
+     * Removes event listeners from the button.
+     */
+    removeEventListeners() {
+        for (const destroyer of this.eventListenerDestroyers) {
+            destroyer();
+        }
+        this.eventListenerDestroyers.length = 0;
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default ToolbarButton;

package/es-modules/Grid/Pro/CellEditing/CellEditMode.d.ts

@@ -0,0 +1,112 @@
+/* *
+ *
+ *  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
+ *
+ * */
+
+
+/* *
+ *
+ *  Imports
+ *
+ * */
+
+import DataTable from '../../../Data/DataTable';
+import TableCell from '../../Core/Table/Body/TableCell';
+
+
+/* *
+ *
+ *  Interfaces
+ *
+ * */
+
+/**
+ * Interface for the edit mode content in a cell. It can be implemented by
+ * different types of edit mode contents.
+ */
+export interface EditModeContent<
+    E extends HTMLElement = HTMLElement
+> {
+    /**
+     * Returns the main element of the edit mode content. In most cases it is an
+     * input element used to edit the cell value.
+     */
+    getMainElement(): E;
+
+    /**
+     * Value of the edit mode cell content, parsed according to the column type.
+     */
+    readonly value: DataTable.CellType;
+
+    /**
+     * Raw value of the edit mode cell content, in a string format.
+     */
+    readonly rawValue: string;
+
+    /**
+     * Destroys the edit mode content, removing all event listeners
+     * and references to the DOM elements.
+     */
+    destroy(): void;
+
+    /**
+     * Blur event handler for the edit mode content that can be overwritten in
+     * the Edit Mode Class.
+     *
+     * @param e
+     * The focus event that triggered the blur.
+     */
+    blurHandler?: (e: FocusEvent) => void;
+
+    /**
+     * Key down event handler for the edit mode content that can be overwritten
+     * in the Edit Mode Class.
+     *
+     * @param e
+     * The keyboard event that triggered the key down.
+     */
+    keyDownHandler?: (e: KeyboardEvent) => void;
+
+    /**
+     * Change event handler for the edit mode content that can be
+     * overwritten in the Edit Mode Class.
+     *
+     * @param e
+     * The event that triggered the change.
+     */
+    changeHandler?: (e: Event) => void;
+
+    /**
+     * Indicates whether the edit mode should finish after a change event.
+     */
+    readonly finishAfterChange: boolean;
+}
+
+/**
+ * Interface for rendering edit mode content in a cell. It allows the view
+ * renderers to be used in the edit mode of a cell.
+ */
+export interface EditModeRenderer {
+    /**
+     * Renders the edit mode content for a given cell.
+     *
+     * @param cell
+     * The cell to render the edit mode content for.
+     *
+     * @param parent
+     * Optional parent element to append the rendered content to. If not
+     * provided, the content will be rendered in the cell's main element.
+     */
+    render(cell: TableCell, parent?: HTMLElement): EditModeContent;
+}

package/es-modules/Grid/Pro/CellEditing/CellEditing.d.ts

@@ -0,0 +1,80 @@
+import { EditModeContent } from './CellEditMode.js';
+import TableCell from '../../Core/Table/Body/TableCell.js';
+import Table from '../../Core/Table/Table.js';
+/**
+ * The class that handles the manual editing of cells in the data grid.
+ */
+declare class CellEditing {
+    /**
+     * The viewport the edited cells are part of.
+     */
+    readonly viewport: Table;
+    /**
+     * The cell being currently edited.
+     */
+    editedCell?: TableCell;
+    /**
+     * The content of the cell edit mode, which represents a context containing
+     * the input field or similar element for applying changes to the cell
+     * value.
+     */
+    editModeContent?: EditModeContent;
+    /**
+     * The container element for the cell edit mode, which is used to
+     * position the edit mode content correctly within the cell.
+     */
+    private containerElement?;
+    constructor(viewport: Table);
+    /**
+     * Turns the cell into an editable input field.
+     *
+     * @param cell
+     * The cell that is to be edited.
+     */
+    startEditing(cell: TableCell): void;
+    /**
+     * Stops the editing of the cell.
+     *
+     * @param submit
+     * Whether to save the value of the input to the cell. Defaults to true.
+     *
+     * @return
+     * Returns `true` if the cell was successfully stopped editing.
+     */
+    stopEditing(submit?: boolean): boolean;
+    setA11yAttributes(valid: boolean): void;
+    /**
+     * Handles the blur event on the input field.
+     */
+    private readonly onInputBlur;
+    /**
+     * Handles the change event on the input field.
+     */
+    private readonly onInputChange;
+    /**
+     * Handles the keydown event on the input field. Cancels editing on escape
+     * and saves the value on enter.
+     *
+     * @param e
+     * The keyboard event.
+     */
+    private readonly onInputKeyDown;
+    /**
+     * Renders the input field for the cell, focuses it and sets up event
+     * listeners.
+     */
+    private render;
+    /**
+     * Removes event listeners and the input element.
+     */
+    private destroy;
+}
+declare namespace CellEditing {
+    /**
+     * The class names used by the CellEditing functionality.
+     */
+    const classNames: {
+        readonly cellEditingContainer: string;
+    };
+}
+export default CellEditing;

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

@@ -0,0 +1,211 @@
+/* *
+ *
+ *  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 Globals from '../../Core/Globals.js';
+import U from '../../../Core/Utilities.js';
+const { fireEvent } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * The class that handles the manual editing of cells in the data grid.
+ */
+class CellEditing {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(viewport) {
+        /**
+         * Handles the blur event on the input field.
+         */
+        this.onInputBlur = () => {
+            if (!this.stopEditing()) {
+                this.editModeContent?.getMainElement().focus();
+            }
+        };
+        /**
+         * Handles the change event on the input field.
+         */
+        this.onInputChange = () => {
+            if (this.editModeContent?.finishAfterChange &&
+                !this.stopEditing()) {
+                this.editModeContent?.getMainElement().focus();
+            }
+        };
+        /**
+         * Handles the keydown event on the input field. Cancels editing on escape
+         * and saves the value on enter.
+         *
+         * @param e
+         * The keyboard event.
+         */
+        this.onInputKeyDown = (e) => {
+            const { key } = e;
+            e.stopPropagation();
+            if (key === 'Escape') {
+                this.stopEditing(false);
+                return;
+            }
+            if (key === 'Enter') {
+                if (this.editModeContent?.finishAfterChange) {
+                    this.onInputChange();
+                    return;
+                }
+                this.stopEditing();
+            }
+        };
+        this.viewport = viewport;
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    /**
+     * Turns the cell into an editable input field.
+     *
+     * @param cell
+     * The cell that is to be edited.
+     */
+    startEditing(cell) {
+        if (this.editedCell === cell || (
+        // If value is invalid, do not start new editing
+        this.editedCell && !this.stopEditing())) {
+            return;
+        }
+        this.editedCell = cell;
+        cell.htmlElement.classList.add(Globals.getClassName('editedCell'));
+        this.render();
+        fireEvent(cell, 'startedEditing');
+    }
+    /**
+     * Stops the editing of the cell.
+     *
+     * @param submit
+     * Whether to save the value of the input to the cell. Defaults to true.
+     *
+     * @return
+     * Returns `true` if the cell was successfully stopped editing.
+     */
+    stopEditing(submit = true) {
+        const cell = this.editedCell;
+        const emContent = this.editModeContent;
+        if (!cell || !emContent) {
+            return false;
+        }
+        const { column } = cell;
+        const vp = column.viewport;
+        const newValue = emContent.value;
+        if (submit) {
+            const validationErrors = [];
+            if (!vp.validator.validate(cell, validationErrors)) {
+                vp.validator.initErrorBox(cell, validationErrors);
+                this.setA11yAttributes(false);
+                return false;
+            }
+            this.setA11yAttributes(true);
+            vp.validator.hide();
+            vp.validator.errorCell = void 0;
+        }
+        // Hide notification
+        this.viewport.validator.hide();
+        // Hide input
+        this.destroy();
+        cell.htmlElement.classList.remove(Globals.getClassName('editedCell'));
+        cell.htmlElement.focus();
+        const isValueChanged = cell.value !== newValue;
+        void cell.setValue(submit ? newValue : cell.value, submit && isValueChanged);
+        if (isValueChanged) {
+            fireEvent(cell, 'stoppedEditing', { submit });
+        }
+        delete this.editedCell;
+        return true;
+    }
+    setA11yAttributes(valid) {
+        const mainElement = this.editModeContent?.getMainElement();
+        if (!mainElement) {
+            return;
+        }
+        if (!valid) {
+            mainElement.setAttribute('aria-invalid', 'true');
+            mainElement.setAttribute('aria-errormessage', 'notification-error');
+        }
+        else {
+            mainElement.setAttribute('aria-invalid', 'false');
+            mainElement.setAttribute('aria-errormessage', '');
+        }
+    }
+    /**
+     * Renders the input field for the cell, focuses it and sets up event
+     * listeners.
+     */
+    render() {
+        const cell = this.editedCell;
+        if (!cell || !cell.column.editModeRenderer) {
+            return;
+        }
+        this.containerElement = this.containerElement ||
+            document.createElement('div');
+        this.containerElement.className =
+            CellEditing.classNames.cellEditingContainer;
+        this.editedCell?.htmlElement.appendChild(this.containerElement);
+        this.editModeContent = cell.column.editModeRenderer?.render(cell, this.containerElement);
+        this.editModeContent.getMainElement().focus();
+        this.editModeContent.blurHandler = this.onInputBlur;
+        this.editModeContent.changeHandler = this.onInputChange;
+        this.editModeContent.keyDownHandler = this.onInputKeyDown;
+        const rules = cell.column.options?.cells?.editMode?.validationRules ||
+            [];
+        if (rules.includes('notEmpty')) {
+            this.editModeContent.getMainElement().setAttribute('aria-required', 'true');
+        }
+    }
+    /**
+     * Removes event listeners and the input element.
+     */
+    destroy() {
+        if (!this.editModeContent) {
+            return;
+        }
+        this.editModeContent.destroy();
+        this.containerElement?.remove();
+        delete this.editModeContent;
+        delete this.containerElement;
+    }
+}
+/* *
+ *
+ *  Namespace
+ *
+ * */
+(function (CellEditing) {
+    /**
+     * The class names used by the CellEditing functionality.
+     */
+    CellEditing.classNames = {
+        cellEditingContainer: Globals.classNamePrefix + 'cell-editing-container'
+    };
+})(CellEditing || (CellEditing = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default CellEditing;

package/es-modules/Grid/Pro/CellEditing/CellEditingComposition.d.ts

@@ -0,0 +1,123 @@
+import type CellRendererType from '../CellRendering/CellRendererType';
+import type { EditModeRenderer } from './CellEditMode';
+import CellEditing from './CellEditing.js';
+export type EditModeRendererType = Extract<CellRendererType, EditModeRenderer>;
+export type EditModeRendererTypeName = EditModeRendererType['options']['type'];
+/**
+ * The options for the cell edit mode functionality.
+ */
+export interface ColumnEditModeOptions {
+    /**
+     * Whether to enable the cell edit mode functionality.
+     */
+    enabled?: boolean;
+    /**
+     * The edit mode renderer for the column.
+     */
+    renderer?: EditModeRendererType['options'];
+}
+/**
+ * Accessibility options for the Grid cell editing functionality.
+ */
+export interface CellEditingLangA11yOptions {
+    /**
+     * An additional hint (a visually hidden span) read by the voice over
+     * after the cell value.
+     *
+     * @default 'Editable.'
+     */
+    editable?: string;
+    /**
+     * Accessibility lang options for the cell editing announcements.
+     */
+    announcements?: {
+        /**
+         * The message when the cell editing started.
+         *
+         * @default 'Entered cell editing mode.'
+         */
+        started?: string;
+        /**
+         * The message when the cell editing ended.
+         *
+         * @default 'Edited cell value.'
+         */
+        edited?: string;
+        /**
+         * The message when the cell editing was cancelled.
+         *
+         * @default 'Editing cancelled.'
+         */
+        cancelled?: string;
+        /**
+         * The message when the cell value is not valid. It precedes the
+         * error messages.
+         *
+         * @default 'Provided value is not valid.'
+         */
+        notValid?: string;
+    };
+}
+declare module '../../Core/Table/Table' {
+    export default interface Table {
+        /**
+         * The cell editing instance for the table.
+         */
+        cellEditing?: CellEditing;
+    }
+}
+declare module '../../Core/Table/Column' {
+    export default interface Column {
+        /**
+         * The edit mode renderer for the column.
+         */
+        editModeRenderer?: EditModeRendererType;
+    }
+}
+declare module '../../Core/Table/Body/TableCell' {
+    export default interface TableCell {
+        /**
+         * The HTML span element that contains the 'editable' hint for the cell.
+         */
+        a11yEditableHint?: HTMLSpanElement;
+    }
+}
+declare module '../GridEvents' {
+    interface CellEvents {
+        /**
+         * Callback function to be called after editing of cell value.
+         */
+        afterEdit?: CellEventCallback;
+    }
+}
+declare module '../../Core/Accessibility/A11yOptions' {
+    interface A11yAnnouncementsOptions {
+        /**
+         * Enable accessibility announcements for the cell editing.
+         *
+         * @default true
+         */
+        cellEditing?: boolean;
+    }
+    interface LangAccessibilityOptions {
+        /**
+         * Language options for the accessibility descriptions in cell editing.
+         */
+        cellEditing?: CellEditingLangA11yOptions;
+    }
+}
+declare module '../../Core/Options' {
+    interface ColumnCellOptions {
+        /**
+         * Whether to enabled the cell edit mode functionality. It allows to
+         * edit the cell value in a separate input field that is displayed
+         * after double-clicking the cell or pressing the Enter key.
+         */
+        editMode?: ColumnEditModeOptions;
+    }
+}
+/**
+ * The possible types of the edit message.
+ */
+export type EditMsgType = 'started' | 'edited' | 'cancelled';
+export default CellEditingComposition;