@hypericon/mico 0.3.23 → 0.4.0

package/dist/esm/components/markdown-editor/markdown-editor.state.js

@@ -0,0 +1,255 @@
+import { Subscription } from "rxjs";
+import { mouseWithinElement } from "../../utils";
+import { redraw } from "mithril";
+export class MarkdownEditorState {
+    constructor(editValue) {
+        this.subs = new Subscription();
+        this.isEditing = false;
+        this.isEditingPrevious = false;
+        this.editorValue = "";
+        this.editorEl = undefined;
+        this.editorContainerEl = undefined;
+        this.selectionStart = 0;
+        this.selectionEnd = 0;
+        this.editValue = editValue;
+        const onclick = (ev) => {
+            if (this.isEditing && this.editorContainerEl) {
+                if (!mouseWithinElement(ev, this.editorContainerEl)) {
+                    this.isEditing = false;
+                    redraw();
+                }
+            }
+        };
+        document.addEventListener("click", onclick);
+        this.subs.add(() => document.removeEventListener("click", onclick));
+    }
+    selectedText() {
+        const selection = this.editorValue.slice(this.selectionStart, this.selectionEnd);
+        return selection;
+    }
+    findSelectedLines() {
+        // if (!this.editorEl) return [];
+        let linesStart = this.selectionStart;
+        let linesEnd = this.selectionEnd;
+        for (let i = this.selectionStart; i >= 0; i--) {
+            if (i > 1 && this.editorValue[i - 1] === "\n") {
+                linesStart = i;
+                break;
+            }
+            if (i === 0) {
+                linesStart = i;
+                break;
+            }
+        }
+        for (let i = this.selectionEnd; i < this.editorValue.length; i++) {
+            if (this.editorValue[i] === "\n" || i === 0) {
+                linesEnd = i;
+                break;
+            }
+        }
+        const selectedLinesString = this.editorValue.slice(linesStart, linesEnd);
+        // console.log("selectedLinesStr", linesStart, linesEnd, selectedLinesString);
+        let selectedLinesText = selectedLinesString.split("\n");
+        selectedLinesText = selectedLinesText.map((line, lineIndex) => {
+            return line + ((lineIndex <= (selectedLinesText.length - 2)) ? "\n" : "");
+        });
+        const lines = [];
+        let offset = linesStart;
+        for (let i = 0; i < selectedLinesText.length; i++) {
+            lines.push({
+                start: offset,
+                end: offset + selectedLinesText[i].length,
+                content: selectedLinesText[i],
+            });
+            offset = offset + selectedLinesText[i].length;
+        }
+        // console.log("lines", lines);
+        return lines;
+    }
+    findSelectedWord() {
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        for (let i = this.selectionStart; i >= 0; i--) {
+            if (i > 1 && (this.editorValue[i - 1] === " " || this.editorValue[i - 1] === "\n")) {
+                start = i;
+                break;
+            }
+            if (i === 0) {
+                start = i;
+                break;
+            }
+        }
+        for (let i = this.selectionEnd; i < this.editorValue.length; i++) {
+            if (this.editorValue[i] === "" || this.editorValue[i] === "\n" || i === 0) {
+                end = i;
+                break;
+            }
+        }
+        return {
+            start,
+            end,
+            content: this.editorValue.slice(start, end),
+        };
+    }
+    destroy() {
+        this.subs.unsubscribe();
+    }
+    setSelection(start, end) {
+        this.selectionStart = start;
+        this.selectionEnd = end;
+        const selection = this.editorValue.slice(start, end);
+        // console.log(start, end, selection);
+    }
+    applyHeading(level = 1) {
+        // console.log("addHeading", "selection:", this.selectionStart, this.selectionEnd);
+        let value = this.editorValue;
+        const toInsert = "#".padEnd(level, "#") + " ";
+        const lines = this.findSelectedLines();
+        for (let i = lines.length - 1; i >= 0; i--) {
+            value = value.slice(0, lines[i].start) + toInsert + value.slice(lines[i].start);
+        }
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = this.selectionStart + toInsert.length;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyBold() {
+        // console.log("addBold", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+        }
+        let value = this.editorValue;
+        value = value.slice(0, end) + "**" + value.slice(end);
+        value = value.slice(0, start) + "**" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 2;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyItalic() {
+        // console.log("addItalic", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+        }
+        let value = this.editorValue;
+        value = value.slice(0, end) + "*" + value.slice(end);
+        value = value.slice(0, start) + "*" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 1;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyCode() {
+        // console.log("addCode", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+        }
+        let value = this.editorValue;
+        value = value.slice(0, end) + "`" + value.slice(end);
+        value = value.slice(0, start) + "`" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 1;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyStrikethrough() {
+        // console.log("addStrikethrough", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+        }
+        let value = this.editorValue;
+        value = value.slice(0, end) + "~~" + value.slice(end);
+        value = value.slice(0, start) + "~~" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 2;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyUnorderedList() {
+        // console.log("addUnorderedList", "selection:", this.selectionStart, this.selectionEnd);
+        let value = this.editorValue;
+        const toInsert = "- ";
+        const lines = this.findSelectedLines();
+        for (let i = lines.length - 1; i >= 0; i--) {
+            value = value.slice(0, lines[i].start) + toInsert + value.slice(lines[i].start);
+        }
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = this.selectionStart + 2;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyOrderedList() {
+        // console.log("addOrderedList", "selection:", this.selectionStart, this.selectionEnd);
+        let value = this.editorValue;
+        const lines = this.findSelectedLines();
+        for (let i = lines.length - 1; i >= 0; i--) {
+            let toInsert = `${i + 1}. `;
+            value = value.slice(0, lines[i].start) + toInsert + value.slice(lines[i].start);
+        }
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = this.selectionStart + 3;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyLink() {
+        // console.log("addLink", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        let content = this.selectedText();
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+            content = word.content;
+        }
+        const isUrl = content.startsWith("http") || content.startsWith("www");
+        let url = (Boolean(content) && isUrl) ? content : "https://example.com";
+        let value = this.editorValue;
+        value = value.slice(0, end) + `](${url})` + value.slice(end);
+        value = value.slice(0, start) + "[" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 1;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyIndent(backward = false) {
+        // console.log("applyIndent", "selection:", this.selectionStart, this.selectionEnd);
+        let value = this.editorValue;
+        // const toInsert = "- ";
+        const lines = this.findSelectedLines();
+        for (let i = lines.length - 1; i >= 0; i--) {
+            if (backward) {
+                let newContent = lines[i].content;
+                if (newContent.startsWith(" "))
+                    newContent = newContent.slice(1);
+                if (newContent.startsWith(" "))
+                    newContent = newContent.slice(1);
+                value = value.slice(0, lines[i].start) + newContent + value.slice(lines[i].end);
+            }
+            else {
+                value = value.slice(0, lines[i].start) + "  " + value.slice(lines[i].start);
+            }
+        }
+        this.editorValue = value;
+        this.editValue(value);
+        let newSelection = this.selectionStart + (backward ? -2 : 2);
+        newSelection = Math.max(newSelection, lines[0].start);
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+}

package/dist/esm/components/menu/Menu.d.ts

@@ -0,0 +1,14 @@
+import m from "mithril";
+export interface MenuOptions {
+    noFlipV?: boolean;
+    noFlipH?: boolean;
+    forceFlipV?: boolean;
+    forceFlipH?: boolean;
+}
+export declare const Menu: m.Component<{
+    x: number | undefined;
+    y: number | undefined;
+    options?: MenuOptions;
+}, {
+    el?: HTMLDivElement;
+}>;

package/dist/esm/components/menu/Menu.js

@@ -0,0 +1,81 @@
+import m from "mithril";
+import { MENU_CONSTANTS } from "./menu-constants";
+import { MENU_SETTINGS } from "./menu-settings";
+export const Menu = {
+    oninit() { },
+    oncreate({ dom }) {
+        if (dom) {
+            this.el = dom;
+            this.el.focus();
+        }
+    },
+    onupdate({ dom }) {
+        // if (dom) this.el = dom as HTMLDivElement;
+    },
+    view({ attrs, children }) {
+        var _a, _b, _c, _d, _e, _f;
+        const maxWidthPx = Math.min(window.innerWidth, MENU_CONSTANTS.MAX_WIDTH_PX);
+        const maxHeightPx = window.innerHeight / 2;
+        const xPx = (_a = attrs.x) !== null && _a !== void 0 ? _a : 0;
+        const yPx = (_b = attrs.y) !== null && _b !== void 0 ? _b : 0;
+        let flipH = ((xPx + MENU_CONSTANTS.MIN_WIDTH_PX) > window.innerWidth);
+        let flipV = MENU_SETTINGS.ANCHOR === "page"
+            ? ((yPx + maxHeightPx - window.scrollY) > window.innerHeight)
+            : ((yPx + maxHeightPx) > window.innerHeight);
+        if (((_c = attrs.options) === null || _c === void 0 ? void 0 : _c.noFlipH) === true)
+            flipH = false;
+        if (((_d = attrs.options) === null || _d === void 0 ? void 0 : _d.noFlipV) === true)
+            flipV = false;
+        if (((_e = attrs.options) === null || _e === void 0 ? void 0 : _e.forceFlipH) === true)
+            flipH = true;
+        if (((_f = attrs.options) === null || _f === void 0 ? void 0 : _f.forceFlipV) === true)
+            flipV = true;
+        // console.log({
+        //   "yPx": yPx,
+        //   "maxHeightPx": maxHeightPx,
+        //   "window.scrollY": window.scrollY,
+        //   "window.innerHeight": window.innerHeight,
+        //   "flipV": flipV,
+        // });
+        // TODO: don't let the menu width actually touch the screen width; it will fall off the left hand side
+        const posH = flipH ? `right: ${window.innerWidth - xPx}px;` : `left: ${xPx}px;`;
+        const posV = flipV ? `bottom: ${window.innerHeight - yPx}px;` : `top: ${yPx}px;`;
+        return m("", {
+            key: Date.now(),
+            class: `mico-menu ${MENU_SETTINGS.MENU_CLASS}`,
+            style: `position: absolute; overflow-y: auto; overflow-x: hidden; ${posH} ${posV} z-index: 100; min-width: ${MENU_CONSTANTS.MIN_WIDTH_PX}px; max-width: ${maxWidthPx}px; max-height: ${maxHeightPx}px;`,
+            tabIndex: -1,
+            onkeydown: (ev) => {
+                var _a, _b, _c, _d, _e, _f;
+                const focussableElems = Array.from((_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll("button, input, select, textarea")) !== null && _b !== void 0 ? _b : [])
+                    .filter(el => !Boolean(el.disabled));
+                let focusIndex = -1;
+                if (focussableElems) {
+                    for (let i = 0; i < focussableElems.length; i++) {
+                        const element = focussableElems[i];
+                        if (document.activeElement === element) {
+                            focusIndex = i;
+                            break;
+                        }
+                    }
+                }
+                if (ev.key === "ArrowDown") {
+                    // console.log("move down, focussable list:", focussableElems, "this.el", this.el);
+                    focusIndex += 1;
+                    if (focusIndex >= focussableElems.length)
+                        focusIndex = 0;
+                    (_d = (_c = focussableElems[focusIndex]).focus) === null || _d === void 0 ? void 0 : _d.call(_c);
+                }
+                if (ev.key === "ArrowUp") {
+                    // console.log("move up, focussable list:", focussableElems, "this.el", this.el);
+                    focusIndex -= 1;
+                    if (focusIndex < 0)
+                        focusIndex = focussableElems.length - 1;
+                    (_f = (_e = focussableElems[focusIndex]).focus) === null || _f === void 0 ? void 0 : _f.call(_e);
+                }
+            },
+        }, [
+            children,
+        ]);
+    }
+};

package/dist/esm/components/menu/MenuButton.d.ts

@@ -0,0 +1,16 @@
+import m from "mithril";
+import { IconAttrs } from "../icon";
+export declare const MenuButton: m.Component<{
+    icon?: m.Vnode<any, any> | IconAttrs;
+    label?: string;
+    hint?: string;
+    /** If an href is supplied, `m.route.Link` is used instad of `button` */
+    href?: string;
+    disabled?: boolean;
+    onclick?: (ev: MouseEvent) => any;
+    onhover?: (ev: MouseEvent) => any;
+    onprev?: (ev: KeyboardEvent) => any;
+    onnext?: (ev: KeyboardEvent) => any;
+    class?: string;
+    style?: string;
+}>;

package/dist/esm/components/menu/MenuButton.js

@@ -0,0 +1,75 @@
+import m from "mithril";
+import { Icon } from "../icon";
+import { MENU_SETTINGS } from "./menu-settings";
+export const MenuButton = {
+    view({ attrs }) {
+        var _a, _b, _c, _d;
+        return (attrs.href !== undefined) ? [
+            m(m.route.Link, {
+                class: `mico-menu-button ${(_a = attrs.class) !== null && _a !== void 0 ? _a : ""} ${MENU_SETTINGS.MENU_BUTTON_CLASS}`,
+                style: `${(_b = attrs.style) !== null && _b !== void 0 ? _b : ""} width: 100%; height: 1.5rem; padding-right: 0.5rem; display: flex; align-items: center;`,
+                href: attrs.href,
+                disabled: attrs.disabled,
+                onclick: (ev) => {
+                    var _a;
+                    (_a = attrs.onclick) === null || _a === void 0 ? void 0 : _a.call(attrs, ev);
+                    m.redraw();
+                },
+            }, [
+                m(ButtonIcon, { icon: attrs.icon }),
+                m(ButtonLabel, { label: attrs.label }),
+                m("", { style: "flex: 1 1 0%;" }),
+                m(ButtonHint, { hint: attrs.hint }),
+            ]),
+        ] : [
+            m("button", {
+                class: `mico-menu-button ${(_c = attrs.class) !== null && _c !== void 0 ? _c : ""} ${MENU_SETTINGS.MENU_BUTTON_CLASS}`,
+                style: `${(_d = attrs.style) !== null && _d !== void 0 ? _d : ""} width: 100%; height: 1.5rem; padding-right: 0.5rem; display: flex; align-items: center;`,
+                disabled: attrs.disabled,
+                onclick: (ev) => {
+                    var _a;
+                    (_a = attrs.onclick) === null || _a === void 0 ? void 0 : _a.call(attrs, ev);
+                    m.redraw();
+                },
+            }, [
+                m(ButtonIcon, { icon: attrs.icon }),
+                m(ButtonLabel, { label: attrs.label }),
+                m("", { style: "flex: 1 1 0%;" }),
+                m(ButtonHint, { hint: attrs.hint }),
+            ]),
+        ];
+    }
+};
+const ButtonIcon = {
+    view({ attrs }) {
+        return m("", {
+            // class: attrs.disabled ? "text-disabled" : "text-icon",
+            class: `mico-menu-button-icon ${MENU_SETTINGS.MENU_BUTTON_ICON_CLASS}`,
+            style: "width: 2rem; flex: none; display: flex; align-items: center; justify-content: space-around;",
+        }, [
+            attrs.icon ? [
+                ("fas" in attrs.icon || "far" in attrs.icon || "fab" in attrs.icon)
+                    ? m(Icon, Object.assign({}, attrs.icon))
+                    : attrs.icon,
+            ] : [],
+        ]);
+    }
+};
+const ButtonLabel = {
+    view({ attrs }) {
+        return m("span", {
+            class: `mico-menu-button-label ${MENU_SETTINGS.MENU_BUTTON_LABEL_CLASS}`,
+            style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;",
+        }, attrs.label);
+    }
+};
+const ButtonHint = {
+    view({ attrs }) {
+        return attrs.hint
+            ? m("span", {
+                class: `mico-menu-button-hint ${MENU_SETTINGS.MENU_BUTTON_HINT_CLASS}`,
+                style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;",
+            }, attrs.hint)
+            : [];
+    }
+};

package/dist/esm/components/menu/MenuSeparator.d.ts

@@ -0,0 +1,2 @@
+import m from "mithril";
+export declare const MenuSeparator: m.Component<{}>;

package/dist/esm/components/menu/MenuSeparator.js

@@ -0,0 +1,11 @@
+import m from "mithril";
+import { MENU_SETTINGS } from "./menu-settings";
+export const MenuSeparator = {
+    view() {
+        // return m(".my-2.ml-8.mr-2.border-b.border-slate-300");
+        return m("", {
+            class: `mico-menu-separator ${MENU_SETTINGS.MENU_SEPARATOR_CLASS}`,
+            style: "margin: 0.25rem 0; border-bottom-width: 1px; border-bottom-style: solid;",
+        });
+    }
+};

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

@@ -0,0 +1,6 @@
+export * from "./Menu";
+export * from "./MenuButton";
+export * from "./MenuSeparator";
+export * from "./menu-constants";
+export * from "./menu-manager";
+export * from "./menu-settings";

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

@@ -0,0 +1,6 @@
+export * from "./Menu";
+export * from "./MenuButton";
+export * from "./MenuSeparator";
+export * from "./menu-constants";
+export * from "./menu-manager";
+export * from "./menu-settings";

package/dist/esm/components/menu/menu-constants.d.ts

@@ -0,0 +1,4 @@
+export declare const MENU_CONSTANTS: {
+    readonly MIN_WIDTH_PX: 200;
+    readonly MAX_WIDTH_PX: 500;
+};

package/dist/esm/components/menu/menu-constants.js

@@ -0,0 +1,4 @@
+export const MENU_CONSTANTS = {
+    MIN_WIDTH_PX: 200,
+    MAX_WIDTH_PX: 500,
+};

package/dist/esm/components/menu/menu-manager.d.ts

@@ -0,0 +1,22 @@
+import m from "mithril";
+import { MenuOptions } from "./Menu";
+export declare class MenuManager {
+    private containerEl;
+    private _menuVnode;
+    menuVnode$: import("rxjs").Observable<m.Vnode<any, any> | undefined>;
+    get menuVnode(): m.Vnode<any, any> | undefined;
+    get isOpen(): boolean;
+    constructor();
+    /**
+     * Show a new "right-click" menu at the position of the given mouse event,
+     * containing the given menu contents.
+     *
+     * This function handles stopping the mouse event propagation and aiting for any previous menus
+     * to be cleared.
+     * @param ev
+     * @param menuContents
+     */
+    show(ev: MouseEvent | undefined, menuContents: m.ChildArrayOrPrimitive, options?: MenuOptions): Promise<void>;
+    hide(): void;
+}
+export declare const menuMgr: MenuManager;

package/dist/esm/components/menu/menu-manager.js

@@ -0,0 +1,72 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import m from "mithril";
+import { BehaviorSubject } from "rxjs";
+import { Menu } from "./Menu";
+import { MENU_SETTINGS } from "./menu-settings";
+export class MenuManager {
+    get menuVnode() { return this._menuVnode.value; }
+    get isOpen() {
+        return Boolean(this.menuVnode);
+    }
+    constructor() {
+        this._menuVnode = new BehaviorSubject(undefined);
+        this.menuVnode$ = this._menuVnode.asObservable();
+        this.containerEl = document.createElement("div");
+        this.containerEl.classList.add("menu-container");
+        document.body.append(this.containerEl);
+        document.addEventListener("click", () => {
+            if (this.isOpen) {
+                this.hide();
+            }
+        });
+        document.addEventListener("keydown", (ev) => {
+            if (this.isOpen && (ev.key === "Escape")) {
+                this.hide();
+            }
+        });
+    }
+    /**
+     * Show a new "right-click" menu at the position of the given mouse event,
+     * containing the given menu contents.
+     *
+     * This function handles stopping the mouse event propagation and aiting for any previous menus
+     * to be cleared.
+     * @param ev
+     * @param menuContents
+     */
+    show(ev, menuContents, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+            if (this.isOpen) {
+                this.hide();
+            }
+            yield new Promise((resolve, reject) => {
+                setTimeout(() => resolve(), 0);
+            });
+            const menuVnode = m(Menu, {
+                x: ev === null || ev === void 0 ? void 0 : ev.clientX,
+                y: MENU_SETTINGS.ANCHOR === "page" ? ev === null || ev === void 0 ? void 0 : ev.pageY : ev === null || ev === void 0 ? void 0 : ev.clientY,
+                options,
+            }, [
+                menuContents,
+            ]);
+            this._menuVnode.next(menuVnode);
+            m.render(this.containerEl, menuVnode);
+            // console.log("Added menu");
+        });
+    }
+    hide() {
+        this._menuVnode.next(undefined);
+        m.render(this.containerEl, []);
+        // console.log("Closed menu");
+    }
+}
+export const menuMgr = new MenuManager();

package/dist/esm/components/menu/menu-settings.d.ts

@@ -0,0 +1,9 @@
+export declare const MENU_SETTINGS: {
+    ANCHOR: "page" | "screen";
+    MENU_CLASS: string;
+    MENU_BUTTON_CLASS: string;
+    MENU_BUTTON_LABEL_CLASS: string;
+    MENU_BUTTON_ICON_CLASS: string;
+    MENU_BUTTON_HINT_CLASS: string;
+    MENU_SEPARATOR_CLASS: string;
+};

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

@@ -0,0 +1,9 @@
+export const MENU_SETTINGS = {
+    ANCHOR: "page",
+    MENU_CLASS: "",
+    MENU_BUTTON_CLASS: "",
+    MENU_BUTTON_LABEL_CLASS: "",
+    MENU_BUTTON_ICON_CLASS: "",
+    MENU_BUTTON_HINT_CLASS: "",
+    MENU_SEPARATOR_CLASS: "",
+};

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

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

package/dist/esm/components/pagination/Pagination.d.ts

@@ -0,0 +1,40 @@
+import m from "mithril";
+export type PaginationLayout = "left" | "middle" | "right";
+export interface PaginationAttrs {
+    /** The start of the range currently being displayed */
+    from: number;
+    /** The end of the range currently being displayed */
+    to: number;
+    /** The total number of all records available for display */
+    of: number;
+    /** Optionally override the "x-y of z" message, or disable it entirely with `false` */
+    xToYOfZ?: string | m.Vnode<any, any> | false;
+    /** Called when clicking the "next" button. The button is not displayed if this function is undefined. */
+    next?: (ev: MouseEvent) => any;
+    /** Called when clicking the "prev" button. The button is not displayed if this function is undefined. */
+    prev?: (ev: MouseEvent) => any;
+    /** Called when clicking the "first" button. The button is not displayed if this function is undefined. */
+    first?: (ev: MouseEvent) => any;
+    /** Called when clicking the "last" button. The button is not displayed if this function is undefined. */
+    last?: (ev: MouseEvent) => any;
+    /** Indicate the user is at the start of the data */
+    isAtStart?: boolean;
+    /** Indicate the user is at the end of the data */
+    isAtEnd?: boolean;
+    /** Override how the pagination should float along the row */
+    layout?: PaginationLayout;
+    /** Enable display and selection of page sizes */
+    size?: {
+        /** The current size of the page */
+        size: number;
+        /** Function called when a new page size is selected */
+        onselect: (size: number) => any;
+        /** Override the default list of available sizes to choose from */
+        sizes?: number[];
+    };
+    /** CSS classes to apply to the row container element */
+    class?: string;
+    /** CSS styles to apply to the row container element */
+    style?: string;
+}
+export declare const Pagination: m.Component<PaginationAttrs>;