@crediball/elements 0.7.0 → 0.8.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.
Files changed (5) hide show
  1. package/dist/{chunk-KRSZ3FQQ.js → chunk-YCLIZG7D.js} +17 -2
  2. package/dist/crediball-elements.iife.js +17 -2
  3. package/dist/index.js +1 -1
  4. package/dist/register.js +1 -1
  5. package/package.json +2 -2
package/dist/{chunk-KRSZ3FQQ.js → chunk-YCLIZG7D.js} RENAMED
@@ -187,6 +187,7 @@ var CrediballLowCreditWarningElement = class extends CrediballElement {
187
187
  // src/paywall.ts
188
188
  import { formatMoney, fetchReferral } from "@crediball/core";
189
189
  var CURRENCY_SYMBOLS = { EUR: "\u20AC", USD: "$", GBP: "\xA3" };
190
+ var PERIOD_SUFFIX = { weekly: "wk", monthly: "mo", yearly: "yr" };
190
191
  function currencySymbolFor(currency) {
191
192
  return CURRENCY_SYMBOLS[currency.toUpperCase()] ?? currency;
192
193
  }
@@ -269,6 +270,7 @@ var STYLE = `
269
270
  padding: 10px 18px;
270
271
  border-radius: var(--crediball-radius, 9999px);
271
272
  }
273
+ p.custom-preview { margin: 6px 0 0; font-size: 12px; color: var(--crediball-ink-muted, #7a7a7a); }
272
274
  p.error { margin: 8px 0 0; font-size: 13px; color: var(--crediball-accent, #0066cc); }
273
275
  button.close {
274
276
  width: 100%;
@@ -399,7 +401,7 @@ var CrediballPaywallElement = class extends CrediballElement {
399
401
  (p) => `
400
402
  <button class="option" data-kind="plan" data-id="${escapeHtml(p.id)}">
401
403
  <span>${escapeHtml(p.name)}</span>
402
- <span class="meta">${formatMoney(p.price, currency)}/${p.period === "monthly" ? "mo" : "yr"} \xB7 ${formatCredits(p.credits)} cr</span>
404
+ <span class="meta">${formatMoney(p.price, currency)}/${PERIOD_SUFFIX[p.period] ?? p.period} \xB7 ${formatCredits(p.credits)} cr</span>
403
405
  </button>`
404
406
  ).join("")}
405
407
  </div>` : ""}
@@ -421,7 +423,8 @@ var CrediballPaywallElement = class extends CrediballElement {
421
423
  <span class="sym">${escapeHtml(currencySymbolFor(currency))}</span>
422
424
  <input class="custom-input" inputmode="decimal" placeholder="${custom?.minEur ?? ""}" aria-label="Custom amount" />
423
425
  <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
424
- </div>` : ""}
426
+ </div>
427
+ <p class="custom-preview" hidden></p>` : ""}
425
428
  ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
426
429
  <p class="error" hidden></p>
427
430
  <button class="close" part="close" type="button">Not now</button>
