@web-atoms/web-controls 2.6.4 → 2.6.6

package/dist-esm/basic/Resizable.js

@@ -2,37 +2,47 @@ import { AtomDisposableList } from "@web-atoms/core/dist/core/AtomDisposableList
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
 import { isMobileView } from "../mobile-app/MobileApp.js";
-import "../styles/resizable.global.css";
-const pointerDown = (e) => {
-    const target = e.currentTarget;
-    const direction = target.getAttribute("data-direction");
-    const previous = target.parentElement;
-    const disposables = new AtomDisposableList();
-    const { x, y } = e;
-    const width = previous.clientWidth;
-    const control = AtomControl.from(target);
-    target.setPointerCapture(e.pointerId);
-    target.setAttribute("data-resizing", "1");
-    disposables.add(() => {
-        target.removeAttribute("data-resizing");
-        target.releasePointerCapture(e.pointerId);
-    });
-    disposables.add(control.bindEvent(target, "pointermove", (ep) => {
-        const diff = ep.x - x;
-        previous.style.width = (width + diff) + "px";
-    }));
-    disposables.add(control.bindEvent(target, "pointerup", (ep) => {
-        const diff = ep.x - x;
-        previous.style.width = (width + diff) + "px";
-        disposables.dispose();
-    }));
+ESMPack.installStyleSheet(import.meta.resolve("../styles/resizable.global.css"));
+const pointerDown = e => {
+  const target = e.currentTarget;
+  const direction = target.getAttribute("data-direction");
+  const previous = target.parentElement;
+  const disposables = new AtomDisposableList();
+  const {
+    x,
+    y
+  } = e;
+  const width = previous.clientWidth;
+  const control = AtomControl.from(target);
+  target.setPointerCapture(e.pointerId);
+  target.setAttribute("data-resizing", "1");
+  disposables.add(() => {
+    target.removeAttribute("data-resizing");
+    target.releasePointerCapture(e.pointerId);
+  });
+  disposables.add(control.bindEvent(target, "pointermove", ep => {
+    const diff = ep.x - x;
+    previous.style.width = width + diff + "px";
+  }));
+  disposables.add(control.bindEvent(target, "pointerup", ep => {
+    const diff = ep.x - x;
+    previous.style.width = width + diff + "px";
+    disposables.dispose();
+  }));
 };
-export default function resizable({ direction = "horizontal", ...a }, child) {
-    if (isMobileView) {
-        return child;
-    }
-    return XNode.create("div", { ...a, "data-resizable": "resizable", "data-direction": direction },
-        child,
-        XNode.create("div", { "data-element": "resizer", "event-pointerdown": pointerDown }));
-}
-//# sourceMappingURL=Resizable.js.map
+export default function resizable({
+  direction = "horizontal",
+  ...a
+}, child) {
+  if (isMobileView) {
+    return child;
+  }
+  return XNode.create("div", {
+    ...a,
+    "data-resizable": "resizable",
+    "data-direction": direction
+  }, child, XNode.create("div", {
+    "data-element": "resizer",
+    "event-pointerdown": pointerDown
+  }));
+}

package/dist-esm/basic/Select.js

@@ -1,80 +1,87 @@
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 const labelPathSetter = AtomControl.registerProperty("data-items", "value", (ctrl, element, value) => {
-    element["labelPath"] = value;
+  element["labelPath"] = value;
 });
 const valuePathSetter = AtomControl.registerProperty("data-items", "value", (ctrl, element, value) => {
-    element["valuePath"] = value;
+  element["valuePath"] = value;
 });
 const valueSetter = AtomControl.registerProperty("data-items", "value", (ctrl, element, value) => {
-    element["initialValue"] = value;
-    element["value"] = value;
-    const select = element;
-    let length = select.options.length;
-    if (!length) {
-        setTimeout(refreshItems, 1, element);
-        return;
-    }
-    const items = element["items"];
-    if (!items) {
-        setTimeout(refreshItems, 1, element);
-        return;
-    }
-    const vp = element["valuePath"] ?? ((item) => item?.value ?? item);
-    let index = 0;
-    for (const item of items) {
-        const v = vp(item);
-        if (v == value) {
-            select.selectedIndex = index;
-            return;
-        }
-        index++;
-    }
+  element["initialValue"] = value;
+  element["value"] = value;
+  const select = element;
+  let length = select.options.length;
+  if (!length) {
     setTimeout(refreshItems, 1, element);
+    return;
+  }
+  const items = element["items"];
+  if (!items) {
+    setTimeout(refreshItems, 1, element);
+    return;
+  }
+  const vp = element["valuePath"] ?? (item => item?.value ?? item);
+  let index = 0;
+  for (const item of items) {
+    const v = vp(item);
+    if (v == value) {
+      select.selectedIndex = index;
+      return;
+    }
+    index++;
+  }
+  setTimeout(refreshItems, 1, element);
 });
 const refreshItems = (element, items) => {
-    items ??= element["items"];
-    element.update = true;
-    const old = element.selectedIndex;
-    let cv = element["initialValue"];
-    if (old !== -1) {
-        cv = element["value"];
-    }
-    element.options.length = 0;
-    const lp = element["labelPath"] ?? ((item) => item?.label ?? item);
-    const vp = element["valuePath"] ?? ((item) => item?.value ?? item);
-    let i = 0;
-    let si = -1;
-    if (items?.length) {
-        for (const iterator of items) {
-            const option = document.createElement("option");
-            const label = lp(iterator);
-            const value = vp(iterator);
-            option.text = label;
-            option.value = value;
-            element.options.add(option);
-            if (cv !== void 0) {
-                if (cv == value) {
-                    si = i;
-                }
-            }
-            i++;
+  items ??= element["items"];
+  element.update = true;
+  const old = element.selectedIndex;
+  let cv = element["initialValue"];
+  if (old !== -1) {
+    cv = element["value"];
+  }
+  element.options.length = 0;
+  const lp = element["labelPath"] ?? (item => item?.label ?? item);
+  const vp = element["valuePath"] ?? (item => item?.value ?? item);
+  let i = 0;
+  let si = -1;
+  if (items?.length) {
+    for (const iterator of items) {
+      const option = document.createElement("option");
+      const label = lp(iterator);
+      const value = vp(iterator);
+      option.text = label;
+      option.value = value;
+      element.options.add(option);
+      if (cv !== void 0) {
+        if (cv == value) {
+          si = i;
         }
+      }
+      i++;
     }
-    if (si != -1) {
-        element.selectedIndex = si;
-    }
-    element.update = false;
+  }
+  if (si != -1) {
+    element.selectedIndex = si;
+  }
+  element.update = false;
 };
 const itemsSetter = AtomControl.registerProperty("data-items", "value", (ctrl, element, value) => {
-    element["items"] = value;
-    setTimeout(refreshItems, 1, element, value);
+  element["items"] = value;
+  setTimeout(refreshItems, 1, element, value);
 });
-export default function Select({ items, labelPath, valuePath, value, ...a }) {
-    a[labelPathSetter.property] = labelPath;
-    a[valuePathSetter.property] = valuePath;
-    a[valueSetter.property] = value;
-    a[itemsSetter.property] = items;
-    return XNode.create("select", { ...a });
-}
-//# sourceMappingURL=Select.js.map
+export default function Select({
+  items,
+  labelPath,
+  valuePath,
+  value,
+  ...a
+}) {
+  a[labelPathSetter.property] = labelPath;
+  a[valuePathSetter.property] = valuePath;
+  a[valueSetter.property] = value;
+  a[itemsSetter.property] = items;
+  return XNode.create("select", {
+    ...a
+  });
+}

package/dist-esm/basic/SortByButton.global.css

@@ -0,0 +1,2 @@
+sort-by-button{align-items:center;display:flex;flex-direction:row;gap:5px}sort-by-button i.sort{opacity:.2}sort-by-button[data-sort=true] i.sort{opacity:1}
+/*# sourceMappingURL=SortByButton.global.css.map */

package/dist-esm/basic/SortByButton.global.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/basic/SortByButton.global.css"],"names":[],"mappings":"AAAA,eAII,kBAAmB,CAHnB,YAAa,CACb,kBAAmB,CACnB,OAUJ,CARI,sBACI,UACJ,CAEI,sCACI,SACJ","file":"SortByButton.global.css"}

package/dist-esm/basic/SortByButton.js

@@ -1,34 +1,44 @@
 import Bind from "@web-atoms/core/dist/core/Bind.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-import "./SortByButton.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./SortByButton.global.css"));
 const BindRepeater = Bind.forControl();
-export default function SortByButton({ header, icon = void 0, orderBy, orderByDesc, defaultOrder = "asc" }) {
-    const css = (a) => {
-        if (a === orderBy) {
-            return "fad fa-sort";
-        }
-        if (a === orderByDesc) {
-            return "fad fa-sort fa-flip-vertical";
-        }
-        return "";
-    };
-    return XNode.create("sort-by-button", { "event-click": BindRepeater.event((s) => {
-            if (s.orderBy === orderBy) {
-                s.orderBy = orderByDesc;
-                return;
-            }
-            if (s.orderBy === orderByDesc) {
-                s.orderBy = orderBy;
-                return;
-            }
-            if (defaultOrder === "desc") {
-                s.orderBy = orderByDesc;
-                return;
-            }
-            s.orderBy = orderBy;
-        }) },
-        icon && XNode.create("i", { class: "icon" }),
-        XNode.create("label", { text: header }),
-        XNode.create("i", { class: BindRepeater.oneWay((x) => css(x.orderBy)) }));
-}
-//# sourceMappingURL=SortByButton.js.map
+export default function SortByButton({
+  header,
+  icon = void 0,
+  orderBy,
+  orderByDesc,
+  defaultOrder = "asc"
+}) {
+  const css = a => {
+    if (a === orderBy) {
+      return "fad fa-sort";
+    }
+    if (a === orderByDesc) {
+      return "fad fa-sort fa-flip-vertical";
+    }
+    return "";
+  };
+  return XNode.create("sort-by-button", {
+    "event-click": BindRepeater.event(s => {
+      if (s.orderBy === orderBy) {
+        s.orderBy = orderByDesc;
+        return;
+      }
+      if (s.orderBy === orderByDesc) {
+        s.orderBy = orderBy;
+        return;
+      }
+      if (defaultOrder === "desc") {
+        s.orderBy = orderByDesc;
+        return;
+      }
+      s.orderBy = orderBy;
+    })
+  }, icon && XNode.create("i", {
+    class: "icon"
+  }), XNode.create("label", {
+    text: header
+  }), XNode.create("i", {
+    class: BindRepeater.oneWay(x => css(x.orderBy))
+  }));
+}

package/dist-esm/basic/Swipe.js

@@ -1,97 +1,104 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-import "./styles/swipe.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/swipe.global.css"));
 let swipeStart = null;
-document.body.addEventListener("touchstart", (e) => {
-    let element = e.target;
-    if (e.touches.length > 1) {
-        return;
+document.body.addEventListener("touchstart", e => {
+  let element = e.target;
+  if (e.touches.length > 1) {
+    return;
+  }
+  while (element) {
+    if (element.dataset.swipe) {
+      break;
     }
-    while (element) {
-        if (element.dataset.swipe) {
-            break;
-        }
-        element = element.parentElement;
+    element = element.parentElement;
+  }
+  if (!element) {
+    return;
+  }
+  const {
+    left
+  } = element.getBoundingClientRect();
+  swipeStart = {
+    element,
+    x: e.touches[0].screenX - left
+  };
+});
+document.body.addEventListener("touchmove", e => {
+  let element = e.target;
+  if (!swipeStart || e.touches.length > 1) {
+    return;
+  }
+  let swipe;
+  while (element) {
+    swipe = element.dataset.swipe;
+    if (swipe) {
+      break;
     }
-    if (!element) {
-        return;
+    element = element.parentElement;
+  }
+  if (!element) {
+    return;
+  }
+  const {
+    left
+  } = element.getBoundingClientRect();
+  const cx = e.touches[0].screenX - left;
+  const {
+    x
+  } = swipeStart;
+  let diff = cx - x;
+  if (diff > 0) {
+    if (swipe !== "right") {
+      return;
     }
-    const { left } = element.getBoundingClientRect();
-    swipeStart = {
-        element,
-        x: e.touches[0].screenX - left
-    };
-});
-document.body.addEventListener("touchmove", (e) => {
-    let element = e.target;
-    if (!swipeStart || e.touches.length > 1) {
-        return;
+  } else {
+    if (swipe !== "left") {
+      return;
     }
-    let swipe;
-    while (element) {
-        swipe = element.dataset.swipe;
-        if (swipe) {
-            break;
-        }
-        element = element.parentElement;
+    let content = element.firstElementChild;
+    let maxMargin = 0;
+    let child = content?.nextElementSibling;
+    let count = 0;
+    while (child) {
+      maxMargin += child.offsetWidth;
+      count++;
+      child = child.nextElementSibling;
     }
-    if (!element) {
-        return;
+    let margin = -diff;
+    if (maxMargin && margin > maxMargin) {
+      margin = maxMargin;
     }
-    const { left } = element.getBoundingClientRect();
-    const cx = e.touches[0].screenX - left;
-    const { x } = swipeStart;
-    let diff = cx - x;
-    if (diff > 0) {
-        if (swipe !== "right") {
-            return;
-        }
+    if (margin <= 5) {
+      delete content.style.marginRight;
+      delete content.style.transform;
+      child = content?.nextElementSibling;
+      while (child) {
+        delete child.style.marginRight;
+        child = child.nextElementSibling;
+      }
+      return;
     }
-    else {
-        if (swipe !== "left") {
-            return;
-        }
-        let content = element.firstElementChild;
-        let maxMargin = 0;
-        let child = content?.nextElementSibling;
-        let count = 0;
-        while (child) {
-            maxMargin += child.offsetWidth;
-            count++;
-            child = child.nextElementSibling;
-        }
-        let margin = -diff;
-        if (maxMargin && margin > maxMargin) {
-            margin = maxMargin;
-        }
-        if (margin <= 5) {
-            delete content.style.marginRight;
-            delete content.style.transform;
-            child = content?.nextElementSibling;
-            while (child) {
-                delete child.style.marginRight;
-                child = child.nextElementSibling;
-            }
-            return;
-        }
-        content.style.marginRight = `${margin}px`;
-        content.style.transform = `translateX(-${margin}px)`;
-        let avgMargin = Math.ceil(margin / count);
-        child = content?.nextElementSibling;
-        while (child) {
-            count--;
-            if (count === 0) {
-                break;
-            }
-            let m = (avgMargin * count) + 5;
-            child.style.marginRight = `${m}px`;
-            child = child.nextElementSibling;
-        }
+    content.style.marginRight = `${margin}px`;
+    content.style.transform = `translateX(-${margin}px)`;
+    let avgMargin = Math.ceil(margin / count);
+    child = content?.nextElementSibling;
+    while (child) {
+      count--;
+      if (count === 0) {
+        break;
+      }
+      let m = avgMargin * count + 5;
+      child.style.marginRight = `${m}px`;
+      child = child.nextElementSibling;
     }
+  }
 });
-document.body.addEventListener("touchend", (e) => {
-    swipeStart = null;
+document.body.addEventListener("touchend", e => {
+  swipeStart = null;
 });
 export function SwipeLeft(a, ...nodes) {
-    return XNode.create("div", { "data-swipe": "left", ...a }, ...nodes);
-}
-//# sourceMappingURL=Swipe.js.map
+  return XNode.create("div", {
+    "data-swipe": "left",
+    ...a
+  }, ...nodes);
+}

package/dist-esm/basic/Switch.js

@@ -1,9 +1,23 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-import "./styles/switch.global.css";
-export default function Switch({ checked, onLabel, offLabel, ...a }) {
-    return XNode.create("label", { "data-ui-switch": "ui-switch", ...a },
-        XNode.create("input", { class: "switch-input", type: "checkbox", checked: checked }),
-        XNode.create("span", { class: "switch-label", "data-on": onLabel ?? "On", "data-off": offLabel ?? "Off" }),
-        XNode.create("span", { class: "switch-handle" }));
-}
-//# sourceMappingURL=Switch.js.map
+ESMPack.installStyleSheet(import.meta.resolve("./styles/switch.global.css"));
+export default function Switch({
+  checked,
+  onLabel,
+  offLabel,
+  ...a
+}) {
+  return XNode.create("label", {
+    "data-ui-switch": "ui-switch",
+    ...a
+  }, XNode.create("input", {
+    class: "switch-input",
+    type: "checkbox",
+    checked: checked
+  }), XNode.create("span", {
+    class: "switch-label",
+    "data-on": onLabel ?? "On",
+    "data-off": offLabel ?? "Off"
+  }), XNode.create("span", {
+    class: "switch-handle"
+  }));
+}

package/dist-esm/basic/TableRepeater.js

@@ -1,37 +1,33 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import AtomRepeater from "./AtomRepeater.js";
 export default class TableRepeater extends AtomRepeater {
-    constructor(app, e = document.createElement("table")) {
-        super(app, e);
+  constructor(app, e = document.createElement("table")) {
+    super(app, e);
+  }
+  onPropertyChanged(name) {
+    super.onPropertyChanged(name);
+    switch (name) {
+      case "header":
+      case "headerRenderer":
+        this.updateHeaderFooter("header", this.headerPresenter, this.header, this.headerRenderer);
+        break;
+      case "footer":
+      case "footerRenderer":
+        this.updateHeaderFooter("footer", this.footerPresenter, this.footer, this.footerRenderer);
+        break;
     }
-    onPropertyChanged(name) {
-        super.onPropertyChanged(name);
-        switch (name) {
-            case "header":
-            case "headerRenderer":
-                this.updateHeaderFooter("header", this.headerPresenter, this.header, this.headerRenderer);
-                break;
-            case "footer":
-            case "footerRenderer":
-                this.updateHeaderFooter("footer", this.footerPresenter, this.footer, this.footerRenderer);
-                break;
-        }
-    }
-    preCreate() {
-        super.preCreate();
-        this.preRender();
-        this.onPropertyChanged("header");
-        this.onPropertyChanged("footer");
-    }
-    preRender() {
-        this.element.dataset.tableRepeater = "table-repeater";
-        this.render(XNode.create("table", null,
-            XNode.create("thead", null),
-            XNode.create("tbody", null),
-            XNode.create("tfoot", null)));
-        this.itemsPresenter = this.element.querySelector("tbody");
-        this.headerPresenter = this.element.firstElementChild;
-        this.footerPresenter = this.element.lastElementChild;
-    }
-}
-//# sourceMappingURL=TableRepeater.js.map
+  }
+  preCreate() {
+    super.preCreate();
+    this.preRender();
+    this.onPropertyChanged("header");
+    this.onPropertyChanged("footer");
+  }
+  preRender() {
+    this.element.dataset.tableRepeater = "table-repeater";
+    this.render(XNode.create("table", null, XNode.create("thead", null), XNode.create("tbody", null), XNode.create("tfoot", null)));
+    this.itemsPresenter = this.element.querySelector("tbody");
+    this.headerPresenter = this.element.firstElementChild;
+    this.footerPresenter = this.element.lastElementChild;
+  }
+}