@blotoutio/providers-blotout-wallet-sdk 0.55.1 → 0.56.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 (4) hide show
  1. package/index.cjs.js +48 -20
  2. package/index.js +48 -20
  3. package/index.mjs +48 -20
  4. package/package.json +1 -1
package/index.cjs.js CHANGED
@@ -48,6 +48,7 @@ const customAttributes = {
48
48
  type: 'text',
49
49
  defaultValue: "Hey! Your cart has expired!<br>But we've got you covered! \u{1F609}",
50
50
  },
51
+ title: { type: 'text', defaultValue: '' },
51
52
  inputLabel: { type: 'text', defaultValue: 'Enter your email ID' },
52
53
  restoreLabel: { type: 'text', defaultValue: 'Restore Cart' },
53
54
  rejectionLabel: {
@@ -431,6 +432,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
431
432
  this.hasEmail = false;
432
433
  this.lastExpiredCart = undefined;
433
434
  this.state = 'ready';
435
+ this.isStylesheetInjected = false;
434
436
  this.transitionTo = (newState) => {
435
437
  return flipOut(this.dialog)
436
438
  .then(() => (this.state = newState))
@@ -520,16 +522,23 @@ let BlotoutWallet = class BlotoutWallet extends s {
520
522
  ev.stopPropagation();
521
523
  };
522
524
  this.expiredCartContent = () => {
523
- var _a, _b, _c, _d;
524
- return x `
525
- <form class="restore-form" method="dialog" @submit=${this.onSubmit}>
526
- <div>
527
- ${formatString(((_a = this.theme) === null || _a === void 0 ? void 0 : _a.text) || customAttributes.text.defaultValue)}
525
+ var _a, _b, _c, _d, _e;
526
+ return x `<form
527
+ class="restore-form"
528
+ method="dialog"
529
+ @submit=${this.onSubmit}
530
+ >
531
+ ${((_a = this.theme) === null || _a === void 0 ? void 0 : _a.title)
532
+ ? x `<h1 class="title">${this.theme.title}</h1>`
533
+ : T}
534
+ <div class="text">
535
+ ${formatString(((_b = this.theme) === null || _b === void 0 ? void 0 : _b.text) || customAttributes.text.defaultValue)}
528
536
  </div>
529
537
  <input
530
538
  type="email"
531
539
  name="email"
532
- placeholder=${((_b = this.theme) === null || _b === void 0 ? void 0 : _b.inputLabel) ||
540
+ class="email"
541
+ placeholder=${((_c = this.theme) === null || _c === void 0 ? void 0 : _c.inputLabel) ||
533
542
  customAttributes.inputLabel.defaultValue}
534
543
  ?required=${!this.hasEmail}
535
544
  style=${o$1({
@@ -537,15 +546,14 @@ let BlotoutWallet = class BlotoutWallet extends s {
537
546
  })}
538
547
  />
539
548
  <button class="restore" type="submit">
540
- ${((_c = this.theme) === null || _c === void 0 ? void 0 : _c.restoreLabel) ||
549
+ ${((_d = this.theme) === null || _d === void 0 ? void 0 : _d.restoreLabel) ||
541
550
  customAttributes.restoreLabel.defaultValue}
542
551
  </button>
543
552
  </form>
544
- <button class="delete" type="button" @click=${this.skipCarts}>
545
- ${((_d = this.theme) === null || _d === void 0 ? void 0 : _d.rejectionLabel) ||
553
+ <button class="reject" type="button" @click=${this.skipCarts}>
554
+ ${((_e = this.theme) === null || _e === void 0 ? void 0 : _e.rejectionLabel) ||
546
555
  customAttributes.rejectionLabel.defaultValue}
547
- </button>
548
- `;
556
+ </button> `;
549
557
  };
550
558
  this.loadingContent = () => {
551
559
  return x `
@@ -566,7 +574,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
566
574
  <form method="dialog" @submit=${this.onSubmit}>
567
575
  <button class="restore" type="submit">Try Again</button>
568
576
  </form>
569
- <button class="delete" @click=${this.skipCarts}>Dismiss</button>
577
+ <button class="reject" @click=${this.skipCarts}>Dismiss</button>
570
578
  `;
571
579
  };
572
580
  }
@@ -586,7 +594,14 @@ let BlotoutWallet = class BlotoutWallet extends s {
586
594
  }).catch(logger.error);
587
595
  }
588
596
  connectedCallback() {
597
+ var _a;
589
598
  super.connectedCallback();
599
+ if (!this.isStylesheetInjected && ((_a = this.theme) === null || _a === void 0 ? void 0 : _a.css)) {
600
+ const sheet = new CSSStyleSheet();
601
+ sheet.replaceSync(this.theme.css);
602
+ this.shadowRoot.adoptedStyleSheets.push(sheet);
603
+ this.isStylesheetInjected = true;
604
+ }
590
605
  if (!this.userId) {
591
606
  logger.error('No UserId set');
592
607
  return;
@@ -663,7 +678,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
663
678
  if (this.isPopUpDismissed) {
664
679
  return T;
665
680
  }
666
- return x ` <dialog @click=${this.onDialogClick}>
681
+ return x ` <dialog class="popup" @click=${this.onDialogClick}>
667
682
  <div @click=${this.onWrapperClick}>
668
683
  <div
669
684
  class="centered"
@@ -719,7 +734,7 @@ BlotoutWallet.styles = [
719
734
  cursor: pointer;
720
735
  }
721
736
 
722
- dialog {
737
+ .popup {
723
738
  width: 430px;
724
739
  max-width: 100vw;
725
740
  color: var(--primary);
@@ -730,19 +745,32 @@ BlotoutWallet.styles = [
730
745
  text-align: center;
731
746
  }
732
747
 
733
- dialog::backdrop {
748
+ .popup::backdrop {
734
749
  background: var(--backdrop);
735
750
  backdrop-filter: blur(4px);
736
751
  }
737
752
 
738
- form.restore-form {
753
+ .restore-form {
739
754
  display: flex;
740
755
  flex-direction: column;
741
756
  gap: 16px;
742
757
  width: 100%;
743
758
  }
744
759
 
745
- input {
760
+ .title {
761
+ margin: 0;
762
+ padding: 0;
763
+ font-size: 20px;
764
+ font-weight: bold;
765
+ line-height: 30px;
766
+ }
767
+
768
+ .text {
769
+ margin: 0;
770
+ padding: 0;
771
+ }
772
+
773
+ .email {
746
774
  width: 100%;
747
775
  border: 1px solid var(--input-border);
748
776
  color: var(--input-foreground);
@@ -751,12 +779,12 @@ BlotoutWallet.styles = [
751
779
  border-radius: 5px;
752
780
  }
753
781
 
754
- input::placeholder {
782
+ .email::placeholder {
755
783
  color: var(--input-foreground);
756
784
  color: color(from var(--input-foreground) srgb r g b / 0.7);
757
785
  }
758
786
 
759
- :is(input[name='email'], button):focus-visible {
787
+ :is(.email, button):focus-visible {
760
788
  outline-color: var(--primary);
761
789
  }
762
790
 
@@ -769,7 +797,7 @@ BlotoutWallet.styles = [
769
797
  padding: 12px 20px;
770
798
  }
771
799
 
772
- .delete {
800
+ .reject {
773
801
  font-size: 14px;
774
802
  line-height: 20px;
775
803
  color: var(--secondary);
package/index.js CHANGED
@@ -49,6 +49,7 @@ var ProvidersBlotoutWalletSdk = (function () {
49
49
  type: 'text',
50
50
  defaultValue: "Hey! Your cart has expired!<br>But we've got you covered! \u{1F609}",
51
51
  },
52
+ title: { type: 'text', defaultValue: '' },
52
53
  inputLabel: { type: 'text', defaultValue: 'Enter your email ID' },
53
54
  restoreLabel: { type: 'text', defaultValue: 'Restore Cart' },
54
55
  rejectionLabel: {
@@ -432,6 +433,7 @@ var ProvidersBlotoutWalletSdk = (function () {
432
433
  this.hasEmail = false;
433
434
  this.lastExpiredCart = undefined;
434
435
  this.state = 'ready';
436
+ this.isStylesheetInjected = false;
435
437
  this.transitionTo = (newState) => {
436
438
  return flipOut(this.dialog)
437
439
  .then(() => (this.state = newState))
@@ -521,16 +523,23 @@ var ProvidersBlotoutWalletSdk = (function () {
521
523
  ev.stopPropagation();
522
524
  };
523
525
  this.expiredCartContent = () => {
524
- var _a, _b, _c, _d;
525
- return x `
526
- <form class="restore-form" method="dialog" @submit=${this.onSubmit}>
527
- <div>
528
- ${formatString(((_a = this.theme) === null || _a === void 0 ? void 0 : _a.text) || customAttributes.text.defaultValue)}
526
+ var _a, _b, _c, _d, _e;
527
+ return x `<form
528
+ class="restore-form"
529
+ method="dialog"
530
+ @submit=${this.onSubmit}
531
+ >
532
+ ${((_a = this.theme) === null || _a === void 0 ? void 0 : _a.title)
533
+ ? x `<h1 class="title">${this.theme.title}</h1>`
534
+ : T}
535
+ <div class="text">
536
+ ${formatString(((_b = this.theme) === null || _b === void 0 ? void 0 : _b.text) || customAttributes.text.defaultValue)}
529
537
  </div>
530
538
  <input
531
539
  type="email"
532
540
  name="email"
533
- placeholder=${((_b = this.theme) === null || _b === void 0 ? void 0 : _b.inputLabel) ||
541
+ class="email"
542
+ placeholder=${((_c = this.theme) === null || _c === void 0 ? void 0 : _c.inputLabel) ||
534
543
  customAttributes.inputLabel.defaultValue}
535
544
  ?required=${!this.hasEmail}
536
545
  style=${o$1({
@@ -538,15 +547,14 @@ var ProvidersBlotoutWalletSdk = (function () {
538
547
  })}
539
548
  />
540
549
  <button class="restore" type="submit">
541
- ${((_c = this.theme) === null || _c === void 0 ? void 0 : _c.restoreLabel) ||
550
+ ${((_d = this.theme) === null || _d === void 0 ? void 0 : _d.restoreLabel) ||
542
551
  customAttributes.restoreLabel.defaultValue}
543
552
  </button>
544
553
  </form>
545
- <button class="delete" type="button" @click=${this.skipCarts}>
546
- ${((_d = this.theme) === null || _d === void 0 ? void 0 : _d.rejectionLabel) ||
554
+ <button class="reject" type="button" @click=${this.skipCarts}>
555
+ ${((_e = this.theme) === null || _e === void 0 ? void 0 : _e.rejectionLabel) ||
547
556
  customAttributes.rejectionLabel.defaultValue}
548
- </button>
549
- `;
557
+ </button> `;
550
558
  };
551
559
  this.loadingContent = () => {
552
560
  return x `
@@ -567,7 +575,7 @@ var ProvidersBlotoutWalletSdk = (function () {
567
575
  <form method="dialog" @submit=${this.onSubmit}>
568
576
  <button class="restore" type="submit">Try Again</button>
569
577
  </form>
570
- <button class="delete" @click=${this.skipCarts}>Dismiss</button>
578
+ <button class="reject" @click=${this.skipCarts}>Dismiss</button>
571
579
  `;
572
580
  };
573
581
  }
@@ -587,7 +595,14 @@ var ProvidersBlotoutWalletSdk = (function () {
587
595
  }).catch(logger.error);
588
596
  }
589
597
  connectedCallback() {
598
+ var _a;
590
599
  super.connectedCallback();
600
+ if (!this.isStylesheetInjected && ((_a = this.theme) === null || _a === void 0 ? void 0 : _a.css)) {
601
+ const sheet = new CSSStyleSheet();
602
+ sheet.replaceSync(this.theme.css);
603
+ this.shadowRoot.adoptedStyleSheets.push(sheet);
604
+ this.isStylesheetInjected = true;
605
+ }
591
606
  if (!this.userId) {
592
607
  logger.error('No UserId set');
593
608
  return;
@@ -664,7 +679,7 @@ var ProvidersBlotoutWalletSdk = (function () {
664
679
  if (this.isPopUpDismissed) {
665
680
  return T;
666
681
  }
667
- return x ` <dialog @click=${this.onDialogClick}>
682
+ return x ` <dialog class="popup" @click=${this.onDialogClick}>
668
683
  <div @click=${this.onWrapperClick}>
669
684
  <div
670
685
  class="centered"
@@ -720,7 +735,7 @@ var ProvidersBlotoutWalletSdk = (function () {
720
735
  cursor: pointer;
721
736
  }
722
737
 
723
- dialog {
738
+ .popup {
724
739
  width: 430px;
725
740
  max-width: 100vw;
726
741
  color: var(--primary);
@@ -731,19 +746,32 @@ var ProvidersBlotoutWalletSdk = (function () {
731
746
  text-align: center;
732
747
  }
733
748
 
734
- dialog::backdrop {
749
+ .popup::backdrop {
735
750
  background: var(--backdrop);
736
751
  backdrop-filter: blur(4px);
737
752
  }
738
753
 
739
- form.restore-form {
754
+ .restore-form {
740
755
  display: flex;
741
756
  flex-direction: column;
742
757
  gap: 16px;
743
758
  width: 100%;
744
759
  }
745
760
 
746
- input {
761
+ .title {
762
+ margin: 0;
763
+ padding: 0;
764
+ font-size: 20px;
765
+ font-weight: bold;
766
+ line-height: 30px;
767
+ }
768
+
769
+ .text {
770
+ margin: 0;
771
+ padding: 0;
772
+ }
773
+
774
+ .email {
747
775
  width: 100%;
748
776
  border: 1px solid var(--input-border);
749
777
  color: var(--input-foreground);
@@ -752,12 +780,12 @@ var ProvidersBlotoutWalletSdk = (function () {
752
780
  border-radius: 5px;
753
781
  }
754
782
 
755
- input::placeholder {
783
+ .email::placeholder {
756
784
  color: var(--input-foreground);
757
785
  color: color(from var(--input-foreground) srgb r g b / 0.7);
758
786
  }
759
787
 
760
- :is(input[name='email'], button):focus-visible {
788
+ :is(.email, button):focus-visible {
761
789
  outline-color: var(--primary);
762
790
  }
763
791
 
@@ -770,7 +798,7 @@ var ProvidersBlotoutWalletSdk = (function () {
770
798
  padding: 12px 20px;
771
799
  }
772
800
 
773
- .delete {
801
+ .reject {
774
802
  font-size: 14px;
775
803
  line-height: 20px;
776
804
  color: var(--secondary);
package/index.mjs CHANGED
@@ -46,6 +46,7 @@ const customAttributes = {
46
46
  type: 'text',
47
47
  defaultValue: "Hey! Your cart has expired!<br>But we've got you covered! \u{1F609}",
48
48
  },
49
+ title: { type: 'text', defaultValue: '' },
49
50
  inputLabel: { type: 'text', defaultValue: 'Enter your email ID' },
50
51
  restoreLabel: { type: 'text', defaultValue: 'Restore Cart' },
51
52
  rejectionLabel: {
@@ -429,6 +430,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
429
430
  this.hasEmail = false;
430
431
  this.lastExpiredCart = undefined;
431
432
  this.state = 'ready';
433
+ this.isStylesheetInjected = false;
432
434
  this.transitionTo = (newState) => {
433
435
  return flipOut(this.dialog)
434
436
  .then(() => (this.state = newState))
@@ -518,16 +520,23 @@ let BlotoutWallet = class BlotoutWallet extends s {
518
520
  ev.stopPropagation();
519
521
  };
520
522
  this.expiredCartContent = () => {
521
- var _a, _b, _c, _d;
522
- return x `
523
- <form class="restore-form" method="dialog" @submit=${this.onSubmit}>
524
- <div>
525
- ${formatString(((_a = this.theme) === null || _a === void 0 ? void 0 : _a.text) || customAttributes.text.defaultValue)}
523
+ var _a, _b, _c, _d, _e;
524
+ return x `<form
525
+ class="restore-form"
526
+ method="dialog"
527
+ @submit=${this.onSubmit}
528
+ >
529
+ ${((_a = this.theme) === null || _a === void 0 ? void 0 : _a.title)
530
+ ? x `<h1 class="title">${this.theme.title}</h1>`
531
+ : T}
532
+ <div class="text">
533
+ ${formatString(((_b = this.theme) === null || _b === void 0 ? void 0 : _b.text) || customAttributes.text.defaultValue)}
526
534
  </div>
527
535
  <input
528
536
  type="email"
529
537
  name="email"
530
- placeholder=${((_b = this.theme) === null || _b === void 0 ? void 0 : _b.inputLabel) ||
538
+ class="email"
539
+ placeholder=${((_c = this.theme) === null || _c === void 0 ? void 0 : _c.inputLabel) ||
531
540
  customAttributes.inputLabel.defaultValue}
532
541
  ?required=${!this.hasEmail}
533
542
  style=${o$1({
@@ -535,15 +544,14 @@ let BlotoutWallet = class BlotoutWallet extends s {
535
544
  })}
536
545
  />
537
546
  <button class="restore" type="submit">
538
- ${((_c = this.theme) === null || _c === void 0 ? void 0 : _c.restoreLabel) ||
547
+ ${((_d = this.theme) === null || _d === void 0 ? void 0 : _d.restoreLabel) ||
539
548
  customAttributes.restoreLabel.defaultValue}
540
549
  </button>
541
550
  </form>
542
- <button class="delete" type="button" @click=${this.skipCarts}>
543
- ${((_d = this.theme) === null || _d === void 0 ? void 0 : _d.rejectionLabel) ||
551
+ <button class="reject" type="button" @click=${this.skipCarts}>
552
+ ${((_e = this.theme) === null || _e === void 0 ? void 0 : _e.rejectionLabel) ||
544
553
  customAttributes.rejectionLabel.defaultValue}
545
- </button>
546
- `;
554
+ </button> `;
547
555
  };
548
556
  this.loadingContent = () => {
549
557
  return x `
@@ -564,7 +572,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
564
572
  <form method="dialog" @submit=${this.onSubmit}>
565
573
  <button class="restore" type="submit">Try Again</button>
566
574
  </form>
567
- <button class="delete" @click=${this.skipCarts}>Dismiss</button>
575
+ <button class="reject" @click=${this.skipCarts}>Dismiss</button>
568
576
  `;
569
577
  };
570
578
  }
@@ -584,7 +592,14 @@ let BlotoutWallet = class BlotoutWallet extends s {
584
592
  }).catch(logger.error);
585
593
  }
586
594
  connectedCallback() {
595
+ var _a;
587
596
  super.connectedCallback();
597
+ if (!this.isStylesheetInjected && ((_a = this.theme) === null || _a === void 0 ? void 0 : _a.css)) {
598
+ const sheet = new CSSStyleSheet();
599
+ sheet.replaceSync(this.theme.css);
600
+ this.shadowRoot.adoptedStyleSheets.push(sheet);
601
+ this.isStylesheetInjected = true;
602
+ }
588
603
  if (!this.userId) {
589
604
  logger.error('No UserId set');
590
605
  return;
@@ -661,7 +676,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
661
676
  if (this.isPopUpDismissed) {
662
677
  return T;
663
678
  }
664
- return x ` <dialog @click=${this.onDialogClick}>
679
+ return x ` <dialog class="popup" @click=${this.onDialogClick}>
665
680
  <div @click=${this.onWrapperClick}>
666
681
  <div
667
682
  class="centered"
@@ -717,7 +732,7 @@ BlotoutWallet.styles = [
717
732
  cursor: pointer;
718
733
  }
719
734
 
720
- dialog {
735
+ .popup {
721
736
  width: 430px;
722
737
  max-width: 100vw;
723
738
  color: var(--primary);
@@ -728,19 +743,32 @@ BlotoutWallet.styles = [
728
743
  text-align: center;
729
744
  }
730
745
 
731
- dialog::backdrop {
746
+ .popup::backdrop {
732
747
  background: var(--backdrop);
733
748
  backdrop-filter: blur(4px);
734
749
  }
735
750
 
736
- form.restore-form {
751
+ .restore-form {
737
752
  display: flex;
738
753
  flex-direction: column;
739
754
  gap: 16px;
740
755
  width: 100%;
741
756
  }
742
757
 
743
- input {
758
+ .title {
759
+ margin: 0;
760
+ padding: 0;
761
+ font-size: 20px;
762
+ font-weight: bold;
763
+ line-height: 30px;
764
+ }
765
+
766
+ .text {
767
+ margin: 0;
768
+ padding: 0;
769
+ }
770
+
771
+ .email {
744
772
  width: 100%;
745
773
  border: 1px solid var(--input-border);
746
774
  color: var(--input-foreground);
@@ -749,12 +777,12 @@ BlotoutWallet.styles = [
749
777
  border-radius: 5px;
750
778
  }
751
779
 
752
- input::placeholder {
780
+ .email::placeholder {
753
781
  color: var(--input-foreground);
754
782
  color: color(from var(--input-foreground) srgb r g b / 0.7);
755
783
  }
756
784
 
757
- :is(input[name='email'], button):focus-visible {
785
+ :is(.email, button):focus-visible {
758
786
  outline-color: var(--primary);
759
787
  }
760
788
 
@@ -767,7 +795,7 @@ BlotoutWallet.styles = [
767
795
  padding: 12px 20px;
768
796
  }
769
797
 
770
- .delete {
798
+ .reject {
771
799
  font-size: 14px;
772
800
  line-height: 20px;
773
801
  color: var(--secondary);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blotoutio/providers-blotout-wallet-sdk",
3
- "version": "0.55.1",
3
+ "version": "0.56.0",
4
4
  "description": "Blotout Wallet SDK for EdgeTag",
5
5
  "author": "Blotout",
6
6
  "license": "MIT",