@hypericon/mico 0.4.2 → 0.5.1

package/dist/esm/components/pagination/Pagination.js

@@ -1,66 +1,72 @@
-import m from "mithril";
-import { PAGINATION_DEFAULT_SETTINGS as SETTINGS } from "./pagination-settings";
-import { Icon } from "../icon";
-export const Pagination = {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const pagination_settings_1 = require("./pagination-settings");
+const icon_1 = require("../icon");
+exports.Pagination = {
     view({ attrs }) {
         var _a, _b;
-        const layout = (attrs.layout || SETTINGS.layout);
-        return m(".mico-pagination", {
+        const layout = (attrs.layout || pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.layout);
+        return (0, mithril_1.default)(".mico-pagination", {
             class: `${(_a = attrs.class) !== null && _a !== void 0 ? _a : ""}`,
             style: `${(_b = attrs.style) !== null && _b !== void 0 ? _b : ""} display: flex; align-items: center;`,
         }, [
-            (layout === "middle" || layout === "right") ? m("", { style: "flex: 1;" }) : [],
+            (layout === "middle" || layout === "right") ? (0, mithril_1.default)("", { style: "flex: 1;" }) : [],
             (attrs.size) ? [
-                m("span", `Page size:`),
-                m("select.mico-pagination-select", {
+                (0, mithril_1.default)("span", `Page size:`),
+                (0, mithril_1.default)("select.mico-pagination-select", {
                     value: attrs.size.size,
                     oninput: (e) => attrs.size.onselect(Number(e.target.value)),
-                }, (attrs.size.sizes || SETTINGS.pageSizes).map(s => m("option", s))),
+                }, (attrs.size.sizes || pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.pageSizes).map(s => (0, mithril_1.default)("option", s))),
             ] : [],
             (attrs.xToYOfZ !== undefined) ? [
                 (attrs.xToYOfZ === false) ? [] :
-                    (typeof attrs.xToYOfZ === "string") ? m("span.mico-pagination-xtoyofz", attrs.xToYOfZ) :
+                    (typeof attrs.xToYOfZ === "string") ? (0, mithril_1.default)("span.mico-pagination-xtoyofz", attrs.xToYOfZ) :
                         attrs.xToYOfZ,
             ] : [
-                m("span.mico-pagination-xtoyofz", `${attrs.from}-${attrs.to} of ${attrs.of}`),
+                (0, mithril_1.default)("span.mico-pagination-xtoyofz", `${attrs.from}-${attrs.to} of ${attrs.of}`),
             ],
-            (attrs.first !== undefined) ? m("button.mico-pagination-button", {
+            (attrs.first !== undefined) ? (0, mithril_1.default)("button.mico-pagination-button", {
                 disabled: attrs.isAtStart,
                 title: "First page",
                 onclick: (ev) => { var _a; return (_a = attrs.first) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
             }, [
-                SETTINGS.iconComponents.first
-                    ? m(SETTINGS.iconComponents.first)
-                    : m(Icon, { fas: "angles-left" }),
+                pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.first
+                    ? (0, mithril_1.default)(pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.first)
+                    : (0, mithril_1.default)(icon_1.Icon, { fas: "angles-left" }),
             ]) : [],
-            (attrs.prev !== undefined) ? m("button.mico-pagination-button", {
+            (attrs.prev !== undefined) ? (0, mithril_1.default)("button.mico-pagination-button", {
                 disabled: attrs.isAtStart,
                 title: "Previous page",
                 onclick: (ev) => { var _a; return (_a = attrs.prev) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
             }, [
-                SETTINGS.iconComponents.prev
-                    ? m(SETTINGS.iconComponents.prev)
-                    : m(Icon, { fas: "angle-left" }),
+                pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.prev
+                    ? (0, mithril_1.default)(pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.prev)
+                    : (0, mithril_1.default)(icon_1.Icon, { fas: "angle-left" }),
             ]) : [],
-            (attrs.next !== undefined) ? m("button.mico-pagination-button", {
+            (attrs.next !== undefined) ? (0, mithril_1.default)("button.mico-pagination-button", {
                 disabled: attrs.isAtEnd,
                 title: "Next page",
                 onclick: (ev) => { var _a; return (_a = attrs.next) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
             }, [
-                SETTINGS.iconComponents.next
-                    ? m(SETTINGS.iconComponents.next)
-                    : m(Icon, { fas: "angle-right" }),
+                pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.next
+                    ? (0, mithril_1.default)(pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.next)
+                    : (0, mithril_1.default)(icon_1.Icon, { fas: "angle-right" }),
             ]) : [],
-            (attrs.last !== undefined) ? m("button.mico-pagination-button", {
+            (attrs.last !== undefined) ? (0, mithril_1.default)("button.mico-pagination-button", {
                 disabled: attrs.isAtEnd,
                 title: "Last page",
                 onclick: (ev) => { var _a; return (_a = attrs.last) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
             }, [
-                SETTINGS.iconComponents.last
-                    ? m(SETTINGS.iconComponents.last)
-                    : m(Icon, { fas: "angles-right" }),
+                pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.last
+                    ? (0, mithril_1.default)(pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.last)
+                    : (0, mithril_1.default)(icon_1.Icon, { fas: "angles-right" }),
             ]) : [],
-            (layout === "middle" || layout === "left") ? m("", { style: "flex: 1;" }) : [],
+            (layout === "middle" || layout === "left") ? (0, mithril_1.default)("", { style: "flex: 1;" }) : [],
         ]);
     },
 };

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

@@ -1,2 +1,18 @@
-export * from "./Pagination";
-export * from "./pagination-settings";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Pagination"), exports);
+__exportStar(require("./pagination-settings"), exports);

package/dist/esm/components/pagination/pagination-settings.js

@@ -1,7 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PAGINATION_DEFAULT_SETTINGS = void 0;
 /**
  * Default common settings for pagination components
  */
-export const PAGINATION_DEFAULT_SETTINGS = {
+exports.PAGINATION_DEFAULT_SETTINGS = {
     /** "left" | "middle" | "right" */
     layout: "right",
     pageSize: 25,

package/dist/esm/components/panel-tree/PanelTree.js

@@ -1,10 +1,16 @@
-import m from "mithril";
-import { PANEL_TREE_DEBUG, PANEL_TREE_PANEL_CLASS } from "./panel-tree-constants";
-import { PanelTreeStore } from "./panel-tree-store";
-import { PanelTreeUtils as PTUtils } from "./panel-tree-utils";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelTreeHandle = exports.PanelTreePanel = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const panel_tree_constants_1 = require("./panel-tree-constants");
+const panel_tree_store_1 = require("./panel-tree-store");
+const panel_tree_utils_1 = require("./panel-tree-utils");
 /** Data about the state of the ongoing drag operation */
-const PTStore = new PanelTreeStore();
-export const PanelTreePanel = {
+const PTStore = new panel_tree_store_1.PanelTreeStore();
+exports.PanelTreePanel = {
     oninit() {
         // this.isDragOver = false;
     },
@@ -45,7 +51,7 @@ export const PanelTreePanel = {
             ev.stopImmediatePropagation();
             ev.preventDefault();
             // PANEL_TREE_DEBUG ?? console.debug("is dragging over panel with parent " + parentType);
-            const { dragEv, touchEv } = PTUtils.dragOrTouch(ev);
+            const { dragEv, touchEv } = panel_tree_utils_1.PanelTreeUtils.dragOrTouch(ev);
             PTStore.overEl = this.el;
             const isRecursive = (_a = PTStore.draggedPanel) === null || _a === void 0 ? void 0 : _a.contains(this.el);
             const isValidTarget = parentType !== undefined && PTStore.draggedData !== data && !isRecursive;
@@ -59,19 +65,19 @@ export const PanelTreePanel = {
                 const overDiv = ev.currentTarget;
                 const targetRect = overDiv.getBoundingClientRect();
                 if (parentType === "row") {
-                    const leftToMouse = PTUtils.eventXPos(ev) - targetRect.left;
+                    const leftToMouse = panel_tree_utils_1.PanelTreeUtils.eventXPos(ev) - targetRect.left;
                     const isLeft = leftToMouse < (targetRect.width - leftToMouse);
                     this.isOverStart = isLeft;
                 }
                 else {
-                    const topToMouse = PTUtils.eventYPos(ev) - targetRect.top;
+                    const topToMouse = panel_tree_utils_1.PanelTreeUtils.eventYPos(ev) - targetRect.top;
                     const isAbove = topToMouse < (targetRect.height - topToMouse);
                     this.isOverStart = isAbove;
                 }
-                PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`dragging over valid target, ${this.isOverStart ? "over start" : "over end"}`);
+                panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`dragging over valid target, ${this.isOverStart ? "over start" : "over end"}`);
             }
             else {
-                PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`dragging over invalid target`);
+                panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`dragging over invalid target`);
             }
         };
         const onDrop = (ev) => {
@@ -84,12 +90,12 @@ export const PanelTreePanel = {
             PTStore.dropTargetPanel = this.el;
             const isRecursive = (_a = PTStore.draggedPanel) === null || _a === void 0 ? void 0 : _a.contains(this.el);
             const movedData = PTStore.draggedData;
-            PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`drag dropped, dataTransfer data: ${JSON.stringify(movedData)}`);
+            panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`drag dropped, dataTransfer data: ${JSON.stringify(movedData)}`);
             if (movedData && movedData !== data && !isRecursive) {
                 setTimeout(() => {
-                    PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`Instruct tree to insert subtree: ${JSON.stringify(movedData)}`);
+                    panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`Instruct tree to insert subtree: ${JSON.stringify(movedData)}`);
                     attrs.insert(movedData, this.isOverStart);
-                    m.redraw();
+                    mithril_1.default.redraw();
                 }, 1);
             }
             PTStore.isDragging = false;
@@ -97,11 +103,11 @@ export const PanelTreePanel = {
         const onEnd = (ev) => {
             // ev.stopImmediatePropagation();
             // this.isDragOver = false;
-            PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug("drag ended");
+            panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug("drag ended");
             // No op?
             PTStore.isDragging = false;
         };
-        return m(`.${PANEL_TREE_PANEL_CLASS}.flex-1.rounded.shadow-md`, {
+        return (0, mithril_1.default)(`.${panel_tree_constants_1.PANEL_TREE_PANEL_CLASS}.flex-1.rounded.shadow-md`, {
             // TODO
             // class: `${attrs.class ?? ""} ${mobileMode.isMob ? "p-1" : "p-2"} ${dragBorder}`,
             class: `${(_b = attrs.class) !== null && _b !== void 0 ? _b : ""} p-1 ${dragBorder}`,
@@ -135,14 +141,14 @@ export const PanelTreePanel = {
         }, children);
     },
 };
-export const PanelTreeHandle = {
+exports.PanelTreeHandle = {
     oninit() { },
     oncreate({ dom }) {
         this.el = dom;
     },
     view({ attrs }) {
         const { data } = attrs;
-        return m(".px-2.py-1.flex.items-center.cursor-move", {
+        return (0, mithril_1.default)(".px-2.py-1.flex.items-center.cursor-move", {
             // TODO
             // ...tooltipSpread("Reposition this element", { delay: 1_000 }),
             draggable: true,
@@ -155,12 +161,12 @@ export const PanelTreeHandle = {
                     // Disable scrolling if there is an ongoing drag
                     ev.stopImmediatePropagation();
                     ev.preventDefault();
-                    PTUtils.dispatchTouchEventToHoveredPanel(ev);
+                    panel_tree_utils_1.PanelTreeUtils.dispatchTouchEventToHoveredPanel(ev);
                 }
             },
             ontouchend: (ev) => {
                 // Re-dispatch the event first to set the drop target data
-                PTUtils.dispatchTouchEventToLastHoveredPanel(ev);
+                panel_tree_utils_1.PanelTreeUtils.dispatchTouchEventToLastHoveredPanel(ev);
                 // Next, handle the end of the drag and possibly call the function to remove the panel
                 PTStore.onEndDraggingHandle(ev, data, () => { var _a; return (_a = attrs.remove) === null || _a === void 0 ? void 0 : _a.call(attrs); });
             },
@@ -168,7 +174,7 @@ export const PanelTreeHandle = {
                 PTStore.isDragging = false;
             },
         }, [
-            m("i.fas.fa-grip-vertical.text-icon"),
+            (0, mithril_1.default)("i.fas.fa-grip-vertical.text-icon"),
         ]);
     },
 };

package/dist/esm/components/panel-tree/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/panel-tree/index.js

@@ -1 +1,2 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/components/panel-tree/panel-tree-constants.js

@@ -1,3 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PANEL_TREE_DEBUG = exports.PANEL_TREE_PANEL_CLASS = void 0;
 /** The CSS class applied all panel tree panels */
-export const PANEL_TREE_PANEL_CLASS = "panel-tree-panel";
-export const PANEL_TREE_DEBUG = false;
+exports.PANEL_TREE_PANEL_CLASS = "panel-tree-panel";
+exports.PANEL_TREE_DEBUG = false;

package/dist/esm/components/panel-tree/panel-tree-store.js

@@ -1,6 +1,9 @@
-import { PANEL_TREE_DEBUG } from "./panel-tree-constants";
-import { PanelTreeUtils as PTUtils } from "./panel-tree-utils";
-export class PanelTreeStore {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelTreeStore = void 0;
+const panel_tree_constants_1 = require("./panel-tree-constants");
+const panel_tree_utils_1 = require("./panel-tree-utils");
+class PanelTreeStore {
     /** Whether the current drop operation is recursive */
     get isRecursive() {
         return (this.draggedPanel !== undefined) &&
@@ -28,14 +31,14 @@ export class PanelTreeStore {
         var _a;
         ev.stopImmediatePropagation();
         // ev.preventDefault();
-        const { dragEv, touchEv } = PTUtils.dragOrTouch(ev);
-        const parentPanel = PTUtils.findParentPanel(ev.currentTarget);
+        const { dragEv, touchEv } = panel_tree_utils_1.PanelTreeUtils.dragOrTouch(ev);
+        const parentPanel = panel_tree_utils_1.PanelTreeUtils.findParentPanel(ev.currentTarget);
         // logger.debug(``)
         if (parentPanel) {
             this.isDragging = true;
             this.draggedData = data;
             this.draggedPanel = parentPanel;
-            PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`Begin dragging, handle data: ${JSON.stringify(data)}`);
+            panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`Begin dragging, handle data: ${JSON.stringify(data)}`);
             const parentRect = parentPanel.getBoundingClientRect();
             if (dragEv) {
                 (_a = dragEv.dataTransfer) === null || _a === void 0 ? void 0 : _a.setDragImage(parentPanel, dragEv.clientX - parentRect.left, dragEv.clientY - parentRect.top);
@@ -45,15 +48,16 @@ export class PanelTreeStore {
     /** The user has stopped dragging a handle of a panel */
     onEndDraggingHandle(ev, data, remove) {
         ev.stopImmediatePropagation();
-        const { dragEv, touchEv } = PTUtils.dragOrTouch(ev);
+        const { dragEv, touchEv } = panel_tree_utils_1.PanelTreeUtils.dragOrTouch(ev);
         const isRecursive = this.isRecursive; // STORE.dropTargetPanel && STORE.draggedPanel?.contains(STORE.dropTargetPanel);
-        PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`End dragging, dropEffect: ${this.dropEffect}, handle data: ${JSON.stringify(data)}`);
+        panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`End dragging, dropEffect: ${this.dropEffect}, handle data: ${JSON.stringify(data)}`);
         if (this.dropEffect === "move") {
             if (this.dropTargetData !== data && !isRecursive) {
-                PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`Instruct tree to remove subtree: ${JSON.stringify(data)}`);
+                panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`Instruct tree to remove subtree: ${JSON.stringify(data)}`);
                 remove === null || remove === void 0 ? void 0 : remove();
             }
         }
         this.isDragging = false;
     }
 }
+exports.PanelTreeStore = PanelTreeStore;

package/dist/esm/components/panel-tree/panel-tree-utils.js

@@ -1,14 +1,17 @@
-import { PANEL_TREE_PANEL_CLASS } from "./panel-tree-constants";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelTreeUtils = void 0;
+const panel_tree_constants_1 = require("./panel-tree-constants");
 /**
  * Stateless utility functions used by the PanelTree component
  */
-export class PanelTreeUtils {
+class PanelTreeUtils {
     /** Find the first parent element of the given element that contains the CSS class for panel tree panels */
     static findParentPanel(handleEl) {
         const parent = handleEl.parentElement;
         if (!parent)
             return;
-        if (parent.classList.contains(PANEL_TREE_PANEL_CLASS))
+        if (parent.classList.contains(panel_tree_constants_1.PANEL_TREE_PANEL_CLASS))
             return parent;
         return this.findParentPanel(parent);
     }
@@ -53,3 +56,4 @@ export class PanelTreeUtils {
         }
     }
 }
+exports.PanelTreeUtils = PanelTreeUtils;

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

@@ -0,0 +1 @@
+export {};

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

@@ -1 +1,2 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,5 +1,11 @@
-import m from "mithril";
-import { coordsWithinElement } from "../../utils";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReorderableList = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const utils_1 = require("../../utils");
 /**
  * A reorderable list of items. Expects a list of reorderable list items in children.
  *
@@ -28,7 +34,7 @@ import { coordsWithinElement } from "../../utils";
  * this.items.splice(toIndex, 0, dragged);
  * ```
  */
-export const ReorderableList = {
+exports.ReorderableList = {
     oninit({ attrs }) {
         this.draggingIndex = undefined;
         this.draggedOverIndex = undefined;
@@ -92,7 +98,7 @@ export const ReorderableList = {
             this.draggedOverIndex = undefined;
             this.draggedOverTop = undefined;
         };
-        return m("", {
+        return (0, mithril_1.default)("", {
             id: attrs.id,
             class: `${attrs.class || ""} no-select`,
             style: `${attrs.style || ""}`,
@@ -113,7 +119,7 @@ export const ReorderableList = {
                 for (let i = 0; i < rowContainerEl.children.length; i++) {
                     const childEl = rowContainerEl.children[i];
                     const childElBounds = childEl.getBoundingClientRect();
-                    if (coordsWithinElement(touchX, touchY, childEl)) {
+                    if ((0, utils_1.coordsWithinElement)(touchX, touchY, childEl)) {
                         overIndex = i;
                         const boundsTopToTouch = touchY - childElBounds.top;
                         isAbove = boundsTopToTouch < (childElBounds.height - boundsTopToTouch);
@@ -131,9 +137,9 @@ export const ReorderableList = {
                 endDrag(ev);
             },
         }, [
-            (childArr.length === 0) ? attrs.emptyMessage || m("p", "No items to display") : [],
+            (childArr.length === 0) ? attrs.emptyMessage || (0, mithril_1.default)("p", "No items to display") : [],
             childArr.map((item, childIndex) => {
-                return m(ReorderableListItem, {
+                return (0, mithril_1.default)(ReorderableListItem, {
                     itemIndex: childIndex,
                     draggedOverIndex: this.draggedOverIndex,
                     draggedOverTop: this.draggedOverTop,
@@ -175,25 +181,25 @@ const ReorderableListItem = {
             : attrs.draggedOverTop
                 ? "border-t-2 border-primary"
                 : "border-b-2 border-primary";
-        return m(".flex.flex-row.items-stretch.space-x-2", {
+        return (0, mithril_1.default)(".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", {
+            (0, mithril_1.default)(".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`, {
+                (0, mithril_1.default)(`i.fas.fa-grip-vertical`, {
                     class: `${disableReordering ? "text-hint" : "text-grey-700 dark:text-grey-300"} ${hideNumbers ? "pl-2" : ""}`,
                 }),
                 hideNumbers
                     ? []
-                    : m("", attrs.itemIndex + 1),
+                    : (0, mithril_1.default)("", attrs.itemIndex + 1),
             ]),
             // The content in the reorderable item
             children,

package/dist/esm/components/reorderable-list/index.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1 +1,2 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,10 +1,16 @@
-import m from "mithril";
-import { SelectOptionsManager } from "./select-options-manager";
-const optsPanelMgr = new SelectOptionsManager();
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const select_options_manager_1 = require("./select-options-manager");
+const optsPanelMgr = new select_options_manager_1.SelectOptionsManager();
 /**
  * A dropdown select box that takes Mithril Vnodes as options
  */
-export const Select = {
+exports.Select = {
     oninit({ attrs }) {
         this.id = attrs.id || `select-${Math.random().toString().replace(".", "")}`;
         this.lastViewportRect = new DOMRect();
@@ -55,7 +61,7 @@ export const Select = {
             // attrs.onclose?.();
         };
         // The main "select box" div
-        return m(".input.no-select", {
+        return (0, mithril_1.default)(".input.no-select", {
             id: this.id,
             tabindex: 0,
             style: `height: 2rem; ${attrs.style || ""} padding-top: 0; padding-bottom: 0; position: relative;`,
@@ -81,26 +87,26 @@ export const Select = {
             }
         }, [
             // The selected option within the select box div
-            m(".flex-1.overflow-x-hidden", {}, [
-                m(".overflow-x-hidden", {
+            (0, mithril_1.default)(".flex-1.overflow-x-hidden", {}, [
+                (0, mithril_1.default)(".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)
+                        ? (0, mithril_1.default)("span.hint", attrs.placeholder)
                         : attrs.placeholder),
                 ]),
             ]),
             // Open/close down/up arrow in the input box
-            m(".ml-1", {
+            (0, mithril_1.default)(".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", [
+                (0, mithril_1.default)(".h-full.flex.items-center", [
                     optsPanelMgr.isOpen(this.id)
-                        ? m(`i.fas.fa-caret-up`)
-                        : m(`i.fas.fa-caret-down`),
+                        ? (0, mithril_1.default)(`i.fas.fa-caret-up`)
+                        : (0, mithril_1.default)(`i.fas.fa-caret-down`),
                 ]),
             ]),
         ]);

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

@@ -1,16 +1,22 @@
-import m from "mithril";
-import { Subscription } from "rxjs";
-import { MAX_OPTION_PANEL_HEIGHT, OPTION_APPROX_HEIGHT } from "./constants";
-import { SelectOptionsManager } from "./select-options-manager";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectOptionsPanel = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const rxjs_1 = require("rxjs");
+const constants_1 = require("./constants");
+const select_options_manager_1 = require("./select-options-manager");
 // const logger = getLogger("SelectOptionsPanel");
 const DEBUG = false;
-const optsPanelMgr = new SelectOptionsManager();
+const optsPanelMgr = new select_options_manager_1.SelectOptionsManager();
 const MIN_OPTIONS_PANEL_WIDTH = 200;
 const OPTIONS_PANEL_ID = "select-options-panel";
 const TEXT_IDLE_TIMEOUT = 1000;
-export const SelectOptionsPanel = {
+exports.SelectOptionsPanel = {
     oninit() {
-        this.subs = new Subscription();
+        this.subs = new rxjs_1.Subscription();
         this.isOpen = false;
         this.isReversed = false;
         this.isAnchoredRight = false;
@@ -43,7 +49,7 @@ export const SelectOptionsPanel = {
         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);
+                this.isReversed = (window.innerHeight - panelDef.selectRect.bottom) < Math.min((panelDef.options.length * constants_1.OPTION_APPROX_HEIGHT), constants_1.MAX_OPTION_PANEL_HEIGHT);
                 // TODO: calculate is anchored right
                 if (!this.isOpen) {
                     DEBUG && console.log("opening select options panel");
@@ -58,7 +64,7 @@ export const SelectOptionsPanel = {
             else {
                 this.isOpen = false;
             }
-            m.redraw();
+            mithril_1.default.redraw();
         }));
         this.textSearch = "";
         this.handleTextSearch = (ev) => {
@@ -105,11 +111,11 @@ export const SelectOptionsPanel = {
         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", {
+        return (0, mithril_1.default)(".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;`,
+          min-width: ${MIN_OPTIONS_PANEL_WIDTH}px; max-height: ${constants_1.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);
@@ -139,7 +145,7 @@ export const SelectOptionsPanel = {
             },
         }, [
             // The container of the option buttons, may be larger than the displayed panel
-            m("", {
+            (0, mithril_1.default)("", {
                 style: ``,
                 class: `flex flex-col items-stretch`,
             }, [
@@ -147,7 +153,7 @@ export const SelectOptionsPanel = {
                     const value = optionVnode.attrs.value;
                     const disabled = optionVnode.attrs.disabled === true;
                     // An option value button
-                    return m(`button`, {
+                    return (0, mithril_1.default)(`button`, {
                         key: value,
                         disabled,
                         class: `px-2 py-1 flex items-start ${this.highlightedIndex === optionIndex ? "bg-gray-200 dark:bg-black-light" : ""}`,

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

@@ -1,2 +1,5 @@
-export const MAX_OPTION_PANEL_HEIGHT = 320;
-export const OPTION_APPROX_HEIGHT = 30;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OPTION_APPROX_HEIGHT = exports.MAX_OPTION_PANEL_HEIGHT = void 0;
+exports.MAX_OPTION_PANEL_HEIGHT = 320;
+exports.OPTION_APPROX_HEIGHT = 30;

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

@@ -1,3 +1,19 @@
-export * from "./Select";
-export * from "./SelectOptionsPanel";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Select"), exports);
+__exportStar(require("./SelectOptionsPanel"), exports);
 // export * from "./select-options-panel-manager";