https://511mn.org/modal-media-sign-overlay-travel-time-f8d975d6cc21b7f411dd.js

1"use strict";(self.webpackChunkone_web=self.webpackChunkone_web||[]).push([[5903],{22251:(e,t,i)=>{i.r(t),i.d(t,{default:()=>c});var o=i(71413),s=i(52706),r=i(52850);i(82890);var a,h=i(30555),n=i(80480),l=i(38155),g=Object.defineProperty,d=Object.getOwnPropertyDescriptor,p=(e,t,i,o)=>{for(var s,r=o>1?void 0:o?d(t,i):t,a=e.length-1;a>=0;a--)(s=e[a])&&(r=(o?s(t,i,r):s(r))||r);return o&&r&&g(t,i,r),r},m=(e,t,i)=>(((e,t,i)=>{if(!t.has(e))throw TypeError("Cannot read from private field")})(e,t),i?i.call(e):t.get(e));let c=class extends o.WF{constructor(){super(...arguments),this.travelTimes=[],this.showLoader=!1,this.isError=!1,this.isSuccess=!1,((e,t,i)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,i)})(this,a,(0,l._)()),this.imageError=()=>{var e,t;this.isError=!0,this.showLoader=!1,clearInterval(this._loaderTimeout),this.dispatchEvent((e=r.jzr,new CustomEvent(e,t)))},this._observer=new ResizeObserver((e=>{const t=e[0].borderBoxSize?.[0];this.sizeSign(t.inlineSize,t.blockSize)})),this.openingAnimation=!1,this.loopSizeSign=()=>{const{width:e,height:t}=this.getBoundingClientRect();requestAnimationFrame((()=>{this.sizeSign(e,t),this.openingAnimation&&this.loopSizeSign()}))},this.sizeSign=(e,t)=>{if(!m(this,a).value)return;const i=e/t,o=getComputedStyle(m(this,a).value),s=parseFloat(o.getPropertyValue("--overlay-width")),r=parseFloat(o.getPropertyValue("--overlay-height"));if(i>s/r)if(r<=t)this.imgWidth=`${s}px`,this.imgHeight=`${r}px`;else{const e=t*(s/r);this.imgWidth=`${e}px`,this.imgHeight=`${t}px`}else if(s<=e)this.imgWidth=`${s}px`,this.imgHeight=`${r}px`;else{const t=e*(r/s);this.imgWidth=`${e}px`,this.imgHeight=`${t}px`}}}static get styles(){return[o.AH`
2				:host {
3					display: flex;
4					place-items: center;
5					width: 100%;
6					height: 100%;
7					box-sizing: border-box;
8					--card-aspect-ratio: var(--overlay-height) / var(--overlay-width);
9					position: relative;
10				}
11				.sign-message-image {
12					top: 50%;
13					left: 50%;
14					transform: translate(-50%, -50%);
15					position: absolute;
16					background-size: cover;
17				}
18
19				.sign-message-image svg {
20					position: absolute;
21					width: 12%;
22					transform: translate(-50%, -50%);
23					left: 50%;
24					fill: #fff;
25				}
26
27				.ROW1_A,
28				:host([imageLayout='ROW1_A']) {
29					--overlay-width: 361;
30					--overlay-height: 279;
31				}
32				.ROW1_A .tt-0 {
33					left: 42%;
34					top: 84.5%;
35				}
36				.ROW2_A,
37				:host([imageLayout='ROW2_A']) {
38					--overlay-width: 361;
39					--overlay-height: 279;
40				}
41				.ROW2_A .tt-0 {
42					left: 17.5%;
43					top: 84.5%;
44				}
45				.ROW2_A .tt-1 {
46					left: 67%;
47					top: 84.5%;
48				}
49				.ROW3_A,
50				:host([imageLayout='ROW3_A']) {
51					--overlay-width: 361;
52					--overlay-height: 279;
53				}
54				.COL1_A,
55				:host([imageLayout='COL1_A']) {
56					--overlay-width: 1375;
57					--overlay-height: 606.98;
58				}
59				.COL1_A .tt-0 {
60					top: 78.6%;
61				}
62				.COL2_A,
63				:host([imageLayout='COL2_A']) {
64					--overlay-width: 1375.41;
65					--overlay-height: 1005.97;
66				}
67				.COL2_A .tt-0 {
68					top: 47.4%;
69				}
70				.COL2_A .tt-1 {
71					top: 87.1%;
72				}
73				.COL3_A,
74				:host([imageLayout='COL3_A']) {
75					--overlay-width: 1375.62;
76					--overlay-height: 1404.97;
77				}
78				.COL3_A .tt-0 {
79					top: 34%;
80				}
81				.COL3_A .tt-1 {
82					top: 62.4%;
83				}
84				.COL3_A .tt-2 {
85					top: 90.75%;
86				}
87			`]}render(){return o.qy`
88			<!--	waiting for content, or waiting for content to load	-->
89			${this.showLoader?o.qy`<slot name="loader"><spinning-loader></spinning-loader></slot></slot>`:void 0}
90			${this.isSuccess&&this.imageUrl&&this.imageLayout?o.qy`
91						<!--	content present, ready to be shown once loaded	-->
92						<div
93							role="img"
94							${(0,l.K)(m(this,a))}
95							class=${(0,h.H)({"sign-message-image":!0,[this.imageLayout]:!0})}
96							style=${(0,n.W)({width:this.imgWidth,height:this.imgHeight,"background-image":`url(${this.imageUrl})`})}
97							aria-label=${this.title}
98							@error=${this.imageError}
99						>
100							${this.travelTimes.map(((e,t)=>o.qy`
101										<svg viewBox="0 0 30 30" class=${`tt-${t}`} aria-label=${e}>
102											<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">
103												${e}
104											</text>
105										</svg>
106									`))}
107						</div>
108				  `:o.qy``}
109			<!--	content missing or encountered an error while loading	-->
110			${this.isError?o.qy`
111						<img
112							${(0,l.K)(m(this,a))}
113							class=${(0,h.H)({"sign-message-image":!0,ROW1_A:!0})}
114							style=${(0,n.W)({width:this.imgWidth,height:this.imgHeight})}
115							src=${"/images/icon-sign-broken-fill-solid.svg"}
116							alt="Travel times unavailable"
117							role="presentation"
118						/>
119				  `:void 0}
120		`}connectedCallback(){super.connectedCallback(),this._observer.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this._observer.disconnect()}updated(e){if(e.has("imageUrl")&&this.imageUrl){clearInterval(this._loaderTimeout),this._loaderTimeout=setInterval((()=>{this.showLoader=!0}),1e3),this.showLoader=!1,this.isError=!1,this.isSuccess=!1;const e=document.createElement("img");e.src=this.imageUrl,e.onerror=this.imageError,e.onload=()=>{this.isSuccess=!0,this.showLoader=!1,clearInterval(this._loaderTimeout)}}(e.has("isSuccess")||e.has("isError"))&&this.loopSizeSign(),this.imageUrl||(this.showLoader=!0)}};a=new WeakMap,p([(0,s.MZ)({type:String,reflect:!0})],c.prototype,"imageLayout",2),p([(0,s.MZ)({type:String})],c.prototype,"imageUrl",2),p([(0,s.MZ)({type:Array})],c.prototype,"travelTimes",2),p([(0,s.MZ)({type:Boolean})],c.prototype,"showLoader",2),p([(0,s.MZ)({type:Boolean})],c.prototype,"isError",2),p([(0,s.MZ)({type:Boolean})],c.prototype,"isSuccess",2),p([(0,s.wk)()],c.prototype,"imgWidth",2),p([(0,s.wk)()],c.prototype,"imgHeight",2),p([(0,s.MZ)({type:Boolean})],c.prototype,"openingAnimation",2),c=p([(0,s.EM)("sign-overlay-travel-time")],c)}}]);