@highcharts/grid-pro 2.0.1 → 2.1.1

package/es-modules/Grid/Core/UI/ToolbarButton.d.ts

@@ -1,8 +1,8 @@
 import type Toolbar from './Toolbar';
 import type Button from './Button';
 import type Popup from './Popup';
-import SvgIcons from './SvgIcons.js';
-import Globals from '../Globals.js';
+import { GridIconName } from './SvgIcons.js';
+import { ClassNameKey } from '../Globals.js';
 declare class ToolbarButton implements Button {
     /**
      * The wrapper element for the button.
@@ -37,7 +37,7 @@ declare class ToolbarButton implements Button {
      * The active indicator for the button.
      */
     private activeIndicator?;
-    constructor(options: ToolbarButton.Options);
+    constructor(options: ToolbarButtonOptions);
     /**
      * Adds the button to the toolbar.
      *
@@ -53,17 +53,13 @@ declare class ToolbarButton implements Button {
      * @param icon
      * The icon to set.
      */
-    setIcon(icon: SvgIcons.GridIconName): void;
+    setIcon(icon: GridIconName): void;
     setActive(active: boolean): void;
     setHighlighted(highlighted: boolean): void;
     /**
      * Destroys the button.
      */
     destroy(): void;
-    /**
-     * Initializes the state of the button.
-     */
-    protected refreshState(): void;
     /**
      * Handles the click event for the button.
      *
@@ -87,49 +83,47 @@ declare class ToolbarButton implements Button {
      */
     private removeEventListeners;
 }