@@ -471,6 +474,18 @@ var CrediballPaywallElement = class extends CrediballElement {
471
474
  const input = this.shadow.querySelector(".custom-input");
472
475
  const addBtn = this.shadow.querySelector(".custom-add");
473
476
  const errEl = this.shadow.querySelector(".error");
477
+ const previewEl = this.shadow.querySelector(".custom-preview");
478
+ const rate = custom?.rate;
479
+ input?.addEventListener("input", () => {
480
+ if (!previewEl) return;
481
+ const amount = Number(input.value);
482
+ if (!rate || rate <= 0 || !Number.isFinite(amount) || amount <= 0) {
483
+ previewEl.hidden = true;
484
+ return;
485
+ }
486
+ previewEl.hidden = false;
487
+ previewEl.textContent = `\u2248 ${formatCredits(Math.round(amount * rate))} credits`;
488
+ });
474
489
  const submit = () => {
475
490
  const amount = Number(input?.value);
476
491
  const sym = currencySymbolFor(currency);
package/dist/crediball-elements.iife.js CHANGED
@@ -601,6 +601,7 @@ var Crediball = (() => {
601
601
 
602
602
  // src/paywall.ts
603
603
  var CURRENCY_SYMBOLS = { EUR: "\u20AC", USD: "$", GBP: "\xA3" };
604
+ var PERIOD_SUFFIX = { weekly: "wk", monthly: "mo", yearly: "yr" };
604
605
  function currencySymbolFor(currency) {
605
606
  return CURRENCY_SYMBOLS[currency.toUpperCase()] ?? currency;
606
607
  }
@@ -683,6 +684,7 @@ var Crediball = (() => {
683
684
  padding: 10px 18px;
684
685
  border-radius: var(--crediball-radius, 9999px);
685
686
  }
687
+ p.custom-preview { margin: 6px 0 0; font-size: 12px; color: var(--crediball-ink-muted, #7a7a7a); }
686
688
  p.error { margin: 8px 0 0; font-size: 13px; color: var(--crediball-accent, #0066cc); }
687
689
  button.close {
688
690
  width: 100%;
@@ -813,7 +815,7 @@ var Crediball = (() => {
813
815
  (p) => `
814
816
  <button class="option" data-kind="plan" data-id="${escapeHtml(p.id)}">
815
817
  <span>${escapeHtml(p.name)}</span>
816
- <span class="meta">${formatMoney(p.price, currency)}/${p.period === "monthly" ? "mo" : "yr"} \xB7 ${formatCredits(p.credits)} cr</span>
818
+ <span class="meta">${formatMoney(p.price, currency)}/${PERIOD_SUFFIX[p.period] ?? p.period} \xB7 ${formatCredits(p.credits)} cr</span>
817
819
  </button>`
818
820
  ).join("")}
819
821
  </div>` : ""}
@@ -835,7 +837,8 @@ var Crediball = (() => {
835
837
  <span class="sym">${escapeHtml(currencySymbolFor(currency))}</span>
836
838
  <input class="custom-input" inputmode="decimal" placeholder="${custom?.minEur ?? ""}" aria-label="Custom amount" />
837
839
  <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
838
- </div>` : ""}
840
+ </div>
841
+ <p class="custom-preview" hidden></p>` : ""}
839
842
  ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
840
843
  <p class="error" hidden></p>
841
844
  <button class="close" part="close" type="button">Not now</button>
@@ -885,6 +888,18 @@ var Crediball = (() => {
885
888
  const input = this.shadow.querySelector(".custom-input");
886
889
  const addBtn = this.shadow.querySelector(".custom-add");
887
890
  const errEl = this.shadow.querySelector(".error");
891
+ const previewEl = this.shadow.querySelector(".custom-preview");
892
+ const rate = custom?.rate;
893
+ input?.addEventListener("input", () => {
894
+ if (!previewEl) return;
895
+ const amount = Number(input.value);
896
+ if (!rate || rate <= 0 || !Number.isFinite(amount) || amount <= 0) {
897
+ previewEl.hidden = true;
898
+ return;
899
+ }
900
+ previewEl.hidden = false;
901
+ previewEl.textContent = `\u2248 ${formatCredits(Math.round(amount * rate))} credits`;
902
+ });
888
903
  const submit = () => {
889
904
  const amount = Number(input?.value);
890
905
  const sym = currencySymbolFor(currency);
package/dist/index.js CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  CrediballReferralCardElement,
7
7
  CrediballTopUpButtonElement,
8
8
  CrediballUsageElement
9
- } from "./chunk-KRSZ3FQQ.js";
9
+ } from "./chunk-YCLIZG7D.js";
10
10
  export {
11
11
  CrediballBalanceElement,
12
12
  CrediballElement,
package/dist/register.js CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  CrediballReferralCardElement,
6
6
  CrediballTopUpButtonElement,
7
7
  CrediballUsageElement
8
- } from "./chunk-KRSZ3FQQ.js";
8
+ } from "./chunk-YCLIZG7D.js";
9
9
 
10
10
  // src/register.ts
11
11
  function define(name, ctor) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crediball/elements",
3
- "version": "0.7.0",
3
+ "version": "0.8.0",
4
4
  "description": "Framework-agnostic web components for showing Crediball credits inside your AI app.",
5
5
  "license": "MIT",
6
6
  "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",
@@ -56,7 +56,7 @@
56
56
  "prepublishOnly": "npm run build"
57
57
  },
58
58
  "dependencies": {
59
- "@crediball/core": "^0.6.0"
59
+ "@crediball/core": "^0.7.0"
60
60
  },
61
61
  "devDependencies": {
62
62
  "tsup": "^8.3.5",