cx 26.0.1 → 26.0.3

package/build/widgets/overlay/Dropdown.js

@@ -0,0 +1,522 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Localization } from "../../ui/Localization";
+import { ResizeManager } from "../../ui/ResizeManager";
+import { Widget } from "../../ui/Widget";
+import { calculateNaturalElementHeight } from "../../util/calculateNaturalElementHeight";
+import { closestParent, findFirst, isFocusable } from "../../util/DOM";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { isTouchDevice } from "../../util/isTouchDevice";
+import { OverlayBase, OverlayInstance } from "./Overlay";
+export class DropdownInstance extends OverlayInstance {
+    mousePosition;
+    parentPositionChangeEvent;
+    initialScreenPosition;
+    relatedElement;
+    needsBeacon;
+}
+export class DropdownBase extends OverlayBase {
+    init() {
+        if (this.trackMouse) {
+            this.trackMouseX = true;
+            this.trackMouseY = true;
+        }
+        if (this.autoFocus && !this.hasOwnProperty("focusable"))
+            this.focusable = true;
+        super.init();
+    }
+    declareData(...args) {
+        return super.declareData(...args, {
+            placement: undefined,
+        });
+    }
+    initInstance(context, instance) {
+        instance.mousePosition = this.mousePosition;
+        instance.parentPositionChangeEvent = context.parentPositionChangeEvent;
+        super.initInstance(context, instance);
+    }
+    explore(context, instance) {
+        context.push("lastDropdown", instance);
+        super.explore(context, instance);
+    }
+    exploreCleanup(context, instance) {
+        context.pop("lastDropdown");
+        super.exploreCleanup(context, instance);
+    }
+    overlayDidMount(instance, component) {
+        super.overlayDidMount(instance, component);
+        var scrollableParents = (component.scrollableParents = [window]);
+        component.updateDropdownPosition = (e) => this.updateDropdownPosition(instance, component);
+        instance.initialScreenPosition = null;
+        var el = instance.relatedElement?.parentElement;
+        while (el) {
+            scrollableParents.push(el);
+            el = el.parentElement;
+        }
+        scrollableParents.forEach((el) => {
+            el.addEventListener("scroll", component.updateDropdownPosition);
+        });
+        component.offResize = ResizeManager.subscribe(component.updateDropdownPosition);
+        if (this.onDropdownDidMount)
+            instance.invoke("onDropdownDidMount", instance, component);
+        if (this.pipeValidateDropdownPosition)
+            instance.invoke("pipeValidateDropdownPosition", component.updateDropdownPosition, instance);
+        if (instance.parentPositionChangeEvent)
+            component.offParentPositionChange = instance.parentPositionChangeEvent.subscribe(component.updateDropdownPosition);
+    }
+    overlayDidUpdate(instance, component) {
+        this.updateDropdownPosition(instance, component);
+    }
+    overlayWillUnmount(instance, component) {
+        var { scrollableParents } = component;
+        if (scrollableParents) {
+            scrollableParents.forEach((el) => {
+                el.removeEventListener("scroll", component.updateDropdownPosition);
+            });
+            delete component.scrollableParents;
+            delete component.updateDropdownPosition;
+        }
+        if (component.offResize)
+            component.offResize();
+        if (this.pipeValidateDropdownPosition)
+            instance.invoke("pipeValidateDropdownPosition", null, instance);
+        if (component.offParentPositionChange)
+            component.offParentPositionChange();
+        delete component.parentBounds;
+        delete component.initialScreenPosition;
+    }
+    dismissAfterScroll(data, instance, component) {
+        if (this.onDismissAfterScroll && instance.invoke("onDismissAfterScroll", data, instance, component) === false)
+            return;
+        if (instance.dismiss)
+            instance.dismiss();
+    }
+    updateDropdownPosition(instance, component) {
+        var { el, initialScreenPosition } = component;
+        var { data, relatedElement } = instance;
+        var parentBounds = getTopLevelBoundingClientRect(relatedElement);
+        //getBoundingClientRect() will return an empty rect if the element is hidden or removed
+        if (parentBounds.left == 0 && parentBounds.top == 0 && parentBounds.bottom == 0 && parentBounds.right == 0) {
+            if (!component.parentBounds)
+                return;
+            parentBounds = component.parentBounds;
+        }
+        else
+            component.parentBounds = parentBounds;
+        if (this.trackMouseX && instance.mousePosition) {
+            parentBounds = new DOMRect(instance.mousePosition.x, parentBounds.top, 0, parentBounds.bottom - parentBounds.top);
+        }
+        if (this.trackMouseY && instance.mousePosition) {
+            parentBounds = new DOMRect(parentBounds.left, instance.mousePosition.y, parentBounds.right - parentBounds.left, 0);
+        }
+        let explode = this.pad && typeof this.elementExplode === "number" ? this.elementExplode : 0;
+        if (explode) {
+            parentBounds = new DOMRect(Math.round(parentBounds.left - explode), Math.round(parentBounds.top - explode), Math.round(parentBounds.right - parentBounds.left + 2 * explode), Math.round(parentBounds.bottom - parentBounds.top + 2 * explode));
+        }
+        var style = {};
+        if (this.matchWidth)
+            style.minWidth = `${parentBounds.right - parentBounds.left}px`;
+        if (this.matchMaxWidth)
+            style.maxWidth = `${parentBounds.right - parentBounds.left}px`;
+        var contentSize = this.measureNaturalDropdownSize(instance, component);
+        var placement = this.findOptimalPlacement(contentSize, parentBounds, data.placement, component.lastPlacement);
+        this.applyPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, false);
+        component.setCustomStyle(style);
+        this.setDirectionClass(component, placement);
+        if (this.constrain) {
+            //recheck content size for changes as sometimes when auto is used the size can change
+            let newContentSize = this.measureNaturalDropdownSize(instance, component);
+            if (newContentSize.width != contentSize.width || newContentSize.height != contentSize.height) {
+                let newStyle = {};
+                this.applyPositioningPlacementStyles(newStyle, placement, newContentSize, parentBounds, el, true);
+                component.setCustomStyle(newStyle);
+            }
+        }
+        if (!initialScreenPosition)
+            initialScreenPosition = component.initialScreenPosition = parentBounds;
+        if ((!this.trackMouseY && Math.abs(parentBounds.top - initialScreenPosition.top) > this.closeOnScrollDistance) ||
+            (!this.trackMouseX && Math.abs(parentBounds.left - initialScreenPosition.left) > this.closeOnScrollDistance))
+            this.dismissAfterScroll({ parentBounds, initialScreenPosition }, instance, component);
+        instance.positionChangeSubscribers.notify();
+    }
+    applyFixedPositioningPlacementStyles(style, placement, contentSize, rel, el, noAuto) {
+        let viewport = getViewportRect(this.screenPadding);
+        style.position = "fixed";
+        if (placement.startsWith("down")) {
+            style.top = `${(this.cover ? rel.top : rel.bottom) + this.offset}px`;
+            let bottom = viewport.bottom - (rel.bottom + this.offset + contentSize.height);
+            style.bottom =
+                this.constrain && (noAuto || bottom < this.screenPadding + 10)
+                    ? Math.max(this.screenPadding, bottom) + "px"
+                    : "auto";
+        }
+        else if (placement.startsWith("up")) {
+            let top = rel.top - this.offset - contentSize.height - viewport.top;
+            style.top =
+                this.constrain && (noAuto || top < this.screenPadding + 10)
+                    ? Math.max(this.screenPadding, top) + "px"
+                    : "auto";
+            style.bottom =
+                document.documentElement.offsetHeight - (this.cover ? rel.bottom : rel.top) + this.offset + "px";
+        }
+        switch (placement) {
+            case "down":
+            case "down-center":
+                style.right = "auto";
+                style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
+                break;
+            case "down-right":
+                style.right = "auto";
+                style.left = `${rel.left}px`;
+                break;
+            case "down-left":
+                style.right = `${document.documentElement.offsetWidth - rel.right}px`;
+                style.left = "auto";
+                break;
+            case "up":
+            case "up-center":
+                style.right = "auto";
+                style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
+                break;
+            case "up-right":
+                style.right = "auto";
+                style.left = `${rel.left}px`;
+                break;
+            case "up-left":
+                style.right = `${document.documentElement.offsetWidth - rel.right}px`;
+                style.left = "auto";
+                break;
+            case "right":
+            case "right-center":
+                style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
+                style.right = "auto";
+                style.bottom = "auto";
+                style.left = `${rel.right + this.offset}px`;
+                break;
+            case "right-down":
+                style.top = `${rel.top}px`;
+                style.right = "auto";
+                style.bottom = "auto";
+                style.left = `${rel.right + this.offset}px`;
+                break;
+            case "right-up":
+                style.top = "auto";
+                style.right = "auto";
+                style.bottom = `${document.documentElement.offsetHeight - rel.bottom}px`;
+                style.left = `${rel.right + this.offset}px`;
+                break;
+            case "left":
+            case "left-center":
+                style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
+                style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
+                style.bottom = "auto";
+                style.left = "auto";
+                break;
+            case "left-down":
+                style.top = `${rel.top}px`;
+                style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
+                style.bottom = "auto";
+                style.left = "auto";
+                break;
+            case "left-up":
+                style.top = "auto";
+                style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
+                style.bottom = `${document.documentElement.offsetHeight - rel.bottom}px`;
+                style.left = "auto";
+                break;
+            case "screen-center":
+                let w = Math.min(contentSize.width, document.documentElement.offsetWidth - 2 * this.screenPadding);
+                let h = Math.min(contentSize.height, document.documentElement.offsetHeight - 2 * this.screenPadding);
+                style.top = `${Math.round((document.documentElement.offsetHeight - h) / 2)}px`;
+                style.right = `${Math.round((document.documentElement.offsetWidth - w) / 2)}px`;
+                style.bottom = `${Math.round((document.documentElement.offsetHeight - h) / 2)}px`;
+                style.left = `${Math.round((document.documentElement.offsetWidth - w) / 2)}px`;
+                break;
+        }
+    }
+    applyAbsolutePositioningPlacementStyles(style, placement, contentSize, rel, el, noAuto) {
+        var viewport = getViewportRect(this.screenPadding);
+        style.position = "absolute";
+        if (placement.startsWith("down")) {
+            style.top = `${rel.bottom - rel.top + this.offset}px`;
+            let room = viewport.bottom - rel.bottom + this.offset;
+            style.bottom =
+                this.constrain && (noAuto || contentSize.height >= room - 10)
+                    ? `${-Math.min(room, contentSize.height)}px`
+                    : "auto";
+        }
+        else if (placement.startsWith("up")) {
+            let room = rel.top - this.offset - viewport.top;
+            style.top =
+                this.constrain && (noAuto || contentSize.height >= room - 10)
+                    ? `${-Math.min(room, contentSize.height)}px`
+                    : "auto";
+            style.bottom = `${rel.bottom - rel.top - this.offset}px`;
+        }
+        switch (placement) {
+            case "down":
+            case "down-center":
+                style.right = "auto";
+                style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
+                break;
+            case "down-right":
+                style.right = "auto";
+                style.left = `0`;
+                break;
+            case "down-left":
+                style.right = `0`;
+                style.left = "auto";
+                break;
+            case "up":
+            case "up-center":
+                style.right = "auto";
+                style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
+                break;
+            case "up-right":
+                style.right = "auto";
+                style.left = `0`;
+                break;
+            case "up-left":
+                style.right = `0`;
+                style.left = "auto";
+                break;
+            case "right":
+            case "right-center":
+                style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
+                style.right = "auto";
+                style.bottom = "auto";
+                style.left = `${rel.right - rel.left + this.offset}px`;
+                break;
+            case "right-down":
+                style.top = `0`;
+                style.right = "auto";
+                style.bottom = "auto";
+                style.left = `${rel.right - rel.left + this.offset}px`;
+                break;
+            case "right-up":
+                style.top = "auto";
+                style.right = "auto";
+                style.bottom = `0`;
+                style.left = `${rel.right - rel.left + this.offset}px`;
+                break;
+            case "left":
+            case "left-center":
+                style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
+                style.right = `${rel.right - rel.left + this.offset}px`;
+                style.bottom = "auto";
+                style.left = "auto";
+                break;
+            case "left-down":
+                style.top = `0`;
+                style.right = `${rel.right - rel.left + this.offset}px`;
+                style.bottom = "auto";
+                style.left = "auto";
+                break;
+            case "left-up":
+                style.top = "auto";
+                style.right = `${rel.right - rel.left + this.offset}px`;
+                style.bottom = `0`;
+                style.left = "auto";
+                break;
+        }
+    }
+    applyPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto) {
+        switch (this.positioning) {
+            case "absolute":
+                this.applyAbsolutePositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
+                break;
+            case "auto":
+                if (isTouchDevice())
+                    this.applyAbsolutePositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
+                else
+                    this.applyFixedPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
+                break;
+            default:
+                this.applyFixedPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
+                break;
+        }
+    }
+    setDirectionClass(component, placement) {
+        var state = {
+            "place-left": false,
+            "place-right": false,
+            "place-up": false,
+            "place-down": false,
+        };
+        component.lastPlacement = placement;
+        component.setCSSState({
+            ...state,
+            ["place-" + placement]: true,
+        });
+    }
+    measureNaturalDropdownSize(instance, component) {
+        var { el } = component;
+        var size = {
+            width: el.offsetWidth,
+            height: this.constrain
+                ? calculateNaturalElementHeight(el)
+                : el.offsetHeight - el.clientHeight + el.scrollHeight,
+        };
+        if (this.firstChildDefinesHeight && el.firstChild) {
+            size.height = el.firstChild.offsetHeight;
+        }
+        if (this.firstChildDefinesWidth && el.firstChild) {
+            size.width = el.firstChild.offsetWidth;
+        }
+        if (this.onMeasureNaturalContentSize) {
+            var more = instance.invoke("onMeasureNaturalContentSize", el, instance, component);
+            Object.assign(size, more);
+        }
+        return size;
+    }
+    findOptimalPlacement(contentSize, target, placement, lastPlacement) {
+        var placementOrder = this.placementOrder.split(" ");
+        var best = lastPlacement || placement;
+        var first;
+        var score = {};
+        var viewport = getViewportRect();
+        for (var i = 0; i < placementOrder.length; i++) {
+            var p = placementOrder[i];
+            if (!first)
+                first = p;
+            var parts = p.split("-");
+            var primary = parts[0];
+            var secondary = parts[1] || "center";
+            score[p] = 0;
+            var vertical = true;
+            switch (primary) {
+                case "down":
+                    score[p] += 3 * Math.min(1, (viewport.bottom - target.bottom - this.offset) / contentSize.height);
+                    break;
+                case "up":
+                    score[p] += 3 * Math.min(1, (target.top - viewport.top - this.offset) / contentSize.height);
+                    break;
+                case "right":
+                    score[p] += target.right + contentSize.width + this.offset < viewport.right ? 3 : 0;
+                    vertical = false;
+                    break;
+                case "left":
+                    score[p] += target.left - contentSize.width - this.offset >= viewport.left ? 3 : 0;
+                    vertical = false;
+                    break;
+            }
+            switch (secondary) {
+                case "center":
+                    if (vertical) {
+                        score[p] += (target.right + target.left - contentSize.width) / 2 >= viewport.left ? 1 : 0;
+                        score[p] += (target.right + target.left + contentSize.width) / 2 < viewport.right ? 1 : 0;
+                    }
+                    else {
+                        score[p] += (target.bottom + target.top - contentSize.height) / 2 >= viewport.top ? 1 : 0;
+                        score[p] += (target.bottom + target.top + contentSize.height) / 2 < viewport.bottom ? 1 : 0;
+                    }
+                    break;
+                case "right":
+                    score[p] += target.left + contentSize.width < viewport.right ? 2 : 0;
+                    break;
+                case "left":
+                    score[p] += target.right - contentSize.width >= viewport.left ? 2 : 0;
+                    break;
+                case "up":
+                    score[p] += target.bottom - contentSize.height >= viewport.top ? 2 : 0;
+                    break;
+                case "down":
+                    score[p] += target.top + contentSize.height < viewport.bottom ? 2 : 0;
+                    break;
+            }
+        }
+        if (!(best in score))
+            best = first;
+        for (var k in score)
+            if (score[k] > score[best])
+                best = k;
+        if (this.touchFriendly && isTouchDevice() && score[best] < 5)
+            return "screen-center";
+        return best;
+    }
+    handleKeyDown(e, instance) {
+        switch (e.keyCode) {
+            case 27: //esc
+                var focusable = findFirst(instance.relatedElement, isFocusable);
+                if (focusable)
+                    focusable.focus();
+                e.stopPropagation();
+                e.preventDefault();
+                break;
+        }
+        if (this.onKeyDown)
+            instance.invoke("onKeyDown", e, instance);
+    }
+    renderContents(context, instance) {
+        let { CSS, baseClass } = this;
+        let result = [super.renderContents(context, instance)];
+        if (this.arrow) {
+            result.push(_jsx("div", { className: CSS.element(baseClass, "arrow-border") }, "arrow-border"), _jsx("div", { className: CSS.element(baseClass, "arrow-fill") }, "arrow-back"));
+        }
+        return result;
+    }
+    render(context, instance, key) {
+        let { CSS, baseClass } = this;
+        //if relatedElement is not provided, a beacon is rendered to and used to resolve a nearby element as a target
+        //if onResolveTarget doesn't provide another element, the beacon itself is used as a target
+        let beacon = null;
+        if (this.relatedElement)
+            instance.relatedElement = this.relatedElement;
+        if (!this.relatedElement || instance.needsBeacon) {
+            beacon = (_jsx("div", { className: CSS.element(baseClass, "beacon"), ref: (el) => {
+                    if (instance.relatedElement || !el)
+                        return;
+                    let target = el;
+                    if (this.onResolveRelatedElement)
+                        target = instance.invoke("onResolveRelatedElement", el, instance);
+                    else
+                        target = el.previousElementSibling;
+                    if (!target)
+                        target = el;
+                    if (target == el)
+                        instance.needsBeacon = true;
+                    instance.relatedElement = target;
+                    instance.setState({ dummy: {} });
+                } }, `${key}-beacon`));
+        }
+        return [beacon, instance.relatedElement && super.render(context, instance, key)];
+    }
+    getOverlayContainer() {
+        // this should be instance.relatedElement
+        if (this.relatedElement) {
+            let container = closestParent(this.relatedElement, (el) => el.dataset && !!el.dataset.focusableOverlayContainer);
+            if (container)
+                return container;
+        }
+        return super.getOverlayContainer();
+    }
+}
+DropdownBase.prototype.offset = 0;
+DropdownBase.prototype.baseClass = "dropdown";
+DropdownBase.prototype.matchWidth = true;
+DropdownBase.prototype.matchMaxWidth = false;
+DropdownBase.prototype.placementOrder = "up down right left";
+DropdownBase.prototype.placement = null; //default placement
+DropdownBase.prototype.constrain = false;
+DropdownBase.prototype.positioning = "fixed";
+DropdownBase.prototype.touchFriendly = false;
+DropdownBase.prototype.arrow = false;
+DropdownBase.prototype.pad = false;
+DropdownBase.prototype.elementExplode = 0;
+DropdownBase.prototype.closeOnScrollDistance = 50;
+DropdownBase.prototype.screenPadding = 5;
+DropdownBase.prototype.firstChildDefinesHeight = false;
+DropdownBase.prototype.firstChildDefinesWidth = false;
+DropdownBase.prototype.cover = false;
+export class Dropdown extends DropdownBase {
+}
+Widget.alias("dropdown", Dropdown);
+Localization.registerPrototype("cx/widgets/Dropdown", Dropdown);
+function getViewportRect(padding = 0) {
+    return {
+        left: padding,
+        top: padding,
+        right: document.documentElement.offsetWidth - padding,
+        bottom: document.documentElement.offsetHeight - padding,
+    };
+}

