@web-atoms/web-controls 2.6.5 → 2.6.6

package/dist-esm/basic/DropDownInput.js

@@ -4,116 +4,88 @@ import XNode from "@web-atoms/core/dist/core/XNode.js";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
 import { askSuggestionPopup, MatchAnyCaseInsensitive } from "./AtomRepeater.js";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
-import "./DropDownInput.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./DropDownInput.global.css"));
 export default class DropDownInput extends AtomControl {
-    constructor(app, e = document.createElement("drop-down-input")) {
-        super(app, e);
-    }
-    onPropertyChanged(name) {
-        super.onPropertyChanged(name);
-        switch (name) {
-            case "search":
-                if (this.search) {
-                    this.openPopup().catch(console.error);
-                }
-                break;
+  constructor(app, e = document.createElement("drop-down-input")) {
+    super(app, e);
+  }
+  onPropertyChanged(name) {
+    super.onPropertyChanged(name);
+    switch (name) {
+      case "search":
+        if (this.search) {
+          this.openPopup().catch(console.error);
         }
+        break;
     }
-    preCreate() {
-        this.items = null;
-        this.value = null;
-        this.selectedItem = null;
-        this.labelPath = (x) => x?.label ?? x;
-        this.valuePath = (x) => x?.value ?? x;
-        this.itemRenderer = (x) => XNode.create("div", { text: this.labelPath?.(x) ?? x });
-        this.search = "";
-        this.label = "";
-        this.isPopupOpen = false;
-        this.disableSearch = true;
-        this.render(XNode.create("div", { "event-click": () => this.input.focus() },
-            XNode.create("input", { autofocus: Bind.oneTime(() => this.autofocus), "event-focus": () => this.onFocus(), value: Bind.twoWaysImmediate(() => this.search) }),
-            XNode.create("label", { text: Bind.oneWay((x) => this.labelPath(this.items?.find((i) => this.valuePath(i) === this.value))) }),
-            XNode.create("i", null)));
-        this.input = this.element.querySelector("input");
-        this.labelElement = this.element.querySelector("label");
+  }
+  preCreate() {
+    this.items = null;
+    this.value = null;
+    this.selectedItem = null;
+    this.labelPath = x => x?.label ?? x;
+    this.valuePath = x => x?.value ?? x;
+    this.itemRenderer = x => XNode.create("div", {
+      text: this.labelPath?.(x) ?? x
+    });
+    this.search = "";
+    this.label = "";
+    this.isPopupOpen = false;
+    this.disableSearch = true;
+    this.render(XNode.create("div", {
+      "event-click": () => this.input.focus()
+    }, XNode.create("input", {
+      autofocus: Bind.oneTime(() => this.autofocus),
+      "event-focus": () => this.onFocus(),
+      value: Bind.twoWaysImmediate(() => this.search)
+    }), XNode.create("label", {
+      text: Bind.oneWay(x => this.labelPath(this.items?.find(i => this.valuePath(i) === this.value)))
+    }), XNode.create("i", null)));
+    this.input = this.element.querySelector("input");
+    this.labelElement = this.element.querySelector("label");
+  }
+  onFocus() {
+    const value = this.value;
+    if (value) {
+      const item = this.items.find(i => this.valuePath?.(i) == value);
+      this.input.placeholder = item ? this.labelPath(item) : this.label;
     }
-    onFocus() {
-        const value = this.value;
-        if (value) {
-            const item = this.items.find((i) => this.valuePath?.(i) == value);
-            this.input.placeholder = item ? this.labelPath(item) : this.label;
-        }
-        this.input.value = "";
-        this.app.runAsync(() => this.openPopup());
+    this.input.value = "";
+    this.app.runAsync(() => this.openPopup());
+  }
+  async openPopup() {
+    if (this.isPopupOpen) {
+      return;
     }
-    async openPopup() {
-        if (this.isPopupOpen) {
-            return;
-        }
-        this.isPopupOpen = true;
-        try {
-            let selectedItem = this.items.find((i) => this.value === (this.valuePath?.(i) ?? i));
-            this.anchorItem = selectedItem;
-            this.selectedItem = selectedItem;
-            const newItem = await askSuggestionPopup(this, this.items, this.itemRenderer, this.match ?? MatchAnyCaseInsensitive(this.labelPath), selectedItem);
-            if (newItem !== selectedItem) {
-                this.selectedItem = selectedItem;
-                this.value = this.valuePath?.(newItem) ?? newItem;
-                this.element.dispatchEvent(new CustomEvent("selectionChanged", {
-                    bubbles: true,
-                    detail: newItem,
-                    cancelable: true
-                }));
-                this.input.placeholder = this.label;
-            }
-        }
-        finally {
-            this.isPopupOpen = false;
-        }
+    this.isPopupOpen = true;
+    try {
+      let selectedItem = this.items.find(i => this.value === (this.valuePath?.(i) ?? i));
+      this.anchorItem = selectedItem;
+      this.selectedItem = selectedItem;
+      const newItem = await askSuggestionPopup(this, this.items, this.itemRenderer, this.match ?? MatchAnyCaseInsensitive(this.labelPath), selectedItem);
+      if (newItem !== selectedItem) {
+        this.selectedItem = selectedItem;
+        this.value = this.valuePath?.(newItem) ?? newItem;
+        this.element.dispatchEvent(new CustomEvent("selectionChanged", {
+          bubbles: true,
+          detail: newItem,
+          cancelable: true
+        }));
+        this.input.placeholder = this.label;
+      }
+    } finally {
+      this.isPopupOpen = false;
     }
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Boolean)
-], DropDownInput.prototype, "popupSuggestions", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], DropDownInput.prototype, "search", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], DropDownInput.prototype, "prompt", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], DropDownInput.prototype, "suggestionPrompt", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Boolean)
-], DropDownInput.prototype, "autofocus", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], DropDownInput.prototype, "itemRenderer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], DropDownInput.prototype, "labelPath", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], DropDownInput.prototype, "valuePath", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], DropDownInput.prototype, "match", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], DropDownInput.prototype, "suggestionRenderer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], DropDownInput.prototype, "selectedItem", void 0);
-//# sourceMappingURL=DropDownInput.js.map
+__decorate([BindableProperty, __metadata("design:type", Boolean)], DropDownInput.prototype, "popupSuggestions", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], DropDownInput.prototype, "search", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], DropDownInput.prototype, "prompt", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], DropDownInput.prototype, "suggestionPrompt", void 0);
+__decorate([BindableProperty, __metadata("design:type", Boolean)], DropDownInput.prototype, "autofocus", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], DropDownInput.prototype, "itemRenderer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], DropDownInput.prototype, "labelPath", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], DropDownInput.prototype, "valuePath", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], DropDownInput.prototype, "match", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], DropDownInput.prototype, "suggestionRenderer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], DropDownInput.prototype, "selectedItem", void 0);

