@web-atoms/web-controls 2.6.4 → 2.6.6

package/dist-esm/basic/AtomSuggestions.js

@@ -3,119 +3,109 @@ import Bind from "@web-atoms/core/dist/core/Bind.js";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import AtomRepeater, { askSuggestion, askSuggestionPopup } from "./AtomRepeater.js";
-import "./styles/suggestion.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/suggestion.global.css"));
 export default class AtomSuggestions extends AtomRepeater {
-    constructor() {
-        super(...arguments);
-        this.isPopupOpen = false;
-    }
-    onPropertyChanged(name) {
-        super.onPropertyChanged(name);
-        switch (name) {
-            case "selectedItems":
-                this.selectedItemsWatcher?.dispose();
-                const si = this.selectedItems;
-                if (!si) {
-                    this.selectedItemsWatcher = null;
-                    return;
-                }
-                const d = si.watch(() => this.version++);
-                this.selectedItemsWatcher = this.registerDisposable(d);
-                this.version++;
-                break;
-            case "version":
-            case "search":
-            case "items":
-                this.updateVisibilityFilter();
-                break;
+  constructor() {
+    super(...arguments);
+    this.isPopupOpen = false;
+  }
+  onPropertyChanged(name) {
+    super.onPropertyChanged(name);
+    switch (name) {
+      case "selectedItems":
+        this.selectedItemsWatcher?.dispose();
+        const si = this.selectedItems;
+        if (!si) {
+          this.selectedItemsWatcher = null;
+          return;
         }
+        const d = si.watch(() => this.version++);
+        this.selectedItemsWatcher = this.registerDisposable(d);
+        this.version++;
+        break;
+      case "version":
+      case "search":
+      case "items":
+        this.updateVisibilityFilter();
+        break;
     }
-    updateVisibilityFilter() {
-        const vp = this.valuePath ?? ((item) => item);
-        const selectedItems = this.selectedItems ?? [];
-        const selectedValues = selectedItems.map(vp);
-        const search = this.match(this.search);
-        this.visibilityFilter = (item) => {
-            const v = vp(item);
-            if (!search(item)) {
-                return false;
-            }
-            return selectedValues.length === 0 || selectedValues.indexOf(v) === -1;
-        };
+  }
+  updateVisibilityFilter() {
+    const vp = this.valuePath ?? (item => item);
+    const selectedItems = this.selectedItems ?? [];
+    const selectedValues = selectedItems.map(vp);
+    const search = this.match(this.search);
+    this.visibilityFilter = item => {
+      const v = vp(item);
+      if (!search(item)) {
+        return false;
+      }
+      return selectedValues.length === 0 || selectedValues.indexOf(v) === -1;
+    };
+  }
+  create() {
+    this.version = 1;
+    this.search = "";
+    this.render(XNode.create("div", {
+      "data-suggestions": "suggestions",
+      eventItemClick: e => this.addItem(e.detail)
+    }, XNode.create("span", {
+      class: "header",
+      text: Bind.oneWay(() => this.title)
+    }), XNode.create("div", {
+      class: "items"
+    }), XNode.create("div", {
+      class: "more",
+      eventClick: Bind.event(() => this.more())
+    }, "More")));
+    this.itemsPresenter = this.element.children[1];
+    this.updateItems();
+  }
+  async more() {
+    if (this.isPopupOpen) {
+      return;
     }
-    create() {
-        this.version = 1;
-        this.search = "";
-        this.render(XNode.create("div", { "data-suggestions": "suggestions", eventItemClick: (e) => this.addItem(e.detail) },
-            XNode.create("span", { class: "header", text: Bind.oneWay(() => this.title) }),
-            XNode.create("div", { class: "items" }),
-            XNode.create("div", { class: "more", eventClick: Bind.event(() => this.more()) }, "More")));
-        this.itemsPresenter = this.element.children[1];
-        this.updateItems();
+    this.isPopupOpen = true;
+    try {
+      const vf = this.visibilityFilter ?? (item => true);
+      if (!this.popupSuggestions) {
+        const selected = await askSuggestion(this.items.filter(vf), this.suggestionRenderer ?? this.itemRenderer, text => this.match(text), {
+          title: this.title
+        });
+        this.addItem(selected);
+        return;
+      }
+      const selectedItem = await askSuggestionPopup(this, this.items, this.suggestionRenderer ?? this.itemRenderer, text => this.match(text), this.selectedItem);
+      this.addItem(selectedItem);
+    } finally {
+      this.isPopupOpen = false;
     }
-    async more() {
-        if (this.isPopupOpen) {
+  }
+  addItem(selectedItem) {
+    const ce = new CustomEvent("itemSelected", {
+      bubbles: true,
+      detail: selectedItem,
+      cancelable: true
+    });
+    this.element.dispatchEvent(ce);
+    if (!ce.defaultPrevented) {
+      const selectedItem = ce.detail;
+      const vp = this.valuePath ?? (i => i);
+      const value = vp(selectedItem);
+      if (this.selectedItems) {
+        for (const iterator of this.selectedItems) {
+          if (vp(iterator) == value) {
             return;
+          }
         }
-        this.isPopupOpen = true;
-        try {
-            const vf = this.visibilityFilter ?? ((item) => true);
-            if (!this.popupSuggestions) {
-                const selected = await askSuggestion(this.items.filter(vf), this.suggestionRenderer ?? this.itemRenderer, (text) => this.match(text), { title: this.title });
-                this.addItem(selected);
-                return;
-            }
-            const selectedItem = await askSuggestionPopup(this, this.items, this.suggestionRenderer ?? this.itemRenderer, (text) => this.match(text), this.selectedItem);
-            this.addItem(selectedItem);
-        }
-        finally {
-            this.isPopupOpen = false;
-        }
-    }
-    addItem(selectedItem) {
-        const ce = new CustomEvent("itemSelected", {
-            bubbles: true,
-            detail: selectedItem,
-            cancelable: true
-        });
-        this.element.dispatchEvent(ce);
-        if (!ce.defaultPrevented) {
-            const selectedItem = ce.detail;
-            const vp = this.valuePath ?? ((i) => i);
-            const value = vp(selectedItem);
-            if (this.selectedItems) {
-                for (const iterator of this.selectedItems) {
-                    if (vp(iterator) == value) {
-                        return;
-                    }
-                }
-            }
-            this.selectedItems?.add(selectedItem);
-        }
+      }
+      this.selectedItems?.add(selectedItem);
     }
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], AtomSuggestions.prototype, "title", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], AtomSuggestions.prototype, "match", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], AtomSuggestions.prototype, "search", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Number)
-], AtomSuggestions.prototype, "version", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], AtomSuggestions.prototype, "suggestionRenderer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Boolean)
-], AtomSuggestions.prototype, "popupSuggestions", void 0);
-//# sourceMappingURL=AtomSuggestions.js.map
+__decorate([BindableProperty, __metadata("design:type", String)], AtomSuggestions.prototype, "title", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], AtomSuggestions.prototype, "match", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], AtomSuggestions.prototype, "search", void 0);
+__decorate([BindableProperty, __metadata("design:type", Number)], AtomSuggestions.prototype, "version", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], AtomSuggestions.prototype, "suggestionRenderer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Boolean)], AtomSuggestions.prototype, "popupSuggestions", void 0);

