nebbuler-elements 0.1.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/LICENSE +21 -0
- package/README.md +91 -0
- package/dist/index.d.mts +38 -0
- package/dist/index.d.ts +38 -0
- package/dist/index.js +77 -0
- package/dist/index.mjs +77 -0
- package/dist/index.umd.js +77 -0
- package/package.json +58 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Juan Pablo Monsalvez · Nebbuler
|
|
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.
|
package/README.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# @nebbuler/elements
|
|
2
|
+
|
|
3
|
+
> Zero-dependency Web Components for embedding Nebbuler Mundial 2026 widgets in any HTML page.
|
|
4
|
+
|
|
5
|
+
Works in WordPress, Squarespace, Shopify, raw HTML, Hugo, Astro, blogs, anything that can run a `<script>` tag. No React, no Vue, no framework. Pure custom elements.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
### Via CDN (recommended, zero setup)
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<script src="https://cdn.jsdelivr.net/npm/@nebbuler/elements"></script>
|
|
13
|
+
|
|
14
|
+
<!-- Then use any of these custom elements anywhere -->
|
|
15
|
+
<nebbuler-mundial-widget seleccion="argentina"></nebbuler-mundial-widget>
|
|
16
|
+
<nebbuler-calculadora plataforma="substack" precio="5" suscriptores="200"></nebbuler-calculadora>
|
|
17
|
+
<nebbuler-quiniela></nebbuler-quiniela>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### Via npm
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install @nebbuler/elements
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```js
|
|
27
|
+
import '@nebbuler/elements'
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Components
|
|
31
|
+
|
|
32
|
+
### `<nebbuler-mundial-widget>`
|
|
33
|
+
|
|
34
|
+
Show a country card with flag, currency, creator ecosystem size, and Programa La Sombra commission.
|
|
35
|
+
|
|
36
|
+
| Attribute | Type | Default |
|
|
37
|
+
|-------------|-------------------------------|--------------|
|
|
38
|
+
| `seleccion` | argentina · brasil · mexico · colombia · uruguay · ecuador · chile · peru | argentina |
|
|
39
|
+
| `theme` | dark · light | dark |
|
|
40
|
+
|
|
41
|
+
### `<nebbuler-calculadora>`
|
|
42
|
+
|
|
43
|
+
Embed the "how much your platform takes from you" calculator inline.
|
|
44
|
+
|
|
45
|
+
| Attribute | Type | Default |
|
|
46
|
+
|----------------|---------------------------------------|-----------|
|
|
47
|
+
| `plataforma` | substack · patreon · gumroad · beehiiv | substack |
|
|
48
|
+
| `precio` | number (USD/month) | 5 |
|
|
49
|
+
| `suscriptores` | number | 200 |
|
|
50
|
+
| `theme` | dark · light | dark |
|
|
51
|
+
|
|
52
|
+
### `<nebbuler-quiniela>`
|
|
53
|
+
|
|
54
|
+
CTA card pointing to the World Cup prediction game.
|
|
55
|
+
|
|
56
|
+
| Attribute | Type | Default |
|
|
57
|
+
|-----------|--------------|---------|
|
|
58
|
+
| `theme` | dark · light | dark |
|
|
59
|
+
|
|
60
|
+
## Example: blog post embed
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<h2>¿Vale la pena cobrar membresías en Substack siendo argentino?</h2>
|
|
64
|
+
|
|
65
|
+
<p>Calculá lo que perdés en comisiones:</p>
|
|
66
|
+
|
|
67
|
+
<nebbuler-calculadora plataforma="substack" precio="5" suscriptores="500"></nebbuler-calculadora>
|
|
68
|
+
|
|
69
|
+
<p>Para creadores argentinos que cubren el Mundial 2026, Nebbuler tiene 0% comisión hasta el 31 de julio:</p>
|
|
70
|
+
|
|
71
|
+
<nebbuler-mundial-widget seleccion="argentina"></nebbuler-mundial-widget>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Bundle size
|
|
75
|
+
|
|
76
|
+
ESM: ~3 KB gzipped. UMD: ~3.5 KB gzipped. No dependencies.
|
|
77
|
+
|
|
78
|
+
## Browser support
|
|
79
|
+
|
|
80
|
+
Modern browsers with Custom Elements v1 support (Chrome 67+, Firefox 63+, Safari 10.1+, Edge 79+).
|
|
81
|
+
|
|
82
|
+
## License
|
|
83
|
+
|
|
84
|
+
MIT © Juan Pablo Monsalvez
|
|
85
|
+
|
|
86
|
+
## Related
|
|
87
|
+
|
|
88
|
+
- [Open API](https://nebbuler.com/api/mundial/v1/docs)
|
|
89
|
+
- [TypeScript SDK (for React, Vue, Svelte, Node)](https://www.npmjs.com/package/nebbuler-mundial-sdk)
|
|
90
|
+
- [MCP Server (for Claude, Cursor, Windsurf)](https://www.npmjs.com/package/nebbuler-mundial-mcp)
|
|
91
|
+
- [Nebbuler · Programa La Sombra](https://nebbuler.com/mundial)
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @nebbuler/elements — Zero-dependency Web Components for the Mundial 2026.
|
|
3
|
+
*
|
|
4
|
+
* Drop in any HTML page:
|
|
5
|
+
* <script src="https://cdn.jsdelivr.net/npm/@nebbuler/elements"></script>
|
|
6
|
+
* <nebbuler-mundial-widget seleccion="argentina"></nebbuler-mundial-widget>
|
|
7
|
+
* <nebbuler-calculadora></nebbuler-calculadora>
|
|
8
|
+
* <nebbuler-quiniela></nebbuler-quiniela>
|
|
9
|
+
*
|
|
10
|
+
* Data attribution: CC-BY 4.0 · Nebbuler · nebbuler.com
|
|
11
|
+
*/
|
|
12
|
+
declare class NebbulerMundialWidget extends HTMLElement {
|
|
13
|
+
static observedAttributes: string[];
|
|
14
|
+
private root;
|
|
15
|
+
constructor();
|
|
16
|
+
connectedCallback(): void;
|
|
17
|
+
attributeChangedCallback(): void;
|
|
18
|
+
private render;
|
|
19
|
+
}
|
|
20
|
+
declare class NebbulerCalculadora extends HTMLElement {
|
|
21
|
+
static observedAttributes: string[];
|
|
22
|
+
private root;
|
|
23
|
+
constructor();
|
|
24
|
+
connectedCallback(): void;
|
|
25
|
+
attributeChangedCallback(): void;
|
|
26
|
+
private render;
|
|
27
|
+
}
|
|
28
|
+
declare class NebbulerQuiniela extends HTMLElement {
|
|
29
|
+
static observedAttributes: string[];
|
|
30
|
+
private root;
|
|
31
|
+
constructor();
|
|
32
|
+
connectedCallback(): void;
|
|
33
|
+
private render;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
declare const version = "0.1.0";
|
|
37
|
+
|
|
38
|
+
export { NebbulerCalculadora, NebbulerMundialWidget, NebbulerQuiniela, version };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @nebbuler/elements — Zero-dependency Web Components for the Mundial 2026.
|
|
3
|
+
*
|
|
4
|
+
* Drop in any HTML page:
|
|
5
|
+
* <script src="https://cdn.jsdelivr.net/npm/@nebbuler/elements"></script>
|
|
6
|
+
* <nebbuler-mundial-widget seleccion="argentina"></nebbuler-mundial-widget>
|
|
7
|
+
* <nebbuler-calculadora></nebbuler-calculadora>
|
|
8
|
+
* <nebbuler-quiniela></nebbuler-quiniela>
|
|
9
|
+
*
|
|
10
|
+
* Data attribution: CC-BY 4.0 · Nebbuler · nebbuler.com
|
|
11
|
+
*/
|
|
12
|
+
declare class NebbulerMundialWidget extends HTMLElement {
|
|
13
|
+
static observedAttributes: string[];
|
|
14
|
+
private root;
|
|
15
|
+
constructor();
|
|
16
|
+
connectedCallback(): void;
|
|
17
|
+
attributeChangedCallback(): void;
|
|
18
|
+
private render;
|
|
19
|
+
}
|
|
20
|
+
declare class NebbulerCalculadora extends HTMLElement {
|
|
21
|
+
static observedAttributes: string[];
|
|
22
|
+
private root;
|
|
23
|
+
constructor();
|
|
24
|
+
connectedCallback(): void;
|
|
25
|
+
attributeChangedCallback(): void;
|
|
26
|
+
private render;
|
|
27
|
+
}
|
|
28
|
+
declare class NebbulerQuiniela extends HTMLElement {
|
|
29
|
+
static observedAttributes: string[];
|
|
30
|
+
private root;
|
|
31
|
+
constructor();
|
|
32
|
+
connectedCallback(): void;
|
|
33
|
+
private render;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
declare const version = "0.1.0";
|
|
37
|
+
|
|
38
|
+
export { NebbulerCalculadora, NebbulerMundialWidget, NebbulerQuiniela, version };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
"use strict";var m=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var M=(t,e)=>{for(var s in e)m(t,s,{get:e[s],enumerable:!0})},C=(t,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of S(e))!k.call(t,n)&&n!==s&&m(t,n,{get:()=>e[n],enumerable:!(a=w(e,n))||a.enumerable});return t};var A=t=>C(m({},"__esModule",{value:!0}),t);var E={};M(E,{NebbulerCalculadora:()=>l,NebbulerMundialWidget:()=>c,NebbulerQuiniela:()=>p,version:()=>T});module.exports=A(E);var L="https://nebbuler.com/api/mundial/v1",g="?utm_source=elements&utm_medium=web-component";async function z(t){let e=await fetch(`${L}${t}`,{headers:{Accept:"application/json"}});if(!e.ok)throw new Error(`Nebbuler API ${e.status}`);return e.json()}var o={dark:{bg:"#050505",fg:"#FFFFFF",muted:"rgba(255,255,255,0.55)",border:"rgba(255,255,255,0.1)",accent:"#C41C1C"},light:{bg:"#FFFFFF",fg:"#0A0A0A",muted:"rgba(0,0,0,0.55)",border:"rgba(0,0,0,0.1)",accent:"#C41C1C"}};function i(t="dark"){let e=o[t];return`
|
|
2
|
+
:host {
|
|
3
|
+
display: block;
|
|
4
|
+
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
5
|
+
color: ${e.fg};
|
|
6
|
+
background: ${e.bg};
|
|
7
|
+
border: 1px solid ${e.border};
|
|
8
|
+
padding: 20px;
|
|
9
|
+
max-width: 480px;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
.label { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: ${e.muted}; margin: 0 0 4px; }
|
|
13
|
+
.value { font-size: 16px; font-weight: 700; margin: 0; }
|
|
14
|
+
.accent { color: ${e.accent}; }
|
|
15
|
+
a { color: ${e.accent}; text-decoration: none; font-weight: 600; }
|
|
16
|
+
a:hover { text-decoration: underline; }
|
|
17
|
+
button { font-family: inherit; cursor: pointer; }
|
|
18
|
+
input, select { font-family: inherit; }
|
|
19
|
+
.footer { margin-top: 14px; padding-top: 10px; border-top: 1px solid ${e.border}; font-size: 10px; color: ${e.muted}; display: flex; justify-content: space-between; align-items: center; }
|
|
20
|
+
`}var c=class extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}async render(){let e=this.getAttribute("seleccion")??"argentina",s=this.getAttribute("theme")??"dark";this.root.innerHTML=`<style>${i(s)}
|
|
21
|
+
.hero { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid ${o[s].border}; margin-bottom: 14px; }
|
|
22
|
+
.flag { font-size: 48px; line-height: 1; }
|
|
23
|
+
.title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
|
|
24
|
+
.subtitle { font-size: 13px; color: ${o[s].muted}; font-style: italic; margin: 2px 0 0; }
|
|
25
|
+
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
|
26
|
+
.cell { border: 1px solid ${o[s].border}; padding: 10px; }
|
|
27
|
+
</style>
|
|
28
|
+
<div>Cargando\u2026</div>`;try{let a=await z(`/selecciones/${e.toLowerCase()}`);this.root.innerHTML=`<style>${i(s)}
|
|
29
|
+
.hero { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid ${o[s].border}; margin-bottom: 14px; }
|
|
30
|
+
.flag { font-size: 48px; line-height: 1; }
|
|
31
|
+
.title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
|
|
32
|
+
.subtitle { font-size: 13px; color: ${o[s].muted}; font-style: italic; margin: 2px 0 0; }
|
|
33
|
+
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
|
34
|
+
.cell { border: 1px solid ${o[s].border}; padding: 10px; }
|
|
35
|
+
</style>
|
|
36
|
+
<div class="hero">
|
|
37
|
+
<span class="flag">${a.bandera}</span>
|
|
38
|
+
<div>
|
|
39
|
+
<p class="title">${d(a.pais)}</p>
|
|
40
|
+
<p class="subtitle">${d(a.apodo)}</p>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="grid">
|
|
44
|
+
<div class="cell"><p class="label">Moneda</p><p class="value">${d(a.moneda)}</p></div>
|
|
45
|
+
<div class="cell"><p class="label">Creadores</p><p class="value">~${a.creadores_potenciales}</p></div>
|
|
46
|
+
<div class="cell"><p class="label">Comisi\xF3n</p><p class="value accent">0%</p></div>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="footer">
|
|
49
|
+
<span>Programa La Sombra \xB7 Mundial 2026</span>
|
|
50
|
+
<a href="https://nebbuler.com/mundial/${a.slug}${g}" target="_blank" rel="noopener">nebbuler.com \u2192</a>
|
|
51
|
+
</div>`}catch{this.root.innerHTML=`<style>${i(s)}</style><p class="value accent">Error cargando datos</p>`}}};c.observedAttributes=["seleccion","theme"];var l=class extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){let e=this.getAttribute("theme")??"dark",s=(this.getAttribute("plataforma")??"substack").toLowerCase(),a=Math.max(0,Number(this.getAttribute("precio")??5)),n=Math.max(0,Number(this.getAttribute("suscriptores")??200)),r=a*n,x={substack:.1,patreon:.1,gumroad:.1,beehiiv:0}[s]??.1,$=n*.3+r*.029,v=r*.065,b=r*x+$+v,h=Math.max(0,r-b),f=r*(1-.0399),y=(f-h)*12;this.root.innerHTML=`<style>${i(e)}
|
|
52
|
+
.big { font-size: 32px; font-weight: 900; letter-spacing: -0.03em; margin: 6px 0; }
|
|
53
|
+
.row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid ${o[e].border}; font-size: 13px; }
|
|
54
|
+
.row:last-of-type { border-bottom: none; }
|
|
55
|
+
</style>
|
|
56
|
+
<p class="label">Cu\xE1nto te quita ${d(s)} al a\xF1o</p>
|
|
57
|
+
<p class="big accent">US$${Math.round(b*12).toLocaleString("en-US")}</p>
|
|
58
|
+
<p style="font-size: 12px; color: ${o[e].muted}; margin: 0 0 12px;">${n} suscriptores \xB7 US$${a}/mes</p>
|
|
59
|
+
<div class="row"><span>${d(s)} te deja</span><span>US$${Math.round(h).toLocaleString("en-US")}/mes</span></div>
|
|
60
|
+
<div class="row"><span>Nebbuler La Sombra</span><span class="accent">US$${Math.round(f).toLocaleString("en-US")}/mes</span></div>
|
|
61
|
+
<div class="row"><span><strong>Gan\xE1s +</strong></span><span class="accent"><strong>US$${Math.round(y).toLocaleString("en-US")}/a\xF1o</strong></span></div>
|
|
62
|
+
<div class="footer">
|
|
63
|
+
<span>Calculadora honesta</span>
|
|
64
|
+
<a href="https://nebbuler.com/cuanto-te-quitan${g}" target="_blank" rel="noopener">Ver m\xE1s \u2192</a>
|
|
65
|
+
</div>`}};l.observedAttributes=["plataforma","precio","suscriptores","theme"];var p=class extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){let e=this.getAttribute("theme")??"dark";this.root.innerHTML=`<style>${i(e)}
|
|
66
|
+
.cta { display: inline-block; background: ${o[e].accent}; color: #fff; padding: 12px 20px; margin-top: 10px; font-weight: 700; text-decoration: none; }
|
|
67
|
+
.title { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
|
|
68
|
+
.desc { font-size: 14px; color: ${o[e].muted}; margin: 0 0 14px; line-height: 1.4; }
|
|
69
|
+
</style>
|
|
70
|
+
<p class="label">Quiniela Mundial 2026</p>
|
|
71
|
+
<p class="title">Predec\xED el Mundial.</p>
|
|
72
|
+
<p class="desc">5 preguntas, 60 segundos, sin registro. Compart\xED tu pron\xF3stico en WhatsApp y desafi\xE1 a tu hinchada.</p>
|
|
73
|
+
<a class="cta" href="https://nebbuler.com/mundial/quiniela${g}" target="_blank" rel="noopener">Jugar gratis \u2192</a>
|
|
74
|
+
<div class="footer">
|
|
75
|
+
<span>Powered by Nebbuler</span>
|
|
76
|
+
<a href="https://nebbuler.com/mundial${g}" target="_blank" rel="noopener">nebbuler.com \u2192</a>
|
|
77
|
+
</div>`}};p.observedAttributes=["theme"];function d(t){return String(t).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function u(t,e){typeof customElements<"u"&&!customElements.get(t)&&customElements.define(t,e)}u("nebbuler-mundial-widget",c);u("nebbuler-calculadora",l);u("nebbuler-quiniela",p);var T="0.1.0";0&&(module.exports={NebbulerCalculadora,NebbulerMundialWidget,NebbulerQuiniela,version});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
var y="https://nebbuler.com/api/mundial/v1",d="?utm_source=elements&utm_medium=web-component";async function w(s){let e=await fetch(`${y}${s}`,{headers:{Accept:"application/json"}});if(!e.ok)throw new Error(`Nebbuler API ${e.status}`);return e.json()}var a={dark:{bg:"#050505",fg:"#FFFFFF",muted:"rgba(255,255,255,0.55)",border:"rgba(255,255,255,0.1)",accent:"#C41C1C"},light:{bg:"#FFFFFF",fg:"#0A0A0A",muted:"rgba(0,0,0,0.55)",border:"rgba(0,0,0,0.1)",accent:"#C41C1C"}};function r(s="dark"){let e=a[s];return`
|
|
2
|
+
:host {
|
|
3
|
+
display: block;
|
|
4
|
+
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
5
|
+
color: ${e.fg};
|
|
6
|
+
background: ${e.bg};
|
|
7
|
+
border: 1px solid ${e.border};
|
|
8
|
+
padding: 20px;
|
|
9
|
+
max-width: 480px;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
.label { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: ${e.muted}; margin: 0 0 4px; }
|
|
13
|
+
.value { font-size: 16px; font-weight: 700; margin: 0; }
|
|
14
|
+
.accent { color: ${e.accent}; }
|
|
15
|
+
a { color: ${e.accent}; text-decoration: none; font-weight: 600; }
|
|
16
|
+
a:hover { text-decoration: underline; }
|
|
17
|
+
button { font-family: inherit; cursor: pointer; }
|
|
18
|
+
input, select { font-family: inherit; }
|
|
19
|
+
.footer { margin-top: 14px; padding-top: 10px; border-top: 1px solid ${e.border}; font-size: 10px; color: ${e.muted}; display: flex; justify-content: space-between; align-items: center; }
|
|
20
|
+
`}var c=class extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}async render(){let e=this.getAttribute("seleccion")??"argentina",t=this.getAttribute("theme")??"dark";this.root.innerHTML=`<style>${r(t)}
|
|
21
|
+
.hero { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid ${a[t].border}; margin-bottom: 14px; }
|
|
22
|
+
.flag { font-size: 48px; line-height: 1; }
|
|
23
|
+
.title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
|
|
24
|
+
.subtitle { font-size: 13px; color: ${a[t].muted}; font-style: italic; margin: 2px 0 0; }
|
|
25
|
+
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
|
26
|
+
.cell { border: 1px solid ${a[t].border}; padding: 10px; }
|
|
27
|
+
</style>
|
|
28
|
+
<div>Cargando\u2026</div>`;try{let o=await w(`/selecciones/${e.toLowerCase()}`);this.root.innerHTML=`<style>${r(t)}
|
|
29
|
+
.hero { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid ${a[t].border}; margin-bottom: 14px; }
|
|
30
|
+
.flag { font-size: 48px; line-height: 1; }
|
|
31
|
+
.title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
|
|
32
|
+
.subtitle { font-size: 13px; color: ${a[t].muted}; font-style: italic; margin: 2px 0 0; }
|
|
33
|
+
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
|
34
|
+
.cell { border: 1px solid ${a[t].border}; padding: 10px; }
|
|
35
|
+
</style>
|
|
36
|
+
<div class="hero">
|
|
37
|
+
<span class="flag">${o.bandera}</span>
|
|
38
|
+
<div>
|
|
39
|
+
<p class="title">${i(o.pais)}</p>
|
|
40
|
+
<p class="subtitle">${i(o.apodo)}</p>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="grid">
|
|
44
|
+
<div class="cell"><p class="label">Moneda</p><p class="value">${i(o.moneda)}</p></div>
|
|
45
|
+
<div class="cell"><p class="label">Creadores</p><p class="value">~${o.creadores_potenciales}</p></div>
|
|
46
|
+
<div class="cell"><p class="label">Comisi\xF3n</p><p class="value accent">0%</p></div>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="footer">
|
|
49
|
+
<span>Programa La Sombra \xB7 Mundial 2026</span>
|
|
50
|
+
<a href="https://nebbuler.com/mundial/${o.slug}${d}" target="_blank" rel="noopener">nebbuler.com \u2192</a>
|
|
51
|
+
</div>`}catch{this.root.innerHTML=`<style>${r(t)}</style><p class="value accent">Error cargando datos</p>`}}};c.observedAttributes=["seleccion","theme"];var l=class extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){let e=this.getAttribute("theme")??"dark",t=(this.getAttribute("plataforma")??"substack").toLowerCase(),o=Math.max(0,Number(this.getAttribute("precio")??5)),g=Math.max(0,Number(this.getAttribute("suscriptores")??200)),n=o*g,f={substack:.1,patreon:.1,gumroad:.1,beehiiv:0}[t]??.1,x=g*.3+n*.029,$=n*.065,u=n*f+x+$,b=Math.max(0,n-u),h=n*(1-.0399),v=(h-b)*12;this.root.innerHTML=`<style>${r(e)}
|
|
52
|
+
.big { font-size: 32px; font-weight: 900; letter-spacing: -0.03em; margin: 6px 0; }
|
|
53
|
+
.row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid ${a[e].border}; font-size: 13px; }
|
|
54
|
+
.row:last-of-type { border-bottom: none; }
|
|
55
|
+
</style>
|
|
56
|
+
<p class="label">Cu\xE1nto te quita ${i(t)} al a\xF1o</p>
|
|
57
|
+
<p class="big accent">US$${Math.round(u*12).toLocaleString("en-US")}</p>
|
|
58
|
+
<p style="font-size: 12px; color: ${a[e].muted}; margin: 0 0 12px;">${g} suscriptores \xB7 US$${o}/mes</p>
|
|
59
|
+
<div class="row"><span>${i(t)} te deja</span><span>US$${Math.round(b).toLocaleString("en-US")}/mes</span></div>
|
|
60
|
+
<div class="row"><span>Nebbuler La Sombra</span><span class="accent">US$${Math.round(h).toLocaleString("en-US")}/mes</span></div>
|
|
61
|
+
<div class="row"><span><strong>Gan\xE1s +</strong></span><span class="accent"><strong>US$${Math.round(v).toLocaleString("en-US")}/a\xF1o</strong></span></div>
|
|
62
|
+
<div class="footer">
|
|
63
|
+
<span>Calculadora honesta</span>
|
|
64
|
+
<a href="https://nebbuler.com/cuanto-te-quitan${d}" target="_blank" rel="noopener">Ver m\xE1s \u2192</a>
|
|
65
|
+
</div>`}};l.observedAttributes=["plataforma","precio","suscriptores","theme"];var p=class extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){let e=this.getAttribute("theme")??"dark";this.root.innerHTML=`<style>${r(e)}
|
|
66
|
+
.cta { display: inline-block; background: ${a[e].accent}; color: #fff; padding: 12px 20px; margin-top: 10px; font-weight: 700; text-decoration: none; }
|
|
67
|
+
.title { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
|
|
68
|
+
.desc { font-size: 14px; color: ${a[e].muted}; margin: 0 0 14px; line-height: 1.4; }
|
|
69
|
+
</style>
|
|
70
|
+
<p class="label">Quiniela Mundial 2026</p>
|
|
71
|
+
<p class="title">Predec\xED el Mundial.</p>
|
|
72
|
+
<p class="desc">5 preguntas, 60 segundos, sin registro. Compart\xED tu pron\xF3stico en WhatsApp y desafi\xE1 a tu hinchada.</p>
|
|
73
|
+
<a class="cta" href="https://nebbuler.com/mundial/quiniela${d}" target="_blank" rel="noopener">Jugar gratis \u2192</a>
|
|
74
|
+
<div class="footer">
|
|
75
|
+
<span>Powered by Nebbuler</span>
|
|
76
|
+
<a href="https://nebbuler.com/mundial${d}" target="_blank" rel="noopener">nebbuler.com \u2192</a>
|
|
77
|
+
</div>`}};p.observedAttributes=["theme"];function i(s){return String(s).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function m(s,e){typeof customElements<"u"&&!customElements.get(s)&&customElements.define(s,e)}m("nebbuler-mundial-widget",c);m("nebbuler-calculadora",l);m("nebbuler-quiniela",p);var k="0.1.0";export{l as NebbulerCalculadora,c as NebbulerMundialWidget,p as NebbulerQuiniela,k as version};
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
"use strict";var NebbulerElements=(()=>{var m=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var M=(t,e)=>{for(var s in e)m(t,s,{get:e[s],enumerable:!0})},C=(t,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of S(e))!k.call(t,n)&&n!==s&&m(t,n,{get:()=>e[n],enumerable:!(a=w(e,n))||a.enumerable});return t};var A=t=>C(m({},"__esModule",{value:!0}),t);var E={};M(E,{NebbulerCalculadora:()=>l,NebbulerMundialWidget:()=>c,NebbulerQuiniela:()=>p,version:()=>T});var L="https://nebbuler.com/api/mundial/v1",g="?utm_source=elements&utm_medium=web-component";async function z(t){let e=await fetch(`${L}${t}`,{headers:{Accept:"application/json"}});if(!e.ok)throw new Error(`Nebbuler API ${e.status}`);return e.json()}var o={dark:{bg:"#050505",fg:"#FFFFFF",muted:"rgba(255,255,255,0.55)",border:"rgba(255,255,255,0.1)",accent:"#C41C1C"},light:{bg:"#FFFFFF",fg:"#0A0A0A",muted:"rgba(0,0,0,0.55)",border:"rgba(0,0,0,0.1)",accent:"#C41C1C"}};function i(t="dark"){let e=o[t];return`
|
|
2
|
+
:host {
|
|
3
|
+
display: block;
|
|
4
|
+
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
5
|
+
color: ${e.fg};
|
|
6
|
+
background: ${e.bg};
|
|
7
|
+
border: 1px solid ${e.border};
|
|
8
|
+
padding: 20px;
|
|
9
|
+
max-width: 480px;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
.label { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: ${e.muted}; margin: 0 0 4px; }
|
|
13
|
+
.value { font-size: 16px; font-weight: 700; margin: 0; }
|
|
14
|
+
.accent { color: ${e.accent}; }
|
|
15
|
+
a { color: ${e.accent}; text-decoration: none; font-weight: 600; }
|
|
16
|
+
a:hover { text-decoration: underline; }
|
|
17
|
+
button { font-family: inherit; cursor: pointer; }
|
|
18
|
+
input, select { font-family: inherit; }
|
|
19
|
+
.footer { margin-top: 14px; padding-top: 10px; border-top: 1px solid ${e.border}; font-size: 10px; color: ${e.muted}; display: flex; justify-content: space-between; align-items: center; }
|
|
20
|
+
`}var c=class extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}async render(){let e=this.getAttribute("seleccion")??"argentina",s=this.getAttribute("theme")??"dark";this.root.innerHTML=`<style>${i(s)}
|
|
21
|
+
.hero { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid ${o[s].border}; margin-bottom: 14px; }
|
|
22
|
+
.flag { font-size: 48px; line-height: 1; }
|
|
23
|
+
.title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
|
|
24
|
+
.subtitle { font-size: 13px; color: ${o[s].muted}; font-style: italic; margin: 2px 0 0; }
|
|
25
|
+
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
|
26
|
+
.cell { border: 1px solid ${o[s].border}; padding: 10px; }
|
|
27
|
+
</style>
|
|
28
|
+
<div>Cargando\u2026</div>`;try{let a=await z(`/selecciones/${e.toLowerCase()}`);this.root.innerHTML=`<style>${i(s)}
|
|
29
|
+
.hero { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid ${o[s].border}; margin-bottom: 14px; }
|
|
30
|
+
.flag { font-size: 48px; line-height: 1; }
|
|
31
|
+
.title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
|
|
32
|
+
.subtitle { font-size: 13px; color: ${o[s].muted}; font-style: italic; margin: 2px 0 0; }
|
|
33
|
+
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
|
34
|
+
.cell { border: 1px solid ${o[s].border}; padding: 10px; }
|
|
35
|
+
</style>
|
|
36
|
+
<div class="hero">
|
|
37
|
+
<span class="flag">${a.bandera}</span>
|
|
38
|
+
<div>
|
|
39
|
+
<p class="title">${d(a.pais)}</p>
|
|
40
|
+
<p class="subtitle">${d(a.apodo)}</p>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="grid">
|
|
44
|
+
<div class="cell"><p class="label">Moneda</p><p class="value">${d(a.moneda)}</p></div>
|
|
45
|
+
<div class="cell"><p class="label">Creadores</p><p class="value">~${a.creadores_potenciales}</p></div>
|
|
46
|
+
<div class="cell"><p class="label">Comisi\xF3n</p><p class="value accent">0%</p></div>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="footer">
|
|
49
|
+
<span>Programa La Sombra \xB7 Mundial 2026</span>
|
|
50
|
+
<a href="https://nebbuler.com/mundial/${a.slug}${g}" target="_blank" rel="noopener">nebbuler.com \u2192</a>
|
|
51
|
+
</div>`}catch{this.root.innerHTML=`<style>${i(s)}</style><p class="value accent">Error cargando datos</p>`}}};c.observedAttributes=["seleccion","theme"];var l=class extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){let e=this.getAttribute("theme")??"dark",s=(this.getAttribute("plataforma")??"substack").toLowerCase(),a=Math.max(0,Number(this.getAttribute("precio")??5)),n=Math.max(0,Number(this.getAttribute("suscriptores")??200)),r=a*n,x={substack:.1,patreon:.1,gumroad:.1,beehiiv:0}[s]??.1,$=n*.3+r*.029,v=r*.065,b=r*x+$+v,h=Math.max(0,r-b),f=r*(1-.0399),y=(f-h)*12;this.root.innerHTML=`<style>${i(e)}
|
|
52
|
+
.big { font-size: 32px; font-weight: 900; letter-spacing: -0.03em; margin: 6px 0; }
|
|
53
|
+
.row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid ${o[e].border}; font-size: 13px; }
|
|
54
|
+
.row:last-of-type { border-bottom: none; }
|
|
55
|
+
</style>
|
|
56
|
+
<p class="label">Cu\xE1nto te quita ${d(s)} al a\xF1o</p>
|
|
57
|
+
<p class="big accent">US$${Math.round(b*12).toLocaleString("en-US")}</p>
|
|
58
|
+
<p style="font-size: 12px; color: ${o[e].muted}; margin: 0 0 12px;">${n} suscriptores \xB7 US$${a}/mes</p>
|
|
59
|
+
<div class="row"><span>${d(s)} te deja</span><span>US$${Math.round(h).toLocaleString("en-US")}/mes</span></div>
|
|
60
|
+
<div class="row"><span>Nebbuler La Sombra</span><span class="accent">US$${Math.round(f).toLocaleString("en-US")}/mes</span></div>
|
|
61
|
+
<div class="row"><span><strong>Gan\xE1s +</strong></span><span class="accent"><strong>US$${Math.round(y).toLocaleString("en-US")}/a\xF1o</strong></span></div>
|
|
62
|
+
<div class="footer">
|
|
63
|
+
<span>Calculadora honesta</span>
|
|
64
|
+
<a href="https://nebbuler.com/cuanto-te-quitan${g}" target="_blank" rel="noopener">Ver m\xE1s \u2192</a>
|
|
65
|
+
</div>`}};l.observedAttributes=["plataforma","precio","suscriptores","theme"];var p=class extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){let e=this.getAttribute("theme")??"dark";this.root.innerHTML=`<style>${i(e)}
|
|
66
|
+
.cta { display: inline-block; background: ${o[e].accent}; color: #fff; padding: 12px 20px; margin-top: 10px; font-weight: 700; text-decoration: none; }
|
|
67
|
+
.title { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
|
|
68
|
+
.desc { font-size: 14px; color: ${o[e].muted}; margin: 0 0 14px; line-height: 1.4; }
|
|
69
|
+
</style>
|
|
70
|
+
<p class="label">Quiniela Mundial 2026</p>
|
|
71
|
+
<p class="title">Predec\xED el Mundial.</p>
|
|
72
|
+
<p class="desc">5 preguntas, 60 segundos, sin registro. Compart\xED tu pron\xF3stico en WhatsApp y desafi\xE1 a tu hinchada.</p>
|
|
73
|
+
<a class="cta" href="https://nebbuler.com/mundial/quiniela${g}" target="_blank" rel="noopener">Jugar gratis \u2192</a>
|
|
74
|
+
<div class="footer">
|
|
75
|
+
<span>Powered by Nebbuler</span>
|
|
76
|
+
<a href="https://nebbuler.com/mundial${g}" target="_blank" rel="noopener">nebbuler.com \u2192</a>
|
|
77
|
+
</div>`}};p.observedAttributes=["theme"];function d(t){return String(t).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function u(t,e){typeof customElements<"u"&&!customElements.get(t)&&customElements.define(t,e)}u("nebbuler-mundial-widget",c);u("nebbuler-calculadora",l);u("nebbuler-quiniela",p);var T="0.1.0";return A(E);})();
|
package/package.json
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "nebbuler-elements",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Zero-dependency Web Components for embedding Nebbuler Mundial 2026 widgets in any HTML page. Works in WordPress, Squarespace, raw HTML, Shopify, Medium embeds, etc.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"web-components",
|
|
7
|
+
"custom-elements",
|
|
8
|
+
"world-cup",
|
|
9
|
+
"mundial",
|
|
10
|
+
"fifa",
|
|
11
|
+
"soccer",
|
|
12
|
+
"latam",
|
|
13
|
+
"nebbuler",
|
|
14
|
+
"embed",
|
|
15
|
+
"widget"
|
|
16
|
+
],
|
|
17
|
+
"author": "Juan Pablo Monsalvez <juanpablo@nebbuler.com>",
|
|
18
|
+
"license": "MIT",
|
|
19
|
+
"homepage": "https://nebbuler.com/mundial",
|
|
20
|
+
"repository": {
|
|
21
|
+
"type": "git",
|
|
22
|
+
"url": "git+https://github.com/juanpablomonsalvezb-alt/nebbuler-elements.git"
|
|
23
|
+
},
|
|
24
|
+
"main": "./dist/index.js",
|
|
25
|
+
"module": "./dist/index.mjs",
|
|
26
|
+
"unpkg": "./dist/index.umd.js",
|
|
27
|
+
"jsdelivr": "./dist/index.umd.js",
|
|
28
|
+
"types": "./dist/index.d.ts",
|
|
29
|
+
"exports": {
|
|
30
|
+
".": {
|
|
31
|
+
"types": "./dist/index.d.ts",
|
|
32
|
+
"import": "./dist/index.mjs",
|
|
33
|
+
"require": "./dist/index.js"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"files": [
|
|
37
|
+
"dist",
|
|
38
|
+
"README.md",
|
|
39
|
+
"LICENSE"
|
|
40
|
+
],
|
|
41
|
+
"scripts": {
|
|
42
|
+
"build": "tsup",
|
|
43
|
+
"dev": "tsup --watch",
|
|
44
|
+
"prepublishOnly": "npm run build"
|
|
45
|
+
},
|
|
46
|
+
"devDependencies": {
|
|
47
|
+
"tsup": "^8.0.0",
|
|
48
|
+
"typescript": "^5.4.0"
|
|
49
|
+
},
|
|
50
|
+
"publishConfig": {
|
|
51
|
+
"access": "public"
|
|
52
|
+
},
|
|
53
|
+
"sideEffects": [
|
|
54
|
+
"./dist/index.js",
|
|
55
|
+
"./dist/index.mjs",
|
|
56
|
+
"./dist/index.umd.js"
|
|
57
|
+
]
|
|
58
|
+
}
|