@tulipnpm/timekit_project_selector 1.0.6 → 1.0.7

package/dist/timekit_project_selector.js

@@ -2197,7 +2197,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, "/* open-sans-cyrillic-ext-400-normal*/
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".selector-card-container {\n    display: flex;\n    flex-flow: row wrap;\n    justify-content: left;\n}\n\n.selector-card-container-image {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n}\n\n.project-card-container {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    margin: 8px 8px;\n    justify-content: flex-start;\n}\n\n.card-container {\n    width: 100%;\n    border-radius: 8px;\n    background-color: #FFFFFF;\n    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);\n    margin-top: 10px;\n    padding: 8px;\n    display: flex;\n    flex-direction: column;\n    transition: 0.3s;\n}\n\n.card-container:hover {\n    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);\n    cursor: pointer;\n}\n  \n.card-container:hover .card-title {\n    color: #214de6;\n}\n\n.card-container-image {\n    flex-basis: 100%;\n    background-color: #FFFFFF;\n    border-radius: 8px;\n    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);\n    margin: 5px;\n    padding: 8px;\n    display: flex;\n    flex-direction: column;\n    transition: 0.3s;\n}\n\n.card-container-image:hover {\n    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);\n    cursor: pointer;\n}\n  \n.card-container-image:hover .card-title {\n    color: #214de6;\n}\n\n.card-container.hide {\n    display: none;\n}\n\n.card-container-image.hide {\n    display: none;\n}\n\n.card-title {\n    margin-top: 8px;\n    margin-right: auto;\n    font-family: 'Open Sans';;\n    font-size: 14px;\n    font-weight: 600;\n    text-rendering: geometricPrecision;\n    font-stretch: normal;\n    font-style: normal;\n    line-height: normal;\n    letter-spacing: normal;\n    text-align: left;\n    color: #14141a;\n}\n\n.card-body {\n    margin-top: 8px;\n    margin-right: auto;\n    font-family: 'Open Sans';\n    font-size: 14px;\n    font-weight: normal;\n    font-stretch: normal;\n    font-style: normal;\n    line-height: normal;\n    letter-spacing: normal;\n    text-align: left;\n    color: #8e8e93;\n}\n\n.card-footer {\n    margin-top: 8px;\n    margin-bottom: 8px;\n    font-family: 'Open Sans';\n    font-size: 14px;\n    font-weight: normal;\n    font-stretch: normal;\n    font-style: normal;\n    line-height: normal;\n    letter-spacing: normal;\n    text-align: left;\n    color: #8e8e93;\n}\n\n.card-image-container {\n    height: auto;\n    text-align: center;\n}\n\n.card-image {\n    object-fit: cover;\n    width: 100%;\n    border-radius: 4px;\n    background-color: #ebebee;\n    overflow: hidden;\n}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".selector-card-container {\n    display: flex;\n    flex-flow: row wrap;\n    justify-content: left;\n}\n\n.selector-card-container-image {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n}\n\n.project-card-container {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    margin: 8px 8px;\n    justify-content: flex-start;\n}\n\n.card-container {\n    width: 100%;\n    border-radius: 8px;\n    background-color: #FFFFFF;\n    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);\n    margin-top: 10px;\n    padding: 8px;\n    display: flex;\n    flex-direction: column;\n    transition: 0.3s;\n}\n\n.card-container:hover {\n    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);\n    cursor: pointer;\n}\n  \n.card-container:hover .card-title {\n    color: #214de6;\n}\n\n.card-container-image {\n    flex-basis: 100%;\n    background-color: #FFFFFF;\n    border-radius: 8px;\n    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);\n    margin: 5px;\n    padding: 8px;\n    display: flex;\n    flex-direction: column;\n    transition: 0.3s;\n}\n\n.card-container-image:hover {\n    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);\n    cursor: pointer;\n}\n  \n.card-container-image:hover .card-title {\n    color: #214de6;\n}\n\n.card-container.hide {\n    display: none;\n}\n\n.card-container-image.hide {\n    display: none;\n}\n\n.card-title {\n    margin-top: 8px;\n    margin-right: auto;\n    font-family: 'Open Sans';;\n    font-size: 14px;\n    font-weight: 600;\n    text-rendering: geometricPrecision;\n    font-stretch: normal;\n    font-style: normal;\n    line-height: normal;\n    letter-spacing: normal;\n    text-align: left;\n    color: #14141a;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n}\n\n.card-title-distance {\n    font-family: 'Open Sans';\n    font-weight: 400;\n    font-size: 12px;\n}\n\n.card-body {\n    margin-top: 8px;\n    margin-right: auto;\n    font-family: 'Open Sans';\n    font-size: 14px;\n    font-weight: normal;\n    font-stretch: normal;\n    font-style: normal;\n    line-height: normal;\n    letter-spacing: normal;\n    text-align: left;\n    color: #8e8e93;\n}\n\n.card-footer {\n    margin-top: 8px;\n    margin-bottom: 8px;\n    font-family: 'Open Sans';\n    font-size: 14px;\n    font-weight: normal;\n    font-stretch: normal;\n    font-style: normal;\n    line-height: normal;\n    letter-spacing: normal;\n    text-align: left;\n    color: #8e8e93;\n}\n\n.card-image-container {\n    height: auto;\n    text-align: center;\n}\n\n.card-image {\n    object-fit: cover;\n    width: 100%;\n    border-radius: 4px;\n    background-color: #ebebee;\n    overflow: hidden;\n}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -2246,16 +2246,19 @@ ___CSS_LOADER_EXPORT___.push([module.id, ":root {\n    --line-length: 60px;\n}\n
 /* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _assets_icon_search_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7209);
 /* harmony import */ var _assets_icon_clear_svg__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(802);
+/* harmony import */ var _assets_icon_geolocation_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2446);
 // Imports
 
 
 
 