package/dist-esm/basic/AttachedPopup.js

@@ -1 +0,0 @@
-//# sourceMappingURL=AttachedPopup.js.map

package/dist-esm/basic/Button.js

@@ -1,23 +1,49 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-import "./Button.local.css";
+ESMPack.installStyleSheet(import.meta.resolve("./Button.local.css"));
 const css = "web-atoms-button";
-export default function Button({ id, icon, text, eventClick, href, target, title, styleDisplay, class: className, subClass }) {
-    console.warn("Deprecated, use data-layout=icon-button");
-    const cn = className ?? (subClass
-        ? subClass + " " + css
-        : css);
-    if (href) {
-        if (text) {
-            return XNode.create("a", { id: id, class: cn, target: target, title: title, styleDisplay: styleDisplay },
-                XNode.create("label", { class: "label" },
-                    XNode.create("i", { class: icon }),
-                    text && XNode.create("span", { text: text })));
-        }
+export default function Button({
+  id,
+  icon,
+  text,
+  eventClick,
+  href,
+  target,
+  title,
+  styleDisplay,
+  class: className,
+  subClass
+}) {
+  console.warn("Deprecated, use data-layout=icon-button");
+  const cn = className ?? (subClass ? subClass + " " + css : css);
+  if (href) {
+    if (text) {
+      return XNode.create("a", {
+        id: id,
+        class: cn,
+        target: target,
+        title: title,
+        styleDisplay: styleDisplay
+      }, XNode.create("label", {
+        class: "label"
+      }, XNode.create("i", {
+        class: icon
+      }), text && XNode.create("span", {
+        text: text
+      })));
     }
-    return XNode.create("button", { id: id, class: cn, eventClick: eventClick, title: title, styleDisplay: styleDisplay },
-        XNode.create("label", { class: "label" },
-            XNode.create("i", { class: icon }),
-            text && XNode.create("span", { text: text })));
+  }
+  return XNode.create("button", {
+    id: id,
+    class: cn,
+    eventClick: eventClick,
+    title: title,
+    styleDisplay: styleDisplay
+  }, XNode.create("label", {
+    class: "label"
+  }, XNode.create("i", {
+    class: icon
+  }), text && XNode.create("span", {
+    text: text
+  })));
 }
-Button.className = css;
-//# sourceMappingURL=Button.js.map
+Button.className = css;

package/dist-esm/basic/Button.local.css

@@ -0,0 +1,2 @@
+.web-atoms-button{background-color:transparent;border:1px solid rgba(0,0,0,.05);border-radius:9999px;box-shadow:0 2px 5px 0 rgba(50,50,105,.07),0 1px 1px 0 rgba(0,0,0,.03);cursor:pointer;display:inline-block;height:40px;margin-left:3px;margin-right:3px;min-width:40px;padding:8px}.web-atoms-button.pressed{background-color:#b0c4de}.web-atoms-button:hover{background-color:#90ee90}.web-atoms-button>label.label{align-items:center;display:flex;gap:5px}.web-atoms-button>label.label>.fad{color:purple;cursor:pointer;font-size:larger;width:100%}.web-atoms-button>label.label>.fad.red{color:red}.web-atoms-button>label.label>span{white-space:nowrap}
+/*# sourceMappingURL=Button.local.css.map */

package/dist-esm/basic/Button.local.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/basic/Button.local.css"],"names":[],"mappings":"AAAA,kBAWI,4BAA6B,CAF7B,gCAAqC,CALrC,oBAAqB,CAIrB,sEAAwF,CAExF,cAAe,CALf,oBAAqB,CACrB,WAAY,CAJZ,eAAgB,CAChB,gBAAiB,CAIjB,cAAe,CANf,WAkCJ,CAvBI,0BACI,wBACJ,CACA,wBACI,wBACJ,CACA,8BAEI,kBAAmB,CADnB,YAAa,CAEb,OAaJ,CAZI,mCAGI,YAAa,CACb,cAAe,CAHf,gBAAiB,CACjB,UAMJ,CAHI,uCACI,SACJ,CAEJ,mCACI,kBACJ","file":"Button.local.css"}

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

@@ -0,0 +1,2 @@
+button-bar{border:1px solid var(--button-border,#cccccc85);border-radius:10px;display:flex;flex-direction:row;overflow:hidden;place-self:start}button-bar>input.hidden{display:none}button-bar:has(input:focus){border-color:var(--selection-color,accentColor)}button-bar>label{align-items:center;display:flex;flex-direction:row;gap:5px;padding:2px 10px 2px 0}button-bar>label:has(input:checked){background-color:var(--selection-color,highlight);color:var(--selection-text-color,highlighttext)}button-bar>label>input[type=radio]{opacity:0;width:2px}
+/*# sourceMappingURL=ButtonBar.global.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/basic/ButtonBar.global.css"],"names":[],"mappings":"AAAA,WAII,+CAAiD,CACjD,kBAAmB,CAHnB,YAAa,CACb,kBAAmB,CAGnB,eAAgB,CAChB,gBA8BJ,CA5BI,wBACI,YACJ,CAEA,4BACI,+CACJ,CAEA,iBAGI,kBAAmB,CACnB,YAAa,CACb,kBAAmB,CAHnB,OAAQ,CAKR,sBAYJ,CAVI,oCACI,iDAAmD,CACnD,+CACJ,CAEA,mCACI,SAAU,CACV,SACJ","file":"ButtonBar.global.css"}

package/dist-esm/basic/ButtonBar.js

@@ -1,83 +1,103 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import "./ButtonBar.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./ButtonBar.global.css"));
 let nid = 1;
 const labelPathSetter = AtomControl.registerProperty("data-button-bar-items", "label", (ctrl, element, value) => {
-    element["labelPath"] = value;
+  element["labelPath"] = value;
 });
 const valuePathSetter = AtomControl.registerProperty("data-button-bar-items", "value", (ctrl, element, value) => {
-    element["valuePath"] = value;
+  element["valuePath"] = value;
 });
 const namePathSetter = AtomControl.registerProperty("data-button-bar-items", "name", (ctrl, element, value) => {
-    element["namePath"] = value;
+  element["namePath"] = value;
 });
 const itemRendererSetter = AtomControl.registerProperty("data-button-bar-items", "renderer", (ctrl, element, value) => {
-    element["itemRenderer"] = value;
+  element["itemRenderer"] = value;
 });
 const refreshItems = (element, items) => {
-    items ??= element["items"];
-    const lp = element["labelPath"] ?? ((item) => item?.label ?? item);
-    const vp = element["valuePath"] ?? ((item) => item?.value ?? item);
-    const ir = element["itemRenderer"] ?? ((item) => XNode.create("div", { text: lp(item) }));
-    const name = element["namePath"];
-    let i = 0;
-    const all = Array.from(element.querySelectorAll(`label`));
-    for (const element of all) {
-        element.remove();
-    }
-    const control = AtomControl.from(element);
-    const hidden = element.querySelector(`input.hidden`);
-    const cv = hidden.value;
-    if (items?.length) {
-        for (const iterator of items) {
-            const item = document.createElement("label");
-            const labelName = name + i;
-            const value = vp(iterator);
-            let checked = false;
-            if (cv !== void 0) {
-                if (cv == value) {
-                    checked = true;
-                }
-            }
-            item.setAttribute("for", labelName);
-            element.appendChild(item);
-            control.render(XNode.create("div", null,
-                " ",
-                XNode.create("input", { id: labelName, type: "radio", name: name, value: value, checked: checked }),
-                " ",
-                ir(iterator)), item, control);
-            i++;
+  items ??= element["items"];
+  const lp = element["labelPath"] ?? (item => item?.label ?? item);
+  const vp = element["valuePath"] ?? (item => item?.value ?? item);
+  const ir = element["itemRenderer"] ?? (item => XNode.create("div", {
+    text: lp(item)
+  }));
+  const name = element["namePath"];
+  let i = 0;
+  const all = Array.from(element.querySelectorAll(`label`));
+  for (const element of all) {
+    element.remove();
+  }
+  const control = AtomControl.from(element);
+  const hidden = element.querySelector(`input.hidden`);
+  const cv = hidden.value;
+  if (items?.length) {
+    for (const iterator of items) {
+      const item = document.createElement("label");
+      const labelName = name + i;
+      const value = vp(iterator);
+      let checked = false;
+      if (cv !== void 0) {
+        if (cv == value) {
+          checked = true;
         }
+      }
+      item.setAttribute("for", labelName);
+      element.appendChild(item);
+      control.render(XNode.create("div", null, " ", XNode.create("input", {
+        id: labelName,
+        type: "radio",
+        name: name,
+        value: value,
+        checked: checked
+      }), " ", ir(iterator)), item, control);
+      i++;
     }
+  }
 };
 const itemsSetter = AtomControl.registerProperty("data-items", "value", (ctrl, element, value) => {
-    element["items"] = value;
-    ctrl.runAfterInit(() => setTimeout(refreshItems, 1, element, value));
+  element["items"] = value;
+  ctrl.runAfterInit(() => setTimeout(refreshItems, 1, element, value));
 });
-const changeTracker = (e) => {
-    if (e.detail) {
-        return;
-    }
-    const target = e.currentTarget;
-    const hidden = target.querySelector(`input.hidden`);
-    const buttons = target.querySelectorAll(`input[type="radio"]`);
-    for (let index = 0; index < buttons.length; index++) {
-        const element = buttons[index];
-        if (element.checked) {
-            hidden.value = element.value;
-            hidden.dispatchEvent(new CustomEvent("input", { detail: element.value, bubbles: true }));
-            break;
-        }
+const changeTracker = e => {
+  if (e.detail) {
+    return;
+  }
+  const target = e.currentTarget;
+  const hidden = target.querySelector(`input.hidden`);
+  const buttons = target.querySelectorAll(`input[type="radio"]`);
+  for (let index = 0; index < buttons.length; index++) {
+    const element = buttons[index];
+    if (element.checked) {
+      hidden.value = element.value;
+      hidden.dispatchEvent(new CustomEvent("input", {
+        detail: element.value,
+        bubbles: true
+      }));
+      break;
     }
+  }
 };
-export default function ButtonBar({ items, labelPath, valuePath, itemRenderer = (x) => XNode.create("div", { text: x.label ?? x }), value, name = `button-bar-${nid++}`, ...a }) {
-    a[labelPathSetter.property] = labelPath;
-    a[valuePathSetter.property] = valuePath;
-    a[itemsSetter.property] = items;
-    a[itemRendererSetter.property] = itemRenderer;
-    a[namePathSetter.property] = name;
-    a["event-change"] = changeTracker;
-    return XNode.create("button-bar", { ...a },
-        XNode.create("input", { class: "hidden", value: value }));
-}
-//# sourceMappingURL=ButtonBar.js.map
+export default function ButtonBar({
+  items,
+  labelPath,
+  valuePath,
+  itemRenderer = x => XNode.create("div", {
+    text: x.label ?? x
+  }),
+  value,
+  name = `button-bar-${nid++}`,
+  ...a
+}) {
+  a[labelPathSetter.property] = labelPath;
+  a[valuePathSetter.property] = valuePath;
+  a[itemsSetter.property] = items;
+  a[itemRendererSetter.property] = itemRenderer;
+  a[namePathSetter.property] = name;
+  a["event-change"] = changeTracker;
+  return XNode.create("button-bar", {
+    ...a
+  }, XNode.create("input", {
+    class: "hidden",
+    value: value
+  }));
+}