@highcharts/grid-pro 2.0.0

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

@@ -0,0 +1,271 @@
+/* *
+ *
+ *  Grid Popup abstract 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 GridUtils from '../GridUtils.js';
+import Globals from '../Globals.js';
+import U from '../../../Core/Utilities.js';
+const { makeHTMLElement } = GridUtils;
+const { fireEvent } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Abstract base class for for Grid popups.
+ */
+class Popup {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    /**
+     * Constructs a popup for the given grid.
+     *
+     * @param grid
+     * The grid that will own this popup.
+     *
+     * @param button
+     * The button that opened the popup, if any.
+     *
+     * @param options
+     * Popup options.
+     */
+    constructor(grid, button, options) {
+        /**
+         * Whether the popup is currently visible.
+         */
+        this.isVisible = false;
+        /**
+         * Event listener destroyers.
+         */
+        this.eventListenerDestroyers = [];
+        this.grid = grid;
+        this.button = button;
+        this.options = options || {};
+    }
+    /**
+     * Shows the popup positioned relative to the anchor element.
+     *
+     * @param anchorElement
+     * The element to position the popup relative to.
+     */
+    show(anchorElement) {
+        if (this.container) {
+            return;
+        }
+        this.button?.setHighlighted(true);
+        this.container = makeHTMLElement('div', {
+            className: Globals.getClassName('popup')
+        });
+        this.content = makeHTMLElement('div', {
+            className: Globals.getClassName('popupContent')
+        });
+        const { header } = this.options;
+        if (header) {
+            this.addHeader(header.label, header.category);
+        }
+        this.renderContent(this.content);
+        this.container.appendChild(this.content);
+        this.anchorElement = anchorElement;
+        this.isVisible = true;
+        this.grid.contentWrapper?.appendChild(this.container);
+        this.position(anchorElement);
+        this.addEventListeners();
+        this.grid.popups.add(this);
+        fireEvent(this, 'afterShow');
+    }
+    /**
+     * Hides the popup. In reality, it just destroys the popup container and
+     * removes the event listeners.
+     */
+    hide() {
+        if (!this.container) {
+            return;
+        }
+        this.grid.popups.delete(this);
+        this.isVisible = false;
+        // Remove event listeners
+        this.removeEventListeners();
+        this.container.remove();
+        delete this.container;
+        delete this.content;
+        this.button?.setHighlighted(false);
+        fireEvent(this, 'afterHide');
+    }
+    /**
+     * Toggles the popup visibility.
+     *
+     * @param anchorElement
+     * The element to position the popup relative to. If not provided, the popup
+     * will be positioned relative to the parent element.
+     */
+    toggle(anchorElement) {
+        if (this.isVisible) {
+            this.hide();
+        }
+        else {
+            this.show(anchorElement);
+        }
+    }
+    /**
+     * Reflows the popup.
+     */
+    reflow() {
+        if (this.anchorElement?.isConnected) {
+            this.position(this.anchorElement);
+        }
+        else {
+            this.hide();
+        }
+    }
+    /**
+     * Positions the popup relative to the anchor element.
+     *
+     * @param anchorElement
+     * The element to position relative to. If not provided, the popup will be
+     * positioned relative to the parent element.
+     */
+    position(anchorElement) {
+        const wrapper = this.grid.contentWrapper;
+        if (!this.container || !this.content || !wrapper) {
+            return;
+        }
+        const next = this.options.nextToAnchor || false;
+        const popupRect = this.container.getBoundingClientRect();
+        const parentRect = wrapper.getBoundingClientRect();
+        const anchorRect = anchorElement?.getBoundingClientRect() ?? parentRect;
+        const top = next ? anchorRect.top : anchorRect.bottom + 4;
+        let left = next ? anchorRect.right + 3 : anchorRect.left;
+        // If popup's right side is after the parent's right side, shift popup
+        // to the left of the anchor element.
+        if (left + popupRect.width > parentRect.width) {
+            left = -popupRect.width + (next ? anchorRect.left + 4 : anchorRect.right);
+        }
+        // If popup's left side is before the parent's left side,
+        // shift popup so it's aligned to parent's left.
+        if (left < parentRect.left) {
+            left = parentRect.left;
+        }
+        // Apply positioning
+        this.container.style.top = `${top - parentRect.top}px`;
+        this.container.style.left = `${left - parentRect.left}px`;
+        // If the content is too tall, constrain the container to the bottom
+        // of the parent to enable content Y-scrolling.
+        const contentRect = this.content.getBoundingClientRect();
+        if (contentRect.height + contentRect.top - parentRect.top >
+            parentRect.height) {
+            this.container.style.top = 'auto';
+            this.container.style.bottom = '0';
+        }
+        else {
+            this.container.style.top = `${top - parentRect.top}px`;
+            this.container.style.bottom = 'auto';
+        }
+    }
+    /**
+     * Adds a header to the context menu.
+     *
+     * @param label
+     * The label shown in the header of the context menu.
+     *
+     * @param category
+     * The category shown in the header of the context menu, before the label.
+     *
+     * @returns
+     * The header element.
+     */
+    addHeader(label, category) {
+        if (!this.content) {
+            return;
+        }
+        const container = makeHTMLElement('div', {
+            className: Globals.getClassName('menuHeader')
+        }, this.content);
+        if (category) {
+            makeHTMLElement('span', {
+                className: Globals.getClassName('menuHeaderCategory'),
+                innerText: category + ' '
+            }, container);
+        }
+        makeHTMLElement('span', {
+            className: Globals.getClassName('menuHeaderName'),
+            innerText: label
+        }, container);
+        return container;
+    }
+    /**
+     * Handles key down events.
+     *
+     * @param e
+     * Keyboard event
+     */
+    onKeyDown(e) {
+        if (e.key === 'Escape' || (e.key === 'Tab' && e.shiftKey)) {
+            e.preventDefault();
+            this.hide();
+            this.button?.focus();
+        }
+    }
+    /**
+     * Handles click outside events.
+     *
+     * @param e
+     * Mouse event
+     */
+    onClickOutside(e) {
+        if (!this.container?.contains(e.target) &&
+            !this.anchorElement?.contains(e.target)) {
+            this.hide();
+        }
+    }
+    /**
+     * Adds event listeners for click outside and escape key.
+     */
+    addEventListeners() {
+        const container = this.container;
+        if (!container) {
+            return;
+        }
+        const clickOutsideListener = (event) => {
+            this.onClickOutside(event);
+        };
+        const keyDownListener = (event) => {
+            this.onKeyDown(event);
+        };
+        document.addEventListener('mousedown', clickOutsideListener);
+        container.addEventListener('keydown', keyDownListener);
+        this.eventListenerDestroyers.push(() => {
+            document.removeEventListener('mousedown', clickOutsideListener);
+            container.removeEventListener('keydown', keyDownListener);
+        });
+    }
+    /**
+     * Removes event listeners.
+     */
+    removeEventListeners() {
+        for (const destroyer of this.eventListenerDestroyers) {
+            destroyer();
+        }
+        this.eventListenerDestroyers.length = 0;
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default Popup;

package/es-modules/Grid/Core/UI/SvgIcons.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Registry of all Grid Svg icons with their SVG path data.
+ * Icons are designed for a 24x24 viewBox and use stroke-based rendering.
+ */
+declare namespace SvgIcons {
+    /**
+     * The name of the icon from SvgIcons registry
+     */
+    type GridIconName = ('filter' | 'menu' | 'chevronRight' | 'checkmark' | 'upDownArrows' | 'sortAsc' | 'sortDesc');
+    /**
+     * The registry of all Grid Svg icons with their SVG path data.
+     */
+    const icons: Record<GridIconName, SVGDefinition>;
+    /**
+     * The default path definitions for the Grid Svg icons.
+     */
+    const pathDefaults: Partial<PathDefinition>;
+    /**
+     * The definition of a path for a Grid Svg icon.
+     */
+    interface PathDefinition {
+        d: string;
+        stroke?: string;
+        'stroke-width'?: number;
+        'stroke-linecap'?: string;
+        'stroke-linejoin'?: string;
+        opacity?: number;
+    }
+    /**
+     * The definition of an SVG for a Grid Svg icon.
+     */
+    interface SVGDefinition {
+        width?: number;
+        height?: number;
+        viewBox?: string;
+        fill?: string;
+        children?: PathDefinition[];
+    }
+    /**
+     * 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: GridIconName, className?: string): SVGElement;
+}
+export default SvgIcons;

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

@@ -0,0 +1,158 @@
+/* *
+ *
+ *  Grid Svg Icons Registry
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Mikkel Espolin Birkeland
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+/* eslint-disable max-len */
+/* *
+ *
+ *  Imports
+ *
+ * */
+import Globals from '../Globals.js';
+/* *
+ *
+ *  Constants
+ *
+ * */
+/**
+ * Registry of all Grid Svg icons with their SVG path data.
+ * Icons are designed for a 24x24 viewBox and use stroke-based rendering.
+ */
+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());
+                }
+            }
+            svg.appendChild(path);
+        }
+        svg.classList.add(className);
+        return svg;
+    }
+    SvgIcons.createGridIcon = createGridIcon;
+})(SvgIcons || (SvgIcons = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default SvgIcons;

package/es-modules/Grid/Core/UI/Toolbar.d.ts

@@ -0,0 +1,16 @@
+import type ToolbarButton from './ToolbarButton.js';
+interface Toolbar {
+    /**
+     * The buttons of the toolbar.
+     */
+    buttons: ToolbarButton[];
+    /**
+     * The container element of the toolbar.
+     */
+    container?: HTMLDivElement;
+    /**
+     * The index of the focused button in the toolbar.
+     */
+    focusCursor: number;
+}
+export default Toolbar;

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

@@ -0,0 +1,16 @@
+/* *
+ *
+ *  Grid Toolbar interface
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+export {};

package/es-modules/Grid/Core/UI/ToolbarButton.d.ts

@@ -0,0 +1,135 @@
+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';
+declare class ToolbarButton implements Button {
+    /**
+     * The wrapper element for the button.
+     */
+    wrapper?: HTMLSpanElement;
+    /**
+     * The toolbar that the button belongs to.
+     */
+    toolbar?: Toolbar;
+    popup?: Popup;
+    /**
+     * Used to remove the event listeners when the button is destroyed.
+     */
+    protected eventListenerDestroyers: Function[];
+    /**
+     * Whether the button is active.
+     */
+    protected isActive: boolean;
+    /**
+     * The options for the toolbar button.
+     */
+    private options;
+    /**
+     * The default icon for the toolbar button.
+     */
+    private icon?;
+    /**
+     * The button element.
+     */
+    private buttonEl?;
+    /**
+     * The active indicator for the button.
+     */
+    private activeIndicator?;
+    constructor(options: ToolbarButton.Options);
+    /**
+     * Adds the button to the toolbar.
+     *
+     * @param toolbar
+     * The toolbar to add the button to.
+     */
+    add(toolbar: Toolbar): this;
+    setA11yAttributes(button: HTMLButtonElement): void;
+    focus(): void;
+    /**
+     * Sets the icon for the button.
+     *
+     * @param icon
+     * The icon to set.
+     */
+    setIcon(icon: SvgIcons.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.
+     *
+     * @param event
+     * The mouse event.
+     */
+    protected clickHandler(event: MouseEvent): void;
+    /**
+     * Renders the active indicator for the button.
+     *
+     * @param render
+     * Whether the active indicator should be rendered.
+     */
+    protected renderActiveIndicator(render: boolean): void;
+    /**
+     * Adds event listeners to the button.
+     */
+    protected addEventListeners(): void;
+    /**
+     * Removes event listeners from the 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;
+    }
+}
+export default ToolbarButton;