zero-hour 1.3.2 → 2.0.1

package/dist/index.umd.js

@@ -1,75 +0,0 @@
-(function(u,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(u=typeof globalThis<"u"?globalThis:u||self,c(u.ZeroHour={}))})(this,(function(u){"use strict";const c=`:host {
-  display: block;
-  width: 100%;
-  container-type: inline-size;
-  overflow: hidden;
-}
-
-.zh {
-  display: flex;
-  align-items: stretch;
-  gap: 0;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.zh__group {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto;
-  gap: 0;
-  width: 100%;
-  flex: 1 1 0;
-  min-width: 0;
-}
-
-.zh__sep {
-  flex: 0 0 var(--zh-sep-width, 4%);
-  width: var(--zh-sep-width, 4%);
-  background-image: var(--zh-sep-url);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-}
-
-.zh__digit {
-  aspect-ratio: var(--zh-digit-aspect, 9 / 12);
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-}
-
-.zh__digit-track {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  transform: translateY(0);
-}
-
-.zh--mode-scroll .zh__digit-track {
-  transition: transform var(--zh-scroll-duration, 375ms)
-    var(--zh-scroll-timing, cubic-bezier(0.445, 0.05, 0.55, 0.95));
-}
-
-.zh__digit-face {
-  flex: 0 0 100%;
-  width: 100%;
-  height: 100%;
-  background-image: var(--zh-digits-url);
-  background-repeat: no-repeat;
-  /* Digits sprite is horizontal (frames left-to-right). */
-  background-size: calc(var(--zh-digits-frames, 10) * 100%) 100%;
-  background-position: calc(var(--zh-sheet-index, 0) * 100% / (var(--zh-digits-frames, 10) - 1)) 0;
-}
-
-.zh__a11y {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  clip-path: inset(50%);
-}
-`,M=c;function T(o){const t=o.charCodeAt(0)-48;return t>=0&&t<=9?t:0}function f(o){return o<0?0:o}const g={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},E={hours:0,minutes:0,seconds:0};function y(o){return"adoptedStyleSheets"in o}function w(o){try{const t=new CSSStyleSheet;return t.replaceSync(o),t}catch{return null}}const F=w(c);function S(o){const t=Math.floor(o/1e3),e=t%60,s=Math.floor(t/60)%60,i=Math.floor(t/3600),n=Math.floor(i/24),r=i%24;return{d:n,h:r,m:s,s:e,totalSec:t}}function b(o){return String(o).padStart(2,"0")}function D(o,t){return[...String(o).padStart(t,"0")]}function N(o,t,e){if(!o.hasAttribute(t))return e;const s=o.getAttribute(t);return s==null||s===""?!0:s!=="false"}function z(o){if(o==null)return null;const t=o.trim();if(!t)return null;const e=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!e)return null;const s=Number(e[1]),i=Number(e[2]),n=Number(e[3]);return!Number.isFinite(s)||!Number.isFinite(i)||!Number.isFinite(n)?null:{year:s,month:i,day:n}}function x(o){if(o==null)return{...E};const t=o.trim();if(!t)return{...E};const e=t.split(":"),s=Number(e[0]??"0"),i=Number(e[1]??"0"),n=Number(e[2]??"0");return{hours:Number.isFinite(s)?s:0,minutes:Number.isFinite(i)?i:0,seconds:Number.isFinite(n)?n:0}}function C(o){if(o==null)return null;const t=o.trim();if(!t)return null;const e=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);if(!e)return null;const s=Number(e[1]),i=Number(e[2]),n=Number(e[3]??"0");return!Number.isFinite(s)||!Number.isFinite(i)||!Number.isFinite(n)||s<0||s>23||i<0||i>59||n<0||n>59?null:{hours:s,minutes:i,seconds:n}}function _(o){if(o==null)return null;let t=o.trim();if(!t)return null;/^utc/i.test(t)&&(t=t.slice(3));let e=1;if(t[0]==="+"?t=t.slice(1):t[0]==="-"&&(e=-1,t=t.slice(1)),!t)return null;const[s,i="0"]=t.split(":"),n=Number(s),r=Number(i);if(!Number.isFinite(n)||!Number.isFinite(r))return null;const l=n*60+r;return e*l}function v(){if(typeof window>"u"||!("location"in window))return null;const o=window.location?.search??"";if(!o)return null;const t=new URLSearchParams(o),e={},s=t.get("date")?.trim();s&&(e.date=s);const i=t.get("time")?.trim();i&&(e.time=i);const n=t.get("utc")?.trim();n&&(e.utc=n);const r=t.get("units")?.trim();return r&&(e.units=r),Object.keys(e).length?e:null}function A(o){const t=(o??"").trim().toLowerCase();if(!t)return g;const e=t.split(":").map(a=>a.trim()).filter(Boolean);if(!e.length)return g;const s=new Set(e),i=s.has("d"),n=s.has("h"),r=s.has("m"),l=s.has("s");return!i&&!n&&!r&&!l?g:{showDays:i,showHours:n,showMinutes:r,showSeconds:l}}class p extends HTMLElement{static defaultStylesheet=F;static observedAttributes=["digits-url","separator-url","autostart","date","time","utc","units","mode"];shadow=this.attachShadow({mode:"open"});digitsUrl=null;separatorUrl=null;autostart=!0;durationMs=0;targetEpochMs=null;startEpochMs=null;nextTickTimeout=null;doneFired=!1;rootEl;daysEl;hoursEl;minutesEl;secondsEl;a11yEl;sep0El;sep1El;sep2El;styleEl=null;showDays=!0;showHours=!0;showMinutes=!0;showSeconds=!0;mode="static";hasDigitsRendered=!1;connectedCallback(){this.render(),this.readAttributes(),this.autostart?this.start():this.renderStaticInitial()}disconnectedCallback(){this.stop()}attributeChangedCallback(t,e,s){if(!this.isConnected)return;const i=this.isRunning();this.readAttributes(),this.doneFired=!1,i&&this.autostart?this.start():this.renderStaticInitial()}start(){this.stop(),this.digitsUrl&&(this.durationMs=this.targetEpochMs!=null?this.targetEpochMs-Date.now():0,this.startEpochMs=Date.now(),this.tick(),this.scheduleNextSecondBoundary())}stop(){this.nextTickTimeout!=null&&(window.clearTimeout(this.nextTickTimeout),this.nextTickTimeout=null),this.startEpochMs=null}reset(){this.doneFired=!1,this.autostart?this.start():this.renderStaticInitial()}isRunning(){return this.startEpochMs!=null&&this.nextTickTimeout!=null}isDone(){return!this.digitsUrl||this.targetEpochMs==null?!1:Date.now()>=this.targetEpochMs}readAttributes(){this.rootEl||this.render();const t=v();this.digitsUrl=this.getAttribute("digits-url"),this.separatorUrl=this.getAttribute("separator-url"),this.autostart=N(this,"autostart",!0);const e=(this.getAttribute("mode")??"").trim().toLowerCase();this.mode=e==="scroll"?"scroll":"static";const s=A(t?.units??this.getAttribute("units"));this.showDays=s.showDays,this.showHours=s.showHours,this.showMinutes=s.showMinutes,this.showSeconds=s.showSeconds;const i=z(this.getAttribute("date")),r=z(t?.date??null)??i,l=x(this.getAttribute("time")),h=C(t?.time??null)??l,m=_(this.getAttribute("utc")),L=_(t?.utc??null)??m??0;if(!r)this.targetEpochMs=null;else{const H=Date.UTC(r.year,r.month-1,r.day,h.hours,h.minutes,h.seconds);this.targetEpochMs=H-L*60*1e3}if(this.durationMs=0,!this.digitsUrl){this.setTextFallback("—:—:—:—");return}this.rootEl.style.setProperty("--zh-digits-url",`url("${this.digitsUrl}")`),this.separatorUrl?this.rootEl.style.setProperty("--zh-sep-url",`url("${this.separatorUrl}")`):this.rootEl.style.removeProperty("--zh-sep-url"),this.applyUnitsVisibility(),this.rootEl.classList.toggle("zh--mode-scroll",this.mode==="scroll")}renderStaticInitial(){if(this.targetEpochMs!=null){const t=Date.now(),e=f(this.targetEpochMs-t),{d:s,h:i,m:n,s:r}=S(e);this.setDigits({d:s,h:i,m:n,s:r},!1)}else this.setDigits({d:0,h:0,m:0,s:0},!1)}render(){this.applyStyles(null),this.rootEl=document.createElement("div"),this.rootEl.className="zh",this.daysEl=document.createElement("div"),this.daysEl.className="zh__group",this.hoursEl=document.createElement("div"),this.hoursEl.className="zh__group",this.minutesEl=document.createElement("div"),this.minutesEl.className="zh__group",this.secondsEl=document.createElement("div"),this.secondsEl.className="zh__group",this.sep0El=document.createElement("span"),this.sep0El.className="zh__sep",this.sep1El=document.createElement("span"),this.sep1El.className="zh__sep",this.sep2El=document.createElement("span"),this.sep2El.className="zh__sep",this.a11yEl=document.createElement("span"),this.a11yEl.className="zh__a11y",this.a11yEl.setAttribute("aria-live","polite"),this.rootEl.append(this.daysEl,this.sep0El,this.hoursEl,this.sep1El,this.minutesEl,this.sep2El,this.secondsEl,this.a11yEl),this.shadow.innerHTML="",this.styleEl&&this.shadow.append(this.styleEl),this.shadow.append(this.rootEl),this.setDigits({d:0,h:0,m:0,s:0},!1),this.hasDigitsRendered=!1}setTextFallback(t){this.a11yEl.textContent=t}applyUnitsVisibility(){if(!this.rootEl)return;if(this.daysEl.style.display=this.showDays?"":"none",this.hoursEl.style.display=this.showHours?"":"none",this.minutesEl.style.display=this.showMinutes?"":"none",this.secondsEl.style.display=this.showSeconds?"":"none",!!!this.separatorUrl){this.sep0El.style.display="none",this.sep1El.style.display="none",this.sep2El.style.display="none";return}const e=[this.showDays,this.showHours,this.showMinutes,this.showSeconds],s=[];for(let n=0;n<e.length;n++)e[n]&&s.push(n);this.rootEl.style.setProperty("--zh-groups",String(s.length));const i=[!1,!1,!1];if(s.length>=2)for(let n=0;n<s.length-1;n++){const r=s[n+1],l=Math.min(2,Math.max(0,r-1));i[l]=!0}this.sep0El.style.display=i[0]?"":"none",this.sep1El.style.display=i[1]?"":"none",this.sep2El.style.display=i[2]?"":"none"}setDigits({d:t,h:e,m:s,s:i},n=!0){let r=n;this.hasDigitsRendered||(r=!1);const l=D(Math.min(t,99),2),a=D(e,2),h=[...b(s)],m=[...b(i)];this.syncDigitGroup(this.daysEl,l,r),this.syncDigitGroup(this.hoursEl,a,r),this.syncDigitGroup(this.minutesEl,h,r),this.syncDigitGroup(this.secondsEl,m,r);const d=[];this.showDays&&d.push(l.join("")),this.showHours&&d.push(a.join("")),this.showMinutes&&d.push(h.join("")),this.showSeconds&&d.push(m.join("")),this.a11yEl.textContent=d.length?d.join(":"):"—",this.hasDigitsRendered=!0}syncDigitGroup(t,e,s){for(;t.children.length<e.length;){const i=t.children.length;t.appendChild(this.createDigitSlot(e[i]))}for(;t.children.length>e.length;){const i=t.lastElementChild;if(!i)break;t.removeChild(i)}for(let i=0;i<e.length;i++){const n=t.children[i];this.syncDigitSlot(n,e[i],s)}}createDigitSlot(t){const e=document.createElement("span");e.className="zh__digit";const s=document.createElement("span");s.className="zh__digit-track";const i=this.createDigitFace(t);return i.classList.add("zh__digit-face--current"),s.append(i),e.append(s),e}createDigitFace(t){const e=document.createElement("span");return e.className="zh__digit-face",this.setFaceDigit(e,t),e}setFaceDigit(t,e){t.dataset.zhDigit=e;const s=T(e);t.style.setProperty("--zh-sheet-index",String(s))}ensureDigitTrack(t){let e=t.querySelector(".zh__digit-track");return e||(e=document.createElement("span"),e.className="zh__digit-track",t.innerHTML="",t.append(e)),e}getOrCreateCurrentFace(t,e){let s=t.querySelector(".zh__digit-face--current");if(!s)s=t.querySelector(".zh__digit-face")??this.createDigitFace(e),s.classList.add("zh__digit-face--current"),this.setFaceDigit(s,s.dataset.zhDigit??e),t.innerHTML="",t.append(s);else{const i=Array.from(t.children);for(const n of i)n!==s&&t.removeChild(n)}return s}cleanupTrack(t,e){if(!t.contains(e))return;const s=Array.from(t.children);for(const i of s)i!==e&&t.removeChild(i);e.classList.remove("zh__digit-face--next"),e.classList.add("zh__digit-face--current"),t.style.transition=this.mode==="scroll"?"":"none",t.style.transform="translateY(0)"}parseTransitionMs(t){const e=window.getComputedStyle(t),s=e.transitionDuration.split(",").map(a=>a.trim()),i=e.transitionDelay.split(",").map(a=>a.trim()),n=a=>a?a.endsWith("ms")?Number.parseFloat(a):a.endsWith("s")?Number.parseFloat(a)*1e3:Number.parseFloat(a)||0:0,r=s[0]?n(s[0]):0,l=i[0]?n(i[0]):0;return r+l}animateDigitChange(t,e,s){const i=this.createDigitFace(s);i.classList.add("zh__digit-face--next"),t.innerHTML="",t.append(i,e),t.style.transition="none",t.style.transform="translateY(-100%)",t.offsetHeight,t.style.transition="",t.style.transform="translateY(0)";const n=()=>{t.removeEventListener("transitionend",n),t.contains(i)&&this.cleanupTrack(t,i)};t.addEventListener("transitionend",n,{once:!0});const r=this.parseTransitionMs(t)+150;window.setTimeout(n,r||800)}syncDigitSlot(t,e,s){const i=this.ensureDigitTrack(t),n=this.getOrCreateCurrentFace(i,e),r=n.dataset.zhDigit??e;if(this.setFaceDigit(n,r),r===e||!s||this.mode!=="scroll"){r!==e&&this.setFaceDigit(n,e),this.cleanupTrack(i,n);return}this.animateDigitChange(i,n,e)}tick(){if(!this.digitsUrl)return;const t=f(this.durationMs);if(t===0){this.setDigits({d:0,h:0,m:0,s:0}),this.fireDoneOnce(),this.stop();return}const e=this.startEpochMs??Date.now(),s=f(Date.now()-e),i=f(t-s),{d:n,h:r,m:l,s:a,totalSec:h}=S(i);this.setDigits({d:n,h:r,m:l,s:a}),h===0&&(this.fireDoneOnce(),this.stop())}fireDoneOnce(){this.doneFired||(this.doneFired=!0,this.dispatchEvent(new CustomEvent("done")))}scheduleNextSecondBoundary(){const e=1e3-Date.now()%1e3;this.nextTickTimeout=window.setTimeout(()=>{this.tick(),this.isRunning()&&this.scheduleNextSecondBoundary()},e)}adoptStylesheet(t){this.applyStyles(t)}adoptStyles(t){this.applyStyles(t)}applyStyles(t){if(typeof t=="string"){if(y(this.shadow)){const e=w(t);if(e){this.shadow.adoptedStyleSheets=[e],this.styleEl=null;return}}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=t;return}if(t&&y(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(p.defaultStylesheet&&y(this.shadow)){this.shadow.adoptedStyleSheets=[p.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=c}}customElements.get("countdown-timer")||customElements.define("countdown-timer",p);function U(o={}){const{selector:t="countdown-timer",onDone:e,stylesheet:s}=o,i=Array.from(document.querySelectorAll(t));if(e){const n=new WeakSet,r=l=>{n.has(l)||(n.add(l),e(l))};i.forEach(l=>{l.addEventListener("done",()=>r(l));const a=l;typeof a.isDone=="function"&&a.isDone()&&r(l)})}return s&&i.forEach(n=>{const r=n;typeof s=="string"?r.adoptStyles(s):r.adoptStylesheet(s)}),i}u.initCountdownTimers=U,u.zeroHourCssText=M,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));