${this.name} = ${this.value}
`:g}};T.styles=L`
* {
box-sizing: border-box;
}
h2 {
background: #25a977;
border-radius: 0.5em;
color: #fff;
font-weight: normal;
margin: auto;
padding: 1em;
width: max-content;
}
`,ct([m()],T.prototype,"value",2),ct([m()],T.prototype,"name",2),T=ct([u("calculation-result")],T);var qt=Object.defineProperty,te=Object.getOwnPropertyDescriptor,ee=(n,t,e,i)=>{for(var s=i>1?void 0:i?te(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&qt(t,e,s),s};let dt=class extends S{render(){return x`
Note:
`}};dt.styles=L`
p {
margin: 0;
text-align: center;
}
`,dt=ee([u("calculator-note")],dt);var ie=Object.defineProperty,se=Object.getOwnPropertyDescriptor,b=(n,t,e,i)=>{for(var s=i>1?void 0:i?se(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&ie(t,e,s),s};let f=class extends S{constructor(){super(...arguments),this.canvasWidth=0,this.canvasHeight=0,this.image=null,this.loadedParts=[],this.parts=[],this.labels=[]}connectedCallback(){super.connectedCallback(),this.setCanvasDimensions(),window.addEventListener("resize",()=>this.handleResize())}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",()=>this.handleResize())}updated(){this.redraw()}render(){return x`
`}setCanvasDimensions(){var e,i,s;const n=(s=(i=(e=this.shadowRoot)==null?void 0:e.querySelector("div"))==null?void 0:i.clientWidth)!=null?s:0;if(this.canvasWidth=n-64,!this.image){this.canvasHeight=0;return}const t=this.image.width/this.canvasWidth;this.canvasHeight=this.image.height/t}redraw(){var e;const n=(e=this.canvas)==null?void 0:e.getContext("2d");if(!n||!this.graphic)return;if(this.image){n.clearRect(0,0,this.canvasWidth,this.canvasHeight),this.drawGraphic(n),this.loadParts(n),this.drawLabels(n);return}const t=new Image;t.src=this.graphic,t.addEventListener("load",()=>{this.image=t,n.clearRect(0,0,this.canvasWidth,this.canvasHeight),this.setCanvasDimensions(),this.drawGraphic(n),this.loadParts(n),this.drawLabels(n)})}drawGraphic(n){this.image&&n.drawImage(this.image,0,0,this.canvasWidth,this.canvasHeight)}loadParts(n){this.loadedParts.length!==this.parts.length&&(this.loadedParts=this.parts.map(({src:t,x:e,y:i,width:s})=>new Promise(r=>{const o=new Image;o.src=t,o.addEventListener("load",()=>{r({image:o,width:s,x:e,y:i})})}))),Promise.all(this.loadedParts).then(t=>this.drawParts(n,t)).catch(()=>this.loadedParts=[])}drawParts(n,t){if(!this.image)return;const e=this.image.width/this.canvasWidth;for(const{image:i,x:s,y:r,width:o}of t){const c=o?o/e:i.width/e,a=i.width/c,l=i.height/a,C=s/a,h=r/a;n.drawImage(i,C,h,c,l)}}drawLabels(n){if(!this.image)return;const t=this.image.width/this.canvasWidth,e=96/t;n.font=`${e}px Open Sans, Arial, sans-serif`,n.textAlign="center";for(const{text:i,x:s,y:r}of this.labels){const o=s/t,c=r/t;n.fillText(i,o,c)}}handleResize(){this.setCanvasDimensions(),this.redraw()}};f.styles=L`
* {
box-sizing: border-box;
}
div {
display: flex;
justify-content: center;
margin-top: 2em;
}
`,b([tt("canvas")],f.prototype,"canvas",2),b([v()],f.prototype,"canvasWidth",2),b([v()],f.prototype,"canvasHeight",2),b([v()],f.prototype,"image",2),b([v()],f.prototype,"loadedParts",2),b([m()],f.prototype,"graphic",2),b([m({type:Array})],f.prototype,"parts",2),b([m({type:Array})],f.prototype,"labels",2),f=b([u("graphic-canvas")],f);/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/function*ne(n,t){if(n!==void 0){let e=0;for(const i of n)yield t(i,e++)}}var re=Object.defineProperty,oe=Object.getOwnPropertyDescriptor,K=(n,t,e,i)=>{for(var s=i>1?void 0:i?oe(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&re(t,e,s),s};let U=class extends S{constructor(){super(...arguments),this.value=0}render(){var e,i;const n=this.variable?this.variable.toLowerCase().split(" ").join("-"):g,t=s=>x`
`;return this.options?x`
`:x`
this.handleInput(s)}">
`}handleInput({target:n}){if(!(n instanceof HTMLInputElement)&&!(n instanceof HTMLSelectElement))return;const t=parseInt(n.value);this.value=Number.isNaN(t)?void 0:t;const e=new CustomEvent("update",{detail:this.value});this.dispatchEvent(e)}};U.styles=L`
* {
box-sizing: border-box;
}
div {
font-size: 1.5em;
}
input,
select {
border: 0.1em solid #999;
border-radius: 0.5em;
color: #111;
font: inherit;
outline: none;
padding: 0.5em;
}
input:focus,
select:focus {
border-color: #25a977;
transition: border-color 250ms ease-in-out;
}
`,K([m({type:Number})],U.prototype,"value",2),K([m()],U.prototype,"variable",2),K([m({type:Array})],U.prototype,"options",2),U=K([u("variable-input")],U);var ae=Object.defineProperty,le=Object.getOwnPropertyDescriptor,Z=(n,t,e,i)=>{for(var s=i>1?void 0:i?le(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&ae(t,e,s),s};return d.SightDistancePedestrianCrossing=class extends S{constructor(){super(...arguments),this.operatingSpeed=0,this.longitudinalGrade=0,this.longitudinalGradeMultiplier=1,this.result=null,this.formattedResult=null}willUpdate(){if(typeof this.operatingSpeed!="number"||typeof this.longitudinalGrade!="number"||typeof this.longitudinalGradeMultiplier!="number"){this.result=null,this.formattedResult=null;return}const t=this.longitudinalGrade*this.longitudinalGradeMultiplier;this.result=d.SightDistancePedestrianCrossing.calculate(this.operatingSpeed,t);const e=Math.round(this.result);this.formattedResult=`${e}m`}render(){var s;const t=[[1,"Upgrade"],[-1,"Downgrade"]],e=[{src:Yt,width:384,x:124,y:104},{src:Kt,width:156,x:484,y:0},{src:Xt,width:156,x:3332,y:0}],i=[{text:(s=this.formattedResult)!=null?s:"",x:2256,y:512},{text:typeof this.operatingSpeed=="number"?`${this.operatingSpeed}km/h`:"",x:736,y:736},{text:"1.6m",x:3496,y:180}];return x`
Values for reaction time and coefficient of deceleration are assumed.
`}static calculate(t,e){const r=1.5*t/3.6,o=Mt(t,2)/(254*(.36+.01*e));return r+o}},d.SightDistancePedestrianCrossing.styles=L`
:host {
--max-width: 1080px;
}
* {
box-sizing: border-box;
}
form {
align-items: center;
display: flex;
flex-direction: column;
gap: 1em;
justify-content: center;
}
.wrapper {
--side-padding: max((100% - var(--max-width)) / 2, 0px);
display: flex;
flex-direction: column;
gap: 2em;
padding-left: var(--side-padding);
padding-right: var(--side-padding);
}
`,Z([v()],d.SightDistancePedestrianCrossing.prototype,"operatingSpeed",2),Z([v()],d.SightDistancePedestrianCrossing.prototype,"longitudinalGrade",2),Z([v()],d.SightDistancePedestrianCrossing.prototype,"longitudinalGradeMultiplier",2),Z([v()],d.SightDistancePedestrianCrossing.prototype,"result",2),Z([v()],d.SightDistancePedestrianCrossing.prototype,"formattedResult",2),d.SightDistancePedestrianCrossing=Z([u("sight-distance-pedestrian-crossing")],d.SightDistancePedestrianCrossing),Object.defineProperty(d,Symbol.toStringTag,{value:"Module"}),d}({});
