@web-atoms/web-controls 2.2.0 → 2.2.2

package/dist/basic/AtomChips.js

@@ -1,384 +1,377 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
+System.register(["@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/types", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS", "./AtomRepeater", "./Chip", "./InlinePopup"], function (_export, _context) {
+  "use strict";
+
+  var Bind, BindableProperty, Colors, CancelToken, XNode, StyleRule, CSS, AtomRepeater, MatchTrue, InlinePopup, AtomChips, __decorate, __metadata, __awaiter;
+  function getChips(target) {
+    let start = target;
+    while (start) {
+      const chips = start.atomControl;
+      if (chips && chips instanceof AtomChips) {
+        return chips;
+      }
+      start = start.parentElement;
     }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/types", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS", "./AtomRepeater", "./Chip", "./InlinePopup"], factory);
+  }
+  function askSuggestionPopup(host, opener, itemRenderer, suggestionFilter, cancelToken) {
+    class Suggestions extends InlinePopup {
+      create() {
+        this.opener = opener;
+        this.render(XNode.create("div", {
+          "data-suggestion-popup": "suggestion-popup"
+        }, XNode.create("div", {
+          class: "items"
+        }, XNode.create(AtomRepeater, {
+          class: "presenter",
+          selectedItem: Bind.oneWay(() => this.opener.anchorItem),
+          itemRenderer: itemRenderer,
+          eventDeleteSuggestion: e => opener.element.dispatchEvent(e),
+          visibilityFilter: suggestionFilter !== null && suggestionFilter !== void 0 ? suggestionFilter : MatchTrue,
+          "event-item-click": e => {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            e.stopPropagation();
+            this.close(e.detail);
+          },
+          items: Bind.oneWay(() => this.opener.suggestions)
+        }))));
+      }
     }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Suggestion = exports.Chip = void 0;
-    const Bind_1 = require("@web-atoms/core/dist/core/Bind");
-    const BindableProperty_1 = require("@web-atoms/core/dist/core/BindableProperty");
-    const Colors_1 = require("@web-atoms/core/dist/core/Colors");
-    const types_1 = require("@web-atoms/core/dist/core/types");
-    const XNode_1 = require("@web-atoms/core/dist/core/XNode");
-    const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
-    const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
-    const AtomRepeater_1 = require("./AtomRepeater");
-    var Chip_1 = require("./Chip");
-    Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.default; } });
-    const InlinePopup_1 = require("./InlinePopup");
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .flexLayout({ justifyContent: "stretch" })
-        .flexFlow("wrap")
-        .child((0, StyleRule_1.default)(".search")
-        .border("none")
-        .outline("none")
-        .flex("1 1"))
-        .child((0, StyleRule_1.default)(".footer")
-        .marginLeft("auto"))
-        .child((0, StyleRule_1.default)(".presenter")
-        .flexLayout({ inline: true, justifyContent: "flex-start" })
-        .flexFlow("wrap")
-        .child((0, StyleRule_1.default)("*")
-        .backgroundColor(Colors_1.default.lightGray.withAlphaPercent(0.3))))
-        .and((0, StyleRule_1.default)("[data-mode=search]")
-        .child((0, StyleRule_1.default)(".search")
-        .paddingLeft(20)
-        // tslint:disable-next-line: max-line-length
-        .background(`transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 1px center`))), "div[data-atom-chips]");
-    function getChips(target) {
-        let start = target;
-        while (start) {
-            const chips = start.atomControl;
-            if (chips && chips instanceof AtomChips) {
-                return chips;
-            }
-            start = start.parentElement;
+    return Suggestions.showControl(host, {
+      cancelToken,
+      alignment: "auto"
+    });
+  }
+  function Suggestion({
+    icon,
+    label,
+    header,
+    deleteIcon
+  }, ...nodes) {
+    return XNode.create("div", {
+      "data-item-suggestion": "suggestion"
+    }, icon && XNode.create("i", {
+      class: "icon " + icon
+    }), header && XNode.create("label", {
+      class: "header",
+      text: header
+    }), label && XNode.create("label", {
+      class: "label",
+      text: label
+    }), ...nodes, deleteIcon && XNode.create("i", {
+      class: "delete " + deleteIcon,
+      "data-click-event": "remove-suggestion"
+    }));
+  }
+  _export({
+    Suggestion: Suggestion,
+    default: void 0
+  });
+  return {
+    setters: [function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreBindableProperty) {
+      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
+    }, function (_webAtomsCoreDistCoreColors) {
+      Colors = _webAtomsCoreDistCoreColors.default;
+    }, function (_webAtomsCoreDistCoreTypes) {
+      CancelToken = _webAtomsCoreDistCoreTypes.CancelToken;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyleRule) {
+      StyleRule = _webAtomsCoreDistStyleStyleRule.default;
+    }, function (_webAtomsCoreDistWebStylesCSS) {
+      CSS = _webAtomsCoreDistWebStylesCSS.default;
+    }, function (_AtomRepeater) {
+      AtomRepeater = _AtomRepeater.default;
+      MatchTrue = _AtomRepeater.MatchTrue;
+    }, function (_Chip) {
+      _export("Chip", _Chip.default);
+    }, function (_InlinePopup) {
+      InlinePopup = _InlinePopup.default;
+    }],
+    execute: function () {
+      __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+        var c = arguments.length,
+          r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+          d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+      };
+      __metadata = void 0 && (void 0).__metadata || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+      };
+      __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+        function adopt(value) {
+          return value instanceof P ? value : new P(function (resolve) {
+            resolve(value);
+          });
         }
