@web-atoms/web-controls 2.6.5 → 2.6.7

package/dist-esm/basic/FilesDragDrop.js

@@ -2,89 +2,93 @@ const supportsFileSystemAccessAPI = "getAsFileSystemHandle" in DataTransferItem.
 const supportsWebkitGetAsEntry = "webkitGetAsEntry" in DataTransferItem.prototype;
 import { StringHelper } from "@web-atoms/core/dist/core/StringHelper.js";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import "./FilesDragDrop.global.css";
-const dragEnter = (e) => {
-    if (!e.dataTransfer) {
-        return;
-    }
-    e.currentTarget.setAttribute("data-drop-enabled", "1");
+ESMPack.installStyleSheet(import.meta.resolve("./FilesDragDrop.global.css"));
+const dragEnter = e => {
+  if (!e.dataTransfer) {
+    return;
+  }
+  e.currentTarget.setAttribute("data-drop-enabled", "1");
 };
-const dragOver = (e) => {
-    if (!e.dataTransfer) {
-        return;
-    }
-    e.preventDefault();
+const dragOver = e => {
+  if (!e.dataTransfer) {
+    return;
+  }
+  e.preventDefault();
 };
-const dragLeave = (e) => {
-    if (!e.dataTransfer) {
-        return;
-    }
-    e.currentTarget.removeAttribute("data-drop-enabled");
+const dragLeave = e => {
+  if (!e.dataTransfer) {
+    return;
+  }
+  e.currentTarget.removeAttribute("data-drop-enabled");
 };
-const eventDrop = (e) => {
-    if (!e.dataTransfer) {
-        return;
+const eventDrop = e => {
+  if (!e.dataTransfer) {
+    return;
+  }
+  e.preventDefault();
+  const currentTarget = e.currentTarget;
+  currentTarget.removeAttribute("data-drop-enabled");
+  const uploadEvent = StringHelper.fromHyphenToCamel(currentTarget.getAttribute("data-upload-event"));
+  const uploadRequested = StringHelper.fromHyphenToCamel(currentTarget.getAttribute("data-upload-requested"));
+  const extra = currentTarget.getAttribute("data-extra");
+  const convert = currentTarget.getAttribute("data-convert") === "true";
+  const maxSize = parseInt(currentTarget.getAttribute("data-max-size") || "0", 10);
+  const fileHandlesPromises = [...e.dataTransfer.items].filter(item => item.kind === "file").map(item => supportsFileSystemAccessAPI ? item.getAsFileSystemHandle() : supportsWebkitGetAsEntry ? item.webkitGetAsEntry() : item.getAsFile());
+  const files = [];
+  const getFiles = async (dir, parent = dir.name) => {
+    const all = [];
+    for await (const [name, handle] of dir.entries()) {
+      const path = `${parent}/${handle.name}`;
+      if (handle.kind === "directory" || handle.isDirectory) {
+        all.push(...(await getFiles(handle, path)));
+        continue;
+      }
+      const file = await handle.getFile();
+      Object.defineProperty(file, "webkitRelativePath", {
+        value: path
+      });
+      all.push(file);
+    }
+    return all;
+  };
+  const control = AtomControl.from(e.currentTarget);
+  control.app.runAsync(async () => {
+    for await (const handle of fileHandlesPromises) {
+      if (handle.kind === "directory" || handle.isDirectory) {
+        files.push(...(await getFiles(handle)));
+      } else {
+        files.push(await handle.getFile());
+      }
     }
-    e.preventDefault();
-    const currentTarget = e.currentTarget;
-    currentTarget.removeAttribute("data-drop-enabled");
-    const uploadEvent = StringHelper.fromHyphenToCamel(currentTarget.getAttribute("data-upload-event"));
-    const uploadRequested = StringHelper.fromHyphenToCamel(currentTarget.getAttribute("data-upload-requested"));
-    const extra = currentTarget.getAttribute("data-extra");
-    const convert = currentTarget.getAttribute("data-convert") === "true";
-    const maxSize = parseInt(currentTarget.getAttribute("data-max-size") || "0", 10);
-    const fileHandlesPromises = [...e.dataTransfer.items]
-        .filter((item) => item.kind === "file")
-        .map((item) => supportsFileSystemAccessAPI
-        ? item.getAsFileSystemHandle()
-        : supportsWebkitGetAsEntry
-            ? item.webkitGetAsEntry()
-            : item.getAsFile());
-    const files = [];
-    const getFiles = async (dir, parent = dir.name) => {
-        const all = [];
-        for await (const [name, handle] of dir.entries()) {
-            const path = `${parent}/${handle.name}`;
-            if (handle.kind === "directory" || handle.isDirectory) {
-                all.push(...(await getFiles(handle, path)));
-                continue;
-            }
-            const file = await handle.getFile();
-            Object.defineProperty(file, "webkitRelativePath", { value: path });
-            all.push(file);
-        }
-        return all;
+    const detail = {
+      files,
+      extra,
+      convert,
+      maxSize,
+      uploadEvent
     };
-    const control = AtomControl.from(e.currentTarget);
-    control.app.runAsync(async () => {
-        for await (const handle of fileHandlesPromises) {
-            if (handle.kind === "directory" || handle.isDirectory) {
-                files.push(...await getFiles(handle));
-            }
-            else {
-                files.push(await handle.getFile());
-            }
-        }
-        const detail = {
-            files,
-            extra,
-            convert,
-            maxSize,
-            uploadEvent
-        };
-        currentTarget.dispatchEvent(new CustomEvent(uploadRequested, { detail, bubbles: true, cancelable: true }));
-    });
+    currentTarget.dispatchEvent(new CustomEvent(uploadRequested, {
+      detail,
+      bubbles: true,
+      cancelable: true
+    }));
+  });
 };
-export const FilesDragDrop = ({ uploadEvent = "files-available", uploadRequested = "upload-requested", convert = false, maxSize = 50 * 1024 * 1024, extra = "", }) => ({
-    "data-extra": extra,
-    "data-drag-drop": "1",
-    "data-convert": convert,
-    "data-upload-event": uploadEvent,
-    "data-upload-requested": uploadRequested,
-    "data-max-size": maxSize,
-    "event-dragenter": dragEnter,
-    "event-dragleave": dragLeave,
-    "event-dragover": dragOver,
-    "event-drop": eventDrop
-});
-//# sourceMappingURL=FilesDragDrop.js.map
+export const FilesDragDrop = ({
+  uploadEvent = "files-available",
+  uploadRequested = "upload-requested",
+  convert = false,
+  maxSize = 50 * 1024 * 1024,
+  extra = ""
+}) => ({
+  "data-extra": extra,
+  "data-drag-drop": "1",
+  "data-convert": convert,
+  "data-upload-event": uploadEvent,
+  "data-upload-requested": uploadRequested,
+  "data-max-size": maxSize,
+  "event-dragenter": dragEnter,
+  "event-dragleave": dragLeave,
+  "event-dragover": dragOver,
+  "event-drop": eventDrop
+});

package/dist-esm/basic/Form.js

@@ -1,61 +1,89 @@
 import Bind from "@web-atoms/core/dist/core/Bind.js";
 import { StringHelper } from "@web-atoms/core/dist/core/StringHelper.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-import "../styles/form.global.css";
-const checkClick = (e) => {
-    const form = e.currentTarget;
-    const element = e.target;
-    let target = element;
-    while (target.tagName !== "BUTTON") {
-        target = target.parentElement;
-        if (!target || target === form) {
-            return;
-        }
+ESMPack.installStyleSheet(import.meta.resolve("../styles/form.global.css"));
+const checkClick = e => {
+  const form = e.currentTarget;
+  const element = e.target;
+  let target = element;
+  while (target.tagName !== "BUTTON") {
+    target = target.parentElement;
+    if (!target || target === form) {
+      return;
     }
-    const submitEvent = target.getAttribute("data-submit-event");
-    if (!submitEvent) {
-        if (!/submit/i.test(target.getAttribute("type") ?? target.getAttribute("data-type"))) {
-            return;
-        }
+  }
+  const submitEvent = target.getAttribute("data-submit-event");
+  if (!submitEvent) {
+    if (!/submit/i.test(target.getAttribute("type") ?? target.getAttribute("data-type"))) {
+      return;
     }
-    form.setAttribute("data-show-validation", "true");
-    setTimeout(() => {
-        const all = Array.from(form.getElementsByClassName("field-error"));
-        for (const iterator of all) {
-            if (iterator.textContent) {
-                form.setAttribute("data-valid", "false");
-                return;
-            }
-        }
-        form.setAttribute("data-valid", "true");
-        const eventName = StringHelper.fromHyphenToCamel(submitEvent ?? form.getAttribute("data-submit-event"));
-        target.dispatchEvent(new CustomEvent(eventName, { bubbles: true, cancelable: true }));
-    }, 100);
+  }
+  form.setAttribute("data-show-validation", "true");
+  setTimeout(() => {
+    const all = Array.from(form.getElementsByClassName("field-error"));
+    for (const iterator of all) {
+      if (iterator.textContent) {
+        form.setAttribute("data-valid", "false");
+        return;
+      }
+    }
+    form.setAttribute("data-valid", "true");
+    const eventName = StringHelper.fromHyphenToCamel(submitEvent ?? form.getAttribute("data-submit-event"));
+    target.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      cancelable: true
+    }));
+  }, 100);
 };
-export default function Form({ "data-submit-event": submitEvent = "submitForm", "data-show-validation": showValidation = "false", "data-error-message": errorMessage = "Please fix all validations", ...a }, ...nodes) {
-    return XNode.create("div", { ...a, "data-submit-event": submitEvent, "data-form": "form", "data-valid": "true", "data-show-validation": showValidation, "data-error-message": errorMessage, "event-click": checkClick },
-        XNode.create("div", { class: "error-message", text: errorMessage }),
-        ...nodes);
+export default function Form({
+  "data-submit-event": submitEvent = "submitForm",
+  "data-show-validation": showValidation = "false",
+  "data-error-message": errorMessage = "Please fix all validations",
+  ...a
+}, ...nodes) {
+  return XNode.create("div", {
+    ...a,
+    "data-submit-event": submitEvent,
+    "data-form": "form",
+    "data-valid": "true",
+    "data-show-validation": showValidation,
+    "data-error-message": errorMessage,
+    "event-click": checkClick
+  }, XNode.create("div", {
+    class: "error-message",
+    text: errorMessage
+  }), ...nodes);
 }
-export const BindError = ({ value, message = (v, l) => `${l} is invalid`, isValid = (v, e) => !!v, }) => {
-    function f2(sender, element) {
-        const isRequired = element.parentElement.querySelector(`[data-required]`);
-        const msg = value.call(this, sender);
-        if (!msg) {
-            if (!isRequired) {
-                return "";
-            }
-        }
-        if (isValid(msg, element)) {
-            return "";
-        }
-        return message(msg, element.parentElement.querySelector(`[data-element=label]`)?.textContent || "This field ");
+export const BindError = ({
+  value,
+  message = (v, l) => `${l} is invalid`,
+  isValid = (v, e) => !!v
+}) => {
+  function f2(sender, element) {
+    const isRequired = element.parentElement.querySelector(`[data-required]`);
+    const msg = value.call(this, sender);
+    if (!msg) {
+      if (!isRequired) {
+        return "";
+      }
     }
-    ;
-    f2.toString = () => value.toString();
-    return Bind.oneWay(f2);
-};
-export const BindEmailError = ({ value, message = (v, l) => `${l} is not a valid email address`, isValid = (v, e) => /[^\@]+\@[^\@]+\.[^\@]+/i.test(v), }) => {
-    return BindError({ value, message, isValid });
+    if (isValid(msg, element)) {
+      return "";
+    }
+    return message(msg, element.parentElement.querySelector(`[data-element=label]`)?.textContent || "This field ");
+  }
+  ;
+  f2.toString = () => value.toString();
+  return Bind.oneWay(f2);
 };
-//# sourceMappingURL=Form.js.map
+export const BindEmailError = ({
+  value,
+  message = (v, l) => `${l} is not a valid email address`,
+  isValid = (v, e) => /[^\@]+\@[^\@]+\.[^\@]+/i.test(v)
+}) => {
+  return BindError({
+    value,
+    message,
+    isValid
+  });
+};

package/dist-esm/basic/FormField.js

@@ -1,122 +1,180 @@
 import Bind from "@web-atoms/core/dist/core/Bind.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService.js";
-import "./styles/form-field.global.css";
-document.body.addEventListener("click", (e) => {
-    let label = e.target;
-    while (label && label.tagName !== "LABEL") {
-        if (label.getAttribute("data-element") === "label") {
-            break;
-        }
-        label = label.parentElement;
-        if (label === document.body) {
-            return;
-        }
-    }
-    if (!label) {
-        return;
+ESMPack.installStyleSheet(import.meta.resolve("./styles/form-field.global.css"));
+document.body.addEventListener("click", e => {
+  let label = e.target;
+  while (label && label.tagName !== "LABEL") {
+    if (label.getAttribute("data-element") === "label") {
+      break;
     }
-    const formField = label.parentElement;
-    if (!formField.hasAttribute("data-wa-form-field")) {
-        return;
+    label = label.parentElement;
+    if (label === document.body) {
+      return;
     }
-    const selectable = formField.querySelector("select,input,textarea");
-    selectable?.focus?.();
+  }
+  if (!label) {
+    return;
+  }
+  const formField = label.parentElement;
+  if (!formField.hasAttribute("data-wa-form-field")) {
+    return;
+  }
+  const selectable = formField.querySelector("select,input,textarea");
+  selectable?.focus?.();
 });
-document.addEventListener("focusin", (e) => {
-    let target = e.target;
-    while (target) {
-        if (target.getAttribute("data-wa-form-field") === "wa-form-field") {
-            target.setAttribute("data-focused", "true");
-            break;
-        }
-        target = target.parentElement;
+document.addEventListener("focusin", e => {
+  let target = e.target;
+  while (target) {
+    if (target.getAttribute("data-wa-form-field") === "wa-form-field") {
+      target.setAttribute("data-focused", "true");
+      break;
     }
+    target = target.parentElement;
+  }
 });
-document.addEventListener("focusout", (e) => {
-    let target = e.target;
-    while (target) {
-        if (target.getAttribute("data-wa-form-field") === "wa-form-field") {
-            target.removeAttribute("data-focused");
-            break;
-        }
-        target = target.parentElement;
+document.addEventListener("focusout", e => {
+  let target = e.target;
+  while (target) {
+    if (target.getAttribute("data-wa-form-field") === "wa-form-field") {
+      target.removeAttribute("data-focused");
+      break;
     }
+    target = target.parentElement;
+  }
 });
-export default function FormField({ label, required, error, helpIcon = "fas fa-question-circle", help, helpEventClick, helpTitle, border = false, ...others }, node) {
-    if (node) {
-        const na = node.attributes ??= {};
-        na["data-element"] = "content";
-    }
-    if (!helpEventClick && help) {
-        helpEventClick = Bind.event((s, e) => {
-            const app = s.app;
-            if (typeof help === "string" || help instanceof XNode) {
-                PopupService.notify(help).catch(console.error);
-                return;
-            }
-            class HelpPopup extends PopupWindow {
-                create() {
-                    this.render(XNode.create("div", { "data-form-field-help": "help-window" }, help));
-                }
-            }
-            HelpPopup.showWindow({ title: helpTitle ?? "Help", modal: true });
-        });
-    }
-    let labelIsNode = false;
-    if (label) {
-        if (label instanceof XNode) {
-            const la = label.attributes ??= {};
-            la["data-element"] = "label";
-            labelIsNode = true;
+export default function FormField({
+  label,
+  required,
+  error,
+  helpIcon = "fas fa-question-circle",
+  help,
+  helpEventClick,
+  helpTitle,
+  border = false,
+  ...others
+}, node) {
+  if (node) {
+    const na = node.attributes ??= {};
+    na["data-element"] = "content";
+  }
+  if (!helpEventClick && help) {
+    helpEventClick = Bind.event((s, e) => {
+      const app = s.app;
+      if (typeof help === "string" || help instanceof XNode) {
+        PopupService.notify(help).catch(console.error);
+        return;
+      }
+      class HelpPopup extends PopupWindow {
+        create() {
+          this.render(XNode.create("div", {
+            "data-form-field-help": "help-window"
+          }, help));
         }
-        else {
-            if (node) {
-                if (!(node.attributes?.ariaLabel || node.attributes?.["aria-label"])) {
-                    (node.attributes ??= {})["aria-label"] = label;
-                }
-            }
+      }
+      HelpPopup.showWindow({
+        title: helpTitle ?? "Help",
+        modal: true
+      });
+    });
+  }
+  let labelIsNode = false;
+  if (label) {
+    if (label instanceof XNode) {
+      const la = label.attributes ??= {};
+      la["data-element"] = "label";
+      labelIsNode = true;
+    } else {
+      if (node) {
+        if (!(node.attributes?.ariaLabel || node.attributes?.["aria-label"])) {
+          (node.attributes ??= {})["aria-label"] = label;
         }
+      }
     }
-    return XNode.create("div", { "data-wa-form-field": "wa-form-field", "data-border": border, ...others },
-        label && (labelIsNode ? label : XNode.create("label", { "data-element": "label", text: label })),
-        required && XNode.create("span", { "data-required": "required", class: required, text: "*" }),
-        border && XNode.create("i", { "data-border": "border" }),
-        node,
-        help && XNode.create("i", { "data-help": "help", class: helpIcon, title: helpTitle, eventClick: helpEventClick }),
-        XNode.create("div", { class: "field-error", text: error }));
+  }
+  return XNode.create("div", {
+    "data-wa-form-field": "wa-form-field",
+    "data-border": border,
+    ...others
+  }, label && (labelIsNode ? label : XNode.create("label", {
+    "data-element": "label",
+    text: label
+  })), required && XNode.create("span", {
+    "data-required": "required",
+    class: required,
+    text: "*"
+  }), border && XNode.create("i", {
+    "data-border": "border"
+  }), node, help && XNode.create("i", {
+    "data-help": "help",
+    class: helpIcon,
+    title: helpTitle,
+    eventClick: helpEventClick
+  }), XNode.create("div", {
+    class: "field-error",
+    text: error
+  }));
 }
-export function HorizontalFormField({ label, required, error, helpIcon = "fas fa-question-circle", help, helpEventClick, helpTitle, border = false, ...others }, node) {
-    if (node) {
-        const na = node.attributes ??= {};
-        na["data-content"] = "content";
-    }
-    if (!helpEventClick && help) {
-        helpEventClick = Bind.event((s, e) => {
-            const app = s.app;
-            if (typeof help === "string" || help instanceof XNode) {
-                PopupService.notify(help).catch(console.error);
-                return;
-            }
-            class HelpPopup extends PopupWindow {
-                create() {
-                    this.render(XNode.create("div", { "data-form-field-help": "help-window" }, help));
-                }
-            }
-            HelpPopup.showWindow({ title: helpTitle ?? "Help" });
-        });
-    }
-    if (node) {
-        if (!(node.attributes?.ariaLabel || node.attributes?.["aria-label"])) {
-            (node.attributes ??= {})["aria-label"] = label;
+export function HorizontalFormField({
+  label,
+  required,
+  error,
+  helpIcon = "fas fa-question-circle",
+  help,
+  helpEventClick,
+  helpTitle,
+  border = false,
+  ...others
+}, node) {
+  if (node) {
+    const na = node.attributes ??= {};
+    na["data-content"] = "content";
+  }
+  if (!helpEventClick && help) {
+    helpEventClick = Bind.event((s, e) => {
+      const app = s.app;
+      if (typeof help === "string" || help instanceof XNode) {
+        PopupService.notify(help).catch(console.error);
+        return;
+      }
+      class HelpPopup extends PopupWindow {
+        create() {
+          this.render(XNode.create("div", {
+            "data-form-field-help": "help-window"
+          }, help));
         }
+      }
+      HelpPopup.showWindow({
+        title: helpTitle ?? "Help"
+      });
+    });
+  }
+  if (node) {
+    if (!(node.attributes?.ariaLabel || node.attributes?.["aria-label"])) {
+      (node.attributes ??= {})["aria-label"] = label;
     }
-    return XNode.create("div", { "data-wa-form-field": "wa-form-field", "data-layout": "horizontal", "data-border": border, ...others },
-        label && XNode.create("label", { class: "label", text: label }),
-        required && XNode.create("span", { "data-required": "required", class: required, text: "*" }),
-        border && XNode.create("i", { "data-border": "border" }),
-        node,
-        help && XNode.create("i", { "data-help": "help", class: helpIcon, title: helpTitle, eventClick: helpEventClick }),
-        XNode.create("div", { class: "field-error", text: error }));
-}
-//# sourceMappingURL=FormField.js.map
+  }
+  return XNode.create("div", {
+    "data-wa-form-field": "wa-form-field",
+    "data-layout": "horizontal",
+    "data-border": border,
+    ...others
+  }, label && XNode.create("label", {
+    class: "label",
+    text: label
+  }), required && XNode.create("span", {
+    "data-required": "required",
+    class: required,
+    text: "*"
+  }), border && XNode.create("i", {
+    "data-border": "border"
+  }), node, help && XNode.create("i", {
+    "data-help": "help",
+    class: helpIcon,
+    title: helpTitle,
+    eventClick: helpEventClick
+  }), XNode.create("div", {
+    class: "field-error",
+    text: error
+  }));
+}

package/dist-esm/basic/IElement.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=IElement.js.map
+export {};