@web-atoms/web-controls 2.6.4 → 2.6.6

package/dist-esm/basic/PinchZoomView.js

@@ -3,215 +3,237 @@ import Bind from "@web-atoms/core/dist/core/Bind.js";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import "./styles/pinch-zoom-view.global.css";
-const center = (ev) => {
-    const touch = ev.touches[0];
-    if (touch) {
-        return {
-            x: touch.clientX,
-            y: touch.clientY
-        };
-    }
+ESMPack.installStyleSheet(import.meta.resolve("./styles/pinch-zoom-view.global.css"));
+const center = ev => {
+  const touch = ev.touches[0];
+  if (touch) {
     return {
-        x: 0,
-        y: 0
+      x: touch.clientX,
+      y: touch.clientY
     };
+  }
+  return {
+    x: 0,
+    y: 0
+  };
 };
 const distance = (first, second) => {
-    return Math.hypot(first.pageX - second.pageX, first.pageY - second.pageY);
+  return Math.hypot(first.pageX - second.pageX, first.pageY - second.pageY);
 };
 export default class PinchZoomView extends AtomControl {
-    preCreate() {
-        this.element.title = "Use mouse wheel to zoom";
+  preCreate() {
+    this.element.title = "Use mouse wheel to zoom";
+    this.loading = false;
+    this.zoom = {
+      scale: 0,
+      anchorX: 0,
+      anchorY: 0,
+      x: 0,
+      y: 0
+    };
+    this.element.dataset.pinchZoom = "true";
+    this.element.draggable = false;
+    this.render(XNode.create("div", null, XNode.create("div", {
+      class: "image-container"
+    }, XNode.create("img", {
+      src: Bind.oneWay(() => this.getSource(this.source)),
+      "style-opacity": Bind.oneWay(() => this.loading ? "0.3" : "1"),
+      "event-load": () => {
         this.loading = false;
-        this.zoom = {
-            scale: 0,
-            anchorX: 0,
-            anchorY: 0,
-            x: 0,
-            y: 0
-        };
-        this.element.dataset.pinchZoom = "true";
-        this.element.draggable = false;
-        this.render(XNode.create("div", null,
-            XNode.create("div", { class: "image-container" },
-                XNode.create("img", { src: Bind.oneWay(() => this.getSource(this.source)), "style-opacity": Bind.oneWay(() => this.loading ? "0.3" : "1"), "event-load": () => {
-                        this.loading = false;
-                        this.updateZoom(this.zoom);
-                    } })),
-            XNode.create("i", { class: Bind.oneWay(() => this.loading ? "spinner fa-duotone fa-spinner fa-spin" : "hide") }),
-            XNode.create("i", { "event-click": () => this.updateZoom(), class: Bind.oneWay(() => this.zoom.scale ? "scale" : "hide"), title: "Display entire image" })));
-        this.imageContainer = this.element.firstElementChild;
-        this.image = this.imageContainer.firstElementChild;
-        const scrollView = this.element;
-        let previous;
-        let touchMoveDisposable;
-        let touchEndDisposable;
-        this.bindEvent(scrollView, "touchstart", (evs) => {
-            previous = center(evs);
-            let previousDistance = undefined;
-            touchMoveDisposable ??= this.bindEvent(scrollView, "touchmove", (ev) => {
-                let { x, y, anchorX, anchorY, scale } = this.zoom;
-                if (ev.touches.length === 2) {
-                    ev.preventDefault();
-                    ev.stopImmediatePropagation();
-                    const rect = this.element.getBoundingClientRect();
-                    const first = ev.touches[0];
-                    const second = ev.touches[1];
-                    anchorX = ((first.clientX + second.clientX) / 2) - rect.left;
-                    anchorY = ((first.clientY + second.clientY) / 2) - rect.top;
-                    const newScale = distance(first, second);
-                    if (previousDistance === void 0) {
-                        previousDistance = newScale;
-                        return;
-                    }
-                    if (previousDistance === newScale) {
-                        return;
-                    }
-                    scale += newScale - previousDistance;
-                    previousDistance = newScale;
-                    this.updateZoom({
-                        anchorX,
-                        anchorY,
-                        x,
-                        y,
-                        scale
-                    });
-                    return;
-                }
-                if (!previous) {
-                    return;
-                }
-                const cp = center(ev);
-                x += (cp.x - previous.x);
-                y += (cp.y - previous.y);
-                previous = cp;
-                this.updateZoom({
-                    anchorX,
-                    anchorY,
-                    x,
-                    y,
-                    scale
-                });
-            });
-            touchEndDisposable ??= this.bindEvent(scrollView, "touchend", (ev) => {
-                touchMoveDisposable?.dispose();
-                touchEndDisposable?.dispose();
-                touchMoveDisposable = undefined;
-                touchEndDisposable = undefined;
-                previousDistance = undefined;
-            });
-        });
-        let mouseMoveDisposable;
-        let mouseUpDisposable;
-        this.bindEvent(scrollView, "dragstart", (ev) => {
-            ev.preventDefault();
-            ev.stopImmediatePropagation();
-        });
-        this.bindEvent(scrollView, "mousedown", (ev) => {
-            this.element.dataset.state = "grabbing";
-            previous = {
-                x: ev.clientX,
-                y: ev.clientY
-            };
-            mouseMoveDisposable ??= this.bindEvent(scrollView, "mousemove", (e) => {
-                e.preventDefault();
-                e.stopImmediatePropagation?.();
-                const { anchorX, anchorY, scale } = this.zoom;
-                let { x, y } = this.zoom;
-                const cp = { x: e.clientX, y: e.clientY };
-                x += (cp.x - previous.x);
-                y += (cp.y - previous.y);
-                previous = cp;
-                this.updateZoom({
-                    anchorX,
-                    anchorY,
-                    x,
-                    y,
-                    scale
-                });
-            });
-            mouseUpDisposable ??= this.bindEvent(scrollView, "mouseup", (e) => {
-                e.preventDefault();
-                e.stopImmediatePropagation?.();
-                this.element.dataset.state = "";
-                previous = null;
-                mouseMoveDisposable.dispose();
-                mouseUpDisposable.dispose();
-                mouseMoveDisposable = undefined;
-                mouseUpDisposable = undefined;
-            });
+        this.updateZoom(this.zoom);
+      }
+    })), XNode.create("i", {
+      class: Bind.oneWay(() => this.loading ? "spinner fa-duotone fa-spinner fa-spin" : "hide")
+    }), XNode.create("i", {
+      "event-click": () => this.updateZoom(),
+      class: Bind.oneWay(() => this.zoom.scale ? "scale" : "hide"),
+      title: "Display entire image"
+    })));
+    this.imageContainer = this.element.firstElementChild;
+    this.image = this.imageContainer.firstElementChild;
+    const scrollView = this.element;
+    let previous;
+    let touchMoveDisposable;
+    let touchEndDisposable;
+    this.bindEvent(scrollView, "touchstart", evs => {
+      previous = center(evs);
+      let previousDistance = undefined;
+      touchMoveDisposable ??= this.bindEvent(scrollView, "touchmove", ev => {
+        let {
+          x,
+          y,
+          anchorX,
+          anchorY,
+          scale
+        } = this.zoom;
+        if (ev.touches.length === 2) {
+          ev.preventDefault();
+          ev.stopImmediatePropagation();
+          const rect = this.element.getBoundingClientRect();
+          const first = ev.touches[0];
+          const second = ev.touches[1];
+          anchorX = (first.clientX + second.clientX) / 2 - rect.left;
+          anchorY = (first.clientY + second.clientY) / 2 - rect.top;
+          const newScale = distance(first, second);
+          if (previousDistance === void 0) {
+            previousDistance = newScale;
+            return;
+          }
+          if (previousDistance === newScale) {
+            return;
+          }
+          scale += newScale - previousDistance;
+          previousDistance = newScale;
+          this.updateZoom({
+            anchorX,
+            anchorY,
+            x,
+            y,
+            scale
+          });
+          return;
+        }
+        if (!previous) {
+          return;
+        }
+        const cp = center(ev);
+        x += cp.x - previous.x;
+        y += cp.y - previous.y;
+        previous = cp;
+        this.updateZoom({
+          anchorX,
+          anchorY,
+          x,
+          y,
+          scale
         });
-        this.bindEvent(scrollView, "wheel", (ev) => {
-            const target = ev.currentTarget;
-            ev.preventDefault();
-            ev.stopImmediatePropagation?.();
-            const newScale = this.zoom.scale - (ev.deltaY < 0 ? -50 : 50);
-            const anchorX = ev.offsetX;
-            const anchorY = ev.offsetY;
-            const { x, y } = this.zoom;
-            this.updateZoom({
-                anchorX,
-                anchorY,
-                x,
-                y,
-                scale: newScale < 0 ? 0 : newScale
-            });
-        }, undefined, {
-            passive: false
+      });
+      touchEndDisposable ??= this.bindEvent(scrollView, "touchend", ev => {
+        touchMoveDisposable?.dispose();
+        touchEndDisposable?.dispose();
+        touchMoveDisposable = undefined;
+        touchEndDisposable = undefined;
+        previousDistance = undefined;
+      });
+    });
+    let mouseMoveDisposable;
+    let mouseUpDisposable;
+    this.bindEvent(scrollView, "dragstart", ev => {
+      ev.preventDefault();
+      ev.stopImmediatePropagation();
+    });
+    this.bindEvent(scrollView, "mousedown", ev => {
+      this.element.dataset.state = "grabbing";
+      previous = {
+        x: ev.clientX,
+        y: ev.clientY
+      };
+      mouseMoveDisposable ??= this.bindEvent(scrollView, "mousemove", e => {
+        e.preventDefault();
+        e.stopImmediatePropagation?.();
+        const {
+          anchorX,
+          anchorY,
+          scale
+        } = this.zoom;
+        let {
+          x,
+          y
+        } = this.zoom;
+        const cp = {
+          x: e.clientX,
+          y: e.clientY
+        };
+        x += cp.x - previous.x;
+        y += cp.y - previous.y;
+        previous = cp;
+        this.updateZoom({
+          anchorX,
+          anchorY,
+          x,
+          y,
+          scale
         });
+      });
+      mouseUpDisposable ??= this.bindEvent(scrollView, "mouseup", e => {
+        e.preventDefault();
+        e.stopImmediatePropagation?.();
+        this.element.dataset.state = "";
+        previous = null;
+        mouseMoveDisposable.dispose();
+        mouseUpDisposable.dispose();
+        mouseMoveDisposable = undefined;
+        mouseUpDisposable = undefined;
+      });
+    });
+    this.bindEvent(scrollView, "wheel", ev => {
+      const target = ev.currentTarget;
+      ev.preventDefault();
+      ev.stopImmediatePropagation?.();
+      const newScale = this.zoom.scale - (ev.deltaY < 0 ? -50 : 50);
+      const anchorX = ev.offsetX;
+      const anchorY = ev.offsetY;
+      const {
+        x,
+        y
+      } = this.zoom;
+      this.updateZoom({
+        anchorX,
+        anchorY,
+        x,
+        y,
+        scale: newScale < 0 ? 0 : newScale
+      });
+    }, undefined, {
+      passive: false
+    });
+  }
+  getSource(text) {
+    if (text) {
+      this.loading = true;
     }
-    getSource(text) {
-        if (text) {
-            this.loading = true;
-        }
-        return text;
+    return text;
+  }
+  updateZoom(zoom = {
+    x: 0,
+    y: 0,
+    anchorX: 0,
+    anchorY: 0,
+    scale: 0
+  }) {
+    const {
+      anchorX,
+      anchorY,
+      x,
+      y
+    } = zoom;
+    let {
+      scale
+    } = zoom;
+    this.zoom = zoom;
+    const image = this.image;
+    if (!image.naturalHeight) {
+      return;
     }
-    updateZoom(zoom = {
-        x: 0,
-        y: 0,
-        anchorX: 0,
-        anchorY: 0,
-        scale: 0
-    }) {
-        const { anchorX, anchorY, x, y } = zoom;
-        let { scale } = zoom;
-        this.zoom = zoom;
-        const image = this.image;
-        if (!image.naturalHeight) {
-            return;
-        }
-        const maxHeight = this.element.clientWidth > this.element.clientHeight;
-        const s = maxHeight
-            ? this.element.clientWidth / image.naturalWidth
-            : this.element.clientHeight / image.naturalHeight;
-        if (scale <= 0) {
-            scale = 0;
-        }
-        const newWidth = (this.element.clientWidth + scale) + "px";
-        const newHeight = (this.element.clientHeight + scale) + "px";
-        this.image.style.maxWidth = this.element.clientWidth + "px";
-        this.image.style.maxHeight = this.element.clientHeight + "px";
-        if (scale <= 0) {
-            this.imageContainer.style.transform = "";
-            return;
-        }
-        const clientWidth = this.element.clientWidth;
-        const scaleFactor = (clientWidth + scale) / clientWidth;
-        this.imageContainer.style.transformOrigin = `${anchorX}px ${anchorY}`;
-        this.imageContainer.style.transform = `translate(${x}px, ${y}px) scale(${scaleFactor})`;
+    const maxHeight = this.element.clientWidth > this.element.clientHeight;
+    const s = maxHeight ? this.element.clientWidth / image.naturalWidth : this.element.clientHeight / image.naturalHeight;
+    if (scale <= 0) {
+      scale = 0;
+    }
+    const newWidth = this.element.clientWidth + scale + "px";
+    const newHeight = this.element.clientHeight + scale + "px";
+    this.image.style.maxWidth = this.element.clientWidth + "px";
+    this.image.style.maxHeight = this.element.clientHeight + "px";
+    if (scale <= 0) {
+      this.imageContainer.style.transform = "";
+      return;
     }
+    const clientWidth = this.element.clientWidth;
+    const scaleFactor = (clientWidth + scale) / clientWidth;
+    this.imageContainer.style.transformOrigin = `${anchorX}px ${anchorY}`;
+    this.imageContainer.style.transform = `translate(${x}px, ${y}px) scale(${scaleFactor})`;
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], PinchZoomView.prototype, "zoom", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], PinchZoomView.prototype, "source", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Boolean)
-], PinchZoomView.prototype, "loading", void 0);
-//# sourceMappingURL=PinchZoomView.js.map
+__decorate([BindableProperty, __metadata("design:type", Object)], PinchZoomView.prototype, "zoom", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], PinchZoomView.prototype, "source", void 0);
+__decorate([BindableProperty, __metadata("design:type", Boolean)], PinchZoomView.prototype, "loading", void 0);

package/dist-esm/basic/PopupButton.js

@@ -1,21 +1,44 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-import "./styles/popup-button.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/popup-button.global.css"));
 import InlinePopupButton from "./InlinePopupButton.js";
-export function MenuItem({ label, icon, eventClick, href, target, ...others }) {
-    if (href) {
-        return XNode.create("a", { "data-menu-item": "menu-item", href: href, target: target, ...others },
-            icon && XNode.create("i", { "data-element": "icon", class: icon }),
-            label && XNode.create("span", { "data-element": "label", text: label }));
-    }
-    return XNode.create("div", { "data-menu-item": "menu-item", eventClick: eventClick, ...others },
-        icon && XNode.create("i", { "data-element": "icon", class: icon }),
-        label && XNode.create("span", { "data-element": "label", text: label }));
+export function MenuItem({
+  label,
+  icon,
+  eventClick,
+  href,
+  target,
+  ...others
+}) {
+  if (href) {
+    return XNode.create("a", {
+      "data-menu-item": "menu-item",
+      href: href,
+      target: target,
+      ...others
+    }, icon && XNode.create("i", {
+      "data-element": "icon",
+      class: icon
+    }), label && XNode.create("span", {
+      "data-element": "label",
+      text: label
+    }));
+  }
+  return XNode.create("div", {
+    "data-menu-item": "menu-item",
+    eventClick: eventClick,
+    ...others
+  }, icon && XNode.create("i", {
+    "data-element": "icon",
+    class: icon
+  }), label && XNode.create("span", {
+    "data-element": "label",
+    text: label
+  }));
 }
 export default InlinePopupButton;
 export function PopupActionButton(a, ...nodes) {
-    a.closeOnClick ??= true;
-    a["anchor-top"] = "parent-bottom";
-    a["anchor-right"] = "parent-left";
-    return InlinePopupButton(a, ...nodes);
-}
-//# sourceMappingURL=PopupButton.js.map
+  a.closeOnClick ??= true;
+  a["anchor-top"] = "parent-bottom";
+  a["anchor-right"] = "parent-left";
+  return InlinePopupButton(a, ...nodes);
+}

package/dist-esm/basic/PopupMenu.js

@@ -1,6 +1,5 @@
 import InlinePopupButton from "./InlinePopupButton.js";
 export default function PopupMenu(a, ...nodes) {
-    a.closeOnClick ??= true;
-    return InlinePopupButton(a, ...nodes);
-}
-//# sourceMappingURL=PopupMenu.js.map
+  a.closeOnClick ??= true;
+  return InlinePopupButton(a, ...nodes);
+}

package/dist-esm/basic/RadioButtonList.js

@@ -1,28 +1,38 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import AtomRepeater from "./AtomRepeater.js";
-import "./styles/radio-button-list.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/radio-button-list.global.css"));
 export default class RadioButtonList extends AtomRepeater {
-    preCreate() {
-        super.preCreate();
-        this.valuePath = (item) => item?.value ?? item;
-        this.bindEvent(this.element, "itemClick", (e) => {
-            const s = this.selectedItems;
-            if (!s) {
-                return;
-            }
-            const item = e.detail;
-            const old = this.selectedItem;
-            if (old) {
-                this.element.dispatchEvent(new CustomEvent("itemDeselect", { detail: old, bubbles: false }));
-            }
-            this.selectedItem = item;
-            this.element.dispatchEvent(new CustomEvent("itemSelect", { detail: item, bubbles: false }));
-        });
-        this.element.dataset.radioButtonList = "radio-button-list";
-        this.itemRenderer = (item) => XNode.create("div", { "data-item-type": "radio" },
-            XNode.create("i", { class: "far fa-dot-circle" }),
-            XNode.create("i", { class: "far fa-circle" }),
-            XNode.create("span", { text: item.label }));
-    }
-}
-//# sourceMappingURL=RadioButtonList.js.map
+  preCreate() {
+    super.preCreate();
+    this.valuePath = item => item?.value ?? item;
+    this.bindEvent(this.element, "itemClick", e => {
+      const s = this.selectedItems;
+      if (!s) {
+        return;
+      }
+      const item = e.detail;
+      const old = this.selectedItem;
+      if (old) {
+        this.element.dispatchEvent(new CustomEvent("itemDeselect", {
+          detail: old,
+          bubbles: false
+        }));
+      }
+      this.selectedItem = item;
+      this.element.dispatchEvent(new CustomEvent("itemSelect", {
+        detail: item,
+        bubbles: false
+      }));
+    });
+    this.element.dataset.radioButtonList = "radio-button-list";
+    this.itemRenderer = item => XNode.create("div", {
+      "data-item-type": "radio"
+    }, XNode.create("i", {
+      class: "far fa-dot-circle"
+    }), XNode.create("i", {
+      class: "far fa-circle"
+    }), XNode.create("span", {
+      text: item.label
+    }));
+  }
+}