-declare namespace ToolbarButton {
-    /**
-     * Options for the toolbar button.
-     */
-    interface Options {
-        /**
-         * The icon for the button.
-         */
-        icon: SvgIcons.GridIconName;
-        /**
-         * The class name key for the button.
-         */
-        classNameKey?: Globals.ClassNameKey;
-        /**
-         * The tooltip string for the button.
-         */
-        tooltip?: string;
-        /**
-         * Whether the button should be always visible.
-         */
-        alwaysVisible?: boolean;
-        /**
-         * The accessibility options for the button.
-         */
-        accessibility?: ToolbarButtonA11yOptions;
-        /**
-         * The click handler for the button.
-         */
-        onClick?: (event: MouseEvent, button: ToolbarButton) => void;
-    }
-    interface ToolbarButtonA11yOptions {
-        /**
-         * The aria label attribute for the button.
-         */
-        ariaLabel?: string;
-        /**
-         * The aria expanded attribute for the button.
-         */
-        ariaExpanded?: boolean;
-        /**
-         * The aria controls attribute for the button.
-         */
-        ariaControls?: string;
-    }
+/**
+ * Options for the toolbar button.
+ */
+export interface ToolbarButtonOptions {
+    /**
+     * The icon for the button.
+     */
+    icon: GridIconName;
+    /**
+     * The class name key for the button.
+     */
+    classNameKey?: ClassNameKey;
+    /**
+     * The tooltip string for the button.
+     */
+    tooltip?: string;
+    /**
+     * Whether the button should be always visible.
+     */
+    alwaysVisible?: boolean;
+    /**
+     * The accessibility options for the button.
+     */
+    accessibility?: ToolbarButtonA11yOptions;
+    /**
+     * The click handler for the button.
+     */
+    onClick?: (event: MouseEvent, button: ToolbarButton) => void;
+}
+export interface ToolbarButtonA11yOptions {
+    /**
+     * The aria label attribute for the button.
+     */
+    ariaLabel?: string;
+    /**
+     * The aria expanded attribute for the button.
+     */
+    ariaExpanded?: boolean;
+    /**
+     * The aria controls attribute for the button.
+     */
+    ariaControls?: string;
 }
 export default ToolbarButton;

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

@@ -13,7 +13,7 @@
  *
  * */
 'use strict';
-import SvgIcons from './SvgIcons.js';
+import { createGridIcon } from './SvgIcons.js';
 import Globals from '../Globals.js';
 import GridUtils from '../GridUtils.js';
 const { makeHTMLElement } = GridUtils;
@@ -101,7 +101,7 @@ class ToolbarButton {
      */
     setIcon(icon) {
         this.icon?.remove();
-        this.icon = SvgIcons.createGridIcon(icon);
+        this.icon = createGridIcon(icon);
         this.buttonEl?.appendChild(this.icon);
     }
     setActive(active) {
@@ -127,7 +127,8 @@ class ToolbarButton {
         delete this.toolbar;
     }
     /**
-     * Initializes the state of the button.
+     * Refreshes the state of the button.
+     * @internal
      */
     refreshState() {
         // Do nothing, to be overridden by subclasses

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

@@ -69,12 +69,10 @@ declare class CellEditing {
      */
     private destroy;
 }
-declare namespace CellEditing {
-    /**
-     * The class names used by the CellEditing functionality.
-     */
-    const classNames: {
-        readonly cellEditingContainer: string;
-    };
-}
+/**
+ * The class names used by the CellEditing functionality.
+ */
+export declare const classNames: {
+    readonly cellEditingContainer: string;
+};
 export default CellEditing;

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

@@ -163,8 +163,7 @@ class CellEditing {
         }
         this.containerElement = this.containerElement ||
             document.createElement('div');
-        this.containerElement.className =
-            CellEditing.classNames.cellEditingContainer;
+        this.containerElement.className = classNames.cellEditingContainer;
         this.editedCell?.htmlElement.appendChild(this.containerElement);
         this.editModeContent = cell.column.editModeRenderer?.render(cell, this.containerElement);
         this.editModeContent.getMainElement().focus();
@@ -192,17 +191,15 @@ class CellEditing {
 }
 /* *
  *
- *  Namespace
+ *  Declarations
  *
  * */
-(function (CellEditing) {
-    /**
-     * The class names used by the CellEditing functionality.
-     */
-    CellEditing.classNames = {
-        cellEditingContainer: Globals.classNamePrefix + 'cell-editing-container'
-    };
-})(CellEditing || (CellEditing = {}));
+/**
+ * The class names used by the CellEditing functionality.
+ */
+export const classNames = {
+    cellEditingContainer: Globals.classNamePrefix + 'cell-editing-container'
+};
 /* *
  *
  *  Default Export

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

@@ -1,6 +1,28 @@
 import type CellRendererType from '../CellRendering/CellRendererType';
+import type Column from '../../Core/Table/Column';
+import type { DeepPartial } from '../../../Shared/Types';
 import type { EditModeRenderer } from './CellEditMode';
+import type Options from '../../Core/Options';
+import type Table from '../../Core/Table/Table';
+import type TableCell from '../../Core/Table/Body/TableCell';
 import CellEditing from './CellEditing.js';
+/**
+ * Default options for the cell editing.
+ */
+export declare const defaultOptions: DeepPartial<Options>;
+/**
+ * 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.
+ */
+export declare function compose(TableClass: typeof Table, TableCellClass: typeof TableCell, ColumnClass: typeof Column): void;
 export type EditModeRendererType = Extract<CellRendererType, EditModeRenderer>;
 export type EditModeRendererTypeName = EditModeRendererType['options']['type'];
 /**
@@ -120,4 +142,8 @@ declare module '../../Core/Options' {
  * The possible types of the edit message.
  */
 export type EditMsgType = 'started' | 'edited' | 'cancelled';
-export default CellEditingComposition;
+declare const _default: {
+    compose: typeof compose;
+    defaultOptions: DeepPartial<Options>;
+};
+export default _default;

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

@@ -14,7 +14,7 @@
  *
  * */
 'use strict';
-import Defaults from '../../Core/Defaults.js';
+import { defaultOptions as gridDefaultOptions } from '../../Core/Defaults.js';
 import Globals from '../../Core/Globals.js';
 import CellEditing from './CellEditing.js';
 import CellRendererRegistry from '../CellRendering/CellRendererRegistry.js';
@@ -28,171 +28,171 @@ const { addEvent, merge, pushUnique } = U;
  *
  * */
 /**
- * @internal
+ * Default options for the cell editing.
  */
-var CellEditingComposition;
-(function (CellEditingComposition) {
-    /**
-     * Default options for the cell editing.
-     */
-    const defaultOptions = {
+export const defaultOptions = {
+    accessibility: {
+        announcements: {
+            cellEditing: true
+        }
+    },
+    lang: {
         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.'
-                    }
+            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);
+};
+/**
+ * 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.
+ */
+export function compose(TableClass, TableCellClass, ColumnClass) {
+    if (!pushUnique(Globals.composed, 'CellEditing')) {
+        return;
     }
-    /**
-     * 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';
+    merge(true, gridDefaultOptions, 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);
         }
-        return new CellRendererRegistry.types[editModeRendererTypeName](column, editModeRendererTypeName === viewRendererTypeName ? merge(column.options.cells?.renderer, { disabled: false }) || {} : {});
+        announceA11yUserEditedCell(this, e.submit ? 'edited' : 'cancelled');
+    });
+    addEvent(TableCellClass, 'afterEditValue', function () {
+        this.column.options.cells?.events?.afterEdit?.call(this);
+        announceA11yUserEditedCell(this, 'edited');
+    });
+}
+/**
+ * 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 || {});
     }
-    /**
-     * Callback function called after column initialization.
-     */
-    function afterColumnInit() {
-        const { options } = this;
-        if (options?.cells?.editMode?.enabled) {
-            this.editModeRenderer = createEditModeRenderer(this);
-        }
+    const ViewRendererType = CellRendererRegistry.types[viewRendererTypeName] ||
+        CellRendererRegistry.types.text;
+    let editModeRendererTypeName = ViewRendererType.defaultEditingRenderer;
+    if (typeof editModeRendererTypeName !== 'string') {
+        editModeRendererTypeName =
+            editModeRendererTypeName[column.dataType] || 'textInput';
     }
-    /**
-     * 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;
-        }
+    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);
     }
-    /**
-     * 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;
     }
-    /**
-     * 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);
+    const editableLang = this.row.viewport.grid.options
+        ?.lang?.accessibility?.cellEditing?.editable;
+    if (!this.column.options.cells?.editMode?.enabled || !editableLang) {
+        return;
     }
-    /**
-     * 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);
+    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;
     }
-})(CellEditingComposition || (CellEditingComposition = {}));
+    a11y.announce(msg);
+}
 /* *
  *
  *  Default Export
  *
  * */
-export default CellEditingComposition;
+export default {
+    compose,
+    defaultOptions
+};

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

@@ -4,11 +4,11 @@ import type CellContent from '../../Core/Table/CellContent/CellContent';
 /**
  * Renderer class that initialize all options per column.
  */
-declare abstract class CellRenderer {
+export declare abstract class CellRenderer {
     /**
      * Options to control the renderer content.
      */
-    abstract options: CellRenderer.Options;
+    abstract options: CellRendererOptions;
     /**
      * The column to which the specific renderer belongs.
      */
@@ -26,25 +26,23 @@ declare abstract class CellRenderer {
      */
     abstract render(cell: TableCell): CellContent;
 }
-declare namespace CellRenderer {
+/**
+ * Options to control the renderer content.
+ */
+export interface CellRendererOptions {
     /**
-     * Options to control the renderer content.
+     * 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'
      */
-    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;
-    }
+    type: string;
 }
 export default CellRenderer;

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

@@ -21,7 +21,7 @@
 /**
  * Renderer class that initialize all options per column.
  */
-class CellRenderer {
+export class CellRenderer {
     /**
      * Constructs the CellRenderer instance.
      *