package/build/widgets/overlay/FlyweightTooltipTracker.d.ts

@@ -0,0 +1,22 @@
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Widget } from "../../ui/Widget";
+import type { TooltipInstance } from "./Tooltip";
+import { TooltipParentInstance, TooltipProp } from "./tooltip-ops";
+export interface FlyweightTooltipTrackerConfig {
+    onGetTooltip?: (element: Element, instance: Instance) => TooltipProp;
+}
+export declare class FlyweightTooltipTrackerInstance extends Instance<FlyweightTooltipTracker> implements TooltipParentInstance {
+    lastTarget?: EventTarget | null;
+    tooltip?: TooltipProp;
+    parentEl?: Element;
+    tooltips: {
+        [key: string]: TooltipInstance;
+    };
+}
+export declare class FlyweightTooltipTracker extends Widget {
+    onGetTooltip?: (element: Element, instance: Instance) => TooltipProp | undefined;
+    initInstance(context: RenderingContext, instance: FlyweightTooltipTrackerInstance): void;
+    render(context: RenderingContext, instance: FlyweightTooltipTrackerInstance, key: string): any;
+    handleMouseMove(e: MouseEvent, instance: FlyweightTooltipTrackerInstance): void;
+}

package/build/widgets/overlay/FlyweightTooltipTracker.js

