@highcharts/grid-pro 2.0.0 → 2.1.0

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

@@ -21,138 +21,129 @@
  *
  * */
 import Globals from '../Globals.js';
+/**
+ * The registry of all Grid Svg icons with their SVG path data.
+ */
+export const icons = {
+    filter: {
+        width: 16,
+        height: 14,
+        children: [{
+                d: 'M2.2571 2.77791C1.75287 2.21437 1.50076 1.93259 1.49125 1.69312C1.48299 1.48509 1.57238 1.28515 1.73292 1.15259C1.91773 1 2.29583 1 3.05202 1H12.9473C13.7035 1 14.0816 1 14.2664 1.15259C14.427 1.28515 14.5163 1.48509 14.5081 1.69312C14.4986 1.93259 14.2465 2.21437 13.7422 2.77791L9.93808 7.02962C9.83756 7.14196 9.78731 7.19813 9.75147 7.26205C9.71969 7.31875 9.69637 7.37978 9.68225 7.44323C9.66633 7.51476 9.66633 7.59013 9.66633 7.74087V11.3056C9.66633 11.436 9.66633 11.5011 9.64531 11.5575C9.62673 11.6073 9.59651 11.6519 9.55717 11.6877C9.51265 11.7281 9.45213 11.7524 9.33108 11.8008L7.06441 12.7074C6.81938 12.8054 6.69687 12.8545 6.59852 12.834C6.51251 12.8161 6.43704 12.765 6.3885 12.6918C6.333 12.6081 6.333 12.4762 6.333 12.2122V7.74087C6.333 7.59013 6.333 7.51476 6.31708 7.44323C6.30296 7.37978 6.27964 7.31875 6.24786 7.26205C6.21203 7.19813 6.16177 7.14196 6.06126 7.02962L2.2571 2.77791Z'
+            }]
+    },
+    menu: {
+        width: 4,
+        height: 12,
+        children: [{
+                d: 'M2.00016 6.66675C2.36835 6.66675 2.66683 6.36827 2.66683 6.00008C2.66683 5.63189 2.36835 5.33341 2.00016 5.33341C1.63197 5.33341 1.3335 5.63189 1.3335 6.00008C1.3335 6.36827 1.63197 6.66675 2.00016 6.66675Z'
+            }, {
+                d: 'M2.00016 2.00008C2.36835 2.00008 2.66683 1.7016 2.66683 1.33341C2.66683 0.965225 2.36835 0.666748 2.00016 0.666748C1.63197 0.666748 1.3335 0.965225 1.3335 1.33341C1.3335 1.7016 1.63197 2.00008 2.00016 2.00008Z'
+            }, {
+                d: 'M2.00016 11.3334C2.36835 11.3334 2.66683 11.0349 2.66683 10.6667C2.66683 10.2986 2.36835 10.0001 2.00016 10.0001C1.63197 10.0001 1.3335 10.2986 1.3335 10.6667C1.3335 11.0349 1.63197 11.3334 2.00016 11.3334Z'
+            }]
+    },
+    chevronRight: {
+        width: 6,
+        height: 10,
+        children: [{
+                d: 'M1 9L5 5L1 1',
+                'stroke-width': 1.34
+            }]
+    },
+    checkmark: {
+        width: 12,
+        height: 9,
+        children: [{
+                d: 'M11.3332 1L3.99984 8.33333L0.666504 5'
+            }]
+    },
+    upDownArrows: {
+        width: 14,
+        height: 12,
+        children: [{
+                d: 'M3.66667 0.666748V11.3334M3.66667 11.3334L1 8.66675M3.66667 11.3334L6.33333 8.66675M10.3333 11.3334V0.666748M10.3333 0.666748L7.66667 3.33341M10.3333 0.666748L13 3.33341'
+            }]
+    },
+    sortAsc: {
+        width: 14,
+        height: 12,
+        children: [{
+                d: 'M3.66667 0.666748V11.3334M3.66667 11.3334L1 8.66675M3.66667 11.3334L6.33333 8.66675',
+                opacity: 0.2
+            }, {
+                d: 'M 10.3333 11.3334 V 0.6667 M 10.3333 0.6667 L 7.6667 3.3334 M 10.3333 0.6667 L 13 3.3334'
+            }]
+    },
+    sortDesc: {
+        width: 14,
+        height: 12,
+        children: [{
+                d: 'M3.66667 0.666748V11.3334M3.66667 11.3334L1 8.66675M3.66667 11.3334L6.33333 8.66675'
+            }, {
+                d: 'M 10.3333 11.3334 V 0.6667 M 10.3333 0.6667 L 7.6667 3.3334 M 10.3333 0.6667 L 13 3.3334',
+                opacity: 0.2
+            }]
+    }
+};
+/**
+ * The default path definitions for the Grid Svg icons.
+ */
+export const pathDefaults = {
+    stroke: 'currentColor',
+    'stroke-width': 1.33,
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round'
+};
 /* *
+*
+*  Functions
+*
+* */
+/**
+ * Creates an SVG icon element from the SvgIcons registry.
  *
- *  Constants
+ * @param name
+ * The name of the icon from SvgIcons registry
  *
- * */
-/**
- * Registry of all Grid Svg icons with their SVG path data.
- * Icons are designed for a 24x24 viewBox and use stroke-based rendering.
+ * @param className
+ * CSS class name for the SVG element (default: 'hcg-icon')
+ *
+ * @returns
+ * SVG element with the specified icon
  */
