@web-atoms/web-controls 2.2.0 → 2.2.2

package/dist/auto-complete/AutoCompleteBox.js

@@ -1,46 +1,73 @@
-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;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@web-atoms/core/dist/Atom", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/types", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/services/NavigationService", "@web-atoms/core/dist/services/ReferenceService", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/controls/AtomTemplateControl", "@web-atoms/core/dist/web/services/WindowService", "./AutoCompleteBoxStyle", "./ItemHost"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    const Atom_1 = require("@web-atoms/core/dist/Atom");
-    const Bind_1 = require("@web-atoms/core/dist/core/Bind");
-    const BindableProperty_1 = require("@web-atoms/core/dist/core/BindableProperty");
-    const types_1 = require("@web-atoms/core/dist/core/types");
-    const XNode_1 = require("@web-atoms/core/dist/core/XNode");
-    const NavigationService_1 = require("@web-atoms/core/dist/services/NavigationService");
-    const ReferenceService_1 = require("@web-atoms/core/dist/services/ReferenceService");
-    const AtomControl_1 = require("@web-atoms/core/dist/web/controls/AtomControl");
-    const AtomTemplateControl_1 = require("@web-atoms/core/dist/web/controls/AtomTemplateControl");
-    const WindowService_1 = require("@web-atoms/core/dist/web/services/WindowService");
-    const AutoCompleteBoxStyle_1 = require("./AutoCompleteBoxStyle");
-    const ItemHost_1 = require("./ItemHost");
-    var KeyCodes;
-    (function (KeyCodes) {
+System.register(["@web-atoms/core/dist/Atom", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/types", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/services/NavigationService", "@web-atoms/core/dist/services/ReferenceService", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/controls/AtomTemplateControl", "@web-atoms/core/dist/web/services/WindowService", "./AutoCompleteBoxStyle", "./ItemHost"], function (_export, _context) {
+  "use strict";
+
+  var Atom, Bind, BindableProperty, CancelToken, XNode, NavigationService, ReferenceService, AtomControl, AtomTemplateControl, WindowService, AutoCompleteBoxStyle, ItemHost, AutoCompleteBox, __decorate, __metadata, __awaiter, KeyCodes;
+  _export("default", void 0);
+  return {
+    setters: [function (_webAtomsCoreDistAtom) {
+      Atom = _webAtomsCoreDistAtom.Atom;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreBindableProperty) {
+      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
+    }, function (_webAtomsCoreDistCoreTypes) {
+      CancelToken = _webAtomsCoreDistCoreTypes.CancelToken;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistServicesNavigationService) {
+      NavigationService = _webAtomsCoreDistServicesNavigationService.NavigationService;
+    }, function (_webAtomsCoreDistServicesReferenceService) {
+      ReferenceService = _webAtomsCoreDistServicesReferenceService.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+    }, function (_webAtomsCoreDistWebControlsAtomTemplateControl) {
+      AtomTemplateControl = _webAtomsCoreDistWebControlsAtomTemplateControl.AtomTemplateControl;
+    }, function (_webAtomsCoreDistWebServicesWindowService) {
+      WindowService = _webAtomsCoreDistWebServicesWindowService.WindowService;
+    }, function (_AutoCompleteBoxStyle) {
+      AutoCompleteBoxStyle = _AutoCompleteBoxStyle.default;
+    }, function (_ItemHost) {
+      ItemHost = _ItemHost.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);
+          });
+        }
+        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 (KeyCodes) {
         KeyCodes["Enter"] = "Enter";
         KeyCodes["ArrowDown"] = "ArrowDown";
         KeyCodes["ArrowUp"] = "ArrowUp";
@@ -49,262 +76,258 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         KeyCodes["End"] = "End";
         KeyCodes["Home"] = "Home";
         KeyCodes["Escape"] = "Escape";
-    })(KeyCodes || (KeyCodes = {}));
-    class AutoCompleteBox extends AtomControl_1.AtomControl {
+      })(KeyCodes || (KeyCodes = {}));
+      _export("default", AutoCompleteBox = class AutoCompleteBox extends AtomControl {
         onPropertyChanged(name) {
-            switch (name) {
-                case "searchText":
-                case "value":
-                    this.onSearchTextChanged(true);
-                    break;
-                case "selectedItem":
-                    const si = this.selectedItem;
-                    const vf = this.valueFunc;
-                    if (vf && si) {
-                        this.value = vf(si);
-                    }
-                    break;
-            }
+          switch (name) {
+            case "searchText":
+            case "value":
+              this.onSearchTextChanged(true);
+              break;
+            case "selectedItem":
+              const si = this.selectedItem;
+              const vf = this.valueFunc;
+              if (vf && si) {
+                this.value = vf(si);
+              }
+              break;
+          }
         }
         onUpdateUI() {
-            super.onUpdateUI();
-            if (this.created) {
-                return;
-            }
-            const openPopup = () => this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
-                yield Atom_1.Atom.delay(200);
-                yield this.openPopup(true);
-            }));
-            this.render(XNode_1.default.create("div", { styleClass: Bind_1.default.oneWay(() => ({
-                    [this.controlStyle.name]: 1,
-                    "popup-open": this.isPopupOpen || !this.value
-                })) },
-                XNode_1.default.create("input", { type: "search", autocomplete: "none", eventFocus: openPopup, eventClick: openPopup, value: Bind_1.default.twoWays(() => this.searchText, ["keyup", "keypress", "keydown"]), placeholder: Bind_1.default.oneWay(() => this.label), eventKeydown: (e) => this.onKey(e), eventBlur: () => setTimeout(() => { var _a; return (_a = this.cancelToken) === null || _a === void 0 ? void 0 : _a.cancel(); }, 100) }),
-                XNode_1.default.create(AtomTemplateControl_1.AtomTemplateControl, { class: "item-template", contentTemplate: Bind_1.default.oneWay(() => this.itemTemplate), data: Bind_1.default.oneWay(() => this.selectedItem) })));
+          super.onUpdateUI();
+          if (this.created) {
+            return;
+          }
+          const openPopup = () => this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
+            yield Atom.delay(200);
+            yield this.openPopup(true);
+          }));
+          this.render(XNode.create("div", {
+            styleClass: Bind.oneWay(() => ({
+              [this.controlStyle.name]: 1,
+              "popup-open": this.isPopupOpen || !this.value
+            }))
+          }, XNode.create("input", {
+            type: "search",
+            autocomplete: "none",
+            eventFocus: openPopup,
+            eventClick: openPopup,
+            value: Bind.twoWays(() => this.searchText, ["keyup", "keypress", "keydown"]),
+            placeholder: Bind.oneWay(() => this.label),
+            eventKeydown: e => this.onKey(e),
+            eventBlur: () => setTimeout(() => {
+              var _a;
+              return (_a = this.cancelToken) === null || _a === void 0 ? void 0 : _a.cancel();
+            }, 100)
+          }), XNode.create(AtomTemplateControl, {
+            class: "item-template",
+            contentTemplate: Bind.oneWay(() => this.itemTemplate),
+            data: Bind.oneWay(() => this.selectedItem)
+          })));
         }
         hasProperty(name) {
-            if (/^(data|selectedItem|itemTemplate|isPopupOpen|value|localViewModel|viewModel)$/.test(name)) {
-                return true;
-            }
-            return super.hasProperty(name);
+          if (/^(data|selectedItem|itemTemplate|isPopupOpen|value|localViewModel|viewModel)$/.test(name)) {
+            return true;
+          }
+          return super.hasProperty(name);
         }
         onSearchTextChanged(force = false) {
-            var _a;
-            if (this.isUpdating) {
-                return;
+          var _a;
+          if (this.isUpdating) {
+            return;
+          }
+          if (!force) {
+            if (this.lastSearchText === this.searchText) {
+              return;
             }
-            if (!force) {
-                if (this.lastSearchText === this.searchText) {
-                    return;
-                }
-                this.lastSearchText = this.searchText;
-            }
-            setTimeout(() => {
-                this.app.runAsync(() => this.openPopup());
-            }, 10);
-            if (!this.itemsSource) {
-                // tslint:disable-next-line:no-console
-                console.warn("No itemsSource defined");
-                return;
+            this.lastSearchText = this.searchText;
+          }
+          setTimeout(() => {
+            this.app.runAsync(() => this.openPopup());
+          }, 10);
+          if (!this.itemsSource) {
+            console.warn("No itemsSource defined");
+            return;
+          }
+          const s = this.searchText || this.value;
+          if (!s) {
+            return;
+          }
+          (_a = this.cancelToken) === null || _a === void 0 ? void 0 : _a.cancel();
+          const c = new CancelToken();
+          this.cancelToken = c;
+          this.runAsync(() => __awaiter(this, void 0, void 0, function* () {
+            yield Atom.delay(250, c);
+            if (c.cancelled) {
+              return;
             }
-            const s = this.searchText || this.value;
-            if (!s) {
-                return;
+            const result = this.itemsSource({
+              search: this.searchText,
+              cancel: c,
+              value: this.value
+            });
+            if (!result) {
+              return;
             }
-            (_a = this.cancelToken) === null || _a === void 0 ? void 0 : _a.cancel();
-            const c = new types_1.CancelToken();
-            this.cancelToken = c;
-            this.runAsync(() => __awaiter(this, void 0, void 0, function* () {
-                yield Atom_1.Atom.delay(250, c);
+            const rp = result;
+            if (rp.then && rp.catch) {
+              try {
+                const items = yield rp;
                 if (c.cancelled) {
-                    return;
-                }
-                const result = this.itemsSource({
-                    search: this.searchText,
-                    cancel: c,
-                    value: this.value
-                });
-                if (!result) {
-                    return;
+                  return;
                 }
-                const rp = result;
-                if (rp.then && rp.catch) {
-                    try {
-                        const items = yield rp;
-                        if (c.cancelled) {
-                            return;
-                        }
-                        this.items.replace(items || []);
-                    }
-                    catch (ex) {
-                        c.cancel();
-                    }
-                }
-                else {
-                    const items = result;
-                    if (c.cancelled) {
-                        return;
-                    }
-                    this.items.replace(items || []);
-                }
-                if (!this.selectedItem) {
-                    // this.selectedItem = this.items[0];
-                    const first = this.items[0];
-                    if (first) {
-                        const v1 = this.valueFunc ? this.valueFunc(first) : first;
-                        // tslint:disable-next-line: triple-equals
-                        if (v1 == this.value) {
-                            this.selectedItem = first;
-                            this.element.dispatchEvent(new CustomEvent("item-selected", {
-                                cancelable: false,
-                                bubbles: false,
-                                detail: this.selectedItem
-                            }));
-                        }
-                    }
+                this.items.replace(items || []);
+              } catch (ex) {
+                c.cancel();
+              }
+            } else {
+              const items = result;
+              if (c.cancelled) {
+                return;
+              }
+              this.items.replace(items || []);
+            }
+            if (!this.selectedItem) {
+              const first = this.items[0];
+              if (first) {
+                const v1 = this.valueFunc ? this.valueFunc(first) : first;
+                if (v1 == this.value) {
+                  this.selectedItem = first;
+                  this.element.dispatchEvent(new CustomEvent("item-selected", {
+                    cancelable: false,
+                    bubbles: false,
+                    detail: this.selectedItem
+                  }));
                 }
-            }));
+              }
+            }
+          }));
         }
         runAsync(fx) {
-            this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
-                try {
-                    yield fx();
-                }
-                catch (e) {
-                    const s = e.message || e.toString();
-                    if (s === "cancelled") {
-                        return;
-                    }
-                    // tslint:disable-next-line: no-console
-                    console.error(e);
-                }
-            }));
+          this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
+            try {
+              yield fx();
+            } catch (e) {
+              const s = e.message || e.toString();
+              if (s === "cancelled") {
+                return;
+              }
+              console.error(e);
+            }
+          }));
         }
         preCreate() {
-            this.itemTemplate = null;
-            this.items = [];
-            this.itemsSource = null;
-            this.label = null;
-            this.lastSearchText = null;
-            this.lastValue = null;
-            this.value = null;
-            this.isPopupOpen = false;
-            this.valueFunc = null;
-            this.itemHostTemplate = ItemHost_1.default;
-            this.searchText = null;
-            this.lastSearchText = null;
-            this.lastValue = null;
-            this.created = false;
-            this.isUpdating = false;
-            this.defaultControlStyle = AutoCompleteBoxStyle_1.default;
+          this.itemTemplate = null;
+          this.items = [];
+          this.itemsSource = null;
+          this.label = null;
+          this.lastSearchText = null;
+          this.lastValue = null;
+          this.value = null;
+          this.isPopupOpen = false;
+          this.valueFunc = null;
+          this.itemHostTemplate = ItemHost;
+          this.searchText = null;
+          this.lastSearchText = null;
+          this.lastValue = null;
+          this.created = false;
+          this.isUpdating = false;
+          this.defaultControlStyle = AutoCompleteBoxStyle;
         }
