@highcharts/grid-pro 2.0.0

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

@@ -0,0 +1,58 @@
+import type DataTable from '../../../../Data/DataTable';
+import type { EditModeContent } from '../../CellEditing/CellEditMode';
+import type SelectRenderer from '../Renderers/SelectRenderer';
+import type TableCell from '../../../Core/Table/Body/TableCell';
+import CellContentPro from '../CellContentPro.js';
+/**
+ * Represents a select type of cell content.
+ */
+declare class SelectContent 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 select element representing the select input.
+     */
+    private select;
+    /**
+     * The HTML option elements representing the options in the select input.
+     */
+    private optionElements;
+    constructor(cell: TableCell, renderer: SelectRenderer, parentElement?: HTMLElement);
+    /**
+     * Adds the select element to the parent element.
+     * @param parentElement The parent element to add the select element to.
+     * @returns The select element.
+     */
+    protected add(parentElement?: HTMLElement): HTMLSelectElement;
+    /**
+     * Updates the select element.
+     */
+    update(): void;
+    /**
+     * Destroys the content.
+     */
+    destroy(): void;
+    /**
+     * Gets the raw value of the select element.
+     */
+    get rawValue(): string;
+    /**
+     * Gets the value of the select element.
+     */
+    get value(): DataTable.CellType;
+    /**
+     * Gets the main element (select) of the content.
+     * @returns The select element.
+     */
+    getMainElement(): HTMLSelectElement;
+    private readonly onChange;
+    private readonly onKeyDown;
+    private readonly onBlur;
+    private readonly onCellKeyDown;
+}
+export default SelectContent;

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

