@highcharts/grid-pro 2.0.0

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

@@ -0,0 +1,122 @@
+/* *
+ *
+ *  Checkbox Cell Content 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 CellContentPro from '../CellContentPro.js';
+import Globals from '../../../Core/Globals.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a checkbox type of cell content.
+ */
+class CheckboxContent extends CellContentPro {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(cell, renderer, parentElement) {
+        super(cell, renderer);
+        this.finishAfterChange = false;
+        this.onChange = (e) => {
+            if (this.changeHandler) {
+                this.changeHandler(e);
+            }
+            else {
+                void this.cell.setValue(this.value, true);
+            }
+        };
+        this.onKeyDown = (e) => {
+            this.keyDownHandler?.(e);
+        };
+        this.onBlur = (e) => {
+            this.blurHandler?.(e);
+        };
+        this.onCellKeyDown = (e) => {
+            if (e.key === ' ') {
+                this.input.click();
+            }
+        };
+        this.input = this.add(parentElement);
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    add(parentElement = this.cell.htmlElement) {
+        const cell = this.cell;
+        const { options } = this.renderer;
+        const input = this.input = document.createElement('input');
+        input.tabIndex = -1;
+        input.type = 'checkbox';
+        input.name = cell.column.id + '-' + cell.row.id;
+        if (options.attributes) {
+            Object.entries(options.attributes).forEach(([key, value]) => {
+                input.setAttribute(key, value);
+            });
+        }
+        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);
+        this.cell.htmlElement.addEventListener('keydown', this.onCellKeyDown);
+        return this.input;
+    }
+    update() {
+        const cell = this.cell;
+        const input = this.input;
+        const { options } = this.renderer;
+        input.checked = !!cell.value;
+        input.disabled = !!options.disabled;
+    }
+    get rawValue() {
+        return this.input.checked ? 'true' : 'false';
+    }
+    get value() {
+        const val = this.input.checked;
+        switch (this.cell.column.dataType) {
+            case 'datetime':
+            case 'number':
+                return +val;
+            case 'boolean':
+                return val;
+            case 'string':
+                return '' + val;
+        }
+    }
+    getMainElement() {
+        return this.input;
+    }
+    destroy() {
+        const input = this.input;
+        this.cell.htmlElement.removeEventListener('keydown', this.onCellKeyDown);
+        input.removeEventListener('blur', this.onBlur);
+        input.removeEventListener('keydown', this.onKeyDown);
+        input.removeEventListener('change', this.onChange);
+        input.remove();
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default CheckboxContent;

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

@@ -0,0 +1,12 @@
+import type { EditModeContent } from '../../CellEditing/CellEditMode.js';
+import type DateInputRenderer 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;
+    protected getInputType(): 'date';
+    protected convertToInputValue(): string;
+}
+export default DateInputContent;

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

@@ -0,0 +1,39 @@
+/* *
+ *
+ *  Date Input Cell Content 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 DateInputContentBase from './DateInputContentBase.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a date input type of cell content.
+ */
+class DateInputContent extends DateInputContentBase {
+    getInputType() {
+        return 'date';
+    }
+    convertToInputValue() {
+        return this.cell.column.viewport.grid.time.dateFormat('%Y-%m-%d', Number(this.cell.value || 0));
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default DateInputContent;

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

@@ -0,0 +1,66 @@
+import type DateInputRendererBase from '../Renderers/DateInputRendererBase';
+import type { EditModeContent } from '../../CellEditing/CellEditMode';
+import type TableCell from '../../../Core/Table/Body/TableCell';
+import CellContentPro from '../CellContentPro.js';
+import CellRenderer from '../CellRenderer';
+/**
+ * Represents a date/time/datetime input type of cell content.
+ */
+declare abstract class DateInputContentBase extends CellContentPro implements EditModeContent {
+    /**
+     * Whether to finish the edit after a change.
+     */
+    finishAfterChange: boolean;
+    blurHandler?: (e: FocusEvent) => void;
+    keyDownHandler?: (e: KeyboardEvent) => void;
+    changeHandler?: (e: Event) => void;
+    /**
+     * Options of the renderer.
+     */
+    options: DateInputRendererBase.Options;
+    /**
+     * The HTML input element representing the date input.
+     */
+    protected input: HTMLInputElement;
+    constructor(cell: TableCell, renderer: CellRenderer, parentElement?: HTMLElement);
+    /**
+     * Adds the input element to the parent element.
+     * @param parentElement The parent element to add the input element to.
+     * @returns The input element.
+     */
+    add(parentElement?: HTMLElement): HTMLInputElement;
+    /**
+     * Gets the input type. Used to override the input type.
+     */
+    protected abstract getInputType(): 'date' | 'datetime-local' | 'time';
+    /**
+     * Updates the input element.
+     */
+    update(): void;
+    /**
+     * Gets the raw value of the input element.
+     */
+    get rawValue(): string;
+    /**
+     * Gets the value of the input element.
+     */
+    get value(): number;
+    /**
+     * Gets the main element (input) of the content.
+     * @returns The input element.
+     */
+    getMainElement(): HTMLInputElement;
+    /**
+     * Destroys the content.
+     */
+    destroy(): void;
+    /**
+     * Converts the cell value to a string for the input.
+     */
+    protected abstract convertToInputValue(): string;
+    private readonly onChange;
+    private readonly onKeyDown;
+    private readonly onBlur;
+    private readonly onCellKeyDown;
+}
+export default DateInputContentBase;

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

@@ -0,0 +1,145 @@
+/* *
+ *
+ *  Date Input Cell Content Base 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 CellContentPro from '../CellContentPro.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a date/time/datetime input type of cell content.
+ */
+class DateInputContentBase extends CellContentPro {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(cell, renderer, parentElement) {
+        super(cell, renderer);
+        /**
+         * Whether to finish the edit after a change.
+         */
+        this.finishAfterChange = false;
+        this.onChange = (e) => {
+            this.changeHandler?.(e);
+        };
+        this.onKeyDown = (e) => {
+            e.stopPropagation();
+            if (this.keyDownHandler) {
+                this.keyDownHandler(e);
+                return;
+            }
+            if (e.key === 'Escape') {
+                this.cell.htmlElement.focus();
+                this.input.value = this.convertToInputValue();
+                return;
+            }
+            if (e.key === 'Enter') {
+                this.cell.htmlElement.focus();
+                void this.cell.setValue(this.value, true);
+            }
+        };
+        this.onBlur = (e) => {
+            if (this.blurHandler) {
+                this.blurHandler(e);
+                return;
+            }
+            void this.cell.setValue(this.value, true);
+        };
+        this.onCellKeyDown = (e) => {
+            if (e.key === ' ') {
+                this.input.focus();
+                e.preventDefault();
+            }
+        };
+        this.options = renderer.options;
+        this.input = this.add(parentElement);
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    /**
+     * Adds the input element to the parent element.
+     * @param parentElement The parent element to add the input element to.
+     * @returns The input element.
+     */
+    add(parentElement = this.cell.htmlElement) {
+        const { cell, options } = this;
+        const input = this.input = document.createElement('input');
+        input.tabIndex = -1;
+        input.type = this.getInputType();
+        input.name = cell.column.id + '-' + cell.row.id;
+        if (options.attributes) {
+            Object.entries(options.attributes).forEach(([key, value]) => {
+                input.setAttribute(key, value);
+            });
+        }
+        this.update();
+        parentElement.appendChild(input);
+        input.addEventListener('change', this.onChange);
+        input.addEventListener('keydown', this.onKeyDown);
+        input.addEventListener('blur', this.onBlur);
+        this.cell.htmlElement.addEventListener('keydown', this.onCellKeyDown);
+        return this.input;
+    }
+    /**
+     * Updates the input element.
+     */
+    update() {
+        const input = this.input;
+        input.value = this.convertToInputValue();
+        input.disabled = !!this.options.disabled;
+    }
+    /**
+     * Gets the raw value of the input element.
+     */
+    get rawValue() {
+        return this.input.value;
+    }
+    /**
+     * Gets the value of the input element.
+     */
+    get value() {
+        return new Date(`${this.input.value}Z`).getTime();
+    }
+    /**
+     * Gets the main element (input) of the content.
+     * @returns The input element.
+     */
+    getMainElement() {
+        return this.input;
+    }
+    /**
+     * Destroys the content.
+     */
+    destroy() {
+        const input = this.input;
+        this.cell.htmlElement.removeEventListener('keydown', this.onCellKeyDown);
+        input.removeEventListener('blur', this.onBlur);
+        input.removeEventListener('keydown', this.onKeyDown);
+        input.removeEventListener('change', this.onChange);
+        input.remove();
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default DateInputContentBase;

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

@@ -0,0 +1,12 @@
+import type { EditModeContent } from '../../CellEditing/CellEditMode.js';
+import type DateTimeInputRenderer 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;
+    protected getInputType(): 'datetime-local';
+    protected convertToInputValue(): string;
+}
+export default DateTimeInputContent;

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

@@ -0,0 +1,38 @@
+/* *
+ *
+ *  DateTime Input Cell Content 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 DateInputContentBase from './DateInputContentBase.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a datetime input type of cell content.
+ */
+class DateTimeInputContent extends DateInputContentBase {
+    getInputType() {
+        return 'datetime-local';
+    }
+    convertToInputValue() {
+        return this.cell.column.viewport.grid.time.dateFormat('%Y-%m-%dT%H:%M:%S', Number(this.cell.value || 0));
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default DateTimeInputContent;

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

@@ -0,0 +1,58 @@
+import type { EditModeContent } from '../../CellEditing/CellEditMode';
+import type TableCell from '../../../Core/Table/Body/TableCell';
+import type NumberInputRenderer from '../Renderers/NumberInputRenderer';
+import CellContentPro from '../CellContentPro.js';
+/**
+ * Represents a text input type of cell content.
+ */
+declare class NumberInputContent extends CellContentPro implements EditModeContent {
+    /**
+     * Whether to finish the edit after a change.
+     */
+    finishAfterChange: boolean;
+    blurHandler?: (e: FocusEvent) => void;
+    keyDownHandler?: (e: KeyboardEvent) => void;
+    changeHandler?: (e: Event) => void;
+    /**
+     * The HTML input element representing the text input.
+     */
+    private input;
+    constructor(cell: TableCell, renderer: NumberInputRenderer, parentElement?: HTMLElement);
+    /**
+     * Adds the input element to the parent element.
+     * @param parentElement The parent element to add the input element to.
+     * @returns The input element.
+     */
+    add(parentElement?: HTMLElement): HTMLInputElement;
+    /**
+     * Updates the input element.
+     */
+    update(): void;
+    /**
+     * Gets the raw value of the input element.
+     */
+    get rawValue(): string;
+    /**
+     * Gets the number value of the input element.
+     */
+    get value(): number;
+    private readonly dblClickHandler;
+    /**
+     * Converts the cell value to a string for the input.
+     */
+    private convertToInputValue;
+    /**
+     * Gets the main element (input) of the content.
+     * @returns The input element.
+     */
+    getMainElement(): HTMLInputElement;
+    /**
+     * Destroys the content.
+     */
+    destroy(): void;
+    private readonly onChange;
+    private readonly onKeyDown;
+    private readonly onBlur;
+    private readonly onCellKeyDown;
+}
+export default NumberInputContent;

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

@@ -0,0 +1,158 @@
+/* *
+ *
+ *  Text Input Cell Content class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Sebastian Bochan
+ *
+ * */
+'use strict';
+import CellContentPro from '../CellContentPro.js';
+import U from '../../../../Core/Utilities.js';
+const { defined } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a text input type of cell content.
+ */
+class NumberInputContent extends CellContentPro {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(cell, renderer, parentElement) {
+        super(cell, renderer);
+        /**
+         * Whether to finish the edit after a change.
+         */
+        this.finishAfterChange = false;
+        this.dblClickHandler = (e) => {
+            e.stopPropagation();
+            this.input.focus();
+        };
+        this.onChange = (e) => {
+            if (this.changeHandler) {
+                this.changeHandler(e);
+                return;
+            }
+            void this.cell.setValue(this.value, true);
+        };
+        this.onKeyDown = (e) => {
+            e.stopPropagation();
+            if (this.keyDownHandler) {
+                this.keyDownHandler(e);
+                return;
+            }
+            if (e.key === 'Escape') {
+                this.input.value = this.convertToInputValue();
+                this.cell.htmlElement.focus();
+                return;
+            }
+            if (e.key === 'Enter') {
+                this.cell.htmlElement.focus();
+            }
+        };
+        this.onBlur = (e) => {
+            this.blurHandler?.(e);
+        };
+        this.onCellKeyDown = (e) => {
+            if (e.key === ' ') {
+                this.input.focus();
+                e.preventDefault();
+            }
+        };
+        this.input = this.add(parentElement);
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    /**
+     * Adds the input element to the parent element.
+     * @param parentElement The parent element to add the input element to.
+     * @returns The input element.
+     */
+    add(parentElement = this.cell.htmlElement) {
+        const cell = this.cell;
+        const input = this.input = document.createElement('input');
+        const { options } = this.renderer;
+        input.type = 'number';
+        input.tabIndex = -1;
+        input.name = cell.column.id + '-' + cell.row.id;
+        if (options.attributes) {
+            Object.entries(options.attributes).forEach(([key, value]) => {
+                input.setAttribute(key, value);
+            });
+        }
+        this.update();
+        parentElement.appendChild(this.input);
+        input.addEventListener('change', this.onChange);
+        input.addEventListener('keydown', this.onKeyDown);
+        input.addEventListener('blur', this.onBlur);
+        input.addEventListener('dblclick', this.dblClickHandler);
+        this.cell.htmlElement.addEventListener('keydown', this.onCellKeyDown);
+        return input;
+    }
+    /**
+     * Updates the input element.
+     */
+    update() {
+        const { options } = this.renderer;
+        this.input.value = this.convertToInputValue();
+        this.input.disabled = !!options.disabled;
+    }
+    /**
+     * Gets the raw value of the input element.
+     */
+    get rawValue() {
+        return this.input.value;
+    }
+    /**
+     * Gets the number value of the input element.
+     */
+    get value() {
+        return +this.input.value;
+    }
+    /**
+     * Converts the cell value to a string for the input.
+     */
+    convertToInputValue() {
+        const val = this.cell.value;
+        return defined(val) ? '' + val : '';
+    }
+    /**
+     * Gets the main element (input) of the content.
+     * @returns The input element.
+     */
+    getMainElement() {
+        return this.input;
+    }
+    /**
+     * Destroys the content.
+     */
+    destroy() {
+        const input = this.input;
+        this.cell.htmlElement.removeEventListener('keydown', this.onCellKeyDown);
+        input.removeEventListener('blur', this.onBlur);
+        input.removeEventListener('keydown', this.onKeyDown);
+        input.removeEventListener('change', this.onChange);
+        input.remove();
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default NumberInputContent;