+
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default()(_assets_icon_search_svg__WEBPACK_IMPORTED_MODULE_2__/* .default */ .Z);
 var ___CSS_LOADER_URL_REPLACEMENT_1___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default()(_assets_icon_clear_svg__WEBPACK_IMPORTED_MODULE_3__/* .default */ .Z);
+var ___CSS_LOADER_URL_REPLACEMENT_2___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default()(_assets_icon_geolocation_svg__WEBPACK_IMPORTED_MODULE_4__/* .default */ .Z);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".search-bar-wrapper {\n    position: relative;\n}\n\n.search-bar {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    margin-top: 4px;\n    padding: 10px 30px 11px 8px;\n    border-radius: 8px;\n    border: none;\n    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);\n    background-color: #ffffff;\n    font-size: 14px;\n    font-family: 'Open Sans';\n    width: -webkit-fill-available;\n    background: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ") no-repeat scroll 8px 12px;\n    padding-left: 30px;\n    transition: 0.3s;\n}\n\n.search-bar:hover {\n    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);\n}\n\n.search-bar-wrapper.hide {\n    display: none;\n}\n\n.search-bar::placeholder {\n    color: #c7c7cc;\n    font-size: 14px;\n    font-family: 'Open Sans';\n}\n\n.empty-results-wrapper {\n    display: flex;\n    margin-top: 48px;\n    flex-direction: column;\n    height: 100%;\n    align-items: center;\n}\n\n.empty-results-image {\n    background: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ") no-repeat;\n    background-size: 24.5px 24.5px;\n    width: 24.5px;\n    height: 24.5px;\n}\n\n.empty-results-text {\n    font-family: 'Open Sans';\n    font-size: 14px;\n    font-weight: 600;\n    font-stretch: normal;\n    font-style: normal;\n    line-height: 1.5;\n    letter-spacing: normal;\n    text-align: center;\n    color: #c7c7cc;\n}\n\n.search-bar-clear {\n    background: url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ") no-repeat;\n    background-size: 20px 20px;\n    position: absolute;\n    right: 0.5em;\n    top: 0.9em;\n    width: 20px;\n    height: 20px;\n}\n\n.search-bar-clear:hover {\n    cursor: pointer;\n}\n\n.search-bar-clear.hide {\n    display: none;\n}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".search-bar-wrapper {\n    position: relative;\n}\n\n.search-bar {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    margin-top: 4px;\n    padding: 10px 30px 11px 8px;\n    border-radius: 8px;\n    border: none;\n    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);\n    background-color: #ffffff;\n    font-size: 14px;\n    font-family: 'Open Sans';\n    width: -webkit-fill-available;\n    background: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ") no-repeat scroll 8px 12px;\n    padding-left: 30px;\n    transition: 0.3s;\n}\n\n.search-bar:hover {\n    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);\n}\n\n.search-bar-wrapper.hide {\n    display: none;\n}\n\n.search-bar::placeholder {\n    color: #c7c7cc;\n    font-size: 14px;\n    font-family: 'Open Sans';\n}\n\n.empty-results-wrapper {\n    display: flex;\n    margin-top: 48px;\n    flex-direction: column;\n    height: 100%;\n    align-items: center;\n}\n\n.empty-results-image {\n    background: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ") no-repeat;\n    background-size: 24.5px 24.5px;\n    width: 24.5px;\n    height: 24.5px;\n}\n\n.empty-results-text {\n    font-family: 'Open Sans';\n    font-size: 14px;\n    font-weight: 600;\n    font-stretch: normal;\n    font-style: normal;\n    line-height: 1.5;\n    letter-spacing: normal;\n    text-align: center;\n    color: #c7c7cc;\n}\n\n.search-bar-clear {\n    background: url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ") no-repeat;\n    background-size: 20px 20px;\n    position: absolute;\n    right: 0.5em;\n    top: 0.9em;\n    width: 20px;\n    height: 20px;\n}\n\n.search-bar-clear:hover {\n    cursor: pointer;\n}\n\n.search-bar-clear.hide {\n    display: none;\n}\n\n.search-bar-geolocation-button {\n    position: absolute;\n    width: 100%;\n    padding: 12px 30px;\n    left: 0px;\n    top: 3.3em;\n    text-align: left;\n    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);\n    border: 0;\n    border-radius: 3px;\n    font-weight: 600;\n    font-family: 'Open Sans';\n    cursor: pointer;\n    background: url(" + ___CSS_LOADER_URL_REPLACEMENT_2___ + ") no-repeat scroll 6px 6px, #FFFFFF;\n}\n\n.search-bar-geolocation-button:hover {\n    color: #214DE6\n}\n\n#show-more-cards-text {\n    cursor: pointer;\n    color: #214DE6;\n    font-weight: bold;\n    font-size: 14px;\n    font-family: 'Open Sans';\n    line-height: 21px;\n    margin: 40px 0;\n}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -2537,6 +2540,17 @@ module.exports = function (url, options) {
 
 /***/ }),
 