-        // tslint:disable-next-line: no-empty
-        create() { }
+        create() {}
         onKey(e) {
-            if (!this.isPopupOpen) {
-                return;
-            }
-            switch (e.key) {
-                case KeyCodes.Enter:
-                    if (this.windowViewModel) {
-                        this.element.dispatchEvent(new CustomEvent("item-selected", {
-                            cancelable: false,
-                            bubbles: false,
-                            detail: this.selectedItem
-                        }));
-                        this.windowViewModel.close(this.selectedItem);
-                        this.windowViewModel = null;
-                    }
-                    break;
-                case KeyCodes.Escape:
-                    if (this.windowViewModel) {
-                        this.windowViewModel.cancel();
-                        this.windowViewModel = null;
-                    }
-                    break;
-                case KeyCodes.ArrowUp:
-                    this.moveSelection(-1);
-                    break;
-                case KeyCodes.ArrowDown:
-                    this.moveSelection(+1);
-                    break;
-            }
+          if (!this.isPopupOpen) {
+            return;
+          }
+          switch (e.key) {
+            case KeyCodes.Enter:
+              if (this.windowViewModel) {
+                this.element.dispatchEvent(new CustomEvent("item-selected", {
+                  cancelable: false,
+                  bubbles: false,
+                  detail: this.selectedItem
+                }));
+                this.windowViewModel.close(this.selectedItem);
+                this.windowViewModel = null;
+              }
+              break;
+            case KeyCodes.Escape:
+              if (this.windowViewModel) {
+                this.windowViewModel.cancel();
+                this.windowViewModel = null;
+              }
+              break;
+            case KeyCodes.ArrowUp:
+              this.moveSelection(-1);
+              break;
+            case KeyCodes.ArrowDown:
+              this.moveSelection(+1);
+              break;
+          }
         }
         moveSelection(n) {
-            try {
-                this.isUpdating = true;
-                if (!this.items) {
-                    return;
-                }
-                const index = this.items.indexOf(this.selectedItem);
-                if (index === -1) {
-                    if (n > 0 && this.items.length) {
-                        this.selectedItem = this.items[0];
-                    }
-                    return;
-                }
-                const newIndex = index + n;
-                if (newIndex < 0 || newIndex >= this.items.length) {
-                    return;
-                }
-                this.selectedItem = this.items[newIndex];
+          try {
+            this.isUpdating = true;
+            if (!this.items) {
+              return;
+            }
+            const index = this.items.indexOf(this.selectedItem);
+            if (index === -1) {
+              if (n > 0 && this.items.length) {
+                this.selectedItem = this.items[0];
+              }
+              return;
             }
-            finally {
-                this.isUpdating = false;
+            const newIndex = index + n;
+            if (newIndex < 0 || newIndex >= this.items.length) {
+              return;
             }
+            this.selectedItem = this.items[newIndex];
+          } finally {
+            this.isUpdating = false;
+          }
         }
         openPopup(force = false) {
-            return __awaiter(this, void 0, void 0, function* () {
-                if (this.isPopupOpen) {
-                    return;
-                }
-                try {
-                    if (!force) {
-                        if (!this.searchText) {
-                            return;
-                        }
-                    }
-                    this.isPopupOpen = true;
-                    this.onSearchTextChanged();
-                    const rs = this.app.get(ReferenceService_1.default);
-                    const ws = this.app.get(WindowService_1.WindowService);
-                    const iht = rs.put(this.itemHostTemplate);
-                    const parent = rs.put(this);
-                    const ns = this.app.resolve(NavigationService_1.NavigationService);
-                    this.previousItem = this.selectedItem;
-                    const value = yield ns.openPage(`app://class/${iht.key}`, {
-                        "ref:comboBox": parent
-                    });
-                    this.selectedItem = value;
-                }
-                catch (e) {
-                    this.selectedItem = this.previousItem;
-                    // tslint:disable-next-line:triple-equals
-                    if (e != "cancelled") {
-                        // tslint:disable-next-line:no-console
-                        console.warn(e);
-                    }
-                    else {
-                        this.searchText = "";
-                    }
-                    // throw e;
-                }
-                finally {
-                    yield Atom_1.Atom.delay(100);
-                    this.isPopupOpen = false;
+          return __awaiter(this, void 0, void 0, function* () {
+            if (this.isPopupOpen) {
+              return;
+            }
+            try {
+              if (!force) {
+                if (!this.searchText) {
+                  return;
                 }
-            });
+              }
+              this.isPopupOpen = true;
+              this.onSearchTextChanged();
+              const rs = this.app.get(ReferenceService);
+              const ws = this.app.get(WindowService);
+              const iht = rs.put(this.itemHostTemplate);
+              const parent = rs.put(this);
+              const ns = this.app.resolve(NavigationService);
+              this.previousItem = this.selectedItem;
+              const value = yield ns.openPage(`app://class/${iht.key}`, {
+                "ref:comboBox": parent
+              });
+              this.selectedItem = value;
+            } catch (e) {
+              this.selectedItem = this.previousItem;
+              if (e != "cancelled") {
+                console.warn(e);
+              } else {
+                this.searchText = "";
+              }
+            } finally {
+              yield Atom.delay(100);
+              this.isPopupOpen = false;
+            }
+          });
         }
+      });
+      AutoCompleteBox.itemTemplate = XNode.prepare("itemTemplate", true, true);
+      __decorate([BindableProperty, __metadata("design:type", Object)], AutoCompleteBox.prototype, "selectedItem", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Object)], AutoCompleteBox.prototype, "value", void 0);
     }
-    AutoCompleteBox.itemTemplate = XNode_1.default.prepare("itemTemplate", true, true);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Object)
-    ], AutoCompleteBox.prototype, "selectedItem", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Object)
-    ], AutoCompleteBox.prototype, "value", void 0);
-    exports.default = AutoCompleteBox;
-});
+  };
+});
 //# sourceMappingURL=AutoCompleteBox.js.map