solid-ui 2.4.14-alpha → 2.4.14-bbf45639-aade069c

package/lib/widgets/forms/autocomplete/autocompletePicker.js

@@ -1,340 +1,515 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderAutoComplete = exports.setVisible = void 0;
-/* Autocomplete Picker: Create and edit data using public data
-**
-** As the data source is passed as a parameter, all kinds of APIa and query services can be used
-**
-*/
-var debug = __importStar(require("../../../debug"));
-var style = __importStar(require("../../../style"));
-var widgets = __importStar(require("../../../widgets"));
-var logic_1 = require("../../../logic");
-var publicData_1 = require("./publicData");
-var language_1 = require("./language");
+exports.renderAutoComplete = renderAutoComplete;
+exports.setVisible = setVisible;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var debug = _interopRequireWildcard(require("../../../debug"));
+
+var style = _interopRequireWildcard(require("../../../style"));
+
+var widgets = _interopRequireWildcard(require("../../../widgets"));
+
+var _logic = require("../../../logic");
+
+var _publicData = require("./publicData");
+
+var _language = require("./language");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 var AUTOCOMPLETE_THRESHOLD = 4; // don't check until this many characters typed
+
 var AUTOCOMPLETE_ROWS = 20; // 20?
+
 var AUTOCOMPLETE_ROWS_STRETCH = 40;
