@highcharts/grid-pro 2.0.0

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

@@ -0,0 +1,126 @@
+import type ContextMenu from './ContextMenu';
+import type Button from './Button';
+import type Popup from './Popup';
+import SvgIcons from './SvgIcons.js';
+import Globals from '../Globals.js';
+declare class ContextMenuButton implements Button {
+    /**
+     * The wrapper `<li>` element for the button.
+     */
+    wrapper?: HTMLLIElement;
+    /**
+     * The context menu that the button belongs to.
+     */
+    contextMenu?: ContextMenu;
+    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 context menu button.
+     */
+    protected options: ContextMenuButton.Options;
+    /**
+     * The container for the icon element.
+     */
+    private iconWrapper?;
+    /**
+     * The default icon for the context menu button.
+     */
+    private icon?;
+    /**
+     * The button element.
+     */
+    private buttonEl?;
+    /**
+     * The span element for the label.
+     */
+    private spanEl?;
+    constructor(options: ContextMenuButton.Options);
+    /**
+     * Adds the button to the context menu.
+     *
+     * @param contextMenu
+     * The context menu to add the button to.
+     */
+    add(contextMenu: ContextMenu): this | undefined;
+    focus(): void;
+    setLabel(label: string): 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;
+    /**
+     * Adds event listeners to the button.
+     */
+    protected addEventListeners(): void;
+    /**
+     * Removes event listeners from the button.
+     */
+    private removeEventListeners;
+}
+declare namespace ContextMenuButton {
+    /**
+     * Options for the context menu button.
+     */
+    interface Options {
+        /**
+         * The label for the button.
+         */
+        label?: string;
+        /**
+         * The icon for the button.
+         */
+        icon?: SvgIcons.GridIconName;
+        /**
+         * A class name key applied to the `<li>` wrapper of the button.
+         */
+        classNameKey?: Globals.ClassNameKey;
+        /**
+         * The icon for the active state of the button.
+         */
+        activeIcon?: SvgIcons.GridIconName;
+        /**
+         * The icon for the highlighted state of the button.
+         */
+        highlightedIcon?: SvgIcons.GridIconName;
+        /**
+         * The tooltip string for the button.
+         */
+        tooltip?: string;
+        /**
+         * If the chevron icon should be rendered.
+         */
+        chevron?: boolean;
+        /**
+         * The click handler for the button.
+         */
+        onClick?: (event: MouseEvent, button: ContextMenuButton) => void;
+    }
+}
+export default ContextMenuButton;

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

