@web-atoms/web-controls 2.6.4 → 2.6.6

package/dist-esm/basic/elements/AtomPopover.js

@@ -2,7 +2,7 @@ import { AtomDisposableList } from "@web-atoms/core/dist/core/AtomDisposableList
 import { CancelToken } from "@web-atoms/core/dist/core/types.js";
 import XNode, { xnodeSymbol } from "@web-atoms/core/dist/core/XNode.js";
 import { AtomControl, ElementValueSetters } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import "./AtomPopover.css";
+ESMPack.installStyleSheet(import.meta.resolve("./AtomPopover.css"));
 import { relativeRect } from "./relativeRect.js";
 import getContainingBlock from "./getContainingBlock.js";
 ElementValueSetters["anchor-left"] = (c, e, v) => e.setAttribute("anchor-left", v);
@@ -10,270 +10,287 @@ ElementValueSetters["anchor-right"] = (c, e, v) => e.setAttribute("anchor-right"
 ElementValueSetters["anchor-top"] = (c, e, v) => e.setAttribute("anchor-top", v);
 ElementValueSetters["anchor-bottom"] = (c, e, v) => e.setAttribute("anchor-bottom", v);
 class AtomPopoverElement extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.aborted = "cancel";
-        this.closePopover = (e) => {
-            const cancelOnBlur = /^(true|yes|1)$/i.test(this.getAttribute("cancel-on-blur") || "true");
-            if (!cancelOnBlur) {
-                return;
-            }
-            setTimeout(() => {
-                let target = e.target;
-                while (target) {
-                    if (target.hasAttribute("data-close-on-click")) {
-                        break;
-                    }
-                    if (target === this.parentElement) {
-                        return;
-                    }
-                    target = target.parentElement;
-                }
-                this.lastParent = null;
-                const ce = new CustomEvent("removing", {
-                    detail: { result: this.result, aborted: this.aborted },
-                    bubbles: true,
-                    cancelable: true
-                });
-                this.dispatchEvent(ce);
-                if (ce.defaultPrevented) {
-                    return;
-                }
-                this.dispatchEvent(new CustomEvent("removed", {
-                    detail: { result: this.result, aborted: this.aborted },
-                    bubbles: true,
-                }));
-                this.remove();
-            }, 250);
-        };
-        this.updatePosition = () => {
-            if (!this.parentElement) {
-                return;
-            }
-            const lastParent = this.lastParent = this.parentElement;
-            if (!lastParent) {
-                return;
-            }
-            const cb = getContainingBlock(lastParent);
-            if (!cb) {
-                return;
-            }
-            this.containingBlock = cb;
-            const cbr = cb.getBoundingClientRect();
-            const rrSelf = relativeRect(this, cb);
-            const rrParent = relativeRect(this.parentElement, cb);
-            let anchorBottom = this.getAttribute("anchor-bottom");
-            let anchorRight = this.getAttribute("anchor-right");
-            let anchorTop = this.getAttribute("anchor-top");
-            let anchorLeft = this.getAttribute("anchor-left");
-            const firstChild = this.firstElementChild.getBoundingClientRect();
-            let diffTop = Math.min(window.visualViewport.height, cbr.height) - (rrParent.top + firstChild.height);
-            if (diffTop > 0) {
-                diffTop = 0;
-            }
-            else {
-                diffTop -= 40;
-                if (!anchorBottom) {
-                    anchorBottom = "parent-top";
-                    anchorTop = void 0;
-                }
-            }
-            let diffBottom = rrParent.top - firstChild.height;
-            if (diffBottom > 0) {
-                diffBottom = 0;
-            }
-            const topLeft = {
-                "parent-left": `${rrParent.left}px`,
-                "parent-right": `${rrSelf.left}px`,
-                "parent-top": `${rrParent.top + diffTop}px`,
-                "parent-bottom": `${rrParent.top + rrParent.height + diffTop}px`
-            };
-            const bottomRight = {
-                "parent-left": `${rrParent.right}px`,
-                "parent-right": `${rrSelf.right}px`,
-                "parent-top": `${rrParent.bottom + rrSelf.height + diffBottom}px`,
-                "parent-bottom": `${rrParent.bottom + rrParent.height + diffBottom}px`
-            };
-            const style = this.slotElement.style;
-            style.removeProperty("left");
-            style.removeProperty("top");
-            style.removeProperty("right");
-            style.removeProperty("bottom");
-            if (!anchorBottom) {
-                anchorTop ||= "parent-bottom";
-            }
-            if (!anchorRight) {
-                anchorLeft ||= "parent-right";
-            }
-            if (anchorTop) {
-                style.top = topLeft[anchorTop];
-            }
-            if (anchorLeft) {
-                style.left = topLeft[anchorLeft];
-            }
-            if (anchorBottom) {
-                style.bottom = bottomRight[anchorBottom];
-            }
-            if (anchorRight) {
-                style.right = bottomRight[anchorRight];
-            }
-        };
-    }
-    connectedCallback() {
-        if (!this.root) {
-            const root = this.root = this.attachShadow({ mode: "open" });
-            const slot = document.createElement("slot");
-            slot.setAttribute("part", "container");
-            this.slotElement = slot;
-            root.appendChild(slot);
+  constructor() {
+    super(...arguments);
+    this.aborted = "cancel";
+    this.closePopover = e => {
+      const cancelOnBlur = /^(true|yes|1)$/i.test(this.getAttribute("cancel-on-blur") || "true");
+      if (!cancelOnBlur) {
+        return;
+      }
+      setTimeout(() => {
+        let target = e.target;
+        while (target) {
+          if (target.hasAttribute("data-close-on-click")) {
+            break;
+          }
+          if (target === this.parentElement) {
+            return;
+          }
+          target = target.parentElement;
         }
-        setTimeout(() => this.updatePosition(), 100);
-        window.addEventListener("scroll", this.updatePosition, { passive: true, capture: true });
-        setTimeout(() => {
-            document.body.addEventListener("click", this.closePopover);
-        }, 100);
-    }
-    disconnectedCallback() {
-        if (this.lastParent?.isConnected) {
-            this.dispatchEvent(new CustomEvent("removed", {
-                detail: { result: this.result, aborted: this.aborted },
-                bubbles: true
-            }));
+        this.lastParent = null;
+        const ce = new CustomEvent("removing", {
+          detail: {
+            result: this.result,
+            aborted: this.aborted
+          },
+          bubbles: true,
+          cancelable: true
+        });
+        this.dispatchEvent(ce);
+        if (ce.defaultPrevented) {
+          return;
         }
-        document.body.removeEventListener("click", this.closePopover);
-        window.removeEventListener("scroll", this.updatePosition);
-        clearInterval(this.timer);
+        this.dispatchEvent(new CustomEvent("removed", {
+          detail: {
+            result: this.result,
+            aborted: this.aborted
+          },
+          bubbles: true
+        }));
+        this.remove();
+      }, 250);
+    };
+    this.updatePosition = () => {
+      if (!this.parentElement) {
+        return;
+      }
+      const lastParent = this.lastParent = this.parentElement;
+      if (!lastParent) {
+        return;
+      }
+      const cb = getContainingBlock(lastParent);
+      if (!cb) {
+        return;
+      }
+      this.containingBlock = cb;
+      const cbr = cb.getBoundingClientRect();
+      const rrSelf = relativeRect(this, cb);
+      const rrParent = relativeRect(this.parentElement, cb);
+      let anchorBottom = this.getAttribute("anchor-bottom");
+      let anchorRight = this.getAttribute("anchor-right");
+      let anchorTop = this.getAttribute("anchor-top");
+      let anchorLeft = this.getAttribute("anchor-left");
+      const firstChild = this.firstElementChild.getBoundingClientRect();
+      let diffTop = Math.min(window.visualViewport.height, cbr.height) - (rrParent.top + firstChild.height);
+      if (diffTop > 0) {
+        diffTop = 0;
+      } else {
+        diffTop -= 40;
+        if (!anchorBottom) {
+          anchorBottom = "parent-top";
+          anchorTop = void 0;
+        }
+      }
+      let diffBottom = rrParent.top - firstChild.height;
+      if (diffBottom > 0) {
+        diffBottom = 0;
+      }
+      const topLeft = {
+        "parent-left": `${rrParent.left}px`,
+        "parent-right": `${rrSelf.left}px`,
+        "parent-top": `${rrParent.top + diffTop}px`,
+        "parent-bottom": `${rrParent.top + rrParent.height + diffTop}px`
+      };
+      const bottomRight = {
+        "parent-left": `${rrParent.right}px`,
+        "parent-right": `${rrSelf.right}px`,
+        "parent-top": `${rrParent.bottom + rrSelf.height + diffBottom}px`,
+        "parent-bottom": `${rrParent.bottom + rrParent.height + diffBottom}px`
+      };
+      const style = this.slotElement.style;
+      style.removeProperty("left");
+      style.removeProperty("top");
+      style.removeProperty("right");
+      style.removeProperty("bottom");
+      if (!anchorBottom) {
+        anchorTop ||= "parent-bottom";
+      }
+      if (!anchorRight) {
+        anchorLeft ||= "parent-right";
+      }
+      if (anchorTop) {
+        style.top = topLeft[anchorTop];
+      }
+      if (anchorLeft) {
+        style.left = topLeft[anchorLeft];
+      }
+      if (anchorBottom) {
+        style.bottom = bottomRight[anchorBottom];
+      }
+      if (anchorRight) {
+        style.right = bottomRight[anchorRight];
+      }
+    };
+  }
+  connectedCallback() {
+    if (!this.root) {
+      const root = this.root = this.attachShadow({
+        mode: "open"
+      });
+      const slot = document.createElement("slot");
+      slot.setAttribute("part", "container");
+      this.slotElement = slot;
+      root.appendChild(slot);
+    }
+    setTimeout(() => this.updatePosition(), 100);
+    window.addEventListener("scroll", this.updatePosition, {
+      passive: true,
+      capture: true
+    });
+    setTimeout(() => {
+      document.body.addEventListener("click", this.closePopover);
+    }, 100);
+  }
+  disconnectedCallback() {
+    if (this.lastParent?.isConnected) {
+      this.dispatchEvent(new CustomEvent("removed", {
+        detail: {
+          result: this.result,
+          aborted: this.aborted
+        },
+        bubbles: true
+      }));
     }
+    document.body.removeEventListener("click", this.closePopover);
+    window.removeEventListener("scroll", this.updatePosition);
+    clearInterval(this.timer);
+  }
 }
 const existingPopup = Symbol("popup");
 export default class AtomPopover {
-    static create(parent, options = {}) {
-        return parent[existingPopup] ??= new this(parent, options);
+  static create(parent, options = {}) {
+    return parent[existingPopup] ??= new this(parent, options);
+  }
+  static show(parent, options = {}) {
+    const p = parent[existingPopup] ??= new this(parent, options);
+    return p.resultPromise;
+  }
+  static menu(parent, node, options = {}) {
+    const ct = new CancelToken();
+    options.nodeFactory = () => node;
+    const p = new this(parent, options);
+    p.result = 1;
+    p.disposables.add(p.owner.bindEvent(p.popover, "click", () => {
+      setTimeout(() => {
+        ct.cancel();
+      }, 10);
+    }));
+    return p;
+  }
+  set renderer(v) {
+    const owner = this.owner;
+    let first = this.popoverContainer.firstElementChild;
+    while (first) {
+      const next = first.nextElementSibling;
+      owner.dispose(first);
+      first.remove();
+      first = next;
     }
-    static show(parent, options = {}) {
-        const p = (parent[existingPopup] ??= new this(parent, options));
-        return p.resultPromise;
+    if (!v) {
+      return;
     }
-    static menu(parent, node, options = {}) {
-        const ct = new CancelToken();
-        options.nodeFactory = () => node;
-        const p = new this(parent, options);
-        p.result = 1;
-        p.disposables.add(p.owner.bindEvent(p.popover, "click", () => {
-            setTimeout(() => {
-                ct.cancel();
-            }, 10);
-        }));
-        return p;
+    if (v[xnodeSymbol]) {
+      this.owner.render(XNode.create("div", null, " ", v, " "), this.popoverContainer, this.owner);
+    } else {
+      this.popoverContainer.appendChild(v);
     }
-    set renderer(v) {
-        const owner = this.owner;
-        let first = this.popoverContainer.firstElementChild;
-        while (first) {
-            const next = first.nextElementSibling;
-            owner.dispose(first);
-            first.remove();
-            first = next;
-        }
-        if (!v) {
-            return;
+    this.popoverContainer.updatePosition?.();
+  }
+  constructor(parent, options = {}) {
+    this.disposables = new AtomDisposableList();
+    this.removing = ce => {
+      if (this.cancel) {
+        ce?.preventDefault();
+        const c = this.cancel?.();
+        if (c?.then) {
+          c.then(() => {
+            this.renderer = void 0;
+            this.remove();
+          }, console.warn);
         }
-        if (v[xnodeSymbol]) {
-            this.owner.render(XNode.create("div", null,
-                " ",
-                v,
-                " "), this.popoverContainer, this.owner);
-        }
-        else {
-            this.popoverContainer.appendChild(v);
-        }
-        this.popoverContainer.updatePosition?.();
+      }
+    };
+    this.remove = () => {
+      const {
+        result
+      } = this.popover;
+      if (result === void 0) {
+        this.resultReject?.("canceled");
+      } else {
+        this.resultResolve?.(result);
+      }
+      this.disposables.dispose();
+      this.popover.remove();
+    };
+    const p1 = parent;
+    this.disposables.add(() => p1[existingPopup] = null);
+    if (parent instanceof AtomControl) {
+      this.owner = parent;
+      parent = this.owner.element;
+    } else {
+      this.owner = AtomControl.from(parent);
     }
-    constructor(parent, options = {}) {
-        this.disposables = new AtomDisposableList();
-        this.removing = (ce) => {
-            if (this.cancel) {
-                ce?.preventDefault();
-                const c = this.cancel?.();
-                if (c?.then) {
-                    c.then(() => {
-                        this.renderer = void 0;
-                        this.remove();
-                    }, console.warn);
-                }
-            }
-        };
-        this.remove = () => {
-            const { result } = this.popover;
-            if (result === void 0) {
-                this.resultReject?.("canceled");
-            }
-            else {
-                this.resultResolve?.(result);
-            }
-            this.disposables.dispose();
-            this.popover.remove();
-        };
-        const p1 = parent;
-        this.disposables.add(() => p1[existingPopup] = null);
-        if (parent instanceof AtomControl) {
-            this.owner = parent;
-            parent = this.owner.element;
-        }
-        else {
-            this.owner = AtomControl.from(parent);
-        }
-        const popover = this.popover = document.createElement("atom-pop-over");
-        this.popoverContainer = popover;
-        parent.appendChild(popover);
-        const { cancelToken, nodeFactory, dataFactory, closeOnClick = true, "anchor-left": anchorLeft, "anchor-right": anchorRight, "anchor-top": anchorTop, "anchor-bottom": anchorBottom } = options;
-        cancelToken?.registerForCancel(this.removing);
-        if (anchorLeft) {
-            popover.setAttribute("anchor-left", anchorLeft);
-        }
-        if (anchorRight) {
-            popover.setAttribute("anchor-right", anchorRight);
-        }
-        if (anchorTop) {
-            popover.setAttribute("anchor-top", anchorTop);
-        }
-        if (anchorBottom) {
-            popover.setAttribute("anchor-bottom", anchorBottom);
-        }
-        if (closeOnClick) {
-            popover.setAttribute("data-close-on-click", "1");
-        }
-        popover.addEventListener("removing", this.removing);
-        popover.addEventListener("removed", this.remove);
-        this.disposables.add(() => {
-            popover.removeEventListener("removed", this.remove);
-            popover.removeEventListener("removing", this.removing);
-        });
-        this.init ??= (data) => {
-            if (nodeFactory) {
-                this.renderer = nodeFactory(data);
-            }
-        };
-        const p = this.init?.(dataFactory?.());
-        if (p?.then) {
-            p.then(() => void 0, console.warn);
-        }
-        this.resultPromise = new Promise((resolve, reject) => {
-            this.resultResolve = resolve;
-            this.resultReject = reject;
-        });
-        this.resultPromise.catch(() => void 0);
+    const popover = this.popover = document.createElement("atom-pop-over");
+    this.popoverContainer = popover;
+    parent.appendChild(popover);
+    const {
+      cancelToken,
+      nodeFactory,
+      dataFactory,
+      closeOnClick = true,
+      "anchor-left": anchorLeft,
+      "anchor-right": anchorRight,
+      "anchor-top": anchorTop,
+      "anchor-bottom": anchorBottom
+    } = options;
+    cancelToken?.registerForCancel(this.removing);
+    if (anchorLeft) {
+      popover.setAttribute("anchor-left", anchorLeft);
+    }
+    if (anchorRight) {
+      popover.setAttribute("anchor-right", anchorRight);
+    }
+    if (anchorTop) {
+      popover.setAttribute("anchor-top", anchorTop);
+    }
+    if (anchorBottom) {
+      popover.setAttribute("anchor-bottom", anchorBottom);
     }
-    close(r) {
-        this.removed = true;
-        this.popover.result = r ?? null;
-        this.popover.remove();
+    if (closeOnClick) {
+      popover.setAttribute("data-close-on-click", "1");
     }
-    async cancel() {
-        this.removed = true;
-        delete this.popover.result;
-        this.popover.remove();
+    popover.addEventListener("removing", this.removing);
+    popover.addEventListener("removed", this.remove);
+    this.disposables.add(() => {
+      popover.removeEventListener("removed", this.remove);
+      popover.removeEventListener("removing", this.removing);
+    });
+    this.init ??= data => {
+      if (nodeFactory) {
+        this.renderer = nodeFactory(data);
+      }
+    };
+    const p = this.init?.(dataFactory?.());
+    if (p?.then) {
+      p.then(() => void 0, console.warn);
     }
+    this.resultPromise = new Promise((resolve, reject) => {
+      this.resultResolve = resolve;
+      this.resultReject = reject;
+    });
+    this.resultPromise.catch(() => void 0);
+  }
+  close(r) {
+    this.removed = true;
+    this.popover.result = r ?? null;
+    this.popover.remove();
+  }
+  async cancel() {
+    this.removed = true;
+    delete this.popover.result;
+    this.popover.remove();
+  }
 }
-customElements.define("atom-pop-over", AtomPopoverElement);
-//# sourceMappingURL=AtomPopover.js.map
+customElements.define("atom-pop-over", AtomPopoverElement);

package/dist-esm/basic/elements/getContainingBlock.js

@@ -1,37 +1,36 @@
-const getContainingBlock = (node) => {
-    if (!node || !node.parentElement) {
-        return document.body;
-    }
-    let start = node.parentElement;
-    while (start) {
-        const cs = getComputedStyle(start);
-        if (cs.filter !== "none") {
-            return start;
-        }
-        if (cs.backdropFilter !== "none") {
-            return start;
-        }
-        if (cs.transform !== "none") {
-            return start;
-        }
-        if (cs.perspective !== "none") {
-            return start;
-        }
-        if (/layout|paint|strict|content/i.test(cs.contain)) {
-            return start;
-        }
-        if (cs.containerType && cs.containerType !== "normal") {
-            return start;
-        }
-        if (/filter|transform/i.test(cs.willChange)) {
-            return start;
-        }
-        if (/auto/i.test(cs.contentVisibility)) {
-            return start;
-        }
-        start = start.parentElement;
-    }
+const getContainingBlock = node => {
+  if (!node || !node.parentElement) {
     return document.body;
+  }
+  let start = node.parentElement;
+  while (start) {
+    const cs = getComputedStyle(start);
+    if (cs.filter !== "none") {
+      return start;
+    }
+    if (cs.backdropFilter !== "none") {
+      return start;
+    }
+    if (cs.transform !== "none") {
+      return start;
+    }
+    if (cs.perspective !== "none") {
+      return start;
+    }
+    if (/layout|paint|strict|content/i.test(cs.contain)) {
+      return start;
+    }
+    if (cs.containerType && cs.containerType !== "normal") {
+      return start;
+    }
+    if (/filter|transform/i.test(cs.willChange)) {
+      return start;
+    }
+    if (/auto/i.test(cs.contentVisibility)) {
+      return start;
+    }
+    start = start.parentElement;
+  }
+  return document.body;
 };
-export default getContainingBlock;
-//# sourceMappingURL=getContainingBlock.js.map
+export default getContainingBlock;

package/dist-esm/basic/elements/relativeRect.js

@@ -1,24 +1,43 @@
 const getScreenRect = (e, cbr = e.getBoundingClientRect()) => {
-    const { left, top, height, width } = cbr;
-    const right = visualViewport.width - left - width;
-    const bottom = visualViewport.height - top - height;
-    return { left, top, right, bottom, height, width };
+  const {
+    left,
+    top,
+    height,
+    width
+  } = cbr;
+  const right = visualViewport.width - left - width;
+  const bottom = visualViewport.height - top - height;
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    height,
+    width
+  };
 };
 export function relativeRect(e, cb) {
-    const ebr = getScreenRect(e);
-    const cbr = getScreenRect(cb);
-    let left = ebr.left;
-    let top = ebr.top;
-    let bottom = ebr.bottom;
-    let right = ebr.right;
-    if (cb.offsetParent) {
-        left -= cbr.left;
-        top -= cbr.top;
-        bottom -= cbr.bottom;
-        right -= cbr.right;
-    }
-    const height = e.offsetHeight;
-    const width = e.offsetWidth;
-    return { left, top, bottom, right, width, height, e };
-}
-//# sourceMappingURL=relativeRect.js.map
+  const ebr = getScreenRect(e);
+  const cbr = getScreenRect(cb);
+  let left = ebr.left;
+  let top = ebr.top;
+  let bottom = ebr.bottom;
+  let right = ebr.right;
+  if (cb.offsetParent) {
+    left -= cbr.left;
+    top -= cbr.top;
+    bottom -= cbr.bottom;
+    right -= cbr.right;
+  }
+  const height = e.offsetHeight;
+  const width = e.offsetWidth;
+  return {
+    left,
+    top,
+    bottom,
+    right,
+    width,
+    height,
+    e
+  };
+}