+/*
+Autocomplete happens in 6 phases:
+  1. The search string is too small to bother
+  2. The search string is big enough, and we have not loaded the array
+  3. The search string is big enough, and we have loaded array up to the limit
+       Display them and wait for more user input
+  4. The search string is big enough, and we have loaded array NOT to the limit
+     but including all matches.   No more fetches.
+     If user gets more precise, wait for them to select one - or reduce to a single
+  5. Single one selected. Optionally waiting for accept button to be pressed, OR can change string and go to 5 or 2
+  6. Locked with a value. Press 'edit' button to return to 5
+*/
+
 function setVisible(element, visible) {
-    element.style.display = visible ? '' : 'none'; // Do not use visibility, it holds the real estate
-}
-exports.setVisible = setVisible;
-// The core of the autocomplete UI
-function renderAutoComplete(dom, acOptions, decoration, callback) {
-    return __awaiter(this, void 0, void 0, function () {
-        function complain(message) {
-            var errorRow = table.appendChild(dom.createElement('tr'));
-            debug.log(message);
-            var err = new Error(message);
-            errorRow.appendChild(widgets.errorMessageBlock(dom, err, 'pink'));
-            // errorMessageBlock will log the stack to the console
-            style.setStyle(errorRow, 'autocompleteRowStyle');
-            errorRow.style.padding = '1em';
-        }
-        function finish(object, name) {
-            debug.log('Auto complete: finish! ' + object);
-            if (object.termType === 'Literal' && acOptions.queryParams.objectURIBase) {
-                object = logic_1.kb.sym(acOptions.queryParams.objectURIBase.value + object.value);
-            }
-            // remove(decoration.cancelButton)
-            // remove(decoration.acceptButton)
-            // remove(div)
-            clearList();
-            callback(object, name);
-        }
-        function gotIt(object, name) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    if (decoration.acceptButton) {
-                        decoration.acceptButton.disbaled = false;
-                        setVisible(decoration.acceptButton, true); // now wait for confirmation
-                        searchInput.value = name.value; // complete it
-                        foundName = name;
-                        foundObject = object;
-                        debug.log('Auto complete: name: ' + name);
-                        debug.log('Auto complete: waiting for accept ' + object);
-                        clearList(); // This may be an option - nice and clean but does not allow change of mind
-                        return [2 /*return*/];
-                    }
-                    setVisible(decoration.cancelButton, true);
-                    finish(object, name);
-                    return [2 /*return*/];
-                });
-            });
-        }
-        function acceptButtonHandler(_event) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    if (foundName && searchInput.value === foundName.value) { // still
-                        finish(foundObject, foundName);
-                    }
-                    return [2 /*return*/];
-                });
-            });
-        }
-        function cancelButtonHandler(_event) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    debug.log('Auto complete: Canceled by user! ');
-                    if (acOptions.permanent) {
-                        initialize();
-                    }
-                    else {
-                        if (div.parentNode) {
-                            div.parentNode.removeChild(div);
-                        }
-                    }
-                    return [2 /*return*/];
-                });
-            });
-        }
-        function nameMatch(filter, candidate) {
-            var parts = filter.split(' '); // Each name part must be somewhere
-            for (var j = 0; j < parts.length; j++) {
-                var word = parts[j];
-                if (candidate.toLowerCase().indexOf(word) < 0)
-                    return false;
-            }
-            return true;
-        }
-        function clearList() {
-            while (table.children.length > 1) {
-                table.removeChild(table.lastChild);
-            }
-        }
-        function inputEventHHandler(_event) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    // console.log('@@ AC inputEventHHandler called')
-                    setVisible(decoration.cancelButton, true); // only allow cancel when there is something to cancel
-                    refreshList(); /// @@  debounqce does not work with jest
-                    return [2 /*return*/];
-                });
-            });
-        }
-        function loadBindingsAndFilterByLanguage(filter, languagePrefs) {
-            return __awaiter(this, void 0, void 0, function () {
-                var bindings, err_1, slimmed;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            _a.trys.push([0, 2, , 3]);
-                            return [4 /*yield*/, (0, publicData_1.queryPublicDataByName)(filter, targetClass, languagePrefs || language_1.defaultPreferredLanguages, acOptions.queryParams)];
-                        case 1:
-                            bindings = _a.sent();
-                            return [3 /*break*/, 3];
-                        case 2:
-                            err_1 = _a.sent();
-                            complain('Error querying db of organizations: ' + err_1);
-                            inputEventHandlerLock = false;
-                            return [2 /*return*/];
-                        case 3:
-                            loadedEnough = bindings.length < publicData_1.AUTOCOMPLETE_LIMIT;
-                            if (loadedEnough) {
-                                lastFilter = filter;
-                            }
-                            else {
-                                lastFilter = undefined;
-                            }
-                            clearList();
-                            slimmed = (0, language_1.filterByLanguage)(bindings, languagePrefs);
-                            return [2 /*return*/, slimmed];
-                    }
-                });
-            });
-        }
-        function filterByName(filter, bindings) {
-            return bindings.filter(function (binding) { return nameMatch(filter, binding.name.value); });
-        }
-        function refreshList() {
-            return __awaiter(this, void 0, void 0, function () {
-                // console.log('@@ refreshList called')
-                function rowForBinding(binding) {
-                    var _this = this;
-                    var row = dom.createElement('tr');
-                    style.setStyle(row, 'autocompleteRowStyle');
-                    row.setAttribute('style', 'padding: 0.3em;');
-                    row.style.color = allDisplayed ? '#080' : '#088'; // green means 'you should find it here'
-                    row.textContent = binding.name.value;
-                    var object = (0, publicData_1.bindingToTerm)(binding.subject);
-                    var nameTerm = (0, publicData_1.bindingToTerm)(binding.name);
-                    row.addEventListener('click', function (_event) { return __awaiter(_this, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            debug.log('       click row textContent: ' + row.textContent);
-                            debug.log('       click name: ' + nameTerm.value);
-                            if (object && nameTerm) {
-                                gotIt(object, nameTerm);
-                            }
-                            return [2 /*return*/];
-                        });
-                    }); });
-                    return row;
-                } // rowForBinding
-                function compareBindingsByName(self, other) {
-                    return other.name.value > self.name.value
-                        ? 1
-                        : other.name.name < self.name.value ? -1 : 0;
-                }
-                var languagePrefs, filter, slimmed, displayable, _i, displayable_1, binding;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (inputEventHandlerLock) {
-                                debug.log("Ignoring \"".concat(searchInput.value, "\" because of lock "));
-                                return [2 /*return*/];
-                            }
-                            debug.log("Setting lock at \"".concat(searchInput.value, "\""));
-                            inputEventHandlerLock = true;
-                            return [4 /*yield*/, (0, language_1.getPreferredLanguages)()];
-                        case 1:
-                            languagePrefs = _a.sent();
-                            filter = searchInput.value.trim().toLowerCase();
-                            if (!(filter.length < AUTOCOMPLETE_THRESHOLD)) return [3 /*break*/, 2];
-                            clearList();
-                            // candidatesLoaded = false
-                            numberOfRows = AUTOCOMPLETE_ROWS;
-                            return [3 /*break*/, 5];
-                        case 2:
-                            if (!(!allDisplayed || !lastFilter || !filter.startsWith(lastFilter))) return [3 /*break*/, 4];
-                            debug.log("   Querying database at \"".concat(filter, "\" cf last \"").concat(lastFilter, "\"."));
-                            return [4 /*yield*/, loadBindingsAndFilterByLanguage(filter, languagePrefs)]; // freesh query
-                        case 3:
-                            lastBindings = _a.sent(); // freesh query
-                            _a.label = 4;
-                        case 4:
-                            slimmed = filterByName(filter, lastBindings);
-                            if (loadedEnough && slimmed.length <= AUTOCOMPLETE_ROWS_STRETCH) {
-                                numberOfRows = slimmed.length; // stretch if it means we get all items
-                            }
-                            allDisplayed = loadedEnough && slimmed.length <= numberOfRows;
-                            debug.log(" Filter:\"".concat(filter, "\" lastBindings: ").concat(lastBindings.length, ", slimmed to ").concat(slimmed.length, "; rows: ").concat(numberOfRows, ", Enough? ").concat(loadedEnough, ", All displayed? ").concat(allDisplayed));
-                            displayable = slimmed.slice(0, numberOfRows);
-                            displayable.sort(compareBindingsByName);
-                            clearList();
-                            for (_i = 0, displayable_1 = displayable; _i < displayable_1.length; _i++) {
-                                binding = displayable_1[_i];
-                                table.appendChild(rowForBinding(binding));
-                            }
-                            if (slimmed.length === 1) {
-                                gotIt((0, publicData_1.bindingToTerm)(slimmed[0].subject), (0, publicData_1.bindingToTerm)(slimmed[0].name));
-                            }
-                            _a.label = 5;
-                        case 5:
-                            inputEventHandlerLock = false;
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        } // refreshList
-        function initialize() {
-            if (acOptions.currentObject) { // If have existing value then jump into the endgame of the autocomplete
+  element.style.display = visible ? '' : 'none'; // Do not use visibility, it holds the real estate
+} // The core of the autocomplete UI
+
+
+function renderAutoComplete(_x, _x2, _x3, _x4) {
+  return _renderAutoComplete.apply(this, arguments);
+} // renderAutoComplete
+// ENDS
+
+
+function _renderAutoComplete() {
+  _renderAutoComplete = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8(dom, acOptions, decoration, callback) {
+    var complain, finish, gotIt, _gotIt, acceptButtonHandler, _acceptButtonHandler, cancelButtonHandler, _cancelButtonHandler, nameMatch, clearList, inputEventHHandler, _inputEventHHandler, loadBindingsAndFilterByLanguage, _loadBindingsAndFilterByLanguage, filterByName, refreshList, _refreshList, initialize, targetClass, lastBindings, loadedEnough, inputEventHandlerLock, allDisplayed, lastFilter, numberOfRows, div, foundName, foundObject, table, head, cell, searchInput, size, searchInputStyle;
+
+    return _regenerator["default"].wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            initialize = function _initialize() {
+              if (acOptions.currentObject) {
+                // If have existing value then jump into the endgame of the autocomplete
                 searchInput.value = acOptions.currentName ? acOptions.currentName.value : '??? wot no name for ' + acOptions.currentObject;
                 foundName = acOptions.currentName;
                 lastFilter = acOptions.currentName ? acOptions.currentName.value : undefined;
                 foundObject = acOptions.currentObject;
-            }
-            else {
+              } else {
                 searchInput.value = '';
                 lastFilter = undefined;
                 foundObject = undefined;
-            }
-            if (decoration.deleteButton) {
+              }
+
+              if (decoration.deleteButton) {
                 setVisible(decoration.deleteButton, !!acOptions.currentObject);
-            }
-            if (decoration.acceptButton) {
+              }
+
+              if (decoration.acceptButton) {
                 setVisible(decoration.acceptButton, false); // hide until input complete
-            }
-            if (decoration.editButton) {
+              }
+
+              if (decoration.editButton) {
                 setVisible(decoration.editButton, true);
-            }
-            if (decoration.cancelButton) {
+              }
+
+              if (decoration.cancelButton) {
                 setVisible(decoration.cancelButton, false); // only allow cancel when there is something to cancel
-            }
-            inputEventHandlerLock = false;
-            clearList();
-        } // initialiize
-        var targetClass, lastBindings, loadedEnough, inputEventHandlerLock, allDisplayed, lastFilter, numberOfRows, div, foundName, foundObject, table, head, cell, searchInput, size, searchInputStyle;
-        return __generator(this, function (_a) {
+              }
+
+              inputEventHandlerLock = false;
+              clearList();
+            };
+
+            _refreshList = function _refreshList3() {
+              _refreshList = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+                var rowForBinding, compareBindingsByName, languagePrefs, filter, slimmed, displayable, _iterator, _step, binding;
+
+                return _regenerator["default"].wrap(function _callee7$(_context7) {
+                  while (1) {
+                    switch (_context7.prev = _context7.next) {
+                      case 0:
+                        compareBindingsByName = function _compareBindingsByNam(self, other) {
+                          return other.name.value > self.name.value ? 1 : other.name.name < self.name.value ? -1 : 0;
+                        };
+
+                        rowForBinding = function _rowForBinding(binding) {
+                          var row = dom.createElement('tr');
+                          style.setStyle(row, 'autocompleteRowStyle');
+                          row.setAttribute('style', 'padding: 0.3em;');
+                          row.style.color = allDisplayed ? '#080' : '#088'; // green means 'you should find it here'
+
+                          row.textContent = binding.name.value;
+                          var object = (0, _publicData.bindingToTerm)(binding.subject);
+                          var nameTerm = (0, _publicData.bindingToTerm)(binding.name);
+                          row.addEventListener('click', /*#__PURE__*/function () {
+                            var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(_event) {
+                              return _regenerator["default"].wrap(function _callee6$(_context6) {
+                                while (1) {
+                                  switch (_context6.prev = _context6.next) {
+                                    case 0:
+                                      debug.log('       click row textContent: ' + row.textContent);
+                                      debug.log('       click name: ' + nameTerm.value);
+
+                                      if (object && nameTerm) {
+                                        gotIt(object, nameTerm);
+                                      }
+
+                                    case 3:
+                                    case "end":
+                                      return _context6.stop();
+                                  }
+                                }
+                              }, _callee6);
+                            }));
+
+                            return function (_x12) {
+                              return _ref.apply(this, arguments);
+                            };
+                          }());
+                          return row;
+                        };
+
+                        if (!inputEventHandlerLock) {
+                          _context7.next = 5;
+                          break;
+                        }
+
+                        debug.log("Ignoring \"".concat(searchInput.value, "\" because of lock "));
+                        return _context7.abrupt("return");
+
+                      case 5:
+                        debug.log("Setting lock at \"".concat(searchInput.value, "\""));
+                        inputEventHandlerLock = true;
+                        _context7.next = 9;
+                        return (0, _language.getPreferredLanguages)();
+
+                      case 9:
+                        languagePrefs = _context7.sent;
+                        filter = searchInput.value.trim().toLowerCase();
+
+                        if (!(filter.length < AUTOCOMPLETE_THRESHOLD)) {
+                          _context7.next = 16;
+                          break;
+                        }
+
+                        // too small
+                        clearList(); // candidatesLoaded = false
+
+                        numberOfRows = AUTOCOMPLETE_ROWS;
+                        _context7.next = 31;
+                        break;
+
+                      case 16:
+                        if (!(!allDisplayed || !lastFilter || !filter.startsWith(lastFilter))) {
+                          _context7.next = 21;
+                          break;
+                        }
+
+                        debug.log("   Querying database at \"".concat(filter, "\" cf last \"").concat(lastFilter, "\"."));
+                        _context7.next = 20;
+                        return loadBindingsAndFilterByLanguage(filter, languagePrefs);
+
+                      case 20:
+                        lastBindings = _context7.sent;
+
+                      case 21:
+                        // Trim table as search gets tighter:
+                        slimmed = filterByName(filter, lastBindings);
+
+                        if (loadedEnough && slimmed.length <= AUTOCOMPLETE_ROWS_STRETCH) {
+                          numberOfRows = slimmed.length; // stretch if it means we get all items
+                        }
+
+                        allDisplayed = loadedEnough && slimmed.length <= numberOfRows;
+                        debug.log(" Filter:\"".concat(filter, "\" lastBindings: ").concat(lastBindings.length, ", slimmed to ").concat(slimmed.length, "; rows: ").concat(numberOfRows, ", Enough? ").concat(loadedEnough, ", All displayed? ").concat(allDisplayed));
+                        displayable = slimmed.slice(0, numberOfRows);
+                        displayable.sort(compareBindingsByName);
+                        clearList();
+                        _iterator = _createForOfIteratorHelper(displayable);
+
+                        try {
+                          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                            binding = _step.value;
+                            table.appendChild(rowForBinding(binding));
+                          }
+                        } catch (err) {
+                          _iterator.e(err);
+                        } finally {
+                          _iterator.f();
+                        }
+
+                        if (slimmed.length === 1) {
+                          gotIt((0, _publicData.bindingToTerm)(slimmed[0].subject), (0, _publicData.bindingToTerm)(slimmed[0].name));
+                        }
+
+                      case 31:
+                        // else
+                        inputEventHandlerLock = false;
+
+                      case 32:
+                      case "end":
+                        return _context7.stop();
+                    }
+                  }
+                }, _callee7);
+              }));
+              return _refreshList.apply(this, arguments);
+            };
+
+            refreshList = function _refreshList2() {
+              return _refreshList.apply(this, arguments);
+            };
+
+            filterByName = function _filterByName(filter, bindings) {
+              return bindings.filter(function (binding) {
+                return nameMatch(filter, binding.name.value);
+              });
+            };
+
+            _loadBindingsAndFilterByLanguage = function _loadBindingsAndFilte2() {
+              _loadBindingsAndFilterByLanguage = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(filter, languagePrefs) {
+                var bindings, slimmed;
+                return _regenerator["default"].wrap(function _callee5$(_context5) {
+                  while (1) {
+                    switch (_context5.prev = _context5.next) {
+                      case 0:
+                        _context5.prev = 0;
+                        _context5.next = 3;
+                        return (0, _publicData.queryPublicDataByName)(filter, targetClass, languagePrefs || _language.defaultPreferredLanguages, acOptions.queryParams);
+
+                      case 3:
+                        bindings = _context5.sent;
+                        _context5.next = 11;
+                        break;
+
+                      case 6:
+                        _context5.prev = 6;
+                        _context5.t0 = _context5["catch"](0);
+                        complain('Error querying db of organizations: ' + _context5.t0);
+                        inputEventHandlerLock = false;
+                        return _context5.abrupt("return");
+
+                      case 11:
+                        loadedEnough = bindings.length < _publicData.AUTOCOMPLETE_LIMIT;
+
+                        if (loadedEnough) {
+                          lastFilter = filter;
+                        } else {
+                          lastFilter = undefined;
+                        }
+
+                        clearList();
+                        slimmed = (0, _language.filterByLanguage)(bindings, languagePrefs);
+                        return _context5.abrupt("return", slimmed);
+
+                      case 16:
+                      case "end":
+                        return _context5.stop();
+                    }
+                  }
+                }, _callee5, null, [[0, 6]]);
+              }));
+              return _loadBindingsAndFilterByLanguage.apply(this, arguments);
+            };
+
+            loadBindingsAndFilterByLanguage = function _loadBindingsAndFilte(_x10, _x11) {
+              return _loadBindingsAndFilterByLanguage.apply(this, arguments);
+            };
+
+            _inputEventHHandler = function _inputEventHHandler3() {
+              _inputEventHHandler = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(_event) {
+                return _regenerator["default"].wrap(function _callee4$(_context4) {
+                  while (1) {
+                    switch (_context4.prev = _context4.next) {
+                      case 0:
+                        // console.log('@@ AC inputEventHHandler called')
+                        setVisible(decoration.cancelButton, true); // only allow cancel when there is something to cancel
+
+                        refreshList(); /// @@  debounqce does not work with jest
+
+                        /*
+                        if (runningTimeout) {
+                          clearTimeout(runningTimeout)
+                        }
+                        runningTimeout = setTimeout(refreshList, AUTOCOMPLETE_DEBOUNCE_MS)
+                        */
+
+                      case 2:
+                      case "end":
+                        return _context4.stop();
+                    }
+                  }
+                }, _callee4);
+              }));
+              return _inputEventHHandler.apply(this, arguments);
+            };
+
+            inputEventHHandler = function _inputEventHHandler2(_x9) {
+              return _inputEventHHandler.apply(this, arguments);
+            };
+
+            clearList = function _clearList() {
+              while (table.children.length > 1) {
+                table.removeChild(table.lastChild);
+              }
+            };
+
+            nameMatch = function _nameMatch(filter, candidate) {
+              var parts = filter.split(' '); // Each name part must be somewhere
+
+              for (var j = 0; j < parts.length; j++) {
+                var word = parts[j];
+                if (candidate.toLowerCase().indexOf(word) < 0) return false;
+              }
+
+              return true;
+            };
+
+            _cancelButtonHandler = function _cancelButtonHandler3() {
+              _cancelButtonHandler = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(_event) {
+                return _regenerator["default"].wrap(function _callee3$(_context3) {
+                  while (1) {
+                    switch (_context3.prev = _context3.next) {
+                      case 0:
+                        debug.log('Auto complete: Canceled by user! ');
+
+                        if (acOptions.permanent) {
+                          initialize();
+                        } else {
+                          if (div.parentNode) {
+                            div.parentNode.removeChild(div);
+                          }
+                        }
+
+                      case 2:
+                      case "end":
+                        return _context3.stop();
+                    }
+                  }
+                }, _callee3);
+              }));
+              return _cancelButtonHandler.apply(this, arguments);
+            };
+
+            cancelButtonHandler = function _cancelButtonHandler2(_x8) {
+              return _cancelButtonHandler.apply(this, arguments);
+            };
+
+            _acceptButtonHandler = function _acceptButtonHandler3() {
+              _acceptButtonHandler = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(_event) {
+                return _regenerator["default"].wrap(function _callee2$(_context2) {
+                  while (1) {
+                    switch (_context2.prev = _context2.next) {
+                      case 0:
+                        if (foundName && searchInput.value === foundName.value) {
+                          // still
+                          finish(foundObject, foundName);
+                        }
+
+                      case 1:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }
+                }, _callee2);
+              }));
+              return _acceptButtonHandler.apply(this, arguments);
+            };
+
+            acceptButtonHandler = function _acceptButtonHandler2(_x7) {
+              return _acceptButtonHandler.apply(this, arguments);
+            };
+
+            _gotIt = function _gotIt3() {
+              _gotIt = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(object, name) {
+                return _regenerator["default"].wrap(function _callee$(_context) {
+                  while (1) {
+                    switch (_context.prev = _context.next) {
+                      case 0:
+                        if (!decoration.acceptButton) {
+                          _context.next = 10;
+                          break;
+                        }
+
+                        decoration.acceptButton.disbaled = false;
+                        setVisible(decoration.acceptButton, true); // now wait for confirmation
+
+                        searchInput.value = name.value; // complete it
+
+                        foundName = name;
+                        foundObject = object;
+                        debug.log('Auto complete: name: ' + name);
+                        debug.log('Auto complete: waiting for accept ' + object);
+                        clearList(); // This may be an option - nice and clean but does not allow change of mind
+
+                        return _context.abrupt("return");
+
+                      case 10:
+                        setVisible(decoration.cancelButton, true);
+                        finish(object, name);
+
+                      case 12:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }
+                }, _callee);
+              }));
+              return _gotIt.apply(this, arguments);
+            };
+
+            gotIt = function _gotIt2(_x5, _x6) {
+              return _gotIt.apply(this, arguments);
+            };
+
+            finish = function _finish(object, name) {
+              debug.log('Auto complete: finish! ' + object);
+
+              if (object.termType === 'Literal' && acOptions.queryParams.objectURIBase) {
+                object = _logic.kb.sym(acOptions.queryParams.objectURIBase.value + object.value);
+              } // remove(decoration.cancelButton)
+              // remove(decoration.acceptButton)
+              // remove(div)
+
+
+              clearList();
+              callback(object, name);
+            };
+
+            complain = function _complain(message) {
+              var errorRow = table.appendChild(dom.createElement('tr'));
+              debug.log(message);
+              var err = new Error(message);
+              errorRow.appendChild(widgets.errorMessageBlock(dom, err, 'pink')); // errorMessageBlock will log the stack to the console
+
+              style.setStyle(errorRow, 'autocompleteRowStyle');
+              errorRow.style.padding = '1em';
+            };
+
+            // initialiize
+            // const queryParams: QueryParameters = acOptions.queryParams
             targetClass = acOptions.targetClass;
