@web-atoms/web-controls 2.6.5 → 2.6.7

package/dist-esm/basic/InlinePopupButton.js

@@ -1,99 +1,110 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
 import AtomPopover from "./elements/AtomPopover.js";
-export default function InlinePopupButton({ icon, text, label, closeOnClick = true, popup, ...a }, ...nodes) {
-    if (!a["anchor-right"]) {
-        a["anchor-left"] ??= "parent-right";
+export default function InlinePopupButton({
+  icon,
+  text,
+  label,
+  closeOnClick = true,
+  popup,
+  ...a
+}, ...nodes) {
+  if (!a["anchor-right"]) {
+    a["anchor-left"] ??= "parent-right";
+  }
+  if (!a["anchor-bottom"]) {
+    a["anchor-top"] ??= "parent-top";
+  }
+  a["data-atom-popup-button"] = "popup-button";
+  if (!popup) {
+    const copy = nodes;
+    const div = XNode.create("div", null, ...copy);
+    popup = () => div;
+    nodes = [];
+  }
+  a["popupFactory"] = popup;
+  if (closeOnClick) {
+    a["data-close-on-click"] = true;
+  }
+  if (!a["data-layout"]) {
+    if (icon && text) {
+      a["data-layout"] = "icon-button";
+    } else {
+      a["data-layout"] = "button";
     }
-    if (!a["anchor-bottom"]) {
-        a["anchor-top"] ??= "parent-top";
-    }
-    a["data-atom-popup-button"] = "popup-button";
-    if (!popup) {
-        const copy = nodes;
-        const div = XNode.create("div", null, ...copy);
-        popup = () => div;
-        nodes = [];
-    }
-    a["popupFactory"] = popup;
-    if (closeOnClick) {
-        a["data-close-on-click"] = true;
-    }
-    if (!a["data-layout"]) {
-        if (icon && text) {
-            a["data-layout"] = "icon-button";
-        }
-        else {
-            a["data-layout"] = "button";
-        }
-    }
-    return XNode.create("button", { "data-inline-popup-button": "inline-popup-button", "data-atom-popup-button": "1", ...a },
-        icon && XNode.create("i", { class: icon }),
-        text && XNode.create("span", { text: text }),
-        label && XNode.create("label", { text: text }),
-        ...nodes);
+  }
+  return XNode.create("button", {
+    "data-inline-popup-button": "inline-popup-button",
+    "data-atom-popup-button": "1",
+    ...a
+  }, icon && XNode.create("i", {
+    class: icon
+  }), text && XNode.create("span", {
+    text: text
+  }), label && XNode.create("label", {
+    text: text
+  }), ...nodes);
 }
-document.body.addEventListener("click", (e) => {
-    let start = e.target;
-    while (start) {
-        if (start.hasAttribute("data-atom-popup-button")) {
-            break;
+document.body.addEventListener("click", e => {
+  let start = e.target;
+  while (start) {
+    if (start.hasAttribute("data-atom-popup-button")) {
+      break;
+    }
+    start = start.parentElement;
+  }
+  if (!start) {
+    return;
+  }
+  const pf = start["popupFactory"];
+  if (!pf) {
+    return;
+  }
+  const control = AtomControl.from(start);
+  const app = control.app;
+  const target = start;
+  const element = control.element;
+  const dataFactory = () => {
+    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;
+      }
     }
-    if (!start) {
-        return;
-    }
-    const pf = start["popupFactory"];
-    if (!pf) {
-        return;
-    }
-    const control = AtomControl.from(start);
-    const app = control.app;
-    const target = start;
-    const element = control.element;
-    const dataFactory = () => {
-        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;
+    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;
+          }
         }
-        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;
-                    }
-                },
-            });
-        }
-        return data;
-    };
-    let closeOnClick = void 0;
-    const dataCloseOnClick = target.getAttribute("data-close-on-click");
-    if (dataCloseOnClick) {
-        closeOnClick = /^(true|yes|1)$/i.test(dataCloseOnClick);
+      });
     }