-    }
-    document.body.addEventListener("focusin", (e) => {
+        return new (P || (P = Promise))(function (resolve, reject) {
+          function fulfilled(value) {
+            try {
+              step(generator.next(value));
+            } catch (e) {
+              reject(e);
+            }
+          }
+          function rejected(value) {
+            try {
+              step(generator["throw"](value));
+            } catch (e) {
+              reject(e);
+            }
+          }
+          function step(result) {
+            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+          }
+          step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+      };
+      CSS(StyleRule().flexLayout({
+        justifyContent: "stretch"
+      }).flexFlow("wrap").child(StyleRule(".search").border("none").outline("none").flex("1 1")).child(StyleRule(".footer").marginLeft("auto")).child(StyleRule(".presenter").flexLayout({
+        inline: true,
+        justifyContent: "flex-start"
+      }).flexFlow("wrap").child(StyleRule("*").backgroundColor(Colors.lightGray.withAlphaPercent(0.3)))).and(StyleRule("[data-mode=search]").child(StyleRule(".search").paddingLeft(20).background(`transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 1px center`))), "div[data-atom-chips]");
+      document.body.addEventListener("focusin", e => {
         const chips = getChips(e.target);
         chips === null || chips === void 0 ? void 0 : chips.setFocus(true);
-    });
-    document.body.addEventListener("focusout", (e) => {
+      });
+      document.body.addEventListener("focusout", e => {
         const chips = getChips(e.target);
         chips === null || chips === void 0 ? void 0 : chips.setFocus(false);
-    });
-    document.body.addEventListener("keydown", (e) => {
+      });
+      document.body.addEventListener("keydown", e => {
         const chips = getChips(e.target);
         chips === null || chips === void 0 ? void 0 : chips.onKey(e);
-    });
-    /**
-     * Asks user for selecting item from given suggestions
-     * @param items items to display
-     * @param itemRenderer render function
-     * @param match search match
-     * @returns selected item
-     */
-    function askSuggestionPopup(host, opener, itemRenderer, suggestionFilter, cancelToken) {
-        class Suggestions extends InlinePopup_1.default {
-            create() {
-                this.opener = opener;
-                this.render(XNode_1.default.create("div", { "data-suggestion-popup": "suggestion-popup" },
-                    XNode_1.default.create("div", { class: "items" },
-                        XNode_1.default.create(AtomRepeater_1.default, { class: "presenter", selectedItem: Bind_1.default.oneWay(() => this.opener.anchorItem), itemRenderer: itemRenderer, eventDeleteSuggestion: (e) => opener.element.dispatchEvent(e), visibilityFilter: suggestionFilter !== null && suggestionFilter !== void 0 ? suggestionFilter : AtomRepeater_1.MatchTrue, "event-item-click": (e) => {
-                                e.preventDefault();
-                                e.stopImmediatePropagation();
-                                e.stopPropagation();
-                                this.close(e.detail);
-                            }, items: Bind_1.default.oneWay(() => this.opener.suggestions) }))));
-            }
-        }
-        return Suggestions.showControl(host, { cancelToken, alignment: "auto" });
-    }
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .padding(1)
-        .paddingLeft(5)
-        .paddingRight(5)
-        .borderRadius(10)
-        .display("grid")
-        .alignItems("center")
-        .gridTemplateRows("auto 1fr")
-        .gridTemplateColumns("auto 1fr auto")
-        .child((0, StyleRule_1.default)("[data-content]")
-        .gridRowStart("2")
-        .gridColumnStart("2"))
-        .child((0, StyleRule_1.default)(".icon")
-        .gridColumnStart("1")
-        .gridRowStart("1")
-        .gridRowEnd("span 2")
-        .alignSelf("center"))
-        .child((0, StyleRule_1.default)(".delete")
-        .gridColumnStart("3")
-        .gridRowStart("1")
-        .gridRowEnd("span 2")
-        .alignSelf("center")
-        .color(Colors_1.default.red))
-        .child((0, StyleRule_1.default)(".header")
-        .fontSize("x-small")
-        .gridRowStart("1")
-        .gridColumnStart("2"))
-        .child((0, StyleRule_1.default)(".label")
-        .gridRowStart("2")
-        .gridColumnStart("2")), "*[data-item-suggestion]");
-    function Suggestion({ icon, label, header, deleteIcon }, ...nodes) {
-        return XNode_1.default.create("div", { "data-item-suggestion": "suggestion" },
-            icon && XNode_1.default.create("i", { class: "icon " + icon }),
-            header && XNode_1.default.create("label", { class: "header", text: header }),
-            label && XNode_1.default.create("label", { class: "label", text: label }),
-            ...nodes,
-            deleteIcon && XNode_1.default.create("i", { class: "delete " + deleteIcon, "data-click-event": "remove-suggestion" }));
-    }
-    exports.Suggestion = Suggestion;
-    class AtomChips extends AtomRepeater_1.default {
+      });
+      CSS(StyleRule().padding(1).paddingLeft(5).paddingRight(5).borderRadius(10).display("grid").alignItems("center").gridTemplateRows("auto 1fr").gridTemplateColumns("auto 1fr auto").child(StyleRule("[data-content]").gridRowStart("2").gridColumnStart("2")).child(StyleRule(".icon").gridColumnStart("1").gridRowStart("1").gridRowEnd("span 2").alignSelf("center")).child(StyleRule(".delete").gridColumnStart("3").gridRowStart("1").gridRowEnd("span 2").alignSelf("center").color(Colors.red)).child(StyleRule(".header").fontSize("x-small").gridRowStart("1").gridColumnStart("2")).child(StyleRule(".label").gridRowStart("2").gridColumnStart("2")), "*[data-item-suggestion]");
+      _export("default", AtomChips = class AtomChips extends AtomRepeater {
         onPropertyChanged(name) {
-            var _a;
-            super.onPropertyChanged(name);
-            switch (name) {
-                case "labelPath":
-                    this.itemRenderer = (item) => XNode_1.default.create("div", { text: this.labelPath(item) });
-                    break;
-                case "prompt":
-                    this.updateClasses();
-                    break;
-                case "focused":
-                    this.updatePopup();
-                    break;
-                case "suggestions":
-                    (_a = this.suggestionsWatcher) === null || _a === void 0 ? void 0 : _a.dispose();
-                    this.suggestionsWatcher = undefined;
-                    const suggestions = this.suggestions;
-                    if (suggestions) {
-                        this.suggestionsWatcher = this.registerDisposable(suggestions.watch(() => {
-                            this.updatePopup();
-                        }));
-                    }
-                    this.updatePopup();
-                    break;
-            }
+          var _a;
+          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":
+              (_a = this.suggestionsWatcher) === null || _a === void 0 ? void 0 : _a.dispose();
+              this.suggestionsWatcher = undefined;
+              const suggestions = this.suggestions;
+              if (suggestions) {
+                this.suggestionsWatcher = this.registerDisposable(suggestions.watch(() => {
+                  this.updatePopup();
+                }));
+              }
+              this.updatePopup();
+              break;
+          }
         }
         preCreate() {
-            super.preCreate();
-            this.preventDuplicates = true;
-            this.softDeleteProperty = null;
-            this.prompt = "Search";
-            this.element.dataset.atomChips = "atom-chips";
-            this.element.dataset.mode = "search";
-            this.suggestionFilter = AtomRepeater_1.MatchTrue;
-            // this.bindEvent(this.element, "click", () => this.searchInput.focus());
-            this.valuePath = (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.value) !== null && _a !== void 0 ? _a : item; };
-            this.labelPath = (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : item; };
-            this.itemRenderer = (item) => XNode_1.default.create("div", { text: this.labelPath(item) });
-            this.element.dataset.dropDown = "drop-down";
-            this.render(XNode_1.default.create("div", null,
-                XNode_1.default.create("div", { class: "presenter" }),
-                XNode_1.default.create("input", { class: "search", placeholder: Bind_1.default.oneWay(() => this.prompt), value: Bind_1.default.twoWaysImmediate(() => this.search), type: "search" }),
-                XNode_1.default.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));
+          super.preCreate();
+          this.preventDuplicates = true;
+          this.softDeleteProperty = null;
+          this.prompt = "Search";
+          this.element.dataset.atomChips = "atom-chips";
+          this.element.dataset.mode = "search";
+          this.suggestionFilter = MatchTrue;
+          this.valuePath = item => {
+            var _a;
+            return (_a = item === null || item === void 0 ? void 0 : item.value) !== null && _a !== void 0 ? _a : item;
+          };
+          this.labelPath = item => {
+            var _a;
+            return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : 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),
+            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));
         }
         setFocus(hasFocus) {
-            if (hasFocus) {
-                this.focused = true;
-                return;
-            }
-            setTimeout(() => {
-                this.focused = false;
-            }, 250);
+          if (hasFocus) {
+            this.focused = true;
+            return;
+          }
+          setTimeout(() => {
+            this.focused = false;
+          }, 250);
         }
         updatePopup() {
-            var _a, _b, _c;
-            return __awaiter(this, void 0, void 0, function* () {
-                const suggestions = this.suggestions;
-                if (!this.focused) {
-                    (_a = this.popupCancelToken) === null || _a === void 0 ? void 0 : _a.cancel();
-                    this.popupCancelToken = null;
-                    return;
-                }
-                if (this.popupCancelToken) {
-                    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) {
-                    yield promise;
-                }
-                if (ce.detail !== this.suggestions) {
-                    this.suggestions = ce.detail;
-                }
-                if (!suggestions || !suggestions.length) {
-                    (_b = this.popupCancelToken) === null || _b === void 0 ? void 0 : _b.cancel();
-                    this.popupCancelToken = null;
-                    return;
-                }
-                const cancelToken = this.popupCancelToken = new types_1.CancelToken();
-                try {
-                    let selectedItem = yield askSuggestionPopup(this.element, this, (_c = this.suggestionRenderer) !== null && _c !== void 0 ? _c : 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 (types_1.CancelToken.isCancelled(e)) {
-                        return;
-                    }
-                    // tslint:disable-next-line: no-console
-                    console.warn(e);
-                }
+          var _a, _b, _c;
+          return __awaiter(this, void 0, void 0, function* () {
+            const suggestions = this.suggestions;
+            if (!this.focused) {
+              (_a = this.popupCancelToken) === null || _a === void 0 ? void 0 : _a.cancel();
+              this.popupCancelToken = null;
+              return;
+            }
+            if (this.popupCancelToken) {
+              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) {
+              yield promise;
+            }
+            if (ce.detail !== this.suggestions) {
+              this.suggestions = ce.detail;
+            }
+            if (!suggestions || !suggestions.length) {
+              (_b = this.popupCancelToken) === null || _b === void 0 ? void 0 : _b.cancel();
+              this.popupCancelToken = null;
+              return;
+            }
+            const cancelToken = this.popupCancelToken = new CancelToken();
+            try {
+              let selectedItem = yield askSuggestionPopup(this.element, this, (_c = this.suggestionRenderer) !== null && _c !== void 0 ? _c : 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) {
-            var _a;
-            const ce = new CustomEvent("suggestionChosen", {
-                detail: selectedItem,
-                cancelable: true,
-                bubbles: true
-            });
-            this.element.dispatchEvent(ce);
-            if (!ce.defaultPrevented) {
-                const item = ce.detail;
-                const vp = (_a = this.valuePath) !== null && _a !== void 0 ? _a : ((x) => x);
-                const v = vp(item);
-                for (const iterator of this.items) {
-                    if (v === vp(iterator)) {
-                        return;
-                    }
-                }
-                this.items.add(ce.detail);
+          var _a;
+          const ce = new CustomEvent("suggestionChosen", {
+            detail: selectedItem,
+            cancelable: true,
+            bubbles: true
+          });
+          this.element.dispatchEvent(ce);
+          if (!ce.defaultPrevented) {
+            const item = ce.detail;
+            const vp = (_a = this.valuePath) !== null && _a !== void 0 ? _a : 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;
-            this.refreshItem(item);
+          let {
+            softDeleteProperty
+          } = this;
+          softDeleteProperty = typeof softDeleteProperty !== "string" ? "$deleted" : softDeleteProperty;
+          item[softDeleteProperty] = false;
+          this.refreshItem(item);
         }
         removeItem(item) {
-            let { softDeleteProperty } = this;
-            if (softDeleteProperty) {
-                softDeleteProperty = typeof softDeleteProperty !== "string" ? "$deleted" : softDeleteProperty;
-                item[softDeleteProperty] = true;
-                this.refreshItem(item);
-            }
-            else {
-                this.items.remove(item);
-            }
+          let {
+            softDeleteProperty
+          } = this;
+          if (softDeleteProperty) {
+            softDeleteProperty = typeof softDeleteProperty !== "string" ? "$deleted" : softDeleteProperty;
+            item[softDeleteProperty] = true;
+            this.refreshItem(item);
+          } else {
+            this.items.remove(item);
+          }
         }
         onKey(e) {
-            var _a, _b;
-            const suggested = this.suggestions;
-            switch (e.key) {
-                case "Enter":
-                    // selection mode...
-                    (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
-                    (_b = e.stopImmediatePropagation) === null || _b === void 0 ? void 0 : _b.call(e);
-                    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;
-            }
+          var _a, _b;
+          const suggested = this.suggestions;
+          switch (e.key) {
+            case "Enter":
+              (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
+              (_b = e.stopImmediatePropagation) === null || _b === void 0 ? void 0 : _b.call(e);
+              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;
+          }
         }
+      });
+      __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", 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_1.BindableProperty,
-        __metadata("design:type", Array)
-    ], AtomChips.prototype, "suggestions", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", String)
-    ], AtomChips.prototype, "search", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", String)
-    ], AtomChips.prototype, "prompt", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", String)
-    ], AtomChips.prototype, "suggestionPrompt", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", String)
-    ], AtomChips.prototype, "softDeleteProperty", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], AtomChips.prototype, "labelPath", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], AtomChips.prototype, "match", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], AtomChips.prototype, "suggestionRenderer", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], AtomChips.prototype, "suggestionFilter", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Boolean)
-    ], AtomChips.prototype, "focused", void 0);
-    exports.default = AtomChips;
-});
+  };
+});
 //# sourceMappingURL=AtomChips.js.map