-            if (!targetClass)
-                throw new Error('renderAutoComplete: missing targetClass');
+
+            if (targetClass) {
+              _context8.next = 21;
+              break;
+            }
+
+            throw new Error('renderAutoComplete: missing targetClass');
+
+          case 21:
             // console.log(`renderAutoComplete: targetClass=${targetClass}` )
             if (decoration.acceptButton) {
-                decoration.acceptButton.addEventListener('click', acceptButtonHandler, false);
+              decoration.acceptButton.addEventListener('click', acceptButtonHandler, false);
             }
+
             if (decoration.cancelButton) {
-                decoration.cancelButton.addEventListener('click', cancelButtonHandler, false);
-            }
+              decoration.cancelButton.addEventListener('click', cancelButtonHandler, false);
+            } // var candidatesLoaded = false
+
+
             loadedEnough = false;
             inputEventHandlerLock = false;
             allDisplayed = false;
             lastFilter = undefined;
-            numberOfRows = AUTOCOMPLETE_ROWS // this gets slimmed down
-            ;
+            numberOfRows = AUTOCOMPLETE_ROWS; // this gets slimmed down
+
             div = dom.createElement('div');
-            foundName = undefined // once found accepted string must match this
-            ;
+            foundName = undefined; // once found accepted string must match this
+
             foundObject = undefined;
             table = div.appendChild(dom.createElement('table'));
             table.setAttribute('data-testid', 'autocomplete-table');
             table.setAttribute('style', 'max-width: 30em; margin: 0.5em;');
             head = table.appendChild(dom.createElement('tr'));
             style.setStyle(head, 'autocompleteRowStyle'); // textInputStyle or
