@hypericon/mico 0.3.24 → 0.4.0

package/dist/esm/components/reorderable-list/RedorderableList.js

@@ -0,0 +1,202 @@
+import m from "mithril";
+import { coordsWithinElement } from "../../utils";
+/**
+ * A reorderable list of items. Expects a list of reorderable list items in children.
+ *
+ * ! The divs containing the content of the items must be passed as a 1-D list to
+ * the reorderable list's children. E.g.:
+ *
+ * ```ts
+ * m(ReorderableList, {...}, ["one", "two"]),
+ * ```
+ *
+ * Or (note the list spread):
+ *
+ * ```ts
+ * m(ReorderableList, {...}, [
+ *  ...someList.map(item => m("", {...}, [...])),
+ * ]),
+ * ```
+ *
+ * The divs defining the content of the items are displayed in a flex row, and are encouraged
+ * to flex themselves to fill the row.
+ *
+ * Example of applying a reordering:
+ *
+ * ```ts
+ * const dragged = this.items.splice(fromIndex, 1)[0];
+ * this.items.splice(toIndex, 0, dragged);
+ * ```
+ */
+export const ReorderableList = {
+    oninit({ attrs }) {
+        this.draggingIndex = undefined;
+        this.draggedOverIndex = undefined;
+        this.draggedOverTop = undefined;
+        // this.beginDrag = (ev: MouseEvent, index: number) => {
+        //   this.draggingIndex = index;
+        // };
+        // this.dragOver = (ev: MouseEvent, index: number) => {
+        //   if (this.draggingIndex === undefined) return;
+        //   this.draggedOverIndex = index;
+        // };
+        // this.endDrag = (ev: MouseEvent) => {
+        //   const bothIndicesDefined = (this.draggingIndex !== undefined && this.draggedOverIndex !== undefined);
+        //   const indicesDifferent = (this.draggingIndex !== this.draggedOverIndex);
+        //   if (bothIndicesDefined && indicesDifferent) {
+        //     attrs.reorder?.(this.draggingIndex!, this.draggedOverIndex!);
+        //   }
+        //   this.draggingIndex = undefined;
+        //   this.draggedOverIndex = undefined;
+        // };
+    },
+    view({ attrs, children }) {
+        const childArr = children instanceof Array ? children : [children];
+        const disableReordering = attrs.disableReordering === true;
+        const beginDrag = (ev, index) => {
+            var _a;
+            if (disableReordering)
+                return;
+            this.draggingIndex = index;
+            (_a = attrs.reorderStart) === null || _a === void 0 ? void 0 : _a.call(attrs, ev);
+        };
+        const dragOver = (ev, index, isAbove) => {
+            if (disableReordering)
+                return;
+            if (this.draggingIndex === undefined)
+                return;
+            this.draggedOverIndex = index;
+            this.draggedOverTop = isAbove;
+        };
+        const endDrag = (ev) => {
+            var _a, _b;
+            if (disableReordering)
+                return;
+            const bothIndicesDefined = (this.draggingIndex !== undefined && this.draggedOverIndex !== undefined);
+            const indicesDifferent = (this.draggingIndex !== this.draggedOverIndex);
+            if (bothIndicesDefined && indicesDifferent) {
+                let from = this.draggingIndex;
+                let to = this.draggedOverIndex;
+                if (from < to && this.draggedOverTop === true) {
+                    to--;
+                }
+                else if (to < from && this.draggedOverTop === false) {
+                    to++;
+                }
+                (_a = attrs.reorder) === null || _a === void 0 ? void 0 : _a.call(attrs, from, to);
+            }
+            if (this.draggingIndex !== undefined) {
+                (_b = attrs.reorderEnd) === null || _b === void 0 ? void 0 : _b.call(attrs, ev);
+            }
+            this.draggingIndex = undefined;
+            this.draggedOverIndex = undefined;
+            this.draggedOverTop = undefined;
+        };
+        return m("", {
+            id: attrs.id,
+            class: `${attrs.class || ""} no-select`,
+            style: `${attrs.style || ""}`,
+            onmouseup: (ev) => endDrag(ev),
+            onmouseleave: (ev) => endDrag(ev),
+            ontouchmove: (ev) => {
+                var _a, _b;
+                if (disableReordering)
+                    return;
+                // This div, which contains the reorderable rows
+                const rowContainerEl = ev.currentTarget;
+                const touchX = (_a = ev.touches.item(0)) === null || _a === void 0 ? void 0 : _a.clientX;
+                const touchY = (_b = ev.touches.item(0)) === null || _b === void 0 ? void 0 : _b.clientY;
+                if (!touchX || !touchY)
+                    return;
+                let overIndex = undefined;
+                let isAbove = undefined;
+                for (let i = 0; i < rowContainerEl.children.length; i++) {
+                    const childEl = rowContainerEl.children[i];
+                    const childElBounds = childEl.getBoundingClientRect();
+                    if (coordsWithinElement(touchX, touchY, childEl)) {
+                        overIndex = i;
+                        const boundsTopToTouch = touchY - childElBounds.top;
+                        isAbove = boundsTopToTouch < (childElBounds.height - boundsTopToTouch);
+                    }
+                }
+                // console.log(`touch move, in ${rowContainerEl}, coords: ${touchX}, ${touchY}, over child index: ${overIndex}`);
+                if (overIndex !== undefined && isAbove !== undefined) {
+                    dragOver(ev, overIndex, isAbove);
+                }
+            },
+            ontouchend: (ev) => {
+                endDrag(ev);
+            },
+            ontouchcancel: (ev) => {
+                endDrag(ev);
+            },
+        }, [
+            (childArr.length === 0) ? attrs.emptyMessage || m("p", "No items to display") : [],
+            childArr.map((item, childIndex) => {
+                return m(ReorderableListItem, {
+                    itemIndex: childIndex,
+                    draggedOverIndex: this.draggedOverIndex,
+                    draggedOverTop: this.draggedOverTop,
+                    key: item.hasOwnProperty("key") ? item.key : undefined,
+                    class: attrs.itemClass,
+                    disableReordering,
+                    hideNumbers: attrs.hideNumbers,
+                    mouseOverFn: (ev) => {
+                        const targetRect = ev.currentTarget.getBoundingClientRect();
+                        const rectTopToEvent = ev.clientY - targetRect.top;
+                        const isAbove = rectTopToEvent < (targetRect.height - rectTopToEvent);
+                        // console.log(`mouse over, index ${childIndex}, target: ${ev.target}`);
+                        dragOver(ev, childIndex, isAbove);
+                    },
+                    mouseDownFn: (ev) => beginDrag(ev, childIndex),
+                    touchStartFn: (ev) => {
+                        // console.log(`touch start, index ${childIndex}, target: ${ev.target}`);
+                        ev.preventDefault();
+                        beginDrag(ev, childIndex);
+                    },
+                }, [
+                    item,
+                ]);
+            }),
+        ]);
+    }
+};
+/**
+ * An item in the reorderable list.
+ *
+ * Contains a reordering handle with the row index, then the main content of the item.
+ */
+const ReorderableListItem = {
+    view({ attrs, children }) {
+        var _a;
+        const { disableReordering, hideNumbers } = attrs;
+        const dragBorderClass = (attrs.draggedOverIndex !== attrs.itemIndex)
+            ? ""
+            : attrs.draggedOverTop
+                ? "border-t-2 border-primary"
+                : "border-b-2 border-primary";
+        return m(".flex.flex-row.items-stretch.space-x-2", {
+            key: attrs.key,
+            class: `${(_a = attrs.class) !== null && _a !== void 0 ? _a : ""} ${dragBorderClass}`,
+            style: ``,
+            onmousemove: (ev) => attrs.mouseOverFn(ev),
+        }, [
+            // Draggable index row header
+            m(".flex.items-center.space-x-2", {
+                style: `width: ${hideNumbers ? "30px" : "50px"};`,
+                class: `${disableReordering ? "text-hint" : "cursor-move"}`,
+                onmousedown: (ev) => attrs.mouseDownFn(ev),
+                ontouchstart: (ev) => attrs.touchStartFn(ev),
+            }, [
+                m(`i.fas.fa-grip-vertical`, {
+                    class: `${disableReordering ? "text-hint" : "text-grey-700 dark:text-grey-300"} ${hideNumbers ? "pl-2" : ""}`,
+                }),
+                hideNumbers
+                    ? []
+                    : m("", attrs.itemIndex + 1),
+            ]),
+            // The content in the reorderable item
+            children,
+        ]);
+    }
+};