-var SvgIcons;
-(function (SvgIcons) {
-    /**
-     * The registry of all Grid Svg icons with their SVG path data.
-     */
-    SvgIcons.icons = {
-        filter: {
-            width: 16,
-            height: 14,
-            children: [{
-                    d: 'M2.2571 2.77791C1.75287 2.21437 1.50076 1.93259 1.49125 1.69312C1.48299 1.48509 1.57238 1.28515 1.73292 1.15259C1.91773 1 2.29583 1 3.05202 1H12.9473C13.7035 1 14.0816 1 14.2664 1.15259C14.427 1.28515 14.5163 1.48509 14.5081 1.69312C14.4986 1.93259 14.2465 2.21437 13.7422 2.77791L9.93808 7.02962C9.83756 7.14196 9.78731 7.19813 9.75147 7.26205C9.71969 7.31875 9.69637 7.37978 9.68225 7.44323C9.66633 7.51476 9.66633 7.59013 9.66633 7.74087V11.3056C9.66633 11.436 9.66633 11.5011 9.64531 11.5575C9.62673 11.6073 9.59651 11.6519 9.55717 11.6877C9.51265 11.7281 9.45213 11.7524 9.33108 11.8008L7.06441 12.7074C6.81938 12.8054 6.69687 12.8545 6.59852 12.834C6.51251 12.8161 6.43704 12.765 6.3885 12.6918C6.333 12.6081 6.333 12.4762 6.333 12.2122V7.74087C6.333 7.59013 6.333 7.51476 6.31708 7.44323C6.30296 7.37978 6.27964 7.31875 6.24786 7.26205C6.21203 7.19813 6.16177 7.14196 6.06126 7.02962L2.2571 2.77791Z'
-                }]
-        },
-        menu: {
-            width: 4,
-            height: 12,
-            children: [{
-                    d: 'M2.00016 6.66675C2.36835 6.66675 2.66683 6.36827 2.66683 6.00008C2.66683 5.63189 2.36835 5.33341 2.00016 5.33341C1.63197 5.33341 1.3335 5.63189 1.3335 6.00008C1.3335 6.36827 1.63197 6.66675 2.00016 6.66675Z'
-                }, {
-                    d: 'M2.00016 2.00008C2.36835 2.00008 2.66683 1.7016 2.66683 1.33341C2.66683 0.965225 2.36835 0.666748 2.00016 0.666748C1.63197 0.666748 1.3335 0.965225 1.3335 1.33341C1.3335 1.7016 1.63197 2.00008 2.00016 2.00008Z'
-                }, {
-                    d: 'M2.00016 11.3334C2.36835 11.3334 2.66683 11.0349 2.66683 10.6667C2.66683 10.2986 2.36835 10.0001 2.00016 10.0001C1.63197 10.0001 1.3335 10.2986 1.3335 10.6667C1.3335 11.0349 1.63197 11.3334 2.00016 11.3334Z'
-                }]
-        },
-        chevronRight: {
-            width: 6,
-            height: 10,
-            children: [{
-                    d: 'M1 9L5 5L1 1',
-                    'stroke-width': 1.34
-                }]
-        },
-        checkmark: {
-            width: 12,
-            height: 9,
-            children: [{
-                    d: 'M11.3332 1L3.99984 8.33333L0.666504 5'
-                }]
-        },
-        upDownArrows: {
-            width: 14,
-            height: 12,
-            children: [{
-                    d: 'M3.66667 0.666748V11.3334M3.66667 11.3334L1 8.66675M3.66667 11.3334L6.33333 8.66675M10.3333 11.3334V0.666748M10.3333 0.666748L7.66667 3.33341M10.3333 0.666748L13 3.33341'
-                }]
-        },
-        sortAsc: {
-            width: 14,
-            height: 12,
-            children: [{
-                    d: 'M3.66667 0.666748V11.3334M3.66667 11.3334L1 8.66675M3.66667 11.3334L6.33333 8.66675',
-                    opacity: 0.2
-                }, {
-                    d: 'M 10.3333 11.3334 V 0.6667 M 10.3333 0.6667 L 7.6667 3.3334 M 10.3333 0.6667 L 13 3.3334'
-                }]
-        },
-        sortDesc: {
-            width: 14,
-            height: 12,
-            children: [{
-                    d: 'M3.66667 0.666748V11.3334M3.66667 11.3334L1 8.66675M3.66667 11.3334L6.33333 8.66675'
-                }, {
-                    d: 'M 10.3333 11.3334 V 0.6667 M 10.3333 0.6667 L 7.6667 3.3334 M 10.3333 0.6667 L 13 3.3334',
-                    opacity: 0.2
-                }]
-        }
-    };
-    /**
-     * The default path definitions for the Grid Svg icons.
-     */
-    SvgIcons.pathDefaults = {
-        stroke: 'currentColor',
-        'stroke-width': 1.33,
-        'stroke-linecap': 'round',
-        'stroke-linejoin': 'round'
-    };
-    /* *
-    *
-    *  Functions
-    *
-    * */
-    /**
-     * Creates an SVG icon element from the SvgIcons registry.
-     *
-     * @param name
-     * The name of the icon from SvgIcons registry
-     *
-     * @param className
-     * CSS class name for the SVG element (default: 'hcg-icon')
-     *
-     * @returns
-     * SVG element with the specified icon
-     */
-    function createGridIcon(name, className = Globals.getClassName('icon')) {
-        const createElement = (type) => document.createElementNS('http://www.w3.org/2000/svg', type);
-        const { width = 16, height = 16, viewBox, fill, children } = SvgIcons.icons[name];
-        const svg = createElement('svg');
-        svg.setAttribute('width', width.toString());
-        svg.setAttribute('height', height.toString());
-        svg.setAttribute('viewBox', viewBox ?? `0 0 ${width} ${height}`);
-        svg.setAttribute('fill', fill ?? 'none');
-        for (const childDefinition of children ?? []) {
-            const path = createElement('path');
-            const attrKeys = new Set([
-                ...Object.keys(childDefinition),
-                ...Object.keys(SvgIcons.pathDefaults)
-            ]);
-            for (const attr of attrKeys) {
-                const value = childDefinition[attr] ?? SvgIcons.pathDefaults[attr];
-                if (value !== void 0) {
-                    path.setAttribute(attr, value.toString());
-                }
+export function createGridIcon(name, className = Globals.getClassName('icon')) {
+    const createElement = (type) => document.createElementNS('http://www.w3.org/2000/svg', type);
+    const { width = 16, height = 16, viewBox, fill, children } = icons[name];
+    const svg = createElement('svg');
+    svg.setAttribute('width', width.toString());
+    svg.setAttribute('height', height.toString());
+    svg.setAttribute('viewBox', viewBox ?? `0 0 ${width} ${height}`);
+    svg.setAttribute('fill', fill ?? 'none');
+    for (const childDefinition of children ?? []) {
+        const path = createElement('path');
+        const attrKeys = new Set([
+            ...Object.keys(childDefinition),
+            ...Object.keys(pathDefaults)
+        ]);
+        for (const attr of attrKeys) {
+            const value = childDefinition[attr] ?? pathDefaults[attr];
+            if (value !== void 0) {
+                path.setAttribute(attr, value.toString());
             }
-            svg.appendChild(path);
         }
-        svg.classList.add(className);
-        return svg;
+        svg.appendChild(path);
     }
-    SvgIcons.createGridIcon = createGridIcon;
-})(SvgIcons || (SvgIcons = {}));
+    svg.classList.add(className);
+    return svg;
+}
 /* *
  *
  *  Default Export
  *
  * */
-export default SvgIcons;
+export default {
+    createGridIcon,
+    icons,
+    pathDefaults
+};

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;