@web-atoms/web-controls 2.6.5 → 2.6.7

package/dist-esm/basic/AtomChips.js

@@ -6,337 +6,344 @@ import { CancelToken } from "@web-atoms/core/dist/core/types.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import AtomRepeater, { MatchTrue } from "./AtomRepeater.js";
 export { default as Chip } from "./Chip.js";
-import "./styles/chips.global.css";
-import "./styles/item-suggestion.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/chips.global.css"));
+ESMPack.installStyleSheet(import.meta.resolve("./styles/item-suggestion.global.css"));
 import AtomPopover from "./elements/AtomPopover.js";
 function getChips(target) {
-    let start = target;
-    while (start) {
-        const chips = start.atomControl;
-        if (chips && chips instanceof AtomChips) {
-            return chips;
-        }
-        start = start.parentElement;
+  let start = target;
+  while (start) {
+    const chips = start.atomControl;
+    if (chips && chips instanceof AtomChips) {
+      return chips;
     }
+    start = start.parentElement;
+  }
 }
-document.body.addEventListener("focusin", (e) => {
-    const chips = getChips(e.target);
-    chips?.setFocus(true);
+document.body.addEventListener("focusin", e => {
+  const chips = getChips(e.target);
+  chips?.setFocus(true);
 });
-document.body.addEventListener("focusout", (e) => {
-    const chips = getChips(e.target);
-    chips?.setFocus(false);
+document.body.addEventListener("focusout", e => {
+  const chips = getChips(e.target);
+  chips?.setFocus(false);
 });
-document.body.addEventListener("keydown", (e) => {
-    const chips = getChips(e.target);
-    chips?.onKey(e);
+document.body.addEventListener("keydown", e => {
+  const chips = getChips(e.target);
+  chips?.onKey(e);
 });
 function askSuggestionPopup(host, opener, itemRenderer, suggestionFilter, cancelToken) {
-    class Suggestions extends AtomPopover {
-        init() {
-            this.opener = opener;
-            this.renderer = XNode.create("div", { "data-suggestion-popup": "suggestion-popup" },
-                XNode.create("div", { class: "items" },
-                    XNode.create(AtomRepeater, { class: "presenter", selectedItem: Bind.source(opener, (x) => x.source.anchorItem), itemRenderer: itemRenderer, eventDeleteSuggestion: (e) => opener.element.dispatchEvent(e), visibilityFilter: suggestionFilter ?? MatchTrue, "event-item-click": (e) => {
-                            e.preventDefault();
-                            e.stopImmediatePropagation();
-                            e.stopPropagation();
-                            this.close(e.detail);
-                        }, items: Bind.source(opener, (x) => x.source.suggestions) })));
-        }
+  class Suggestions extends AtomPopover {
+    init() {
+      this.opener = opener;
+      this.renderer = XNode.create("div", {
+        "data-suggestion-popup": "suggestion-popup"
+      }, XNode.create("div", {
+        class: "items"
+      }, XNode.create(AtomRepeater, {
+        class: "presenter",
+        selectedItem: Bind.source(opener, x => x.source.anchorItem),
+        itemRenderer: itemRenderer,
+        eventDeleteSuggestion: e => opener.element.dispatchEvent(e),
+        visibilityFilter: suggestionFilter ?? MatchTrue,
+        "event-item-click": e => {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          e.stopPropagation();
+          this.close(e.detail);
+        },
+        items: Bind.source(opener, x => x.source.suggestions)
+      })));
     }
-    return Suggestions.show(host, { "anchor-top": "parent-bottom", "anchor-left": "parent-left", cancelToken });
+  }
+  return Suggestions.show(host, {
+    "anchor-top": "parent-bottom",
+    "anchor-left": "parent-left",
+    cancelToken
+  });
 }
-export function Suggestion({ icon, label, header, deleteIcon, ...a }, ...nodes) {
-    return XNode.create("div", { "data-item-suggestion": "suggestion", ...a },
-        icon && XNode.create("i", { class: "icon " + icon }),
-        header && XNode.create("label", { class: "header", text: header, title: header }),
-        label && XNode.create("label", { class: "label", text: label, title: label }),
-        ...nodes,
-        deleteIcon && XNode.create("i", { class: "delete " + deleteIcon, "data-click-event": "remove-suggestion" }));
+export function Suggestion({
+  icon,
+  label,
+  header,
+  deleteIcon,
+  ...a
+}, ...nodes) {
+  return XNode.create("div", {
+    "data-item-suggestion": "suggestion",
+    ...a
+  }, icon && XNode.create("i", {
+    class: "icon " + icon
+  }), header && XNode.create("label", {
+    class: "header",
+    text: header,
+    title: header
+  }), label && XNode.create("label", {
+    class: "label",
+    text: label,
+    title: label
+  }), ...nodes, deleteIcon && XNode.create("i", {
+    class: "delete " + deleteIcon,
+    "data-click-event": "remove-suggestion"
+  }));
 }
 export default class AtomChips extends AtomRepeater {
-    get searchType() {
-        return this.searchInput.type;
+  get searchType() {
+    return this.searchInput.type;
+  }
+  set searchType(v) {
+    this.searchInput.type = v;
+  }
+  get enterKeyHint() {
+    return this.searchInput.enterKeyHint;
+  }
+  set enterKeyHint(v) {
+    this.searchInput.enterKeyHint = v;
+  }
+  onPropertyChanged(name) {
+    super.onPropertyChanged(name);
+    switch (name) {
+      case "labelPath":
+        this.itemRenderer = item => XNode.create("div", {
+          text: this.labelPath(item)
+        });
+        break;
+      case "prompt":
+        this.updateClasses();
+        break;
+      case "focused":
+        this.updatePopup();
+        break;
+      case "suggestions":
+        this.suggestionsWatcher?.dispose();
+        this.suggestionsWatcher = undefined;
+        const suggestions = this.suggestions;
+        if (suggestions) {
+          this.suggestionsWatcher = this.registerDisposable(suggestions.watch(() => {
+            this.updatePopup();
+          }));
+        }
+        this.updatePopup();
+        break;
     }
-    set searchType(v) {
-        this.searchInput.type = v;
+  }
+  preCreate() {
+    super.preCreate();
+    this.preventDuplicates = true;
+    this.softDeleteProperty = null;
+    this.prompt = "Search";
+    this.element.setAttribute("data-atom-chips", "atom-chips");
+    this.element.setAttribute("data-mode", "search");
+    this.suggestionFilter = MatchTrue;
+    this.valuePath = item => item?.value ?? item;
+    this.labelPath = item => item?.label ?? item;
+    this.itemRenderer = item => XNode.create("div", {
+      text: this.labelPath(item)
+    });
+    this.element.dataset.dropDown = "drop-down";
+    this.render(XNode.create("div", null, XNode.create("div", {
+      class: "presenter"
+    }), XNode.create("input", {
+      class: "search",
+      placeholder: Bind.oneWay(() => this.prompt),
+      value: Bind.twoWaysImmediate(() => this.search),
+      autofocus: Bind.oneWay(() => this.autofocus),
+      type: "search"
+    }), XNode.create("div", {
+      class: "footer"
+    })));
+    this.itemsPresenter = this.element.children[0];
+    this.searchInput = this.element.children[1];
+    this.footerPresenter = this.element.children[2];
+    this.bindEvent(this.element, "removeChip", e => e.defaultPrevented || this.removeItem(e.detail));
+    this.bindEvent(this.element, "undoRemoveChip", e => e.defaultPrevented || this.undoRemoveItem(e.detail));
+    this.bindEvent(this.searchInput, "blur", () => {
+      if (!this.onBlurItemToChip) {
+        return;
+      }
+      setTimeout(() => {
+        const search = this.search;
+        if (search) {
+          const item = this.onBlurItemToChip(search);
+          if (item) {
+            this.items.add(item);
+            this.searchInput.value = "";
+            this.search = "";
+          }
+        }
+      }, 200);
+    });
+  }
+  setFocus(hasFocus) {
+    if (hasFocus) {
+      if (this.focusTimeout) {
+        clearTimeout(this.focusTimeout);
+        this.focusTimeout = void 0;
+      }
+      this.focused = true;
+      return;
     }
-    get enterKeyHint() {
-        return this.searchInput.enterKeyHint;
+    this.focusTimeout = setTimeout(() => {
+      this.focusTimeout = void 0;
+      this.focused = false;
+    }, 1500);
+  }
+  async updatePopup() {
+    const suggestions = this.suggestions;
+    if (!this.focused) {
+      this.popupCancelToken?.cancel();
+      this.popupCancelToken = null;
+      return;
     }
-    set enterKeyHint(v) {
-        this.searchInput.enterKeyHint = v;
+    const detail = this.suggestions;
+    const ce = new CustomEvent("suggestions-requested", {
+      detail
+    });
+    this.element.dispatchEvent(ce);
+    if (ce.defaultPrevented) {
+      return;
     }
-    onPropertyChanged(name) {
-        super.onPropertyChanged(name);
-        switch (name) {
-            case "labelPath":
-                this.itemRenderer = (item) => XNode.create("div", { text: this.labelPath(item) });
-                break;
-            case "prompt":
-                this.updateClasses();
-                break;
-            case "focused":
-                this.updatePopup();
-                break;
-            case "suggestions":
-                this.suggestionsWatcher?.dispose();
-                this.suggestionsWatcher = undefined;
-                const suggestions = this.suggestions;
-                if (suggestions) {
-                    this.suggestionsWatcher = this.registerDisposable(suggestions.watch(() => {
-                        this.updatePopup();
-                    }));
-                }
-                this.updatePopup();
-                break;
-        }
+    const {
+      promise
+    } = ce;
+    if (promise) {
+      await promise;
     }
-    preCreate() {
-        super.preCreate();
-        this.preventDuplicates = true;
-        this.softDeleteProperty = null;
-        this.prompt = "Search";
-        this.element.setAttribute("data-atom-chips", "atom-chips");
-        this.element.setAttribute("data-mode", "search");
-        this.suggestionFilter = MatchTrue;
-        this.valuePath = (item) => item?.value ?? item;
-        this.labelPath = (item) => item?.label ?? item;
-        this.itemRenderer = (item) => XNode.create("div", { text: this.labelPath(item) });
-        this.element.dataset.dropDown = "drop-down";
-        this.render(XNode.create("div", null,
-            XNode.create("div", { class: "presenter" }),
-            XNode.create("input", { class: "search", placeholder: Bind.oneWay(() => this.prompt), value: Bind.twoWaysImmediate(() => this.search), autofocus: Bind.oneWay(() => this.autofocus), type: "search" }),
-            XNode.create("div", { class: "footer" })));
-        this.itemsPresenter = this.element.children[0];
-        this.searchInput = this.element.children[1];
-        this.footerPresenter = this.element.children[2];
-        this.bindEvent(this.element, "removeChip", (e) => e.defaultPrevented || this.removeItem(e.detail));
-        this.bindEvent(this.element, "undoRemoveChip", (e) => e.defaultPrevented || this.undoRemoveItem(e.detail));
-        this.bindEvent(this.searchInput, "blur", () => {
-            if (!this.onBlurItemToChip) {
-                return;
-            }
-            setTimeout(() => {
-                const search = this.search;
-                if (search) {
-                    const item = this.onBlurItemToChip(search);
-                    if (item) {
-                        this.items.add(item);
-                        this.searchInput.value = "";
-                        this.search = "";
-                    }
-                }
-            }, 200);
-        });
+    if (ce.detail !== this.suggestions) {
+      this.suggestions = ce.detail;
     }
-    setFocus(hasFocus) {
-        if (hasFocus) {
-            if (this.focusTimeout) {
-                clearTimeout(this.focusTimeout);
-                this.focusTimeout = void 0;
-            }
-            this.focused = true;
-            return;
-        }
-        this.focusTimeout = setTimeout(() => {
-            this.focusTimeout = void 0;
-            this.focused = false;
-        }, 1500);
+    if (!suggestions?.length) {
+      this.popupCancelToken?.cancel();
+      this.popupCancelToken = null;
+      return;
     }
-    async updatePopup() {
-        const suggestions = this.suggestions;
-        if (!this.focused) {
-            this.popupCancelToken?.cancel();
-            this.popupCancelToken = null;
-            return;
-        }
-        const detail = this.suggestions;
-        const ce = new CustomEvent("suggestions-requested", { detail });
-        this.element.dispatchEvent(ce);
-        if (ce.defaultPrevented) {
-            return;
-        }
-        const { promise } = ce;
-        if (promise) {
-            await promise;
-        }
-        if (ce.detail !== this.suggestions) {
-            this.suggestions = ce.detail;
-        }
-        if (!(suggestions?.length)) {
-            this.popupCancelToken?.cancel();
-            this.popupCancelToken = null;
-            return;
-        }
-        if (this.popupCancelToken) {
-            return;
-        }
-        const cancelToken = this.popupCancelToken = new CancelToken();
-        try {
-            let selectedItem = await askSuggestionPopup(this.element, this, this.suggestionRenderer ?? this.itemRenderer, this.suggestionFilter, cancelToken);
-            const itemToChip = this.itemToChip;
-            if (itemToChip) {
-                selectedItem = itemToChip(selectedItem, this.search);
-            }
-            this.addItem(selectedItem);
-            this.search = "";
-            this.popupCancelToken = null;
-        }
-        catch (e) {
-            this.popupCancelToken = null;
-            if (CancelToken.isCancelled(e)) {
-                return;
-            }
-            console.warn(e);
-        }
+    if (this.popupCancelToken) {
+      return;
     }
-    addItem(selectedItem) {
-        const ce = new CustomEvent("suggestionChosen", {
-            detail: selectedItem,
-            cancelable: true,
-            bubbles: true
-        });
-        this.element.dispatchEvent(ce);
-        if (!ce.defaultPrevented) {
-            const item = ce.detail;
-            const vp = this.valuePath ?? ((x) => x);
-            const v = vp(item);
-            for (const iterator of this.items) {
-                if (v === vp(iterator)) {
-                    return;
-                }
-            }
-            this.items.add(ce.detail);
+    const cancelToken = this.popupCancelToken = new CancelToken();
+    try {
+      let selectedItem = await askSuggestionPopup(this.element, this, this.suggestionRenderer ?? this.itemRenderer, this.suggestionFilter, cancelToken);
+      const itemToChip = this.itemToChip;
+      if (itemToChip) {
+        selectedItem = itemToChip(selectedItem, this.search);
+      }
+      this.addItem(selectedItem);
+      this.search = "";
+      this.popupCancelToken = null;
+    } catch (e) {
+      this.popupCancelToken = null;
+      if (CancelToken.isCancelled(e)) {
+        return;
+      }
+      console.warn(e);
+    }
+  }
+  addItem(selectedItem) {
+    const ce = new CustomEvent("suggestionChosen", {
+      detail: selectedItem,
+      cancelable: true,
+      bubbles: true
+    });
+    this.element.dispatchEvent(ce);
+    if (!ce.defaultPrevented) {
+      const item = ce.detail;
+      const vp = this.valuePath ?? (x => x);
+      const v = vp(item);
+      for (const iterator of this.items) {
+        if (v === vp(iterator)) {
+          return;
         }
+      }
+      this.items.add(ce.detail);
     }
-    undoRemoveItem(item) {
-        let { softDeleteProperty } = this;
-        softDeleteProperty = typeof softDeleteProperty !== "string" ? "$deleted" : softDeleteProperty;
-        item[softDeleteProperty] = false;
-        AtomBinder.refreshValue(this.items, "length");
-        this.refreshItem(item);
+  }
+  undoRemoveItem(item) {
+    let {
+      softDeleteProperty
+    } = this;
+    softDeleteProperty = typeof softDeleteProperty !== "string" ? "$deleted" : softDeleteProperty;
+    item[softDeleteProperty] = false;
+    AtomBinder.refreshValue(this.items, "length");
+    this.refreshItem(item);
+  }
+  removeItem(item) {
+    let {
+      softDeleteProperty
+    } = this;
+    if (softDeleteProperty) {
+      softDeleteProperty = typeof softDeleteProperty !== "string" ? "$deleted" : softDeleteProperty;
+      item[softDeleteProperty] = true;
+      AtomBinder.refreshValue(this.items, "length");
+      this.refreshItem(item);
+    } else {
+      this.items.remove(item);
     }
-    removeItem(item) {
-        let { softDeleteProperty } = this;
-        if (softDeleteProperty) {
-            softDeleteProperty = typeof softDeleteProperty !== "string" ? "$deleted" : softDeleteProperty;
-            item[softDeleteProperty] = true;
-            AtomBinder.refreshValue(this.items, "length");
-            this.refreshItem(item);
-        }
-        else {
-            this.items.remove(item);
-        }
+  }
+  onKey(e) {
+    const suggested = this.suggestions;
+    const onKeyPressedItemToChip = this.onKeyPressedItemToChip;
+    if (onKeyPressedItemToChip && this.search) {
+      const item = onKeyPressedItemToChip(e.key, this.search);
+      if (item) {
+        this.addItem(item);
+        this.searchInput.value = "";
+        return;
+      }
     }
-    onKey(e) {
-        const suggested = this.suggestions;
-        const onKeyPressedItemToChip = this.onKeyPressedItemToChip;
-        if (onKeyPressedItemToChip && this.search) {
-            const item = onKeyPressedItemToChip(e.key, this.search);
-            if (item) {
-                this.addItem(item);
-                this.searchInput.value = "";
-                return;
+    switch (e.key) {
+      case "Enter":
+        e.preventDefault?.();
+        e.stopImmediatePropagation?.();
+        setTimeout(() => {
+          let anchorItem = this.anchorItem;
+          const itemToChip = this.itemToChip;
+          if (itemToChip) {
+            anchorItem = itemToChip(anchorItem, this.search);
+          }
+          if (!anchorItem) {
+            return;
+          }
+          this.addItem(anchorItem);
+          this.anchorIndex = 0;
+          this.anchorItem = null;
+          this.search = "";
+        }, 1);
+        break;
+      case "ArrowDown":
+        if (suggested) {
+          if (!this.anchorItem) {
+            this.anchorIndex = 0;
+          } else {
+            if (this.anchorIndex < suggested.length - 1) {
+              this.anchorIndex++;
             }
+          }
+          this.anchorItem = suggested[this.anchorIndex];
         }
-        switch (e.key) {
-            case "Enter":
-                e.preventDefault?.();
-                e.stopImmediatePropagation?.();
-                setTimeout(() => {
-                    let anchorItem = this.anchorItem;
-                    const itemToChip = this.itemToChip;
-                    if (itemToChip) {
-                        anchorItem = itemToChip(anchorItem, this.search);
-                    }
-                    if (!anchorItem) {
-                        return;
-                    }
-                    this.addItem(anchorItem);
-                    this.anchorIndex = 0;
-                    this.anchorItem = null;
-                    this.search = "";
-                }, 1);
-                break;
-            case "ArrowDown":
-                if (suggested) {
-                    if (!this.anchorItem) {
-                        this.anchorIndex = 0;
-                    }
-                    else {
-                        if (this.anchorIndex < suggested.length - 1) {
-                            this.anchorIndex++;
-                        }
-                    }
-                    this.anchorItem = suggested[this.anchorIndex];
-                }
-                break;
-            case "ArrowUp":
-                if (suggested) {
-                    if (!this.anchorItem) {
-                        return;
-                    }
-                    if (this.anchorIndex) {
-                        this.anchorIndex--;
-                    }
-                    this.anchorItem = suggested[this.anchorIndex];
-                }
-                break;
+        break;
+      case "ArrowUp":
+        if (suggested) {
+          if (!this.anchorItem) {
+            return;
+          }
+          if (this.anchorIndex) {
+            this.anchorIndex--;
+          }
+          this.anchorItem = suggested[this.anchorIndex];
         }
+        break;
     }
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Array)
-], AtomChips.prototype, "suggestions", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], AtomChips.prototype, "search", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], AtomChips.prototype, "prompt", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], AtomChips.prototype, "suggestionPrompt", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], AtomChips.prototype, "autofocus", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], AtomChips.prototype, "softDeleteProperty", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], AtomChips.prototype, "labelPath", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], AtomChips.prototype, "match", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], AtomChips.prototype, "suggestionRenderer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], AtomChips.prototype, "suggestionFilter", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Boolean)
-], AtomChips.prototype, "focused", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], AtomChips.prototype, "onKeyPressedItemToChip", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], AtomChips.prototype, "onBlurItemToChip", void 0);
-//# sourceMappingURL=AtomChips.js.map
+__decorate([BindableProperty, __metadata("design:type", Array)], AtomChips.prototype, "suggestions", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], AtomChips.prototype, "search", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], AtomChips.prototype, "prompt", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], AtomChips.prototype, "suggestionPrompt", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], AtomChips.prototype, "autofocus", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], AtomChips.prototype, "softDeleteProperty", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], AtomChips.prototype, "labelPath", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], AtomChips.prototype, "match", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], AtomChips.prototype, "suggestionRenderer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], AtomChips.prototype, "suggestionFilter", void 0);
+__decorate([BindableProperty, __metadata("design:type", Boolean)], AtomChips.prototype, "focused", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], AtomChips.prototype, "onKeyPressedItemToChip", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], AtomChips.prototype, "onBlurItemToChip", void 0);