package/dist/esm/components/reorderable-list/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/components/select/Select.d.ts

@@ -0,0 +1,44 @@
+import m from "mithril";
+type SelectOption = m.Vnode<{
+    /** The "value" of the option */
+    value: string;
+    /** Optionally disable selection of the option */
+    disabled?: boolean;
+    /** The displayed value as text, to enable the user to select the value by label with the keyboard */
+    text?: string;
+}, any>;
+/**
+ * A dropdown select box that takes Mithril Vnodes as options
+ */
+export declare const Select: m.Component<{
+    /**
+     * The list of vnodes to display as options. Attrs:
+     * - `value` (required)
+     * - `disabled` (optional)
+     * - `text` (optional)
+     */
+    options: SelectOption[];
+    /** The selected value to highlight */
+    value: string;
+    /** Function called with the option value when an option is selected */
+    oninput?: (value: string) => any;
+    onfocus?: (ev: FocusEvent) => any;
+    onblur?: (ev: FocusEvent) => any;
+    /** Space-separated CSS classes to apply to the component */
+    class?: string;
+    /** CSS styles to apply to the component */
+    style?: string;
+    placeholder?: string | m.Vnode<any, any>;
+    disabled?: boolean;
+    multiple?: boolean;
+    size?: number;
+    /** Optionally specify an ID in the parent, otherwise one is created internally */
+    id?: string;
+}, {
+    id: string;
+    /** The last position of the select within the viewport */
+    lastViewportRect: DOMRect;
+    /** The current value of the disabled attr */
+    disabled: boolean | undefined;
+}>;
+export {};

