@highcharts/grid-pro 2.0.0 → 2.1.0

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.
      *

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

@@ -1,18 +1,20 @@
 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;
+/**
+ * Record of cell renderer classes
+ */
+export declare 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.
+ */
+export declare function registerRenderer<T extends keyof CellRendererTypeRegistry>(key: T, CellRendererClass: CellRendererTypeRegistry[T]): boolean;
+declare const _default: {
+    readonly types: CellRendererTypeRegistry;
+    readonly registerRenderer: typeof registerRenderer;
+};
+export default _default;

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

@@ -15,44 +15,38 @@
 'use strict';
 /* *
  *
- *  Namespace
+ *  Constants
  *
  * */
-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 = {}));
+/**
+ * Record of cell renderer classes
+ */
+export const 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.
+ */
+export function registerRenderer(key, CellRendererClass) {
+    return (!!key &&
+        !types[key] &&
+        !!(types[key] = CellRendererClass));
+}
 /* *
  *
  *  Default Export
  *
  * */
-export default CellRendererRegistry;
+export default {
+    types,
+    registerRenderer
+};

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

@@ -1,4 +1,12 @@
+import type Column from '../../Core/Table/Column';
 import type CellRendererType from './CellRendererType';
+/**
+ * Extends the grid classes with cell editing functionality.
+ *
+ * @param ColumnClass
+ * The class to extend.
+ */
+export declare function compose(ColumnClass: typeof Column): void;
 declare module '../../Core/Options' {
     interface ColumnCellOptions {
         /**
@@ -15,4 +23,7 @@ declare module '../../Core/Table/Column' {
         cellRenderer: CellRendererType;
     }
 }
-export default CellRenderersComposition;
+declare const _default: {
+    readonly compose: typeof compose;
+};
+export default _default;

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

@@ -23,57 +23,52 @@ const { addEvent, pushUnique } = U;
  *
  * */
 /**
- * @internal
+ * Extends the grid classes with cell editing functionality.
+ *
+ * @param ColumnClass
+ * The class to extend.
  */
-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 || {});
+export function compose(ColumnClass) {
+    if (!pushUnique(Globals.composed, 'CellRenderers')) {
+        return;
     }
-    /**
-     * Render content of cell.
-     * @param this
-     * Current column.
-     *
-     * @param cell
-     * Current cell.
-     *
-     * @returns
-     * Formatted cell content.
-     */
-    function createCellContent(cell) {
-        return this.cellRenderer.render(cell);
+    addEvent(ColumnClass, 'afterInit', afterColumnInit);
+    ColumnClass.prototype.createCellContent = createCellContent;
+}
+/**
+ * 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;
     }
-})(CellRenderersComposition || (CellRenderersComposition = {}));
+    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);
+}
 /* *
  *
  *  Default Export
  *
  * */
-export default CellRenderersComposition;
+export default {
+    compose
+};

package/es-modules/Grid/Pro/CellRendering/ContentTypes/CheckboxContent.js

@@ -38,7 +38,7 @@ class CheckboxContent extends CellContentPro {
                 this.changeHandler(e);
             }
             else {
-                void this.cell.setValue(this.value, true);
+                void this.cell.editValue(this.value);
             }
         };
         this.onKeyDown = (e) => {
@@ -66,6 +66,7 @@ class CheckboxContent extends CellContentPro {
         input.tabIndex = -1;
         input.type = 'checkbox';
         input.name = cell.column.id + '-' + cell.row.id;
+        input.classList.add(Globals.getClassName('input'));
         if (options.attributes) {
             Object.entries(options.attributes).forEach(([key, value]) => {
                 input.setAttribute(key, value);
@@ -73,7 +74,6 @@ class CheckboxContent extends CellContentPro {
         }
         this.update();
         parentElement.appendChild(this.input);
-        input.classList.add(Globals.classNamePrefix + 'field-auto-width');
         input.addEventListener('change', this.onChange);
         input.addEventListener('keydown', this.onKeyDown);
         input.addEventListener('blur', this.onBlur);

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

@@ -1,11 +1,11 @@
 import type { EditModeContent } from '../../CellEditing/CellEditMode.js';
-import type DateInputRenderer from '../Renderers/DateInputRenderer.js';
+import type { DateInputRendererOptions } from '../Renderers/DateInputRenderer.js';
 import DateInputContentBase from './DateInputContentBase.js';
 /**
  * Represents a date input type of cell content.
  */
 declare class DateInputContent extends DateInputContentBase implements EditModeContent {
-    options: DateInputRenderer.Options;
+    options: DateInputRendererOptions;
     protected getInputType(): 'date';
     protected convertToInputValue(): string;
 }