zero-hour 1.3.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +102 -104
- package/dist/index.cjs +607 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +75 -0
- package/dist/index.d.ts +69 -55
- package/dist/index.js +604 -0
- package/dist/index.js.map +1 -0
- package/dist/zero-hour.css +1 -1
- package/package.json +52 -24
- package/dist/index.cjs.js +0 -54
- package/dist/index.es.js +0 -375
- package/dist/index.umd.js +0 -54
package/dist/zero-hour.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:host{width:100%;display:block;overflow:hidden;container-type:inline-size}.zh{box-sizing:border-box;align-items:stretch;gap:0;display:flex;position:relative}.zh__group{flex:1 1 0;grid-template-rows:auto;grid-template-columns:1fr 1fr;gap:0;width:100%;min-width:0;display:grid}.zh__sep{flex:0 0 var(--zh-sep-width,4%);width:var(--zh-sep-width,4%);background-image:var(--zh-sep-url);background-position:50%;background-repeat:no-repeat;background-size:contain}.zh__digit{aspect-ratio:var(--zh-digit-aspect,9/12);background-image:var(--zh-digits-url);background-repeat:no-repeat;background-size:calc(var(--zh-digits-frames,10)*100%)100%;background-position:calc(var(--zh-sheet-index,0)*100
|
|
1
|
+
:host{width:100%;display:block;overflow:hidden;container-type:inline-size}.zh{box-sizing:border-box;align-items:stretch;gap:0;display:flex;position:relative}.zh__group{flex:1 1 0;grid-template-rows:auto;grid-template-columns:1fr 1fr;gap:0;width:100%;min-width:0;display:grid}.zh__sep{flex:0 0 var(--zh-sep-width,4%);width:var(--zh-sep-width,4%);background-image:var(--zh-sep-url);background-position:50%;background-repeat:no-repeat;background-size:contain}.zh__digit{aspect-ratio:var(--zh-digit-aspect,9 / 12);width:100%;position:relative;overflow:hidden}.zh__digit-track{flex-direction:column;width:100%;height:100%;display:flex;transform:translateY(0)}.zh--mode-scroll .zh__digit-track{transition:transform var(--zh-scroll-duration,.375s) var(--zh-scroll-timing,cubic-bezier(.445, .05, .55, .95))}.zh__digit-face{background-image:var(--zh-digits-url);background-repeat:no-repeat;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;flex:0 0 100%;width:100%;height:100%}.zh__a11y{clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zero-hour",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Tiny countdown Web Component. Registers <countdown-timer> that renders a configurable DD:HH:MM:SS countdown to a target date/time (optional UTC offset) and fires a done event at zero.",
|
|
5
|
+
"type": "module",
|
|
5
6
|
"author": "ux-ui.pro",
|
|
6
7
|
"license": "MIT",
|
|
7
8
|
"repository": {
|
|
@@ -12,40 +13,67 @@
|
|
|
12
13
|
"url": "https://github.com/ux-ui-pro/zero-hour/issues"
|
|
13
14
|
},
|
|
14
15
|
"homepage": "https://github.com/ux-ui-pro/zero-hour",
|
|
15
|
-
"sideEffects":
|
|
16
|
+
"sideEffects": [
|
|
17
|
+
"*.css"
|
|
18
|
+
],
|
|
19
|
+
"packageManager": "npm@10.9.3",
|
|
16
20
|
"scripts": {
|
|
17
21
|
"clean": "rimraf dist",
|
|
18
|
-
"build": "
|
|
19
|
-
"verify": "
|
|
20
|
-
"lint": "biome check src",
|
|
21
|
-
"lint:fix": "biome check --write src",
|
|
22
|
-
"format": "biome format --write src",
|
|
23
|
-
"typecheck": "tsc -p tsconfig.json --noEmit"
|
|
22
|
+
"build": "tsdown",
|
|
23
|
+
"verify": "npm run lint && npm run typecheck && npm run build && npm run test:smoke && npm run pack:check",
|
|
24
|
+
"lint": "biome check src tests tsdown.config.ts",
|
|
25
|
+
"lint:fix": "biome check --write src tests tsdown.config.ts",
|
|
26
|
+
"format": "biome format --write src tests tsdown.config.ts",
|
|
27
|
+
"typecheck": "tsc -p tsconfig.json --noEmit",
|
|
28
|
+
"test:smoke": "node --test \"tests/**/*.js\"",
|
|
29
|
+
"pack:check": "npm pack --dry-run && publint && attw --pack . --profile node16 --exclude-entrypoints zero-hour.css",
|
|
30
|
+
"prepublishOnly": "npm run clean && npm run verify"
|
|
24
31
|
},
|
|
25
32
|
"source": "src/index.ts",
|
|
26
|
-
"main": "dist/index.cjs
|
|
27
|
-
"module": "dist/index.
|
|
28
|
-
"types": "dist/index.d.ts",
|
|
33
|
+
"main": "./dist/index.cjs",
|
|
34
|
+
"module": "./dist/index.js",
|
|
35
|
+
"types": "./dist/index.d.ts",
|
|
36
|
+
"style": "./dist/zero-hour.css",
|
|
29
37
|
"exports": {
|
|
30
38
|
".": {
|
|
31
|
-
"
|
|
32
|
-
|
|
33
|
-
|
|
39
|
+
"import": {
|
|
40
|
+
"types": "./dist/index.d.ts",
|
|
41
|
+
"default": "./dist/index.js"
|
|
42
|
+
},
|
|
43
|
+
"require": {
|
|
44
|
+
"types": "./dist/index.d.cts",
|
|
45
|
+
"default": "./dist/index.cjs"
|
|
46
|
+
}
|
|
34
47
|
},
|
|
35
|
-
"./zero-hour.css":
|
|
36
|
-
|
|
48
|
+
"./zero-hour.css": {
|
|
49
|
+
"default": "./dist/zero-hour.css"
|
|
50
|
+
}
|
|
37
51
|
},
|
|
38
52
|
"files": [
|
|
39
|
-
"dist
|
|
53
|
+
"dist",
|
|
54
|
+
"README.md",
|
|
55
|
+
"LICENSE"
|
|
40
56
|
],
|
|
57
|
+
"engines": {
|
|
58
|
+
"node": ">=20.19.0"
|
|
59
|
+
},
|
|
60
|
+
"publishConfig": {
|
|
61
|
+
"access": "public"
|
|
62
|
+
},
|
|
41
63
|
"devDependencies": {
|
|
42
|
-
"@
|
|
43
|
-
"@
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
64
|
+
"@arethetypeswrong/cli": "^0.18.3",
|
|
65
|
+
"@biomejs/biome": "2.4.16",
|
|
66
|
+
"@tsdown/css": "^0.22.3",
|
|
67
|
+
"@types/node": "25.9.2",
|
|
68
|
+
"@ux-ui/biome-config": "^0.1.0",
|
|
69
|
+
"@ux-ui/tsconfig-base": "^0.1.0",
|
|
70
|
+
"@ux-ui/tsdown-config": "^0.1.0",
|
|
71
|
+
"publint": "^0.3.21",
|
|
72
|
+
"rimraf": "6.1.3",
|
|
73
|
+
"sass-embedded": "^1.100.0",
|
|
74
|
+
"jsdom": "29.1.1",
|
|
75
|
+
"tsdown": "0.22.3",
|
|
76
|
+
"typescript": "6.0.3"
|
|
49
77
|
},
|
|
50
78
|
"keywords": [
|
|
51
79
|
"typescript",
|
package/dist/index.cjs.js
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=`:host {
|
|
2
|
-
display: block;
|
|
3
|
-
width: 100%;
|
|
4
|
-
container-type: inline-size;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.zh {
|
|
9
|
-
display: flex;
|
|
10
|
-
align-items: stretch;
|
|
11
|
-
gap: 0;
|
|
12
|
-
position: relative;
|
|
13
|
-
box-sizing: border-box;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.zh__group {
|
|
17
|
-
display: grid;
|
|
18
|
-
grid-template-columns: 1fr 1fr;
|
|
19
|
-
grid-template-rows: auto;
|
|
20
|
-
gap: 0;
|
|
21
|
-
width: 100%;
|
|
22
|
-
flex: 1 1 0;
|
|
23
|
-
min-width: 0;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.zh__sep {
|
|
27
|
-
flex: 0 0 var(--zh-sep-width, 4%);
|
|
28
|
-
width: var(--zh-sep-width, 4%);
|
|
29
|
-
background-image: var(--zh-sep-url);
|
|
30
|
-
background-repeat: no-repeat;
|
|
31
|
-
background-position: center;
|
|
32
|
-
background-size: contain;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.zh__digit {
|
|
36
|
-
aspect-ratio: var(--zh-digit-aspect, 9 / 12);
|
|
37
|
-
width: 100%;
|
|
38
|
-
background-image: var(--zh-digits-url);
|
|
39
|
-
background-repeat: no-repeat;
|
|
40
|
-
/* Digits sprite is horizontal (frames left-to-right). */
|
|
41
|
-
background-size: calc(var(--zh-digits-frames, 10) * 100%) 100%;
|
|
42
|
-
background-position: calc(var(--zh-sheet-index, 0) * 100% / (var(--zh-digits-frames, 10) - 1)) 0;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.zh__a11y {
|
|
46
|
-
position: absolute;
|
|
47
|
-
width: 1px;
|
|
48
|
-
height: 1px;
|
|
49
|
-
overflow: hidden;
|
|
50
|
-
clip: rect(0 0 0 0);
|
|
51
|
-
white-space: nowrap;
|
|
52
|
-
clip-path: inset(50%);
|
|
53
|
-
}
|
|
54
|
-
`,T=m;function z(r){const t=r.charCodeAt(0)-48;return t>=0&&t<=9?t:0}function u(r){return r<0?0:r}const d={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},f={hours:0,minutes:0,seconds:0};function p(r){return"adoptedStyleSheets"in r}function b(r){try{const t=new CSSStyleSheet;return t.replaceSync(r),t}catch{return null}}const x=b(m);function y(r){const t=Math.floor(r/1e3),s=t%60,e=Math.floor(t/60)%60,n=Math.floor(t/3600),i=Math.floor(n/24),o=n%24;return{d:i,h:o,m:e,s,totalSec:t}}function E(r){return String(r).padStart(2,"0")}function g(r,t){return[...String(r).padStart(t,"0")]}function F(r,t,s){if(!r.hasAttribute(t))return s;const e=r.getAttribute(t);return e==null||e===""?!0:e!=="false"}function w(r){if(r==null)return null;const t=r.trim();if(!t)return null;const s=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!s)return null;const e=Number(s[1]),n=Number(s[2]),i=Number(s[3]);return!Number.isFinite(e)||!Number.isFinite(n)||!Number.isFinite(i)?null:{year:e,month:n,day:i}}function _(r){if(r==null)return{...f};const t=r.trim();if(!t)return{...f};const s=t.split(":"),e=Number(s[0]??"0"),n=Number(s[1]??"0"),i=Number(s[2]??"0");return{hours:Number.isFinite(e)?e:0,minutes:Number.isFinite(n)?n:0,seconds:Number.isFinite(i)?i:0}}function v(r){if(r==null)return null;const t=r.trim();if(!t)return null;const s=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);if(!s)return null;const e=Number(s[1]),n=Number(s[2]),i=Number(s[3]??"0");return!Number.isFinite(e)||!Number.isFinite(n)||!Number.isFinite(i)||e<0||e>23||n<0||n>59||i<0||i>59?null:{hours:e,minutes:n,seconds:i}}function S(r){if(r==null)return null;let t=r.trim();if(!t)return null;/^utc/i.test(t)&&(t=t.slice(3));let s=1;if(t[0]==="+"?t=t.slice(1):t[0]==="-"&&(s=-1,t=t.slice(1)),!t)return null;const[e,n="0"]=t.split(":"),i=Number(e),o=Number(n);if(!Number.isFinite(i)||!Number.isFinite(o))return null;const l=i*60+o;return s*l}function C(){if(typeof window>"u"||!("location"in window))return null;const r=window.location?.search??"";if(!r)return null;const t=new URLSearchParams(r),s={},e=t.get("date")?.trim();e&&(s.date=e);const n=t.get("time")?.trim();n&&(s.time=n);const i=t.get("utc")?.trim();i&&(s.utc=i);const o=t.get("units")?.trim();return o&&(s.units=o),Object.keys(s).length?s:null}function k(r){const t=(r??"").trim().toLowerCase();if(!t)return d;const s=t.split(":").map(h=>h.trim()).filter(Boolean);if(!s.length)return d;const e=new Set(s),n=e.has("d"),i=e.has("h"),o=e.has("m"),l=e.has("s");return!n&&!i&&!o&&!l?d:{showDays:n,showHours:i,showMinutes:o,showSeconds:l}}class c extends HTMLElement{static defaultStylesheet=x;static observedAttributes=["digits-url","separator-url","autostart","date","time","utc","units"];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;connectedCallback(){this.render(),this.readAttributes(),this.autostart?this.start():this.renderStaticInitial()}disconnectedCallback(){this.stop()}attributeChangedCallback(t,s,e){if(!this.isConnected)return;const n=this.isRunning();this.readAttributes(),this.doneFired=!1,n&&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=C();this.digitsUrl=this.getAttribute("digits-url"),this.separatorUrl=this.getAttribute("separator-url"),this.autostart=F(this,"autostart",!0);const s=k(t?.units??this.getAttribute("units"));this.showDays=s.showDays,this.showHours=s.showHours,this.showMinutes=s.showMinutes,this.showSeconds=s.showSeconds;const e=w(this.getAttribute("date")),i=w(t?.date??null)??e,o=_(this.getAttribute("time")),h=v(t?.time??null)??o,a=S(this.getAttribute("utc")),D=S(t?.utc??null)??a??0;if(!i)this.targetEpochMs=null;else{const N=Date.UTC(i.year,i.month-1,i.day,h.hours,h.minutes,h.seconds);this.targetEpochMs=N-D*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()}renderStaticInitial(){if(this.targetEpochMs!=null){const t=Date.now(),s=u(this.targetEpochMs-t),{d:e,h:n,m:i,s:o}=y(s);this.setDigits({d:e,h:n,m:i,s:o})}else this.setDigits({d:0,h:0,m:0,s:0})}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})}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 s=[this.showDays,this.showHours,this.showMinutes,this.showSeconds],e=[];for(let i=0;i<s.length;i++)s[i]&&e.push(i);this.rootEl.style.setProperty("--zh-groups",String(e.length));const n=[!1,!1,!1];if(e.length>=2)for(let i=0;i<e.length-1;i++){const o=e[i+1],l=Math.min(2,Math.max(0,o-1));n[l]=!0}this.sep0El.style.display=n[0]?"":"none",this.sep1El.style.display=n[1]?"":"none",this.sep2El.style.display=n[2]?"":"none"}setDigits({d:t,h:s,m:e,s:n}){const i=g(Math.min(t,99),2),o=g(s,2),l=[...E(e)],h=[...E(n)];this.syncDigitGroup(this.daysEl,i),this.syncDigitGroup(this.hoursEl,o),this.syncDigitGroup(this.minutesEl,l),this.syncDigitGroup(this.secondsEl,h);const a=[];this.showDays&&a.push(i.join("")),this.showHours&&a.push(o.join("")),this.showMinutes&&a.push(l.join("")),this.showSeconds&&a.push(h.join("")),this.a11yEl.textContent=a.length?a.join(":"):"—"}syncDigitGroup(t,s){for(;t.children.length<s.length;){const e=document.createElement("span");e.className="zh__digit",t.appendChild(e)}for(;t.children.length>s.length;){const e=t.lastElementChild;if(!e)break;t.removeChild(e)}for(let e=0;e<s.length;e++){const n=t.children[e],i=z(s[e]);n.style.setProperty("--zh-sheet-index",String(i))}}tick(){if(!this.digitsUrl)return;const t=u(this.durationMs);if(t===0){this.setDigits({d:0,h:0,m:0,s:0}),this.fireDoneOnce(),this.stop();return}const s=this.startEpochMs??Date.now(),e=u(Date.now()-s),n=u(t-e),{d:i,h:o,m:l,s:h,totalSec:a}=y(n);this.setDigits({d:i,h:o,m:l,s:h}),a===0&&(this.fireDoneOnce(),this.stop())}fireDoneOnce(){this.doneFired||(this.doneFired=!0,this.dispatchEvent(new CustomEvent("done")))}scheduleNextSecondBoundary(){const s=1e3-Date.now()%1e3;this.nextTickTimeout=window.setTimeout(()=>{this.tick(),this.isRunning()&&this.scheduleNextSecondBoundary()},s)}adoptStylesheet(t){this.applyStyles(t)}adoptStyles(t){this.applyStyles(t)}applyStyles(t){if(typeof t=="string"){if(p(this.shadow)){const s=b(t);if(s){this.shadow.adoptedStyleSheets=[s],this.styleEl=null;return}}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=t;return}if(t&&p(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(c.defaultStylesheet&&p(this.shadow)){this.shadow.adoptedStyleSheets=[c.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=m}}customElements.get("countdown-timer")||customElements.define("countdown-timer",c);function A(r={}){const{selector:t="countdown-timer",onDone:s,stylesheet:e}=r,n=Array.from(document.querySelectorAll(t));if(s){const i=new WeakSet,o=l=>{i.has(l)||(i.add(l),s(l))};n.forEach(l=>{l.addEventListener("done",()=>o(l));const h=l;typeof h.isDone=="function"&&h.isDone()&&o(l)})}return e&&n.forEach(i=>{const o=i;typeof e=="string"?o.adoptStyles(e):o.adoptStylesheet(e)}),n}exports.initCountdownTimers=A;exports.zeroHourCssText=T;
|
package/dist/index.es.js
DELETED
|
@@ -1,375 +0,0 @@
|
|
|
1
|
-
const m = `:host {
|
|
2
|
-
display: block;
|
|
3
|
-
width: 100%;
|
|
4
|
-
container-type: inline-size;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.zh {
|
|
9
|
-
display: flex;
|
|
10
|
-
align-items: stretch;
|
|
11
|
-
gap: 0;
|
|
12
|
-
position: relative;
|
|
13
|
-
box-sizing: border-box;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.zh__group {
|
|
17
|
-
display: grid;
|
|
18
|
-
grid-template-columns: 1fr 1fr;
|
|
19
|
-
grid-template-rows: auto;
|
|
20
|
-
gap: 0;
|
|
21
|
-
width: 100%;
|
|
22
|
-
flex: 1 1 0;
|
|
23
|
-
min-width: 0;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.zh__sep {
|
|
27
|
-
flex: 0 0 var(--zh-sep-width, 4%);
|
|
28
|
-
width: var(--zh-sep-width, 4%);
|
|
29
|
-
background-image: var(--zh-sep-url);
|
|
30
|
-
background-repeat: no-repeat;
|
|
31
|
-
background-position: center;
|
|
32
|
-
background-size: contain;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.zh__digit {
|
|
36
|
-
aspect-ratio: var(--zh-digit-aspect, 9 / 12);
|
|
37
|
-
width: 100%;
|
|
38
|
-
background-image: var(--zh-digits-url);
|
|
39
|
-
background-repeat: no-repeat;
|
|
40
|
-
/* Digits sprite is horizontal (frames left-to-right). */
|
|
41
|
-
background-size: calc(var(--zh-digits-frames, 10) * 100%) 100%;
|
|
42
|
-
background-position: calc(var(--zh-sheet-index, 0) * 100% / (var(--zh-digits-frames, 10) - 1)) 0;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.zh__a11y {
|
|
46
|
-
position: absolute;
|
|
47
|
-
width: 1px;
|
|
48
|
-
height: 1px;
|
|
49
|
-
overflow: hidden;
|
|
50
|
-
clip: rect(0 0 0 0);
|
|
51
|
-
white-space: nowrap;
|
|
52
|
-
clip-path: inset(50%);
|
|
53
|
-
}
|
|
54
|
-
`, C = m;
|
|
55
|
-
function z(r) {
|
|
56
|
-
const t = r.charCodeAt(0) - 48;
|
|
57
|
-
return t >= 0 && t <= 9 ? t : 0;
|
|
58
|
-
}
|
|
59
|
-
function u(r) {
|
|
60
|
-
return r < 0 ? 0 : r;
|
|
61
|
-
}
|
|
62
|
-
const d = {
|
|
63
|
-
showDays: !0,
|
|
64
|
-
showHours: !0,
|
|
65
|
-
showMinutes: !0,
|
|
66
|
-
showSeconds: !0
|
|
67
|
-
}, f = { hours: 0, minutes: 0, seconds: 0 };
|
|
68
|
-
function p(r) {
|
|
69
|
-
return "adoptedStyleSheets" in r;
|
|
70
|
-
}
|
|
71
|
-
function b(r) {
|
|
72
|
-
try {
|
|
73
|
-
const t = new CSSStyleSheet();
|
|
74
|
-
return t.replaceSync(r), t;
|
|
75
|
-
} catch {
|
|
76
|
-
return null;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
const T = b(m);
|
|
80
|
-
function y(r) {
|
|
81
|
-
const t = Math.floor(r / 1e3), s = t % 60, e = Math.floor(t / 60) % 60, n = Math.floor(t / 3600), i = Math.floor(n / 24), o = n % 24;
|
|
82
|
-
return { d: i, h: o, m: e, s, totalSec: t };
|
|
83
|
-
}
|
|
84
|
-
function E(r) {
|
|
85
|
-
return String(r).padStart(2, "0");
|
|
86
|
-
}
|
|
87
|
-
function g(r, t) {
|
|
88
|
-
return [...String(r).padStart(t, "0")];
|
|
89
|
-
}
|
|
90
|
-
function x(r, t, s) {
|
|
91
|
-
if (!r.hasAttribute(t)) return s;
|
|
92
|
-
const e = r.getAttribute(t);
|
|
93
|
-
return e == null || e === "" ? !0 : e !== "false";
|
|
94
|
-
}
|
|
95
|
-
function w(r) {
|
|
96
|
-
if (r == null) return null;
|
|
97
|
-
const t = r.trim();
|
|
98
|
-
if (!t) return null;
|
|
99
|
-
const s = t.match(/^(\d{4})-(\d{2})-(\d{2})$/);
|
|
100
|
-
if (!s) return null;
|
|
101
|
-
const e = Number(s[1]), n = Number(s[2]), i = Number(s[3]);
|
|
102
|
-
return !Number.isFinite(e) || !Number.isFinite(n) || !Number.isFinite(i) ? null : { year: e, month: n, day: i };
|
|
103
|
-
}
|
|
104
|
-
function F(r) {
|
|
105
|
-
if (r == null) return { ...f };
|
|
106
|
-
const t = r.trim();
|
|
107
|
-
if (!t) return { ...f };
|
|
108
|
-
const s = t.split(":"), e = Number(s[0] ?? "0"), n = Number(s[1] ?? "0"), i = Number(s[2] ?? "0");
|
|
109
|
-
return {
|
|
110
|
-
hours: Number.isFinite(e) ? e : 0,
|
|
111
|
-
minutes: Number.isFinite(n) ? n : 0,
|
|
112
|
-
seconds: Number.isFinite(i) ? i : 0
|
|
113
|
-
};
|
|
114
|
-
}
|
|
115
|
-
function _(r) {
|
|
116
|
-
if (r == null) return null;
|
|
117
|
-
const t = r.trim();
|
|
118
|
-
if (!t) return null;
|
|
119
|
-
const s = t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
|
|
120
|
-
if (!s) return null;
|
|
121
|
-
const e = Number(s[1]), n = Number(s[2]), i = Number(s[3] ?? "0");
|
|
122
|
-
return !Number.isFinite(e) || !Number.isFinite(n) || !Number.isFinite(i) || e < 0 || e > 23 || n < 0 || n > 59 || i < 0 || i > 59 ? null : { hours: e, minutes: n, seconds: i };
|
|
123
|
-
}
|
|
124
|
-
function S(r) {
|
|
125
|
-
if (r == null) return null;
|
|
126
|
-
let t = r.trim();
|
|
127
|
-
if (!t) return null;
|
|
128
|
-
/^utc/i.test(t) && (t = t.slice(3));
|
|
129
|
-
let s = 1;
|
|
130
|
-
if (t[0] === "+" ? t = t.slice(1) : t[0] === "-" && (s = -1, t = t.slice(1)), !t) return null;
|
|
131
|
-
const [e, n = "0"] = t.split(":"), i = Number(e), o = Number(n);
|
|
132
|
-
if (!Number.isFinite(i) || !Number.isFinite(o)) return null;
|
|
133
|
-
const l = i * 60 + o;
|
|
134
|
-
return s * l;
|
|
135
|
-
}
|
|
136
|
-
function k() {
|
|
137
|
-
if (typeof window > "u" || !("location" in window)) return null;
|
|
138
|
-
const r = window.location?.search ?? "";
|
|
139
|
-
if (!r) return null;
|
|
140
|
-
const t = new URLSearchParams(r), s = {}, e = t.get("date")?.trim();
|
|
141
|
-
e && (s.date = e);
|
|
142
|
-
const n = t.get("time")?.trim();
|
|
143
|
-
n && (s.time = n);
|
|
144
|
-
const i = t.get("utc")?.trim();
|
|
145
|
-
i && (s.utc = i);
|
|
146
|
-
const o = t.get("units")?.trim();
|
|
147
|
-
return o && (s.units = o), Object.keys(s).length ? s : null;
|
|
148
|
-
}
|
|
149
|
-
function v(r) {
|
|
150
|
-
const t = (r ?? "").trim().toLowerCase();
|
|
151
|
-
if (!t)
|
|
152
|
-
return d;
|
|
153
|
-
const s = t.split(":").map((h) => h.trim()).filter(Boolean);
|
|
154
|
-
if (!s.length)
|
|
155
|
-
return d;
|
|
156
|
-
const e = new Set(s), n = e.has("d"), i = e.has("h"), o = e.has("m"), l = e.has("s");
|
|
157
|
-
return !n && !i && !o && !l ? d : { showDays: n, showHours: i, showMinutes: o, showSeconds: l };
|
|
158
|
-
}
|
|
159
|
-
class c extends HTMLElement {
|
|
160
|
-
static defaultStylesheet = T;
|
|
161
|
-
static observedAttributes = [
|
|
162
|
-
"digits-url",
|
|
163
|
-
"separator-url",
|
|
164
|
-
"autostart",
|
|
165
|
-
"date",
|
|
166
|
-
"time",
|
|
167
|
-
"utc",
|
|
168
|
-
"units"
|
|
169
|
-
];
|
|
170
|
-
shadow = this.attachShadow({ mode: "open" });
|
|
171
|
-
digitsUrl = null;
|
|
172
|
-
separatorUrl = null;
|
|
173
|
-
autostart = !0;
|
|
174
|
-
durationMs = 0;
|
|
175
|
-
targetEpochMs = null;
|
|
176
|
-
startEpochMs = null;
|
|
177
|
-
nextTickTimeout = null;
|
|
178
|
-
doneFired = !1;
|
|
179
|
-
rootEl;
|
|
180
|
-
daysEl;
|
|
181
|
-
hoursEl;
|
|
182
|
-
minutesEl;
|
|
183
|
-
secondsEl;
|
|
184
|
-
a11yEl;
|
|
185
|
-
sep0El;
|
|
186
|
-
sep1El;
|
|
187
|
-
sep2El;
|
|
188
|
-
styleEl = null;
|
|
189
|
-
showDays = !0;
|
|
190
|
-
showHours = !0;
|
|
191
|
-
showMinutes = !0;
|
|
192
|
-
showSeconds = !0;
|
|
193
|
-
connectedCallback() {
|
|
194
|
-
this.render(), this.readAttributes(), this.autostart ? this.start() : this.renderStaticInitial();
|
|
195
|
-
}
|
|
196
|
-
disconnectedCallback() {
|
|
197
|
-
this.stop();
|
|
198
|
-
}
|
|
199
|
-
attributeChangedCallback(t, s, e) {
|
|
200
|
-
if (!this.isConnected) return;
|
|
201
|
-
const n = this.isRunning();
|
|
202
|
-
this.readAttributes(), this.doneFired = !1, n && this.autostart ? this.start() : this.renderStaticInitial();
|
|
203
|
-
}
|
|
204
|
-
start() {
|
|
205
|
-
this.stop(), this.digitsUrl && (this.durationMs = this.targetEpochMs != null ? this.targetEpochMs - Date.now() : 0, this.startEpochMs = Date.now(), this.tick(), this.scheduleNextSecondBoundary());
|
|
206
|
-
}
|
|
207
|
-
stop() {
|
|
208
|
-
this.nextTickTimeout != null && (window.clearTimeout(this.nextTickTimeout), this.nextTickTimeout = null), this.startEpochMs = null;
|
|
209
|
-
}
|
|
210
|
-
reset() {
|
|
211
|
-
this.doneFired = !1, this.autostart ? this.start() : this.renderStaticInitial();
|
|
212
|
-
}
|
|
213
|
-
isRunning() {
|
|
214
|
-
return this.startEpochMs != null && this.nextTickTimeout != null;
|
|
215
|
-
}
|
|
216
|
-
isDone() {
|
|
217
|
-
return !this.digitsUrl || this.targetEpochMs == null ? !1 : Date.now() >= this.targetEpochMs;
|
|
218
|
-
}
|
|
219
|
-
readAttributes() {
|
|
220
|
-
this.rootEl || this.render();
|
|
221
|
-
const t = k();
|
|
222
|
-
this.digitsUrl = this.getAttribute("digits-url"), this.separatorUrl = this.getAttribute("separator-url"), this.autostart = x(this, "autostart", !0);
|
|
223
|
-
const s = v(t?.units ?? this.getAttribute("units"));
|
|
224
|
-
this.showDays = s.showDays, this.showHours = s.showHours, this.showMinutes = s.showMinutes, this.showSeconds = s.showSeconds;
|
|
225
|
-
const e = w(this.getAttribute("date")), i = w(t?.date ?? null) ?? e, o = F(this.getAttribute("time")), h = _(t?.time ?? null) ?? o, a = S(this.getAttribute("utc")), D = S(t?.utc ?? null) ?? a ?? 0;
|
|
226
|
-
if (!i)
|
|
227
|
-
this.targetEpochMs = null;
|
|
228
|
-
else {
|
|
229
|
-
const N = Date.UTC(
|
|
230
|
-
i.year,
|
|
231
|
-
i.month - 1,
|
|
232
|
-
i.day,
|
|
233
|
-
h.hours,
|
|
234
|
-
h.minutes,
|
|
235
|
-
h.seconds
|
|
236
|
-
);
|
|
237
|
-
this.targetEpochMs = N - D * 60 * 1e3;
|
|
238
|
-
}
|
|
239
|
-
if (this.durationMs = 0, !this.digitsUrl) {
|
|
240
|
-
this.setTextFallback("—:—:—:—");
|
|
241
|
-
return;
|
|
242
|
-
}
|
|
243
|
-
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();
|
|
244
|
-
}
|
|
245
|
-
renderStaticInitial() {
|
|
246
|
-
if (this.targetEpochMs != null) {
|
|
247
|
-
const t = Date.now(), s = u(this.targetEpochMs - t), { d: e, h: n, m: i, s: o } = y(s);
|
|
248
|
-
this.setDigits({ d: e, h: n, m: i, s: o });
|
|
249
|
-
} else
|
|
250
|
-
this.setDigits({ d: 0, h: 0, m: 0, s: 0 });
|
|
251
|
-
}
|
|
252
|
-
render() {
|
|
253
|
-
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(
|
|
254
|
-
this.daysEl,
|
|
255
|
-
this.sep0El,
|
|
256
|
-
this.hoursEl,
|
|
257
|
-
this.sep1El,
|
|
258
|
-
this.minutesEl,
|
|
259
|
-
this.sep2El,
|
|
260
|
-
this.secondsEl,
|
|
261
|
-
this.a11yEl
|
|
262
|
-
), 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 });
|
|
263
|
-
}
|
|
264
|
-
setTextFallback(t) {
|
|
265
|
-
this.a11yEl.textContent = t;
|
|
266
|
-
}
|
|
267
|
-
applyUnitsVisibility() {
|
|
268
|
-
if (!this.rootEl) return;
|
|
269
|
-
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) {
|
|
270
|
-
this.sep0El.style.display = "none", this.sep1El.style.display = "none", this.sep2El.style.display = "none";
|
|
271
|
-
return;
|
|
272
|
-
}
|
|
273
|
-
const s = [this.showDays, this.showHours, this.showMinutes, this.showSeconds], e = [];
|
|
274
|
-
for (let i = 0; i < s.length; i++)
|
|
275
|
-
s[i] && e.push(i);
|
|
276
|
-
this.rootEl.style.setProperty("--zh-groups", String(e.length));
|
|
277
|
-
const n = [!1, !1, !1];
|
|
278
|
-
if (e.length >= 2)
|
|
279
|
-
for (let i = 0; i < e.length - 1; i++) {
|
|
280
|
-
const o = e[i + 1], l = Math.min(2, Math.max(0, o - 1));
|
|
281
|
-
n[l] = !0;
|
|
282
|
-
}
|
|
283
|
-
this.sep0El.style.display = n[0] ? "" : "none", this.sep1El.style.display = n[1] ? "" : "none", this.sep2El.style.display = n[2] ? "" : "none";
|
|
284
|
-
}
|
|
285
|
-
setDigits({ d: t, h: s, m: e, s: n }) {
|
|
286
|
-
const i = g(Math.min(t, 99), 2), o = g(s, 2), l = [...E(e)], h = [...E(n)];
|
|
287
|
-
this.syncDigitGroup(this.daysEl, i), this.syncDigitGroup(this.hoursEl, o), this.syncDigitGroup(this.minutesEl, l), this.syncDigitGroup(this.secondsEl, h);
|
|
288
|
-
const a = [];
|
|
289
|
-
this.showDays && a.push(i.join("")), this.showHours && a.push(o.join("")), this.showMinutes && a.push(l.join("")), this.showSeconds && a.push(h.join("")), this.a11yEl.textContent = a.length ? a.join(":") : "—";
|
|
290
|
-
}
|
|
291
|
-
syncDigitGroup(t, s) {
|
|
292
|
-
for (; t.children.length < s.length; ) {
|
|
293
|
-
const e = document.createElement("span");
|
|
294
|
-
e.className = "zh__digit", t.appendChild(e);
|
|
295
|
-
}
|
|
296
|
-
for (; t.children.length > s.length; ) {
|
|
297
|
-
const e = t.lastElementChild;
|
|
298
|
-
if (!e) break;
|
|
299
|
-
t.removeChild(e);
|
|
300
|
-
}
|
|
301
|
-
for (let e = 0; e < s.length; e++) {
|
|
302
|
-
const n = t.children[e], i = z(s[e]);
|
|
303
|
-
n.style.setProperty("--zh-sheet-index", String(i));
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
tick() {
|
|
307
|
-
if (!this.digitsUrl) return;
|
|
308
|
-
const t = u(this.durationMs);
|
|
309
|
-
if (t === 0) {
|
|
310
|
-
this.setDigits({ d: 0, h: 0, m: 0, s: 0 }), this.fireDoneOnce(), this.stop();
|
|
311
|
-
return;
|
|
312
|
-
}
|
|
313
|
-
const s = this.startEpochMs ?? Date.now(), e = u(Date.now() - s), n = u(t - e), { d: i, h: o, m: l, s: h, totalSec: a } = y(n);
|
|
314
|
-
this.setDigits({ d: i, h: o, m: l, s: h }), a === 0 && (this.fireDoneOnce(), this.stop());
|
|
315
|
-
}
|
|
316
|
-
fireDoneOnce() {
|
|
317
|
-
this.doneFired || (this.doneFired = !0, this.dispatchEvent(new CustomEvent("done")));
|
|
318
|
-
}
|
|
319
|
-
scheduleNextSecondBoundary() {
|
|
320
|
-
const s = 1e3 - Date.now() % 1e3;
|
|
321
|
-
this.nextTickTimeout = window.setTimeout(() => {
|
|
322
|
-
this.tick(), this.isRunning() && this.scheduleNextSecondBoundary();
|
|
323
|
-
}, s);
|
|
324
|
-
}
|
|
325
|
-
adoptStylesheet(t) {
|
|
326
|
-
this.applyStyles(t);
|
|
327
|
-
}
|
|
328
|
-
adoptStyles(t) {
|
|
329
|
-
this.applyStyles(t);
|
|
330
|
-
}
|
|
331
|
-
applyStyles(t) {
|
|
332
|
-
if (typeof t == "string") {
|
|
333
|
-
if (p(this.shadow)) {
|
|
334
|
-
const s = b(t);
|
|
335
|
-
if (s) {
|
|
336
|
-
this.shadow.adoptedStyleSheets = [s], this.styleEl = null;
|
|
337
|
-
return;
|
|
338
|
-
}
|
|
339
|
-
}
|
|
340
|
-
this.styleEl || (this.styleEl = document.createElement("style")), this.styleEl.textContent = t;
|
|
341
|
-
return;
|
|
342
|
-
}
|
|
343
|
-
if (t && p(this.shadow)) {
|
|
344
|
-
this.shadow.adoptedStyleSheets = [t], this.styleEl = null;
|
|
345
|
-
return;
|
|
346
|
-
}
|
|
347
|
-
if (c.defaultStylesheet && p(this.shadow)) {
|
|
348
|
-
this.shadow.adoptedStyleSheets = [c.defaultStylesheet], this.styleEl = null;
|
|
349
|
-
return;
|
|
350
|
-
}
|
|
351
|
-
this.styleEl || (this.styleEl = document.createElement("style")), this.styleEl.textContent = m;
|
|
352
|
-
}
|
|
353
|
-
}
|
|
354
|
-
customElements.get("countdown-timer") || customElements.define("countdown-timer", c);
|
|
355
|
-
function A(r = {}) {
|
|
356
|
-
const { selector: t = "countdown-timer", onDone: s, stylesheet: e } = r, n = Array.from(document.querySelectorAll(t));
|
|
357
|
-
if (s) {
|
|
358
|
-
const i = /* @__PURE__ */ new WeakSet(), o = (l) => {
|
|
359
|
-
i.has(l) || (i.add(l), s(l));
|
|
360
|
-
};
|
|
361
|
-
n.forEach((l) => {
|
|
362
|
-
l.addEventListener("done", () => o(l));
|
|
363
|
-
const h = l;
|
|
364
|
-
typeof h.isDone == "function" && h.isDone() && o(l);
|
|
365
|
-
});
|
|
366
|
-
}
|
|
367
|
-
return e && n.forEach((i) => {
|
|
368
|
-
const o = i;
|
|
369
|
-
typeof e == "string" ? o.adoptStyles(e) : o.adoptStylesheet(e);
|
|
370
|
-
}), n;
|
|
371
|
-
}
|
|
372
|
-
export {
|
|
373
|
-
A as initCountdownTimers,
|
|
374
|
-
C as zeroHourCssText
|
|
375
|
-
};
|
package/dist/index.umd.js
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
(function(a,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(a=typeof globalThis<"u"?globalThis:a||self,c(a.ZeroHour={}))})(this,(function(a){"use strict";const c=`:host {
|
|
2
|
-
display: block;
|
|
3
|
-
width: 100%;
|
|
4
|
-
container-type: inline-size;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.zh {
|
|
9
|
-
display: flex;
|
|
10
|
-
align-items: stretch;
|
|
11
|
-
gap: 0;
|
|
12
|
-
position: relative;
|
|
13
|
-
box-sizing: border-box;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.zh__group {
|
|
17
|
-
display: grid;
|
|
18
|
-
grid-template-columns: 1fr 1fr;
|
|
19
|
-
grid-template-rows: auto;
|
|
20
|
-
gap: 0;
|
|
21
|
-
width: 100%;
|
|
22
|
-
flex: 1 1 0;
|
|
23
|
-
min-width: 0;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.zh__sep {
|
|
27
|
-
flex: 0 0 var(--zh-sep-width, 4%);
|
|
28
|
-
width: var(--zh-sep-width, 4%);
|
|
29
|
-
background-image: var(--zh-sep-url);
|
|
30
|
-
background-repeat: no-repeat;
|
|
31
|
-
background-position: center;
|
|
32
|
-
background-size: contain;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.zh__digit {
|
|
36
|
-
aspect-ratio: var(--zh-digit-aspect, 9 / 12);
|
|
37
|
-
width: 100%;
|
|
38
|
-
background-image: var(--zh-digits-url);
|
|
39
|
-
background-repeat: no-repeat;
|
|
40
|
-
/* Digits sprite is horizontal (frames left-to-right). */
|
|
41
|
-
background-size: calc(var(--zh-digits-frames, 10) * 100%) 100%;
|
|
42
|
-
background-position: calc(var(--zh-sheet-index, 0) * 100% / (var(--zh-digits-frames, 10) - 1)) 0;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.zh__a11y {
|
|
46
|
-
position: absolute;
|
|
47
|
-
width: 1px;
|
|
48
|
-
height: 1px;
|
|
49
|
-
overflow: hidden;
|
|
50
|
-
clip: rect(0 0 0 0);
|
|
51
|
-
white-space: nowrap;
|
|
52
|
-
clip-path: inset(50%);
|
|
53
|
-
}
|
|
54
|
-
`,D=c;function T(o){const t=o.charCodeAt(0)-48;return t>=0&&t<=9?t:0}function d(o){return o<0?0:o}const m={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},y={hours:0,minutes:0,seconds:0};function f(o){return"adoptedStyleSheets"in o}function E(o){try{const t=new CSSStyleSheet;return t.replaceSync(o),t}catch{return null}}const N=E(c);function g(o){const t=Math.floor(o/1e3),e=t%60,s=Math.floor(t/60)%60,n=Math.floor(t/3600),i=Math.floor(n/24),r=n%24;return{d:i,h:r,m:s,s:e,totalSec:t}}function w(o){return String(o).padStart(2,"0")}function S(o,t){return[...String(o).padStart(t,"0")]}function z(o,t,e){if(!o.hasAttribute(t))return e;const s=o.getAttribute(t);return s==null||s===""?!0:s!=="false"}function b(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]),n=Number(e[2]),i=Number(e[3]);return!Number.isFinite(s)||!Number.isFinite(n)||!Number.isFinite(i)?null:{year:s,month:n,day:i}}function x(o){if(o==null)return{...y};const t=o.trim();if(!t)return{...y};const e=t.split(":"),s=Number(e[0]??"0"),n=Number(e[1]??"0"),i=Number(e[2]??"0");return{hours:Number.isFinite(s)?s:0,minutes:Number.isFinite(n)?n:0,seconds:Number.isFinite(i)?i:0}}function F(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]),n=Number(e[2]),i=Number(e[3]??"0");return!Number.isFinite(s)||!Number.isFinite(n)||!Number.isFinite(i)||s<0||s>23||n<0||n>59||i<0||i>59?null:{hours:s,minutes:n,seconds:i}}function M(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,n="0"]=t.split(":"),i=Number(s),r=Number(n);if(!Number.isFinite(i)||!Number.isFinite(r))return null;const l=i*60+r;return e*l}function _(){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 n=t.get("time")?.trim();n&&(e.time=n);const i=t.get("utc")?.trim();i&&(e.utc=i);const r=t.get("units")?.trim();return r&&(e.units=r),Object.keys(e).length?e:null}function v(o){const t=(o??"").trim().toLowerCase();if(!t)return m;const e=t.split(":").map(h=>h.trim()).filter(Boolean);if(!e.length)return m;const s=new Set(e),n=s.has("d"),i=s.has("h"),r=s.has("m"),l=s.has("s");return!n&&!i&&!r&&!l?m:{showDays:n,showHours:i,showMinutes:r,showSeconds:l}}class p extends HTMLElement{static defaultStylesheet=N;static observedAttributes=["digits-url","separator-url","autostart","date","time","utc","units"];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;connectedCallback(){this.render(),this.readAttributes(),this.autostart?this.start():this.renderStaticInitial()}disconnectedCallback(){this.stop()}attributeChangedCallback(t,e,s){if(!this.isConnected)return;const n=this.isRunning();this.readAttributes(),this.doneFired=!1,n&&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=_();this.digitsUrl=this.getAttribute("digits-url"),this.separatorUrl=this.getAttribute("separator-url"),this.autostart=z(this,"autostart",!0);const e=v(t?.units??this.getAttribute("units"));this.showDays=e.showDays,this.showHours=e.showHours,this.showMinutes=e.showMinutes,this.showSeconds=e.showSeconds;const s=b(this.getAttribute("date")),i=b(t?.date??null)??s,r=x(this.getAttribute("time")),h=F(t?.time??null)??r,u=M(this.getAttribute("utc")),A=M(t?.utc??null)??u??0;if(!i)this.targetEpochMs=null;else{const U=Date.UTC(i.year,i.month-1,i.day,h.hours,h.minutes,h.seconds);this.targetEpochMs=U-A*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()}renderStaticInitial(){if(this.targetEpochMs!=null){const t=Date.now(),e=d(this.targetEpochMs-t),{d:s,h:n,m:i,s:r}=g(e);this.setDigits({d:s,h:n,m:i,s:r})}else this.setDigits({d:0,h:0,m:0,s:0})}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})}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 i=0;i<e.length;i++)e[i]&&s.push(i);this.rootEl.style.setProperty("--zh-groups",String(s.length));const n=[!1,!1,!1];if(s.length>=2)for(let i=0;i<s.length-1;i++){const r=s[i+1],l=Math.min(2,Math.max(0,r-1));n[l]=!0}this.sep0El.style.display=n[0]?"":"none",this.sep1El.style.display=n[1]?"":"none",this.sep2El.style.display=n[2]?"":"none"}setDigits({d:t,h:e,m:s,s:n}){const i=S(Math.min(t,99),2),r=S(e,2),l=[...w(s)],h=[...w(n)];this.syncDigitGroup(this.daysEl,i),this.syncDigitGroup(this.hoursEl,r),this.syncDigitGroup(this.minutesEl,l),this.syncDigitGroup(this.secondsEl,h);const u=[];this.showDays&&u.push(i.join("")),this.showHours&&u.push(r.join("")),this.showMinutes&&u.push(l.join("")),this.showSeconds&&u.push(h.join("")),this.a11yEl.textContent=u.length?u.join(":"):"—"}syncDigitGroup(t,e){for(;t.children.length<e.length;){const s=document.createElement("span");s.className="zh__digit",t.appendChild(s)}for(;t.children.length>e.length;){const s=t.lastElementChild;if(!s)break;t.removeChild(s)}for(let s=0;s<e.length;s++){const n=t.children[s],i=T(e[s]);n.style.setProperty("--zh-sheet-index",String(i))}}tick(){if(!this.digitsUrl)return;const t=d(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=d(Date.now()-e),n=d(t-s),{d:i,h:r,m:l,s:h,totalSec:u}=g(n);this.setDigits({d:i,h:r,m:l,s:h}),u===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(f(this.shadow)){const e=E(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&&f(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(p.defaultStylesheet&&f(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 C(o={}){const{selector:t="countdown-timer",onDone:e,stylesheet:s}=o,n=Array.from(document.querySelectorAll(t));if(e){const i=new WeakSet,r=l=>{i.has(l)||(i.add(l),e(l))};n.forEach(l=>{l.addEventListener("done",()=>r(l));const h=l;typeof h.isDone=="function"&&h.isDone()&&r(l)})}return s&&n.forEach(i=>{const r=i;typeof s=="string"?r.adoptStyles(s):r.adoptStylesheet(s)}),n}a.initCountdownTimers=C,a.zeroHourCssText=D,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
|