@web-atoms/web-controls 2.6.5 → 2.6.7

package/dist-esm/basic/InlinePopup.js

@@ -2,255 +2,284 @@ import { AtomDisposableList } from "@web-atoms/core/dist/core/AtomDisposableList
 import sleep from "@web-atoms/core/dist/core/sleep.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import { AtomControl, ElementValueSetters } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import "./styles/inline-popup.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/inline-popup.global.css"));
 import { StringHelper } from "@web-atoms/core/dist/core/StringHelper.js";
 function closeHandler(opener, container, close) {
-    let handler = null;
-    const body = document.body;
-    handler = (e) => {
-        let start = e.target;
-        if (e.defaultPrevented) {
-            return;
-        }
-        while (start) {
-            if (start === body) {
-                break;
-            }
-            if (start === opener) {
-                return;
-            }
-            if (start === container) {
-                return;
-            }
-            start = start.parentElement;
-        }
-        close();
-        e.preventDefault();
-        e.stopImmediatePropagation?.();
-    };
-    document.body.addEventListener("click", handler, true);
-    let ce = container;
-    const containNoneList = [];
-    while (ce) {
-        const isNotNone = window.getComputedStyle(ce).contain !== "none";
-        if (isNotNone) {
-            ce.setAttribute("data-force-contain", "none");
-            containNoneList.push(ce);
-        }
-        ce = ce.parentElement;
+  let handler = null;
+  const body = document.body;
+  handler = e => {
+    let start = e.target;
+    if (e.defaultPrevented) {
+      return;
     }
-    return () => {
-        document.body.removeEventListener("click", handler, true);
-        for (const iterator of containNoneList) {
-            iterator.removeAttribute("data-force-contain");
-        }
-    };
-}
-export default class InlinePopup extends AtomControl {
-    static async show(target, node, options = {}) {
-        const targetElement = (target.element ?? target);
-        const control = target.element ? target : AtomControl.from(target);
-        const targetStyle = window.getComputedStyle(targetElement);
-        if (!/fixed|absolute|relative/i.test(targetStyle.position)) {
-            targetElement.style.position = "relative";
-        }
-        await sleep(10);
-        const container = document.createElement("div");
-        container.setAttribute("data-inline-popup", "inline-popup");
-        const alignment = StringHelper.fromHyphenToCamel(options.alignment || "none");
-        switch (alignment) {
-            case "bottomLeft":
-                container.style.top = `${5 + targetElement.offsetHeight}px`;
-                container.style.left = "5px";
-                break;
-            case "bottomRight":
-                container.style.top = `${5 + targetElement.offsetHeight}px`;
-                container.style.right = "5px";
-                break;
-            case "topRight":
-                container.style.top = "5px";
-                container.style.left = `${targetElement.offsetWidth}px`;
-                break;
-            case "above":
-                container.style.bottom = `${targetElement.offsetHeight}px`;
-                container.style.left = "5px";
-                break;
-            default:
-                container.style.top = `${5 + targetElement.offsetHeight}px`;
-                container.style.left = "5px";
-                break;
-        }
-        container._logicalParent = targetElement;
-        control.render(XNode.create("div", null,
-            " ",
-            XNode.create("atom-popup-container", null, node),
-            " "), container, control);
-        targetElement.insertAdjacentElement("beforeend", container);
-        return await new Promise((resolve, reject) => {
-            const disposables = new AtomDisposableList();
-            disposables.add(() => targetElement.removeAttribute("data-popup-open"));
-            let resolved = false;
-            const close = (r) => {
-                if (resolved) {
-                    return;
-                }
-                resolved = true;
-                resolve(r);
-                disposables.dispose();
-            };
-            const cancel = (r = "cancelled") => {
-                if (resolved) {
-                    return;
-                }
-                resolved = true;
-                reject(r);
-                disposables.dispose();
-            };
-            const firstChild = container.firstElementChild.atomControl;
-            if (firstChild instanceof InlinePopup) {
-                firstChild.cancel = cancel;
-                firstChild.close = close;
-            }
-            else {
-                if (options.onClick === void 0) {
-                    options.onClick = options.defaultOnClick;
-                }
-            }
-            const defaultClose = options.onClick === "close" ? close : cancel;
-            const observer = new MutationObserver(() => {
-                if (!container.isConnected) {
-                    defaultClose();
-                }
-            });
-            observer.observe(targetElement, { childList: true });
-            disposables.add(() => {
-                observer.disconnect();
-                control.dispose(container);
-                container.remove();
-            });
-            if (options.onClick) {
-                disposables.add(control.bindEvent(container, "click", async () => {
-                    await sleep(200);
-                    defaultClose();
-                }));
-            }
-            options.cancelToken?.registerForCancel(cancel);
-            disposables.add(closeHandler(targetElement, container, defaultClose));
-        });
+    while (start) {
+      if (start === body) {
+        break;
+      }
+      if (start === opener) {
+        return;
+      }
+      if (start === container) {
+        return;
+      }
+      start = start.parentElement;
     }
-    static showControl(target, options = {}) {
-        const node = XNode.create(this, {});
-        return this.show(target, node, options);
+    close();
+    e.preventDefault();
+    e.stopImmediatePropagation?.();
+  };
+  document.body.addEventListener("click", handler, true);
+  let ce = container;
+  const containNoneList = [];
+  while (ce) {
+    const isNotNone = window.getComputedStyle(ce).contain !== "none";
+    if (isNotNone) {
+      ce.setAttribute("data-force-contain", "none");
+      containNoneList.push(ce);
     }
-    dispatchClickEvent(e, data) {
-        let start = this.element.parentElement;
-        while (start) {
-            const atomControl = AtomControl.from(start);
-            if (atomControl) {
-                atomControl.dispatchClickEvent(e, data);
-                return;
-            }
-            start = start.parentElement;
-        }
-        super.dispatchClickEvent(e, data);
+    ce = ce.parentElement;
+  }
+  return () => {
+    document.body.removeEventListener("click", handler, true);
+    for (const iterator of containNoneList) {
+      iterator.removeAttribute("data-force-contain");
     }
+  };
 }
-document.body.addEventListener("click", (e) => {
-    let start = e.target;
-    let popupFactory;
-    let alignment;
-    while (start) {
-        popupFactory = start.popupFactory;
-        if (popupFactory) {
-            alignment = start.dataset.alignment;
-            break;
-        }
-        start = start.parentElement;
+export default class InlinePopup extends AtomControl {
+  static async show(target, node, options = {}) {
+    const targetElement = target.element ?? target;
+    const control = target.element ? target : AtomControl.from(target);
+    const targetStyle = window.getComputedStyle(targetElement);
+    if (!/fixed|absolute|relative/i.test(targetStyle.position)) {
+      targetElement.style.position = "relative";
     }
-    if (!start) {
-        return;
+    await sleep(10);
+    const container = document.createElement("div");
+    container.setAttribute("data-inline-popup", "inline-popup");
+    const alignment = StringHelper.fromHyphenToCamel(options.alignment || "none");
+    switch (alignment) {
+      case "bottomLeft":
+        container.style.top = `${5 + targetElement.offsetHeight}px`;
+        container.style.left = "5px";
+        break;
+      case "bottomRight":
+        container.style.top = `${5 + targetElement.offsetHeight}px`;
+        container.style.right = "5px";
+        break;
+      case "topRight":
+        container.style.top = "5px";
+        container.style.left = `${targetElement.offsetWidth}px`;
+        break;
+      case "above":
+        container.style.bottom = `${targetElement.offsetHeight}px`;
+        container.style.left = "5px";
+        break;
+      default:
+        container.style.top = `${5 + targetElement.offsetHeight}px`;
+        container.style.left = "5px";
+        break;
     }
-    if (start.getAttribute("data-popup-open")) {
+    container._logicalParent = targetElement;
+    control.render(XNode.create("div", null, " ", XNode.create("atom-popup-container", null, node), " "), container, control);
+    targetElement.insertAdjacentElement("beforeend", container);
+    return await new Promise((resolve, reject) => {
+      const disposables = new AtomDisposableList();
+      disposables.add(() => targetElement.removeAttribute("data-popup-open"));
+      let resolved = false;
+      const close = r => {
+        if (resolved) {
+          return;
+        }
+        resolved = true;
+        resolve(r);
+        disposables.dispose();
+      };
+      const cancel = (r = "cancelled") => {
+        if (resolved) {
+          return;
+        }
+        resolved = true;
+        reject(r);
+        disposables.dispose();
+      };
+      const firstChild = container.firstElementChild.atomControl;
+      if (firstChild instanceof InlinePopup) {
+        firstChild.cancel = cancel;
+        firstChild.close = close;
+      } else {
+        if (options.onClick === void 0) {
+          options.onClick = options.defaultOnClick;
+        }
+      }
+      const defaultClose = options.onClick === "close" ? close : cancel;
+      const observer = new MutationObserver(() => {
+        if (!container.isConnected) {
+          defaultClose();
+        }
+      });
+      observer.observe(targetElement, {
+        childList: true
+      });
+      disposables.add(() => {
+        observer.disconnect();
+        control.dispose(container);
+        container.remove();
+      });
+      if (options.onClick) {
+        disposables.add(control.bindEvent(container, "click", async () => {
+          await sleep(200);
+          defaultClose();
+        }));
+      }
+      options.cancelToken?.registerForCancel(cancel);
+      disposables.add(closeHandler(targetElement, container, defaultClose));
+    });
+  }
+  static showControl(target, options = {}) {
+    const node = XNode.create(this, {});
+    return this.show(target, node, options);
+  }
+  dispatchClickEvent(e, data) {
+    let start = this.element.parentElement;
+    while (start) {
+      const atomControl = AtomControl.from(start);
+      if (atomControl) {
+        atomControl.dispatchClickEvent(e, data);
         return;
+      }
+      start = start.parentElement;
     }
-    start.setAttribute("data-popup-open", "true");
-    const control = AtomControl.from(start);
-    const app = control.app;
-    const target = start;
-    const element = control.element;
-    let itemIndex;
-    let data;
-    if (control.items && control.itemRenderer) {
-        while (start && start !== element) {
-            itemIndex ??= start.getAttribute("data-item-index");
-            if (itemIndex) {
-                data = control.items[~~itemIndex];
-                break;
-            }
-            start = start.parentElement;
-        }
+    super.dispatchClickEvent(e, data);
+  }
+}
+document.body.addEventListener("click", e => {
+  let start = e.target;
+  let popupFactory;
+  let alignment;
+  while (start) {
+    popupFactory = start.popupFactory;
+    if (popupFactory) {
+      alignment = start.dataset.alignment;
+      break;
     }
-    if (!data) {
-        data = new Proxy(target, {
-            get(t, p, receiver) {
-                let s = target;
-                while (s) {
-                    const v = s.dataset[p];
-                    if (v !== void 0) {
-                        return v;
-                    }
-                    s = s.parentElement;
-                }
-            },
-        });
+    start = start.parentElement;
+  }
+  if (!start) {
+    return;
+  }
+  if (start.getAttribute("data-popup-open")) {
+    return;
+  }
+  start.setAttribute("data-popup-open", "true");
+  const control = AtomControl.from(start);
+  const app = control.app;
+  const target = start;
+  const element = control.element;
+  let itemIndex;
+  let data;
+  if (control.items && control.itemRenderer) {
+    while (start && start !== element) {
+      itemIndex ??= start.getAttribute("data-item-index");
+      if (itemIndex) {
+        data = control.items[~~itemIndex];
+        break;
+      }
+      start = start.parentElement;
     }
-    const node = popupFactory(data);
-    const defaultOnClick = target.getAttribute("data-default-on-click");
-    app.runAsync(() => InlinePopup.show(target, node, { alignment, defaultOnClick }));
+  }
+  if (!data) {
+    data = new Proxy(target, {
+      get(t, p, receiver) {
+        let s = target;
+        while (s) {
+          const v = s.dataset[p];
+          if (v !== void 0) {
+            return v;
+          }
+          s = s.parentElement;
+        }
+      }
+    });
+  }
+  const node = popupFactory(data);
+  const defaultOnClick = target.getAttribute("data-default-on-click");
+  app.runAsync(() => InlinePopup.show(target, node, {
+    alignment,
+    defaultOnClick
+  }));
 });
 ElementValueSetters["data-popup-class"] = (c, e, v) => {
-    e.popupFactory = v;
+  e.popupFactory = v;
 };
-export function InlinePopupButton({ text, label, icon, hasBorder = false, nodes = [], defaultOnClick = "close", anchorRight = false, alignment, popup, ...a }, ...popupNodes) {
-    alignment ||= anchorRight ? "bottomRight" : "bottomLeft";
-    console.warn(`Deprecated, use AtomPopover instead`);
-    if (!a["data-layout"]) {
-        if (icon && text) {
-            a["data-layout"] = "icon-button";
-        }
-        else {
-            a["data-layout"] = "button";
-        }
+export function InlinePopupButton({
+  text,
+  label,
+  icon,
+  hasBorder = false,
+  nodes = [],
+  defaultOnClick = "close",
+  anchorRight = false,
+  alignment,
+  popup,
+  ...a
+}, ...popupNodes) {
+  alignment ||= anchorRight ? "bottomRight" : "bottomLeft";
+  console.warn(`Deprecated, use AtomPopover instead`);
+  if (!a["data-layout"]) {
+    if (icon && text) {
+      a["data-layout"] = "icon-button";
+    } else {
+      a["data-layout"] = "button";
     }
-    if (popup) {
-        return XNode.create("button", { "data-popup-class": popup, "data-has-border": !!hasBorder, "data-inline-popup-button": "inline-popup-button", "data-default-on-click": defaultOnClick, "data-alignment": alignment, ...a },
-            icon && XNode.create("i", { class: icon }),
-            text && XNode.create("span", { text: text }),
-            label && XNode.create("label", { text: text }),
-            ...nodes);
+  }
+  if (popup) {
+    return XNode.create("button", {
+      "data-popup-class": popup,
+      "data-has-border": !!hasBorder,
+      "data-inline-popup-button": "inline-popup-button",
+      "data-default-on-click": defaultOnClick,
+      "data-alignment": alignment,
+      ...a
+    }, icon && XNode.create("i", {
+      class: icon
+    }), text && XNode.create("span", {
+      text: text
+    }), label && XNode.create("label", {
+      text: text
+    }), ...nodes);
+  }
+  let isOpen = false;
+  const done = () => isOpen = false;
+  const click = async e => {
+    if (isOpen || e.defaultPrevented) {
+      return;
     }
-    let isOpen = false;
-    const done = () => isOpen = false;
-    const click = async (e) => {
-        if (isOpen || e.defaultPrevented) {
-            return;
-        }
-        const currentTarget = e.currentTarget;
-        currentTarget.setAttribute("data-popup-open", "true");
-        const popupNode = popupNodes.length > 1 ? XNode.create("div", null, ...popupNodes) : popupNodes[0];
-        try {
-            isOpen = true;
-            await InlinePopup.show(e.currentTarget, popupNode, { defaultOnClick, alignment });
-        }
-        finally {
-            done();
-            currentTarget.removeAttribute("data-popup-open");
-        }
-    };
-    return XNode.create("button", { "event-click": click, "data-has-border": !!hasBorder, "data-alignment": alignment, "data-inline-popup-button": "inline-popup-button", ...a },
-        icon && XNode.create("i", { class: icon }),
-        text && XNode.create("span", { text: text }),
-        label && XNode.create("label", { text: text }),
-        ...nodes);
-}
-//# sourceMappingURL=InlinePopup.js.map
+    const currentTarget = e.currentTarget;
+    currentTarget.setAttribute("data-popup-open", "true");
+    const popupNode = popupNodes.length > 1 ? XNode.create("div", null, ...popupNodes) : popupNodes[0];
+    try {
+      isOpen = true;
+      await InlinePopup.show(e.currentTarget, popupNode, {
+        defaultOnClick,
+        alignment
+      });
+    } finally {
+      done();
+      currentTarget.removeAttribute("data-popup-open");
+    }
+  };
+  return XNode.create("button", {
+    "event-click": click,
+    "data-has-border": !!hasBorder,
+    "data-alignment": alignment,
+    "data-inline-popup-button": "inline-popup-button",
+    ...a
+  }, icon && XNode.create("i", {
+    class: icon
+  }), text && XNode.create("span", {
+    text: text
+  }), label && XNode.create("label", {
+    text: text
+  }), ...nodes);
+}