-    AtomPopover.create(target, {
-        nodeFactory: (data) => pf(data),
-        dataFactory,
-        closeOnClick,
-        "anchor-bottom": target.getAttribute("anchor-bottom"),
-        "anchor-top": target.getAttribute("anchor-top"),
-        "anchor-left": target.getAttribute("anchor-left"),
-        "anchor-right": target.getAttribute("anchor-right"),
-    });
-});
-//# sourceMappingURL=InlinePopupButton.js.map
+    return data;
+  };
+  let closeOnClick = void 0;
+  const dataCloseOnClick = target.getAttribute("data-close-on-click");
+  if (dataCloseOnClick) {
+    closeOnClick = /^(true|yes|1)$/i.test(dataCloseOnClick);
+  }
+  AtomPopover.create(target, {
+    nodeFactory: data => pf(data),
+    dataFactory,
+    closeOnClick,
+    "anchor-bottom": target.getAttribute("anchor-bottom"),
+    "anchor-top": target.getAttribute("anchor-top"),
+    "anchor-left": target.getAttribute("anchor-left"),
+    "anchor-right": target.getAttribute("anchor-right")
+  });
+});

package/dist-esm/basic/InlinePopupControl.js

@@ -1,25 +1,26 @@
 import { PopupControl } from "@web-atoms/core/dist/web/services/PopupService.js";
 export default class InlinePopupControl extends PopupControl {
-    static showPopup(opener, popup, options = {}) {
-        const c = class extends InlinePopupControl {
-            create() {
-                this.render(popup);
-            }
-            dispatchClickEvent(e, data) {
-                let start = this.element.parentElement;
-                while (start) {
-                    const { atomControl } = start;
-                    if (atomControl) {
-                        atomControl.dispatchClickEvent(e, data);
-                        return;
-                    }
-                    start = start.parentElement;
-                }
-                super.dispatchClickEvent(e, data);
-            }
-        };
-        options.popupStyle = ".no-style";
-        return c.showControl(opener, options);
-    }
-}
-//# sourceMappingURL=InlinePopupControl.js.map
+  static showPopup(opener, popup, options = {}) {
+    const c = class extends InlinePopupControl {
+      create() {
+        this.render(popup);
+      }
+      dispatchClickEvent(e, data) {
+        let start = this.element.parentElement;
+        while (start) {
+          const {
+            atomControl
+          } = start;
+          if (atomControl) {
+            atomControl.dispatchClickEvent(e, data);
+            return;
+          }
+          start = start.parentElement;
+        }
+        super.dispatchClickEvent(e, data);
+      }
+    };
+    options.popupStyle = ".no-style";
+    return c.showControl(opener, options);
+  }
+}

package/dist-esm/basic/ItemPath.js

