spoilerjs 0.2.0 → 0.2.1
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 +3 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +1 -1
- package/dist/components/p-DBUnISGp.js +1 -0
- package/dist/components/spoiler-span.js +1 -1
- package/package.json +16 -15
- package/LICENSE +0 -21
- package/dist/components/p-CTHKI95o.js +0 -1
package/README.md
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
**A fast, lightweight web component for creating spoiler text with particle effects.**
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/spoilerjs)
|
|
6
|
+
[](https://www.webcomponents.org/element/spoilerjs)
|
|
6
7
|
[](https://opensource.org/licenses/MIT)
|
|
7
8
|
[](https://bundlephobia.com/package/spoilerjs)
|
|
8
9
|
|
|
@@ -38,9 +39,10 @@ import 'spoilerjs/spoiler-span';
|
|
|
38
39
|
| `max-velocity` | Maximum velocity for particles (pixels per frame). | `0.05` |
|
|
39
40
|
| `particle-lifetime`| Particle lifetime in frames (e.g., 60 frames = 1 second). | `120` |
|
|
40
41
|
| `density` | Target particle density (particles per 100 square pixels). | `8` |
|
|
41
|
-
| `reveal-duration` | Text fade-in duration in milliseconds when revealing. | `
|
|
42
|
+
| `reveal-duration` | Text fade-in duration in milliseconds when revealing. | `300` |
|
|
42
43
|
| `spawn-stop-delay` | Delay in milliseconds before stopping particle spawning after click. | `0` |
|
|
43
44
|
| `monitor-position` | Continuously monitor position for hover effects and transforms. | `false` |
|
|
45
|
+
| `fps` | Target frames per second for particle animation. Lower values improve performance on slower devices. | `60` |
|
|
44
46
|
|
|
45
47
|
### Example
|
|
46
48
|
|
|
@@ -31,3 +31,5 @@ export interface SetPlatformOptions {
|
|
|
31
31
|
rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
32
32
|
}
|
|
33
33
|
export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
|
|
34
|
+
|
|
35
|
+
export * from '../types';
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-
|
|
1
|
+
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-DBUnISGp.js";function t(s,t,e){return(s||"")+(t?" "+t:"")+(e?" "+e:"")}export{t as format}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function t(t,e,n){const l="undefined"!=typeof HTMLElement?HTMLElement.prototype:null;for(;t&&t!==l;){const l=Object.getOwnPropertyDescriptor(t,e);if(l&&(!n||l.get))return l;t=Object.getPrototypeOf(t)}}var e,n=(e,n)=>{var l;Object.entries(null!=(l=n.l.t)?l:{}).map((([l,[o]])=>{if(31&o||32&o){const o=e[l],s=t(Object.getPrototypeOf(e),l,!0)||Object.getOwnPropertyDescriptor(e,l);s&&Object.defineProperty(e,l,{get(){return s.get.call(this)},set(t){s.set.call(this,t)},configurable:!0,enumerable:!0}),n.o.has(l)?e[l]=n.o.get(l):void 0!==o&&(e[l]=o)}}))},l=t=>{if(t.__stencil__getHostRef)return t.__stencil__getHostRef()},o=(t,e)=>e in t,s=(t,e)=>(0,console.error)(t,e),i=new Map,r="undefined"!=typeof window?window:{},c=r.HTMLElement||class{},u={i:0,u:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,l)=>t.addEventListener(e,n,l),rel:(t,e,n,l)=>t.removeEventListener(e,n,l),ce:(t,e)=>new CustomEvent(t,e)},f=(()=>{try{return!!r.document.adoptedStyleSheets&&(new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync)}catch(t){}return!1})(),a=!!f&&(()=>!!r.document&&Object.getOwnPropertyDescriptor(r.document.adoptedStyleSheets,"length").writable)(),d=!1,p=[],h=[],m=(t,e)=>n=>{t.push(n),d||(d=!0,e&&4&u.i?b($):u.raf($))},y=t=>{for(let e=0;e<t.length;e++)try{t[e](performance.now())}catch(t){s(t)}t.length=0},$=()=>{y(p),y(h),(d=p.length>0)&&u.raf($)},b=t=>Promise.resolve(undefined).then(t),v=m(h,!0),w=t=>{const e=new URL(t,u.u);return e.origin!==r.location.origin?e.href:e.pathname},g=t=>u.u=t;function j(){const t=this.attachShadow({mode:"open"});void 0===e&&(e=null),e&&(a?t.adoptedStyleSheets.push(e):t.adoptedStyleSheets=[...t.adoptedStyleSheets,e])}var O,S=new WeakMap,M=t=>"sc-"+t.p,k=t=>"object"==(t=typeof t)||"function"===t,E=(t,e,...n)=>{let l=null,o=null,s=!1,i=!1;const r=[],c=e=>{for(let n=0;n<e.length;n++)l=e[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof t&&!k(l))&&(l=String(l)),s&&i?r[r.length-1].h+=l:r.push(s?A(null,l):l),i=s)};if(c(n),e){e.key&&(o=e.key);{const t=e.className||e.class;t&&(e.class="object"!=typeof t?t:Object.keys(t).filter((e=>t[e])).join(" "))}}const u=A(t,null);return u.m=e,r.length>0&&(u.$=r),u.v=o,u},A=(t,e)=>({i:0,j:t,h:null!=e?e:null,O:null,$:null,m:null,v:null}),C={},x=(t,e)=>null==t||k(t)?t:4&e?"false"!==t&&(""===t||!!t):2&e?"string"==typeof t?parseFloat(t):"number"==typeof t?t:NaN:t,L=(t,e,n,s,i,c)=>{if(n===s)return;let f=o(t,e),a=e.toLowerCase();if("class"===e){const e=t.classList,l=_(n);let o=_(s);e.remove(...l.filter((t=>t&&!o.includes(t)))),e.add(...o.filter((t=>t&&!l.includes(t))))}else if("style"===e){for(const e in n)s&&null!=s[e]||(e.includes("-")?t.style.removeProperty(e):t.style[e]="");for(const e in s)n&&s[e]===n[e]||(e.includes("-")?t.style.setProperty(e,s[e]):t.style[e]=s[e])}else if("key"===e);else if("ref"===e)s&&G(s,t);else if(t.__lookupSetter__(e)||"o"!==e[0]||"n"!==e[1]){if("a"===e[0]&&e.startsWith("attr:")){const n=e.slice(5);let o;{const e=l(t);if(e&&e.l&&e.l.t){const t=e.l.t[n];t&&t[1]&&(o=t[1])}}return o||(o=n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()),void(null==s||!1===s?!1===s&&""!==t.getAttribute(o)||t.removeAttribute(o):t.setAttribute(o,!0===s?"":s))}if("p"===e[0]&&e.startsWith("prop:")){const n=e.slice(5);try{t[n]=s}catch(t){}return}{const l=k(s);if((f||l&&null!==s)&&!i)try{if(t.tagName.includes("-"))t[e]!==s&&(t[e]=s);else{const l=null==s?"":s;"list"===e?f=!1:null!=n&&t[e]===l||("function"==typeof t.__lookupSetter__(e)?t[e]=l:t.setAttribute(e,l))}}catch(t){}null==s||!1===s?!1===s&&""!==t.getAttribute(e)||t.removeAttribute(e):(!f||4&c||i)&&!l&&1===t.nodeType&&t.setAttribute(e,s=!0===s?"":s)}}else if(e="-"===e[2]?e.slice(3):o(r,a)?a.slice(2):a[2]+e.slice(3),n||s){const l=e.endsWith(D);e=e.replace(H,""),n&&u.rel(t,e,n,l),s&&u.ael(t,e,s,l)}},N=/\s/,_=t=>("object"==typeof t&&t&&"baseVal"in t&&(t=t.baseVal),t&&"string"==typeof t?t.split(N):[]),D="Capture",H=new RegExp(D+"$"),P=(t,e,n)=>{const l=11===e.O.nodeType&&e.O.host?e.O.host:e.O,o=t&&t.m||{},s=e.m||{};for(const t of R(Object.keys(o)))t in s||L(l,t,o[t],void 0,n,e.i);for(const t of R(Object.keys(s)))L(l,t,o[t],s[t],n,e.i)};function R(t){return t.includes("ref")?[...t.filter((t=>"ref"!==t)),"ref"]:t}var U=!1,W=!1,F=[],V=[],q=(t,e,n)=>{const l=e.$[n];let o,s,i=0;if(!r.document)throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.");if(o=l.O=r.document.createElement(l.j),P(null,l,W),l.$){const e="template"===l.j?o.content:o;for(i=0;i<l.$.length;++i)s=q(t,l,i),s&&e.appendChild(s)}return o["s-hn"]=O,o},z=(t,e,n,l,o,s)=>{let i,r=t;for(r.shadowRoot&&r.tagName===O&&(r=r.shadowRoot),"template"===n.j&&(r=r.content);o<=s;++o)l[o]&&(i=q(null,n,o),i&&(l[o].O=i,I(r,i,e)))},T=(t,e,n)=>{for(let l=e;l<=n;++l){const e=t[l];if(e){const t=e.O;B(e),t&&t.remove()}}},Y=(t,e,n=!1)=>t.j===e.j&&(n?(n&&!t.v&&e.v&&(t.v=e.v),!0):t.v===e.v),Z=(t,e,n=!1)=>{const l=e.O=t.O,o=t.$,s=e.$;"slot"!==e.j||U||t.S!==e.S&&(e.O["s-sn"]=e.S||"",(t=>{u.i|=1;const e=t.closest(O.toLowerCase());if(null!=e){const n=Array.from(e.__childNodes||e.childNodes).find((t=>t["s-cr"])),l=Array.from(t.__childNodes||t.childNodes);for(const t of n?l.reverse():l)null!=t["s-sh"]&&(I(e,t,null!=n?n:null),t["s-sh"]=void 0)}u.i&=-2})(e.O.parentElement)),P(t,e,W),null!==o&&null!==s?((t,e,n,l,o=!1)=>{let s,i,r=0,c=0,u=0,f=0,a=e.length-1,d=e[0],p=e[a],h=l.length-1,m=l[0],y=l[h];const $="template"===n.j?t.content:t;for(;r<=a&&c<=h;)if(null==d)d=e[++r];else if(null==p)p=e[--a];else if(null==m)m=l[++c];else if(null==y)y=l[--h];else if(Y(d,m,o))Z(d,m,o),d=e[++r],m=l[++c];else if(Y(p,y,o))Z(p,y,o),p=e[--a],y=l[--h];else if(Y(d,y,o))Z(d,y,o),I($,d.O,p.O.nextSibling),d=e[++r],y=l[--h];else if(Y(p,m,o))Z(p,m,o),I($,p.O,d.O),p=e[--a],m=l[++c];else{for(u=-1,f=r;f<=a;++f)if(e[f]&&null!==e[f].v&&e[f].v===m.v){u=f;break}u>=0?(i=e[u],i.j!==m.j?s=q(e&&e[c],n,u):(Z(i,m,o),e[u]=void 0,s=i.O),m=l[++c]):(s=q(e&&e[c],n,c),m=l[++c]),s&&I(d.O.parentNode,s,d.O)}r>a?z(t,null==l[h+1]?null:l[h+1].O,n,l,c,h):c>h&&T(e,r,a)})(l,o,e,s,n):null!==s?z(l,null,e,s,0,s.length-1):!n&&null!==o&&T(o,0,o.length-1)},B=t=>{t.m&&t.m.ref&&F.push((()=>t.m.ref(null))),t.$&&t.$.map(B)},G=(t,e)=>{V.push((()=>t(e)))},I=(t,e,n)=>t.__insertBefore?t.__insertBefore(e,n):null==t?void 0:t.insertBefore(e,n),J=(t,e,n=!1)=>{const l=t.$hostElement$,o=t.l,s=t.M||A(null,null);var i;const r=(i=e)&&i.j===C?e:E(null,null,e);if(O=l.tagName,n&&r.m)for(const t of Object.keys(r.m))l.hasAttribute(t)&&!["key","ref","style","class"].includes(t)&&(r.m[t]=l[t]);r.j=null,r.i|=4,t.M=r,r.O=s.O=l.shadowRoot||l,U=!(!(1&o.i)||128&o.i),Z(s,r,n),F.forEach((t=>t())),F.length=0,V.forEach((t=>t())),V.length=0},K=(t,e)=>{if(e&&!t.k&&e["s-p"]){const n=e["s-p"].push(new Promise((l=>t.k=()=>{e["s-p"].splice(n-1,1),l()})))}},Q=(t,e)=>{if(t.i|=16,4&t.i)return void(t.i|=512);K(t,t.A);const n=()=>X(t,e);if(!e)return v(n);queueMicrotask((()=>{n()}))},X=(t,e)=>{const n=t.$hostElement$,l=n;if(!l)throw new Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let o;return o=it(l,e?"componentWillLoad":"componentWillUpdate",void 0,n),o=tt(o,(()=>it(l,"componentWillRender",void 0,n))),tt(o,(()=>nt(t,l,e)))},tt=(t,e)=>et(t)?t.then(e).catch((t=>{console.error(t),e()})):e(),et=t=>t instanceof Promise||t&&t.then&&"function"==typeof t.then,nt=async(t,e,n)=>{var l;const o=t.$hostElement$,s=o["s-rc"];n&&(t=>{const e=t.l,n=t.$hostElement$,l=e.i,o=((t,e)=>{var n,l,o;const s=M(e),c=i.get(s);if(!r.document)return s;if(t=11===t.nodeType?t:r.document,c)if("string"==typeof c){let o,i=S.get(t=t.head||t);if(i||S.set(t,i=new Set),!i.has(s)){o=r.document.createElement("style"),o.textContent=c;const d=null!=(n=u.C)?n:function(){var t,e,n;return null!=(n=null==(e=null==(t=r.document.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:e.getAttribute("content"))?n:void 0}();if(null!=d&&o.setAttribute("nonce",d),!(1&e.i))if("HEAD"===t.nodeName){const e=t.querySelectorAll("link[rel=preconnect]"),n=e.length>0?e[e.length-1].nextSibling:t.querySelector("style");t.insertBefore(o,(null==n?void 0:n.parentNode)===t?n:null)}else if("host"in t)if(f){const e=new(null!=(l=t.defaultView)?l:t.ownerDocument.defaultView).CSSStyleSheet;e.replaceSync(c),a?t.adoptedStyleSheets.unshift(e):t.adoptedStyleSheets=[e,...t.adoptedStyleSheets]}else{const e=t.querySelector("style");e?e.textContent=c+e.textContent:t.prepend(o)}else t.append(o);1&e.i&&t.insertBefore(o,null),4&e.i&&(o.textContent+="slot-fb{display:contents}slot-fb[hidden]{display:none}"),i&&i.add(s)}}else{let e=S.get(t);if(e||S.set(t,e=new Set),!e.has(s)){const n=null!=(o=t.defaultView)?o:t.ownerDocument.defaultView;let l;if(c.constructor===n.CSSStyleSheet)l=c;else{l=new n.CSSStyleSheet;for(let t=0;t<c.cssRules.length;t++)l.insertRule(c.cssRules[t].cssText,t)}a?t.adoptedStyleSheets.push(l):t.adoptedStyleSheets=[...t.adoptedStyleSheets,l],e.add(s)}}return s})(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(t);lt(t,e,o,n),s&&(s.map((t=>t())),o["s-rc"]=void 0);{const e=null!=(l=o["s-p"])?l:[],n=()=>ot(t);0===e.length?n():(Promise.all(e).then(n).catch(n),t.i|=4,e.length=0)}},lt=(t,e,n,l)=>{try{e=e.render(),t.i&=-17,t.i|=2,J(t,e,l)}catch(e){s(e,t.$hostElement$)}return null},ot=t=>{const e=t.$hostElement$,n=e,l=t.A;it(n,"componentDidRender",void 0,e),64&t.i?it(n,"componentDidUpdate",void 0,e):(t.i|=64,rt(e),it(n,"componentDidLoad",void 0,e),t.L(e),l||st()),t.k&&(t.k(),t.k=void 0),512&t.i&&b((()=>Q(t,!1))),t.i&=-517},st=()=>{b((()=>(t=>{const e=u.ce("appload",{detail:{namespace:"spoilerjs"}});return t.dispatchEvent(e),e})(r)))},it=(t,e,n,l)=>{if(t&&t[e])try{return t[e](n)}catch(t){s(t,l)}},rt=t=>t.classList.add("hydrated"),ct=(t,e,n,o)=>{const s=l(t);if(!s)return;const i=t,r=s.o.get(e),c=s.i,u=i;n=x(n,o.t[e][0]);const f=Number.isNaN(r)&&Number.isNaN(n);if(n!==r&&!f&&(s.o.set(e,n),2&c)){if(u.componentShouldUpdate&&!1===u.componentShouldUpdate(n,r,e)&&!(16&c))return;16&c||Q(s,!1)}},ut=(e,n)=>{var o,s;const i=e.prototype;if(n.t){const r=Object.entries(null!=(o=n.t)?o:{});r.map((([e,[o]])=>{if(31&o||32&o){const{get:s,set:r}=t(i,e)||{};s&&(n.t[e][0]|=2048),r&&(n.t[e][0]|=4096),Object.defineProperty(i,e,{get(){return s?s.apply(this):(t=e,l(this).o.get(t));var t},configurable:!0,enumerable:!0}),Object.defineProperty(i,e,{set(t){const s=l(this);if(s){if(r)return void 0===(32&o?this[e]:s.$hostElement$[e])&&s.o.get(e)&&(t=s.o.get(e)),r.apply(this,[x(t,o)]),void ct(this,e,t=32&o?this[e]:s.$hostElement$[e],n);ct(this,e,t,n)}}})}}));{const t=new Map;i.attributeChangedCallback=function(e,o,s){u.jmp((()=>{var c;const u=t.get(e),f=l(this);if(this.hasOwnProperty(u),i.hasOwnProperty(u)&&"number"==typeof this[u]&&this[u]==s)return;if(null==u){const t=null==f?void 0:f.i;if(f&&t&&!(8&t)&&s!==o){const l=this,i=null==(c=n.N)?void 0:c[e];null==i||i.forEach((n=>{const[[i,r]]=Object.entries(n);null!=l[i]&&(128&t||1&r)&&l[i].call(l,s,o,e)}))}return}const a=r.find((([t])=>t===u)),d=a&&4&a[1][0],p=d&&null===s&&void 0===this[u];d&&(s=null!==s&&"false"!==s);const h=Object.getOwnPropertyDescriptor(i,u);p||s==this[u]||h.get&&!h.set||(this[u]=s)}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(s=n.N)?s:{}),...r.filter((([t,e])=>31&e[0])).map((([e,n])=>{const l=n[1]||e;return t.set(l,e),l}))]))}}return e},ft=(t,e)=>{const o={i:e[0],p:e[1]};try{o.t=e[2];const r=t.prototype.connectedCallback,c=t.prototype.disconnectedCallback;return Object.assign(t.prototype,{__hasHostListenerAttached:!1,__registerHost(){((t,e)=>{const l={i:0,$hostElement$:t,l:e,o:new Map,_:new Map};l.D=new Promise((t=>l.L=t)),t["s-p"]=[],t["s-rc"]=[];const o=l;t.__stencil__getHostRef=()=>o,512&e.i&&n(t,l)})(this,o)},connectedCallback(){if(!this.__hasHostListenerAttached){if(!l(this))return;this.__hasHostListenerAttached=!0}(t=>{if(!(1&u.i)){const e=l(t);if(!e)return;const n=e.l,o=()=>{};if(1&e.i)(null==e?void 0:e.H)||(null==e?void 0:e.D)&&e.D.then((()=>{}));else{e.i|=1;{let n=t;for(;n=n.parentNode||n.host;)if(n["s-p"]){K(e,e.A=n);break}}n.t&&Object.entries(n.t).map((([e,[n]])=>{if(31&n&&Object.prototype.hasOwnProperty.call(t,e)){const n=t[e];delete t[e],t[e]=n}})),(async(t,e,n)=>{let l;try{if(!(32&e.i)&&(e.i|=32,l=t.constructor,customElements.whenDefined(t.localName).then((()=>e.i|=128)),l&&l.style)){let t;"string"==typeof l.style&&(t=l.style);const e=M(n);if(!i.has(e)){const l=()=>{};((t,e,n)=>{let l=i.get(t);f&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=e:l.replaceSync(e)):l=e,i.set(t,l)})(e,t,!!(1&n.i)),l()}}const o=e.A,s=()=>Q(e,!0);o&&o["s-rc"]?o["s-rc"].push(s):s()}catch(n){s(n,t),e.k&&(e.k(),e.k=void 0),e.L&&e.L(t)}})(t,e,n)}o()}})(this),r&&r.call(this)},disconnectedCallback(){(async t=>{1&u.i||l(t),S.has(t)&&S.delete(t),t.shadowRoot&&S.has(t.shadowRoot)&&S.delete(t.shadowRoot)})(this),c&&c.call(this)},__attachShadow(){if(this.shadowRoot){if("open"!==this.shadowRoot.mode)throw new Error(`Unable to re-use existing shadow root for ${o.p}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else j.call(this,o)}}),Object.defineProperty(t,"is",{value:o.p,configurable:!0}),ut(t,o)}catch(e){return s(e),t}},at=t=>u.C=t,dt=t=>Object.assign(u,t),pt=new WeakMap;function ht(t,e){let n=pt.get(e);n||(n={i:0,l:{i:0,p:e.tagName},$hostElement$:e},pt.set(e,n)),J(n,t)}function mt(t){return t}export{c as H,at as a,dt as b,w as g,E as h,ft as p,ht as r,g as s,mt as t}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as i,h as s}from"./p-CTHKI95o.js";class e{particles=[];config;width;height;spawningEnabled=!0;particleSizes=[{width:1,height:1},{width:1,height:2},{width:2,height:1},{width:2,height:2}];constructor(t,i,s){this.config=t,this.width=i,this.height=s,this.initializeParticles()}updateDimensions(t,i){this.width=t,this.height=i}initializeParticles(){const t=Math.ceil(.5*Math.ceil(this.width*this.height/100*this.config.density));for(let i=0;i<t;i++){const t=this.createParticle();t.life=Math.random()*t.maxLife,this.particles.push(t)}}createParticle(){const t=this.particleSizes[Math.floor(Math.random()*this.particleSizes.length)],i=this.config.scale,s=t.width*i,e=t.height*i,n=this.width-s-2,o=this.height-e-2,h=2+Math.random()*Math.max(0,n-2),a=2+Math.random()*Math.max(0,o-2),r=Math.random()*(this.config.maxVelocity-this.config.minVelocity)+this.config.minVelocity,l=Math.random()*Math.PI*2,c=Math.cos(l)*r,d=Math.sin(l)*r,u=.5*this.config.particleLifetime,p=1.5*this.config.particleLifetime,m=Math.random()*(p-u)+u;return{x:h,y:a,vx:c,vy:d,width:s,height:e,life:m,maxLife:m,alpha:0,maxAlpha:Math.random()<.5?1:.3+.3*Math.random()}}update(){const t=Math.ceil(this.width*this.height/100*this.config.density);for(let t=this.particles.length-1;t>=0;t--){const i=this.particles[t];i.x+=i.vx,i.y+=i.vy,i.life--;const s=.2*i.maxLife,e=.2*i.maxLife;i.alpha=i.life>i.maxLife-s?(i.maxLife-i.life)/s*i.maxAlpha:i.life<e?i.life/e*i.maxAlpha:i.maxAlpha;const n=.5*Math.max(this.width,this.height);(i.life<=0||i.x<-n||i.x>this.width+n||i.y<-n||i.y>this.height+n)&&this.particles.splice(t,1)}if(this.spawningEnabled)for(;this.particles.length<t;)this.particles.push(this.createParticle())}draw(t){t.fillStyle=this.config.textColor,this.particles.forEach((i=>{i.alpha>0&&(t.globalAlpha=i.alpha,t.fillRect(Math.round(i.x),Math.round(i.y),Math.ceil(i.width),Math.ceil(i.height)))})),t.globalAlpha=1}stopSpawning(){this.spawningEnabled=!1}hasParticles(){return this.particles.length>0}getMaxParticleLifetime(){if(0===this.particles.length)return 0;let t=0;for(const i of this.particles)i.life>t&&(t=i.life);return t}getParticles(){return this.particles}clear(){this.particles=[]}}const n=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get el(){return this}scale=1;minVelocity=.01;maxVelocity=.05;particleLifetime=120;density=8;revealDuration=300;spawnStopDelay=0;monitorPosition=!1;fps=60;revealing=!1;revealed=!1;canvases=[];contexts=[];particleManagers=[];animationFrameId=null;textColor="#000000";slotElement;containerDiv;resizeObserver;scrollHandler;resizeHandler;updateDebounceTimer=null;setupDebounceTimer=null;dpr=window.devicePixelRatio||1;lastKnownWidth=0;lastKnownHeight=0;positionMonitorId=null;isMonitoringPosition=!1;lastFrameTime=0;frameInterval=1e3/60;componentDidLoad(){this.frameInterval=1e3/Math.max(1,this.fps),this.setupSpoiler(),this.resizeObserver=new ResizeObserver((t=>{if(!this.revealed)for(const i of t){const t=i.contentRect.width,s=i.contentRect.height;t===this.lastKnownWidth&&s===this.lastKnownHeight||(this.lastKnownWidth=t,this.lastKnownHeight=s,this.handleSizeChange())}})),this.resizeObserver.observe(this.containerDiv),this.scrollHandler=()=>{this.revealed||this.debouncedUpdateCanvasPositions()},this.resizeHandler=()=>{this.revealed||this.handleSizeChange()},window.addEventListener("scroll",this.scrollHandler,{passive:!0}),window.addEventListener("resize",this.resizeHandler,{passive:!0}),this.monitorPosition&&this.startPositionMonitoring()}disconnectedCallback(){this.cleanup(),this.stopPositionMonitoring(),this.resizeObserver&&this.resizeObserver.disconnect(),null!==this.updateDebounceTimer&&clearTimeout(this.updateDebounceTimer),null!==this.setupDebounceTimer&&clearTimeout(this.setupDebounceTimer),window.removeEventListener("scroll",this.scrollHandler),window.removeEventListener("resize",this.resizeHandler)}cleanup(){null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null),this.canvases.forEach((t=>{t.parentNode&&t.parentNode.removeChild(t)})),this.canvases=[],this.contexts=[],this.particleManagers=[]}handleSizeChange(){null!==this.setupDebounceTimer&&clearTimeout(this.setupDebounceTimer),this.setupDebounceTimer=window.setTimeout((()=>{this.setupSpoiler(),this.setupDebounceTimer=null}),50)}startPositionMonitoring(){this.isMonitoringPosition||(this.isMonitoringPosition=!0,this.monitorPositionLoop())}stopPositionMonitoring(){this.isMonitoringPosition=!1,null!==this.positionMonitorId&&(cancelAnimationFrame(this.positionMonitorId),this.positionMonitorId=null)}monitorPositionLoop=()=>{this.isMonitoringPosition&&!this.revealed?(this.updateCanvasPositionsImmediate(),this.positionMonitorId=requestAnimationFrame(this.monitorPositionLoop)):this.positionMonitorId=null};updateCanvasPositionsImmediate(){const t=this.slotElement.assignedNodes();if(0===t.length)return;const i=document.createRange();let s=0;const e=window.scrollX??window.pageXOffset,n=window.scrollY??window.pageYOffset;t.forEach((t=>{if(t.nodeType===Node.TEXT_NODE){i.selectNodeContents(t);const o=i.getClientRects();for(let t=0;t<o.length;t++){const i=o[t];if(i.width>0&&i.height>0&&s<this.canvases.length){const t=this.canvases[s],o=i.left+e,h=i.top+n,a=parseFloat(t.style.left),r=parseFloat(t.style.top);(Math.abs(o-a)>.5||Math.abs(h-r)>.5)&&(t.style.left=o+"px",t.style.top=h+"px"),s++}}}else if(t.nodeType===Node.ELEMENT_NODE){const i=t.getClientRects();for(let t=0;t<i.length&&s<this.canvases.length;t++){const o=i[t];if(o.width>0&&o.height>0){const t=this.canvases[s],i=o.left+e,h=o.top+n,a=parseFloat(t.style.left),r=parseFloat(t.style.top);(Math.abs(i-a)>.5||Math.abs(h-r)>.5)&&(t.style.left=i+"px",t.style.top=h+"px"),s++}}}}))}debouncedUpdateCanvasPositions(){null!==this.updateDebounceTimer&&clearTimeout(this.updateDebounceTimer),this.updateDebounceTimer=window.setTimeout((()=>{this.updateCanvasPositions(),this.updateDebounceTimer=null}),16)}setupSpoiler(){this.cleanup();const t=window.getComputedStyle(this.el);this.textColor=t.color;const i=this.getTextBoundingBoxes();if(0===i.length)return;const s=this.containerDiv.getBoundingClientRect();this.lastKnownWidth=s.width,this.lastKnownHeight=s.height;const n={scale:this.scale,minVelocity:this.minVelocity,maxVelocity:this.maxVelocity,particleLifetime:this.particleLifetime,density:this.density,textColor:this.textColor};i.forEach((t=>{const i=document.createElement("canvas");i.width=t.width*this.dpr,i.height=t.height*this.dpr,i.style.width=t.width+"px",i.style.height=t.height+"px",i.style.position="absolute",i.style.left=t.x+"px",i.style.top=t.y+"px",i.style.pointerEvents="none",i.style.zIndex="1",document.body.appendChild(i);const s=i.getContext("2d",{alpha:!0});if(!s)return console.error("Failed to get 2D context for spoiler canvas"),void i.remove();s.scale(this.dpr,this.dpr),this.canvases.push(i),this.contexts.push(s);const o=new e(n,t.width,t.height);this.particleManagers.push(o)})),this.animate()}updateCanvasPositions(){const t=this.slotElement.assignedNodes();if(0===t.length)return;const i=document.createRange();let s=0;const e=window.scrollX??window.pageXOffset,n=window.scrollY??window.pageYOffset;t.forEach((t=>{if(t.nodeType===Node.TEXT_NODE){i.selectNodeContents(t);const o=i.getClientRects();for(let t=0;t<o.length;t++){const i=o[t];if(i.width>0&&i.height>0&&s<this.canvases.length){const t=this.canvases[s];t.style.left=i.left+e+"px",t.style.top=i.top+n+"px",s++}}}else if(t.nodeType===Node.ELEMENT_NODE){const i=t.getClientRects();for(let t=0;t<i.length&&s<this.canvases.length;t++){const o=i[t];if(o.width>0&&o.height>0){const t=this.canvases[s];t.style.left=o.left+e+"px",t.style.top=o.top+n+"px",s++}}}}))}getTextBoundingBoxes(){const t=[],i=this.slotElement.assignedNodes();if(0===i.length)return t;const s=document.createRange(),e=window.scrollX??window.pageXOffset,n=window.scrollY??window.pageYOffset;return i.forEach((i=>{if(i.nodeType===Node.TEXT_NODE){s.selectNodeContents(i);const o=s.getClientRects();for(let i=0;i<o.length;i++){const s=o[i];s.width>0&&s.height>0&&t.push({x:s.left+e,y:s.top+n,width:s.width,height:s.height})}}else if(i.nodeType===Node.ELEMENT_NODE){const s=i.getClientRects();for(let i=0;i<s.length;i++){const o=s[i];o.width>0&&o.height>0&&t.push({x:o.left+e,y:o.top+n,width:o.width,height:o.height})}}})),t}animate=(t=0)=>{if(this.revealed)return;const i=t-this.lastFrameTime;if(i<this.frameInterval)return void(this.animationFrameId=requestAnimationFrame(this.animate));this.lastFrameTime=t-i%this.frameInterval;const s=this.particleManagers.every((t=>!t.hasParticles()));if(this.revealing&&s)return this.revealed=!0,this.stopPositionMonitoring(),this.cleanup(),void this.canvases.forEach((t=>t.remove()));this.particleManagers.forEach(((t,i)=>{const s=this.contexts[i],e=this.canvases[i];s.clearRect(0,0,e.width/this.dpr,e.height/this.dpr),t.update(),t.draw(s)})),this.animationFrameId=requestAnimationFrame(this.animate)};handleClick=()=>{this.revealed||this.revealing||(this.revealing=!0,setTimeout((()=>{this.particleManagers.forEach((t=>{t.stopSpawning()}))}),this.spawnStopDelay))};handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleClick())};render(){return s("div",{key:"5c608f3aaf71c06a4b18550b3aaab88fbe250edb",ref:t=>this.containerDiv=t,class:this.revealed?"revealed":this.revealing?"revealing":"hidden",style:this.revealing?{"--reveal-duration":this.revealDuration+"ms"}:{},onClick:this.handleClick,onKeyDown:this.handleKeyDown,role:"button",tabindex:this.revealed?-1:0,"aria-label":this.revealed?void 0:"Click to reveal spoiler","aria-pressed":this.revealed},s("slot",{key:"eeff7d3183449979c3c12c5c1dc531f154425b3b",ref:t=>this.slotElement=t}))}static get style(){return":host{display:inline}div{position:relative;display:inline;cursor:pointer;user-select:none}div.hidden{color:transparent;text-shadow:none}div.revealing{cursor:pointer;user-select:none;animation:fadeInText var(--reveal-duration, 600ms) ease-out forwards}div.revealed{color:inherit;cursor:default;user-select:text}@keyframes fadeInText{from{color:transparent}to{color:inherit}}"}},[257,"spoiler-span",{scale:[2],minVelocity:[2,"min-velocity"],maxVelocity:[2,"max-velocity"],particleLifetime:[2,"particle-lifetime"],density:[2],revealDuration:[2,"reveal-duration"],spawnStopDelay:[2,"spawn-stop-delay"],monitorPosition:[4,"monitor-position"],fps:[2],revealing:[32],revealed:[32]}]);function o(){"undefined"!=typeof customElements&&["spoiler-span"].forEach((t=>{"spoiler-span"===t&&(customElements.get(t)||customElements.define(t,n))}))}o();const h=n,a=o;export{h as SpoilerSpan,a as defineCustomElement}
|
|
1
|
+
import{t,p as i,H as s,h as e}from"./p-DBUnISGp.js";class h{particles=[];config;width;height;spawningEnabled=!0;particleSizes=[{width:1,height:1},{width:1,height:2},{width:2,height:1},{width:2,height:2}];constructor(t,i,s){this.config=t,this.width=i,this.height=s,this.initializeParticles()}updateDimensions(t,i){this.width=t,this.height=i}initializeParticles(){const t=Math.ceil(.5*Math.ceil(this.width*this.height/100*this.config.density));for(let i=0;i<t;i++){const t=this.createParticle();t.life=Math.random()*t.maxLife,this.particles.push(t)}}createParticle(){const t=this.particleSizes[Math.floor(Math.random()*this.particleSizes.length)],i=this.config.scale,s=t.width*i,e=t.height*i,h=this.width-s-2,n=this.height-e-2,o=2+Math.random()*Math.max(0,h-2),a=2+Math.random()*Math.max(0,n-2),r=Math.random()*(this.config.maxVelocity-this.config.minVelocity)+this.config.minVelocity,l=Math.random()*Math.PI*2,c=Math.cos(l)*r,d=Math.sin(l)*r,u=.5*this.config.particleLifetime,p=1.5*this.config.particleLifetime,m=Math.random()*(p-u)+u;return{x:o,y:a,vx:c,vy:d,width:s,height:e,life:m,maxLife:m,alpha:0,maxAlpha:Math.random()<.5?1:.3+.3*Math.random()}}update(){const t=Math.ceil(this.width*this.height/100*this.config.density);for(let t=this.particles.length-1;t>=0;t--){const i=this.particles[t];i.x+=i.vx,i.y+=i.vy,i.life--;const s=.2*i.maxLife,e=.2*i.maxLife;i.alpha=i.life>i.maxLife-s?(i.maxLife-i.life)/s*i.maxAlpha:i.life<e?i.life/e*i.maxAlpha:i.maxAlpha;const h=.5*Math.max(this.width,this.height);(i.life<=0||i.x<-h||i.x>this.width+h||i.y<-h||i.y>this.height+h)&&this.particles.splice(t,1)}if(this.spawningEnabled)for(;this.particles.length<t;)this.particles.push(this.createParticle())}draw(t){t.fillStyle=this.config.textColor,this.particles.forEach((i=>{i.alpha>0&&(t.globalAlpha=i.alpha,t.fillRect(Math.round(i.x),Math.round(i.y),Math.ceil(i.width),Math.ceil(i.height)))})),t.globalAlpha=1}stopSpawning(){this.spawningEnabled=!1}hasParticles(){return this.particles.length>0}getMaxParticleLifetime(){if(0===this.particles.length)return 0;let t=0;for(const i of this.particles)i.life>t&&(t=i.life);return t}getParticles(){return this.particles}clear(){this.particles=[]}}const n=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get el(){return this}scale=1;minVelocity=.01;maxVelocity=.05;particleLifetime=120;density=8;revealDuration=300;spawnStopDelay=0;monitorPosition=!1;fps=60;revealing=!1;revealed=!1;canvases=[];contexts=[];particleManagers=[];animationFrameId=null;textColor="#000000";slotElement;containerDiv;resizeObserver;scrollHandler;resizeHandler;updateDebounceTimer=null;setupDebounceTimer=null;dpr=window.devicePixelRatio||1;lastKnownWidth=0;lastKnownHeight=0;positionMonitorId=null;isMonitoringPosition=!1;lastFrameTime=0;frameInterval=1e3/60;componentDidLoad(){this.frameInterval=1e3/Math.max(1,this.fps),this.setupSpoiler(),this.resizeObserver=new ResizeObserver((t=>{if(!this.revealed)for(const i of t){const t=i.contentRect.width,s=i.contentRect.height;t===this.lastKnownWidth&&s===this.lastKnownHeight||(this.lastKnownWidth=t,this.lastKnownHeight=s,this.handleSizeChange())}})),this.resizeObserver.observe(this.containerDiv),this.scrollHandler=()=>{this.revealed||this.debouncedUpdateCanvasPositions()},this.resizeHandler=()=>{this.revealed||this.handleSizeChange()},window.addEventListener("scroll",this.scrollHandler,{passive:!0}),window.addEventListener("resize",this.resizeHandler,{passive:!0}),this.monitorPosition&&this.startPositionMonitoring()}disconnectedCallback(){this.cleanup(),this.stopPositionMonitoring(),this.resizeObserver&&this.resizeObserver.disconnect(),null!==this.updateDebounceTimer&&clearTimeout(this.updateDebounceTimer),null!==this.setupDebounceTimer&&clearTimeout(this.setupDebounceTimer),window.removeEventListener("scroll",this.scrollHandler),window.removeEventListener("resize",this.resizeHandler)}cleanup(){null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null),this.canvases.forEach((t=>{t.parentNode&&t.parentNode.removeChild(t)})),this.canvases=[],this.contexts=[],this.particleManagers=[]}handleSizeChange(){null!==this.setupDebounceTimer&&clearTimeout(this.setupDebounceTimer),this.setupDebounceTimer=window.setTimeout((()=>{this.setupSpoiler(),this.setupDebounceTimer=null}),50)}startPositionMonitoring(){this.isMonitoringPosition||(this.isMonitoringPosition=!0,this.monitorPositionLoop())}stopPositionMonitoring(){this.isMonitoringPosition=!1,null!==this.positionMonitorId&&(cancelAnimationFrame(this.positionMonitorId),this.positionMonitorId=null)}monitorPositionLoop=()=>{this.isMonitoringPosition&&!this.revealed?(this.updateCanvasPositions(),this.positionMonitorId=requestAnimationFrame(this.monitorPositionLoop)):this.positionMonitorId=null};debouncedUpdateCanvasPositions(){null!==this.updateDebounceTimer&&clearTimeout(this.updateDebounceTimer),this.updateDebounceTimer=window.setTimeout((()=>{this.updateCanvasPositions(),this.updateDebounceTimer=null}),16)}setupSpoiler(){this.cleanup();const t=window.getComputedStyle(this.el);this.textColor=t.color;const i=this.getTextBoundingBoxes();if(0===i.length)return;const s=this.containerDiv.getBoundingClientRect();this.lastKnownWidth=s.width,this.lastKnownHeight=s.height;const e={scale:this.scale,minVelocity:this.minVelocity,maxVelocity:this.maxVelocity,particleLifetime:this.particleLifetime,density:this.density,textColor:this.textColor};i.forEach((t=>{const i=document.createElement("canvas");i.width=t.width*this.dpr,i.height=t.height*this.dpr,i.style.width=t.width+"px",i.style.height=t.height+"px",i.style.position="absolute",i.style.left=t.x+"px",i.style.top=t.y+"px",i.style.pointerEvents="none",i.style.zIndex="1",this.containerDiv.appendChild(i);const s=i.getContext("2d",{alpha:!0});if(!s)return console.error("Failed to get 2D context for spoiler canvas"),void i.remove();s.scale(this.dpr,this.dpr),this.canvases.push(i),this.contexts.push(s);const n=new h(e,t.width,t.height);this.particleManagers.push(n)})),this.animate()}updateCanvasPositions(){const t=this.getTextBoundingBoxes(),i=Math.min(t.length,this.canvases.length);for(let s=0;s<i;s++){const i=this.canvases[s],e=parseFloat(i.style.left),h=parseFloat(i.style.top);(Math.abs(t[s].x-e)>.5||Math.abs(t[s].y-h)>.5)&&(i.style.left=t[s].x+"px",i.style.top=t[s].y+"px")}}getCanvasOrigin(){const t=document.createElement("span");t.style.position="absolute",t.style.left="0",t.style.top="0",t.style.width="0",t.style.height="0",t.style.pointerEvents="none",this.containerDiv.appendChild(t);const i=t.getBoundingClientRect();return t.remove(),{x:i.left,y:i.top}}getTextBoundingBoxes(){const t=[],i=this.slotElement.assignedNodes();if(0===i.length)return t;const s=document.createRange(),e=this.getCanvasOrigin(),h=i=>{for(let s=0;s<i.length;s++){const h=i[s];h.width>0&&h.height>0&&t.push({x:h.left-e.x,y:h.top-e.y,width:h.width,height:h.height})}};return i.forEach((t=>{t.nodeType===Node.TEXT_NODE?(s.selectNodeContents(t),h(s.getClientRects())):t.nodeType===Node.ELEMENT_NODE&&h(t.getClientRects())})),t}animate=(t=0)=>{if(this.revealed)return;const i=t-this.lastFrameTime;if(i<this.frameInterval)return void(this.animationFrameId=requestAnimationFrame(this.animate));this.lastFrameTime=t-i%this.frameInterval;const s=this.particleManagers.every((t=>!t.hasParticles()));if(this.revealing&&s)return this.revealed=!0,this.stopPositionMonitoring(),this.cleanup(),void this.canvases.forEach((t=>t.remove()));this.particleManagers.forEach(((t,i)=>{const s=this.contexts[i],e=this.canvases[i];s.clearRect(0,0,e.width/this.dpr,e.height/this.dpr),t.update(),t.draw(s)})),this.animationFrameId=requestAnimationFrame(this.animate)};handleClick=()=>{this.revealed||this.revealing||(this.revealing=!0,setTimeout((()=>{this.particleManagers.forEach((t=>{t.stopSpawning()}))}),this.spawnStopDelay))};handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleClick())};render(){return e("div",{key:"725c48caf1e327b1736eb4b8e397a73f746a2441",ref:t=>this.containerDiv=t,class:this.revealed?"revealed":this.revealing?"revealing":"hidden",style:this.revealing?{"--reveal-duration":this.revealDuration+"ms"}:{},onClick:this.handleClick,onKeyDown:this.handleKeyDown,role:"button",tabindex:this.revealed?-1:0,"aria-label":this.revealed?void 0:"Click to reveal spoiler","aria-pressed":this.revealed},e("slot",{key:"f0a60d3c19d075ad0fcce82ba12461792d679542",ref:t=>this.slotElement=t}))}static get style(){return":host{display:inline}div{position:relative;display:inline;cursor:pointer;user-select:none}div.hidden{color:transparent;text-shadow:none}div.revealing{cursor:pointer;user-select:none;animation:fadeInText var(--reveal-duration, 600ms) ease-out forwards}div.revealed{color:inherit;cursor:inherit;user-select:text}@keyframes fadeInText{from{color:transparent}to{color:inherit}}"}},[769,"spoiler-span",{scale:[2],minVelocity:[2,"min-velocity"],maxVelocity:[2,"max-velocity"],particleLifetime:[2,"particle-lifetime"],density:[2],revealDuration:[2,"reveal-duration"],spawnStopDelay:[2,"spawn-stop-delay"],monitorPosition:[4,"monitor-position"],fps:[2],revealing:[32],revealed:[32]}]);function o(){"undefined"!=typeof customElements&&["spoiler-span"].forEach((i=>{"spoiler-span"===i&&(customElements.get(t(i))||customElements.define(t(i),n))}))}o();const a=n,r=o;export{a as SpoilerSpan,r as defineCustomElement}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spoilerjs",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "A fast, lightweight web component for creating spoiler text with particle effects",
|
|
5
|
-
"author": "Shajid Hasan",
|
|
5
|
+
"author": "Shajid Hasan Naim",
|
|
6
6
|
"main": "dist/components/index.js",
|
|
7
7
|
"module": "dist/components/index.js",
|
|
8
8
|
"types": "dist/components/index.d.ts",
|
|
@@ -23,15 +23,24 @@
|
|
|
23
23
|
"files": [
|
|
24
24
|
"dist/components/"
|
|
25
25
|
],
|
|
26
|
+
"scripts": {
|
|
27
|
+
"build": "stencil build",
|
|
28
|
+
"start": "stencil build --dev --watch --serve",
|
|
29
|
+
"test": "stencil test --spec --e2e",
|
|
30
|
+
"test.watch": "stencil test --spec --e2e --watchAll",
|
|
31
|
+
"generate": "stencil generate",
|
|
32
|
+
"prepublishOnly": "npm run build",
|
|
33
|
+
"version": "npm run build"
|
|
34
|
+
},
|
|
26
35
|
"devDependencies": {
|
|
27
|
-
"@stencil/core": "^4.
|
|
28
|
-
"@tailwindcss/cli": "^4.
|
|
36
|
+
"@stencil/core": "^4.43.5",
|
|
37
|
+
"@tailwindcss/cli": "^4.3.3",
|
|
29
38
|
"@types/jest": "^29.5.14",
|
|
30
|
-
"@types/node": "^22.
|
|
39
|
+
"@types/node": "^22.20.1",
|
|
31
40
|
"jest": "^29.7.0",
|
|
32
41
|
"jest-cli": "^29.7.0",
|
|
33
|
-
"puppeteer": "^24.
|
|
34
|
-
"tailwindcss": "^4.
|
|
42
|
+
"puppeteer": "^24.43.1",
|
|
43
|
+
"tailwindcss": "^4.3.3"
|
|
35
44
|
},
|
|
36
45
|
"license": "MIT",
|
|
37
46
|
"keywords": [
|
|
@@ -54,13 +63,5 @@
|
|
|
54
63
|
},
|
|
55
64
|
"publishConfig": {
|
|
56
65
|
"access": "public"
|
|
57
|
-
},
|
|
58
|
-
"scripts": {
|
|
59
|
-
"build": "stencil build",
|
|
60
|
-
"start": "stencil build --dev --watch --serve",
|
|
61
|
-
"test": "stencil test --spec --e2e",
|
|
62
|
-
"test.watch": "stencil test --spec --e2e --watchAll",
|
|
63
|
-
"generate": "stencil generate",
|
|
64
|
-
"version": "npm run build"
|
|
65
66
|
}
|
|
66
67
|
}
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 Shajid Hasan
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
var e=Object.defineProperty,t=(e,t)=>{var n;Object.entries(null!=(n=t.o.t)?n:{}).map((([n,[o]])=>{if(31&o||32&o){const o=e[n],l=function(e,t){for(;e;){const n=Object.getOwnPropertyDescriptor(e,t);if(null==n?void 0:n.get)return n;e=Object.getPrototypeOf(e)}}(Object.getPrototypeOf(e),n)||Object.getOwnPropertyDescriptor(e,n);l&&Object.defineProperty(e,n,{get(){return l.get.call(this)},set(e){l.set.call(this,e)},configurable:!0,enumerable:!0}),e[n]=t.l.has(n)?t.l.get(n):o}}))},n=e=>{if(e.__stencil__getHostRef)return e.__stencil__getHostRef()},o=(e,t)=>t in e,l=(e,t)=>(0,console.error)(e,t),s=new Map,r="undefined"!=typeof window?window:{},i=r.HTMLElement||class{},c={i:0,u:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,o)=>e.addEventListener(t,n,o),rel:(e,t,n,o)=>e.removeEventListener(t,n,o),ce:(e,t)=>new CustomEvent(e,t)},u=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),f=!!u&&(()=>!!r.document&&Object.getOwnPropertyDescriptor(r.document.adoptedStyleSheets,"length").writable)(),a=!1,d=[],h=[],p=(e,t)=>n=>{e.push(n),a||(a=!0,t&&4&c.i?v(b):c.raf(b))},m=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){l(e)}e.length=0},b=()=>{m(d),m(h),(a=d.length>0)&&c.raf(b)},v=e=>Promise.resolve(undefined).then(e),y=p(h,!0),w=e=>{const t=new URL(e,c.u);return t.origin!==r.location.origin?t.href:t.pathname},$=e=>c.u=e,g=e=>"object"==(e=typeof e)||"function"===e;((t,n)=>{for(var o in n)e(t,o,{get:n[o],enumerable:!0})})({},{err:()=>O,map:()=>S,ok:()=>j,unwrap:()=>E,unwrapErr:()=>M});var j=e=>({isOk:!0,isErr:!1,value:e}),O=e=>({isOk:!1,isErr:!0,value:e});function S(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>j(e))):j(n)}if(e.isErr)return O(e.value);throw"should never get here"}var k,E=e=>{if(e.isOk)return e.value;throw e.value},M=e=>{if(e.isErr)return e.value;throw e.value};function C(){const e=this.attachShadow({mode:"open"});void 0===k&&(k=null),k&&(f?e.adoptedStyleSheets.push(k):e.adoptedStyleSheets=[...e.adoptedStyleSheets,k])}var x=new WeakMap,P=e=>"sc-"+e.h,A=(e,t,...n)=>{let o=null,l=null,s=!1,r=!1;const i=[],c=t=>{for(let n=0;n<t.length;n++)o=t[n],Array.isArray(o)?c(o):null!=o&&"boolean"!=typeof o&&((s="function"!=typeof e&&!g(o))&&(o=String(o)),s&&r?i[i.length-1].p+=o:i.push(s?R(null,o):o),r=s)};if(c(n),t){t.key&&(l=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const u=R(e,null);return u.m=t,i.length>0&&(u.v=i),u.$=l,u},R=(e,t)=>({i:0,j:e,p:t,O:null,v:null,m:null,$:null}),U={},W=e=>{const t=e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");return new RegExp(`(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${t}))(${t}\\b)`,"g")};W("::slotted"),W(":host"),W(":host-context");var _,D=(e,t)=>null==e||g(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?"string"==typeof e?parseFloat(e):"number"==typeof e?e:NaN:e,N=(e,t,n,l,s,i)=>{if(n===l)return;let u=o(e,t),f=t.toLowerCase();if("class"===t){const t=e.classList,o=F(n);let s=F(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("style"===t){for(const t in n)l&&null!=l[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in l)n&&l[t]===n[t]||(t.includes("-")?e.style.setProperty(t,l[t]):e.style[t]=l[t])}else if("key"===t);else if("ref"===t)l&&l(e);else if(e.__lookupSetter__(t)||"o"!==t[0]||"n"!==t[1]){const o=g(l);if(u||o&&null!==l)try{if(e.tagName.includes("-"))e[t]!==l&&(e[t]=l);else{const o=null==l?"":l;"list"===t?u=!1:null!=n&&e[t]==o||("function"==typeof e.__lookupSetter__(t)?e[t]=o:e.setAttribute(t,o))}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!u||4&i||s)&&!o&&1===e.nodeType&&e.setAttribute(t,l=!0===l?"":l)}else if(t="-"===t[2]?t.slice(3):o(r,f)?f.slice(2):f[2]+t.slice(3),n||l){const o=t.endsWith(H);t=t.replace(V,""),n&&c.rel(e,t,n,o),l&&c.ael(e,t,l,o)}},L=/\s/,F=e=>("object"==typeof e&&e&&"baseVal"in e&&(e=e.baseVal),e&&"string"==typeof e?e.split(L):[]),H="Capture",V=new RegExp(H+"$"),q=(e,t,n)=>{const o=11===t.O.nodeType&&t.O.host?t.O.host:t.O,l=e&&e.m||{},s=t.m||{};for(const e of z(Object.keys(l)))e in s||N(o,e,l[e],void 0,n,t.i);for(const e of z(Object.keys(s)))N(o,e,l[e],s[e],n,t.i)};function z(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var I=!1,Y=(e,t,n)=>{const o=t.v[n];let l,s,i=0;if(!r.document)throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component.");if(l=o.O=r.document.createElement(o.j),q(null,o,I),o.v)for(i=0;i<o.v.length;++i)s=Y(e,o,i),s&&l.appendChild(s);return l["s-hn"]=_,l},B=(e,t,n,o,l,s)=>{let r,i=e;for(i.shadowRoot&&i.tagName===_&&(i=i.shadowRoot);l<=s;++l)o[l]&&(r=Y(null,n,l),r&&(o[l].O=r,T(i,r,t)))},G=(e,t,n)=>{for(let o=t;o<=n;++o){const t=e[o];if(t){const e=t.O;Q(t),e&&e.remove()}}},J=(e,t,n=!1)=>e.j===t.j&&(n?(n&&!e.$&&t.$&&(e.$=t.$),!0):e.$===t.$),K=(e,t,n=!1)=>{const o=t.O=e.O,l=e.v,s=t.v;q(e,t,I),null!==l&&null!==s?((e,t,n,o,l=!1)=>{let s,r,i=0,c=0,u=0,f=0,a=t.length-1,d=t[0],h=t[a],p=o.length-1,m=o[0],b=o[p];for(;i<=a&&c<=p;)if(null==d)d=t[++i];else if(null==h)h=t[--a];else if(null==m)m=o[++c];else if(null==b)b=o[--p];else if(J(d,m,l))K(d,m,l),d=t[++i],m=o[++c];else if(J(h,b,l))K(h,b,l),h=t[--a],b=o[--p];else if(J(d,b,l))K(d,b,l),T(e,d.O,h.O.nextSibling),d=t[++i],b=o[--p];else if(J(h,m,l))K(h,m,l),T(e,h.O,d.O),h=t[--a],m=o[++c];else{for(u=-1,f=i;f<=a;++f)if(t[f]&&null!==t[f].$&&t[f].$===m.$){u=f;break}u>=0?(r=t[u],r.j!==m.j?s=Y(t&&t[c],n,u):(K(r,m,l),t[u]=void 0,s=r.O),m=o[++c]):(s=Y(t&&t[c],n,c),m=o[++c]),s&&T(d.O.parentNode,s,d.O)}i>a?B(e,null==o[p+1]?null:o[p+1].O,n,o,c,p):c>p&&G(t,i,a)})(o,l,t,s,n):null!==s?B(o,null,t,s,0,s.length-1):!n&&null!==l&&G(l,0,l.length-1)},Q=e=>{e.m&&e.m.ref&&e.m.ref(null),e.v&&e.v.map(Q)},T=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),X=(e,t,n=!1)=>{const o=e.$hostElement$,l=e.S||R(null,null);var s;const r=(s=t)&&s.j===U?t:A(null,null,t);if(_=o.tagName,n&&r.m)for(const e of Object.keys(r.m))o.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(r.m[e]=o[e]);r.j=null,r.i|=4,e.S=r,r.O=l.O=o.shadowRoot||o,K(l,r,n)},Z=(e,t)=>{if(t&&!e.k&&t["s-p"]){const n=t["s-p"].push(new Promise((o=>e.k=()=>{t["s-p"].splice(n-1,1),o()})))}},ee=(e,t)=>{if(e.i|=16,4&e.i)return void(e.i|=512);Z(e,e.M);const n=()=>te(e,t);if(!t)return y(n);queueMicrotask((()=>{n()}))},te=(e,t)=>{const n=e.$hostElement$,o=n;if(!o)throw new Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return l=ce(o,t?"componentWillLoad":"componentWillUpdate",void 0,n),l=ne(l,(()=>ce(o,"componentWillRender",void 0,n))),ne(l,(()=>le(e,o,t)))},ne=(e,t)=>oe(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),oe=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,le=async(e,t,n)=>{var o;const l=e.$hostElement$,i=l["s-rc"];n&&(e=>{const t=e.o,n=e.$hostElement$,o=t.i,l=((e,t)=>{var n;const o=P(t),l=s.get(o);if(!r.document)return o;if(e=11===e.nodeType?e:r.document,l)if("string"==typeof l){let s,i=x.get(e=e.head||e);if(i||x.set(e,i=new Set),!i.has(o)){{s=r.document.createElement("style"),s.innerHTML=l;const o=null!=(n=c.C)?n:function(){var e,t,n;return null!=(n=null==(t=null==(e=r.document.head)?void 0:e.querySelector('meta[name="csp-nonce"]'))?void 0:t.getAttribute("content"))?n:void 0}();if(null!=o&&s.setAttribute("nonce",o),!(1&t.i))if("HEAD"===e.nodeName){const t=e.querySelectorAll("link[rel=preconnect]"),n=t.length>0?t[t.length-1].nextSibling:e.querySelector("style");e.insertBefore(s,(null==n?void 0:n.parentNode)===e?n:null)}else if("host"in e)if(u){const t=new CSSStyleSheet;t.replaceSync(l),f?e.adoptedStyleSheets.unshift(t):e.adoptedStyleSheets=[t,...e.adoptedStyleSheets]}else{const t=e.querySelector("style");t?t.innerHTML=l+t.innerHTML:e.prepend(s)}else e.append(s);1&t.i&&e.insertBefore(s,null)}4&t.i&&(s.innerHTML+="slot-fb{display:contents}slot-fb[hidden]{display:none}"),i&&i.add(o)}}else e.adoptedStyleSheets.includes(l)||(f?e.adoptedStyleSheets.push(l):e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return o})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&o&&(n["s-sc"]=l,n.classList.add(l+"-h"))})(e);se(e,t,l,n),i&&(i.map((e=>e())),l["s-rc"]=void 0);{const t=null!=(o=l["s-p"])?o:[],n=()=>re(e);0===t.length?n():(Promise.all(t).then(n),e.i|=4,t.length=0)}},se=(e,t,n,o)=>{try{t=t.render(),e.i&=-17,e.i|=2,X(e,t,o)}catch(t){l(t,e.$hostElement$)}return null},re=e=>{const t=e.$hostElement$,n=t,o=e.M;ce(n,"componentDidRender",void 0,t),64&e.i?ce(n,"componentDidUpdate",void 0,t):(e.i|=64,ue(t),ce(n,"componentDidLoad",void 0,t),e.P(t),o||ie()),e.k&&(e.k(),e.k=void 0),512&e.i&&v((()=>ee(e,!1))),e.i&=-517},ie=()=>{v((()=>(e=>{const t=c.ce("appload",{detail:{namespace:"spoilerjs"}});return e.dispatchEvent(t),t})(r)))},ce=(e,t,n,o)=>{if(e&&e[t])try{return e[t](n)}catch(e){l(e,o)}},ue=e=>e.classList.add("hydrated"),fe=(e,t,o,l)=>{const s=n(e);if(!s)return;const r=e,i=s.l.get(t),c=s.i,u=r;o=D(o,l.t[t][0]);const f=Number.isNaN(i)&&Number.isNaN(o);if(o!==i&&!f&&(s.l.set(t,o),2==(18&c))){if(u.componentShouldUpdate&&!1===u.componentShouldUpdate(o,i,t))return;ee(s,!1)}},ae=(e,t)=>{var o,l;const s=e.prototype;if(t.t){const r=Object.entries(null!=(o=t.t)?o:{});r.map((([e,[o]])=>{if(31&o||32&o){const{get:l,set:r}=Object.getOwnPropertyDescriptor(s,e)||{};l&&(t.t[e][0]|=2048),r&&(t.t[e][0]|=4096),Object.defineProperty(s,e,{get(){return l?l.apply(this):(t=e,n(this).l.get(t));var t},configurable:!0,enumerable:!0}),Object.defineProperty(s,e,{set(l){const s=n(this);if(s){if(r)return void 0===(32&o?this[e]:s.$hostElement$[e])&&s.l.get(e)&&(l=s.l.get(e)),r.apply(this,[D(l,o)]),void fe(this,e,l=32&o?this[e]:s.$hostElement$[e],t);fe(this,e,l,t)}}})}}));{const o=new Map;s.attributeChangedCallback=function(e,l,i){c.jmp((()=>{var c;const u=o.get(e),f=n(this);if(this.hasOwnProperty(u),s.hasOwnProperty(u)&&"number"==typeof this[u]&&this[u]==i)return;if(null==u){const n=null==f?void 0:f.i;if(f&&n&&!(8&n)&&128&n&&i!==l){const n=this,o=null==(c=t.A)?void 0:c[e];null==o||o.forEach((t=>{null!=n[t]&&n[t].call(n,i,l,e)}))}return}const a=r.find((([e])=>e===u));a&&4&a[1][0]&&(i=null!==i&&"false"!==i);const d=Object.getOwnPropertyDescriptor(s,u);i==this[u]||d.get&&!d.set||(this[u]=i)}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(l=t.A)?l:{}),...r.filter((([e,t])=>31&t[0])).map((([e,t])=>{const n=t[1]||e;return o.set(n,e),n}))]))}}return e},de=(e,o)=>{const l={i:o[0],h:o[1]};l.t=o[2];const r=e.prototype.connectedCallback,i=e.prototype.disconnectedCallback;return Object.assign(e.prototype,{__hasHostListenerAttached:!1,__registerHost(){((e,n)=>{const o={i:0,$hostElement$:e,o:n,l:new Map,R:new Map};o.U=new Promise((e=>o.P=e)),e["s-p"]=[],e["s-rc"]=[];const l=o;e.__stencil__getHostRef=()=>l,t(e,o)})(this,l)},connectedCallback(){if(!this.__hasHostListenerAttached){if(!n(this))return;this.__hasHostListenerAttached=!0}(e=>{if(!(1&c.i)){const t=n(e);if(!t)return;const o=t.o,l=()=>{};if(1&t.i)(null==t?void 0:t.W)||(null==t?void 0:t.U)&&t.U.then((()=>{}));else{t.i|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){Z(t,t.M=n);break}}o.t&&Object.entries(o.t).map((([t,[n]])=>{if(31&n&&t in e&&e[t]!==Object.prototype[t]){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let o;if(!(32&t.i)&&(t.i|=32,o=e.constructor,customElements.whenDefined(e.localName).then((()=>t.i|=128)),o&&o.style)){let e;"string"==typeof o.style&&(e=o.style);const t=P(n);if(!s.has(t)){const o=()=>{};((e,t,n)=>{let o=s.get(e);u&&n?(o=o||new CSSStyleSheet,"string"==typeof o?o=t:o.replaceSync(t)):o=t,s.set(e,o)})(t,e,!!(1&n.i)),o()}}const l=t.M,r=()=>ee(t,!0);l&&l["s-rc"]?l["s-rc"].push(r):r()})(e,t,o)}l()}})(this),r&&r.call(this)},disconnectedCallback(){(async e=>{1&c.i||n(e),x.has(e)&&x.delete(e),e.shadowRoot&&x.has(e.shadowRoot)&&x.delete(e.shadowRoot)})(this),i&&i.call(this)},__attachShadow(){if(this.shadowRoot){if("open"!==this.shadowRoot.mode)throw new Error(`Unable to re-use existing shadow root for ${l.h}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else C.call(this,l)}}),e.is=l.h,ae(e,l)},he=e=>c.C=e,pe=e=>Object.assign(c,e);function me(e,t){X({$hostElement$:t},e)}export{i as H,he as a,pe as b,w as g,A as h,de as p,me as r,$ as s}
|