@@ -0,0 +1,173 @@
+/* *
+ *
+ *  Select 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 AST from '../../../../Core/Renderer/HTML/AST.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a select type of cell content.
+ */
+class SelectContent extends CellContentPro {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(cell, renderer, parentElement) {
+        super(cell, renderer);
+        /**
+         * Whether to finish the edit after a change.
+         */
+        this.finishAfterChange = true;
+        /**
+         * The HTML option elements representing the options in the select input.
+         */
+        this.optionElements = [];
+        this.onChange = (e) => {
+            if (this.changeHandler) {
+                this.changeHandler(e);
+            }
+            else {
+                this.cell.htmlElement.focus();
+                void this.cell.setValue(this.value, true);
+            }
+        };
+        this.onKeyDown = (e) => {
+            e.stopPropagation();
+            if (this.keyDownHandler) {
+                this.keyDownHandler?.(e);
+                return;
+            }
+            if (e.key === 'Escape' || e.key === 'Enter') {
+                this.cell.htmlElement.focus();
+            }
+        };
+        this.onBlur = (e) => {
+            this.blurHandler?.(e);
+        };
+        this.onCellKeyDown = (e) => {
+            if (e.key === ' ') {
+                this.select.focus();
+                e.preventDefault();
+            }
+        };
+        this.select = this.add(parentElement);
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    /**
+     * Adds the select element to the parent element.
+     * @param parentElement The parent element to add the select element to.
+     * @returns The select element.
+     */
+    add(parentElement = this.cell.htmlElement) {
+        const cell = this.cell;
+        const { options } = this.renderer;
+        const select = this.select = document.createElement('select');
+        select.tabIndex = -1;
+        select.name = cell.column.id + '-' + cell.row.id;
+        if (options.attributes) {
+            Object.entries(options.attributes).forEach(([key, value]) => {
+                select.setAttribute(key, value);
+            });
+        }
+        this.update();
+        parentElement.appendChild(this.select);
+        select.addEventListener('change', this.onChange);
+        select.addEventListener('keydown', this.onKeyDown);
+        select.addEventListener('blur', this.onBlur);
+        this.cell.htmlElement.addEventListener('keydown', this.onCellKeyDown);
+        return select;
+    }
+    /**
+     * Updates the select element.
+     */
+    update() {
+        const cell = this.cell;
+        const { options } = this.renderer;
+        this.select.disabled = !!options.disabled;
+        // If there will be a need, we can optimize this by not removing all
+        // old options and only updating the ones that need to be updated.
+        this.select.innerHTML = AST.emptyHTML;
+        for (const option of options.options) {
+            const optionElement = document.createElement('option');
+            optionElement.value = option.value;
+            optionElement.textContent = option.label || option.value;
+            optionElement.disabled = !!option.disabled;
+            if (cell.value === option.value) {
+                optionElement.selected = true;
+            }
+            this.select.appendChild(optionElement);
+            this.optionElements.push(optionElement);
+        }
+    }
+    /**
+     * Destroys the content.
+     */
+    destroy() {
+        const select = this.select;
+        this.cell.htmlElement.removeEventListener('keydown', this.onCellKeyDown);
+        select.removeEventListener('blur', this.onBlur);
+        select.removeEventListener('keydown', this.onKeyDown);
+        select.removeEventListener('change', this.onChange);
+        for (const optionElement of this.optionElements) {
+            optionElement.remove();
+        }
+        this.optionElements.length = 0;
+        select.remove();
+    }
+    /**
+     * Gets the raw value of the select element.
+     */
+    get rawValue() {
+        return this.select.value;
+    }
+    /**
+     * Gets the value of the select element.
+     */
+    get value() {
+        const val = this.select.value;
+        switch (this.cell.column.dataType) {
+            case 'datetime':
+            case 'number':
+                return +val;
+            case 'boolean':
+                return val;
+            case 'string':
+                return '' + val;
+        }
+    }
+    /**
+     * Gets the main element (select) of the content.
+     * @returns The select element.
+     */
+    getMainElement() {
+        return this.select;
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default SelectContent;

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

@@ -0,0 +1,28 @@
+import type { DeepPartial } from '../../../../Shared/Types';
+import type SparklineRenderer from '../Renderers/SparklineRenderer';
+import type TableCell from '../../../Core/Table/Body/TableCell';
+import * as HighchartsNamespace from '../../highcharts';
+import CellContentPro from '../CellContentPro.js';
+/**
+ * Represents a sparkline type of cell content.
+ */
+declare class SparklineContent extends CellContentPro {
+    static defaultChartOptions: DeepPartial<HighchartsNamespace.Options>;
+    chart?: HighchartsNamespace.Chart;
+    private chartContainer?;
+    constructor(cell: TableCell, renderer: SparklineRenderer, parentElement?: HTMLElement);
+    protected add(parentElement?: HTMLElement): void;
+    update(): void;
+    destroy(): void;
+    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

@@ -0,0 +1,157 @@
+/* *
+ *
+ *  Sparkline 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';
+import U from '../../../../Core/Utilities.js';
+const { defined, merge } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a sparkline type of cell content.
+ */
+class SparklineContent extends CellContentPro {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(cell, renderer, parentElement) {
+        super(cell, renderer);
+        this.onKeyDown = () => {
+            this.cell.htmlElement.focus();
+        };
+        this.add(parentElement);
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    add(parentElement = this.cell.htmlElement) {
+        const H = SparklineContent.H;
+        if (!H || !defined(this.cell.value)) {
+            return;
+        }
+        this.chartContainer = document.createElement('div');
+        parentElement.classList.add(Globals.getClassName('noPadding'));
+        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);
+    }
+    destroy() {
+        this.chartContainer?.removeEventListener('keydown', this.onKeyDown);
+        this.chart?.destroy();
+        this.chartContainer?.remove();
+        delete this.chart;
+        delete this.chartContainer;
+        this.cell.htmlElement.classList.remove(Globals.getClassName('noPadding'));
+    }
+    getProcessedOptions() {
+        const renderer = this.renderer;
+        const { chartOptions } = renderer.options;
+        let options;
+        if (typeof chartOptions === 'function') {
+            options = chartOptions.call(this.cell, this.cell.value);
+        }
+        else {
+            options = merge(chartOptions) || {};
+        }
+        let trimmedValue = ('' + this.cell.value).trim();
+        if (!trimmedValue.startsWith('[') && !trimmedValue.startsWith('{')) {
+            trimmedValue = `[${trimmedValue}]`;
+        }
+        if (!options.series) {
+            options.series = [{
+                    data: JSON.parse(trimmedValue)
+                }];
+        }
+        return options;
+    }
+}
+SparklineContent.defaultChartOptions = {
+    chart: {
+        height: 40,
+        margin: [5, 8, 5, 8],
+        backgroundColor: 'transparent',
+        skipClone: true
+    },
+    accessibility: {
+        enabled: false
+    },
+    tooltip: {
+        enabled: false
+    },
+    title: {
+        text: ''
+    },
+    credits: {
+        enabled: false
+    },
+    xAxis: {
+        visible: false
+    },
+    yAxis: {
+        visible: false
+    },
+    legend: {
+        enabled: false
+    },
+    plotOptions: {
+        series: {
+            borderWidth: 0,
+            marker: {
+                enabled: false
+            },
+            states: {
+                hover: {
+                    enabled: false
+                },
+                inactive: {
+                    enabled: false
+                }
+            },
+            animation: false,
+            dataLabels: {
+                enabled: false
+            }
+        },
+        pie: {
+            slicedOffset: 0,
+            borderRadius: 0
+        }
+    }
+};
+/* *
+ *
+ *  Namespace
+ *
+ * */
+(function (SparklineContent) {
+})(SparklineContent || (SparklineContent = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default SparklineContent;

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

@@ -0,0 +1,58 @@
+import type DataTable from '../../../../Data/DataTable';
+import type { EditModeContent } from '../../CellEditing/CellEditMode';
+import type TableCell from '../../../Core/Table/Body/TableCell';
+import type TextInputRenderer from '../Renderers/TextInputRenderer';
+import CellContentPro from '../CellContentPro.js';
+/**
+ * Represents a text input type of cell content.
+ */
+declare class TextInputContent 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: TextInputRenderer, 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 value of the input element.
+     */
+    get value(): DataTable.CellType;
+    /**
+     * 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 TextInputContent;

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

@@ -0,0 +1,168 @@
+/* *
+ *
+ *  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:
+ *  - Dawid Dragula
+ *  - 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 TextInputContent extends CellContentPro {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(cell, renderer, parentElement) {
+        super(cell, renderer);
+        /**
+         * Whether to finish the edit after a change.
+         */
+        this.finishAfterChange = true;
+        this.onChange = (e) => {
+            if (this.changeHandler) {
+                this.changeHandler(e);
+                return;
+            }
+            void this.cell.setValue(e.target.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.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);
+        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 value of the input element.
+     */
+    get value() {
+        const val = this.input.value;
+        switch (this.cell.column.dataType) {
+            case 'datetime':
+            case 'number':
+                return val === '' ? null : +val;
+            case 'boolean':
+                if (val === '') {
+                    return null;
+                }
+                if (val === 'false' || +val === 0) {
+                    return false;
+                }
+                return true;
+            case 'string':
+                return val;
+        }
+    }
+    /**
+     * 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 TextInputContent;

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

@@ -0,0 +1,13 @@
+import type { EditModeContent } from '../../CellEditing/CellEditMode.js';
+import type TimeInputRenderer 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;
+    protected getInputType(): 'time';
+    get value(): number;
+    protected convertToInputValue(): string;
+}
+export default TimeInputContent;

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

@@ -0,0 +1,41 @@
+/* *
+ *
+ *  Time 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 time input type of cell content.
+ */
+class TimeInputContent extends DateInputContentBase {
+    getInputType() {
+        return 'time';
+    }
+    get value() {
+        return new Date(`1970-01-01T${this.input.value}Z`).getTime();
+    }
+    convertToInputValue() {
+        return this.cell.column.viewport.grid.time.dateFormat('%H:%M:%S', Number(this.cell.value || 0));
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default TimeInputContent;