@pocketping/widget 1.8.0 → 1.10.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/dist/index.cjs CHANGED
@@ -63,6 +63,7 @@ function styles(options) {
63
63
  const resolvedFooterColor = resolveThemeColor(footerColor, isDark, "#f0f2f5", "#202c33");
64
64
  const resolvedToggleColor = resolveThemeColor(toggleColor, isDark, "#25d366", "#25d366");
65
65
  const resolvedToggleHoverColor = resolvedToggleColor !== "#25d366" ? adjustBrightness(resolvedToggleColor, -10) : "#22c55e";
66
+ const resolvedSendButtonHoverColor = adjustBrightness(resolvedHeaderColor, -15);
66
67
  const whatsappPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`;
67
68
  const dotsPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E")`;
68
69
  const resolvedChatBg = resolveThemeColor(chatBackground, isDark, "whatsapp", "whatsapp");
@@ -632,7 +633,7 @@ function styles(options) {
632
633
  height: 42px;
633
634
  min-width: 42px;
634
635
  border-radius: 50%;
635
- background: #00a884;
636
+ background: ${resolvedHeaderColor};
636
637
  color: white;
637
638
  border: none;
638
639
  cursor: pointer;
@@ -646,7 +647,7 @@ function styles(options) {
646
647
  }
647
648
 
648
649
  .pp-send-btn:not(:disabled):hover {
649
- background: #008f72;
650
+ background: ${resolvedSendButtonHoverColor};
650
651
  }
651
652
 
652
653
  .pp-send-btn:not(:disabled):active {
@@ -672,7 +673,7 @@ function styles(options) {
672
673
  }
673
674
 
674
675
  .pp-footer a {
675
- color: ${isDark ? "#00a884" : "#008069"};
676
+ color: ${primaryColor};
676
677
  text-decoration: none;
677
678
  font-weight: 500;
678
679
  }
@@ -3365,6 +3366,7 @@ var PocketPingClient = class {
3365
3366
  if (handlers) {
3366
3367
  handlers.forEach((handler) => handler(event.data, event));
3367
3368
  }
3369
+ this.config.onEvent?.(event);
3368
3370
  this.emit("event", event);
3369
3371
  this.emit(`event:${event.name}`, event);
3370
3372
  }
package/dist/index.d.cts CHANGED
@@ -100,6 +100,8 @@ interface PocketPingConfig {
100
100
  onError?: (error: Error) => void;
101
101
  /** Called when a version mismatch is detected */
102
102
  onVersionWarning?: (warning: VersionWarning) => void;
103
+ /** Called when a custom event is received from the backend */
104
+ onEvent?: (event: CustomEvent) => void;
103
105
  }
104
106
  type MessageStatus = 'sending' | 'sent' | 'delivered' | 'read';
105
107
  type AttachmentStatus = 'pending' | 'uploading' | 'ready' | 'failed';
package/dist/index.d.ts CHANGED
@@ -100,6 +100,8 @@ interface PocketPingConfig {
100
100
  onError?: (error: Error) => void;
101
101
  /** Called when a version mismatch is detected */
102
102
  onVersionWarning?: (warning: VersionWarning) => void;
103
+ /** Called when a custom event is received from the backend */
104
+ onEvent?: (event: CustomEvent) => void;
103
105
  }
104
106
  type MessageStatus = 'sending' | 'sent' | 'delivered' | 'read';
105
107
  type AttachmentStatus = 'pending' | 'uploading' | 'ready' | 'failed';
package/dist/index.js CHANGED
@@ -22,6 +22,7 @@ function styles(options) {
22
22
  const resolvedFooterColor = resolveThemeColor(footerColor, isDark, "#f0f2f5", "#202c33");
23
23
  const resolvedToggleColor = resolveThemeColor(toggleColor, isDark, "#25d366", "#25d366");
24
24
  const resolvedToggleHoverColor = resolvedToggleColor !== "#25d366" ? adjustBrightness(resolvedToggleColor, -10) : "#22c55e";
25
+ const resolvedSendButtonHoverColor = adjustBrightness(resolvedHeaderColor, -15);
25
26
  const whatsappPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`;
26
27
  const dotsPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E")`;
27
28
  const resolvedChatBg = resolveThemeColor(chatBackground, isDark, "whatsapp", "whatsapp");
@@ -591,7 +592,7 @@ function styles(options) {
591
592
  height: 42px;
592
593
  min-width: 42px;
593
594
  border-radius: 50%;
594
- background: #00a884;
595
+ background: ${resolvedHeaderColor};
595
596
  color: white;
596
597
  border: none;
597
598
  cursor: pointer;
@@ -605,7 +606,7 @@ function styles(options) {
605
606
  }
606
607
 
607
608
  .pp-send-btn:not(:disabled):hover {
608
- background: #008f72;
609
+ background: ${resolvedSendButtonHoverColor};
609
610
  }
610
611
 
611
612
  .pp-send-btn:not(:disabled):active {
@@ -631,7 +632,7 @@ function styles(options) {
631
632
  }
632
633
 
633
634
  .pp-footer a {
634
- color: ${isDark ? "#00a884" : "#008069"};
635
+ color: ${primaryColor};
635
636
  text-decoration: none;
636
637
  font-weight: 500;
637
638
  }
@@ -3324,6 +3325,7 @@ var PocketPingClient = class {
3324
3325
  if (handlers) {
3325
3326
  handlers.forEach((handler) => handler(event.data, event));
3326
3327
  }
3328
+ this.config.onEvent?.(event);
3327
3329
  this.emit("event", event);
3328
3330
  this.emit(`event:${event.name}`, event);
3329
3331
  }