1"use strict";(self.webpackChunkone_web=self.webpackChunkone_web||[]).push([[8986],{8986:(e,i,t)=>{t.d(i,{Ay:()=>F,Q9:()=>z});var s=t(56599),a=t(71413),r=t(52706),o=t(30555),l=t(35135),n=t(5218),g=t(63822),c=t(22708),d=t(86094),p=t(98451),m=t(78707),u=t(70192),v=t(20732),h=t(10388),f=t(58959),b=t(80027),y=t(52850),w=(t(43520),Object.defineProperty),x=Object.getOwnPropertyDescriptor,$=(e,i,t,s)=>{for(var a,r=s>1?void 0:s?x(i,t):i,o=e.length-1;o>=0;o--)(a=e[o])&&(r=(s?a(i,t,r):a(r))||r);return s&&r&&w(i,t,r),r};let k=class extends a.WF{static get styles(){return[a.AH` 2 :host { 3 display: block; 4 margin-top: var(--gap); 5 } 6 7 .alert { 8 background-color: rgba(var(--danger), 0.2); 9 color: rgb(var(--danger)); 10 display: flex; 11 flex-direction: column; 12 gap: var(--gap); 13 padding: var(--gap); 14 border: 1px solid var(--danger); 15 border-radius: var(--radius); 16 } 17 18 .alert-header { 19 font-weight: bold; 20 } 21 22 .alert-message { 23 margin-bottom: 0; 24 margin-top: 0; 25 } 26 `]}render(){return this.header||this.message?a.qy` 27 <div class="alert"> 28 ${this.header?a.qy`<div class="alert-header"> 29 <span>${this.header}</span> 30 </div>`:a.s6} 31 ${this.message?a.qy`<p class="alert-message">${this.message}</p>`:a.s6} 32 </div> 33 `:a.s6}};$([(0,r.MZ)({type:String})],k.prototype,"header",2),$([(0,r.MZ)({type:String})],k.prototype,"message",2),k=$([(0,r.EM)("alert-error")],k);var S=t(51728),_=(t(53903),t(85564)),T=t(24634),A=t(5124),E=t(32701),C=Object.defineProperty,q=Object.getOwnPropertyDescriptor,M=(e,i,t,s)=>{for(var a,r=s>1?void 0:s?q(i,t):i,o=e.length-1;o>=0;o--)(a=e[o])&&(r=(s?a(i,t,r):a(r))||r);return s&&r&&C(i,t,r),r};const z=e=>{const i=h.M_.getState().app.activeLayers,t=[];
33if(Object.keys(i).forEach((e=>{i[e]&&t.push(e)})),0===t.length)return[];let s=[],a=!1;return t.forEach((e=>{b.j9.forEach((i=>{i.signType&&(a=!0),i.slug===e&&i.signType&&(s=[...s,...i.signType])}))})),e.filter((e=>!a||!((0,u.A7)(e)&&(0===s.length||e.signDisplayType&&!s.includes(e.signDisplayType)))))};class R extends((0,s.N)(h.M_)(f.o)){constructor(){super(...arguments),this.favoriteMessageExpanded=!1,this.loadingEV=!1,this.favoriteMessage="Saved successfully!",this.isFavoriteErrorMessage=!1,this.isLoggedIn=!1,this.results=[],this.tab="results",this.activeLayers={},this.useTabs=!!b.Ck?.active,this.focusFirstResult=()=>{const e=this.renderRoot.querySelector("card-media, card-result");e&&e.focusCard({preventScroll:!0})},this.dedup=!1}get resultCountText(){const e=b.Ck?.active?[...this.results]:"ev"===this.tab?this.results?.filter((e=>e?.__typename===y.Tgm.FuelingStation))??[]:this.results?.filter((e=>e?.__typename!==y.Tgm.FuelingStation))??[];return"directions"===this.tab?"":0===e.length?"no results":1===e.length?"1 result":`${e.length} results`}activated(){window.addEventListener(y.W3b,this.focusFirstResult)}deactivated(){window.removeEventListener(y.W3b,this.focusFirstResult)}hideMessage(){this.favoriteMessageExpanded=!1}static get styles(){return[E.A,A.A,T.A,_.A,a.AH` 34 card-media-carousel { 35 margin-bottom: 0; 36 } 37 38 .bg-light { 39 background-color: #fff; 40 } 41 42 .h-display_favorite-offset { 43 flex-grow: 1; 44 } 45 46 .title-favorite { 47 display: flex; 48 flex-direction: row; 49 align-items: center; 50 } 51 .favorite-tutorial-popper { 52 z-index: 6; 53 } 54 55 .card-result-list_title { 56 display: flex; 57 flex-direction: row; 58 align-items: center; 59 } 60 .directions-origin-color { 61 color: rgb(var(--directions-origin, var(--green-dark))); 62 } 63 .directions-destination-color { 64 color: rgb(var(--directions-destination, var(--red-dark))); 65 } 66 hr { 67 border-style: solid; 68 margin: 0; 69 } 70 .tab-nav { 71 background-color: #fff; 72 display: flex; 73 gap: var(--gap); 74 justify-content: center; 75 padding: var(--gap) 6px; 76 } 77 @media all and (max-width: 485px) { 78 .tab-nav { 79 flex-wrap: wrap; 80 } 81 } 82 .tab { 83 background-color: #fff; 84 border: rgb(var(--asbestos)) solid 1px; 85 border-radius: 2rem; 86 color: rgb(var(--darker)); 87 cursor: pointer; 88 display: flex; 89 fill: #fff; 90 font-size: var(--smaller); 91 font-weight: bold; 92 justify-content: center; 93 align-items: center; 94 padding: 0.25rem 0.5rem; 95 transition: all 0.25s ease-in-out 0s; 96 } 97 .tab svg { 98 border: rgb(var(--asbestos)) solid 3px; 99 border-radius: 2rem; 100 background-color: rgb(var(--darker)); 101 height: 16px; 102 margin-right: calc(var(--gap) / 2); 103 width: 16px; 104 } 105 .tab:hover { 106 box-shadow: var(--shadow-sm); 107 } 108 .tab[data-active] { 109 background-color: rgb(227, 235, 244); 110 border-color: rgb(203, 218, 234); 111 box-shadow: var(--shadow-sm); 112 color: rgb(24, 74, 150); 113 cursor: default; 114 pointer-events: none; 115 } 116 .tab[data-active] svg { 117 background-color: rgb(24, 74, 150); 118 border-color: rgb(24, 74, 150); 119 } 120 #svg-plug { 121 width: 22px; 122 height: 22px; 123 border-width: 0; 124 } 125 .llm-wrapper { 126 background: #fff; 127 padding: 15px; 128 } 129 .llm-bubble { 130 border: 1px solid var(--silver); 131 border-radius: 4px; 132 padding: 15px; 133 box-shadow: var(--shadow-md); 134 } 135 .llm-bubble h3 { 136 font-size: 1.2em; 137 } 138 .llm-icon { 139 width: 24px; 140 margin-right: 5px; 141 position: relative; 142 top: 2px; 143 } 144 `]}favoriteButton(e,i){const t=b.BQ.favorite.steps[y.QeQ.FAVORITE_ADD];return a.qy` 145 <popper-container 146 id="tutorial-popper" 147 position="${S.kl.RIGHT}" 148 ?is-visible="${this.tutorialStep===y.QeQ.FAVORITE_ADD&&i}" 149 class=${(0,o.H)({fadein:!0,"top-half_center":!0,"tutorial-popper":!0,"favorite-tutorial-popper":!0})} 150 > 151 <favorite-button 152 id="favorite-button" 153 slot="toggler" 154 ?expanded=${this.favoriteMessageExpanded} 155 ?isError=${this.isFavoriteErrorMessage} 156 favoriteType=${e} 157 favoriteId=${(0,l.J)(this.favoriteId)} 158 @hide=${this.hideMessage} 159 class=${(0,o.H)({"tutorial-spotlight":this.tutorialStep===y.QeQ.FAVORITE_ADD})} 160 > 161 <div slot="message"> 162 <p>${this.favoriteMessage}</p> 163 <button
164 @click=${this.showFavorites} 165 class="btn btn-white btn-rounded btn-margin-top btn-sm btn-padding-sm" 166 > 167 ${(0,g.A)("tray.favorites.view.label","View your favorites")} 168 </button> 169 </div> 170 171 ${"number"==typeof this.favoriteId?"Update":(0,g.A)("favorite","Favorite")} 172 </favorite-button> 173 ${t?a.qy` 174 <tutorial-bubble 175 id="tutorial-bubble-search" 176 position=${S.kl.RIGHT} 177 slug=${y.QeQ.FAVORITE_ADD} 178 style="--bubble-width: calc(100vw - var(--gap) * 2 - 70px)" 179 > 180 <h2 slot="title">${t.title}</h2> 181 <div slot="content">${(0,n._)(t.content)}</div> 182 </tutorial-bubble> 183 `:void 0} 184 </popper-container> 185 `}showFavorites(){this.hideMessage(),this.dispatchEvent(new CustomEvent("setshow-favorites"))}async tabToEV(){this.loadingEV=!0,h.M_.dispatch((0,d.Ay)(y.f2p.FUELING_STATIONS,!0)),this.tab="ev",h.M_.dispatch((0,c.P)("tray-tab-nav","ev",y.l_R.SEARCH)),await h.M_.dispatch((0,m.gX)()),this.loadingEV=!1}renderLLMSummary(){return this.llmSummary?a.qy` 186 <div class="llm-wrapper"> 187 <div class="llm-bubble"> 188 <h3> 189 <img src="/images/icon-ai-sparkle-black.svg" alt="AI Icon" role="presentation" class="llm-icon" /> 190 ${(0,g.A)("header.ai","Search Summary")}
190 191 <context-help-tooltip slot="prefix"> 192 <h3>What's This?</h3> 193 <p>${(0,n._)(b.d2.llm)}</p> 194 </context-help-tooltip> 195 </h3> 196 <p class="text-muted text-smaller">${this.llmSummary}<br></p> 197 <p class="text-smaller" style="margin-bottom: 5px;"><i>${(0,n._)(b.d2.llmDisclaimer),"This is an AI generated summary of events. AI can make mistakes. Consider checking the information."}</i></p> 198 <p class="text-muted text-smaller"></p> 199 </card-result> 200 </div> 201 </div> 202 `:a.qy``}renderTabNav(){return a.qy` 203 ${"results"===this.tab&&this.llmSummary?this.renderLLMSummary():a.qy``} 204 <hr /> 205 <div class="tab-nav "> 206 <button class="tab" ?data-active=${"results"===this.tab} @click=${()=>{h.M_.dispatch((0,c.P)("tray-tab-nav","results",y.l_R.SEARCH)),this.tab="results"}}> 207 <svg role="presentation" aria-hidden="true"> 208 <use href="${"/images/sprites.svg#alert-triangle"}"></use> 209 </svg> 210 Results 211 </button> 212 213 ${"route"===this.trayName?a.qy`<button 214 class="tab" 215 ?data-active=${"directions"===this.tab} 216 @click=${()=>{h.M_.dispatch((0,c.P)("tray-tab-nav","directions",y.l_R.SEARCH)),this.tab="directions"}} 217 > 218 <svg role="presentation" aria-hidden="true"> 219 <use href="${"/images/sprites.svg#directions"}"></use> 220 </svg> 221 Directions 222 </button>`:null} 223 ${b.Ck?.active?a.qy` 224 <button class="tab" ?data-active=${"ev"===this.tab} @click=${this.tabToEV}> 225 <svg id="svg-plug" role="presentation" aria-hidden="true"> 226 <use href="${"/images/sprites.svg#plug"}"></use> 227 </svg> 228 EV Charging 229 </button> 230 `:a.qy``} 231 ${b.hC.travelTimesAlwaysOn||"route"!==this.trayName?null:a.qy`<button class="tab" ?data-active=${"delays"===this.tab} @click=${()=>{h.M_.dispatch((0,c.P)("tray-tab-nav","delays",y.l_R.SEARCH));const e=h.M_.getState();if(!e.search.withTravelTimes){h.M_.dispatch({type:y.EMc,withTravelTimes:!0});const{originPlace:i,originChosen:t,destPlace:s,destChosen:a,directionsWaypts:r,mode:o}=e.search;i&&t&&s&&a&&h.M_.dispatch((0,p.Jw)(i.location,s.location,o,r))}this.tab="delays"}}> 232 <svg role="presentation" aria-hidden="true"> 233 <use href="${"/images/sprites.svg#schedule"}"></use> 234 </svg> 235 ${b.hC.travelTimeTabName||"Delays"} 236 </button>`} 237 </div> 238 `}renderTabEV(){const e=this.results?.filter((e=>e?.__typename===y.Tgm.FuelingStation))??[];return this.loadingEV?a.qy`<card-result loading></card-result>`:this.isLoading||0!==e.length?a.qy`<card-result-list style="margin-bottom: 0; border: none;" role="list"> 239 ${e.map((e=>a.qy`<tray-search-route-ev 240 role="listitem" 241 .feature=${e} 242 .canAddToRoute=${"route"===this.trayName} 243 ></tray-search-route-ev>`))} 244 </card-result-list>`:a.qy` 245 <card-result-list style="margin-bottom: 0; border: none;" role="list"> 246 <card-result 247 icon="${"/images/icon-search-fill-solid.svg"}" 248 style="border: none;" 249 role="listitem" 250 > 251 <h3>No results found.</h3> 252 <p class="text-muted text-smaller"> 253 We can't find any EV charging stations around your 254 ${this.searchType===y.nXf.SEARCH_PLACE?"selected area":this.searchType===y.nXf.DRAW_CUSTOM_AREA?"drawn area":"searched route"}. 255 </p> 256 </card-result> 257 </card-result-list> 258 `}renderTabResults(){let e=b.Ck?.active?this.results?.filter((e=>e?.__typename!==y.Tgm.FuelingStation))??[]:this.results;e=z(e);const i=e.filter((e=>!!((0,u.ju)(e)&&e.priority<=1)));return 0===e.length?a.qy` 259 <card-result-list style="margin-bottom: 0; border: none;" role="list"> 260 <card-result 261 icon="${"/images/icon-search-fill-solid.svg"}" 262 style="border: none;" 263 role="listitem" 264 > 265 <h3>No results found.</h3> 266 <p class="text-muted text-smaller"> 267 We can't find any critical road or weather events around your 268 ${this.searchType===y.nXf.SEARCH_PLACE?"selected area":this.searchType===y.nXf.DRAW_CUSTOM_AREA?"drawn area":"searched route"}. 269 </p> 270 </card-result> 271 </card-result-list> 272 `:a.qy` 273 ${i.length?this.renderCriticalEvents(i):a.qy``} 274 275 <card-result-list style="margin-bottom: 0; border: none;" role="list"> 276 ${i.length?a.qy` 277 <h2 slot="title" class="h-display heading-list-title"> 278 Other Information 279 <context-help-tooltip slot="prefix"> 280 <h3>What's This?</h3> 281 <p>${(0,n._)(b.d2.otherInformation)}</p> 282 </context-help-tooltip> 283 </h2> 284 `:a.qy``} 285 ${e.filter((e=>!((0,u.ju)(e)&&e.priority<=1))).map((e=>{const i=((0,u.ju)(e)&&e?.delayDescriptions?e?.delayDescriptions:[]).filter((e=>!e?.segmentDelays?.length)),t=(0,u.ju)(e)&&e?.quantities;return a.qy` 286 <card-result 287 role="listitem" 288 .result=${e} 289 uri="/${e?.uri}?hasNavigatedFromSearch=true" 290 hover-uri=${e?.uri} 291 thumb-url=${(0,l.J)(e?.views?.[0]?.url??void 0)} 292 thumb-alt=${(0,l.J)(e?.title??void 0)} 293 thumb-category=${(0,l.J)(e?.views&&e?.views[0]?e?.views[0].category:y.NaE.UNKNOWN)} 294 .quantities=${t||[]} 295 border-color=${(0,l.J)(e?.color??void 0)} 296 icon=${(0,l.J)(e?.icon??void 0)} 297 .delayDescriptions=${i} 298 .restAreaStatusSummary=${e?.restAreaStatusSummary} 299 @crc:card:mouseover=${v.A} 300 @crc:card:mouseout=${v.n} 301 > 302 <h3>${e?.title}</h3> 303 <p class="text-muted text-smaller">${e?.cityReference}</p> 304 </card-result> 305 `}))} 306 </card-result-list> 307 `}async fetchWithTimeout(e,i,t=5e3){const s=new AbortController,a=setTimeout((()=>s.abort()),t),r=await fetch(e,{...i,signal:s.signal});return clearTimeout(a),r}loadLLM(e,i){if(this.dedup)return;this.dedup=!0;const t=[],s=[];
307[...e,...i].forEach((e=>{if((0,u.ju)(e)&&!e.title?.toLowerCase().includes("seasonal")){const i=e.description?.replace(/<\/?[^>]+(>|$)/g,"");t.push(`${e.title} - ${i}`),s.push(e.tooltip||e.description.replace(/<\/?[^>]+(>|$)/g,""))}})),"route"!==this.trayName&&t.length>=1&&b.DR.endpoints.llmSummary&&!this.llmSummary&&b.DR.endpoints.llmSummary&&this.fetchWithTimeout(b.DR.endpoints.llmSummary,{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({events:t,tooltips:s,length:500})},1e3).then((e=>e.json())).then((e=>{e.success&&(this.llmSummary=`${e.llmSummary}`)})).catch((e=>{})).finally((()=>{this.dedup=!1}))}renderCriticalEvents(e){return a.qy` 308 <card-result-list style="margin-bottom: 0; border: none;" role="list"> 309 <h2 slot="title" class="h-display heading-list-title"> 310 Critical Information 311 <context-help-tooltip slot="prefix"> 312 <h3>What's This?</h3> 313 <p>${(0,n._)(b.d2.criticalInformation)}</p> 314 </context-help-tooltip> 315 </h2> 316 ${e.map((e=>{const i=((0,u.ju)(e)&&e?.delayDescriptions?e?.delayDescriptions:[]).filter((e=>!e?.segmentDelays?.length)),t=(0,u.ju)(e)&&e?.quantities;return a.qy` 317 <card-result 318 role="listitem" 319 .result=${e} 320 uri="/${e?.uri}?hasNavigatedFromSearch=true" 321 hover-uri=${e?.uri} 322 thumb-url=${(0,l.J)(e?.views?.[0]?.url??void 0)} 323 thumb-alt=${(0,l.J)(e?.title??void 0)} 324 thumb-category=${(0,l.J)(e?.views&&e?.views[0]?e?.views[0].category:y.NaE.UNKNOWN)} 325 .quantities=${t||[]} 326 border-color=${(0,l.J)(e?.color??void 0)} 327 icon=${(0,l.J)(e?.icon??void 0)} 328 .delayDescriptions=${i} 329 .restAreaStatusSummary=${e?.restAreaStatusSummary} 330 @crc:card:mouseover=${v.A} 331 @crc:card:mouseout=${v.n} 332 > 333 <h3>${e?.title}</h3> 334 <p class="text-muted text-smaller">${e?.cityReference}</p> 335 </card-result> 336 `}))} 337 </card-result-list> 338 `}firstUpdated(){if(!b.Ck?.active)return;const e=Object.entries(h.M_.getState().app.activeLayers).filter((([,e])=>e)).map((([e])=>e));1===e.length&&e[0]===y.f2p.FUELING_STATIONS&&(this.tab="ev")}}M([(0,r.MZ)({type:Boolean})],R.prototype,"favoriteMessageExpanded",2),M([(0,r.MZ)({type:Boolean})],R.prototype,"loadingEV",2),M([(0,r.MZ)({type:String})],R.prototype,"favoriteMessage",2),M([(0,r.MZ)({type:Boolean})],R.prototype,"isFavoriteErrorMessage",2),M([(0,r.MZ)({type:Number})],R.prototype,"favoriteId",2),M([(0,r.MZ)({type:String})],R.prototype,"llmSummary",2),M([(0,r.MZ)({type:String})],R.prototype,"tutorialStep",2),M([(0,r.MZ)({type:Boolean})],R.prototype,"isLoggedIn",2),M([(0,r.MZ)({type:Array})],R.prototype,"results",2),M([(0,r.MZ)({type:String})],R.prototype,"searchType",2),M([(0,r.MZ)({type:String})],R.prototype,"tab",2),M([(0,r.MZ)({type:Object})],R.prototype,"activeLayers",2);const F=R},43520:(e,i,t)=>
338{var s=t(25840),a=t(71413),r=t(52706),o=(t(82890),t(72357)),l=t(45157),n=t(35135),g=t(32701),c=t(24634),d=t(80027),p=t(56599),m=t(10388),u=t(98451),v=(t(62600),t(22708)),h=t(52850),f=t(20732),b=Object.defineProperty,y=Object.getOwnPropertyDescriptor,w=(e,i,t,s)=>{for(var a,r=s>1?void 0:s?y(i,t):i,o=e.length-1;o>=0;o--)(a=e[o])&&(r=(s?a(i,t,r):a(r))||r);return s&&r&&b(i,t,r),r};let x=class extends((0,p.N)(m.Ay)(a.WF)){constructor(){super(...arguments),this.canAddToRoute=!1,this.isWaypoint=!1,this.status="loading"}static get styles(){return[c.A,g.A,a.AH` 339 card-result { 340 border-bottom: rgb(var(--silver)) solid var(--border-width); 341 } 342 .add-btn { 343 background-color: ${(0,a.iz)(d.Ck?.tray.themeColor)}; 344 border-radius: 2rem; 345 color: rgb(var(--clouds)); 346 font-size: 0.8rem; 347 padding: calc(var(--gap) / 2) var(--gap); 348 transition: all ease-in-out 0.2s; 349 } 350 .add-btn:active, 351 .add-btn:focus, 352 .add-btn:hover { 353 text-decoration: underline; 354 box-shadow: var(--shadow-sm); 355 } 356 .add-btn[disabled] { 357 background-color: ${(0,a.iz)(d.Ck?.tray.themeColor)}50; 358 text-decoration: none !important; 359 box-shadow: none !important; 360 } 361 .btn-container { 362 background-color: #fff; 363 position: absolute; 364 margin-right: 1rem; 365 margin-top: 1rem; 366 right: 0; 367 top: 0; 368 z-index: 10; 369 } 370 .heading { 371 display: flex; 372 justify-content: space-between; 373 margin-bottom: var(--gap) !important; 374 max-width: 75%; 375 position: relative; 376 } 377 .heading-title { 378 font-weight: 600; 379 margin: 0; 380 padding: 0; 381 } 382 .heading-subtitle { 383 padding: 0; 384 } 385 .spinner-container { 386 align-items: center; 387 display: flex; 388 justify-content: center; 389 width: 100%; 390 } 391 .highlight-group { 392 display: flex; 393 flex-wrap: wrap; 394 gap: var(--gap); 395 } 396 .highlight-icon { 397 height: 1.5rem; 398 margin-right: calc(var(--gap) / 2); 399 width: 1.5rem; 400 } 401 .highlight { 402 align-items: center; 403 background-color: rgb(var(--clouds)); 404 border: rgb(var(--silver)) solid 1px; 405 border-radius: 4px; 406 color: rgb(var(--darker)); 407 display: flex; 408 font-size: var(--smaller); 409 font-weight: bold; 410 padding: calc(var(--gap) / 2); 411 } 412 `]}render(){return this.feature?a.qy` 413 <div style="position: relative;"> 414 <card-result 415 .result=${this.feature} 416 uri="/${this.feature.uri}?hasNavigatedFromSearch=true" 417 hover-uri=${this.feature.uri} 418 thumb-alt="${(0,n.J)(this.feature.title??void 0)}" 419 border-color="${(0,n.J)(this.feature.color??void 0)}" 420 icon="${(0,n.J)(this.feature.icon??void 0)}" 421 @crc:card:mouseover=${f.A} 422 @crc:card:mouseout=${f.n} 423 > 424 <div class="heading"> 425 <div> 426 <h3 class="heading-title">${this.feature.title}</h3> 427 <p class="heading-subtitle text-concrete"> 428 ${"loading"===this.status?a.qy`<spinning-loader></spinning-loader>`:null} 429 ${"error"===this.status?a.qy`<span class="text-error">Failed to load station details.</span>`:null} 430 ${"ready"===this.status?a.qy`${this.fuelingStation?.dataFields?.find((e=>"Address"===e.fieldName))?.displayValue}`:null} 431 </p> 432 </div> 433 </div> 434 ${this.renderHighlights()} 435 </card-result> 436 437 <div class="btn-container"> 438 ${"error"===this.status?a.qy`<button class="btn-retry" type="button" @click=${this.query}>Try Again</button>`:null} 439 ${"ready"===this.status&&this.canAddToRoute?a.qy` <button 440 class="add-btn btn" 441 type="button" 442 @click="${this.addToRoute}" 443 ?disabled="${this.isWaypoint}" 444 > 445 ${d.Ck?.route.routeButtonText} 446 </button>`:null} 447 </div> 448 </div> 449 `:null}firstUpdated(){this.query()}updated(e){if(super.updated(e),e.has("fuelingStation")){const e=this.fuelingStation?.features?.find((e=>"Point"===e?.geometry.type))?.geometry;if(!e?.coordinates)return;const[i,t]=e.coordinates;this.isWaypoint=m.Ay.getState().search.directionsWaypts?.some((e=>e.lat.toFixed(3)===t.toFixed(3)&&e.lng.toFixed(3)===i.toFixed(3)))??!1}}stateChanged(e){const i=this.fuelingStation?.features?.find((e=>"Point"===e?.geometry.type))?.geometry;if(!i?.coordinates)return;const[t,s]=i.coordinates;this.isWaypoint=e.search.directionsWaypts?.some((e=>e.lat.toFixed(3)===s.toFixed(3)&&e.lng.toFixed(3)===t.toFixed(3)))??!1}addToRoute(e){e.preventDefault();const i=this.fuelingStation?.features?.find((e=>"Point"===e?.geometry.type))?.geometry,t=this.fuelingStation?.features?.[0]?.id??this.fuelingStation?.uri;if(m.Ay.dispatch((0,v.P)("click-add-to-route",t,h.l_R.EV_EVENT)),i){const[e,t]=i.coordinates,s={lat:t,lng:e};m.Ay.dispatch((0,u.H)(s))}}renderHighlights(){if("ready"!==this.status||!this.fuelingStation)return null;const e=[...this.fuelingStation.connectors];e.sort();const i=[{icon:null,text:1===this.fuelingStation.totalChargers?"1 Charger":`${this.fuelingStation.totalChargers||"No"} Chargers`},...e.map((e=>({icon:{311:"/images/icon-chat-bubble.svg","alert-default":"/images/icon-alert-fill-solid.svg","alert-triangle":"/images/icon-alert-triangle.svg","alert-triangle-white":"/images/icon-alert-triangle-white.svg","alert-white":"/images/icon-alert-fill-solid-white.svg","announcement-solid":"/images/icon-notification-speaker-fill-solid.svg","area-fill-solid":"/images/icon-area-fill-solid.svg","area-fill-solid-alerts":"/images/icon-area-notification-fill-solid.svg","arrow-left":"/images/sprites.svg#arrow-left","arrow-left-double":"/images/sprites.svg#arrow-left-double","arrow-left-single":"/images/sprites.svg#arrow-left-single","arrow-down":"/images/sprites.svg#arrow-down","arrow-right":"/images/sprites.svg#arrow-right","arrow-right-double":"/images/sprites.svg#arrow-right-double","arrow-right-single":"/images/sprites.svg#arrow-right-single","camera-add-favorite-prompt":"/images/icon-camera-add-favorites.svg","camera-broken":"/images/icon-camera-closed-fill-solid.svg","camera-broken-selected":"/images/icon-camera-closed-active-fill-solid.svg","camera-default":"/images/icon-camera-fill-solid.svg","camera-favorite":"/images/icon-camera-favorite-fill-solid.svg","camera-favorite-inverted":"/images/icon-camera-favorite-fill-solid.svg","camera-hot":"/images/icon-camera-hot-fill-solid.svg","camera-hot-inverted":"/images/icon-camera-inverse-fill-solid.svg","camera-modal-unavailable":"/images/icon-camera-closed-fill-solid-padded-modal.svg","camera-unavailable":"/images/icon-camera-closed-fill-solid-padded.svg","camera-unavailable-fallback":"/images/icon-camera-closed-fill-solid-padded.png","camera-video-unavailable":"/images/video_unavailable.svg","camera-inactive-feed":"/images/inactive_camera_feed.svg","camera-video":"/images/icon-video-fill-solid.svg","cardinal-east":"/images/icon-cardinal-east.svg","cardinal-north":"/images/icon-cardinal-north.svg","cardinal-northeast":"/images/icon-cardinal-northeast.svg","cardinal-northwest":"/images/icon-cardinal-northwest.svg","cardinal-south":"/images/icon-cardinal-south.svg","cardinal-southeast":"/images/icon-cardinal-southeast.svg","cardinal-southwest":"/images/icon-cardinal-southwest.svg","cardinal-west":"/images/icon-cardinal-west.svg","close-btn":"/images/sprites.svg#close-btn","cluster-cameras":"/images/clusters/icon-cluster-camera-solid.svg","cluster-events":"/images/clusters/icon-cluster-solid.svg","content-favorite":"/images/icon-favorite-fill-solid.svg","content-favorite-selected":"/images/icon-favorite-fill-solid-selected.svg","favorite-place":"/images/icon-pin-fill-solid.svg","favorite-place-alerts":"/images/icon-pin-notification-fill-solid.svg","favorite-route":"/images/icon-car-fill-solid.svg","favorite-route-alerts":"/images/icon-car-notification-fill-solid.svg",construction:"/images/icon-construction-circle-fill-solid.svg","construction-shazam":"/images/icon-construction-circle-fill-solid-shazam.svg","dot-compact":"/images/mn-dot-compact.png","dot-compact-inverse":"/images/mn-dot-compact-inverse.png","dot-default":"/images/mn-dot.png","dot-default-inverse":"/images/mn-dot-inverse.png",edit:"/images/icon-edit-fill-solid.svg",mail:"/images/icon-mail-fill-solid-round.svg","email-grey-square":"/images/icon-mail-fill-solid.svg","external-camera-link":"/images/icon-external-link-fill-solid.svg","express-lane":"/images/ezpass/icon-express-lane-fill-solid.svg","external-link":"/images/icon-external-link-outline.svg","facebook-grey-square":"/images/icon-facebook-fill-solid.svg","failure-triangle":"/images/icon-notice-fill-solid.svg","feedback-grey-square":"/images/icon-feedback-fill-solid.svg","fueling-station-dot":"/images/fueling-stations/icon-ev-small-fill.svg","fueling-station-plug":"/images/fueling-stations/icon-ev-fill.svg","fueling-station-connector-chademo":"/images/fueling-stations/icon-ev-chademo-fill.svg","fueling-station-connector-j1772":"/images/fueling-stations/icon-ev-j1772-fill.svg","fueling-station-connector-j1772combo":"/images/fueling-stations/icon-ev-ccs-fill.svg","fueling-station-connector-nema1450":"/images/fueling-stations/icon-ev-nema1450-fill.svg","fueling-station-connector-nema515":"/images/fueling-stations/icon-ev-nema515-fill.svg","fueling-station-connector-nema520":"/images/fueling-stations/icon-ev-nema520-fill.svg","fueling-station-connector-tesla":"/images/fueling-stations/icon-ev-tesla-fill.svg",globe:"/images/sprites.svg#globe","globe-alt":"/images/sprites.svg#globe-alt","google-closure":"/images/icon-bar-google-closure-fill-solid.svg","icon-active-indicator":"/images/icon-active-indicator.svg","icon-hovering-indicator":"/images/icon-hovering-indicator.svg","icon-hovering-indicator-hot-camera":"/images/icon-hovering-indicator.svg","inactive-closure":"/images/inactive/tg_closure_routine_inactive.svg","inactive-construction":"/images/inactive/tg_construction_routine_inactive.svg","inactive-lane-closure":"/images/inactive/tg_lane_closure_routine_inactive.svg","inactive-restr
449ictions":"/images/inactive/tg_restrictions_routine_inactive.svg","inactive-night-construction":"/images/inactive/tg_construction_routine_inactive_nighttime.svg","info-exclamation":"/images/icon-info-fill-solid.svg","info-question-mark":"/images/icon-whats-fill-solid.svg","info-question-mark-white":"/images/icon-info-fill-solid-white.svg","info-question-mark-sprite":"/images/sprites.svg#help","info-round":"/images/icon-info-fill-solid-round.svg","layer-commercial-vehicle":"/images/icon-truck-fill.svg","list-view":"/images/sprites.svg#list-view",loading:"/images/loading.svg","map-feature-cluster":"/images/icon-cluster-solid.svg","maximize-arrow":"/images/sprites.svg#maximize-arrow","metro-traffic":"/images/sprites.svg#metro-traffic","minimize-arrow":"/images/sprites.svg#minimize-arrow",pandemic:"/images/pandemic.svg","parking-ev":"/images/icon-parking-ev-solid.svg","parking-l":"/images/icon-parking-l-solid.svg","parking-p":"/images/icon-parking-p-solid.svg","pin-a-fill":"/images/icon-pin-a-fill.svg","pin-a-padded":"/images/icon-pin-a-padded.svg","pin-b-fill":"/images/icon-pin-b-fill.svg","pin-b-padded":"/images/icon-pin-b-padded.svg","pin-default":"/images/icon-pin-fill.svg","play-button":"/images/sprites.svg#play","plow-applying-liquid":"/images/icon-plow-liquids-fill-solid.svg","plow-applying-mixed":"/images/icon-plow-mixed-fill-solid.svg","plow-applying-none":"/images/icon-plow-none-fill-solid.svg","plow-applying-solid":"/images/icon-plow-solids-fill-solid.svg","plow-camera":"/images/icon-camera-plow-fill-solid.svg","plow-default":"/images/icon-camera-plow-fill-solid.svg","plow-location-dot":"/images/plow-location-dot.svg","print-grey-square":"/images/icon-printer-fill-solid.svg","rest-area-closed":"/images/icon-restarea-closed-fill-solid.svg","rest-area-p-high-availability":"/images/icon-restarea-p-open-fill-solid.svg","rest-area-p-low-availability":"/images/icon-restarea-p-low-fill-solid.svg","rest-area-p-medium-availability":"/images/icon-restarea-p-med-fill-solid.svg","rest-area-p-no-realtime":"/images/icon-restarea-p-no-data-fill-solid.svg","rest-area-p-stateless":"/images/icon-restarea-p-stateless-fill-solid.svg","rest-area-p-trending-high-availability":"/images/icon-restarea-p-trending-open-fill-solid.svg","rest-area-p-trending-low-availability":"/images/icon-restarea-p-trending-low-fill-solid.svg","rest-area-p-trending-medium-availability":"/images/icon-restarea-p-trending-med-fill-solid.svg","rest-area-r-high-availability":"/images/icon-restarea-r-open-fill.svg","rest-area-r-low-availability":"/images/icon-restarea-r-low-fill.svg","rest-area-r-medium-availability":"/images/icon-restarea-r-med-fill.svg","rest-area-r-no-realtime":"/images/icon-restarea-r-no-data-fill-solid.svg","rest-area-r-stateless":"/images/icon-restarea-r-stateless-fill-solid.svg","rest-area-r-trending-high-availability":"/images/icon-restarea-r-trending-open-fill.svg","rest-area-r-trending-low-availability":"/images/icon-restarea-r-trending-low-fill.svg","rest-area-r-trending-medium-availability":"/images/icon-restarea-r-trending-med-fill.svg","rest-area-t-high-availability":"/images/icon-restarea-t-open-fill-solid.svg","rest-area-t-low-availability":"/images/icon-restarea-t-low-fill-solid.svg","rest-area-t-medium-availability":"/images/icon-restarea-t-med-fill-solid.svg","rest-area-t-no-realtime":"/images/icon-restarea-t-no-data-fill-solid.svg","rest-area-t-stateless":"/images/icon-restarea-t-stateless-fill-solid.svg","rest-area-t-trending-high-availability":"/images/icon-restarea-t-trending-open-fill-solid.svg","rest-area-t-trending-low-availability":"/images/icon-restarea-t-trending-low-fill-solid.svg","rest-area-t-trending-medium-availability":"/images/icon-restarea-t-trending-med-fill-solid.svg","roadway-fill":"/images/icon-roadway-fill.svg","road-condition-normal":"/images/icon-snowflake-seasonal-fill-solid.svg","road-report-axle-width-limit":"/images/icon-axle-width-fill-solid.svg","road-report-closure-normal":"/images/icon-closure-fill-solid.svg","road-report-closure-critical":"/images/icon-closure-fill-solid.svg","road-report-closure-normal-delay":"/images/icon-closure-fill-solid-delay.svg","road-report-closure-critical-delay":"/images/icon-closure-fill-solid-delay-shazam.svg","road-report-coming-soon":"/images/icon-scheduled-event-31-fill-solid.svg","road-report-construction":"/images/icon-construction-fill-solid.svg","road-report-crash":"/images/icon-accident-fill-solid.svg","road-report-critical-disruption":"/images/icon-shazam-fill.svg","road-report-danger":"/images/icon-danger-fill-solid.svg","road-report-delay-disruption":"/images/icon-delay-shazam-fill.svg","road-report-flooding":"/images/icon-flooding-fill-solid.svg","road-report-information":"/images/icon-info-fill-solid-round.svg","road-report-lane-closure":"/images/tg_lane_closure_routine.svg","road-report-ramp-impact":"/images/icon-ramp-impact-fill-solid.svg","road-report-ramp-impact-inactive":"/images/inactive/tg_ramp_impact_routine_inactive.svg","road-report-lane-closure-normal":"/images/icon-lane-closure-fill-solid.svg","road-report-major-construction":"/images/tg_major_construction_routine.svg","road-report-mountain-pass":"/images/icon-mountains-fill-solid-purple.
449svg","road-report-mountain-pass-alert-white":"/images/icon-mountains-alert-fill-white.svg","road-report-nighttime-construction":"/images/icon-stateless-nighttime-fill-solid.svg","road-report-pandemic-normal":"/images/icon-virus-fill-solid.svg","road-report-pandemic-critical":"/images/icon-virus-fill-solid-shazam.svg","road-report-restriction":"/images/icon-restrictions-fill-solid.svg","road-report-restriction-normal":"/images/icon-restrictions-fill-solid.svg","road-report-restriction-critical":"/images/icon-restrictions-fill-solid-shazam.svg","road-report-restriction-normal-delay":"/images/icon-restrictions-fill-solid-delay.svg","road-report-restriction-critical-delay":"/images/icon-restrictions-fill-solid-delay-shazam.svg","road-report-roadwork-normal":"/images/icon-construction-fill-solid.svg","road-report-roadwork-critical":"/images/icon-construction-fill-solid-shazam.svg","road-report-roadwork-normal-delay":"/images/icon-construction-fill-solid-delay.svg","road-report-roadwork-critical-delay":"/images/icon-construction-fill-solid-delay-shazam.svg","road-report-tow-prohibited":"/images/icon-towban-fill-solid.svg","road-report-traffic-delay":"/images/icon-delay-fill.svg","road-report-truck-ramp":"/images/icon-truck-ramp-fill-solid.svg","road-report-weigh-station":"/images/icon-weighstation-fill-solid.svg","roundabout-default":"/images/icon-roundabout-fill-solid.svg","search-default":"/images/icon-search-fill-solid.svg","sign-active":"/images/icon-active-sign-fill-solid.svg","sign-active-travel-time":"/images/icon-travel-time-fill-solid.svg","sign-active-tpim":"/images/icon-sign-parking-active-fill-solid.svg","sign-active-vsl":"/images/icon-vsl-active-fill-solid.svg","sign-posted-weight":"/images/icon-weight-restriction-fill-solid.svg","sign-default":"/images/icon-sign-fill-solid.svg","sign-inactive":"/images/icon-sign-fill-solid - grey.svg","sign-no-data":"/images/icon-sign-no-data-fill-solid.svg","sign-unavailable":"/images/icon-sign-broken-fill-solid.svg","sign-unavailable-fallback":"/images/icon-sign-broken-fill-solid-fallback.png","sign-overlay-not-found":"/images/overlay-signs/notFound.png","sprite-alert-triangle":"/images/sprites.svg#alert-triangle","sprite-area-fill":"/images/sprites.svg#area-fill","sprite-draw-area":"/images/sprites.svg#draw-area","sprite-arrow-left-lg":"/images/sprites.svg#arrow-left-lg","sprite-arrow-right-lg":"/images/sprites.svg#arrow-right-lg","sprite-bike":"/images/sprites.svg#bike","sprite-bus":"/images/sprites.svg#bus","sprite-camera":"/images/sprites.svg#camera","sprite-camera-fill":"/images/sprites.svg#camera-fill","sprite-camera-hot":"/images/sprites.svg#hot-camera","sprite-close":"/images/sprites.svg#close","sprite-directions":"/images/sprites.svg#directions","sprite-drive":"/images/sprites.svg#drive","sprite-feedback-confirmed":"/images/sprites.svg#confirm-check","sprite-feedback-wrong":"/images/sprites.svg#wrong-x","sprite-hamburger-menu":"/images/sprites.svg#hamburger","sprite-home":"/images/sprites.svg#home","sprite-info-question-mark":"/images/sprites.svg#help","sprite-layers":"/images/sprites.svg#layers","sprite-layers-collapse":"/images/sprites.svg#layers-collapse","sprite-layers-expand":"/images/sprites.svg#layers-expand","sprite-legend":"/images/sprites.svg#legend","sprite-legend-collapse":"/images/sprites.svg#legend-collapse","sprite-legend-expand":"/images/sprites.svg#legend-expand","sprite-magnifying-glass":"/images/sprites.svg#magnifying-glass","sprite-map-pin":"/images/sprites.svg#map-pin","sprite-mic-magic-fill":"/images/sprites.svg#mic-magic-fill","sprite-mic-magic-outline":"/images/sprites.svg#mic-magic-outline","sprite-mic-off-fill":"/images/sprites.svg#mic-off-fill","sprite-mic-off-outline":"/images/sprites.svg#mic-off-outline","sprite-mic-on-fill":"/images/sprites.svg#mic-on-fill","sprite-mic-on-outline":"/images/sprites.svg#mic-on-outline","sprite-minus":"/images/sprites.svg#minus","sprite-my-location":"/images/sprites.svg#my-location","sprite-notifications":"/images/sprites.svg#notifications","sprite-other-state-info":"/images/sprites.svg#info","sprite-pause":"/images/sprites.svg#pause","sprite-pin-a":"/images/sprites.svg#pin-a","sprite-pin-b":"/images/sprites.svg#pin-b","sprite-play":"/images/sprites.svg#play","sprite-plug":"/images/sprites.svg#plug","sprite-plus":"/images/sprites.svg#plus","sprite-refresh":"/images/sprites.svg#refresh","sprite-rest-area":"/images/sprites.svg#rest-area","sprite-reverse":"/images/sprites.svg#reverse","sprite-roadway":"/images/sprites.svg#roadway","sprite-schedule":"/images/sprites.svg#schedule","sprite-station-alert":"/images/sprites.svg#station-alert","sprite-station-normal":"/images/sprites.svg#station-normal","sprite-traffic":"/images/sprites.svg#traffic","sprite-trashcan":"/images/sprites.svg#trashcan","sprite-trucker":"/images/sprites.svg#trucker","sprite-up-arrow":"/images/sprites.svg#arrow-up","sprite-user":"/images/sprites.svg#user","sprite-walk":"/images/sprites.svg#walk","sprite-weather":"/images/sprites.svg#weather","sprite-winter":"/images/sprites.svg#winter","traffic-speed-dark-bg":"/images/icon-speedtable-fill-dark-bg.svg","traffic-speed-light-bg":"/images/icon-speedtable-fill-light-bg.svg","twitter-grey-square":"/images/icon-twitter-fill-solid.svg","video-default":"/images/icon-camera-fill-solid.svg","video-favorite":"/images/icon-camera-favorite-fill-solid.svg","video-hot":"/images/icon-camera-hot-fill-solid.svg","waze-jams":"/images/icon-waze-jam-moderate-traffic-fill-solid.svg","waze-jams-bumper":"/images/icon-wazeJams-heavy-traffic-fill-solid.svg","waze-accident":"/images/icon-waze-warning-fill.svg","waze-closure":"/images/icon-waze-closure-fill-solid.svg","waze-construction":"/images/icon-waze-construction-fill-solid.svg","waze-hazard":"/images/icon-waze-hazard-fill-solid.svg","waze-heavy-traffic":"/images/icon-wazeJams-heavy-traffic-fill-solid.svg","waze-mod-traffic":"/images/icon-waze-jam-moderate-traffic-fill-solid.svg","waze-weather-reports":"/images/icon-waze-storm-fill-solid.svg","weather-radar-legend":"/images/weather-radar-legend.svg","weather-station-alert":"/images/icon-rwis-alert-fill-solid.svg","weather-station-alert-freezing":"/images/icon-rwis-alert-freezing-fill-solid.svg","weather-station-alert-freezing-white":"/images/icon-rwis-alert-freezing-fill-solid-white.svg","weather-station-alert-white":"/images/icon-rwis-alert-inverse-fill-solid.svg","weather-station-default":"/images/icon-rwis-fill-solid.svg","weather-station-freezing":"/images/icon-rwis-frozen-fill-solid.svg","weather-station-no-data":"/images/icon-rwis-nodata-fill-solid.svg","weather-warning-default":"/images/tg_weather_routine.svg","weather-warning-critical":"/images/tg_weather_critical.svg","winter-driving-legend-visibility-really-reduced":"/images/icon-bar-visibility-greatly-reduced-fill-solid.svg","winter-driving-legend-visibiliy-reduced":"/images/icon-bar-visibility-reduced-solid.svg","winter-driving-completely-covered":"/images/icon-snowflake-completely-fill-solid.svg","winter-driving-not-advised":"/images/icon-snowflake-not-advised-fill.svg","winter-driving-partially-covered":"/images/icon-snowflake-partially-fill-solid.svg","winter-driving-road-closed":"/images/icon-snowflake-impassable-fill.svg","winter-driving-seasonal":"/images/icon-snowflake-fill.svg","winter-driving-legend-completely-covered":"/images/icon-bar-completely-fill-solid.svg","winter-driving-legend-not-advised":"/images/icon-bar-advised-fill-solid.svg","winter-driving-legend-partially-covered":"/images/icon-bar-partially-fill-solid.svg","winter-driving-legend-road-closed":"/images/icon-bar-roadclosure-fill-solid.svg","winter-driving-legend-seasonal":"/images/icon-bar-fast-solid-fill.svg","wildfire-active":"/images/icon-wildfire-active-fill-solid.svg","wildfire-inactive":"/images/icon-wildfire-inactive-fill-solid.svg","floodgate-regional":"/images/icon-regional-alert-fill-solid.svg"}[`fueling-station-connector-${e.toLowerCase()}`],text:e})))];return a.qy`<div class="highlight-group"> 450 ${i.map((({icon:e,text:i})=>a.qy` 451 <span class="highlight"> 452 ${e?a.qy`<img class="highlight-icon" alt="" src="${e}" role="presentation" />`:null} 453 ${i} 454 </span> 455 `))} 456 </div>`}async query(){try{this.status="loading";const e=this.feature?.uri?.split("/").slice(-1)[0];if(e){const i=(0,s.gV)(e),t=window.sessionStorage.getItem(i);if(null!=t)this.fuelingStation=JSON.parse(t),this.status="ready";else{const t=await(0,o.A)((0,l.Jt)(e));t?.fuelingStationQuery?.fuelingStation?(this.status="ready",this.fuelingStation=t.fuelingStationQuery.fuelingStation,window.sessionStorage.setItem(i,JSON.stringify(this.fuelingStation))):this.status="error"}}}catch(e){this.status="error",console.error("Failed to load fueling station details",e)}}};w([(0,r.MZ)({type:Boolean})],x.prototype,"canAddToRoute",2),w([(0,r.MZ)({type:Boolean})],x.prototype,"isWaypoint",2),w([(0,r.MZ)({type:Object})],x.prototype,"feature",2),w([(0,r.MZ)({type:Object})],x.prototype,"fuelingStation",2),w([(0,r.MZ)({type:String})],x.prototype,"status",2),x=w([(0,r.EM)("tray-search-route-ev")],x)},53903:(e,i,t)=>{var s=t(71413),a=t(52706),r=t(30555),o=t(56599),l=t(38155),n=t(80027),g=t(66003),c=t(21379),d=t(52850),p=t(10388),m=t(24634),u=t(32701),v=t(51728),h=Object.defineProperty,f=Object.getOwnPropertyDescriptor,b=(e,i,t,s)=>{for(var a,r=s>1?void 0:s?f(i,t):i,o=e.length-1;o>=0;o--)(a=e[o])&&(r=(s?a(i,t,r):a(r))||r);return s&&r&&h(i,t,r),r};let y=class extends((0,o.N)(p.Ay)(s.WF)){constructor(){super(...arguments),this.active=!0,this.showCloseButton=!0,this.position=v.kl.BOTTOM,this.tutorialType=void 0,this.escKeyPressCallback=this.escKeyPress.bind(this),this.focusLoopDivRef=(0,l._)(),this.nextButtonRef=(0,l._)()}static get styles(){return[u.A,m.A,s.AH` 457 :host { 458 --bg-color: var(--dark-blue-a11y); 459 --fg-color: 255, 255, 255; 460 --bubble-width: calc(100vw - var(--scrollbar-width) - var(--gap) * 2); 461 --bubble-max-width: 32rem; 462 /* needed when placed in header or map-controls */ 463 pointer-events: all; 464 font-size: 1rem; 465 } 466 467 @media all and (max-width: 1080px) { 468 :host { 469 overflow: scroll; 470 display: inline-block; 471 max-height: 50vh; 472 } 473 } 474 475 @media all and (max-width: 320px) { 476 :host { 477 overflow: scroll !important; 478 top: auto !important; 479 max-height: calc(100vh - 150px); 480 position: absolute; 481 } 482 :host#tutorial-feedback { 483 left: -100px !important; 484 } 485 } 486 487 #bubble-container { 488 position: relative; 489 z-index: 2; 490 width: var(--bubble-width); 491 max-width: var(--bubble-max-width); 492 493 border-radius: var(--border-radius); 494 box-shadow: var(--shadow-md); 495 background-color: rgb(var(--bg-color)); 496 } 497 498 #slotted-content { 499 padding: 1.5rem 1.5rem 1rem; 500 color: rgb(var(--fg-color)); 501 } 502 503 #close-button { 504 position: absolute; 505 top: 0px; 506 right: 0px; 507 fill: rgb(var(--fg-color)); 508 } 509 510 #close-button:focus { 511 background-color: rgba(var(--concrete), 0.3); 512 } 513 514 #next-fields { 515 color: rgb(var(--fg-color)); 516 background-color: rgb(var(--darker-blue-a11y)); 517 border-bottom-left-radius: var(--border-radius); 518 border-bottom-right-radius: var(--border-radius); 519 padding: 1rem 1.5rem; 520 display: flex; 521 justify-content: flex-start;
522 align-items: center; 523 flex-wrap: wrap; 524 } 525 526 .focus-dark:focus { 527 outline: black solid 0.25rem; 528 } 529 530 #tutorial-select:focus { 531 outline: black solid 0.25rem; 532 } 533 534 @media (min-width: 768px) { 535 #next-fields { 536 flex-wrap: nowrap; 537 } 538 } 539 540 #next-fields.final-step { 541 /* padding-top: 1.5rem; */ 542 justify-content: center; 543 } 544 545 #next-fields div { 546 flex: 1 1 auto; 547 margin-right: 0.5rem; 548 } 549 550 #next-fields label { 551 margin-right: 0.5rem; 552 font-size: var(--smaller); 553 } 554 555 #next-fields select { 556 font-family: inherit; 557 min-height: calc(var(--smaller) * 1.5 + 1rem); 558 font-size: var(--smaller); 559 padding: 0.5rem; 560 color: inherit; 561 background: rgb(var(--bg-color)); 562 border-radius: var(--border-radius); 563 border: 1px solid rgba(255, 255, 255, 0.6); 564 cursor: pointer; 565 } 566 567 @supports (-moz-appearance: none) { 568 /* dropdown button workaround for firefox */ 569 #next-fields select { 570 -moz-appearance: none; 571 background: url('/images/down_triangle-white.svg') no-repeat right 55%; 572 padding-right: 2rem; 573 } 574 } 575 576 #pointer-events-blocker { 577 position: fixed; 578 z-index: 1; 579 width: 200vw; 580 height: 200vh; 581 transform: translate(-50%, -50%); 582 cursor: auto; 583 background: transparent; 584 } 585 `]}render(){return s.qy` 586 <div 587 id="bubble-container" 588 role="dialog" 589 aria-modal="true" 590 aria-labelledby="bubble-title" 591 aria-describedby="bubble-content" 592 tabindex="-1" 593 > 594 ${this.showCloseButton?s.qy` 595 <button 596 id="close-button" 597 class="btn" 598 title="close this tutorial" 599 aria-label="close this tutorial" 600 @click="${this.closeButtonClick}" 601 > 602 <svg class="btn_icon" width="36" height="36" aria-hidden="true"> 603 <use href="${"/images/sprites.svg#close"}"></use> 604 </svg> 605 </button> 606 `:""} 607 <div id="slotted-content"> 608 <slot tabindex="0" id="bubble-title" name="title"></slot> 609 <slot tabindex="0" id="bubble-content" name="content"></slot> 610 </div> 611 <div 612 id="next-fields" 613 class=${(0,r.H)({"final-step":!!this.isFinalStep})} 614 > 615 ${this.footerNextFields()} 616 </div> 617 </div> 618 <div ${(0,l.K)(this.focusLoopDivRef)} tabindex="0"></div> 619 <div id="pointer-events-blocker" @click=${this.closeButtonClick}></div> 620 `}footerNextFields(){const e=this.tutorialType===d.S9j.WELCOME?n.BQ.welcome.steps:n.BQ.favorite.steps;return s.qy` 621 <slot name="footer"> 622 ${this.isFinalStep?"":s.qy` 623 <div> 624 <label for="tutorial-select">Tell me next about:</label> 625 <select id="tutorial-select" @change="${this.onStepChange}"> 626 ${Object.entries(e).map((([e,i])=>e&&i?s.qy`${this.slug===e?s.qy``:s.qy` 627 <option 628 value="${e}" 629 name="${i.label}" 630 ?selected=${this.isFinalStep&&this.slug===e||!this.isFinalStep&&this.nextSlug===e} 631 > 632 ${i.label} 633 </option> 634 `} `:void 0))} 635 </select> 636 </div> 637 `} 638 ${!this.nextSlug||this.slug===this.nextSlug&&this.isFinalStep?s.qy` 639 <button 640 ${(0,l.K)(this.nextButtonRef)} 641 id="done-button" 642 class="btn btn-white btn-rounded btn-sm btn-padding-sm focus-dark" 643 @click="${this.closeButtonClick}" 644 title="Done, close tutorial" 645 aria-label="Done, close tutorial" 646 > 647 <div aria-hidden="true">DONE</div> 648 </button> 649 `:s.qy` 650 <button 651 ${(0,l.K)(this.nextButtonRef)} 652 id="next-button" 653 class="btn btn-white btn-rounded btn-sm btn-padding-sm focus-dark" 654 @click="${this.nextButtonClick}" 655 title="next tip" 656 aria-label="next tip" 657 > 658 <slot name="next-button-label" aria-hidden="true">NEXT TIP</slot> 659 </button> 660 `} 661 </slot> 662 `}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.escKeyPressCallback);const e=()=>{this.focusLoopDivRef.value?this.focusLoopDivRef.value.addEventListener("focus",(()=>this.focus())):setTimeout(e,1e3)};e(),this.updateComplete.then((()=>{this.renderRoot?.querySelector("#bubble-container")?.focus()}))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.escKeyPressCallback)}stateChanged(e){this.tutorialType=e.app.tutorialType,void 0===e.app.tutorialStep||this.active&&this.slug&&this.slug!==e.app.tutorialStep?this.active=!1:!this.active&&this.slug&&this.slug===e.app.tutorialStep&&(this.active=!0),this.setAttribute("tabindex",this.active?"0":"-1");const{modalView:i}=e.modal,t=i&&i!==d.Gqw.TOUR;this.active&&!t&&this.updateComplete.then((()=>{setTimeout((()=>{this.renderRoot.querySelector("#bubble-container")?.focus()}),300)}))}willUpdate(e){if(this.slug&&(e.has("slug")||e.has("active")||e.has("tutorialType"))){const e=this.tutorialType===d.S9j.WELCOME?Object.keys(n.BQ.welcome.steps):Object.keys(n.BQ.favorite.steps),i=e.findIndex((e=>e===this.slug));this.isFinalStep=i===e.length-1,this.nextSlug=this.isFinalStep?void 0:e[i+1]}}onStepChange(e){this.nextSlug=e.target.value}async nextButtonClick(){if(!this.nextSlug||!this.tutorialType)throw new Error("Invalid tutorial state.");const e=this.tutorialType===d.S9j.WELCOME?n.BQ.welcome.steps[this.nextSlug]:n.BQ.favorite.steps[this.nextSlug];if(!e)throw new Error("Invalid tutorial state.");await p.Ay.dispatch((0,c.z)(`${d.Gqw.TOUR}/${this.tutorialType}/${e.slug}`))}closeButtonClick(){if(!this.tutorialType)throw new Error("Invalid tutorial state.");p.Ay.dispatch((0,g.RB)(this.tutorialType,void 0)),p.Ay.dispatch((0,c.z)(null))}escKeyPress(e){this.active&&"Escape"===e.code&&this.closeButtonClick()}};b([(0,a.MZ)({type:String,reflect:!0})],y.prototype,"slug",2),b([(0,a.MZ)({type:String})],y.prototype,"nextSlug",2),b([(0,a.MZ)({type:Boolean,reflect:!0})],y.prototype,"active",2),b([(0,a.MZ)({type:Boolean})],y.prototype,"isFinalStep",2),b([(0,a.MZ)({type:Boolean})],y.prototype,"showCloseButton",2),b([(0,a.MZ)({type:String})],y.prototype,"position",2),b([(0,a.MZ)({type:String})],y.prototype,"tutorialType",2),y=b([(0,a.EM)("tutorial-bubble")],y)}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.