package/dist-esm/basic/RefreshLock.js

@@ -1,45 +1,44 @@
 export default class RefreshLock {
-    constructor(app, e) {
-        this.app = app;
-        this.map = new Map();
-        this.begin = (ce) => {
-            if (ce.target === ce.currentTarget) {
-                return;
-            }
-            const previous = this.promise;
-            this.promise = this.setupNew(previous, ce.detail.id);
-            this.app.runAsync(() => this.promise);
-        };
-        this.end = (ce) => {
-            if (ce.target === ce.currentTarget) {
-                return;
-            }
-            const resolver = this.map.get(ce.detail.id);
-            resolver?.();
-        };
-        e.addEventListener("refreshLockBegin", this.begin);
-        e.addEventListener("refreshLockEnd", this.end);
-        this.dispose = () => {
-            e.removeEventListener("refreshLockBegin", this.begin);
-            e.removeEventListener("refreshLockEnd", this.begin);
-        };
+  constructor(app, e) {
+    this.app = app;
+    this.map = new Map();
+    this.begin = ce => {
+      if (ce.target === ce.currentTarget) {
+        return;
+      }
+      const previous = this.promise;
+      this.promise = this.setupNew(previous, ce.detail.id);
+      this.app.runAsync(() => this.promise);
+    };
+    this.end = ce => {
+      if (ce.target === ce.currentTarget) {
+        return;
+      }
+      const resolver = this.map.get(ce.detail.id);
+      resolver?.();
+    };
+    e.addEventListener("refreshLockBegin", this.begin);
+    e.addEventListener("refreshLockEnd", this.end);
+    this.dispose = () => {
+      e.removeEventListener("refreshLockBegin", this.begin);
+      e.removeEventListener("refreshLockEnd", this.begin);
+    };
+  }
+  queue(fx) {
+    if (this.promise) {
+      this.promise.then(fx);
+      return;
     }
-    queue(fx) {
-        if (this.promise) {
-            this.promise.then(fx);
-            return;
-        }
-        fx();
+    fx();
+  }
+  async setupNew(previous, id) {
+    if (previous) {
+      await previous;
     }
-    async setupNew(previous, id) {
-        if (previous) {
-            await previous;
-        }
-        await new Promise((resolve, reject) => {
-            this.map.set(id, resolve);
-        });
-        this.map.delete(id);
-        this.promise = null;
-    }
-}
-//# sourceMappingURL=RefreshLock.js.map
+    await new Promise((resolve, reject) => {
+      this.map.set(id, resolve);
+    });
+    this.map.delete(id);
+    this.promise = null;
+  }
+}