@@ -0,0 +1,39 @@
+import { Instance } from "../../ui/Instance";
+import { Widget } from "../../ui/Widget";
+import { closest } from "../../util";
+import { tooltipMouseLeave, tooltipMouseMove } from "./tooltip-ops";
+export class FlyweightTooltipTrackerInstance extends Instance {
+}
+export class FlyweightTooltipTracker extends Widget {
+    initInstance(context, instance) {
+        let handler = (e) => this.handleMouseMove(e, instance);
+        document.addEventListener("mousemove", handler);
+        instance.subscribeOnDestroy(() => {
+            document.removeEventListener("mousemove", handler);
+        });
+    }
+    render(context, instance, key) {
+        return null;
+    }
+    handleMouseMove(e, instance) {
+        if (!this.onGetTooltip)
+            return;
+        let parentEl, tooltip;
+        if (instance.lastTarget == e.target)
+            return;
+        instance.lastTarget = e.target;
+        parentEl = closest(e.target, (element) => {
+            tooltip = instance.invoke("onGetTooltip", element, instance);
+            return !!tooltip;
+        });
+        if (!parentEl)
+            tooltipMouseLeave(e, instance, instance.tooltip, { target: instance.parentEl });
+        else {
+            instance.tooltip = tooltip;
+            instance.parentEl = parentEl;
+            tooltipMouseMove(e, instance, instance.tooltip, {
+                target: parentEl,
+            });
+        }
+    }
+}