@@ -1,69 +1,68 @@
 const get = (start, path) => {
-    let item = start;
-    for (const iterator of path.split(".")) {
-        if (iterator === "$") {
-            item = start;
-            continue;
-        }
-        item = item[iterator];
+  let item = start;
+  for (const iterator of path.split(".")) {
+    if (iterator === "$") {
+      item = start;
+      continue;
     }
-    return item;
+    item = item[iterator];
+  }
+  return item;
 };
 function* getFragments(path) {
-    const regex = /([^\=\:]+)\s*[\=\:]\s*((('[^\\']*(((\\')|(''))[^\\']*)*')|("[^\\"]*(((\\")|(""))[^\\"]*)*"))|([^\,\;]+))\s*[\,\;]?\s*/gmi;
-    let m;
-    while ((m = regex.exec(path)) !== null) {
-        if (m.index === regex.lastIndex) {
-            regex.lastIndex++;
-        }
-        yield [m[1].trim(), m[2].trim()];
+  const regex = /([^\=\:]+)\s*[\=\:]\s*((('[^\\']*(((\\')|(''))[^\\']*)*')|("[^\\"]*(((\\")|(""))[^\\"]*)*"))|([^\,\;]+))\s*[\,\;]?\s*/gmi;
+  let m;
+  while ((m = regex.exec(path)) !== null) {
+    if (m.index === regex.lastIndex) {
+      regex.lastIndex++;
     }
+    yield [m[1].trim(), m[2].trim()];
+  }
 }
 export default class ItemPath {
-    static get(item, path) {
-        if (path.startsWith("$.")) {
-            return get(item, path);
-        }
-        if (/^[\{\"]/.test(path)) {
-            const json = JSON.parse(path);
-            return json;
-        }
-        const target = {};
-        this.build(item, path, target);
-        return target;
+  static get(item, path) {
+    if (path.startsWith("$.")) {
+      return get(item, path);
     }
-    static build(item, path, target) {
-        for (let [key, value] of getFragments(path)) {
-            if (value.startsWith("$")) {
-                value = get(item, value);
-                target[key] = value;
-                continue;
-            }
-            if (value.startsWith('"')) {
-                value = JSON.parse(value);
-                target[key] = value;
-                continue;
-            }
-            if (value.startsWith("'")) {
-                value = value.substring(1, value.length - 1);
-                value = value.replace(/((\'\')|(\\\'))/, "'");
-                target[key] = value;
-                continue;
-            }
-            if (value === "true") {
-                target[key] = true;
-                continue;
-            }
-            if (value === "false") {
-                target[key] = false;
-                continue;
-            }
-            if (value === "null") {
-                target[key] = null;
-                continue;
-            }
-            target[key] = Number(value);
-        }
+    if (/^[\{\"]/.test(path)) {
+      const json = JSON.parse(path);
+      return json;
     }
-}
-//# sourceMappingURL=ItemPath.js.map
+    const target = {};
+    this.build(item, path, target);
+    return target;
+  }
+  static build(item, path, target) {
+    for (let [key, value] of getFragments(path)) {
+      if (value.startsWith("$")) {
+        value = get(item, value);
+        target[key] = value;
+        continue;
+      }
+      if (value.startsWith('"')) {
+        value = JSON.parse(value);
+        target[key] = value;
+        continue;
+      }
+      if (value.startsWith("'")) {
+        value = value.substring(1, value.length - 1);
+        value = value.replace(/((\'\')|(\\\'))/, "'");
+        target[key] = value;
+        continue;
+      }
+      if (value === "true") {
+        target[key] = true;
+        continue;
+      }
+      if (value === "false") {
+        target[key] = false;
+        continue;
+      }
+      if (value === "null") {
+        target[key] = null;
+        continue;
+      }
+      target[key] = Number(value);
+    }
+  }
+}

package/dist-esm/basic/LimitedText.js

@@ -1,42 +1,53 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-import "../styles/limited-text.global.css";
-const toggleDetails = (e) => {
-    let start = e.target;
-    if (e.defaultPrevented) {
-        return;
-    }
-    start = start.parentElement;
-    const container = start;
-    start = start?.parentElement;
-    if (!start || start.getAttribute("data-limited-text") !== "limited-text") {
-        return;
-    }
-    e.preventDefault();
-    e.stopImmediatePropagation();
-    e.stopPropagation();
-    if (start.getAttribute("data-mode") === "collapsed") {
-        start.setAttribute("data-mode", "open");
-        start.style.maxHeight = "";
-        container.style.top = "";
-    }
-    else {
-        const h = start.getAttribute("data-max-height");
-        start.style.maxHeight = h;
-        container.style.top = h;
-        start.setAttribute("data-mode", "collapsed");
-    }
+ESMPack.installStyleSheet(import.meta.resolve("../styles/limited-text.global.css"));
+const toggleDetails = e => {
+  let start = e.target;
+  if (e.defaultPrevented) {
+    return;
+  }
+  start = start.parentElement;
+  const container = start;
+  start = start?.parentElement;
+  if (!start || start.getAttribute("data-limited-text") !== "limited-text") {
+    return;
+  }
+  e.preventDefault();
+  e.stopImmediatePropagation();
+  e.stopPropagation();
+  if (start.getAttribute("data-mode") === "collapsed") {
+    start.setAttribute("data-mode", "open");
+    start.style.maxHeight = "";
+    container.style.top = "";
+  } else {
+    const h = start.getAttribute("data-max-height");
+    start.style.maxHeight = h;
+    container.style.top = h;
+    start.setAttribute("data-mode", "collapsed");
+  }
 };
 let setEventHandler = () => {
-    document.body.addEventListener("click", toggleDetails);
-    setEventHandler = null;
+  document.body.addEventListener("click", toggleDetails);
+  setEventHandler = null;
 };
-export default function LimitedText({ text = "", height = 100, ...a }, ...nodes) {
-    setEventHandler?.();
-    const h = typeof height === "number" ? `${height}px` : height;
-    return XNode.create("div", { "data-mode": "collapsed", "data-max-height": h, "style-max-height": h, "data-limited-text": "limited-text", ...a },
-        text && XNode.create("p", { text: text }),
-        ...nodes,
-        XNode.create("div", { "style-top": h, "data-element": "more" },
-            XNode.create("button", { class: "fa-solid fa-angles-up" })));
-}
-//# sourceMappingURL=LimitedText.js.map
+export default function LimitedText({
+  text = "",
+  height = 100,
+  ...a
+}, ...nodes) {
+  setEventHandler?.();
+  const h = typeof height === "number" ? `${height}px` : height;
+  return XNode.create("div", {
+    "data-mode": "collapsed",
+    "data-max-height": h,
+    "style-max-height": h,
+    "data-limited-text": "limited-text",
+    ...a
+  }, text && XNode.create("p", {
+    text: text
+  }), ...nodes, XNode.create("div", {
+    "style-top": h,
+    "data-element": "more"
+  }, XNode.create("button", {
+    class: "fa-solid fa-angles-up"
+  })));
+}

package/dist-esm/basic/ListRepeater.js

@@ -1,16 +1,15 @@
 import AtomRepeater from "./AtomRepeater.js";
-import "./styles/list-repeater.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/list-repeater.global.css"));
 export default class ListRepeater extends AtomRepeater {
-    get autoSelectOnClick() {
-        return this.selectOnClick;
-    }
-    set autoSelectOnClick(value) {
-        this.selectOnClick = value;
-    }
-    preCreate() {
-        super.preCreate();
-        this.autoSelectOnClick = true;
-        this.element.setAttribute("data-list-repeater", "list-repeater");
-    }
-}
-//# sourceMappingURL=ListRepeater.js.map
+  get autoSelectOnClick() {
+    return this.selectOnClick;
+  }
+  set autoSelectOnClick(value) {
+    this.selectOnClick = value;
+  }
+  preCreate() {
+    super.preCreate();
+    this.autoSelectOnClick = true;
+    this.element.setAttribute("data-list-repeater", "list-repeater");
+  }
+}

package/dist-esm/basic/MaskedInput.js

@@ -1,33 +1,41 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-import "./styles/masked-input.global.css";
-const updateMask = (e) => {
-    const target = e.target;
-    const mask = target.dataset.mask;
-    if (!mask) {
-        return;
-    }
-    let result = "";
-    const value = target.value;
-    for (let index = 0, elementIndex = 0; elementIndex < value.length; elementIndex++, index++) {
-        const element = value[elementIndex];
-        const maskElement = mask[index];
-        switch (maskElement) {
-            case "#":
-                result += /[0-9]/.test(element) ? element : "";
-                continue;
-            case ".":
-                if (element !== ".") {
-                    result += ".";
-                }
-                result += element;
-                break;
+ESMPack.installStyleSheet(import.meta.resolve("./styles/masked-input.global.css"));
+const updateMask = e => {
+  const target = e.target;
+  const mask = target.dataset.mask;
+  if (!mask) {
+    return;
+  }
+  let result = "";
+  const value = target.value;
+  for (let index = 0, elementIndex = 0; elementIndex < value.length; elementIndex++, index++) {
+    const element = value[elementIndex];
+    const maskElement = mask[index];
+    switch (maskElement) {
+      case "#":
+        result += /[0-9]/.test(element) ? element : "";
+        continue;
+      case ".":
+        if (element !== ".") {
+          result += ".";
         }
+        result += element;
+        break;
     }
-    if (target.value !== result) {
-        target.value = result;
-    }
+  }
+  if (target.value !== result) {
+    target.value = result;
+  }
 };
-export default function MaskedInput({ mask, ...a }) {
-    return XNode.create("input", { "data-mask": mask, "event-change": updateMask, "event-keypress": updateMask, "event-keyup": updateMask, ...a });
-}
-//# sourceMappingURL=MaskedInput.js.map
+export default function MaskedInput({
+  mask,
+  ...a
+}) {
+  return XNode.create("input", {
+    "data-mask": mask,
+    "event-change": updateMask,
+    "event-keypress": updateMask,
+    "event-keyup": updateMask,
+    ...a
+  });
+}