@ta-interaktiv/react-municipality-search 2.2.2 → 3.0.0

package/dist/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var styled = require('styled-components');
 var web = require('@react-spring/web');
-var Cookies = require('js-cookie');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -38,6 +37,56 @@ function __extends(d, b) {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 }
 
+function __awaiter(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 __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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 (g && (g = 0, op[0] && (_ = 0)), _) 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 };
+    }
+}
+
+function __values(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+}
+
 function __read(o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -107,27 +156,11 @@ data.list;
 data.results;
 
 var MESSAGES = { de: data$1, fr: data };
-var localStorageItemName = 'selectedMunicipalities';
-var translationServiceFactory = function (messageList, locale) {
-    return function (key) {
-        if (key == null) {
-            return '';
-        }
-        return (key
-            .split('.')
-            .reduce(function (messages, prop) { return messages[prop]; }, messageList[locale]) || 'TRANSLATED STRING NOT FOUND');
-    };
-};
-function getDomain() {
-    var url = window.location.hostname;
-    url = url.replace(/(https?:\/\/)?(www.)?/i, '');
-    var urlArray = url.split('.');
-    url = urlArray.slice(urlArray.length - 2).join('.');
-    if (url.indexOf('/') !== -1) {
-        return url.split('/')[0];
-    }
-    return url;
-}
+var STARTS_WITH_NUMBER = /^\d/;
+var CONTAINS_ONLY_LETTERS = /^\D+$/;
+var CONTAINS_FOUR_DIGITS = /\d{4}/;
+var API_URL = 'https://tamedia-discovery-municipalities.s3.eu-central-1.amazonaws.com/';
+var LEGACY_API_URL = 'https://interaktiv.tagesanzeiger.ch/static/gemeindesuche/';
 var MunicipalityDownloadError = (function (_super) {
     __extends(MunicipalityDownloadError, _super);
     function MunicipalityDownloadError() {
@@ -135,385 +168,234 @@ var MunicipalityDownloadError = (function (_super) {
     }
     return MunicipalityDownloadError;
 }(Error));
-var startsWithNumber = /^\d/;
-var containsOnlyLetters = /^\D+$/;
-var containsFourDigits = /\d{4}/;
-function showResults(results) {
-    return results.length > 0;
-}
-var MunicipalitySearch = (function (_super) {
-    __extends(MunicipalitySearch, _super);
-    function MunicipalitySearch() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            isLoading: true,
-            results: [],
-            value: '',
-            error: null,
-            municipalities: [],
-        };
-        _this.resetComponent = function () {
-            _this.setState({
-                isLoading: false,
-                results: [],
-                value: '',
-            });
-        };
-        _this.filterList = function (searchTerm) {
-            var results = [];
-            searchTerm = searchTerm.trim();
-            if (searchTerm.length > 1 && _this.state.municipalities !== null) {
-                var digitsResultsArray = containsFourDigits.exec(searchTerm);
-                var municipalities = _this.state.municipalities;
-                if (digitsResultsArray) {
-                    var digits_1 = digitsResultsArray[0];
-                    results = municipalities.filter(function (municipality) { var _a; return ((_a = municipality.PLZ4) !== null && _a !== void 0 ? _a : '').toString() === digits_1; });
-                    if (results.length < 1) {
-                        _this.setState({ error: 'error.noResultsByZip' });
-                    }
-                }
-                else if (startsWithNumber.test(searchTerm)) {
-                    results = municipalities.filter(function (municipality) { var _a; return RegExp("^".concat(searchTerm)).test(((_a = municipality.PLZ4) !== null && _a !== void 0 ? _a : '').toString()); });
-                    if (results.length < 1) {
-                        _this.setState({ error: 'error.noResultsByZip' });
-                    }
-                }
-                else if (containsOnlyLetters.test(searchTerm)) {
-                    var sanitizedSearchTerm = searchTerm.replace('.', '\\.');
-                    var r_1 = RegExp(sanitizedSearchTerm, 'i');
-                    var exactWordRegex_1 = RegExp("\\b".concat(sanitizedSearchTerm, "\\b"), 'i');
-                    var rankResults = function (searchTerm, arrayToSort) {
-                        return arrayToSort.sort(function (a, b) {
-                            var _a, _b;
-                            var aScore = scoreResult_1(searchTerm.toLowerCase(), a[(_a = _this.props.propertyToSearch) !== null && _a !== void 0 ? _a : MunicipalitySearch.defaultProps.propertyToSearch].toLowerCase());
-                            var bScore = scoreResult_1(searchTerm.toLowerCase(), b[(_b = _this.props.propertyToSearch) !== null && _b !== void 0 ? _b : MunicipalitySearch.defaultProps.propertyToSearch].toLowerCase());
-                            return bScore - aScore;
-                        });
-                    };
-                    var scoreResult_1 = function (searchTerm, stringToCompare) {
-                        if (stringToCompare === searchTerm) {
-                            return 2;
-                        }
-                        else if (exactWordRegex_1.test(stringToCompare)) {
-                            return 1;
-                        }
-                        else {
-                            return 0;
-                        }
-                    };
-                    var notExactMatches = municipalities.filter(function (municipality) { var _a; return r_1.test(municipality[(_a = _this.props.propertyToSearch) !== null && _a !== void 0 ? _a : MunicipalitySearch.defaultProps.propertyToSearch]); });
-                    results = rankResults(sanitizedSearchTerm, notExactMatches).slice(0, _this.props.maxResults);
-                    if (results.length < 1) {
-                        _this.setState({ error: 'error.noResultsByName' });
+var translate = function (messageList, locale, key) {
+    if (key == null)
+        return '';
+    return (key
+        .split('.')
+        .reduce(function (messages, prop) { return messages[prop]; }, messageList[locale]) || 'TRANSLATED STRING NOT FOUND');
+};
+var muniToString = function (muni) { var _a, _b; return "".concat(muni.GDENR).concat((_a = muni.ORTNAME) !== null && _a !== void 0 ? _a : '').concat((_b = muni.PLZ4) !== null && _b !== void 0 ? _b : ''); };
+var MunicipalitySearch = function (_a) {
+    var _b;
+    var _c = _a.municipalityData, municipalityData = _c === void 0 ? '2021v3' : _c, _d = _a.locale, locale = _d === void 0 ? 'de' : _d, _e = _a.resultBackgroundColor, resultBackgroundColor = _e === void 0 ? 'var(--site-background)' : _e, _f = _a.inputBackgroundColor, inputBackgroundColor = _f === void 0 ? 'var(--site-background)' : _f, _g = _a.maxResults, maxResults = _g === void 0 ? 10 : _g, _h = _a.propertyToSearch, propertyToSearch = _h === void 0 ? 'NORMGEMEINDE' : _h, _j = _a.dedupe, dedupe = _j === void 0 ? false : _j, _k = _a.resetOnSelect, resetOnSelect = _k === void 0 ? false : _k, onSelectionHandler = _a.onSelectionHandler, placeholder = _a.placeholder, iconOnRightSide = _a.iconOnRightSide, customMunicipalities = _a.customMunicipalities, selectedMunicipality = _a.selectedMunicipality, selectedMunicipalityId = _a.selectedMunicipalityId, onCloseHandler = _a.onCloseHandler;
+    var _l = __read(React.useState([]), 2), results = _l[0], setResults = _l[1];
+    var _m = __read(React.useState(''), 2), value = _m[0], setValue = _m[1];
+    var _o = __read(React.useState(null), 2), error = _o[0], setError = _o[1];
+    var _p = __read(React.useState([]), 2), municipalities = _p[0], setMunicipalities = _p[1];
+    var t = React.useCallback(function (key) { return translate(MESSAGES, locale, key); }, [locale]);
+    React.useEffect(function () {
+        setResults([]);
+        setValue('');
+        setError(null);
+        if (customMunicipalities) {
+            setMunicipalities(customMunicipalities);
+            return;
+        }
+        var cancelled = false;
+        var fetchData = function (useLegacy) {
+            if (useLegacy === void 0) { useLegacy = false; }
+            return __awaiter(void 0, void 0, void 0, function () {
+                var baseUrl, res, data, err_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            baseUrl = useLegacy ? LEGACY_API_URL : API_URL;
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 4, , 5]);
+                            return [4, fetch("".concat(baseUrl).concat(municipalityData, ".json"))];
+                        case 2:
+                            res = _a.sent();
+                            if (!res.ok) {
+                                throw new MunicipalityDownloadError("Download error: ".concat(res.status, ": ").concat(res.statusText, "."));
+                            }
+                            return [4, res.json()];
+                        case 3:
+                            data = _a.sent();
+                            if (!cancelled)
+                                setMunicipalities(data);
+                            return [3, 5];
+                        case 4:
+                            err_1 = _a.sent();
+                            if (cancelled)
+                                return [2];
+                            if (!useLegacy)
+                                return [2, fetchData(true)];
+                            if (err_1 instanceof MunicipalityDownloadError) {
+                                console.error(err_1);
+                                console.info('Make sure that you have the municipality and zip code data for the required year uploaded to the Interaktiv server.');
+                                setError('error.municipalitiesNotDownloaded');
+                            }
+                            else {
+                                throw err_1;
+                            }
+                            return [3, 5];
+                        case 5: return [2];
                     }
-                }
-                window.dataLayer = window.dataLayer || [];
-                window.dataLayer.push({
-                    event: 'Interactions',
-                    event_action: 'input',
-                    event_label: "search:for_".concat(searchTerm, ":results_").concat(results.length),
                 });
-            }
-            return _this.removeDuplicates(results, searchTerm);
-        };
-        _this.handleSearchChange = function (e) {
-            var value = e.currentTarget.value;
-            _this.setState({ isLoading: true, value: value });
-            if (value.length < 1) {
-                return _this.resetComponent();
-            }
-            var results = _this.filterList(value);
-            if (results.length > 0) {
-                _this.setState({ error: null, isLoading: false, results: results });
-            }
-            _this.setState({ results: results, isLoading: false });
-        };
-        _this.sendToDataPipeline = function (plz4) {
-            var BASE_URL = 'https://w.tda.io/b/votation';
-            var ZIP = '?zip=' + plz4;
-            var url = BASE_URL + ZIP;
-            return window
-                .fetch(url, {
-                method: 'GET',
-                mode: 'no-cors',
-                credentials: 'include',
-            })
-                .then(function (response) {
-                console.log(response);
-            })
-                .catch(function (error) {
-                console.log(error);
             });
         };
-        _this.getStoredMunicipalities = function () {
-            var _a, _b;
-            var munisFromLocalStorage = [];
-            var munisFromCookies = [];
-            try {
-                var munisFromLocalStorageString = (_a = localStorage.getItem('selectedMunicipalities')) !== null && _a !== void 0 ? _a : '[]';
-                munisFromLocalStorage = JSON.parse(munisFromLocalStorageString);
-            }
-            catch (e) {
-                console.log(e);
-                console.warn('🗄 localStorage of selectedMunicipalities is not available');
+        fetchData();
+        return function () {
+            cancelled = true;
+        };
+    }, [municipalityData, customMunicipalities]);
+    var removeDuplicates = function (arr, searchTerm) {
+        var e_1, _a, e_2, _b;
+        var _c, _d, _e, _f, _g;
+        var map = new Map();
+        try {
+            for (var arr_1 = __values(arr), arr_1_1 = arr_1.next(); !arr_1_1.done; arr_1_1 = arr_1.next()) {
+                var v = arr_1_1.value;
+                var key = dedupe
+                    ? "".concat((_c = v.ORTNAME) !== null && _c !== void 0 ? _c : '').concat(v.GDENR)
+                    : "".concat((_d = v.PLZ4) !== null && _d !== void 0 ? _d : '').concat((_e = v.ORTNAME) !== null && _e !== void 0 ? _e : '').concat(v.GDENR);
+                map.set(key, v);
             }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
             try {
-                var munisFromCookiesString = (_b = Cookies.get('selectedMunicipalities')) !== null && _b !== void 0 ? _b : '[]';
-                munisFromCookies = JSON.parse(munisFromCookiesString);
-            }
-            catch (e) {
-                console.log(e);
-                console.warn('🍪 cookies of selectedMunicipalities is not available');
+                if (arr_1_1 && !arr_1_1.done && (_a = arr_1.return)) _a.call(arr_1);
             }
-            var ordered = __spreadArray(__spreadArray([], __read(munisFromLocalStorage), false), __read(munisFromCookies), false).sort(function (a, b) {
-                if (b.timestamp && a.timestamp) {
-                    return b.timestamp - a.timestamp;
-                }
-                if (b.timestamp) {
-                    return 1;
+            finally { if (e_1) throw e_1.error; }
+        }
+        var exact = [];
+        var rest = [];
+        var lower = searchTerm.toLowerCase();
+        try {
+            for (var _h = __values(map.values()), _j = _h.next(); !_j.done; _j = _h.next()) {
+                var m = _j.value;
+                if (((_f = m.GDENAMK) === null || _f === void 0 ? void 0 : _f.toLowerCase()) === lower ||
+                    ((_g = m.ORTNAME) === null || _g === void 0 ? void 0 : _g.toLowerCase()) === lower) {
+                    exact.push(m);
                 }
-                if (a.timestamp) {
-                    return -1;
+                else {
+                    rest.push(m);
                 }
-                return 0;
-            });
-            return _this.deduplicateMunicipalityArray(ordered);
-        };
-        _this.saveToSelectedMunicipalities = function (newMuni) {
-            var prevSelectedMunicipalities = _this.getStoredMunicipalities();
-            var slicedArray = prevSelectedMunicipalities.slice(0, 15);
-            newMuni.timestamp = Date.now();
-            slicedArray.unshift(newMuni);
-            console.log('domain:', getDomain());
-            try {
-                var newMuniArray = JSON.stringify(_this.deduplicateMunicipalityArray(slicedArray));
-                localStorage.setItem(localStorageItemName, newMuniArray);
-                Cookies.set(localStorageItemName, newMuniArray, {
-                    expires: 365,
-                    domain: getDomain(),
-                });
             }
-            catch (_a) {
-                console.warn('🗄 localStorage is not writeable');
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
             }
-        };
-        _this.deduplicateMunicipalityArray = function (munis) {
-            return __spreadArray([], __read(new Map(munis
-                .slice()
-                .reverse()
-                .map(function (muni) {
-                var _a;
-                return [
-                    ((_a = muni.ORTNAME) !== null && _a !== void 0 ? _a : '') +
-                        muni.GDENR +
-                        (_this.props.dedupe ? '' : muni.PLZ4),
-                    muni,
-                ];
-            })).values()), false).reverse()
-                .sort(function (a, b) {
-                if (b.timestamp && a.timestamp) {
-                    return b.timestamp - a.timestamp;
-                }
-                if (b.timestamp) {
+            finally { if (e_2) throw e_2.error; }
+        }
+        return __spreadArray(__spreadArray([], __read(exact), false), __read(rest), false);
+    };
+    var filterList = function (searchTerm) {
+        searchTerm = searchTerm.trim();
+        if (searchTerm.length <= 1 || municipalities.length === 0) {
+            return [];
+        }
+        var filtered = [];
+        var fourDigitMatch = CONTAINS_FOUR_DIGITS.exec(searchTerm);
+        if (fourDigitMatch) {
+            filtered = municipalities.filter(function (m) { var _a; return ((_a = m.PLZ4) !== null && _a !== void 0 ? _a : '').toString() === fourDigitMatch[0]; });
+        }
+        else if (STARTS_WITH_NUMBER.test(searchTerm)) {
+            filtered = municipalities.filter(function (m) { var _a; return RegExp("^".concat(searchTerm)).test(((_a = m.PLZ4) !== null && _a !== void 0 ? _a : '').toString()); });
+        }
+        else if (CONTAINS_ONLY_LETTERS.test(searchTerm)) {
+            var sanitized = searchTerm.replace('.', '\\.');
+            var regex_1 = RegExp(sanitized, 'i');
+            var exactWordRegex_1 = RegExp("\\b".concat(sanitized, "\\b"), 'i');
+            var scoreResult_1 = function (term, compare) {
+                if (compare === term)
+                    return 2;
+                if (exactWordRegex_1.test(compare))
                     return 1;
-                }
-                if (a.timestamp) {
-                    return -1;
-                }
                 return 0;
-            });
-        };
-        _this.getMunicipalitiesData = function (useLegacy) {
-            if (_this.props.customMunicipalities) {
-                _this.setState({
-                    isLoading: false,
-                    municipalities: _this.props.customMunicipalities,
-                });
-                return Promise.resolve(_this.props.customMunicipalities);
-            }
-            _this.setState({
-                isLoading: true,
-            });
-            useLegacy && console.log('Municipality search: using legacy endpoint 👴');
-            var API_BASE_URL = useLegacy
-                ? 'https://interaktiv.tagesanzeiger.ch/static/gemeindesuche/'
-                : 'https://tamedia-discovery-municipalities.s3.eu-central-1.amazonaws.com/';
-            return fetch(API_BASE_URL + "".concat(_this.props.municipalityData, ".json"))
-                .then(function (res) {
-                if (!res.ok) {
-                    throw new MunicipalityDownloadError("Download error: ".concat(res.status, ": ").concat(res.statusText, "."));
-                }
-                return res.json();
-            })
-                .then(function (data) {
-                _this.setState({
-                    isLoading: false,
-                    municipalities: data,
-                });
-                return Promise.resolve(data);
+            };
+            filtered = municipalities
+                .filter(function (m) { return regex_1.test(m[propertyToSearch]); })
+                .sort(function (a, b) {
+                var aScore = scoreResult_1(searchTerm.toLowerCase(), a[propertyToSearch].toLowerCase());
+                var bScore = scoreResult_1(searchTerm.toLowerCase(), b[propertyToSearch].toLowerCase());
+                return bScore - aScore;
             })
-                .catch(function (error) {
-                if (!useLegacy)
-                    return _this.getMunicipalitiesData(true);
-                if (error instanceof MunicipalityDownloadError) {
-                    console.log(error);
-                    console.info('Make sure that you have the municipality and zip code data for the required year uploaded to the Interaktiv server.');
-                    console.info('Read more about the data generation in the "data" directory in the project repository for the MunicipalitySearch React component.');
-                    _this.setState({
-                        isLoading: false,
-                        error: 'error.municipalitiesNotDownloaded',
-                    });
-                }
-                else {
-                    throw error;
-                }
-            });
-        };
-        return _this;
-    }
-    MunicipalitySearch.prototype.removeDuplicates = function (arr, searchTerm) {
-        var _this = this;
-        var map = new Map();
-        arr.forEach(function (v) {
-            var _a, _b, _c;
-            if (_this.props.dedupe) {
-                map.set(((_a = v.ORTNAME) !== null && _a !== void 0 ? _a : '') + v.GDENR, v);
-            }
-            else {
-                map.set(((_b = v.PLZ4) !== null && _b !== void 0 ? _b : '') + ((_c = v.ORTNAME) !== null && _c !== void 0 ? _c : '') + v.GDENR, v);
-            }
+                .slice(0, maxResults);
+        }
+        window.dataLayer = window.dataLayer || [];
+        window.dataLayer.push({
+            event: 'Interactions',
+            event_action: 'input',
+            event_label: "search:for_".concat(searchTerm, ":results_").concat(filtered.length),
         });
-        var result = __spreadArray([], __read(map.values()), false).reduce(function (acc, cur) {
-            var _a, _b;
-            if (((_a = cur.GDENAMK) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === searchTerm.toLowerCase() ||
-                ((_b = cur.ORTNAME) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === searchTerm.toLowerCase()) {
-                acc[0].push(cur);
-            }
-            else {
-                acc[1].push(cur);
-            }
-            return acc;
-        }, [[], []])
-            .flat();
-        return result;
+        return removeDuplicates(filtered, searchTerm);
     };
-    MunicipalitySearch.prototype.componentDidUpdate = function (prevProps) {
-        if (prevProps.municipalityData !== this.props.municipalityData) {
-            this.resetComponent();
-            this.getMunicipalitiesData();
-        }
+    var resetComponent = function () {
+        setResults([]);
+        setValue('');
     };
-    MunicipalitySearch.prototype.muniToString = function (muni) {
-        var _a, _b;
-        return muni.GDENR + ((_a = muni.ORTNAME) !== null && _a !== void 0 ? _a : '') + ((_b = muni.PLZ4) !== null && _b !== void 0 ? _b : '');
+    var handleSearchChange = function (e) {
+        var inputValue = e.currentTarget.value;
+        setValue(inputValue);
+        if (inputValue.length < 1) {
+            return resetComponent();
+        }
+        setResults(filterList(inputValue));
     };
-    MunicipalitySearch.prototype.componentDidMount = function () {
-        var _this = this;
-        this.getMunicipalitiesData().then(function (data) {
-            var prevSelectedMunicipalities = _this.getStoredMunicipalities();
-            if (_this.props.showLastSelectedMunicipalities &&
-                prevSelectedMunicipalities.length > 0) {
-                var allBfsIdsAndNames_1 = prevSelectedMunicipalities.map(function (muni) { return _this.muniToString(muni); });
-                var filteredFromFetchedData = data.filter(function (muni) {
-                    return allBfsIdsAndNames_1.includes(_this.muniToString(muni));
-                });
-                filteredFromFetchedData.sort(function (a, b) {
-                    return (allBfsIdsAndNames_1.indexOf(_this.muniToString(a)) -
-                        allBfsIdsAndNames_1.indexOf(_this.muniToString(b)));
-                });
-                var dedupedData = _this.deduplicateMunicipalityArray(filteredFromFetchedData);
-                dedupedData.sort(function (a, b) {
-                    return (allBfsIdsAndNames_1.indexOf(_this.muniToString(a)) -
-                        allBfsIdsAndNames_1.indexOf(_this.muniToString(b)));
-                });
-                var muniCount = _this.props.numberOfLastSelectedMunicipalities;
-                _this.setState({
-                    results: dedupedData.slice(0, muniCount),
-                });
-            }
-        });
+    var handleSelect = function (municipality) {
+        onSelectionHandler(municipality);
+        if (resetOnSelect)
+            resetComponent();
     };
-    MunicipalitySearch.prototype.render = function () {
-        var _this = this;
-        var _a, _b, _c;
-        var _d = this.state; _d.isLoading; var value = _d.value, results = _d.results;
-        var t = translationServiceFactory(MESSAGES, this.props.locale);
-        var preSelectedMunicipality = (_a = this.props.selectedMunicipality) !== null && _a !== void 0 ? _a : this.state.municipalities.find(function (muni) {
-            return muni.GDENR === _this.props.selectedMunicipalityId;
-        });
-        return (React.createElement(MunicipalitySearchContainer, { className: 'municipality-search' },
-            React.createElement(InputRow, { className: 'inputRow' },
-                React.createElement(FlexInput, { type: 'text', "$lessPaddingLeft": !!preSelectedMunicipality || this.props.iconOnRightSide, placeholder: this.props.placeholder || t('placeholder'), value: (_b = preSelectedMunicipality === null || preSelectedMunicipality === void 0 ? void 0 : preSelectedMunicipality.NORMGEMEINDE) !== null && _b !== void 0 ? _b : value, disabled: this.state.error === 'error.municipalitiesNotDownloaded' ||
-                        !!preSelectedMunicipality, onChange: this.handleSearchChange, "$backgroundColor": this.props.inputBackgroundColor }),
-                preSelectedMunicipality ? (React.createElement(Icon, { onClick: function () { var _a, _b; return (_b = (_a = _this.props).onCloseHandler) === null || _b === void 0 ? void 0 : _b.call(_a); }, "$isClickable": true, id: 'search-closing-icon', "$isRight": true },
-                    React.createElement("svg", { width: '20', height: '21', viewBox: '0 0 24 25', xmlns: 'http://www.w3.org/2000/svg', fill: 'currentColor', strokeWidth: '2' },
-                        React.createElement("path", { d: 'M3.9 22L2 20.1L9.6 12.5L2 4.9L3.9 3L11.5 10.6L19.1 3L21 4.9L13.4 12.5L21 20.1L19.1 22L11.5 14.4L3.9 22Z', fill: 'currentColor' })))) : (React.createElement(Icon, { "$isRight": (_c = this.props) === null || _c === void 0 ? void 0 : _c.iconOnRightSide },
-                    React.createElement("svg", { width: '18', height: '18', viewBox: '0 0 18 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', stroke: 'currentColor', strokeWidth: '2' },
-                        React.createElement("circle", { cx: '7.5', cy: '7.5', r: '6' }),
-                        React.createElement("line", { x1: '11', y1: '11', x2: '17', y2: '17' }))))),
-            showResults(results) && (React.createElement(Results, { className: 'results', "$backgroundColor": this.props.resultBackgroundColor }, showResults(results) && (React.createElement(web.Transition, { native: true, items: results, keys: function (result) { return _this.muniToString(result); }, from: { transform: 'translate(0,-20px)', opacity: 0 }, enter: { transform: 'translate(0,0px)', opacity: 1 }, config: web.config.gentle }, function (values, result) {
+    var preSelectedMunicipality = selectedMunicipality !== null && selectedMunicipality !== void 0 ? selectedMunicipality : municipalities.find(function (m) { return m.GDENR === selectedMunicipalityId; });
+    var hasResults = results.length > 0;
+    return (React.createElement(MunicipalitySearchContainer, { className: 'municipality-search' },
+        React.createElement(InputRow, { className: 'inputRow' },
+            React.createElement(FlexInput, { type: 'text', "$lessPaddingLeft": !!preSelectedMunicipality || iconOnRightSide, placeholder: placeholder || t('placeholder'), value: (_b = preSelectedMunicipality === null || preSelectedMunicipality === void 0 ? void 0 : preSelectedMunicipality.NORMGEMEINDE) !== null && _b !== void 0 ? _b : value, disabled: error === 'error.municipalitiesNotDownloaded' ||
+                    !!preSelectedMunicipality, onChange: handleSearchChange, "$backgroundColor": inputBackgroundColor }),
+            preSelectedMunicipality ? (React.createElement(Icon, { onClick: function () { return onCloseHandler === null || onCloseHandler === void 0 ? void 0 : onCloseHandler(); }, "$isClickable": true, id: 'search-closing-icon', "$isRight": true },
+                React.createElement("svg", { width: '20', height: '21', viewBox: '0 0 24 25', xmlns: 'http://www.w3.org/2000/svg', fill: 'currentColor', strokeWidth: '2' },
+                    React.createElement("path", { d: 'M3.9 22L2 20.1L9.6 12.5L2 4.9L3.9 3L11.5 10.6L19.1 3L21 4.9L13.4 12.5L21 20.1L19.1 22L11.5 14.4L3.9 22Z', fill: 'currentColor' })))) : (React.createElement(Icon, { "$isRight": iconOnRightSide },
+                React.createElement("svg", { width: '18', height: '18', viewBox: '0 0 18 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', stroke: 'currentColor', strokeWidth: '2' },
+                    React.createElement("circle", { cx: '7.5', cy: '7.5', r: '6' }),
+                    React.createElement("line", { x1: '11', y1: '11', x2: '17', y2: '17' }))))),
+        hasResults && (React.createElement(Results, { className: 'results', "$backgroundColor": resultBackgroundColor },
+            React.createElement(web.Transition, { items: results, keys: muniToString, from: { transform: 'translate(0,-20px)', opacity: 0 }, enter: { transform: 'translate(0,0px)', opacity: 1 }, config: web.config.gentle }, function (style, result) {
                 var _a;
-                return (React.createElement(web.animated.div, { onClick: function () {
-                        _this.props.onSelectionHandler(result);
-                        if (_this.props.showLastSelectedMunicipalities) {
-                            _this.saveToSelectedMunicipalities(result);
-                        }
-                        if (_this.props.resetOnSelect) {
-                            _this.resetComponent();
-                        }
-                    }, onKeyUp: function (e) {
+                return (React.createElement(web.animated.div, { onClick: function () { return handleSelect(result); }, onKeyUp: function (e) {
                         if (e.key === 'Enter' || e.key === 'Space') {
-                            _this.props.onSelectionHandler(result);
-                            if (_this.props.resetOnSelect) {
-                                _this.resetComponent();
-                            }
+                            handleSelect(result);
                         }
-                    }, className: 'result', style: values, tabIndex: 0 },
+                    }, className: 'result', style: style, tabIndex: 0 },
                     React.createElement(ResultHeader, { className: 'resultHeader' },
                         React.createElement(ResultPlz, { className: 'resultPlz' }, result.PLZ4),
                         ' ',
                         result.ORTNAME),
                     React.createElement(ResultMeta, { className: 'resultMeta' },
-                        React.createElement(React.Fragment, null,
-                            result.ORTNAME ? t('list.municipalityPrefix') : '',
-                            ' ',
-                            React.createElement("b", null, (_a = result.GDENAMK) !== null && _a !== void 0 ? _a : result.NORMGEMEINDE +
-                                ((results.find(function (muni) {
-                                    return muni !== result &&
-                                        muni.NORMGEMEINDE === result.NORMGEMEINDE;
-                                }) && result.KTKZ)
-                                    ? ' (' + result.KTKZ + ')'
-                                    : ''))))));
-            }))))));
-    };
-    MunicipalitySearch.defaultProps = {
-        municipalityData: '2021v3',
-        locale: 'de',
-        numberOfLastSelectedMunicipalities: 1,
-        resultBackgroundColor: 'var(--site-background)',
-        inputBackgroundColor: 'var(--site-background)',
-        maxResults: 10,
-        propertyToSearch: "NORMGEMEINDE"
-    };
-    return MunicipalitySearch;
-}(React.Component));
+                        result.ORTNAME ? t('list.municipalityPrefix') : '',
+                        ' ',
+                        React.createElement("b", null, (_a = result.GDENAMK) !== null && _a !== void 0 ? _a : result.NORMGEMEINDE +
+                            (results.find(function (m) {
+                                return m !== result &&
+                                    m.NORMGEMEINDE === result.NORMGEMEINDE;
+                            }) && result.KTKZ
+                                ? " (".concat(result.KTKZ, ")")
+                                : '')))));
+            })))));
+};
 var Icon = styled.i(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: ", ";\n  position: absolute;\n  top: 50%;\n  ", "\n  padding-left: 0.8em;\n  transform: translateY(-50%);\n  display: flex;\n  opacity: 0.5;\n  transition: opacity 0.5s ease-in-out;\n  animation: fromLeft 0.3s ease-in-out;\n  @keyframes fromLeft {\n    0% {\n      transform: translateY(-50%) translateX(-10px);\n      opacity: 0;\n    }\n    100% {\n      transform: translateY(-50%) translateX(0);\n    }\n  }\n  &#search-closing-icon {\n    &:hover {\n      opacity: 1;\n    }\n    animation: fromRight 0.3s ease-in-out;\n    @keyframes fromRight {\n      0% {\n        transform: translateY(-50%) translateX(10px);\n        opacity: 0;\n      }\n      100% {\n        transform: translateY(-50%) translateX(0);\n      }\n    }\n  }\n"], ["\n  cursor: ", ";\n  position: absolute;\n  top: 50%;\n  ", "\n  padding-left: 0.8em;\n  transform: translateY(-50%);\n  display: flex;\n  opacity: 0.5;\n  transition: opacity 0.5s ease-in-out;\n  animation: fromLeft 0.3s ease-in-out;\n  @keyframes fromLeft {\n    0% {\n      transform: translateY(-50%) translateX(-10px);\n      opacity: 0;\n    }\n    100% {\n      transform: translateY(-50%) translateX(0);\n    }\n  }\n  &#search-closing-icon {\n    &:hover {\n      opacity: 1;\n    }\n    animation: fromRight 0.3s ease-in-out;\n    @keyframes fromRight {\n      0% {\n        transform: translateY(-50%) translateX(10px);\n        opacity: 0;\n      }\n      100% {\n        transform: translateY(-50%) translateX(0);\n      }\n    }\n  }\n"])), function (props) { return (props.$isClickable ? 'pointer' : 'default'); }, function (props) { return (props.$isRight ? 'right: 0; padding-right: 0.8em;' : ''); });
-var MunicipalitySearchContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --border-radius: 0.3em;\n  font-size: 18px;\n  font-family: var(--font-plex);\n  @media screen and (max-width: 599px) {\n    max-width: 100%;\n  }\n  max-width: 300px;\n  width: 100%;\n  color: inherit;\n  position: relative;\n"], ["\n  --border-radius: 0.3em;\n  font-size: 18px;\n  font-family: var(--font-plex);\n  @media screen and (max-width: 599px) {\n    max-width: 100%;\n  }\n  max-width: 300px;\n  width: 100%;\n  color: inherit;\n  position: relative;\n"])));
-var InputRow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  input:focus ~ i {\n    opacity: 1;\n  }\n  .ui.input {\n    width: 100%;\n    max-width: 100%;\n    transition: all 0.5s ease-in-out;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  input:focus ~ i {\n    opacity: 1;\n  }\n  .ui.input {\n    width: 100%;\n    max-width: 100%;\n    transition: all 0.5s ease-in-out;\n  }\n"])));
-var FlexInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  // reset the default input styles\n  color: inherit;\n  background-color: ", ";\n  border: solid 1px #7e7e7e7e;\n  border-radius: var(--border-radius);\n  box-shadow: none;\n  font-size: 1em;\n  outline: none;\n  transition: all 0.3s ease-in-out;\n  padding: 0.5em;\n  padding-left: ", ";\n  margin: 0;\n  width: 100%;\n  display: flex;\n  &:disabled {\n    opacity: 0.5;\n  }\n  &::placeholder {\n    color: inherit;\n    opacity: 0.5;\n  }\n"], ["\n  // reset the default input styles\n  color: inherit;\n  background-color: ", ";\n  border: solid 1px #7e7e7e7e;\n  border-radius: var(--border-radius);\n  box-shadow: none;\n  font-size: 1em;\n  outline: none;\n  transition: all 0.3s ease-in-out;\n  padding: 0.5em;\n  padding-left: ", ";\n  margin: 0;\n  width: 100%;\n  display: flex;\n  &:disabled {\n    opacity: 0.5;\n  }\n  &::placeholder {\n    color: inherit;\n    opacity: 0.5;\n  }\n"])), function (_a) {
-    var backgroundColor = _a.$backgroundColor;
-    return backgroundColor;
+var MunicipalitySearchContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --border-radius: 0.3em;\n  font-size: 18px;\n  font-family: var(--font-plex);\n  max-width: 300px;\n  width: 100%;\n  color: inherit;\n  position: relative;\n\n  @media screen and (max-width: 599px) {\n    max-width: 100%;\n  }\n"], ["\n  --border-radius: 0.3em;\n  font-size: 18px;\n  font-family: var(--font-plex);\n  max-width: 300px;\n  width: 100%;\n  color: inherit;\n  position: relative;\n\n  @media screen and (max-width: 599px) {\n    max-width: 100%;\n  }\n"])));
+var InputRow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  input:focus ~ i {\n    opacity: 1;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  input:focus ~ i {\n    opacity: 1;\n  }\n"])));
+var FlexInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: inherit;\n  background-color: ", ";\n  border: solid 1px #7e7e7e7e;\n  border-radius: var(--border-radius);\n  box-shadow: none;\n  font-size: 1em;\n  outline: none;\n  transition: all 0.3s ease-in-out;\n  padding: 0.5em;\n  padding-left: ", ";\n  margin: 0;\n  width: 100%;\n  display: flex;\n\n  &:disabled {\n    opacity: 0.5;\n  }\n\n  &::placeholder {\n    color: inherit;\n    opacity: 0.5;\n  }\n"], ["\n  color: inherit;\n  background-color: ", ";\n  border: solid 1px #7e7e7e7e;\n  border-radius: var(--border-radius);\n  box-shadow: none;\n  font-size: 1em;\n  outline: none;\n  transition: all 0.3s ease-in-out;\n  padding: 0.5em;\n  padding-left: ", ";\n  margin: 0;\n  width: 100%;\n  display: flex;\n\n  &:disabled {\n    opacity: 0.5;\n  }\n\n  &::placeholder {\n    color: inherit;\n    opacity: 0.5;\n  }\n"])), function (_a) {
+    var $backgroundColor = _a.$backgroundColor;
+    return $backgroundColor;
 }, function (_a) {
-    var lessPaddingLeft = _a.$lessPaddingLeft;
-    return lessPaddingLeft ? '1em' : '2.4em';
+    var $lessPaddingLeft = _a.$lessPaddingLeft;
+    return $lessPaddingLeft ? '1em' : '2.4em';
 });
-var Results = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: 0.25em;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: 0;\n  font-family: var(--font-plex);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n  width: 100%;\n  border-radius: var(--border-radius);\n  @media screen and (min-width: 599px) {\n    max-width: 300px;\n  }\n  .result {\n    max-width: 100%;\n    color: currentColor;\n    padding: calc(11 / 16 * 1em) calc(14 / 16 * 1em);\n    border-radius: var(--border-radius);\n    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);\n    //border: 1px solid #007abf;\n    color: inherit;\n    line-height: 1.1em;\n    cursor: pointer;\n    transition: box-shadow 200ms ease-in-out;\n    &:hover,\n    &:focus {\n      box-shadow:\n        0 0 0.5ex rgba(0, 0, 0, 0.2),\n        0 0 0 1px #007abf inset;\n    }\n  }\n"], ["\n  margin-top: 0.25em;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: 0;\n  font-family: var(--font-plex);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n  width: 100%;\n  border-radius: var(--border-radius);\n  @media screen and (min-width: 599px) {\n    max-width: 300px;\n  }\n  .result {\n    max-width: 100%;\n    color: currentColor;\n    padding: calc(11 / 16 * 1em) calc(14 / 16 * 1em);\n    border-radius: var(--border-radius);\n    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);\n    //border: 1px solid #007abf;\n    color: inherit;\n    line-height: 1.1em;\n    cursor: pointer;\n    transition: box-shadow 200ms ease-in-out;\n    &:hover,\n    &:focus {\n      box-shadow:\n        0 0 0.5ex rgba(0, 0, 0, 0.2),\n        0 0 0 1px #007abf inset;\n    }\n  }\n"])), function (_a) {
-    var backgroundColor = _a.$backgroundColor;
-    return backgroundColor;
+var Results = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: 0.25em;\n  font-family: var(--font-plex);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n  width: 100%;\n  border-radius: var(--border-radius);\n\n  @media screen and (min-width: 599px) {\n    max-width: 300px;\n  }\n\n  .result {\n    max-width: 100%;\n    color: inherit;\n    padding: calc(11 / 16 * 1em) calc(14 / 16 * 1em);\n    border-radius: var(--border-radius);\n    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);\n    line-height: 1.1em;\n    cursor: pointer;\n    transition: box-shadow 200ms ease-in-out;\n\n    &:hover,\n    &:focus {\n      box-shadow:\n        0 0 0.5ex rgba(0, 0, 0, 0.2),\n        0 0 0 1px #007abf inset;\n    }\n  }\n"], ["\n  margin-top: 0.25em;\n  font-family: var(--font-plex);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n  width: 100%;\n  border-radius: var(--border-radius);\n\n  @media screen and (min-width: 599px) {\n    max-width: 300px;\n  }\n\n  .result {\n    max-width: 100%;\n    color: inherit;\n    padding: calc(11 / 16 * 1em) calc(14 / 16 * 1em);\n    border-radius: var(--border-radius);\n    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);\n    line-height: 1.1em;\n    cursor: pointer;\n    transition: box-shadow 200ms ease-in-out;\n\n    &:hover,\n    &:focus {\n      box-shadow:\n        0 0 0.5ex rgba(0, 0, 0, 0.2),\n        0 0 0 1px #007abf inset;\n    }\n  }\n"])), function (_a) {
+    var $backgroundColor = _a.$backgroundColor;
+    return $backgroundColor;
 });
-var ResultHeader = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /* font-weight: 700; */\n"], ["\n  /* font-weight: 700; */\n"])));
-var ResultPlz = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  /* opacity: 0.5; */\n  font-weight: 400;\n"], ["\n  /* opacity: 0.5; */\n  font-weight: 400;\n"])));
-var ResultMeta = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  /* opacity: 0.66; */\n  font-size: 0.9em;\n"], ["\n  /* opacity: 0.66; */\n  font-size: 0.9em;\n"])));
+var ResultHeader = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
+var ResultPlz = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-weight: 400;\n"], ["\n  font-weight: 400;\n"])));
+var ResultMeta = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: 0.9em;\n"], ["\n  font-size: 0.9em;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 
 exports.MunicipalitySearch = MunicipalitySearch;