package/build/widgets/overlay/MsgBox.d.ts

@@ -0,0 +1,25 @@
+export interface MsgBoxOptions {
+    message?: string;
+    title?: string;
+    header?: string;
+    style?: string;
+    callback?: (option?: string) => boolean | void;
+    okText?: string;
+    yesText?: string;
+    noText?: string;
+    yesButtonMod?: string;
+    noButtonMod?: string;
+    items?: any;
+    children?: any;
+    store?: any;
+}
+export declare class MsgBox {
+    buttonMod?: string;
+    footerDirection?: string;
+    footerJustify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | false;
+    yesText?: string;
+    noText?: string;
+    static alert(options: string | MsgBoxOptions): Promise<void>;
+    static yesNo(options: string | MsgBoxOptions): Promise<string>;
+}
+export declare function enableMsgBoxAlerts(): void;

package/build/widgets/overlay/MsgBox.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
+import { Window } from "./Window";
+import { Button } from "../Button";
+import { Localization } from "../../ui/Localization";
+import { FlexRow } from "../FlexBox";
+import { registerAlertImpl } from "./alerts";
+import { isString } from "../../util/isString";
+export class MsgBox {
+    buttonMod;
+    footerDirection;
+    footerJustify;
+    yesText;
+    noText;
+    static alert(options) {
+        let opts;
+        if (isString(options))
+            opts = {
+                message: options,
+            };
+        else
+            opts = options;
+        return new Promise(function (resolve) {
+            let callback = (e, instance) => {
+                if (opts.callback && opts.callback() === false)
+                    return;
+                instance.parentOptions.dismiss();
+                resolve();
+            };
+            let w = Window.create(_jsx("cx", { children: _jsxs(Window, { title: opts.title, header: opts.header, mod: "alert", modal: true, center: true, resizable: false, closable: false, style: opts.style || "max-width: 90vw", dismissOnPopState: true, children: [opts.message || opts.items || opts.children, _jsx(FlexRow, { putInto: "footer", direction: MsgBox.prototype.footerDirection, justify: MsgBox.prototype.footerJustify, children: _jsx(Button, { mod: MsgBox.prototype.buttonMod, onClick: callback, children: opts.okText || "OK" }) })] }) }));
+            w.open(opts.store);
+        });
+    }
+    static yesNo(options) {
+        let opts;
+        if (isString(options))
+            opts = {
+                message: options,
+            };
+        else
+            opts = options;
+        return new Promise(function (resolve, reject) {
+            let callback = (option) => (e, instance) => {
+                if (opts.callback && opts.callback(option) === false)
+                    return;
+                instance.parentOptions.dismiss();
+                if (option == "yes")
+                    resolve(option);
+                else
+                    resolve(option);
+            };
+            let w = Window.create(_jsx("cx", { children: _jsxs(Window, { title: opts.title, header: opts.header, mod: "alert", modal: true, center: true, resizable: false, closable: false, style: opts.style || "max-width: 90vw", dismissOnPopState: true, children: [opts.message || opts.items || opts.children, _jsxs(FlexRow, { putInto: "footer", direction: MsgBox.prototype.footerDirection, justify: MsgBox.prototype.footerJustify, hspacing: "small", children: [_jsx(Button, { mod: opts.yesButtonMod || MsgBox.prototype.buttonMod, onClick: callback("yes"), children: opts.yesText || MsgBox.prototype.yesText }), _jsx(Button, { mod: opts.noButtonMod || MsgBox.prototype.buttonMod, onClick: callback("no"), children: opts.noText || MsgBox.prototype.noText })] })] }) }));
+            w.open(opts.store);
+        });
+    }
+}
+MsgBox.prototype.buttonMod = undefined;
+MsgBox.prototype.footerDirection = "row";
+MsgBox.prototype.footerJustify = "center";
+MsgBox.prototype.yesText = "Yes";
+MsgBox.prototype.noText = "No";
+Localization.registerPrototype("cx/widgets/MsgBox", MsgBox);
+export function enableMsgBoxAlerts() {
+    registerAlertImpl({
+        yesNo: MsgBox.yesNo.bind(MsgBox),
+        alert: MsgBox.alert.bind(MsgBox),
+    });
+}