+/***/ 2446:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__webpack_require__.p + "229ef5cc3f6050f3239dc04035170b4d.svg");
+
+/***/ }),
+
 /***/ 7209:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -21434,12 +21448,13 @@ var StepOptions = /*#__PURE__*/function () {
   createClass_default()(StepOptions, [{
     key: "init",
     value: function init() {
-      var _options$title, _options$description, _options$search_bar;
+      var _options$title, _options$description, _options$search_bar, _options$geo_search_b;
 
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       this.title = (_options$title = options['title']) !== null && _options$title !== void 0 ? _options$title : '';
       this.description = (_options$description = options['description']) !== null && _options$description !== void 0 ? _options$description : '';
       this.searchBar = (_options$search_bar = options['search_bar']) !== null && _options$search_bar !== void 0 ? _options$search_bar : undefined;
+      this.geoSearchBar = (_options$geo_search_b = options['geo_search_bar']) !== null && _options$geo_search_b !== void 0 ? _options$geo_search_b : undefined;
     }
   }]);
 
@@ -22062,11 +22077,507 @@ var SearchBar = /*#__PURE__*/function () {
 }();
 
 
+;// CONCATENATED MODULE: ./src/ui/location.js
+
+
+
+
+
+var Location = /*#__PURE__*/function () {
+  function Location() {
+    var latitude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var longitude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+    classCallCheck_default()(this, Location);
+
+    this.latitude = latitude;
+    this.longitude = longitude;
+  }
+
+  createClass_default()(Location, [{
+    key: "setup",
+    value: function () {
+      var _setup = asyncToGenerator_default()( /*#__PURE__*/regenerator_default().mark(function _callee2() {
+        var _this = this;
+
+        return regenerator_default().wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return new Promise( /*#__PURE__*/function () {
+                  var _ref = asyncToGenerator_default()( /*#__PURE__*/regenerator_default().mark(function _callee(resolve) {
+                    var options;
+                    return regenerator_default().wrap(function _callee$(_context) {
+                      while (1) {
+                        switch (_context.prev = _context.next) {
+                          case 0:
+                            if (!_this.isLocationSet()) {
+                              _context.next = 2;
+                              break;
+                            }
+
+                            return _context.abrupt("return", resolve(_this.get()));
+
+                          case 2:
+                            options = {
+                              enableHighAccuracy: false,
+                              timeout: 5000,
+                              maximumAge: 600000 // Keep cached data for 10 mins
+
+                            };
+                            _context.next = 5;
+                            return window.navigator.geolocation.getCurrentPosition(function (position) {
+                              var location = {
+                                latitude: position.coords.latitude,
+                                longitude: position.coords.longitude,
+                                accuracy: position.coords.accuracy,
+                                timestamp: position.timestamp
+                              };
+                              _this.latitude = location.latitude;
+                              _this.longitude = location.longitude;
+                              return resolve(_this.get());
+                            }, function () {
+                              _this.latitude = null;
+                              _this.longitude = null;
+                              return resolve(_this.get());
+                            }, options);
+
+                          case 5:
+                            return _context.abrupt("return", _context.sent);
+
+                          case 6:
+                          case "end":
+                            return _context.stop();
+                        }
+                      }
+                    }, _callee);
+                  }));
+
+                  return function (_x) {
+                    return _ref.apply(this, arguments);
+                  };
+                }());
+
+              case 2:
+                return _context2.abrupt("return", _context2.sent);
+
+              case 3:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      function setup() {
+        return _setup.apply(this, arguments);
+      }
+
+      return setup;
+    }()
+  }, {
+    key: "get",
+    value: function get() {
+      return {
+        latitude: this.latitude,
+        longitude: this.longitude
+      };
+    }
+  }, {
+    key: "isLocationSet",
+    value: function isLocationSet() {
+      return this.latitude !== null && this.longitude !== null;
+    }
+  }, {
+    key: "asyncGetBrowserLocation",
+    value: function () {
+      var _asyncGetBrowserLocation = asyncToGenerator_default()( /*#__PURE__*/regenerator_default().mark(function _callee3() {
+        return regenerator_default().wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return this.setup();
+
+              case 2:
+                return _context3.abrupt("return", _context3.sent);
+
+              case 3:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this);
+      }));
+
+      function asyncGetBrowserLocation() {
+        return _asyncGetBrowserLocation.apply(this, arguments);
+      }
+
+      return asyncGetBrowserLocation;
+    }()
+  }, {
+    key: "degreesToRadians",
+    value: function degreesToRadians(degrees) {
+      return degrees * Math.PI / 180;
+    }
+  }, {
+    key: "getDistanceInKmBetweenEarthCoordinates",
+    value: function getDistanceInKmBetweenEarthCoordinates(latitude, longitude) {
+      var earthRadiusKm = 6371;
+      var destLatitudeInRadians = this.degreesToRadians(this.latitude - latitude);
+      var destLongitudeInRadians = this.degreesToRadians(this.longitude - longitude);
+      latitude = this.degreesToRadians(latitude);
+      var latitudeInRadiants = this.degreesToRadians(this.latitude);
+      var a = Math.sin(destLatitudeInRadians / 2) * Math.sin(destLatitudeInRadians / 2) + Math.sin(destLongitudeInRadians / 2) * Math.sin(destLongitudeInRadians / 2) * Math.cos(latitude) * Math.cos(latitudeInRadiants);
+      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+      return parseFloat((earthRadiusKm * c).toFixed(1));
+    }
+  }]);
+
+  return Location;
+}();
+
+
+// EXTERNAL MODULE: ./node_modules/lodash/lodash.js
+var lodash = __webpack_require__(6486);
+var lodash_default = /*#__PURE__*/__webpack_require__.n(lodash);
+;// CONCATENATED MODULE: ./src/ui/helpers.js
+
+
+var doesIdExist = function doesIdExist(id) {
+  return document.getElementById(id) !== null;
+};
+var getKeyValue = function getKeyValue(option, project) {
+  if (typeof option === 'undefined') {
+    return null;
+  }
+
+  if (option.includes('{{') && option.includes('}}')) {
+    var result = option;
+
+    toConsumableArray_default()(option.matchAll(/{{(.*?)}}/mg)).forEach(function (match) {
+      result = result.replace(match[0], getValueForReplacementTerm(match[1], project));
+    });
+
+    ;
+    return result;
+  }
+
+  return getValueForReplacementTerm(option, project);
+};
+
+var getValueForReplacementTerm = function getValueForReplacementTerm(option, project) {
+  if (option.startsWith('[meta]')) {
+    return lodash_default().get(project, "meta.".concat(option.substring(6))) || '';
+  }
+
+  if (option.startsWith('[project]')) {
+    return lodash_default().get(project, option.substring(9)) || '';
+  }
+
+  return option;
+};
+;// CONCATENATED MODULE: ./src/ui/geosearchbar.js
+
+
+
+function geosearchbar_createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = geosearchbar_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 = o[Symbol.iterator](); }, 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 geosearchbar_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return geosearchbar_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 geosearchbar_arrayLikeToArray(o, minLen); }
+
+function geosearchbar_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 GeoSearchBar = /*#__PURE__*/function () {
+  function GeoSearchBar() {
+    classCallCheck_default()(this, GeoSearchBar);
+
+    this.searchBarContent = this.createSearchbar();
+    this.searchBarInput = this.searchBarContent.children[0];
+    this.closeButton = this.searchBarContent.children[1];
+    this.geoLocationButton = this.searchBarContent.children[2];
+    this.showCloseButton(false);
+    this.showGeolocationButton(false);
+    this.stores = [];
+    this.options = [];
+    this.cardsKey = '';
+    this.addCard = null;
+    this.location = new Location();
+  }
+
+  createClass_default()(GeoSearchBar, [{
+    key: "createSearchbar",
+    value: function createSearchbar() {
+      var _this = this;
+
+      var searchBarWrapper = document.createElement('div');
+      searchBarWrapper.className = 'search-bar-wrapper';
+      searchBarWrapper.id = 'geo-search-bar-wrapper';
+      var geoSearchBar = document.createElement('input');
+      geoSearchBar.className = 'search-bar';
+      geoSearchBar.id = 'geo-search-bar';
+      geoSearchBar.setAttribute('type', 'text');
+      geoSearchBar.setAttribute('autocomplete', 'off');
+
+      geoSearchBar.oninput = function () {
+        _this.showGeolocationButton(false);
+
+        var userInput = document.getElementById('geo-search-bar').value;
+
+        if (userInput.length >= 3) {
+          _this.showCloseButton(true);
+
+          var searchTerm = new RegExp(userInput, 'i');
+
+          var storesCopy = _this.stores.filter(function (store) {
+            return lodash_default().get(store, 'name').search(searchTerm) !== -1 || lodash_default().get(store, 'meta.t_store_city').search(searchTerm) !== -1 || lodash_default().get(store, 'meta.t_store_country_name').search(searchTerm) !== -1 || lodash_default().get(store, 'meta.t_store_postal_code').search(searchTerm) !== -1;
+          });
+
+          document.getElementById('timekit-selector-card-container').innerHTML = '';
+
+          if (storesCopy.length !== 0) {
+            _this.emptySearchState(false);
+
+            _this.updateContent(storesCopy);
+          } else {
+            _this.emptySearchState(true);
+          }
+        } else {
+          _this.clearCardContainer();
+        }
+      };
+
+      geoSearchBar.onfocus = function () {
+        _this.showGeolocationButton(true);
+      };
+
+      geoSearchBar.addEventListener("focusout", function (event) {
+        if (event.relatedTarget != null && event.relatedTarget.tagName == 'BUTTON') return;
+
+        _this.showGeolocationButton(false);
+      });
+      var geoLocationButton = document.createElement('button');
+      geoLocationButton.innerHTML = "Use my current location";
+      geoLocationButton.className = 'search-bar-geolocation-button'; // Click action
+
+      geoLocationButton.onclick = function () {
+        _this.showGeolocationButton(false);
+
+        _this.location.setup().then(function () {
+          _this.setDistanceInStores();
+
+          _this.stores.sort(function (prev, next) {
+            return prev.distance - next.distance;
+          });
+
+          document.getElementById('timekit-selector-card-container').innerHTML = '';
+
+          _this.updateContent(_this.stores);
+        });
+      };
+
+      var clearButton = document.createElement('i');
+      clearButton.className = 'search-bar-clear';
+      clearButton.id = 'geo-search-bar-clear';
+
+      clearButton.onclick = function () {
+        _this.clearInput();
+      };
+
+      searchBarWrapper.appendChild(geoSearchBar);
+      searchBarWrapper.appendChild(clearButton);
+      searchBarWrapper.appendChild(geoLocationButton, geoSearchBar.nextSibling);
+      return searchBarWrapper;
+    }
+  }, {
+    key: "clearInput",
+    value: function clearInput() {
+      document.getElementById('geo-search-bar').value = '';
+      this.clearCardContainer();
+    }
+  }, {
+    key: "clearCardContainer",
+    value: function clearCardContainer() {
+      document.getElementById('timekit-selector-card-container').innerHTML = '';
+      this.emptySearchState(false);
+      this.showCloseButton(false);
+    }
+  }, {
+    key: "emptySearchState",
+    value: function emptySearchState(showEmptyState) {
+      var doesEmptyStateExist = document.getElementById('empty-results-wrapper') === null;
+
+      if (showEmptyState && doesEmptyStateExist) {
+        // Create divs that tell the user that no results were found when searching
+        var body = document.getElementById('body-container-scrollable');
+        var emptyResultsDiv = document.createElement('div');
+        emptyResultsDiv.className = 'empty-results-wrapper';
+        emptyResultsDiv.id = 'empty-results-wrapper';
+        var searchImage = document.createElement('i');
+        searchImage.className = 'empty-results-image';
+        var searchText = document.createElement('div');
+        searchText.className = 'empty-results-text';
+        searchText.innerHTML = 'No results found';
+        emptyResultsDiv.appendChild(searchImage);
+        emptyResultsDiv.appendChild(searchText);
+        body.appendChild(emptyResultsDiv);
+      } else if (!showEmptyState && !doesEmptyStateExist) {
+        document.getElementById('empty-results-wrapper').remove();
+      }
+    }
+  }, {
+    key: "setSearchBarPlaceholder",
+    value: function setSearchBarPlaceholder(placeholderText) {
+      this.searchBarInput.setAttribute('placeholder', placeholderText);
+    }
+  }, {
+    key: "showSearchBar",
+    value: function showSearchBar() {
+      var isSearchBarVisible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+      if (!isSearchBarVisible) {
+        this.searchBarContent.classList.add('hide');
+      } else {
+        this.searchBarContent.classList.remove('hide');
+      }
+    }
+  }, {
+    key: "showCloseButton",
+    value: function showCloseButton() {
+      var isCloseButtonActive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+      if (!isCloseButtonActive) {
+        this.closeButton.classList.add('hide');
+      } else {
+        this.closeButton.classList.remove('hide');
+      }
+    }
+  }, {
+    key: "showGeolocationButton",
+    value: function showGeolocationButton() {
+      var show = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+      if (show) {
+        this.geoLocationButton.classList.remove('hide');
+      } else {
+        this.geoLocationButton.classList.add('hide');
+      }
+    }
+  }, {
+    key: "setStores",
+    value: function setStores(stores) {
+      this.stores = stores;
+    }
+  }, {
+    key: "setDistanceInStores",
+    value: function setDistanceInStores() {
+      var _this2 = this;
+
+      this.stores.forEach(function (projectData, index) {
+        _this2.stores[index]['distance'] = _this2.getDistance(projectData);
+      });
+    }
+  }, {
+    key: "setOptions",
+    value: function setOptions(options) {
+      this.options = options;
+    }
+  }, {
+    key: "setCardsKey",
+    value: function setCardsKey(key) {
+      this.cardsKey = key;
+    }
+  }, {
+    key: "getDistance",
+    value: function getDistance(project) {
+      var longitude = lodash_default().get(project, 'meta.t_longitude') || 0;
+      var latitude = lodash_default().get(project, 'meta.t_latitude') || 0;
+      return this.location.getDistanceInKmBetweenEarthCoordinates(latitude, longitude);
+    }
+  }, {
+    key: "setAddCardAction",
+    value: function setAddCardAction(handler) {
+      this.addCard = handler;
+    }
+  }, {
+    key: "appendShowMoreCardsText",
+    value: function appendShowMoreCardsText(onClick) {
+      if (document.getElementById("show-more-cards-text")) {
+        document.getElementById("show-more-cards-text").remove();
+      }
+
+      var showMoreCardsText = document.createElement('a');
+      showMoreCardsText.id = 'show-more-cards-text';
+      showMoreCardsText.innerText = 'Show more';
+      showMoreCardsText.onclick = onClick;
+      document.getElementById('timekit-selector-card-container').append(showMoreCardsText);
+    }
+  }, {
+    key: "updateContent",
+    value: function updateContent(stores) {
+      var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var limit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 5;
+      var index = 0;
+
+      var _iterator = geosearchbar_createForOfIteratorHelper(stores),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var projectData = _step.value;
+
+          if (index >= from + limit) {
+            var onClick = function onClick() {
+              this.updateContent(stores, from + limit);
+            };
+
+            this.appendShowMoreCardsText(onClick.bind(this));
+            return;
+          }
+
+          if (index >= from) {
+            var cardTitle = getKeyValue(this.options['cardTitle'], projectData);
+            var cardBody = getKeyValue(this.options['cardBody'], projectData);
+            var cardFooter = getKeyValue(this.options['cardFooter'], projectData);
+            var cardImage = getKeyValue(this.options['cardImage'], projectData);
+            var overriddenCardTitle = null;
+
+            if ('distance' in projectData) {
+              overriddenCardTitle = "<div>".concat(cardTitle, "</div><div class=\"card-title-distance\">").concat(projectData['distance'], " km</div>");
+            }
+
+            this.addCard(this.cardsKey, projectData.id, cardTitle, cardBody, cardFooter, cardImage, overriddenCardTitle);
+          }
+
+          index++;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      if (index >= stores.length && document.getElementById("show-more-cards-text")) {
+        document.getElementById("show-more-cards-text").remove();
+      }
+    }
+  }]);
+
+  return GeoSearchBar;
+}();
+
+
 ;// CONCATENATED MODULE: ./src/ui/navigator.js
 
 
 
 
+
 var Navigator = /*#__PURE__*/function () {
   function Navigator() {
     var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -22078,6 +22589,7 @@ var Navigator = /*#__PURE__*/function () {
     this.count = count;
     this.widthOfPanel = width;
     this.searchBar;
+    this.geoSearchBar;
   }
 
   createClass_default()(Navigator, [{
@@ -22154,9 +22666,11 @@ var Navigator = /*#__PURE__*/function () {
       description.className = 'timekit-navigation-description';
       description.id = 'timekit-navigation-description';
       this.searchBar = new SearchBar();
+      this.geoSearchBar = new GeoSearchBar();
       headerWrapper.appendChild(title);
       headerWrapper.appendChild(description);
       headerWrapper.appendChild(this.searchBar.searchBarContent);
+      headerWrapper.appendChild(this.geoSearchBar.searchBarContent);
       var bodyContainerScrollable = document.createElement('div');
       bodyContainerScrollable.className = 'body-container-scrollable';
       bodyContainerScrollable.id = 'body-container-scrollable';
@@ -22263,45 +22777,6 @@ var Navigator = /*#__PURE__*/function () {
 }();
 
 
-// EXTERNAL MODULE: ./node_modules/lodash/lodash.js
-var lodash = __webpack_require__(6486);
-var lodash_default = /*#__PURE__*/__webpack_require__.n(lodash);
-;// CONCATENATED MODULE: ./src/ui/helpers.js
-
-
-var doesIdExist = function doesIdExist(id) {
-  return document.getElementById(id) !== null;
-};
-var getKeyValue = function getKeyValue(option, project) {
-  if (typeof option === 'undefined') {
-    return null;
-  }
-
-  if (option.includes('{{') && option.includes('}}')) {
-    var result = option;
-
-    toConsumableArray_default()(option.matchAll(/{{(.*?)}}/mg)).forEach(function (match) {
-      result = result.replace(match[0], getValueForReplacementTerm(match[1], project));
-    });
-
-    ;
-    return result;
-  }
-
-  return getValueForReplacementTerm(option, project);
-};
-
-var getValueForReplacementTerm = function getValueForReplacementTerm(option, project) {
-  if (option.startsWith('[meta]')) {
-    return lodash_default().get(project, "meta.".concat(option.substring(6))) || '';
-  }
-
-  if (option.startsWith('[project]')) {
-    return lodash_default().get(project, option.substring(9)) || '';
-  }
-
-  return option;
-};
 ;// CONCATENATED MODULE: ./src/ui/ui.js
 
 
@@ -22428,6 +22903,7 @@ var UI = /*#__PURE__*/function () {
         this.navigator.setDescription('Please select an appointment time and fill out the booking form.'); // And this too
 
         this.navigator.searchBar.showSearchBar(false);
+        this.navigator.geoSearchBar.showSearchBar(false);
         bookingJSWrapper.appendChild(bookingJSContainer);
         container.appendChild(bookingJSWrapper);
 
@@ -22466,14 +22942,19 @@ var UI = /*#__PURE__*/function () {
         key = 'id';
       }
 
-      projects.forEach(function (projectData) {
-        var cardTitle = getKeyValue(dataOptions['cardTitle'], projectData);
-        var cardBody = getKeyValue(dataOptions['cardBody'], projectData);
-        var cardFooter = getKeyValue(dataOptions['cardFooter'], projectData);
-        var cardImage = getKeyValue(dataOptions['cardImage'], projectData);
+      this.setupGeoSearchBar(options, dataOptions, projects, key);
+
+      if (!('geoSearchBar' in options) || options['geoSearchBar'] === undefined) {
+        projects.forEach(function (projectData) {
+          var cardTitle = getKeyValue(dataOptions['cardTitle'], projectData);
+          var cardBody = getKeyValue(dataOptions['cardBody'], projectData);
+          var cardFooter = getKeyValue(dataOptions['cardFooter'], projectData);
+          var cardImage = getKeyValue(dataOptions['cardImage'], projectData);
+
+          _this2.addCardDefault(key, projectData.id, cardTitle, cardBody, cardFooter, cardImage);
+        });
+      }
 
-        _this2.addCardDefault(key, projectData.id, cardTitle, cardBody, cardFooter, cardImage);
-      });
       this.hideBackButtonIfFirstPage();
     }
   }, {
@@ -22515,6 +22996,7 @@ var UI = /*#__PURE__*/function () {
       var body = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
       var footer = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
       var image = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '';
+      var titleOverride = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
       // Build a card
       var card = document.createElement('div');
       card.id = "".concat(key, "-card-").concat(value);
@@ -22536,7 +23018,7 @@ var UI = /*#__PURE__*/function () {
       card.className = 'card-container';
       var titleDiv = document.createElement('div');
       titleDiv.className = 'card-title';
-      titleDiv.innerHTML = title;
+      titleDiv.innerHTML = titleOverride !== null && titleOverride !== void 0 ? titleOverride : title;
       var bodyDiv = document.createElement('div');
       bodyDiv.className = 'card-body';
       bodyDiv.innerHTML = body;
@@ -22618,6 +23100,22 @@ var UI = /*#__PURE__*/function () {
         this.navigator.searchBar.showSearchBar(false);
       }
     }
+  }, {
+    key: "setupGeoSearchBar",
+    value: function setupGeoSearchBar(options, dataOptions, stores, key) {
+      if (typeof options['geoSearchBar'] === 'undefined') {
+        this.navigator.geoSearchBar.showSearchBar(false);
+        return;
+      } else {
+        'placeholder' in options['geoSearchBar'] ? this.navigator.geoSearchBar.setSearchBarPlaceholder(options['geoSearchBar']['placeholder']) : this.navigator.geoSearchBar.setSearchBarPlaceholder('Please enter your search term');
+        this.navigator.geoSearchBar.clearInput();
+        this.navigator.geoSearchBar.setStores(stores);
+        this.navigator.geoSearchBar.setOptions(dataOptions);
+        this.navigator.geoSearchBar.setCardsKey(key);
+        this.navigator.geoSearchBar.showSearchBar(true);
+        this.navigator.geoSearchBar.setAddCardAction(this.addCardDefault.bind(this));
+      }
+    }
   }]);
 
   return UI;