package/dist-esm/basic/Editable.js

@@ -1,91 +1,96 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import { getParentRepeaterItem } from "./AtomRepeater.js";
 export function getPropertyInfo(propertyPath) {
-    if (typeof propertyPath === "string") {
-        return {
-            key: propertyPath,
-            getter: (item) => item?.[propertyPath],
-            setter: (item, value) => {
-                if (item) {
-                    item[propertyPath] = value;
-                }
-            }
-        };
-    }
-    if (!Array.isArray(propertyPath)) {
-        return propertyPath;
-    }
-    const last = propertyPath.pop();
-    let getterIntermediate;
-    if (propertyPath.length > 0) {
-        getterIntermediate = (item) => {
-            if (!item) {
-                return item;
-            }
-            for (const iterator of propertyPath) {
-                item = item[iterator];
-                if (!item) {
-                    return item;
-                }
-            }
-            return item;
-        };
-    }
-    const setter = (item, value) => {
+  if (typeof propertyPath === "string") {
+    return {
+      key: propertyPath,
+      getter: item => item?.[propertyPath],
+      setter: (item, value) => {
         if (item) {
-            if (getterIntermediate) {
-                item = getterIntermediate(item);
-            }
-            if (item) {
-                item[last] = value;
-            }
+          item[propertyPath] = value;
         }
+      }
     };
-    const getter = (item) => {
+  }
+  if (!Array.isArray(propertyPath)) {
+    return propertyPath;
+  }
+  const last = propertyPath.pop();
+  let getterIntermediate;
+  if (propertyPath.length > 0) {
+    getterIntermediate = item => {
+      if (!item) {
+        return item;
+      }
+      for (const iterator of propertyPath) {
+        item = item[iterator];
         if (!item) {
-            return item;
+          return item;
         }
-        if (getterIntermediate) {
-            item = getterIntermediate(item);
-        }
-        return item?.[last];
-    };
-    return {
-        key: propertyPath.join(","),
-        getter,
-        setter
+      }
+      return item;
     };
+  }
+  const setter = (item, value) => {
+    if (item) {
+      if (getterIntermediate) {
+        item = getterIntermediate(item);
+      }
+      if (item) {
+        item[last] = value;
+      }
+    }
+  };
+  const getter = item => {
+    if (!item) {
+      return item;
+    }
+    if (getterIntermediate) {
+      item = getterIntermediate(item);
+    }
+    return item?.[last];
+  };
+  return {
+    key: propertyPath.join(","),
+    getter,
+    setter
+  };
 }
 const handlers = {};
 function registerEvent(property, changeEvents, editorValuePath) {
-    property.key ??= property.setter + ":" + property.getter;
-    const name = `${property.key}:${changeEvents.join(",")}`;
-    if (!handlers[name]) {
-        handlers[name] = changeEvents;
-        for (const iterator of changeEvents) {
-            document.body.addEventListener(iterator, (e) => {
-                setTimeout(() => {
-                    const ri = getParentRepeaterItem(e.target);
-                    if (!ri) {
-                        return;
-                    }
-                    const [_, repeater, item] = ri;
-                    const oldValue = property.getter(item);
-                    const value = editorValuePath(e.target);
-                    if (oldValue != value) {
-                        property.setter(item, value);
-                        repeater.refreshItem(item);
-                    }
-                }, 1);
-            }, true);
-        }
-    }
-}
-export function EditableInput({ propertyPath, ...a }) {
-    if (typeof propertyPath === "string" || Array.isArray(propertyPath)) {
-        propertyPath = getPropertyInfo(propertyPath);
+  property.key ??= property.setter + ":" + property.getter;
+  const name = `${property.key}:${changeEvents.join(",")}`;
+  if (!handlers[name]) {
+    handlers[name] = changeEvents;
+    for (const iterator of changeEvents) {
+      document.body.addEventListener(iterator, e => {
+        setTimeout(() => {
+          const ri = getParentRepeaterItem(e.target);
+          if (!ri) {
+            return;
+          }
+          const [_, repeater, item] = ri;
+          const oldValue = property.getter(item);
+          const value = editorValuePath(e.target);
+          if (oldValue != value) {
+            property.setter(item, value);
+            repeater.refreshItem(item);
+          }
+        }, 1);
+      }, true);
     }
-    registerEvent(propertyPath, ["change", "blur"], (item) => item.value);
-    return XNode.create("input", { type: "text", ...a });
+  }
 }
-//# sourceMappingURL=Editable.js.map
+export function EditableInput({
+  propertyPath,
+  ...a
+}) {
+  if (typeof propertyPath === "string" || Array.isArray(propertyPath)) {
+    propertyPath = getPropertyInfo(propertyPath);
+  }
+  registerEvent(propertyPath, ["change", "blur"], item => item.value);
+  return XNode.create("input", {
+    type: "text",
+    ...a
+  });
+}

package/dist-esm/basic/Expander.js

@@ -1,91 +1,109 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-import "./styles/expander.global.css";
-document.body.addEventListener("click", (e) => {
-    if (e.defaultPrevented) {
-        return;
+ESMPack.installStyleSheet(import.meta.resolve("./styles/expander.global.css"));
+document.body.addEventListener("click", e => {
+  if (e.defaultPrevented) {
+    return;
+  }
+  let start = e.target;
+  while (start) {
+    if (/icon|caret|header/.test(start.getAttribute("data-element"))) {
+      break;
     }
-    let start = e.target;
-    while (start) {
-        if (/icon|caret|header/.test(start.getAttribute("data-element"))) {
-            break;
-        }
-        start = start.parentElement;
-    }
-    start = start?.parentElement;
-    if (!start) {
-        return;
-    }
-    const isExpander = start?.getAttribute("data-is-expander");
-    if (!/^(menu|expander)$/i.test(isExpander)) {
-        return;
-    }
-    const ds = start.dataset;
-    if (/menu/i.test(isExpander)) {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-    }
-    if (ds.isExpanded === "false") {
-        start.dispatchEvent(new CustomEvent("expanded", { bubbles: true, cancelable: true }));
-    }
-    else {
-        start.dispatchEvent(new CustomEvent("collapsed", { bubbles: true, cancelable: true }));
-    }
-}, { capture: true });
-document.body.addEventListener("expanded", (ce) => {
-    if (ce.defaultPrevented) {
-        return;
-    }
-    const target = ce.target;
-    target.dataset.isExpanded = "true";
+    start = start.parentElement;
+  }
+  start = start?.parentElement;
+  if (!start) {
+    return;
+  }
+  const isExpander = start?.getAttribute("data-is-expander");
+  if (!/^(menu|expander)$/i.test(isExpander)) {
+    return;
+  }
+  const ds = start.dataset;
+  if (/menu/i.test(isExpander)) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+  if (ds.isExpanded === "false") {
+    start.dispatchEvent(new CustomEvent("expanded", {
+      bubbles: true,
+      cancelable: true
+    }));
+  } else {
+    start.dispatchEvent(new CustomEvent("collapsed", {
+      bubbles: true,
+      cancelable: true
+    }));
+  }
+}, {
+  capture: true
 });
-document.body.addEventListener("collapsed", (ce) => {
-    if (ce.defaultPrevented) {
-        return;
-    }
-    const target = ce.target;
-    target.dataset.isExpanded = "false";
+document.body.addEventListener("expanded", ce => {
+  if (ce.defaultPrevented) {
+    return;
+  }
+  const target = ce.target;
+  target.dataset.isExpanded = "true";
 });
-export default function Expander({ icon, isExpanded, ...a }, header, detail) {
-    if (!detail) {
-        throw new Error("Expander must contain two children, one header and one detail");
-    }
-    const ha = header.attributes ??= {};
-    const da = detail.attributes ??= {};
-    ha["data-element"] = "header";
-    da["data-element"] = "detail";
-    const iconElement = !icon
-        ? []
-        : (Array.isArray(icon)
-            ? icon
-            : [icon]).map((i) => XNode.create("i", { "data-element": "icon", class: i }));
-    return XNode.create("div", { "data-is-expander": "expander", "data-is-expanded": isExpanded, ...a },
-        ...iconElement,
-        header,
-        XNode.create("i", { "data-element": "caret", class: "fas fa-angle-down" }),
-        detail);
-}
-export function ExpanderMenu({ icon, isExpanded, ...a }, header, ...details) {
-    if (details.length === 0) {
-        throw new Error("Expander must contain two children, one header and one detail");
-    }
-    const ha = header.attributes ??= {};
-    ha["data-element"] = "header";
-    let i = 2;
-    details = details.filter((x) => x !== false);
-    for (const iterator of details) {
-        const ia = (iterator.attributes ??= {});
-        ia["data-element"] = "detail";
-        ia["style-grid-row-start"] = (i++).toString();
-    }
-    const iconElement = !icon
-        ? []
-        : (Array.isArray(icon)
-            ? icon
-            : [icon]).map((i) => XNode.create("i", { "data-element": "icon", class: i }));
-    return XNode.create("div", { "data-is-expander": "menu", "data-is-expanded": isExpanded, ...a },
-        ...iconElement,
-        header,
-        XNode.create("i", { "data-element": "caret", class: "fas fa-angle-down" }),
-        ...details);
+document.body.addEventListener("collapsed", ce => {
+  if (ce.defaultPrevented) {
+    return;
+  }
+  const target = ce.target;
+  target.dataset.isExpanded = "false";
+});
+export default function Expander({
+  icon,
+  isExpanded,
+  ...a
+}, header, detail) {
+  if (!detail) {
+    throw new Error("Expander must contain two children, one header and one detail");
+  }
+  const ha = header.attributes ??= {};
+  const da = detail.attributes ??= {};
+  ha["data-element"] = "header";
+  da["data-element"] = "detail";
+  const iconElement = !icon ? [] : (Array.isArray(icon) ? icon : [icon]).map(i => XNode.create("i", {
+    "data-element": "icon",
+    class: i
+  }));
+  return XNode.create("div", {
+    "data-is-expander": "expander",
+    "data-is-expanded": isExpanded,
+    ...a
+  }, ...iconElement, header, XNode.create("i", {
+    "data-element": "caret",
+    class: "fas fa-angle-down"
+  }), detail);
 }
-//# sourceMappingURL=Expander.js.map
+export function ExpanderMenu({
+  icon,
+  isExpanded,
+  ...a
+}, header, ...details) {
+  if (details.length === 0) {
+    throw new Error("Expander must contain two children, one header and one detail");
+  }
+  const ha = header.attributes ??= {};
+  ha["data-element"] = "header";
+  let i = 2;
+  details = details.filter(x => x !== false);
+  for (const iterator of details) {
+    const ia = iterator.attributes ??= {};
+    ia["data-element"] = "detail";
+    ia["style-grid-row-start"] = (i++).toString();
+  }
+  const iconElement = !icon ? [] : (Array.isArray(icon) ? icon : [icon]).map(i => XNode.create("i", {
+    "data-element": "icon",
+    class: i
+  }));
+  return XNode.create("div", {
+    "data-is-expander": "menu",
+    "data-is-expanded": isExpanded,
+    ...a
+  }, ...iconElement, header, XNode.create("i", {
+    "data-element": "caret",
+    class: "fas fa-angle-down"
+  }), ...details);
+}