@searchspring/snap-controller 0.20.0

package/dist/cjs/Autocomplete/AutocompleteController.js

@@ -0,0 +1,687 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteController = void 0;
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var snap_store_mobx_1 = require("@searchspring/snap-store-mobx");
+var snap_toolbox_1 = require("@searchspring/snap-toolbox");
+var AbstractController_1 = require("../Abstract/AbstractController");
+var getParams_1 = require("../utils/getParams");
+var INPUT_ATTRIBUTE = 'ss-autocomplete-input';
+var INPUT_DELAY = 200;
+var KEY_ENTER = 13;
+var KEY_ESCAPE = 27;
+var PARAM_ORIGINAL_QUERY = 'oq';
+var defaultConfig = {
+    id: 'autocomplete',
+    selector: '',
+    action: '',
+    globals: {},
+    settings: {
+        initializeFromUrl: true,
+        syncInputs: true,
+        facets: {
+            trim: true,
+            pinFiltered: true,
+        },
+    },
+};
+var AutocompleteController = /** @class */ (function (_super) {
+    __extends(AutocompleteController, _super);
+    function AutocompleteController(config, _a) {
+        var client = _a.client, store = _a.store, urlManager = _a.urlManager, eventManager = _a.eventManager, profiler = _a.profiler, logger = _a.logger, tracker = _a.tracker;
+        var _this = _super.call(this, config, { client: client, store: store, urlManager: urlManager, eventManager: eventManager, profiler: profiler, logger: logger, tracker: tracker }) || this;
+        _this.type = 'autocomplete';
+        _this.track = {
+            // TODO: add in future when autocomplete supports result click tracking
+            product: {
+                click: function (e, result) {
+                    _this.log.warn('product.click tracking is not currently supported in this controller type');
+                },
+            },
+        };
+        _this.handlers = {
+            input: {
+                enterKey: function (e) { return __awaiter(_this, void 0, void 0, function () {
+                    var actionUrl, input, inputParam, err_1, newUrl;
+                    var _a, _b, _c;
+                    return __generator(this, function (_d) {
+                        switch (_d.label) {
+                            case 0:
+                                if (!(e.keyCode == KEY_ENTER)) return [3 /*break*/, 10];
+                                actionUrl = (0, snap_toolbox_1.url)(this.config.action);
+                                input = e.target;
+                                if (!((_c = (_b = (_a = this.config.globals) === null || _a === void 0 ? void 0 : _a.search) === null || _b === void 0 ? void 0 : _b.query) === null || _c === void 0 ? void 0 : _c.spellCorrection)) return [3 /*break*/, 5];
+                                // wait until loading is complete before submission
+                                // TODO make this better
+                                return [4 /*yield*/, timeout(INPUT_DELAY + 1)];
+                            case 1:
+                                // wait until loading is complete before submission
+                                // TODO make this better
+                                _d.sent();
+                                _d.label = 2;
+                            case 2:
+                                if (!this.store.loading) return [3 /*break*/, 4];
+                                return [4 /*yield*/, timeout(INPUT_DELAY)];
+                            case 3:
+                                _d.sent();
+                                return [3 /*break*/, 2];
+                            case 4:
+                                // use corrected query and originalQuery
+                                if (this.store.search.originalQuery) {
+                                    input.value = this.store.search.query.string;
+                                    actionUrl.params.query[PARAM_ORIGINAL_QUERY] = this.store.search.originalQuery.string;
+                                }
+                                _d.label = 5;
+                            case 5:
+                                inputParam = input.name || this.urlManager.getTranslatorConfig().queryParameter;
+                                actionUrl.params.query[inputParam] = input.value;
+                                _d.label = 6;
+                            case 6:
+                                _d.trys.push([6, 8, , 9]);
+                                return [4 /*yield*/, this.eventManager.fire('beforeSubmit', {
+                                        controller: this,
+                                        input: input,
+                                    })];
+                            case 7:
+                                _d.sent();
+                                return [3 /*break*/, 9];
+                            case 8:
+                                err_1 = _d.sent();
+                                if ((err_1 === null || err_1 === void 0 ? void 0 : err_1.message) == 'cancelled') {
+                                    this.log.warn("'beforeSubmit' middleware cancelled");
+                                    return [2 /*return*/];
+                                }
+                                else {
+                                    this.log.error("error in 'beforeSubmit' middleware");
+                                    console.error(err_1);
+                                }
+                                return [3 /*break*/, 9];
+                            case 9:
+                                newUrl = actionUrl.url();
+                                window.location.href = newUrl;
+                                _d.label = 10;
+                            case 10: return [2 /*return*/];
+                        }
+                    });
+                }); },
+                escKey: function (e) {
+                    if (e.keyCode == KEY_ESCAPE) {
+                        e.target.blur();
+                        _this.setFocused();
+                    }
+                },
+                focus: function (e) {
+                    e.stopPropagation();
+                    // timeout to ensure focus happens AFTER click
+                    setTimeout(function () {
+                        _this.setFocused(e.target);
+                    });
+                },
+                formSubmit: function (e) { return __awaiter(_this, void 0, void 0, function () {
+                    var form, input, err_2;
+                    var _a, _b, _c;
+                    return __generator(this, function (_d) {
+                        switch (_d.label) {
+                            case 0:
+                                form = e.target;
+                                input = form.querySelector("input[".concat(INPUT_ATTRIBUTE, "]"));
+                                e.preventDefault();
+                                if (!((_c = (_b = (_a = this.config.globals) === null || _a === void 0 ? void 0 : _a.search) === null || _b === void 0 ? void 0 : _b.query) === null || _c === void 0 ? void 0 : _c.spellCorrection)) return [3 /*break*/, 5];
+                                // wait until loading is complete before submission
+                                // TODO make this better
+                                return [4 /*yield*/, timeout(INPUT_DELAY + 1)];
+                            case 1:
+                                // wait until loading is complete before submission
+                                // TODO make this better
+                                _d.sent();
+                                _d.label = 2;
+                            case 2:
+                                if (!this.store.loading) return [3 /*break*/, 4];
+                                return [4 /*yield*/, timeout(INPUT_DELAY)];
+                            case 3:
+                                _d.sent();
+                                return [3 /*break*/, 2];
+                            case 4:
+                                if (this.store.search.originalQuery) {
+                                    input.value = this.store.search.query.string;
+                                    addHiddenFormInput(form, PARAM_ORIGINAL_QUERY, this.store.search.originalQuery.string);
+                                }
+                                _d.label = 5;
+                            case 5:
+                                _d.trys.push([5, 7, , 8]);
+                                return [4 /*yield*/, this.eventManager.fire('beforeSubmit', {
+                                        controller: this,
+                                        input: input,
+                                    })];
+                            case 6:
+                                _d.sent();
+                                return [3 /*break*/, 8];
+                            case 7:
+                                err_2 = _d.sent();
+                                if ((err_2 === null || err_2 === void 0 ? void 0 : err_2.message) == 'cancelled') {
+                                    this.log.warn("'beforeSubmit' middleware cancelled");
+                                    return [2 /*return*/];
+                                }
+                                else {
+                                    this.log.error("error in 'beforeSubmit' middleware");
+                                    console.error(err_2);
+                                }
+                                return [3 /*break*/, 8];
+                            case 8:
+                                form.submit();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); },
+                keyUp: function (e) {
+                    // ignore enter and escape keys
+                    if ((e === null || e === void 0 ? void 0 : e.keyCode) == KEY_ENTER || (e === null || e === void 0 ? void 0 : e.keyCode) == KEY_ESCAPE)
+                        return;
+                    // return focus on keyup if it was lost
+                    if (e.isTrusted && _this.store.state.focusedInput !== e.target) {
+                        _this.setFocused(e.target);
+                    }
+                    var value = e.target.value;
+                    // prevent search when value is unchanged
+                    if (_this.store.state.input == value && _this.store.loaded) {
+                        return;
+                    }
+                    _this.store.state.input = value;
+                    if (_this.config.settings.syncInputs) {
+                        var inputs = document.querySelectorAll(_this.config.selector);
+                        inputs.forEach(function (input) {
+                            input.value = value;
+                        });
+                    }
+                    clearTimeout(_this.handlers.input.timeoutDelay);
+                    if (!value) {
+                        // TODO cancel any current requests?
+                        _this.store.reset();
+                        _this.urlManager.reset().go();
+                    }
+                    else {
+                        _this.handlers.input.timeoutDelay = setTimeout(function () {
+                            _this.store.state.locks.terms.unlock();
+                            _this.store.state.locks.facets.unlock();
+                            _this.urlManager.set({ query: _this.store.state.input }).go();
+                        }, INPUT_DELAY);
+                    }
+                },
+                timeoutDelay: undefined,
+            },
+            document: {
+                click: function (e) {
+                    var inputs = document.querySelectorAll(_this.config.selector);
+                    if (Array.from(inputs).includes(e.target)) {
+                        e.stopPropagation();
+                    }
+                    else {
+                        _this.setFocused();
+                    }
+                },
+            },
+        };
+        _this.searchTrending = function () { return __awaiter(_this, void 0, void 0, function () {
+            var terms, storedTerms, trendingParams, trendingProfile;
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        storedTerms = this.storage.get('terms');
+                        if (!storedTerms) return [3 /*break*/, 1];
+                        // terms exist in storage, update store
+                        terms = JSON.parse(storedTerms);
+                        return [3 /*break*/, 3];
+                    case 1:
+                        trendingParams = {
+                            limit: ((_b = (_a = this.config.settings) === null || _a === void 0 ? void 0 : _a.trending) === null || _b === void 0 ? void 0 : _b.limit) || 5,
+                        };
+                        trendingProfile = this.profiler.create({ type: 'event', name: 'trending', context: trendingParams }).start();
+                        return [4 /*yield*/, this.client.trending(trendingParams)];
+                    case 2:
+                        terms = _c.sent();
+                        trendingProfile.stop();
+                        this.log.profile(trendingProfile);
+                        this.storage.set('terms', JSON.stringify(terms));
+                        _c.label = 3;
+                    case 3:
+                        this.store.updateTrendingTerms(terms);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.search = function () { return __awaiter(_this, void 0, void 0, function () {
+            var params, err_3, searchProfile, _a, meta, response, afterSearchProfile, err_4, afterStoreProfile, err_5, err_6;
+            var _b, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        params = this.params;
+                        if (!((_c = (_b = params === null || params === void 0 ? void 0 : params.search) === null || _b === void 0 ? void 0 : _b.query) === null || _c === void 0 ? void 0 : _c.string)) {
+                            return [2 /*return*/];
+                        }
+                        _d.label = 1;
+                    case 1:
+                        _d.trys.push([1, 15, , 16]);
+                        _d.label = 2;
+                    case 2:
+                        _d.trys.push([2, 4, , 5]);
+                        return [4 /*yield*/, this.eventManager.fire('beforeSearch', {
+                                controller: this,
+                                request: params,
+                            })];
+                    case 3:
+                        _d.sent();
+                        return [3 /*break*/, 5];
+                    case 4:
+                        err_3 = _d.sent();
+                        if ((err_3 === null || err_3 === void 0 ? void 0 : err_3.message) == 'cancelled') {
+                            this.log.warn("'beforeSearch' middleware cancelled");
+                            return [2 /*return*/];
+                        }
+                        else {
+                            this.log.error("error in 'beforeSearch' middleware");
+                            throw err_3;
+                        }
+                        return [3 /*break*/, 5];
+                    case 5:
+                        searchProfile = this.profiler.create({ type: 'event', name: 'search', context: params }).start();
+                        return [4 /*yield*/, this.client.autocomplete(params)];
+                    case 6:
+                        _a = _d.sent(), meta = _a[0], response = _a[1];
+                        if (!response.meta) {
+                            /**
+                             * MockClient will overwrite the client search() method and use
+                             * SearchData to return mock data which already contains meta data
+                             */
+                            response.meta = meta;
+                        }
+                        searchProfile.stop();
+                        this.log.profile(searchProfile);
+                        afterSearchProfile = this.profiler.create({ type: 'event', name: 'afterSearch', context: params }).start();
+                        _d.label = 7;
+                    case 7:
+                        _d.trys.push([7, 9, , 10]);
+                        return [4 /*yield*/, this.eventManager.fire('afterSearch', {
+                                controller: this,
+                                request: params,
+                                response: response,
+                            })];
+                    case 8:
+                        _d.sent();
+                        return [3 /*break*/, 10];
+                    case 9:
+                        err_4 = _d.sent();
+                        if ((err_4 === null || err_4 === void 0 ? void 0 : err_4.message) == 'cancelled') {
+                            this.log.warn("'afterSearch' middleware cancelled");
+                            afterSearchProfile.stop();
+                            return [2 /*return*/];
+                        }
+                        else {
+                            this.log.error("error in 'afterSearch' middleware");
+                            throw err_4;
+                        }
+                        return [3 /*break*/, 10];
+                    case 10:
+                        afterSearchProfile.stop();
+                        this.log.profile(afterSearchProfile);
+                        // update the store
+                        this.store.update(response);
+                        afterStoreProfile = this.profiler.create({ type: 'event', name: 'afterStore', context: params }).start();
+                        _d.label = 11;
+                    case 11:
+                        _d.trys.push([11, 13, , 14]);
+                        return [4 /*yield*/, this.eventManager.fire('afterStore', {
+                                controller: this,
+                                request: params,
+                                response: response,
+                            })];
+                    case 12:
+                        _d.sent();
+                        return [3 /*break*/, 14];
+                    case 13:
+                        err_5 = _d.sent();
+                        if ((err_5 === null || err_5 === void 0 ? void 0 : err_5.message) == 'cancelled') {
+                            this.log.warn("'afterStore' middleware cancelled");
+                            afterStoreProfile.stop();
+                            return [2 /*return*/];
+                        }
+                        else {
+                            this.log.error("error in 'afterStore' middleware");
+                            throw err_5;
+                        }
+                        return [3 /*break*/, 14];
+                    case 14:
+                        afterStoreProfile.stop();
+                        this.log.profile(afterStoreProfile);
+                        return [3 /*break*/, 16];
+                    case 15:
+                        err_6 = _d.sent();
+                        if (err_6) {
+                            switch (err_6) {
+                                case 429:
+                                    this.store.error = {
+                                        code: 429,
+                                        type: snap_store_mobx_1.ErrorType.WARNING,
+                                        message: 'Too many requests try again later',
+                                    };
+                                    this.log.warn(this.store.error);
+                                    break;
+                                case 500:
+                                    this.store.error = {
+                                        code: 500,
+                                        type: snap_store_mobx_1.ErrorType.ERROR,
+                                        message: 'Invalid Search Request or Service Unavailable',
+                                    };
+                                    this.log.error(this.store.error);
+                                    break;
+                                default:
+                                    this.log.error(err_6);
+                                    break;
+                            }
+                            this.store.loading = false;
+                        }
+                        return [3 /*break*/, 16];
+                    case 16: return [2 /*return*/];
+                }
+            });
+        }); };
+        // deep merge config with defaults
+        _this.config = (0, deepmerge_1.default)(defaultConfig, _this.config);
+        _this.store.setConfig(_this.config);
+        // get current search from url before detaching
+        if (_this.config.settings.initializeFromUrl) {
+            _this.store.state.input = _this.urlManager.state.query;
+            // reset to force search on focus
+            // TODO: make a config setting for this
+            _this.urlManager.reset().go();
+        }
+        // persist trending terms in local storage
+        _this.storage = new snap_store_mobx_1.StorageStore({
+            type: snap_store_mobx_1.StorageType.SESSION,
+            key: "ss-controller-".concat(_this.config.id),
+        });
+        // add 'beforeSearch' middleware
+        _this.eventManager.on('beforeSearch', function (ac, next) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        ac.controller.store.loading = true;
+                        return [4 /*yield*/, next()];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        // add 'afterSearch' middleware
+        _this.eventManager.on('afterSearch', function (ac, next) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, next()];
+                    case 1:
+                        _a.sent();
+                        // cancel search if no input or query doesn't match current urlState
+                        if (ac.response.autocomplete.query != ac.controller.urlManager.state.query) {
+                            return [2 /*return*/, false];
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        // add 'afterStore' middleware
+        _this.eventManager.on('afterStore', function (ac, next) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, next()];
+                    case 1:
+                        _a.sent();
+                        ac.controller.store.loading = false;
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        // attach config plugins and event middleware
+        _this.use(_this.config);
+        return _this;
+    }
+    Object.defineProperty(AutocompleteController.prototype, "params", {
+        get: function () {
+            var _a, _b;
+            var urlState = this.urlManager.state;
+            var params = (0, deepmerge_1.default)(__assign({}, (0, getParams_1.getSearchParams)(urlState)), this.config.globals);
+            var userId = this.tracker.getUserId();
+            if (userId) {
+                params.tracking = params.tracking || {};
+                params.tracking.userId = userId;
+            }
+            if (!((_b = (_a = this.config.globals) === null || _a === void 0 ? void 0 : _a.personalization) === null || _b === void 0 ? void 0 : _b.disabled)) {
+                var cartItems = this.tracker.cookies.cart.get();
+                if (cartItems.length) {
+                    params.personalization = params.personalization || {};
+                    params.personalization.cart = cartItems.join(',');
+                }
+                var lastViewedItems = this.tracker.cookies.viewed.get();
+                if (lastViewedItems.length) {
+                    params.personalization = params.personalization || {};
+                    params.personalization.lastViewed = lastViewedItems.join(',');
+                }
+                var shopperId = this.tracker.getShopperId();
+                if (shopperId) {
+                    params.personalization = params.personalization || {};
+                    params.personalization.shopper = shopperId;
+                }
+            }
+            return params;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    AutocompleteController.prototype.setFocused = function (inputElement) {
+        return __awaiter(this, void 0, void 0, function () {
+            var err_7, err_8;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(this.store.state.focusedInput !== inputElement)) return [3 /*break*/, 7];
+                        this.store.state.focusedInput = inputElement;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 6, , 7]);
+                        _a.label = 2;
+                    case 2:
+                        _a.trys.push([2, 4, , 5]);
+                        return [4 /*yield*/, this.eventManager.fire('focusChange', {
+                                controller: this,
+                            })];
+                    case 3:
+                        _a.sent();
+                        return [3 /*break*/, 5];
+                    case 4:
+                        err_7 = _a.sent();
+                        if ((err_7 === null || err_7 === void 0 ? void 0 : err_7.message) == 'cancelled') {
+                            this.log.warn("'focusChange' middleware cancelled");
+                        }
+                        else {
+                            this.log.error("error in 'focusChange' middleware");
+                            throw err_7;
+                        }
+                        return [3 /*break*/, 5];
+                    case 5: return [3 /*break*/, 7];
+                    case 6:
+                        err_8 = _a.sent();
+                        if (err_8) {
+                            console.error(err_8);
+                        }
+                        return [3 /*break*/, 7];
+                    case 7:
+                        inputElement === null || inputElement === void 0 ? void 0 : inputElement.dispatchEvent(new Event('keyup'));
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    AutocompleteController.prototype.reset = function () {
+        // reset input values and state
+        var inputs = document.querySelectorAll(this.config.selector);
+        inputs.forEach(function (input) {
+            input.value = '';
+        });
+        this.store.reset();
+    };
+    AutocompleteController.prototype.unbind = function () {
+        var _this = this;
+        var inputs = document.querySelectorAll("input[".concat(INPUT_ATTRIBUTE, "]"));
+        inputs === null || inputs === void 0 ? void 0 : inputs.forEach(function (input) {
+            var _a;
+            input.removeEventListener('keyup', _this.handlers.input.keyUp);
+            input.removeEventListener('keyup', _this.handlers.input.enterKey);
+            input.removeEventListener('keyup', _this.handlers.input.escKey);
+            input.removeEventListener('focus', _this.handlers.input.focus);
+            (_a = input.form) === null || _a === void 0 ? void 0 : _a.removeEventListener('submit', _this.handlers.input.formSubmit);
+        });
+        document.removeEventListener('click', this.handlers.document.click);
+    };
+    AutocompleteController.prototype.bind = function () {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function () {
+            var inputs;
+            var _this = this;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        if (!!this.initialized) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.init()];
+                    case 1:
+                        _d.sent();
+                        _d.label = 2;
+                    case 2:
+                        this.unbind();
+                        inputs = document.querySelectorAll(this.config.selector);
+                        inputs.forEach(function (input) {
+                            input.setAttribute('spellcheck', 'false');
+                            input.setAttribute('autocomplete', 'off');
+                            input.setAttribute(INPUT_ATTRIBUTE, '');
+                            input.addEventListener('keyup', _this.handlers.input.keyUp);
+                            if (_this.config.settings.initializeFromUrl && !input.value && _this.store.state.input) {
+                                input.value = _this.store.state.input;
+                            }
+                            input.addEventListener('focus', _this.handlers.input.focus);
+                            input.addEventListener('keyup', _this.handlers.input.escKey);
+                            var form = input.form;
+                            var formActionUrl = _this.config.action;
+                            if (!form && _this.config.action) {
+                                input.addEventListener('keyup', _this.handlers.input.enterKey);
+                            }
+                            else if (form) {
+                                if (_this.config.action) {
+                                    form.action = _this.config.action;
+                                }
+                                else {
+                                    formActionUrl = form.action;
+                                }
+                                form.addEventListener('submit', _this.handlers.input.formSubmit);
+                            }
+                            // set the root URL on urlManager
+                            if (formActionUrl) {
+                                _this.store.setService('urlManager', _this.urlManager.withConfig(function (translatorConfig) {
+                                    return __assign(__assign({}, translatorConfig), { urlRoot: formActionUrl });
+                                }));
+                            }
+                            if (document.activeElement === input) {
+                                _this.setFocused(input);
+                            }
+                        });
+                        if (((_b = (_a = this.config.settings) === null || _a === void 0 ? void 0 : _a.trending) === null || _b === void 0 ? void 0 : _b.limit) > 0 && !((_c = this.store.trending) === null || _c === void 0 ? void 0 : _c.length)) {
+                            this.searchTrending();
+                        }
+                        document.addEventListener('click', this.handlers.document.click);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return AutocompleteController;
+}(AbstractController_1.AbstractController));
+exports.AutocompleteController = AutocompleteController;
+function addHiddenFormInput(form, name, value) {
+    var inputElem = document.createElement('input');
+    inputElem.type = 'hidden';
+    inputElem.name = name;
+    inputElem.value = value;
+    form.append(inputElem);
+}
+function timeout(time) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, new Promise(function (resolve) {
+                    window.setTimeout(resolve, time);
+                })];
+        });
+    });
+}