+
             cell = head.appendChild(dom.createElement('td'));
             searchInput = cell.appendChild(dom.createElement('input'));
             searchInput.setAttribute('type', 'text');
@@ -343,20 +518,25 @@ function renderAutoComplete(dom, acOptions, decoration, callback) {
             searchInput.setAttribute('size', size);
             searchInput.setAttribute('data-testid', 'autocomplete-input');
             searchInputStyle = style.textInputStyle || // searchInputStyle ?
-                'border: 0.1em solid #444; border-radius: 0.5em; width: 100%; font-size: 100%; padding: 0.1em 0.6em' // @
-            ;
+            'border: 0.1em solid #444; border-radius: 0.5em; width: 100%; font-size: 100%; padding: 0.1em 0.6em'; // @
+
             searchInput.setAttribute('style', searchInputStyle);
             searchInput.addEventListener('keyup', function (event) {
-                if (event.keyCode === 13) {
-                    acceptButtonHandler(event);
-                }
+              if (event.keyCode === 13) {
+                acceptButtonHandler(event);
+              }
             }, false);
-            searchInput.addEventListener('input', inputEventHHandler);
-            // console.log('@@ renderAutoComplete returns ' + div.innerHTML)
-            return [2 /*return*/, div];
-        });
-    });
-} // renderAutoComplete
-exports.renderAutoComplete = renderAutoComplete;
-// ENDS
+            searchInput.addEventListener('input', inputEventHHandler); // console.log('@@ renderAutoComplete returns ' + div.innerHTML)
+
+            return _context8.abrupt("return", div);
+
+          case 48:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8);
+  }));
+  return _renderAutoComplete.apply(this, arguments);
+}
 //# sourceMappingURL=autocompletePicker.js.map