element.min.js

customElements.define("event-count",class extends HTMLElement{connectedCallback(){var e,t,n,a=this.getAttribute("event")||2147483647e3,r=(this.getAttribute("hms")?([e,t,n]=this.getAttribute("hms").split(":"),a=new Date(new Date/1+36e5*e+6e4*t+1e3*n),"hour,minute,second"):this.getAttribute("count")||"year,day,hour,minute,second").split(","),i=({create:e="div",id:t,append:n=[],...a})=>(Object.assign(e=document.createElement(e),{id:t,part:t,...a}).append(...n),this[t]=e),o=(e,t,n)=>t+":"+(this.getAttribute(e+"-"+t)||"var(--event-count-"+e+"-"+t+","+n+")")+";";this.attachShadow({mode:"open"}).append(i({create:"style",innerHTML:":host{display:inline-block}#event{"+o("event","color","#0")+o("event","padding","0 1rem")+o("event","font","2rem arial")+o("event","text-align","center")+o("event","background","#fc0")+"}#count{display:grid;grid:1fr/repeat("+r.length+",1fr);"+o("count","color","#fc0")+o("count","font","2rem arial")+o("count","text-align","center")+o("count","background","#080")+"}[part*=text]{"+o("text","padding","0 1rem")+o("text","font","1rem arial")+o("text","text-transform","uppercase")+"}"}),i({id:"event",append:[i({create:"slot",innerHTML:"Y2K38"})]}),i({id:"count",append:r.map(e=>i({id:e+"count",append:[i({id:e}),i({id:e+"text",innerHTML:new Intl.RelativeTimeFormat(this.getAttribute("format")||"en").formatToParts(2,e)[2].value})]}))}));var d=setInterval(()=>{var e=new Date,t=new Date(a);t<e&&([e,t]=[t,e]);for(var n=t-e,i={year:~~(n/31536e6)},o=0,c=e.getFullYear();c<t.getFullYear();c++)(c%4==0&&c%100!=0||c%400==0)&&(t<e?o--:o++);i.day=~~((n-=31536e6*i.year)/864e5)+o,i.hour=~~((n-=864e5*(i.day-o))/36e5),i.minute=~~((n-=36e5*i.hour)/6e4),i.second=~~((n-=6e4*i.minute)/1e3),r.map(e=>(this.setAttribute(e,i[e]),this[e].innerHTML=i[e])).every(e=>!e)&&(clearInterval(d),this.dispatchEvent(new Event(this.id)))},1e3)}});