@web-atoms/core 2.6.21 → 2.6.25

package/dist-esm/web/services/PopupWindow.js

@@ -6,270 +6,289 @@ import sleep from "../../core/sleep.js";
 import { CancelToken } from "../../core/types.js";
 import { AtomControl } from "../controls/AtomControl.js";
 import { ChildEnumerator } from "../core/AtomUI.js";
-import "./PopupWindow.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./PopupWindow.global.css"));
 let popupService;
 const loadPopupService = async () => {
-    if (popupService) {
-        return popupService;
-    }
-    return popupService = (await (import("./PopupService.js"))).default;
+  if (popupService) {
+    return popupService;
+  }
+  return popupService = (await import("./PopupService.js")).default;
 };
-const focus = (popup) => {
-    const element = popup.element;
-    if (!element) {
-        return;
+const focus = popup => {
+  const element = popup.element;
+  if (!element) {
+    return;
+  }
+  const host = element.querySelector(`[data-window-element="title"]`) ?? element.querySelector(`[data-window-element="action-bar"]`);
+  if (host) {
+    popup.setupDragging(host);
+  }
+  const anyAutofocus = element.querySelector(`*[autofocus]`);
+  if (!anyAutofocus) {
+    const cb = element.querySelector(".popup-close-button");
+    if (cb) {
+      cb.focus();
     }
-    const host = element.querySelector(`[data-window-element="title"]`)
-        ?? element.querySelector(`[data-window-element="action-bar"]`);
-    if (host) {
-        popup.setupDragging(host);
-    }
-    const anyAutofocus = element.querySelector(`*[autofocus]`);
-    if (!anyAutofocus) {
-        const cb = element.querySelector(".popup-close-button");
-        if (cb) {
-            cb.focus();
-        }
-        return;
-    }
-    anyAutofocus.focus?.();
+    return;
+  }
+  anyAutofocus.focus?.();
 };
 export default class PopupWindow extends AtomControl {
-    constructor() {
-        super(...arguments);
-        this.initialized = false;
+  constructor() {
+    super(...arguments);
+    this.initialized = false;
+  }
+  static async showWindow(window, options) {
+    if (arguments.length <= 1) {
+      options = arguments[0];
+      window = this;
     }
-    static async showWindow(window, options) {
-        if (arguments.length <= 1) {
-            options = arguments[0];
-            window = this;
-        }
-        await sleep(1);
-        const PS = await loadPopupService();
-        return PS.showWindow(PS.lastTarget, window, options);
+    await sleep(1);
+    const PS = await loadPopupService();
+    return PS.showWindow(PS.lastTarget, window, options);
+  }
+  static async showModal(window, options) {
+    if (arguments.length <= 1) {
+      options = arguments[0];
+      window = this;
     }
-    static async showModal(window, options) {
-        if (arguments.length <= 1) {
-            options = arguments[0];
-            window = this;
-        }
-        options ??= {};
-        options.modal ??= true;
-        await sleep(1);
-        const PS = await loadPopupService();
-        return PS.showWindow(PS.lastTarget, window, options);
+    options ??= {};
+    options.modal ??= true;
+    await sleep(1);
+    const PS = await loadPopupService();
+    return PS.showWindow(PS.lastTarget, window, options);
+  }
+  onPropertyChanged(name) {
+    super.onPropertyChanged(name);
+    switch (name) {
+      case "iconRenderer":
+        this.recreate(name, "icon");
+        break;
+      case "actionBarRenderer":
+        this.recreate(name, "action-bar");
+        break;
+      case "footerRenderer":
+        this.recreate(name, "footer");
+        break;
+      case "titleRenderer":
+        this.recreate(name, "title");
+        break;
+      case "headerRenderer":
+        this.recreate(name, "header");
+        break;
+      case "closeButtonRenderer":
+        this.recreate(name, "close");
+        break;
     }
-    onPropertyChanged(name) {
-        super.onPropertyChanged(name);
-        switch (name) {
-            case "iconRenderer":
-                this.recreate(name, "icon");
-                break;
-            case "actionBarRenderer":
-                this.recreate(name, "action-bar");
-                break;
-            case "footerRenderer":
-                this.recreate(name, "footer");
-                break;
-            case "titleRenderer":
-                this.recreate(name, "title");
-                break;
-            case "headerRenderer":
-                this.recreate(name, "header");
-                break;
-            case "closeButtonRenderer":
-                this.recreate(name, "close");
-                break;
-        }
+  }
+  init() {}
+  async requestCancel() {
+    if (this.closeWarning) {
+      if (!(await ConfirmPopup.confirm({
+        message: this.closeWarning
+      }))) {
+        return;
+      }
     }
-    init() {
+    this.cancel();
+  }
+  recreate(renderer, name) {
+    const node = this[renderer]?.() ?? undefined;
+    for (const e of ChildEnumerator.enumerate(this.element)) {
+      if (e.getAttribute("data-window-element") === name) {
+        this.dispose(e);
+        e.remove();
+        break;
+      }
     }
-    async requestCancel() {
-        if (this.closeWarning) {
-            if (!await ConfirmPopup.confirm({
-                message: this.closeWarning
-            })) {
-                return;
-            }
-        }
-        this.cancel();
+    if (node) {
+      const na = node.attributes ??= {};
+      na["data-window-element"] = name;
+      super.render(XNode.create("div", null, node));
+      return this.element.querySelector(`[data-window-element="${name}"]`);
     }
-    recreate(renderer, name) {
-        const node = this[renderer]?.() ?? undefined;
-        for (const e of ChildEnumerator.enumerate(this.element)) {
-            if (e.getAttribute("data-window-element") === name) {
-                this.dispose(e);
-                e.remove();
-                break;
-            }
-        }
-        if (node) {
-            const na = node.attributes ??= {};
-            na["data-window-element"] = name;
-            super.render(XNode.create("div", null, node));
-            return this.element.querySelector(`[data-window-element="${name}"]`);
-        }
-        return null;
+    return null;
+  }
+  rendererChanged() {
+    for (const content of ChildEnumerator.where(this.element, e => e.getAttribute("data-window-element") === "content")) {
+      this.dispose(content);
+      content.remove();
     }
-    rendererChanged() {
-        for (const content of ChildEnumerator.where(this.element, (e) => e.getAttribute("data-window-element") === "content")) {
-            this.dispose(content);
-            content.remove();
-        }
-        const r = this.renderer;
-        if (!r) {
-            return;
-        }
-        delete this.render;
-        this.render(r);
+    const r = this.renderer;
+    if (!r) {
+      return;
+    }
+    delete this.render;
+    this.render(r);
+  }
+  preCreate() {
+    this.title = null;
+    this.viewModelTitle = null;
+    this.element.setAttribute("not-ready", "1");
+    const c = new CancelToken();
+    this.cancelToken = c;
+    this.registerDisposable({
+      dispose() {
+        c.cancel();
+      }
+    });
+    const handler = e => {
+      if (e.key === "Escape") {
+        this.app.runAsync(() => this.requestCancel());
+        e.preventDefault();
+        return;
+      }
+    };
+    this.bindEvent(this.element, "keydown", handler);
+    this.element.setAttribute("data-popup-window", "popup-window");
+    const p = this.element;
+    this.bindEvent(this.element, "popupReady", e => {
+      if (e.defaultPrevented) {
+        return;
+      }
+      p.setAttribute("data-ready", "true");
+      const parent = p.offsetParent ?? document.body;
+      const left = `${(parent.offsetWidth - p.offsetWidth) / 2}px`;
+      const top = `${(parent.offsetHeight - p.offsetHeight) / 2}px`;
+      p.style.left = left;
+      p.style.top = top;
+      p.removeAttribute("not-ready");
+    });
+  }
+  render(node, e, creator) {
+    if (e || node?.attributes?.["data-window-element"]) {
+      super.render(node, e, creator);
+      return;
     }
-    preCreate() {
-        this.title = null;
-        this.viewModelTitle = null;
-        this.element.setAttribute("not-ready", "1");
-        const c = new CancelToken();
-        this.cancelToken = c;
-        this.registerDisposable({
-            dispose() {
-                c.cancel();
-            }
-        });
-        const handler = (e) => {
-            if (e.key === "Escape") {
-                this.app.runAsync(() => this.requestCancel());
-                e.preventDefault();
-                return;
-            }
-        };
-        this.bindEvent(this.element, "keydown", handler);
-        this.element.setAttribute("data-popup-window", "popup-window");
-        const p = this.element;
-        this.bindEvent(this.element, "popupReady", (e) => {
-            if (e.defaultPrevented) {
-                return;
-            }
-            p.setAttribute("data-ready", "true");
-            const parent = (p.offsetParent ?? document.body);
-            const left = `${(parent.offsetWidth - p.offsetWidth) / 2}px`;
-            const top = `${(parent.offsetHeight - p.offsetHeight) / 2}px`;
-            p.style.left = left;
-            p.style.top = top;
-            p.removeAttribute("not-ready");
-        });
+    this.render = super.render;
+    this.titleRenderer ??= () => XNode.create("div", {
+      class: "title-text",
+      text: Bind.oneWay(() => this.title || this.viewModelTitle)
+    });
+    this.closeButtonRenderer ??= () => XNode.create("button", {
+      class: "popup-close-button",
+      text: "x",
+      eventClick: Bind.event(() => this.requestCancel())
+    });
+    this.actionBarRenderer ??= () => XNode.create("div", null);
+    const a = node.attributes ??= {};
+    a["data-window-content"] = "window-content";
+    a["data-window-element"] = "content";
+    const extracted = this.extractControlProperties(node);
+    super.render(XNode.create("div", {
+      viewModelTitle: Bind.oneWay(() => this.viewModel.title),
+      ...extracted
+    }, node), e, creator);
+    if (!this.initialized) {
+      this.initialized = true;
+      this.runAfterInit(() => {
+        setTimeout(focus, 100, this);
+      });
     }
-    render(node, e, creator) {
-        if (e || node?.attributes?.["data-window-element"]) {
-            super.render(node, e, creator);
-            return;
+  }
+  setupDragging(tp) {
+    this.bindEvent(tp, "mousedown", startEvent => {
+      if (startEvent.target.tagName === "BUTTON") {
+        return;
+      }
+      startEvent.preventDefault();
+      const disposables = [];
+      const element = this.element;
+      const offset = {
+        x: element.offsetLeft,
+        y: element.offsetTop
+      };
+      this.element.dataset.dragging = "true";
+      const rect = {
+        x: startEvent.clientX,
+        y: startEvent.clientY
+      };
+      const cursor = tp.style.cursor;
+      tp.style.cursor = "move";
+      disposables.push(this.bindEvent(document.body, "mousemove", moveEvent => {
+        const {
+          clientX,
+          clientY
+        } = moveEvent;
+        const dx = clientX - rect.x;
+        const dy = clientY - rect.y;
+        const finalX = offset.x + dx;
+        const finalY = offset.y + dy;
+        if (finalX < 5 || finalY < 5) {
+          return;
         }
-        this.render = super.render;
-        this.titleRenderer ??= () => XNode.create("div", { class: "title-text", text: Bind.oneWay(() => this.title || this.viewModelTitle) });
-        this.closeButtonRenderer ??= () => XNode.create("button", { class: "popup-close-button", text: "x", eventClick: Bind.event(() => this.requestCancel()) });
-        this.actionBarRenderer ??= () => XNode.create("div", null);
-        const a = node.attributes ??= {};
-        a["data-window-content"] = "window-content";
-        a["data-window-element"] = "content";
-        const extracted = this.extractControlProperties(node);
-        super.render(XNode.create("div", { viewModelTitle: Bind.oneWay(() => this.viewModel.title), ...extracted }, node), e, creator);
-        if (!this.initialized) {
-            this.initialized = true;
-            this.runAfterInit(() => {
-                setTimeout(focus, 100, this);
-            });
+        offset.x = finalX;
+        offset.y = finalY;
+        this.element.style.left = offset.x + "px";
+        this.element.style.top = offset.y + "px";
+        rect.x = clientX;
+        rect.y = clientY;
+      }));
+      disposables.push(this.bindEvent(document.body, "mouseup", endEvent => {
+        tp.style.cursor = cursor;
+        this.element.removeAttribute("data-dragging");
+        for (const iterator of disposables) {
+          iterator.dispose();
         }
-    }
-    setupDragging(tp) {
-        this.bindEvent(tp, "mousedown", (startEvent) => {
-            if (startEvent.target.tagName === "BUTTON") {
-                return;
-            }
-            startEvent.preventDefault();
-            const disposables = [];
-            const element = this.element;
-            const offset = { x: element.offsetLeft, y: element.offsetTop };
-            this.element.dataset.dragging = "true";
-            const rect = { x: startEvent.clientX, y: startEvent.clientY };
-            const cursor = tp.style.cursor;
-            tp.style.cursor = "move";
-            disposables.push(this.bindEvent(document.body, "mousemove", (moveEvent) => {
-                const { clientX, clientY } = moveEvent;
-                const dx = clientX - rect.x;
-                const dy = clientY - rect.y;
-                const finalX = offset.x + dx;
-                const finalY = offset.y + dy;
-                if (finalX < 5 || finalY < 5) {
-                    return;
-                }
-                offset.x = finalX;
-                offset.y = finalY;
-                this.element.style.left = offset.x + "px";
-                this.element.style.top = offset.y + "px";
-                rect.x = clientX;
-                rect.y = clientY;
-            }));
-            disposables.push(this.bindEvent(document.body, "mouseup", (endEvent) => {
-                tp.style.cursor = cursor;
-                this.element.removeAttribute("data-dragging");
-                for (const iterator of disposables) {
-                    iterator.dispose();
-                }
-            }));
-        });
-    }
+      }));
+    });
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], PopupWindow.prototype, "title", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], PopupWindow.prototype, "titleRenderer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], PopupWindow.prototype, "closeButtonRenderer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], PopupWindow.prototype, "footerRenderer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], PopupWindow.prototype, "headerRenderer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], PopupWindow.prototype, "iconRenderer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], PopupWindow.prototype, "actionBarRenderer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], PopupWindow.prototype, "closeWarning", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], PopupWindow.prototype, "title", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], PopupWindow.prototype, "titleRenderer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], PopupWindow.prototype, "closeButtonRenderer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], PopupWindow.prototype, "footerRenderer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], PopupWindow.prototype, "headerRenderer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], PopupWindow.prototype, "iconRenderer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], PopupWindow.prototype, "actionBarRenderer", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], PopupWindow.prototype, "closeWarning", void 0);
 delete PopupWindow.prototype.init;
 export class ConfirmPopup extends PopupWindow {
-    static async confirm({ message, title = "Confirm", yesLabel = "Yes", noLabel = "No", cancelLabel = null }) {
-        const PS = await loadPopupService();
-        return PS.confirm({ title, message, yesLabel, noLabel, cancelLabel });
-    }
-    preCreate() {
-        super.preCreate();
-        this.yesLabel = "Yes";
-        this.noLabel = "No";
-        this.cancelLabel = null;
-        this.element.setAttribute("data-confirm-popup", "confirm-popup");
-        this.footerRenderer = () => XNode.create("div", null,
-            XNode.create("button", { class: "yes", autofocus: true, text: Bind.oneWay(() => this.yesLabel), eventClick: () => this.close(true), "style-display": Bind.oneWay(() => !!this.yesLabel) }),
-            XNode.create("button", { class: "no", text: Bind.oneWay(() => this.noLabel), eventClick: () => this.close(false), "style-display": Bind.oneWay(() => !!this.noLabel) }),
-            XNode.create("button", { class: "cancel", text: Bind.oneWay(() => this.cancelLabel), eventClick: () => this.requestCancel(), "style-display": Bind.oneWay(() => !!this.cancelLabel) }));
-        this.closeButtonRenderer = () => XNode.create("div", { "style-display": "none" });
-    }
-    requestCancel() {
-        this.cancel();
-        return Promise.resolve();
-    }
-}
-//# sourceMappingURL=PopupWindow.js.map
+  static async confirm({
+    message,
+    title = "Confirm",
+    yesLabel = "Yes",
+    noLabel = "No",
+    cancelLabel = null
+  }) {
+    const PS = await loadPopupService();
+    return PS.confirm({
+      title,
+      message,
+      yesLabel,
+      noLabel,
+      cancelLabel
+    });
+  }
+  preCreate() {
+    super.preCreate();
+    this.yesLabel = "Yes";
+    this.noLabel = "No";
+    this.cancelLabel = null;
+    this.element.setAttribute("data-confirm-popup", "confirm-popup");
+    this.footerRenderer = () => XNode.create("div", null, XNode.create("button", {
+      class: "yes",
+      autofocus: true,
+      text: Bind.oneWay(() => this.yesLabel),
+      eventClick: () => this.close(true),
+      "style-display": Bind.oneWay(() => !!this.yesLabel)
+    }), XNode.create("button", {
+      class: "no",
+      text: Bind.oneWay(() => this.noLabel),
+      eventClick: () => this.close(false),
+      "style-display": Bind.oneWay(() => !!this.noLabel)
+    }), XNode.create("button", {
+      class: "cancel",
+      text: Bind.oneWay(() => this.cancelLabel),
+      eventClick: () => this.requestCancel(),
+      "style-display": Bind.oneWay(() => !!this.cancelLabel)
+    }));
+    this.closeButtonRenderer = () => XNode.create("div", {
+      "style-display": "none"
+    });
+  }
+  requestCancel() {
+    this.cancel();
+    return Promise.resolve();
+  }
+}

package/dist-esm/web/styles/AtomAlertWindowStyle.js

@@ -1,43 +1,42 @@
 import Colors from "../../core/Colors.js";
 import { AtomWindowStyle } from "./AtomWindowStyle.js";
 export default class AtomAlertWindowStyle extends AtomWindowStyle {
-    get titleHost() {
-        return {
-            ...this.getBaseProperty(AtomAlertWindowStyle, "titleHost"),
-            color: Colors.black,
-            backgroundColor: Colors.white
-        };
-    }
-    get contentPresenter() {
-        return {
-            ...this.getBaseProperty(AtomAlertWindowStyle, "contentPresenter"),
-            padding: "0px 10px 30px 10px",
-            textAlign: "center",
-            color: Colors.rgba(51, 51, 51)
-        };
-    }
-    get commandBar() {
-        return {
-            ...this.getBaseProperty(AtomAlertWindowStyle, "commandBar"),
-            textAlign: "center",
-            subclasses: {
-                " button": this.buttonStyle,
-                " .yes-button": {
-                    backgroundColor: Colors.rgba(0, 128, 0)
-                },
-                " .no-button": {
-                    backgroundColor: Colors.rgba(255, 0, 0)
-                }
-            }
-        };
-    }
-    get buttonStyle() {
-        return {
-            border: "none",
-            color: Colors.white,
-            width: "50%",
-            height: "40px"
-        };
-    }
-}
-//# sourceMappingURL=AtomAlertWindowStyle.js.map
+  get titleHost() {
+    return {
+      ...this.getBaseProperty(AtomAlertWindowStyle, "titleHost"),
+      color: Colors.black,
+      backgroundColor: Colors.white
+    };
+  }
+  get contentPresenter() {
+    return {
+      ...this.getBaseProperty(AtomAlertWindowStyle, "contentPresenter"),
+      padding: "0px 10px 30px 10px",
+      textAlign: "center",
+      color: Colors.rgba(51, 51, 51)
+    };
+  }
+  get commandBar() {
+    return {
+      ...this.getBaseProperty(AtomAlertWindowStyle, "commandBar"),
+      textAlign: "center",
+      subclasses: {
+        " button": this.buttonStyle,
+        " .yes-button": {
+          backgroundColor: Colors.rgba(0, 128, 0)
+        },
+        " .no-button": {
+          backgroundColor: Colors.rgba(255, 0, 0)
+        }
+      }
+    };
+  }
+  get buttonStyle() {
+    return {
+      border: "none",
+      color: Colors.white,
+      width: "50%",
+      height: "40px"
+    };
+  }
+}

package/dist-esm/web/styles/AtomFrameStyle.js

@@ -1,19 +1,18 @@
 import { AtomStyle } from "./AtomStyle.js";
 import StyleBuilder from "./StyleBuilder.js";
 export default class AtomFrameStyle extends AtomStyle {
-    get root() {
-        return {
-            ...StyleBuilder.newStyle.absolute(0, 0).toStyle(),
-            width: "100%",
-            height: "100%",
-            subclasses: {
-                " > *": {
-                    ...StyleBuilder.newStyle.absolute(0, 0).toStyle(),
-                    width: "100%",
-                    height: "100%",
-                }
-            }
-        };
-    }
-}
-//# sourceMappingURL=AtomFrameStyle.js.map
+  get root() {
+    return {
+      ...StyleBuilder.newStyle.absolute(0, 0).toStyle(),
+      width: "100%",
+      height: "100%",
+      subclasses: {
+        " > *": {
+          ...StyleBuilder.newStyle.absolute(0, 0).toStyle(),
+          width: "100%",
+          height: "100%"
+        }
+      }
+    };
+  }
+}