zero-hour 1.0.0-dev.1 → 1.0.0-dev.2
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/dist/index.cjs.js +2 -2
- package/dist/index.es.js +1 -2
- package/dist/index.umd.js +1 -1
- package/dist/zero-hour.css +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=`:host {
|
|
2
2
|
display: block;
|
|
3
3
|
width: 100%;
|
|
4
|
-
container-type: size;
|
|
4
|
+
container-type: inline-size;
|
|
5
5
|
overflow: hidden;
|
|
6
6
|
}
|
|
7
7
|
|
|
@@ -50,4 +50,4 @@
|
|
|
50
50
|
white-space: nowrap;
|
|
51
51
|
clip-path: inset(50%);
|
|
52
52
|
}
|
|
53
|
-
`,S=m;function b(n){if(n==="0")return 9;const t=n.charCodeAt(0)-48;return t>=1&&t<=9?t-1:9}function u(n){return n<0?0:n}const d={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},y={hours:0,minutes:0,seconds:0};function p(n){return"adoptedStyleSheets"in n}function w(n){try{const t=new CSSStyleSheet;return t.replaceSync(n),t}catch{return null}}const M=w(m);function f(n){const t=Math.floor(n/1e3),e=t%60,s=Math.floor(t/60)%60,o=Math.floor(t/3600),i=Math.floor(o/24),r=o%24;return{d:i,h:r,m:s,s:e,totalSec:t}}function E(n){return String(n).padStart(2,"0")}function g(n,t){return[...String(n).padStart(t,"0")]}function T(n,t,e){if(!n.hasAttribute(t))return e;const s=n.getAttribute(t);return s==null||s===""?!0:s!=="false"}function D(n){if(n==null)return null;const t=n.trim();if(!t)return null;const e=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!e)return null;const s=Number(e[1]),o=Number(e[2]),i=Number(e[3]);return!Number.isFinite(s)||!Number.isFinite(o)||!Number.isFinite(i)?null:{year:s,month:o,day:i}}function x(n){if(n==null)return{...y};const t=n.trim();if(!t)return{...y};const e=t.split(":"),s=Number(e[0]??"0"),o=Number(e[1]??"0"),i=Number(e[2]??"0");return{hours:Number.isFinite(s)?s:0,minutes:Number.isFinite(o)?o:0,seconds:Number.isFinite(i)?i:0}}function N(n){if(n==null)return null;let t=n.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,o="0"]=t.split(":"),i=Number(s),r=Number(o);if(!Number.isFinite(i)||!Number.isFinite(r))return null;const
|
|
53
|
+
`,S=m;function b(n){if(n==="0")return 9;const t=n.charCodeAt(0)-48;return t>=1&&t<=9?t-1:9}function u(n){return n<0?0:n}const d={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},y={hours:0,minutes:0,seconds:0};function p(n){return"adoptedStyleSheets"in n}function w(n){try{const t=new CSSStyleSheet;return t.replaceSync(n),t}catch{return null}}const M=w(m);function f(n){const t=Math.floor(n/1e3),e=t%60,s=Math.floor(t/60)%60,o=Math.floor(t/3600),i=Math.floor(o/24),r=o%24;return{d:i,h:r,m:s,s:e,totalSec:t}}function E(n){return String(n).padStart(2,"0")}function g(n,t){return[...String(n).padStart(t,"0")]}function T(n,t,e){if(!n.hasAttribute(t))return e;const s=n.getAttribute(t);return s==null||s===""?!0:s!=="false"}function D(n){if(n==null)return null;const t=n.trim();if(!t)return null;const e=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!e)return null;const s=Number(e[1]),o=Number(e[2]),i=Number(e[3]);return!Number.isFinite(s)||!Number.isFinite(o)||!Number.isFinite(i)?null:{year:s,month:o,day:i}}function x(n){if(n==null)return{...y};const t=n.trim();if(!t)return{...y};const e=t.split(":"),s=Number(e[0]??"0"),o=Number(e[1]??"0"),i=Number(e[2]??"0");return{hours:Number.isFinite(s)?s:0,minutes:Number.isFinite(o)?o:0,seconds:Number.isFinite(i)?i:0}}function N(n){if(n==null)return null;let t=n.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,o="0"]=t.split(":"),i=Number(s),r=Number(o);if(!Number.isFinite(i)||!Number.isFinite(r))return null;const l=i*60+r;return e*l}function _(n){const t=n.getAttribute("date"),e=D(t);if(!e)return null;const s=x(n.getAttribute("time")),o=N(n.getAttribute("utc"))??0;return Date.UTC(e.year,e.month-1,e.day,s.hours,s.minutes,s.seconds)-o*60*1e3}function C(n){const t=(n??"").trim().toLowerCase();if(!t)return d;const e=t.split(":").map(a=>a.trim()).filter(Boolean);if(!e.length)return d;const s=new Set(e),o=s.has("d"),i=s.has("h"),r=s.has("m"),l=s.has("s");return!o&&!i&&!r&&!l?d:{showDays:o,showHours:i,showMinutes:r,showSeconds:l}}class c extends HTMLElement{static defaultStylesheet=M;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 o=this.isRunning();this.readAttributes(),this.doneFired=!1,o&&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}readAttributes(){this.digitsUrl=this.getAttribute("digits-url"),this.separatorUrl=this.getAttribute("separator-url"),this.autostart=T(this,"autostart",!0);const t=C(this.getAttribute("units"));this.showDays=t.showDays,this.showHours=t.showHours,this.showMinutes=t.showMinutes,this.showSeconds=t.showSeconds;const e=_(this);if(this.targetEpochMs=e,this.durationMs=0,!this.digitsUrl){this.setTextFallback("—:—:—:—");return}this.rootEl.style.setProperty("--digits-url",`url("${this.digitsUrl}")`),this.separatorUrl?this.rootEl.style.setProperty("--sep-url",`url("${this.separatorUrl}")`):this.rootEl.style.removeProperty("--sep-url"),this.applyUnitsVisibility()}renderStaticInitial(){if(this.targetEpochMs!=null){const t=Date.now(),e=u(this.targetEpochMs-t),{d:s,h:o,m:i,s:r}=f(e);this.setDigits({d:s,h:o,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 o=[!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));o[l]=!0}this.sep0El.style.display=o[0]?"":"none",this.sep1El.style.display=o[1]?"":"none",this.sep2El.style.display=o[2]?"":"none"}setDigits({d:t,h:e,m:s,s:o}){const i=g(Math.min(t,99),2),r=g(e,2),l=[...E(s)],a=[...E(o)];this.syncDigitGroup(this.daysEl,i),this.syncDigitGroup(this.hoursEl,r),this.syncDigitGroup(this.minutesEl,l),this.syncDigitGroup(this.secondsEl,a);const h=[];this.showDays&&h.push(i.join("")),this.showHours&&h.push(r.join("")),this.showMinutes&&h.push(l.join("")),this.showSeconds&&h.push(a.join("")),this.a11yEl.textContent=h.length?h.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 o=t.children[s],i=b(e[s]);o.style.setProperty("--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 e=this.startEpochMs??Date.now(),s=u(Date.now()-e),o=u(t-s),{d:i,h:r,m:l,s:a,totalSec:h}=f(o);this.setDigits({d:i,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(p(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&&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 z(n={}){const{selector:t="countdown-timer",onDone:e,stylesheet:s}=n,o=Array.from(document.querySelectorAll(t));return e&&o.forEach(i=>{i.addEventListener("done",()=>e(i))}),s&&o.forEach(i=>{const r=i;typeof s=="string"?r.adoptStyles(s):r.adoptStylesheet(s)}),o}exports.initCountdownTimers=z;exports.zeroHourCssText=S;
|
package/dist/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const m = `:host {
|
|
2
2
|
display: block;
|
|
3
3
|
width: 100%;
|
|
4
|
-
container-type: size;
|
|
4
|
+
container-type: inline-size;
|
|
5
5
|
overflow: hidden;
|
|
6
6
|
}
|
|
7
7
|
|
|
@@ -298,7 +298,6 @@ class c extends HTMLElement {
|
|
|
298
298
|
adoptStylesheet(t) {
|
|
299
299
|
this.applyStyles(t);
|
|
300
300
|
}
|
|
301
|
-
// Accept CSSStyleSheet OR raw CSS text (e.g. imported with ?raw from SCSS/CSS pipelines)
|
|
302
301
|
adoptStyles(t) {
|
|
303
302
|
this.applyStyles(t);
|
|
304
303
|
}
|
package/dist/index.umd.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
(function(a,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(a=typeof globalThis<"u"?globalThis:a||self,u(a.ZeroHour={}))})(this,(function(a){"use strict";const u=`:host {
|
|
2
2
|
display: block;
|
|
3
3
|
width: 100%;
|
|
4
|
-
container-type: size;
|
|
4
|
+
container-type: inline-size;
|
|
5
5
|
overflow: hidden;
|
|
6
6
|
}
|
|
7
7
|
|
package/dist/zero-hour.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:host{width:100%;display:block;overflow:hidden;container-type: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,3%);width:var(--zh-sep-width,3%);background-image:var(--sep-url);background-position:50%;background-repeat:no-repeat;background-size:contain}.zh__digit{aspect-ratio:9/12;background-image:var(--digits-url);background-repeat:no-repeat;background-size:100% calc(var(--zh-frames,10)*100%);background-position:0 calc(var(--sheet-index,0)*100%/(var(--zh-frames,10) - 1));width:100%}.zh__a11y{clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}
|
|
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,3%);width:var(--zh-sep-width,3%);background-image:var(--sep-url);background-position:50%;background-repeat:no-repeat;background-size:contain}.zh__digit{aspect-ratio:9/12;background-image:var(--digits-url);background-repeat:no-repeat;background-size:100% calc(var(--zh-frames,10)*100%);background-position:0 calc(var(--sheet-index,0)*100%/(var(--zh-frames,10) - 1));width: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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zero-hour",
|
|
3
|
-
"version": "1.0.0-dev.
|
|
3
|
+
"version": "1.0.0-dev.2",
|
|
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
5
|
"author": "ux-ui.pro",
|
|
6
6
|
"license": "MIT",
|