package/dist/esm/components/select/Select.js

@@ -0,0 +1,108 @@
+import m from "mithril";
+import { SelectOptionsManager } from "./select-options-manager";
+const optsPanelMgr = new SelectOptionsManager();
+/**
+ * A dropdown select box that takes Mithril Vnodes as options
+ */
+export const Select = {
+    oninit({ attrs }) {
+        this.id = attrs.id || `select-${Math.random().toString().replace(".", "")}`;
+        this.lastViewportRect = new DOMRect();
+        this.disabled = this.disabled;
+    },
+    onupdate({ dom }) {
+        var _a;
+        // Store the last known position of the component within the viewport
+        // to determine if the options should open upwards or downwards
+        const rect = dom.getBoundingClientRect();
+        rect.y += (((_a = dom.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.pageYOffset) || 0);
+        // const top = dom.getBoundingClientRect().top + (dom.ownerDocument.defaultView?.pageYOffset || 0);
+        this.lastViewportRect = rect;
+        optsPanelMgr.move(this.id, this.lastViewportRect);
+    },
+    view({ attrs }) {
+        var _a;
+        this.disabled = attrs.disabled;
+        const select = (value) => {
+            var _a;
+            if (this.disabled)
+                return;
+            (_a = attrs.oninput) === null || _a === void 0 ? void 0 : _a.call(attrs, value);
+            // this.isOpen = false;
+            // attrs.onclose?.();
+            optsPanelMgr.dismiss();
+        };
+        const open = (options, value) => {
+            if (this.disabled)
+                return;
+            optsPanelMgr.open({
+                id: this.id,
+                options: options,
+                selectRect: this.lastViewportRect,
+                selectedIndex: options.findIndex(o => o.attrs.value === (value || attrs.value)),
+                select: (value) => {
+                    select(value);
+                },
+                onDismiss: () => {
+                    var _a;
+                    (_a = document.getElementById(this.id)) === null || _a === void 0 ? void 0 : _a.focus();
+                },
+            });
+        };
+        const dismiss = () => {
+            // this.isOpen = false;
+            optsPanelMgr.dismiss();
+            // attrs.onclose?.();
+        };
+        // The main "select box" div
+        return m(".input.no-select", {
+            id: this.id,
+            tabindex: 0,
+            style: `height: 2rem; ${attrs.style || ""} padding-top: 0; padding-bottom: 0; position: relative;`,
+            class: `${attrs.class || ""} flex items-center ${attrs.disabled ? "disabled" : ""} ${attrs.disabled ? "cursor-auto" : "cursor-pointer"}`,
+            onclick: (ev) => {
+                // ev.stopPropagation();
+                if (!optsPanelMgr.isOpen(this.id))
+                    open(attrs.options, attrs.value);
+                // ? this.dismiss()
+                // : 
+            },
+            onkeydown: (ev) => {
+                if (ev.code === "Enter") {
+                    open(attrs.options, attrs.value);
+                }
+            },
+            onfocus: (ev) => { var _a; return (_a = attrs.onfocus) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
+            onblur: (ev) => {
+                var _a;
+                if (!optsPanelMgr.isOpen(this.id)) {
+                    (_a = attrs.onblur) === null || _a === void 0 ? void 0 : _a.call(attrs, ev);
+                }
+            }
+        }, [
+            // The selected option within the select box div
+            m(".flex-1.overflow-x-hidden", {}, [
+                m(".overflow-x-hidden", {
+                    key: attrs.value,
+                }, [
+                    (_a = attrs.options.find(o => o.attrs.value === attrs.value)) !== null && _a !== void 0 ? _a : ((attrs.placeholder && typeof attrs.placeholder === "string")
+                        ? m("span.hint", attrs.placeholder)
+                        : attrs.placeholder),
+                ]),
+            ]),
+            // Open/close down/up arrow in the input box
+            m(".ml-1", {
+                class: this.disabled ? "text-gray-500" : "",
+            }, [
+                // optsPanelSvc.isOpen(this.id)
+                //   ? m(".h-full.flex.items-center", { key: "up" }, m("i.fas.fa-caret-up"))
+                //   : m(".h-full.flex.items-center", { key: "down" }, m("i.fas.fa-caret-down")),
+                m(".h-full.flex.items-center", [
+                    optsPanelMgr.isOpen(this.id)
+                        ? m(`i.fas.fa-caret-up`)
+                        : m(`i.fas.fa-caret-down`),
+                ]),
+            ]),
+        ]);
+    },
+};

package/dist/esm/components/select/SelectOptionsPanel.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="node" />
+import m from "mithril";
+import { Subscription } from "rxjs";
+export declare const SelectOptionsPanel: m.Component<{}, {
+    subs: Subscription;
+    isOpen: boolean;
+    /** If the options panel should open upwards */
+    isReversed: boolean;
+    /** If the select input is narrow and near the right viewport edge, anchor the options panel on the right edge */
+    isAnchoredRight: boolean;
+    highlightedIndex: number;
+    ensureVisible: (index: number, up: boolean) => void;
+    /** A current string "searched for" when the user types characters when the panel is open */
+    textSearch: string;
+    /** A timer used to clear the text search */
+    keyIdleTimer: NodeJS.Timeout | undefined;
+    /** On pressing a letter key, update the text search and possibly select a new option */
+    handleTextSearch: (ev: KeyboardEvent) => void;
+    /** Clear the text search string and idle timer */
+    clearTextSearch: () => void;
+}>;

package/dist/esm/components/select/SelectOptionsPanel.js

@@ -0,0 +1,168 @@
+import m from "mithril";
+import { Subscription } from "rxjs";
+import { MAX_OPTION_PANEL_HEIGHT, OPTION_APPROX_HEIGHT } from "./constants";
+import { SelectOptionsManager } from "./select-options-manager";
+// const logger = getLogger("SelectOptionsPanel");
+const DEBUG = false;
+const optsPanelMgr = new SelectOptionsManager();
+const MIN_OPTIONS_PANEL_WIDTH = 200;
+const OPTIONS_PANEL_ID = "select-options-panel";
+const TEXT_IDLE_TIMEOUT = 1000;
+export const SelectOptionsPanel = {
+    oninit() {
+        this.subs = new Subscription();
+        this.isOpen = false;
+        this.isReversed = false;
+        this.isAnchoredRight = false;
+        this.highlightedIndex = 0;
+        // this.highlightIndex = (index) => {
+        //   this.highlightedIndex = index;
+        //   this.ensureVisible(index, false);
+        // };
+        this.ensureVisible = (index, up) => {
+            const panel = document.getElementById(OPTIONS_PANEL_ID);
+            const container = panel === null || panel === void 0 ? void 0 : panel.children.item(0);
+            const optionElems = container === null || container === void 0 ? void 0 : container.children;
+            const highlightedElem = optionElems === null || optionElems === void 0 ? void 0 : optionElems.item(index);
+            if (up) {
+                if (panel.getBoundingClientRect().top > highlightedElem.getBoundingClientRect().top) {
+                    highlightedElem === null || highlightedElem === void 0 ? void 0 : highlightedElem.scrollIntoView(true);
+                }
+            }
+            else {
+                if (panel.getBoundingClientRect().bottom < highlightedElem.getBoundingClientRect().bottom) {
+                    highlightedElem === null || highlightedElem === void 0 ? void 0 : highlightedElem.scrollIntoView(false);
+                }
+            }
+            // const highlightedRect = highlightedElem?.getBoundingClientRect();
+            // if (highlightedRect) {
+            //   logger.debug("ensure visible rect:", highlightedRect);
+            //   panel?.scr
+            // }
+        };
+        this.subs.add(optsPanelMgr.panel$.subscribe(panelDef => {
+            if (panelDef) {
+                // If the available space is less than the approximate size of the options panel, open upwards instead
+                this.isReversed = (window.innerHeight - panelDef.selectRect.bottom) < Math.min((panelDef.options.length * OPTION_APPROX_HEIGHT), MAX_OPTION_PANEL_HEIGHT);
+                // TODO: calculate is anchored right
+                if (!this.isOpen) {
+                    DEBUG && console.log("opening select options panel");
+                    const index = panelDef.selectedIndex;
+                    this.highlightedIndex = (index !== undefined && index !== -1) ? index : 0;
+                    this.isOpen = true;
+                    setTimeout(() => {
+                        this.ensureVisible(this.highlightedIndex, false);
+                    }, 100);
+                }
+            }
+            else {
+                this.isOpen = false;
+            }
+            m.redraw();
+        }));
+        this.textSearch = "";
+        this.handleTextSearch = (ev) => {
+            if (optsPanelMgr.panel === undefined)
+                return;
+            const key = ev.key.toLowerCase();
+            this.textSearch += key;
+            // If the idle timeout elapses, clear the current text search
+            if (this.keyIdleTimer) {
+                clearTimeout(this.keyIdleTimer);
+            }
+            this.keyIdleTimer = setTimeout(() => {
+                this.clearTextSearch();
+            }, TEXT_IDLE_TIMEOUT);
+            // Find the index of the option whose text search string starts with the current search term
+            const index = optsPanelMgr.panel.options.findIndex(o => {
+                return o.attrs.text && o.attrs.text.toLowerCase().startsWith(this.textSearch);
+            });
+            if (index >= 0 && index <= optsPanelMgr.panel.options.length - 1) {
+                const up = this.highlightedIndex > index;
+                this.highlightedIndex = index;
+                this.ensureVisible(this.highlightedIndex, up);
+            }
+        };
+        this.clearTextSearch = () => {
+            if (this.keyIdleTimer) {
+                clearTimeout(this.keyIdleTimer);
+            }
+            this.keyIdleTimer = undefined;
+            this.textSearch = "";
+        };
+    },
+    onremove() {
+        this.subs.unsubscribe();
+    },
+    onupdate() {
+        var _a;
+        (_a = document.getElementById(OPTIONS_PANEL_ID)) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    view() {
+        if (optsPanelMgr.panel === undefined || !this.isOpen)
+            return;
+        const panel = optsPanelMgr.panel;
+        const rect = panel.selectRect;
+        const width = Math.max(rect.width, MIN_OPTIONS_PANEL_WIDTH);
+        DEBUG && console.log("Drawing select options panel for select rect:", rect);
+        return m(".bg-white.text-dark.dark:bg-black.dark:text-white.shadow-lg.border.border-grey-500", {
+            id: OPTIONS_PANEL_ID,
+            tabindex: -1,
+            style: `position: fixed; left: ${rect.left}px; width: ${width}px; ${this.isReversed ? `bottom: ${document.documentElement.clientHeight - rect.top}px;` : `top: ${rect.bottom}px;`}
+          min-width: ${MIN_OPTIONS_PANEL_WIDTH}px; max-height: ${MAX_OPTION_PANEL_HEIGHT}px; overflow-y: auto; z-index: 100; outline: none;`,
+            onkeydown: (ev) => {
+                if (ev.code === "ArrowUp") {
+                    this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+                    this.clearTextSearch();
+                    this.ensureVisible(this.highlightedIndex, true);
+                    ev.preventDefault(); // Navigating items in the list scrolls the page
+                }
+                else if (ev.code === "ArrowDown") {
+                    this.highlightedIndex = Math.min(this.highlightedIndex + 1, panel.options.length - 1);
+                    this.clearTextSearch();
+                    this.ensureVisible(this.highlightedIndex, false);
+                    ev.preventDefault(); // Navigating items in the list scrolls the page
+                }
+                else if (ev.code === "Enter") {
+                    optsPanelMgr.selectIndex(this.highlightedIndex);
+                }
+                else if (ev.code === "Escape") {
+                    optsPanelMgr.dismiss();
+                    ev.stopPropagation();
+                }
+                else if (/^[a-z]$/i.test(ev.key)) { // a-z
+                    this.handleTextSearch(ev);
+                }
+            },
+            onfocusout: (ev) => {
+                optsPanelMgr.dismiss();
+            },
+        }, [
+            // The container of the option buttons, may be larger than the displayed panel
+            m("", {
+                style: ``,
+                class: `flex flex-col items-stretch`,
+            }, [
+                ...optsPanelMgr.panel.options.map((optionVnode, optionIndex) => {
+                    const value = optionVnode.attrs.value;
+                    const disabled = optionVnode.attrs.disabled === true;
+                    // An option value button
+                    return m(`button`, {
+                        key: value,
+                        disabled,
+                        class: `px-2 py-1 flex items-start ${this.highlightedIndex === optionIndex ? "bg-gray-200 dark:bg-black-light" : ""}`,
+                        onclick: (ev) => {
+                            ev.stopPropagation();
+                            if (disabled)
+                                return;
+                            // this.select(value);
+                            optsPanelMgr.selectIndex(optionIndex);
+                        },
+                        onmousedown: (ev) => ev.preventDefault(),
+                        onmouseover: (ev) => this.highlightedIndex = optionIndex,
+                    }, optionVnode);
+                }),
+            ]),
+        ]);
+    }
+};

package/dist/esm/components/select/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MAX_OPTION_PANEL_HEIGHT: 320;
+export declare const OPTION_APPROX_HEIGHT: 30;

package/dist/esm/components/select/constants.js

@@ -0,0 +1,2 @@
+export const MAX_OPTION_PANEL_HEIGHT = 320;
+export const OPTION_APPROX_HEIGHT = 30;

package/dist/esm/components/select/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Select";
+export * from "./SelectOptionsPanel";

package/dist/esm/components/select/index.js

@@ -0,0 +1,3 @@
+export * from "./Select";
+export * from "./SelectOptionsPanel";
+// export * from "./select-options-panel-manager";

package/dist/esm/components/select/select-options-manager.d.ts

@@ -0,0 +1,39 @@
+import m from "mithril";
+export type SelectOptionsPanelDef = {
+    /**  */
+    id: string;
+    /** The bounding client rect of the select input element within the viewport */
+    selectRect: DOMRect;
+    /** The list of vnodes to display as options */
+    options: m.Vnode<{
+        /** The "value" of the option */
+        value: string;
+        /** Optionally disable selection of the option */
+        disabled?: boolean;
+        /** The displayed value as text, to enable the user to select the value by label with the keyboard */
+        text?: string;
+    }, any>[];
+    /**  */
+    selectedIndex: number;
+    /** Function to notify the select input of the slected value in the options panel */
+    select: (value: string) => void;
+    /** Function called after the options panel has been dismissed */
+    onDismiss?: () => void;
+};
+/**
+ * Manager providing the link between custom select box input components
+ * and the layout-level select options panel
+ */
+export declare class SelectOptionsManager {
+    private _panel;
+    panel$: import("rxjs").Observable<SelectOptionsPanelDef | undefined>;
+    get panel(): SelectOptionsPanelDef | undefined;
+    private lastPanel;
+    constructor();
+    open(optionsPanel: SelectOptionsPanelDef): void;
+    move(id: string, selectRect: DOMRect): void;
+    isOpen(selectId: string): boolean;
+    selectIndex(index: number): void;
+    selectValue(value: any): void;
+    dismiss(): void;
+}

package/dist/esm/components/select/select-options-manager.js

@@ -0,0 +1,63 @@
+import { BehaviorSubject } from "rxjs";
+const REOPEN_TIMEOUT = 100;
+/**
+ * Manager providing the link between custom select box input components
+ * and the layout-level select options panel
+ */
+export class SelectOptionsManager {
+    get panel() { return this._panel.value; }
+    constructor() {
+        this._panel = new BehaviorSubject(undefined);
+        this.panel$ = this._panel.asObservable();
+        this.lastPanel = {
+            id: "",
+            timestamp: 0,
+        };
+    }
+    open(optionsPanel) {
+        // Don't reopen the same panel within the reopen timeout
+        if (this.lastPanel.id === optionsPanel.id) {
+            if (this.lastPanel.timestamp + REOPEN_TIMEOUT > Date.now())
+                return;
+        }
+        this._panel.next(optionsPanel);
+    }
+    move(id, selectRect) {
+        var _a;
+        if (id && this.panel && id === ((_a = this.panel) === null || _a === void 0 ? void 0 : _a.id)) {
+            const panel = this.panel;
+            if (panel.selectRect.top !== selectRect.top || panel.selectRect.left !== selectRect.left) {
+                panel.selectRect = selectRect;
+                this._panel.next(panel);
+            }
+        }
+    }
+    isOpen(selectId) {
+        var _a;
+        return ((_a = this.panel) === null || _a === void 0 ? void 0 : _a.id) === selectId;
+    }
+    selectIndex(index) {
+        if (this.panel) {
+            if (this.panel.options[index].attrs.disabled) {
+                // Noop
+            }
+            else {
+                this.panel.select(this.panel.options[index].attrs.value);
+            }
+            this.dismiss();
+        }
+    }
+    selectValue(value) {
+        if (this.panel) {
+            this.panel.select(value);
+            this.dismiss();
+        }
+    }
+    dismiss() {
+        var _a, _b, _c, _d;
+        (_b = (_a = this.panel) === null || _a === void 0 ? void 0 : _a.onDismiss) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.lastPanel.id = (_d = (_c = this.panel) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : "";
+        this.lastPanel.timestamp = Date.now();
+        this._panel.next(undefined);
+    }
+}