@highcharts/grid-pro 2.0.1 → 2.1.0

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;
 }

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

@@ -1,4 +1,4 @@
-import type DateInputRendererBase from '../Renderers/DateInputRendererBase';
+import type { DateInputRendererBaseOptions } from '../Renderers/DateInputRendererBase';
 import type { EditModeContent } from '../../CellEditing/CellEditMode';
 import type TableCell from '../../../Core/Table/Body/TableCell';
 import CellContentPro from '../CellContentPro.js';
@@ -17,7 +17,7 @@ declare abstract class DateInputContentBase extends CellContentPro implements Ed
     /**
      * Options of the renderer.
      */
-    options: DateInputRendererBase.Options;
+    options: DateInputRendererBaseOptions;
     /**
      * The HTML input element representing the date input.
      */

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

@@ -14,6 +14,7 @@
  * */
 'use strict';
 import CellContentPro from '../CellContentPro.js';
+import Globals from '../../../Core/Globals.js';
 /* *
  *
  *  Class
@@ -50,7 +51,7 @@ class DateInputContentBase extends CellContentPro {
             }
             if (e.key === 'Enter') {
                 this.cell.htmlElement.focus();
-                void this.cell.setValue(this.value, true);
+                void this.cell.editValue(this.value);
             }
         };
         this.onBlur = (e) => {
@@ -58,7 +59,7 @@ class DateInputContentBase extends CellContentPro {
                 this.blurHandler(e);
                 return;
             }
-            void this.cell.setValue(this.value, true);
+            void this.cell.editValue(this.value);
         };
         this.onCellKeyDown = (e) => {
             if (e.key === ' ') {
@@ -85,6 +86,7 @@ class DateInputContentBase extends CellContentPro {
         input.tabIndex = -1;
         input.type = this.getInputType();
         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);

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

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

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

@@ -15,6 +15,7 @@
 'use strict';
 import CellContentPro from '../CellContentPro.js';
 import U from '../../../../Core/Utilities.js';
+import Globals from '../../../Core/Globals.js';
 const { defined } = U;
 /* *
  *
@@ -45,7 +46,7 @@ class NumberInputContent extends CellContentPro {
                 this.changeHandler(e);
                 return;
             }
-            void this.cell.setValue(this.value, true);
+            void this.cell.editValue(this.value);
         };
         this.onKeyDown = (e) => {
             e.stopPropagation();
@@ -90,6 +91,7 @@ class NumberInputContent extends CellContentPro {
         input.type = 'number';
         input.tabIndex = -1;
         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);

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

@@ -16,6 +16,7 @@
 'use strict';
 import CellContentPro from '../CellContentPro.js';
 import AST from '../../../../Core/Renderer/HTML/AST.js';
+import Globals from '../../../Core/Globals.js';
 /* *
  *
  *  Class
@@ -46,7 +47,7 @@ class SelectContent extends CellContentPro {
             }
             else {
                 this.cell.htmlElement.focus();
-                void this.cell.setValue(this.value, true);
+                void this.cell.editValue(this.value);
             }
         };
         this.onKeyDown = (e) => {
@@ -86,6 +87,7 @@ class SelectContent extends CellContentPro {
         const select = this.select = document.createElement('select');
         select.tabIndex = -1;
         select.name = cell.column.id + '-' + cell.row.id;
+        select.classList.add(Globals.getClassName('input'));
         if (options.attributes) {
             Object.entries(options.attributes).forEach(([key, value]) => {
                 select.setAttribute(key, value);

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

@@ -7,8 +7,27 @@ import CellContentPro from '../CellContentPro.js';
  * Represents a sparkline type of cell content.
  */
 declare class SparklineContent extends CellContentPro {
+    /**
+     * Highcharts namespace used by the Sparkline Renderer.
+     * This is set to `undefined` by default, and should be set to the
+     * Highcharts namespace before using the Sparkline Renderer.
+     */
+    static H: undefined | typeof HighchartsNamespace;
+    /**
+     * The default chart options for the sparkline content.
+     */
     static defaultChartOptions: DeepPartial<HighchartsNamespace.Options>;
+    /**
+     * The Highcharts chart instance.
+     */
     chart?: HighchartsNamespace.Chart;
+    /**
+     * The parent element for the sparkline content.
+     */
+    private parentElement;
+    /**
+     * The HTML container element for the chart.
+     */
     private chartContainer?;
     constructor(cell: TableCell, renderer: SparklineRenderer, parentElement?: HTMLElement);
     protected add(parentElement?: HTMLElement): void;
@@ -17,12 +36,4 @@ declare class SparklineContent extends CellContentPro {
     private getProcessedOptions;
     private onKeyDown;
 }
-declare namespace SparklineContent {
-    /**
-     * Highcharts namespace used by the Sparkline Renderer.
-     * This is set to `undefined` by default, and should be set to the
-     * Highcharts namespace before using the Sparkline Renderer.
-     */
-    let H: undefined | typeof HighchartsNamespace;
-}
 export default SparklineContent;

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

@@ -37,7 +37,8 @@ class SparklineContent extends CellContentPro {
         this.onKeyDown = () => {
             this.cell.htmlElement.focus();
         };
-        this.add(parentElement);
+        this.parentElement = parentElement ?? this.cell.htmlElement;
+        this.add(this.parentElement);
     }
     /* *
      *
@@ -49,15 +50,22 @@ class SparklineContent extends CellContentPro {
         if (!H || !defined(this.cell.value)) {
             return;
         }
+        this.parentElement = parentElement;
         this.chartContainer = document.createElement('div');
-        parentElement.classList.add(Globals.getClassName('noPadding'));
-        parentElement.appendChild(this.chartContainer);
+        this.parentElement.classList.add(Globals.getClassName('noPadding'));
+        this.parentElement.appendChild(this.chartContainer);
         this.chart = H.Chart.chart(this.chartContainer, merge(SparklineContent.defaultChartOptions, this.getProcessedOptions()));
         this.chartContainer.addEventListener('click', this.onKeyDown);
     }
     update() {
-        const chartOptions = this.getProcessedOptions();
-        this.chart?.update(chartOptions, true, false, chartOptions.chart?.animation);
+        if (this.chart) {
+            const chartOptions = this.getProcessedOptions();
+            this.chart.update(chartOptions, true, false, chartOptions.chart?.animation);
+        }
+        else {
+            this.destroy();
+            this.add(this.parentElement);
+        }
     }
     destroy() {
         this.chartContainer?.removeEventListener('keydown', this.onKeyDown);
@@ -65,7 +73,7 @@ class SparklineContent extends CellContentPro {
         this.chartContainer?.remove();
         delete this.chart;
         delete this.chartContainer;
-        this.cell.htmlElement.classList.remove(Globals.getClassName('noPadding'));
+        this.parentElement.classList.remove(Globals.getClassName('noPadding'));
     }
     getProcessedOptions() {
         const renderer = this.renderer;
@@ -89,6 +97,9 @@ class SparklineContent extends CellContentPro {
         return options;
     }
 }
+/**
+ * The default chart options for the sparkline content.
+ */
 SparklineContent.defaultChartOptions = {
     chart: {
         height: 40,
@@ -142,13 +153,6 @@ SparklineContent.defaultChartOptions = {
         }
     }
 };
-/* *
- *
- *  Namespace
- *
- * */
-(function (SparklineContent) {
-})(SparklineContent || (SparklineContent = {}));
 /* *
  *
  *  Default Export

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

@@ -16,6 +16,7 @@
 'use strict';
 import CellContentPro from '../CellContentPro.js';
 import U from '../../../../Core/Utilities.js';
+import Globals from '../../../Core/Globals.js';
 const { defined } = U;
 /* *
  *
@@ -42,7 +43,7 @@ class TextInputContent extends CellContentPro {
                 this.changeHandler(e);
                 return;
             }
-            void this.cell.setValue(e.target.value, true);
+            void this.cell.editValue(e.target.value);
         };
         this.onKeyDown = (e) => {
             e.stopPropagation();
@@ -86,6 +87,7 @@ class TextInputContent extends CellContentPro {
         const { options } = this.renderer;
         input.tabIndex = -1;
         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);

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

@@ -1,11 +1,11 @@
 import type { EditModeContent } from '../../CellEditing/CellEditMode.js';
-import type TimeInputRenderer from '../Renderers/TimeInputRenderer.js';
+import type { TimeInputRendererOptions } from '../Renderers/TimeInputRenderer.js';
 import DateInputContentBase from './DateInputContentBase.js';
 /**
  * Represents a time input type of cell content.
  */
 declare class TimeInputContent extends DateInputContentBase implements EditModeContent {
-    options: TimeInputRenderer.Options;
+    options: TimeInputRendererOptions;
     protected getInputType(): 'time';
     get value(): number;
     protected convertToInputValue(): string;

package/es-modules/Grid/Pro/CellRendering/Renderers/CheckboxRenderer.d.ts

@@ -2,7 +2,7 @@ import type Column from '../../../Core/Table/Column';
 import type { EditModeRenderer } from '../../CellEditing/CellEditMode';
 import type TableCell from '../../../Core/Table/Body/TableCell';
 import type { EditModeRendererTypeName } from '../../CellEditing/CellEditingComposition';
-import CellRenderer from '../CellRenderer.js';
+import { CellRenderer, CellRendererOptions } from '../CellRenderer.js';
 import CheckboxContent from '../ContentTypes/CheckboxContent.js';
 /**
  * Renderer for the Checkbox in a column.
@@ -15,32 +15,30 @@ declare class CheckboxRenderer extends CellRenderer implements EditModeRenderer
     /**
      * Default options for the checkbox renderer.
      */
-    static defaultOptions: CheckboxRenderer.Options;
-    options: CheckboxRenderer.Options;
-    constructor(column: Column, options: Partial<CellRenderer.Options>);
+    static defaultOptions: CheckboxRendererOptions;
+    options: CheckboxRendererOptions;
+    constructor(column: Column, options: Partial<CellRendererOptions>);
     render(cell: TableCell, parentElement?: HTMLElement): CheckboxContent;
 }
-declare namespace CheckboxRenderer {
+/**
+ * Options to control the checkbox renderer content.
+ */
+export interface CheckboxRendererOptions extends CellRendererOptions {
+    type: 'checkbox';
     /**
-     * Options to control the checkbox renderer content.
+     * Whether the checkbox is disabled.
      */
-    interface Options extends CellRenderer.Options {
-        type: 'checkbox';
-        /**
-         * Whether the checkbox is disabled.
-         */
-        disabled?: boolean;
-        /**
-         * Attributes to control the checkbox.
-         */
-        attributes?: CheckboxAttributes;
-    }
+    disabled?: boolean;
     /**
      * Attributes to control the checkbox.
      */
-    interface CheckboxAttributes {
-        checked?: boolean;
-    }
+    attributes?: CheckboxAttributes;
+}
+/**
+ * Attributes to control the checkbox.
+ */
+export interface CheckboxAttributes {
+    checked?: boolean;
 }
 declare module '../CellRendererType' {
     interface CellRendererTypeRegistry {

package/es-modules/Grid/Pro/CellRendering/Renderers/CheckboxRenderer.js

@@ -14,8 +14,8 @@
  *
  * */
 'use strict';
-import CellRenderer from '../CellRenderer.js';
-import CellRendererRegistry from '../CellRendererRegistry.js';
+import { CellRenderer } from '../CellRenderer.js';
+import { registerRenderer } from '../CellRendererRegistry.js';
 import CheckboxContent from '../ContentTypes/CheckboxContent.js';
 import U from '../../../../Core/Utilities.js';
 const { merge } = U;
@@ -56,7 +56,7 @@ CheckboxRenderer.defaultEditingRenderer = 'checkbox';
 CheckboxRenderer.defaultOptions = {
     type: 'checkbox'
 };
-CellRendererRegistry.registerRenderer('checkbox', CheckboxRenderer);
+registerRenderer('checkbox', CheckboxRenderer);
 /* *
  *
  *  Default Export

package/es-modules/Grid/Pro/CellRendering/Renderers/DateInputRenderer.d.ts

@@ -1,9 +1,9 @@
 import type Column from '../../../Core/Table/Column';
-import type DateInputRendererBase from './DateInputRendererBase';
+import type { DateInputRendererBaseOptions } from './DateInputRendererBase';
 import type TableCell from '../../../Core/Table/Body/TableCell';
 import type { EditModeRenderer } from '../../CellEditing/CellEditMode';
 import type { EditModeRendererTypeName } from '../../CellEditing/CellEditingComposition';
-import CellRenderer from '../CellRenderer.js';
+import { CellRenderer, CellRendererOptions } from '../CellRenderer.js';
 import DateInputContent from '../ContentTypes/DateInputContent.js';
 /**
  * Renderer for the Select in a column..
@@ -16,18 +16,16 @@ declare class DateInputRenderer extends CellRenderer implements EditModeRenderer
     /**
      * Default options for the date input renderer.
      */
-    static defaultOptions: DateInputRenderer.Options;
-    options: DateInputRenderer.Options;
-    constructor(column: Column, options: Partial<CellRenderer.Options>);
+    static defaultOptions: DateInputRendererOptions;
+    options: DateInputRendererOptions;
+    constructor(column: Column, options: Partial<CellRendererOptions>);
     render(cell: TableCell, parentElement?: HTMLElement): DateInputContent;
 }
-declare namespace DateInputRenderer {
-    /**
-     * Options to control the date input renderer content.
-     */
-    interface Options extends DateInputRendererBase.Options {
-        type: 'dateInput';
-    }
+/**
+ * Options to control the date input renderer content.
+ */
+export interface DateInputRendererOptions extends DateInputRendererBaseOptions {
+    type: 'dateInput';
 }
 declare module '../CellRendererType' {
     interface CellRendererTypeRegistry {