@digitransit-component/digitransit-component-autosuggest-panel 8.4.2 → 9.0.0

package/lib/index.js

@@ -1,2 +1,831 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("classnames"),require("prop-types"),require("react"),require("react-i18next"),require("react-sortablejs"),require("@digitransit-component/digitransit-component-autosuggest"),require("@digitransit-component/digitransit-component-icon"),require("lodash/isEmpty"),require("downshift"),require("i18next")):"function"==typeof define&&define.amd?define(["exports","classnames","prop-types","react","react-i18next","react-sortablejs","@digitransit-component/digitransit-component-autosuggest","@digitransit-component/digitransit-component-icon","lodash/isEmpty","downshift","i18next"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@digitransit-component/digitransit-component-autosuggest-panel"]={},e.cx,e.PropTypes,e.React,e.reactI18next,e.reactSortablejs,e.DTAutosuggest,e.Icon,e.isEmpty,e.downshift,e.i18next)}(this,function(e,t,n,i,a,o,s,l,r,d,c){"use strict";function p(e){return e&&e.__esModule?e:{default:e}}var u=p(t),_=p(n),h=p(i),g=p(s),v=p(l),f=p(r);function m(e){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},m(e)}function y(e){var t=function(e,t){if("object"!=m(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,t);if("object"!=m(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==m(t)?t:t+""}function b(e,t,n){return(t=y(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function x(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}var S="select_combobox-container__SvQ84",k="select_left-column__jbjXM",w="select_combobox-label__-CrdK",P="select_container__-r8y8",E="select_suggestion__JyaUk",O="select_suggestionHighlighted__nWx3k",N="select_suggestionsContainerOpen__JVYuR",C="select_input__YVoSg";x(".select_combobox-container__SvQ84 {\n  background-color: #fff;\n  border: solid #888 1px;\n  display: flex;\n  align-items: center;\n  border-radius: 5px;\n  height: 50px;\n  justify-content: space-between;\n  flex-grow: 1;\n}\n.select_combobox-container__SvQ84:focus-within {\n  border-color: #007ac9;\n}\n.select_combobox-container__SvQ84 .select_left-column__jbjXM {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.select_combobox-label__-CrdK {\n  font-size: 12px;\n  line-height: 20px;\n  color: #666;\n  letter-spacing: -0.48px;\n  margin-left: 12px;\n  margin-top: 4px;\n}\n\n.select_container__-r8y8 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.select_container__-r8y8 > div {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.select_container__-r8y8 .select_suggestion__JyaUk {\n  font-size: 15px;\n  line-height: 49px;\n  height: 50px;\n  padding: 0 0 0 12px;\n  letter-spacing: -0.6px;\n  color: #333;\n  font-weight: 500;\n}\n.select_container__-r8y8 .select_suggestionHighlighted__nWx3k {\n  font-size: 15px;\n  font-weight: 500;\n  background: #f2f5f7;\n}\n.select_container__-r8y8 .select_suggestionsContainerOpen__JVYuR {\n  position: absolute;\n  background-color: #fff;\n  z-index: 20;\n  max-height: 250px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  border-radius: 5px;\n  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.06);\n  border: 1px rgba(0, 0, 0, 0.1) solid;\n  top: calc(100% + 4px);\n  left: 0;\n  width: 100%;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n}\n.select_container__-r8y8 .select_suggestionsContainerOpen__JVYuR ul {\n  padding: 0;\n  margin: 0;\n}\n.select_container__-r8y8 .select_suggestionsContainerOpen__JVYuR li:not(:last-child) {\n  border-bottom: 1px solid #ddd;\n}\n.select_container__-r8y8 .select_input__YVoSg {\n  appearance: none;\n  margin: -4px 0 0 0;\n  padding-left: 12px;\n  border: none;\n  height: 26px;\n}\n.select_container__-r8y8 .select_input__YVoSg:focus {\n  outline: none;\n  border: none;\n  box-shadow: none;\n  background: #fff;\n}\n.select_container__-r8y8 .select_input__YVoSg:read-only {\n  cursor: pointer;\n  background: #fff;\n}\n.select_container__-r8y8 .select_input__YVoSg {\n  background: #fff;\n  font-weight: 500;\n  box-shadow: none;\n  font-size: 15px;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.33;\n  letter-spacing: -0.6px;\n  color: #333;\n}");const V=({value:e,options:t,onSlackTimeSelected:n,viaPointIndex:i,id:a,label:o,icon:s})=>{const l=`${a}-label`,r=t.find(t=>t.value===e),{isOpen:c,getToggleButtonProps:p,getMenuProps:_,getItemProps:g,getLabelProps:v,highlightedIndex:f}=d.useSelect({selectedItem:r,items:t,labelId:l,id:a,itemToString:e=>e.displayName,onSelectedItemChange:({selectedItem:e})=>{n(e.value,i)}});return h.default.createElement("div",{className:S},h.default.createElement("div",{className:P},h.default.createElement("div",p(),h.default.createElement("span",{className:k},h.default.createElement("label",Object.assign({},v(),{className:w}),o),h.default.createElement("div",{className:C},h.default.createElement("span",null,r.displayName))),s),h.default.createElement("ul",Object.assign({className:u.default(N,!c&&"hidden")},_()),c&&t.map((e,t)=>h.default.createElement("li",Object.assign({key:e.value,className:u.default(E,t===f&&O)},g({index:t})),h.default.createElement("span",null,e.displayName))))))};"production"!==process.env.NODE_ENV&&(V.propTypes={value:_.default.number.isRequired,onSlackTimeSelected:_.default.func.isRequired,options:_.default.arrayOf(_.default.shape({displayName:_.default.string.isRequired,value:_.default.number.isRequired}).isRequired).isRequired,id:_.default.string.isRequired,label:_.default.node.isRequired,icon:_.default.node.isRequired,viaPointIndex:_.default.number.isRequired});const A=c.createInstance({fallbackLng:"fi",resources:{de:{translation:{"add-via-button-label":"Füge Zwischenziel hinzu","add-via-duration-button-label":"Setze Umsteigezeit für Zwischenziel {{index}}","add-via-duration-button-label-close":"Schließe Umsteigezeit-Auswahl für Zwischenziel {{index}}","add-via-duration-button-label-open":"Öffne Umsteigezeit-Auswahl für Zwischenziel {{index}}","minute-short":"min","remove-via-button-label":"Entferne Zwischenziel {{index}}","swap-order-button-label":"Tausche Start mit Ziel","via-point":"Zwischenziel","via-point-index":"Zwischenziel {{index}}","viapoint-slack-amount":"Umsteigezeit"}},en:{translation:{"add-via-button-label":"Add via point","add-via-duration-button-label":"Set stop duration at via point {{index}}","add-via-duration-button-label-close":"Close stop duration selector at via point {{index}}","add-via-duration-button-label-open":"Open stop duration selector at via point {{index}}","minute-short":"min","remove-via-button-label":"Remove via point {{index}}","swap-order-button-label":"Reverse origin and destination","via-point":"Via point","via-point-index":"Via point {{index}}","viapoint-slack-amount":"Stop duration"}},fi:{translation:{"add-via-button-label":"Lisää välipiste","add-via-duration-button-label":"Aseta välipisteelle {{index}} pysähdyksen kesto","add-via-duration-button-label-close":"Avaa välipisteen {{index}} pysähdyksen kesto valitsin","add-via-duration-button-label-open":"Sulje välipisteen {{index}} pysähdyksen kesto valitsin","minute-short":"min","remove-via-button-label":"Poista välipiste {{index}}","swap-order-button-label":"Käännä reitin suunta vastakkaiseksi","via-point":"Välipiste","via-point-index":"Välipiste {{index}}","viapoint-slack-amount":"Pysähdyksen kesto"}},pl:{translation:{"add-via-button-label":"Dodaj punkt pośredni","add-via-duration-button-label":"Wybierz czas postoju dla punktu {{index}}","add-via-duration-button-label-close":"Zamknij wybornik czasu postoju w punkcie {{index}}","add-via-duration-button-label-open":"Otwórz wybornik czasu postoju w punkcie {{index}}","minute-short":"min.","remove-via-button-label":"Usuń punkt pośredni {{index}}","swap-order-button-label":"Odwróć początek i cel","via-point":"Punkt pośredni","via-point-index":"Punkt pośredni {{index}}","viapoint-slack-amount":"Czas postoju"}},sv:{translation:{"add-via-button-label":"Lägg till viapunkt","add-via-duration-button-label":"Ställ in varaktighet för viapunkten {{index}}","add-via-duration-button-label-close":"Stäng väljaren för varaktighet vid via-punkten {{index}}","add-via-duration-button-label-open":"Öppna väljaren för varaktighet vid via-punkten {{index}}","minute-short":"min","remove-via-button-label":"Ta bort viapunkt {{index}}","swap-order-button-label":"Sväng ruttens riktning till den motsatta","via-point":"Via punkt","via-point-index":"Via punkt {{index}}","viapoint-slack-amount":"Stoppets varaktighet"}}},defaultNS:"translation",react:{useSuspense:!0}});A.init();var R={"autosuggest-panel":"styles_autosuggest-panel__OaGWx","autosuggest-searchpanel-text":"styles_autosuggest-searchpanel-text__K2Sud","origin-input-container":"styles_origin-input-container__J-Iva","destination-input-container":"styles_destination-input-container__Q-nKR",row:"styles_row__AJFl2","viapoints-container":"styles_viapoints-container__S9HPW","viapoint-container":"styles_viapoint-container__Ev7XS","light-gray-background":"styles_light-gray-background__DO6vl","viapoint-before":"styles_viapoint-before__O0but","viapoint-input-container":"styles_viapoint-input-container__m84pk","viapoint-1":"styles_viapoint-1__-L3YV",viapoint:"styles_viapoint__l7OQr","viapoint-2":"styles_viapoint-2__nbTQE","viapoint-3":"styles_viapoint-3__euAwt","viapoint-4":"styles_viapoint-4__zT4lg","viapoint-5":"styles_viapoint-5__Nv3uU","viapoint-slack-time":"styles_viapoint-slack-time__RF3rg","select-wrapper":"styles_select-wrapper__ZbWuX","via-point-button-container":"styles_via-point-button-container__Oxyk8","input-viapoint-slack-container":"styles_input-viapoint-slack-container__4T7LG","itinerary-search-control":"styles_itinerary-search-control__9A4Y-",opposite:"styles_opposite__aI-Yn","add-via-point":"styles_add-via-point__q5tPF","add-via-point-slack":"styles_add-via-point-slack__aYNIN","remove-via-point":"styles_remove-via-point__1ys9T","combobox-icon":"styles_combobox-icon__s8Fqp","time-input-icon":"styles_time-input-icon__4xP1Q","rectangle-container":"styles_rectangle-container__kXQDW",rectangle:"styles_rectangle__1ryOy","search-panel-whitespace":"styles_search-panel-whitespace__YsiJN"};x(".styles_autosuggest-panel__OaGWx {\n  width: 100%;\n}\n\n.styles_autosuggest-searchpanel-text__K2Sud {\n  font-size: 24px;\n  font-weight: var(--font-weight-medium);\n  letter-spacing: -0.8px;\n  color: #333;\n  line-height: 1;\n  margin-bottom: 17px;\n  margin-top: unset;\n}\n@media screen and (min-width: 768px) {\n  .styles_autosuggest-searchpanel-text__K2Sud {\n    letter-spacing: -0.8px;\n    line-height: 27px;\n    margin-bottom: 21px;\n  }\n}\n\n.styles_origin-input-container__J-Iva,\n.styles_destination-input-container__Q-nKR {\n  display: flex;\n  flex: 1 0 100%;\n}\n.styles_origin-input-container__J-Iva input[type=text],\n.styles_destination-input-container__Q-nKR input[type=text] {\n  margin: 0;\n}\n\n.styles_row__AJFl2 {\n  display: flex;\n  flex-direction: row;\n}\n\n.styles_viapoints-container__S9HPW {\n  display: flex;\n  flex-direction: column;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS {\n  display: flex;\n  flex: 1 0 100%;\n  min-height: 50px;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS:first-child {\n  margin-top: 6px;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS:not(:first-child) {\n  margin-top: 3px;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS:last-child {\n  margin-bottom: 6px;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS .styles_light-gray-background__DO6vl {\n  display: flex;\n  padding: 3px 0;\n  flex-direction: column;\n  background: #f2f5f7;\n  border-radius: 5px;\n  width: 100%;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS .styles_light-gray-background__DO6vl .styles_viapoint-before__O0but {\n  display: flex;\n  min-width: 27px;\n  justify-content: center;\n  align-items: center;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS .styles_light-gray-background__DO6vl .styles_viapoint-before__O0but svg {\n  fill: #888;\n  height: 20px;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS .styles_light-gray-background__DO6vl .styles_viapoint-input-container__m84pk {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS .styles_light-gray-background__DO6vl .styles_viapoint-input-container__m84pk input[type=text] {\n  margin: 0;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS .styles_light-gray-background__DO6vl .styles_viapoint-input-container__m84pk.styles_viapoint-1__-L3YV > div.styles_viapoint__l7OQr {\n  z-index: 15;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS .styles_light-gray-background__DO6vl .styles_viapoint-input-container__m84pk.styles_viapoint-2__nbTQE > div.styles_viapoint__l7OQr {\n  z-index: 14;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS .styles_light-gray-background__DO6vl .styles_viapoint-input-container__m84pk.styles_viapoint-3__euAwt > div.styles_viapoint__l7OQr {\n  z-index: 13;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS .styles_light-gray-background__DO6vl .styles_viapoint-input-container__m84pk.styles_viapoint-4__zT4lg > div.styles_viapoint__l7OQr {\n  z-index: 12;\n}\n.styles_viapoints-container__S9HPW .styles_viapoint-container__Ev7XS .styles_light-gray-background__DO6vl .styles_viapoint-input-container__m84pk.styles_viapoint-5__Nv3uU > div.styles_viapoint__l7OQr {\n  z-index: 11;\n}\n\n.styles_viapoint-slack-time__RF3rg {\n  font-size: 13px;\n  font-weight: normal;\n  letter-spacing: -0.36px;\n  color: #333;\n  padding-left: 27px;\n  padding-top: 12px;\n  padding-bottom: 10px;\n}\n\n.styles_select-wrapper__ZbWuX {\n  display: flex;\n  height: 50px;\n  margin-top: 9px;\n  padding-left: 27px;\n  padding-right: 47px;\n}\n\n.styles_via-point-button-container__Oxyk8 {\n  display: flex;\n}\n.styles_via-point-button-container__Oxyk8 > div:nth-child(1) {\n  order: 1;\n  border-left: none;\n}\n.styles_via-point-button-container__Oxyk8 > div:nth-child(2) {\n  order: 2;\n  border-left: 1px solid rgba(151, 151, 151, 0.2);\n}\n\n.styles_input-viapoint-slack-container__4T7LG {\n  display: flex;\n  flex-direction: column;\n}\n\n.styles_itinerary-search-control__9A4Y- {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  max-height: 50px;\n  min-width: var(--width);\n}\n.styles_itinerary-search-control__9A4Y- + .styles_itinerary-search-control__9A4Y- {\n  border-left: 1px solid rgba(151, 151, 151, 0.2);\n}\n.styles_itinerary-search-control__9A4Y- .styles_opposite__aI-Yn {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  min-width: 40px;\n  cursor: pointer;\n}\n.styles_itinerary-search-control__9A4Y- .styles_opposite__aI-Yn svg {\n  width: 19px;\n  height: 17px;\n}\n.styles_itinerary-search-control__9A4Y- .styles_add-via-point__q5tPF {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  min-width: 40px;\n  cursor: pointer;\n}\n.styles_itinerary-search-control__9A4Y- .styles_add-via-point__q5tPF svg {\n  width: 20px;\n  height: 22px;\n}\n.styles_itinerary-search-control__9A4Y- .styles_add-via-point-slack__aYNIN {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  min-width: 47px;\n  cursor: pointer;\n}\n.styles_itinerary-search-control__9A4Y- .styles_add-via-point-slack__aYNIN svg {\n  width: 18px;\n  height: 19px;\n}\n.styles_itinerary-search-control__9A4Y- .styles_remove-via-point__1ys9T {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  max-height: 44px;\n  min-width: 40px;\n  cursor: pointer;\n}\n.styles_itinerary-search-control__9A4Y- .styles_remove-via-point__1ys9T svg {\n  width: 14px;\n  height: 14px;\n}\n\n.styles_combobox-icon__s8Fqp {\n  color: var(--color);\n  border-left: solid #888 1px;\n  height: 35px;\n}\n.styles_combobox-icon__s8Fqp.styles_time-input-icon__4xP1Q {\n  padding: 9px 13px 0 13px;\n}\n.styles_combobox-icon__s8Fqp.styles_time-input-icon__4xP1Q svg {\n  width: 18px;\n  height: 19px;\n}\n\n.styles_rectangle-container__kXQDW {\n  display: block;\n  position: relative;\n  height: 9px;\n  z-index: 19;\n}\n.styles_rectangle-container__kXQDW .styles_rectangle__1ryOy {\n  position: absolute;\n  width: 4px;\n  height: 25px;\n  border-radius: 2px;\n  background-color: #ddd;\n  margin-left: 25px;\n  margin-top: -9px;\n}\n\n.styles_search-panel-whitespace__YsiJN {\n  min-width: 40px;\n}");const I=["children","className","enabled","onClick","onKeyPress","wide"],j=()=>({}),q=e=>{if(void 0===e||f.default(e))return!0;const t=Object.keys(e);return 1===t.length||2===t.length&&t.includes("locationSlack")},T=e=>{let{children:t,className:n,enabled:i,onClick:a,onKeyPress:o,wide:s}=e,l=function(e,t){if(null==e)return{};var n,i,a=function(e,t){if(null==e)return{};var n={};for(var i in e)if({}.hasOwnProperty.call(e,i)){if(-1!==t.indexOf(i))continue;n[i]=e[i]}return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}(e,I);return h.default.createElement("div",{className:R["itinerary-search-control"],style:{"--width":s?"47px":"40px"}},a&&i&&h.default.createElement("div",Object.assign({},l,{className:n,onClick:a,onKeyPress:o,role:"button",tabIndex:"0"}),t))},z=(e,t,n=!1)=>{const i=e.indexOf(t);return i>-1&&e.splice(i,1),n?e.map(e=>e>t?e-1:e):e},W=e=>{const t=e&&(e.key||e.which||e.keyCode)||"";return!(!t||![13," ","Spacebar"].concat([32,"Enter"]).includes(t))&&(e.preventDefault(),!0)},Y=e=>e&&e.address||e&&e.gps&&e.ready&&"Nykyinen sijainti"||"",H=e=>e&&!0===e.gps?"position":"location";"production"!==process.env.NODE_ENV&&(T.propTypes={children:_.default.node,className:_.default.string.isRequired,enabled:_.default.bool.isRequired,onClick:_.default.func.isRequired,onKeyPress:_.default.func.isRequired,wide:_.default.bool}),T.defaultProps={children:void 0,wide:!1};const L="production"!==process.env.NODE_ENV?_.default.shape({address:_.default.string,lat:_.default.number,lon:_.default.number,locationSlack:_.default.number}):{};class M extends h.default.Component{constructor(e){super(e),b(this,"storeReference",e=>{this.setState(t=>({refs:[...t.refs,e]}))}),b(this,"handleFocusChange",()=>{const{destination:e}=this.props;e&&e.lat||this.state.refs[1].focus()}),b(this,"updateViaPoints",e=>{0!==e.length?this.props.updateViaPoints(e.filter(e=>!q(e))):this.props.updateViaPoints([])}),b(this,"handleToggleViaPointSlackClick",e=>{const{activeSlackInputs:t}=this.state;this.setState({activeSlackInputs:t.includes(e)?z(t,e):t.concat([e])})}),b(this,"handleViaPointSlackTimeSelected",(e,t)=>{this.props.addAnalyticsEvent&&this.props.addAnalyticsEvent({action:"EditViaPointStopDuration",category:"ItinerarySettings",name:e/60});const{viaPoints:n}=this.props;n[t].locationSlack=Number.parseInt(e,10),this.updateViaPoints(n)}),b(this,"handleViaPointLocationSelected",(e,t)=>{this.props.handleViaPointLocationSelected(e,t)}),b(this,"handleRemoveViaPointClick",e=>{this.props.addAnalyticsEvent&&this.props.addAnalyticsEvent({action:"RemoveJourneyViaPoint",category:"ItinerarySettings",name:null});const{activeSlackInputs:t}=this.state,{viaPoints:n}=this.props;n.splice(e,1),this.setState({activeSlackInputs:z(t,e,!0)},()=>this.updateViaPoints(n))}),b(this,"handleAddViaPointClick",()=>{this.props.addAnalyticsEvent&&this.props.addAnalyticsEvent({action:"AddJourneyViaPoint",category:"ItinerarySettings",name:"QuickSettingsButton"});const{viaPoints:e}=this.props;e.push({}),this.setState(this.state)}),b(this,"handleSwapOrderClick",()=>{this.props.addAnalyticsEvent&&this.props.addAnalyticsEvent({action:"SwitchJourneyStartAndEndPointOrder",category:"ItinerarySettings",name:null});const{viaPoints:e}=this.props;e.reverse(),this.props.swapOrder()}),b(this,"getSlackDisplay",e=>`${e/60} ${this.props.t("minute-short",{lng:this.props.lang})}`),this.state={activeSlackInputs:[],refs:[]}}render(){const{origin:e,searchPanelText:t,searchContext:n,disableAutoFocus:i,viaPoints:a,originMobileLabel:s,destinationMobileLabel:l,fontWeights:r,onFocusChange:d,showSwapControl:c,showViapointControl:p,t:_,lang:f}=this.props,{primary:m}=this.props.colors,{activeSlackInputs:y}=this.state,b=(e=>{const t=[];for(let n=0;n<=9;n++){const i=10*n;t.push({displayName:`${i} ${e("minute-short")}`,value:60*i})}return t})(_),x=(e,t=0)=>e&&e.locationSlack||t,S=e=>y.includes(e);return h.default.createElement("div",{className:u.default(R["autosuggest-panel"],this.props.isMobile&&"small"),style:{"--color":m,"--font-weight-medium":r.medium}}," ",t?h.default.createElement("div",null,h.default.createElement("h1",{className:R["autosuggest-searchpanel-text"]}," ",t)):null,h.default.createElement("div",{className:R["origin-input-container"]},h.default.createElement(g.default,{appElement:this.props.appElement,icon:"originEllipse",id:"origin",autoFocus:!0!==i&&(!this.props.isMobile&&!e.lat),storeRef:this.storeReference,refPoint:this.props.refPoint,className:H(e),placeholder:this.props.originPlaceHolder,value:Y(e),searchContext:n,getAutoSuggestIcons:this.props.getAutoSuggestIcons,onSelect:this.props.onSelect,onClear:this.props.onClear,focusChange:d||this.handleFocusChange,lang:this.props.lang,sources:this.props.sources,targets:this.props.targets,filterResults:this.props.filterResults,isMobile:this.props.isMobile,colors:this.props.colors,mobileLabel:s,fontWeights:this.props.fontWeights,modeSet:this.props.modeSet,showScroll:this.props.showScroll,isEmbedded:this.props.isEmbedded}),(c||p)&&h.default.createElement(T,{className:R.opposite,enabled:c,onClick:()=>this.handleSwapOrderClick(),onKeyPress:e=>W(e)&&this.handleSwapOrderClick(),"aria-label":_("swap-order-button-label",{lng:f})},h.default.createElement(v.default,{img:"opposite",color:m}))),0===a.length&&h.default.createElement("div",{className:R["rectangle-container"]},h.default.createElement("div",{className:R.rectangle})),h.default.createElement(o.ReactSortable,{className:R["viapoints-container"],list:a,handle:`.${R["viapoint-before"]}`,animation:200,disabled:a.length<=1,setList:e=>{const t=e.filter(e=>!q(e));t.length>0&&this.props.updateViaPoints(t)}},a.map((e,t)=>h.default.createElement("div",{className:u.default(R["viapoint-container"]),key:`viapoint-${t}`},h.default.createElement("div",{className:R["light-gray-background"]},h.default.createElement("div",{className:R.row},h.default.createElement("div",{className:R["viapoint-before"],style:a.length>1?{cursor:"move"}:{}},a.length>1&&h.default.createElement(v.default,{img:"ellipsis",rotate:90,color:m})),h.default.createElement("div",{className:`${R["viapoint-input-container"]} ${R[`viapoint-${t+1}`]}`},h.default.createElement(g.default,{appElement:this.props.appElement,icon:"mapMarker",id:"via-point",ariaLabel:_("via-point-index",{index:t+1,lng:f}),autoFocus:!0!==i&&!this.props.isMobile,placeholder:"via-point",className:"viapoint",searchContext:n,refPoint:this.props.refPoint,value:e&&e.address||"",onSelect:this.props.onSelect,onClear:this.props.onClear,handleViaPoints:e=>this.handleViaPointLocationSelected(e,t),lang:this.props.lang,sources:this.props.sources,targets:this.props.targets,filterResults:this.props.filterResults,getAutoSuggestIcons:this.props.getAutoSuggestIcons,isMobile:this.props.isMobile,fontWeights:this.props.fontWeights,modeSet:this.props.modeSet,colors:this.props.colors,showScroll:this.props.showScroll})),this.props.showSlackControl&&h.default.createElement(T,{className:R["add-via-point-slack"],enabled:this.props.showViapointControl,onClick:()=>this.handleToggleViaPointSlackClick(t),onKeyPress:e=>W(e)&&this.handleToggleViaPointSlackClick(t),"aria-label":_(S(t)?"add-via-duration-button-label-open":"add-via-duration-button-label-close",{index:t+1,lng:f}),wide:!0},h.default.createElement(v.default,{img:"time",color:m}))),!S(t)&&a[t]&&a[t].locationSlack>0&&h.default.createElement("span",{className:R["viapoint-slack-time"]},`${_("viapoint-slack-amount",{lng:f})}: ${this.getSlackDisplay(a[t].locationSlack)}`),h.default.createElement("div",{className:u.default(R["input-viapoint-slack-container"],!S(t)&&"collapsed")},h.default.createElement("div",{className:R["select-wrapper"]},h.default.createElement(V,{id:`viapoint-slack-${t}`,label:_("viapoint-slack-amount",{lng:f}),options:b,value:x(a[t]),viaPointIndex:t,icon:h.default.createElement("span",{className:`${R["combobox-icon"]} ${R["time-input-icon"]}`},h.default.createElement(v.default,{img:"time",color:m})),onSlackTimeSelected:this.handleViaPointSlackTimeSelected})))),h.default.createElement(T,{className:R["remove-via-point"],enabled:this.props.showViapointControl,onClick:()=>this.handleRemoveViaPointClick(t),onKeyPress:e=>W(e)&&this.handleRemoveViaPointClick(t),"aria-label":_("remove-via-button-label",{index:t+1,lng:f})},h.default.createElement(v.default,{img:"trash",color:m}))))),h.default.createElement("div",{className:R["destination-input-container"]},h.default.createElement(g.default,{appElement:this.props.appElement,icon:"mapMarker",id:"destination",autoFocus:!0!==i&&(!this.props.isMobile&&!Number.isNaN(e.lat)),storeRef:this.storeReference,placeholder:this.props.destinationPlaceHolder,className:H(this.props.destination),getAutoSuggestIcons:this.props.getAutoSuggestIcons,searchContext:n,onSelect:this.props.onSelect,onClear:this.props.onClear,refPoint:this.props.refPoint,value:Y(this.props.destination),lang:this.props.lang,sources:this.props.sources,targets:this.props.targets,filterResults:this.props.filterResults,isMobile:this.props.isMobile,mobileLabel:l,fontWeights:this.props.fontWeights,modeSet:this.props.modeSet,colors:this.props.colors,showScroll:this.props.showScroll,isEmbedded:this.props.isEmbedded}),(c||p)&&h.default.createElement(T,{className:u.default(R["add-via-point"],R.more,a.length>4&&"collapsed"),enabled:p&&0===a.length,onClick:()=>this.handleAddViaPointClick(),onKeyPress:e=>W(e)&&this.handleAddViaPointClick(),"aria-label":_("add-via-button-label",{lng:f})},h.default.createElement(v.default,{img:"viapoint",width:1.25,height:1.375,color:m}))))}}b(M,"defaultProps",{origin:void 0,destination:void 0,viaPoints:[],originPlaceHolder:"give-origin",destinationPlaceHolder:"give-destination",swapOrder:void 0,updateViaPoints:()=>{},searchPanelText:void 0,sources:[],targets:[],filterResults:void 0,onClear:void 0,getAutoSuggestIcons:void 0,refPoint:void 0,addAnalyticsEvent:void 0,disableAutoFocus:!1,isMobile:!1,handleViaPointLocationSelected:void 0,originMobileLabel:null,destinationMobileLabel:null,modeSet:void 0,colors:l.defaultColors,fontWeights:{medium:500},showScroll:!1,onFocusChange:void 0,isEmbedded:!1,showSwapControl:!1,showViapointControl:!1,showSlackControl:!1}),"production"!==process.env.NODE_ENV&&(M.propTypes={appElement:_.default.string.isRequired,origin:L,destination:L,originPlaceHolder:_.default.string,destinationPlaceHolder:_.default.string,viaPoints:_.default.arrayOf(L),updateViaPoints:_.default.func,handleViaPointLocationSelected:_.default.func,swapOrder:_.default.func,searchPanelText:_.default.string,searchContext:_.default.shape({URL_PELIAS:_.default.string}).isRequired,onSelect:_.default.func.isRequired,onClear:_.default.func,addAnalyticsEvent:_.default.func,lang:_.default.string.isRequired,disableAutoFocus:_.default.bool,sources:_.default.arrayOf(_.default.string),targets:_.default.arrayOf(_.default.string),filterResults:_.default.func,isMobile:_.default.bool,originMobileLabel:_.default.string,destinationMobileLabel:_.default.string,refPoint:L,modeSet:_.default.string,colors:_.default.objectOf(_.default.string),getAutoSuggestIcons:_.default.objectOf(_.default.func),fontWeights:_.default.shape({medium:_.default.number}),showScroll:_.default.bool,onFocusChange:_.default.func,isEmbedded:_.default.bool,showSwapControl:_.default.bool,showViapointControl:_.default.bool,showSlackControl:_.default.bool,t:_.default.func.isRequired});const D=a.withTranslation()(M);e.default=e=>h.default.createElement(a.I18nextProvider,{i18n:A},h.default.createElement(D,e)),e.getEmptyViaPointPlaceHolder=j,Object.defineProperty(e,"__esModule",{value:!0})});
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withTranslation, I18nextProvider } from 'react-i18next';
+import { ReactSortable } from 'react-sortablejs';
+import DTAutoSuggest from '@digitransit-component/digitransit-component-autosuggest';
+import Icon, { defaultColors } from '@digitransit-component/digitransit-component-icon';
+import isEmpty from 'lodash/isEmpty.js';
+import { useSelect } from 'downshift';
+import { createInstance } from 'i18next';
+
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != _typeof(i)) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
+}
+
+function _defineProperty(e, r, t) {
+  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = ".select_combobox-container__l-gXK {\n  background-color: #fff;\n  border: solid #888 1px;\n  display: flex;\n  align-items: center;\n  border-radius: 5px;\n  height: 50px;\n  justify-content: space-between;\n  flex-grow: 1;\n}\n.select_combobox-container__l-gXK:focus-within {\n  border-color: #007ac9;\n}\n.select_combobox-container__l-gXK .select_left-column__NCDpJ {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.select_combobox-label__QYe0V {\n  font-size: 12px;\n  line-height: 20px;\n  color: #666;\n  letter-spacing: -0.48px;\n  margin-left: 12px;\n  margin-top: 4px;\n}\n\n.select_container__U5yMR {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.select_container__U5yMR > div {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.select_container__U5yMR .select_suggestion__7in7q {\n  font-size: 15px;\n  line-height: 49px;\n  height: 50px;\n  padding: 0 0 0 12px;\n  letter-spacing: -0.6px;\n  color: #333;\n  font-weight: 500;\n}\n.select_container__U5yMR .select_suggestionHighlighted__HV-5T {\n  font-size: 15px;\n  font-weight: 500;\n  background: #f2f5f7;\n}\n.select_container__U5yMR .select_suggestionsContainerOpen__SzPE6 {\n  position: absolute;\n  background-color: #fff;\n  z-index: 20;\n  max-height: 250px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  border-radius: 5px;\n  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.06);\n  border: 1px rgba(0, 0, 0, 0.1) solid;\n  top: calc(100% + 4px);\n  left: 0;\n  width: 100%;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n}\n.select_container__U5yMR .select_suggestionsContainerOpen__SzPE6 ul {\n  padding: 0;\n  margin: 0;\n}\n.select_container__U5yMR .select_suggestionsContainerOpen__SzPE6 li:not(:last-child) {\n  border-bottom: 1px solid #ddd;\n}\n.select_container__U5yMR .select_input__tiwn5 {\n  appearance: none;\n  margin: -4px 0 0 0;\n  padding-left: 12px;\n  border: none;\n  height: 26px;\n}\n.select_container__U5yMR .select_input__tiwn5:focus {\n  outline: none;\n  border: none;\n  box-shadow: none;\n  background: #fff;\n}\n.select_container__U5yMR .select_input__tiwn5:read-only {\n  cursor: pointer;\n  background: #fff;\n}\n.select_container__U5yMR .select_input__tiwn5 {\n  background: #fff;\n  font-weight: 500;\n  box-shadow: none;\n  font-size: 15px;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.33;\n  letter-spacing: -0.6px;\n  color: #333;\n}";
+var styles$1 = {"combobox-container":"select_combobox-container__l-gXK","left-column":"select_left-column__NCDpJ","combobox-label":"select_combobox-label__QYe0V","container":"select_container__U5yMR","suggestion":"select_suggestion__7in7q","suggestionHighlighted":"select_suggestionHighlighted__HV-5T","suggestionsContainerOpen":"select_suggestionsContainerOpen__SzPE6","input":"select_input__tiwn5"};
+styleInject(css_248z$1);
+
+const Select = ({
+  value,
+  options,
+  onSlackTimeSelected,
+  viaPointIndex,
+  id,
+  label,
+  icon
+}) => {
+  const labelId = `${id}-label`;
+  const selectedItem = options.find(option => option.value === value);
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    getLabelProps,
+    highlightedIndex
+  } = useSelect({
+    selectedItem,
+    items: options,
+    labelId,
+    id,
+    itemToString: item => item.displayName,
+    onSelectedItemChange: ({
+      selectedItem: newItem
+    }) => {
+      onSlackTimeSelected(newItem.value, viaPointIndex);
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$1['combobox-container']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$1.container
+  }, /*#__PURE__*/React.createElement("div", getToggleButtonProps(), /*#__PURE__*/React.createElement("span", {
+    className: styles$1['left-column']
+  }, /*#__PURE__*/React.createElement("label", Object.assign({}, getLabelProps(), {
+    className: styles$1['combobox-label']
+  }), label), /*#__PURE__*/React.createElement("div", {
+    className: styles$1.input
+  }, /*#__PURE__*/React.createElement("span", null, selectedItem.displayName))), icon), /*#__PURE__*/React.createElement("ul", Object.assign({
+    className: cx(styles$1.suggestionsContainerOpen, !isOpen && 'hidden')
+  }, getMenuProps()), isOpen && options.map((option, index) => /*#__PURE__*/React.createElement("li", Object.assign({
+    key: option.value,
+    className: cx(styles$1.suggestion, index === highlightedIndex && styles$1.suggestionHighlighted)
+  }, getItemProps({
+    index
+  })), /*#__PURE__*/React.createElement("span", null, option.displayName))))));
+};
+process.env.NODE_ENV !== "production" ? Select.propTypes = {
+  value: PropTypes.number.isRequired,
+  onSlackTimeSelected: PropTypes.func.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  }).isRequired).isRequired,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
+  icon: PropTypes.node.isRequired,
+  viaPointIndex: PropTypes.number.isRequired
+} : void 0;
+
+const translations = {
+  de: {
+    translation: {
+      'add-via-button-label': 'Füge Zwischenziel hinzu',
+      'add-via-duration-button-label': 'Setze Umsteigezeit für Zwischenziel {{index}}',
+      'add-via-duration-button-label-close': 'Schließe Umsteigezeit-Auswahl für Zwischenziel {{index}}',
+      'add-via-duration-button-label-open': 'Öffne Umsteigezeit-Auswahl für Zwischenziel {{index}}',
+      'minute-short': 'min',
+      'remove-via-button-label': 'Entferne Zwischenziel {{index}}',
+      'swap-order-button-label': 'Tausche Start mit Ziel',
+      'via-point': 'Zwischenziel',
+      'via-point-index': 'Zwischenziel {{index}}',
+      'viapoint-slack-amount': 'Umsteigezeit'
+    }
+  },
+  en: {
+    translation: {
+      'add-via-button-label': 'Add via point',
+      'add-via-duration-button-label': 'Set stop duration at via point {{index}}',
+      'add-via-duration-button-label-close': 'Close stop duration selector at via point {{index}}',
+      'add-via-duration-button-label-open': 'Open stop duration selector at via point {{index}}',
+      'minute-short': 'min',
+      'remove-via-button-label': 'Remove via point {{index}}',
+      'swap-order-button-label': 'Reverse origin and destination',
+      'via-point': 'Via point',
+      'via-point-index': 'Via point {{index}}',
+      'viapoint-slack-amount': 'Stop duration'
+    }
+  },
+  fi: {
+    translation: {
+      'add-via-button-label': 'Lisää välipiste',
+      'add-via-duration-button-label': 'Aseta välipisteelle {{index}} pysähdyksen kesto',
+      'add-via-duration-button-label-close': 'Avaa välipisteen {{index}} pysähdyksen kesto valitsin',
+      'add-via-duration-button-label-open': 'Sulje välipisteen {{index}} pysähdyksen kesto valitsin',
+      'minute-short': 'min',
+      'remove-via-button-label': 'Poista välipiste {{index}}',
+      'swap-order-button-label': 'Käännä reitin suunta vastakkaiseksi',
+      'via-point': 'Välipiste',
+      'via-point-index': 'Välipiste {{index}}',
+      'viapoint-slack-amount': 'Pysähdyksen kesto'
+    }
+  },
+  pl: {
+    translation: {
+      'add-via-button-label': 'Dodaj punkt pośredni',
+      'add-via-duration-button-label': 'Wybierz czas postoju dla punktu {{index}}',
+      'add-via-duration-button-label-close': 'Zamknij wybornik czasu postoju w punkcie {{index}}',
+      'add-via-duration-button-label-open': 'Otwórz wybornik czasu postoju w punkcie {{index}}',
+      'minute-short': 'min.',
+      'remove-via-button-label': 'Usuń punkt pośredni {{index}}',
+      'swap-order-button-label': 'Odwróć początek i cel',
+      'via-point': 'Punkt pośredni',
+      'via-point-index': 'Punkt pośredni {{index}}',
+      'viapoint-slack-amount': 'Czas postoju'
+    }
+  },
+  sv: {
+    translation: {
+      'add-via-button-label': 'Lägg till viapunkt',
+      'add-via-duration-button-label': 'Ställ in varaktighet för viapunkten {{index}}',
+      'add-via-duration-button-label-close': 'Stäng väljaren för varaktighet vid via-punkten {{index}}',
+      'add-via-duration-button-label-open': 'Öppna väljaren för varaktighet vid via-punkten {{index}}',
+      'minute-short': 'min',
+      'remove-via-button-label': 'Ta bort viapunkt {{index}}',
+      'swap-order-button-label': 'Sväng ruttens riktning till den motsatta',
+      'via-point': 'Via punkt',
+      'via-point-index': 'Via punkt {{index}}',
+      'viapoint-slack-amount': 'Stoppets varaktighet'
+    }
+  }
+};
+
+const i18n = createInstance({
+  fallbackLng: 'fi',
+  // debug: true,
+  resources: translations,
+  defaultNS: 'translation',
+  react: {
+    useSuspense: true
+  }
+});
+i18n.init();
+
+var css_248z = ".styles_autosuggest-panel__GEaoJ {\n  width: 100%;\n}\n\n.styles_autosuggest-searchpanel-text__7O850 {\n  font-size: 24px;\n  font-weight: var(--font-weight-medium);\n  letter-spacing: -0.8px;\n  color: #333;\n  line-height: 1;\n  margin-bottom: 17px;\n  margin-top: unset;\n}\n@media screen and (min-width: 768px) {\n  .styles_autosuggest-searchpanel-text__7O850 {\n    letter-spacing: -0.8px;\n    line-height: 27px;\n    margin-bottom: 21px;\n  }\n}\n\n.styles_origin-input-container__yfozN,\n.styles_destination-input-container__kJPky {\n  display: flex;\n  flex: 1 0 100%;\n}\n.styles_origin-input-container__yfozN input[type=text],\n.styles_destination-input-container__kJPky input[type=text] {\n  margin: 0;\n}\n\n.styles_row__MvzsR {\n  display: flex;\n  flex-direction: row;\n}\n\n.styles_viapoints-container__fukkW {\n  display: flex;\n  flex-direction: column;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE {\n  display: flex;\n  flex: 1 0 100%;\n  min-height: 50px;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE:first-child {\n  margin-top: 6px;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE:not(:first-child) {\n  margin-top: 3px;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE:last-child {\n  margin-bottom: 6px;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE .styles_light-gray-background__0vkzM {\n  display: flex;\n  padding: 3px 0;\n  flex-direction: column;\n  background: #f2f5f7;\n  border-radius: 5px;\n  width: 100%;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE .styles_light-gray-background__0vkzM .styles_viapoint-before__J1O3f {\n  display: flex;\n  min-width: 27px;\n  justify-content: center;\n  align-items: center;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE .styles_light-gray-background__0vkzM .styles_viapoint-before__J1O3f svg {\n  fill: #888;\n  height: 20px;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE .styles_light-gray-background__0vkzM .styles_viapoint-input-container__fEQi9 {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE .styles_light-gray-background__0vkzM .styles_viapoint-input-container__fEQi9 input[type=text] {\n  margin: 0;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE .styles_light-gray-background__0vkzM .styles_viapoint-input-container__fEQi9.styles_viapoint-1__s2wSB > div.styles_viapoint__UnOwm {\n  z-index: 15;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE .styles_light-gray-background__0vkzM .styles_viapoint-input-container__fEQi9.styles_viapoint-2__JNsq8 > div.styles_viapoint__UnOwm {\n  z-index: 14;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE .styles_light-gray-background__0vkzM .styles_viapoint-input-container__fEQi9.styles_viapoint-3__tv7Qy > div.styles_viapoint__UnOwm {\n  z-index: 13;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE .styles_light-gray-background__0vkzM .styles_viapoint-input-container__fEQi9.styles_viapoint-4__v0tfs > div.styles_viapoint__UnOwm {\n  z-index: 12;\n}\n.styles_viapoints-container__fukkW .styles_viapoint-container__O-xAE .styles_light-gray-background__0vkzM .styles_viapoint-input-container__fEQi9.styles_viapoint-5__luT-- > div.styles_viapoint__UnOwm {\n  z-index: 11;\n}\n\n.styles_viapoint-slack-time__dV527 {\n  font-size: 13px;\n  font-weight: normal;\n  letter-spacing: -0.36px;\n  color: #333;\n  padding-left: 27px;\n  padding-top: 12px;\n  padding-bottom: 10px;\n}\n\n.styles_select-wrapper__zaWty {\n  display: flex;\n  height: 50px;\n  margin-top: 9px;\n  padding-left: 27px;\n  padding-right: 47px;\n}\n\n.styles_via-point-button-container__kUBm7 {\n  display: flex;\n}\n.styles_via-point-button-container__kUBm7 > div:nth-child(1) {\n  order: 1;\n  border-left: none;\n}\n.styles_via-point-button-container__kUBm7 > div:nth-child(2) {\n  order: 2;\n  border-left: 1px solid rgba(151, 151, 151, 0.2);\n}\n\n.styles_input-viapoint-slack-container__-LDqu {\n  display: flex;\n  flex-direction: column;\n}\n\n.styles_itinerary-search-control__1KyCb {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  max-height: 50px;\n  min-width: var(--width);\n}\n.styles_itinerary-search-control__1KyCb + .styles_itinerary-search-control__1KyCb {\n  border-left: 1px solid rgba(151, 151, 151, 0.2);\n}\n.styles_itinerary-search-control__1KyCb .styles_opposite__BE7K1 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  min-width: 40px;\n  cursor: pointer;\n}\n.styles_itinerary-search-control__1KyCb .styles_opposite__BE7K1 svg {\n  width: 19px;\n  height: 17px;\n}\n.styles_itinerary-search-control__1KyCb .styles_add-via-point__7E6zU {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  min-width: 40px;\n  cursor: pointer;\n}\n.styles_itinerary-search-control__1KyCb .styles_add-via-point__7E6zU svg {\n  width: 20px;\n  height: 22px;\n}\n.styles_itinerary-search-control__1KyCb .styles_add-via-point-slack__kddhr {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  min-width: 47px;\n  cursor: pointer;\n}\n.styles_itinerary-search-control__1KyCb .styles_add-via-point-slack__kddhr svg {\n  width: 18px;\n  height: 19px;\n}\n.styles_itinerary-search-control__1KyCb .styles_remove-via-point__1oWx- {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  max-height: 44px;\n  min-width: 40px;\n  cursor: pointer;\n}\n.styles_itinerary-search-control__1KyCb .styles_remove-via-point__1oWx- svg {\n  width: 14px;\n  height: 14px;\n}\n\n.styles_combobox-icon__fhYvA {\n  color: var(--color);\n  border-left: solid #888 1px;\n  height: 35px;\n}\n.styles_combobox-icon__fhYvA.styles_time-input-icon__L2TcV {\n  padding: 9px 13px 0 13px;\n}\n.styles_combobox-icon__fhYvA.styles_time-input-icon__L2TcV svg {\n  width: 18px;\n  height: 19px;\n}\n\n.styles_rectangle-container__4Vtuo {\n  display: block;\n  position: relative;\n  height: 9px;\n  z-index: 19;\n}\n.styles_rectangle-container__4Vtuo .styles_rectangle__s-y7y {\n  position: absolute;\n  width: 4px;\n  height: 25px;\n  border-radius: 2px;\n  background-color: #ddd;\n  margin-left: 25px;\n  margin-top: -9px;\n}\n\n.styles_search-panel-whitespace__RefGL {\n  min-width: 40px;\n}";
+var styles = {"autosuggest-panel":"styles_autosuggest-panel__GEaoJ","autosuggest-searchpanel-text":"styles_autosuggest-searchpanel-text__7O850","origin-input-container":"styles_origin-input-container__yfozN","destination-input-container":"styles_destination-input-container__kJPky","row":"styles_row__MvzsR","viapoints-container":"styles_viapoints-container__fukkW","viapoint-container":"styles_viapoint-container__O-xAE","light-gray-background":"styles_light-gray-background__0vkzM","viapoint-before":"styles_viapoint-before__J1O3f","viapoint-input-container":"styles_viapoint-input-container__fEQi9","viapoint-1":"styles_viapoint-1__s2wSB","viapoint":"styles_viapoint__UnOwm","viapoint-2":"styles_viapoint-2__JNsq8","viapoint-3":"styles_viapoint-3__tv7Qy","viapoint-4":"styles_viapoint-4__v0tfs","viapoint-5":"styles_viapoint-5__luT--","viapoint-slack-time":"styles_viapoint-slack-time__dV527","select-wrapper":"styles_select-wrapper__zaWty","via-point-button-container":"styles_via-point-button-container__kUBm7","input-viapoint-slack-container":"styles_input-viapoint-slack-container__-LDqu","itinerary-search-control":"styles_itinerary-search-control__1KyCb","opposite":"styles_opposite__BE7K1","add-via-point":"styles_add-via-point__7E6zU","add-via-point-slack":"styles_add-via-point-slack__kddhr","remove-via-point":"styles_remove-via-point__1oWx-","combobox-icon":"styles_combobox-icon__fhYvA","time-input-icon":"styles_time-input-icon__L2TcV","rectangle-container":"styles_rectangle-container__4Vtuo","rectangle":"styles_rectangle__s-y7y","search-panel-whitespace":"styles_search-panel-whitespace__RefGL"};
+styleInject(css_248z);
+
+const _excluded = ["children", "className", "enabled", "onClick", "onKeyPress", "wide"];
+const getEmptyViaPointPlaceHolder = () => ({});
+const isViaPointEmpty = viaPoint => {
+  if (viaPoint === undefined || isEmpty(viaPoint)) {
+    return true;
+  }
+  const keys = Object.keys(viaPoint);
+  return keys.length === 1 || keys.length === 2 && keys.includes('locationSlack');
+};
+const ItinerarySearchControl = _ref => {
+  let {
+      children,
+      className,
+      enabled,
+      onClick,
+      onKeyPress,
+      wide
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['itinerary-search-control'],
+    style: {
+      '--width': wide ? '47px' : '40px'
+    }
+  }, onClick && enabled && /*#__PURE__*/React.createElement("div", Object.assign({}, rest, {
+    className: className,
+    onClick: onClick,
+    onKeyPress: onKeyPress,
+    role: "button",
+    tabIndex: "0"
+  }), children));
+};
+const updateViaPointSlack = (activeViaPointSlacks, updatedViaPointIndex, viaPointRemoved = false) => {
+  const foundAtIndex = activeViaPointSlacks.indexOf(updatedViaPointIndex);
+  if (foundAtIndex > -1) {
+    activeViaPointSlacks.splice(foundAtIndex, 1);
+  }
+  return viaPointRemoved ? activeViaPointSlacks.map(value => value > updatedViaPointIndex ? value - 1 : value) : activeViaPointSlacks;
+};
+const isKeyboardSelectionEvent = event => {
+  const space = [13, ' ', 'Spacebar'];
+  const enter = [32, 'Enter'];
+  const key = event && (event.key || event.which || event.keyCode) || '';
+  if (!key || !space.concat(enter).includes(key)) {
+    return false;
+  }
+  event.preventDefault();
+  return true;
+};
+const value = location => location && location.address || location && location.gps && location.ready && 'Nykyinen sijainti' || '';
+const getLocationType = location => location && location.gps === true ? 'position' : 'location';
+const getSlackTimeOptions = t => {
+  const timeOptions = [];
+  for (let i = 0; i <= 9; i++) {
+    const valueInMinutes = i * 10;
+    timeOptions.push({
+      displayName: `${valueInMinutes} ${t('minute-short')}`,
+      value: valueInMinutes * 60
+    });
+  }
+  return timeOptions;
+};
+process.env.NODE_ENV !== "production" ? ItinerarySearchControl.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string.isRequired,
+  enabled: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onKeyPress: PropTypes.func.isRequired,
+  wide: PropTypes.bool
+} : void 0;
+ItinerarySearchControl.defaultProps = {
+  children: undefined,
+  wide: false
+};
+
+/**
+ * Panel that renders two DTAutosuggest search fields, including viapoint handling
+ *
+ * @example
+ * const searchContext = {
+ *   isPeliasLocationAware: false // true / false does Let Pelias suggest based on current user location
+ *   minimalRegexp: undefined // used for testing min. regexp. For example: new RegExp('.{2,}'),
+ *   lineRegexp: undefined //  identify searches for route numbers/labels: bus | train | metro. For example: new RegExp(
+ *    //   '(^[0-9]+[a-z]?$|^[yuleapinkrtdz]$|(^m[12]?b?$))',
+ *    //  'i',
+ *    //  ),
+ *   URL_PELIAS: '' // url for pelias searches
+ *   feedIDs: ['HSL', 'HSLLautta'] // FeedId's like  [HSL, HSLLautta]
+ *   geocodingSources: ['oa','osm','nlsfi']  // sources for geocoding
+ *   geocodingSearchParams; {}  // Searchparmas fro geocoding
+ *   getFavouriteLocations: () => ({}),    // Function that returns array of favourite locations.
+ *   getFavouriteStops: () => ({}),        // Function that returns array of favourite stops.
+ *   getLanguage: () => ({}),              // Function that returns current language.
+ *   getFavouriteRoutes: () => ({}),       // Function that returns array of favourite routes.
+ *   getPositions: () => ({}),             // Function that returns user's geolocation.
+ *   getRoutesQuery: () => ({}),           // Function that returns query for fetching routes.
+ *   getStopAndStationsQuery: () => ({}),  // Function that fetches favourite stops and stations from graphql API.
+ *   getFavouriteRoutesQuery: () => ({}),  // Function that returns query for fetching favourite routes.
+ *   getFavouriteVehicleRentalStations: () => ({}),  // Function that returns favourite bike rental station.
+ *   getFavouriteVehicleRentalStationsQuery: () => ({}), // Function that returns query for fetching favourite bike rental stations.
+ *   startLocationWatch: () => ({}),       // Function that locates users geolocation.
+ *   saveSearch: () => ({}),               // Function that saves search to old searches store.
+ *   clearOldSearches: () => ({}),         // Function that clears old searches store.
+ *   getFutureRoutes: () => ({}),          // Function that return future routes
+ *   saveFutureRoute: () => ({}),          // Function that saves a future route
+ *   clearFutureRoutes: () => ({}),        // Function that clears future routes
+ * };
+ *
+ * const origin = {
+ *  lat: 60.169196,
+ *  lon: 24.957674,
+ *  address: 'Aleksanterinkatu, Helsinki',
+ *  set: true,
+ *  ready: true,
+ * }
+ *
+ * const destination = {
+ *   lat: 60.199093,
+ *   lon: 24.940536,
+ *   address: 'Opastinsilta 6, Helsinki',
+ *   set: true,
+ *   ready: true,
+ * }
+ * onSelect(item, id) {
+ *  return null;  // Define what to do when a suggestion is being selected. None by default.
+ *  }
+ * onClear(id) {
+ *  return null;  // Define what to do when a suggestion is being selected. None by default.
+ * }
+ * const getAutoSuggestIcons: {
+ *   // Called for every city bike station rendered as a search suggestion. Should return the icon and
+ *   // color used for that station. Two icons are available, 'citybike-stop-digitransit' anditybike-stop-digitransit-secondary'.
+ *   citybikes: station => {
+ *      return ['citybike-stop-digitransit', '#f2b62d'];
+ *   }
+ * }
+ * const targets = ['Locations', 'Stops', 'Routes']; // Defines what you are searching. all available options are Locations, Stops, Routes, VehicleRentalStations, FutureRoutes, MapPosition and CurrentPosition. Leave empty to search all targets.
+ * const sources = ['Favourite', 'History', 'Datasource'] // Defines where you are searching. all available are: Favourite, History (previously searched searches), and Datasource. Leave empty to use all sources.
+ * <DTAutosuggestPanel
+ *    appElement={appElement} // Required. Root element's id. Needed for react-modal component.
+ *    origin={origin} // Selected origin point
+ *    destination={destination} // Selected destination point
+ *    originPlaceHolder={'Give origin'} // Optional Give string shown initially inside origin search field
+ *    destinationPlaceHolder={'Give destination'} // Optional Give string shown initally inside destination search field
+ *    initialViaPoints={[]} // Optional.  If showViapointControl is set to true, pass initial via points to the panel. Currently no default implementation is given.
+ *    updateViaPoints={() => return []} // Optional. If showViapointControl is set to true, define how to update your via point list with this function. Currenlty no default implementation is given.
+ *    swapOrder={() => return null} // Optional. If showSwapControl is set to true, define how to swap order of your points (origin, destination, viapoints). Currently no default implementation is given.
+ *    searchContext={searchContext}
+ *    getAutoSuggestIcons={getAutoSuggestIcons}
+ *    onSelect={this.onSelect}
+ *    onClear={this.onClear}
+ *    lang="fi" // Define language fi sv or en.
+ *    addAnalyticsEvent={null} // Optional. you can record an analytics event if you wish. if passed, component will pass an category, action, name parameters to addAnalyticsEvent
+ *    disableAutoFocus={false} // Optional. use this to disable autofocus completely from DTAutosuggestPanel
+ *    sources={sources}
+ *    targets={targets}
+ *    isMobile  // Optional. Defaults to false. Whether to use mobile search.
+ *    originMobileLabel="Origin label" // Optional. Custom label text for origin field on mobile.
+ *    destinationMobileLabel="Destination label" // Optional. Custom label text for destination field on mobile.
+ *    handleFocusChange={() => {}} // Optional. If defined overrides default onFocusChange behaviour
+ *    showSwapControl={false} // Optional.
+ *    showViapointControl={false} // Optional.
+ */
+
+const locationShape = process.env.NODE_ENV !== "production" ? PropTypes.shape({
+  address: PropTypes.string,
+  lat: PropTypes.number,
+  lon: PropTypes.number,
+  locationSlack: PropTypes.number
+}) : {};
+class DTAutosuggestPanel extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "storeReference", ref => {
+      this.setState(prevState => ({
+        refs: [...prevState.refs, ref]
+      }));
+    });
+    _defineProperty(this, "handleFocusChange", () => {
+      const {
+        destination
+      } = this.props;
+      if (!destination || !destination.lat) {
+        this.state.refs[1].focus();
+      }
+    });
+    _defineProperty(this, "updateViaPoints", viaPoints => {
+      if (viaPoints.length === 0) {
+        this.props.updateViaPoints([]);
+        return;
+      }
+      this.props.updateViaPoints(viaPoints.filter(vp => !isViaPointEmpty(vp)));
+    });
+    _defineProperty(this, "handleToggleViaPointSlackClick", viaPointIndex => {
+      const {
+        activeSlackInputs
+      } = this.state;
+      this.setState({
+        activeSlackInputs: activeSlackInputs.includes(viaPointIndex) ? updateViaPointSlack(activeSlackInputs, viaPointIndex) : activeSlackInputs.concat([viaPointIndex])
+      });
+    });
+    _defineProperty(this, "handleViaPointSlackTimeSelected", (slackTimeInSeconds, i) => {
+      if (this.props.addAnalyticsEvent) {
+        this.props.addAnalyticsEvent({
+          action: 'EditViaPointStopDuration',
+          category: 'ItinerarySettings',
+          name: slackTimeInSeconds / 60
+        });
+      }
+      const {
+        viaPoints
+      } = this.props;
+      viaPoints[i].locationSlack = Number.parseInt(slackTimeInSeconds, 10);
+      this.updateViaPoints(viaPoints);
+    });
+    _defineProperty(this, "handleViaPointLocationSelected", (viaPointLocation, i) => {
+      this.props.handleViaPointLocationSelected(viaPointLocation, i);
+    });
+    _defineProperty(this, "handleRemoveViaPointClick", viaPointIndex => {
+      if (this.props.addAnalyticsEvent) {
+        this.props.addAnalyticsEvent({
+          action: 'RemoveJourneyViaPoint',
+          category: 'ItinerarySettings',
+          name: null
+        });
+      }
+      const {
+        activeSlackInputs
+      } = this.state;
+      const {
+        viaPoints
+      } = this.props;
+      viaPoints.splice(viaPointIndex, 1);
+      this.setState({
+        activeSlackInputs: updateViaPointSlack(activeSlackInputs, viaPointIndex, true)
+      }, () => this.updateViaPoints(viaPoints));
+    });
+    _defineProperty(this, "handleAddViaPointClick", () => {
+      if (this.props.addAnalyticsEvent) {
+        this.props.addAnalyticsEvent({
+          action: 'AddJourneyViaPoint',
+          category: 'ItinerarySettings',
+          name: 'QuickSettingsButton'
+        });
+      }
+      const {
+        viaPoints
+      } = this.props;
+      viaPoints.push(getEmptyViaPointPlaceHolder());
+      // We need to update the state so that placeHolder will show up in panel.
+      // eslint-disable-next-line react/no-access-state-in-setstate
+      this.setState(this.state);
+    });
+    _defineProperty(this, "handleSwapOrderClick", () => {
+      if (this.props.addAnalyticsEvent) {
+        this.props.addAnalyticsEvent({
+          action: 'SwitchJourneyStartAndEndPointOrder',
+          category: 'ItinerarySettings',
+          name: null
+        });
+      }
+      const {
+        viaPoints
+      } = this.props;
+      viaPoints.reverse();
+      this.props.swapOrder();
+    });
+    _defineProperty(this, "getSlackDisplay", slackInSeconds => `${slackInSeconds / 60} ${this.props.t('minute-short', {
+      lng: this.props.lang
+    })}`);
+    this.state = {
+      activeSlackInputs: [],
+      refs: []
+    };
+  }
+  render() {
+    const {
+      origin,
+      searchPanelText,
+      searchContext,
+      disableAutoFocus,
+      viaPoints,
+      originMobileLabel,
+      destinationMobileLabel,
+      fontWeights,
+      onFocusChange,
+      showSwapControl,
+      showViapointControl,
+      t,
+      lang: lng
+    } = this.props;
+    const {
+      primary
+    } = this.props.colors;
+    const {
+      activeSlackInputs
+    } = this.state;
+    const slackTime = getSlackTimeOptions(t);
+    const defaultSlackTimeValue = 0;
+    const getViaPointSlackTimeOrDefault = (viaPoint, defaultValue = defaultSlackTimeValue) => viaPoint && viaPoint.locationSlack || defaultValue;
+    const isViaPointSlackTimeInputActive = index => activeSlackInputs.includes(index);
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx(styles['autosuggest-panel'], this.props.isMobile && "small"),
+      style: {
+        '--color': primary,
+        '--font-weight-medium': fontWeights.medium
+      }
+    }, ' ', searchPanelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+      className: styles['autosuggest-searchpanel-text']
+    }, ' ', searchPanelText)) : null, /*#__PURE__*/React.createElement("div", {
+      className: styles['origin-input-container']
+    }, /*#__PURE__*/React.createElement(DTAutoSuggest, {
+      appElement: this.props.appElement,
+      icon: "originEllipse",
+      id: "origin",
+      autoFocus: disableAutoFocus === true ? false : !this.props.isMobile && !origin?.lat,
+      storeRef: this.storeReference,
+      refPoint: this.props.refPoint,
+      className: getLocationType(origin),
+      placeholder: this.props.originPlaceHolder,
+      value: value(origin),
+      searchContext: searchContext,
+      getAutoSuggestIcons: this.props.getAutoSuggestIcons,
+      onSelect: this.props.onSelect,
+      onClear: this.props.onClear,
+      focusChange: onFocusChange || this.handleFocusChange,
+      lang: this.props.lang,
+      sources: this.props.sources,
+      targets: this.props.targets,
+      filterResults: this.props.filterResults,
+      isMobile: this.props.isMobile,
+      colors: this.props.colors,
+      mobileLabel: originMobileLabel,
+      fontWeights: this.props.fontWeights,
+      modeSet: this.props.modeSet,
+      showScroll: this.props.showScroll,
+      isEmbedded: this.props.isEmbedded
+    }), (showSwapControl || showViapointControl) && /*#__PURE__*/React.createElement(ItinerarySearchControl, {
+      className: styles.opposite,
+      enabled: showSwapControl,
+      onClick: () => this.handleSwapOrderClick(),
+      onKeyPress: e => isKeyboardSelectionEvent(e) && this.handleSwapOrderClick(),
+      "aria-label": t('swap-order-button-label', {
+        lng
+      })
+    }, /*#__PURE__*/React.createElement(Icon, {
+      img: "opposite",
+      color: primary
+    }))), viaPoints.length === 0 && /*#__PURE__*/React.createElement("div", {
+      className: styles['rectangle-container']
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.rectangle
+    })), /*#__PURE__*/React.createElement(ReactSortable, {
+      className: styles['viapoints-container'],
+      list: viaPoints,
+      handle: `.${styles['viapoint-before']}`,
+      animation: 200,
+      disabled: viaPoints.length <= 1,
+      setList: items => {
+        const newViaPoints = items.filter(vp => !isViaPointEmpty(vp));
+        if (newViaPoints.length > 0) {
+          this.props.updateViaPoints(newViaPoints);
+        }
+      }
+    }, viaPoints.map((o, i) => /*#__PURE__*/React.createElement("div", {
+      className: cx(styles['viapoint-container']),
+      key: `viapoint-${i}` // eslint-disable-line
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles['light-gray-background']
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.row
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles['viapoint-before'],
+      style: viaPoints.length > 1 ? {
+        cursor: 'move'
+      } : {}
+    }, viaPoints.length > 1 && /*#__PURE__*/React.createElement(Icon, {
+      img: "ellipsis",
+      rotate: 90,
+      color: primary
+    })), /*#__PURE__*/React.createElement("div", {
+      className: `${styles['viapoint-input-container']} ${styles[`viapoint-${i + 1}`]}`
+    }, /*#__PURE__*/React.createElement(DTAutoSuggest, {
+      appElement: this.props.appElement,
+      icon: "mapMarker",
+      id: "via-point",
+      ariaLabel: t('via-point-index', {
+        index: i + 1,
+        lng
+      }),
+      autoFocus: disableAutoFocus === true ? false : !this.props.isMobile,
+      placeholder: "via-point",
+      className: "viapoint",
+      searchContext: searchContext,
+      refPoint: this.props.refPoint,
+      value: o && o.address || '',
+      onSelect: this.props.onSelect,
+      onClear: this.props.onClear,
+      handleViaPoints: item => this.handleViaPointLocationSelected(item, i),
+      lang: this.props.lang,
+      sources: this.props.sources,
+      targets: this.props.targets,
+      filterResults: this.props.filterResults,
+      getAutoSuggestIcons: this.props.getAutoSuggestIcons,
+      isMobile: this.props.isMobile,
+      fontWeights: this.props.fontWeights,
+      modeSet: this.props.modeSet,
+      colors: this.props.colors,
+      showScroll: this.props.showScroll
+    })), this.props.showSlackControl && /*#__PURE__*/React.createElement(ItinerarySearchControl, {
+      className: styles['add-via-point-slack'],
+      enabled: this.props.showViapointControl,
+      onClick: () => this.handleToggleViaPointSlackClick(i),
+      onKeyPress: e => isKeyboardSelectionEvent(e) && this.handleToggleViaPointSlackClick(i),
+      "aria-label": t(isViaPointSlackTimeInputActive(i) ? 'add-via-duration-button-label-open' : 'add-via-duration-button-label-close', {
+        index: i + 1,
+        lng
+      }),
+      wide: true
+    }, /*#__PURE__*/React.createElement(Icon, {
+      img: "time",
+      color: primary
+    }))), !isViaPointSlackTimeInputActive(i) && viaPoints[i] && viaPoints[i].locationSlack > 0 && /*#__PURE__*/React.createElement("span", {
+      className: styles['viapoint-slack-time']
+    }, `${t('viapoint-slack-amount', {
+      lng
+    })}: ${this.getSlackDisplay(viaPoints[i].locationSlack)}`), /*#__PURE__*/React.createElement("div", {
+      className: cx(styles['input-viapoint-slack-container'], !isViaPointSlackTimeInputActive(i) && "collapsed")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles['select-wrapper']
+    }, /*#__PURE__*/React.createElement(Select, {
+      id: `viapoint-slack-${i}`,
+      label: t('viapoint-slack-amount', {
+        lng
+      }),
+      options: slackTime,
+      value: getViaPointSlackTimeOrDefault(viaPoints[i]),
+      viaPointIndex: i,
+      icon: /*#__PURE__*/React.createElement("span", {
+        className: `${styles['combobox-icon']} ${styles['time-input-icon']}`
+      }, /*#__PURE__*/React.createElement(Icon, {
+        img: "time",
+        color: primary
+      })),
+      onSlackTimeSelected: this.handleViaPointSlackTimeSelected
+    })))), /*#__PURE__*/React.createElement(ItinerarySearchControl, {
+      className: styles['remove-via-point'],
+      enabled: this.props.showViapointControl,
+      onClick: () => this.handleRemoveViaPointClick(i),
+      onKeyPress: e => isKeyboardSelectionEvent(e) && this.handleRemoveViaPointClick(i),
+      "aria-label": t('remove-via-button-label', {
+        index: i + 1,
+        lng
+      })
+    }, /*#__PURE__*/React.createElement(Icon, {
+      img: "trash",
+      color: primary
+    }))))), /*#__PURE__*/React.createElement("div", {
+      className: styles['destination-input-container']
+    }, /*#__PURE__*/React.createElement(DTAutoSuggest, {
+      appElement: this.props.appElement,
+      icon: "mapMarker",
+      id: "destination",
+      autoFocus: disableAutoFocus === true ? false : !this.props.isMobile && !Number.isNaN(origin?.lat),
+      storeRef: this.storeReference,
+      placeholder: this.props.destinationPlaceHolder,
+      className: getLocationType(this.props.destination),
+      getAutoSuggestIcons: this.props.getAutoSuggestIcons,
+      searchContext: searchContext,
+      onSelect: this.props.onSelect,
+      onClear: this.props.onClear,
+      refPoint: this.props.refPoint,
+      value: value(this.props.destination),
+      lang: this.props.lang,
+      sources: this.props.sources,
+      targets: this.props.targets,
+      filterResults: this.props.filterResults,
+      isMobile: this.props.isMobile,
+      mobileLabel: destinationMobileLabel,
+      fontWeights: this.props.fontWeights,
+      modeSet: this.props.modeSet,
+      colors: this.props.colors,
+      showScroll: this.props.showScroll,
+      isEmbedded: this.props.isEmbedded
+    }), (showSwapControl || showViapointControl) && /*#__PURE__*/React.createElement(ItinerarySearchControl, {
+      className: cx(styles['add-via-point'], styles.more, viaPoints.length > 4 && "collapsed"),
+      enabled: showViapointControl && viaPoints.length === 0,
+      onClick: () => this.handleAddViaPointClick(),
+      onKeyPress: e => isKeyboardSelectionEvent(e) && this.handleAddViaPointClick(),
+      "aria-label": t('add-via-button-label', {
+        lng
+      })
+    }, /*#__PURE__*/React.createElement(Icon, {
+      img: "viapoint",
+      width: 1.25,
+      height: 1.375,
+      color: primary
+    }))));
+  }
+}
+_defineProperty(DTAutosuggestPanel, "defaultProps", {
+  origin: undefined,
+  destination: undefined,
+  viaPoints: [],
+  originPlaceHolder: 'give-origin',
+  destinationPlaceHolder: 'give-destination',
+  swapOrder: undefined,
+  updateViaPoints: () => {},
+  searchPanelText: undefined,
+  sources: [],
+  targets: [],
+  filterResults: undefined,
+  onClear: undefined,
+  getAutoSuggestIcons: undefined,
+  refPoint: undefined,
+  addAnalyticsEvent: undefined,
+  disableAutoFocus: false,
+  isMobile: false,
+  handleViaPointLocationSelected: undefined,
+  originMobileLabel: null,
+  destinationMobileLabel: null,
+  modeSet: undefined,
+  colors: defaultColors,
+  fontWeights: {
+    medium: 500
+  },
+  showScroll: false,
+  onFocusChange: undefined,
+  isEmbedded: false,
+  showSwapControl: false,
+  showViapointControl: false,
+  showSlackControl: false
+});
+process.env.NODE_ENV !== "production" ? DTAutosuggestPanel.propTypes = {
+  appElement: PropTypes.string.isRequired,
+  origin: locationShape,
+  destination: locationShape,
+  originPlaceHolder: PropTypes.string,
+  destinationPlaceHolder: PropTypes.string,
+  viaPoints: PropTypes.arrayOf(locationShape),
+  updateViaPoints: PropTypes.func,
+  handleViaPointLocationSelected: PropTypes.func,
+  swapOrder: PropTypes.func,
+  searchPanelText: PropTypes.string,
+  searchContext: PropTypes.shape({
+    URL_PELIAS: PropTypes.string
+  }).isRequired,
+  onSelect: PropTypes.func.isRequired,
+  onClear: PropTypes.func,
+  addAnalyticsEvent: PropTypes.func,
+  lang: PropTypes.string.isRequired,
+  disableAutoFocus: PropTypes.bool,
+  sources: PropTypes.arrayOf(PropTypes.string),
+  targets: PropTypes.arrayOf(PropTypes.string),
+  filterResults: PropTypes.func,
+  isMobile: PropTypes.bool,
+  originMobileLabel: PropTypes.string,
+  destinationMobileLabel: PropTypes.string,
+  refPoint: locationShape,
+  modeSet: PropTypes.string,
+  colors: PropTypes.objectOf(PropTypes.string),
+  getAutoSuggestIcons: PropTypes.objectOf(PropTypes.func),
+  fontWeights: PropTypes.shape({
+    medium: PropTypes.number
+  }),
+  showScroll: PropTypes.bool,
+  onFocusChange: PropTypes.func,
+  isEmbedded: PropTypes.bool,
+  showSwapControl: PropTypes.bool,
+  showViapointControl: PropTypes.bool,
+  showSlackControl: PropTypes.bool,
+  t: PropTypes.func.isRequired
+} : void 0;
+const DTAutosuggestPanelWithTranslation = withTranslation()(DTAutosuggestPanel);
+var index = props => {
+  return /*#__PURE__*/React.createElement(I18nextProvider, {
+    i18n: i18n
+  }, /*#__PURE__*/React.createElement(DTAutosuggestPanelWithTranslation, props));
+};
+
+export { index as default, getEmptyViaPointPlaceHolder };
 //# sourceMappingURL=index.js.map