@@ -0,0 +1,183 @@
+/* *
+ *
+ *  Grid Context Menu Button 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 SvgIcons from './SvgIcons.js';
+import Globals from '../Globals.js';
+import GridUtils from '../GridUtils.js';
+const { makeHTMLElement } = GridUtils;
+/* *
+ *
+ *  Class
+ *
+ * */
+class ContextMenuButton {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(options) {
+        /**
+         * Used to remove the event listeners when the button is destroyed.
+         */
+        this.eventListenerDestroyers = [];
+        /**
+         * Whether the button is active.
+         */
+        this.isActive = false;
+        this.options = options;
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    /**
+     * Adds the button to the context menu.
+     *
+     * @param contextMenu
+     * The context menu to add the button to.
+     */
+    add(contextMenu) {
+        const cfg = this.options;
+        this.contextMenu = contextMenu;
+        contextMenu.buttons.push(this);
+        const container = contextMenu.ensureItemsContainer();
+        if (!container) {
+            return;
+        }
+        const liEl = this.wrapper = makeHTMLElement('li', cfg.classNameKey && {
+            className: Globals.getClassName(cfg.classNameKey)
+        }, container);
+        const buttonEl = this.buttonEl = makeHTMLElement('button', {
+            className: Globals.getClassName('menuItem')
+        }, liEl);
+        const iconEl = this.iconWrapper = makeHTMLElement('span', {
+            className: Globals.getClassName('menuItemIcon')
+        }, buttonEl);
+        this.spanEl = makeHTMLElement('span', {
+            className: Globals.getClassName('menuItemLabel'),
+            innerText: cfg.label || ''
+        }, buttonEl);
+        const chevronEl = makeHTMLElement('span', {
+            className: Globals.getClassName('menuItemIcon')
+        }, buttonEl);
+        iconEl.setAttribute('aria-hidden', 'true');
+        chevronEl.setAttribute('aria-hidden', 'true');
+        buttonEl.setAttribute('type', 'button');
+        buttonEl.setAttribute('tabindex', '-1');
+        this.refreshState();
+        if (cfg.chevron) {
+            chevronEl.appendChild(SvgIcons.createGridIcon('chevronRight'));
+        }
+        if (cfg.icon) {
+            this.setIcon(cfg.icon);
+        }
+        this.addEventListeners();
+        return this;
+    }
+    focus() {
+        this.buttonEl?.focus();
+        const cm = this.contextMenu;
+        if (cm) {
+            cm.focusCursor = cm.buttons.indexOf(this);
+        }
+    }
+    setLabel(label) {
+        if (this.spanEl) {
+            this.spanEl.innerText = label;
+        }
+    }
+    /**
+     * Sets the icon for the button.
+     *
+     * @param icon
+     * The icon to set.
+     */
+    setIcon(icon) {
+        this.icon?.remove();
+        if (!icon) {
+            return;
+        }
+        this.icon = SvgIcons.createGridIcon(icon);
+        this.iconWrapper?.appendChild(this.icon);
+    }
+    setActive(active) {
+        this.isActive = active;
+        this.buttonEl?.classList.toggle('active', active);
+        const { activeIcon, icon } = this.options;
+        if (activeIcon) {
+            this.setIcon(active ? activeIcon : icon);
+        }
+    }
+    setHighlighted(highlighted) {
+        this.buttonEl?.classList.toggle('highlighted', highlighted);
+    }
+    /**
+     * Destroys the button.
+     */
+    destroy() {
+        this.removeEventListeners();
+        this.wrapper?.remove();
+        // Unregister from the context menu
+        const cm = this.contextMenu;
+        if (cm) {
+            cm.buttons.splice(cm.buttons.indexOf(this), 1);
+            delete this.contextMenu;
+        }
+    }
+    /**
+     * Initializes the state of the button.
+     */
+    refreshState() {
+        // Do nothing, to be overridden by subclasses
+    }
+    /**
+     * Handles the click event for the button.
+     *
+     * @param event
+     * The mouse event.
+     */
+    clickHandler(event) {
+        this.options.onClick?.(event, this);
+    }
+    /**
+     * Adds event listeners to the button.
+     */
+    addEventListeners() {
+        const clickListener = (event) => {
+            this.clickHandler(event);
+        };
+        this.buttonEl?.addEventListener('click', clickListener);
+        this.eventListenerDestroyers.push(() => {
+            this.buttonEl?.removeEventListener('click', clickListener);
+        });
+    }
+    /**
+     * Removes event listeners from the button.
+     */
+    removeEventListeners() {
+        for (const destroyer of this.eventListenerDestroyers) {
+            destroyer();
+        }
+        this.eventListenerDestroyers.length = 0;
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default ContextMenuButton;

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

@@ -0,0 +1,149 @@
+import type Grid from '../Grid';
+import type Button from './Button';
+/**
+ * Abstract base class for for Grid popups.
+ */
+declare abstract class Popup {
+    /**
+     * The popup container element.
+     */
+    container?: HTMLElement;
+    /**
+     * The popup content element.
+     */
+    content?: HTMLElement;
+    /**
+     * Parent element of the popup.
+     */
+    grid: Grid;
+    /**
+     * Whether the popup is currently visible.
+     */
+    isVisible: boolean;
+    /**
+     * The anchor element that the popup is positioned relative to.
+     */
+    anchorElement?: HTMLElement;
+    /**
+     * The button that opened the popup, if any.
+     */
+    protected button?: Button;
+    /**
+     * Event listener destroyers.
+     */
+    protected eventListenerDestroyers: Function[];
+    /**
+     * Options for the popup.
+     */
+    private options;
+    /**
+     * 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: Grid, button?: Button, options?: Popup.Options);
+    /**
+     * Renders the popup content.
+     *
+     * @param contentElement
+     * The content element.
+     */
+    protected abstract renderContent(contentElement: HTMLElement): void;
+    /**
+     * Shows the popup positioned relative to the anchor element.
+     *
+     * @param anchorElement
+     * The element to position the popup relative to.
+     */
+    show(anchorElement?: HTMLElement): void;
+    /**
+     * Hides the popup. In reality, it just destroys the popup container and
+     * removes the event listeners.
+     */
+    hide(): void;
+    /**
+     * 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?: HTMLElement): void;
+    /**
+     * Reflows the popup.
+     */
+    reflow(): void;
+    /**
+     * 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.
+     */
+    private position;
+    /**
+     * 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.
+     */
+    protected addHeader(label: string, category?: string): HTMLElement | undefined;
+    /**
+     * Handles key down events.
+     *
+     * @param e
+     * Keyboard event
+     */
+    protected onKeyDown(e: KeyboardEvent): void;
+    /**
+     * Handles click outside events.
+     *
+     * @param e
+     * Mouse event
+     */
+    protected onClickOutside(e: MouseEvent): void;
+    /**
+     * Adds event listeners for click outside and escape key.
+     */
+    protected addEventListeners(): void;
+    /**
+     * Removes event listeners.
+     */
+    private removeEventListeners;
+}
+declare namespace Popup {
+    interface Options {
+        /**
+         * Whether to position the popup next to the anchor element (`true`), or
+         * directly below it (`false`). Defaults to `false`.
+         */
+        nextToAnchor?: boolean;
+        /**
+         * The header of the popup.
+         */
+        header?: {
+            /**
+             * The prefix of the header label, placed before the label.
+             */
+            category?: string;
+            /**
+             * The label of the header.
+             */
+            label: string;
+        };
+    }
+}
+export default Popup;