hanc-webrtc-widgets 2.8.3 → 2.8.4

package/dist/hanc-webrtc-widgets.es.js

@@ -7389,7 +7389,7 @@ function Cu() {
   return typeof window.RTCRtpSender < "u" && // @ts-ignore
   typeof window.RTCRtpSender.prototype.createEncodedStreams < "u";
 }
-class GS extends wi.EventEmitter {
+class MS extends wi.EventEmitter {
   constructor() {
     let A = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     super(), this.onKeyRatcheted = (e, t, g) => {
@@ -16952,7 +16952,7 @@ class tD extends pg {
     });
   }
 }
-class MS extends wi.EventEmitter {
+class FS extends wi.EventEmitter {
   constructor(A, e) {
     let t = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     super(), this.options = {}, this.checkResults = /* @__PURE__ */ new Map(), this.url = A, this.token = e, this.options = t;
@@ -39807,11 +39807,11 @@ const lt = {
     // Warm neon orange
   }
 };
-function FS(i, A = "dark") {
+function US(i, A = "dark") {
   const e = A === "dark" ? lt : xt;
   return e[i] || e[Object.keys(e)[0]];
 }
-function US(i = "dark") {
+function LS(i = "dark") {
   return Object.keys(i === "dark" ? lt : xt);
 }
 const SC = {
@@ -39959,18 +39959,18 @@ const SC = {
       idleGlowMultiplier: 1.3
     }
   }
-}, LS = Object.fromEntries(
+}, vS = Object.fromEntries(
   Object.entries(SC).map(([i, A]) => [i, A.dark])
-), vS = Object.fromEntries(
+), KS = Object.fromEntries(
   Object.entries(SC).map(([i, A]) => [i, A.light])
 );
 function jC(i) {
   return (SC[i] || SC.default).dark;
 }
-function KS() {
+function JS() {
   return Object.keys(SC);
 }
-function JS(i, A) {
+function YS(i, A) {
   const e = jC(A);
   i.orbColors = e.colors, i.glowIntensity = e.glowIntensity, i.idleGlowMultiplier = e.idleGlowMultiplier;
 }
@@ -40052,7 +40052,7 @@ function Un(i) {
   const A = window.location.hostname;
   return ky.some((t) => A === t || A.endsWith(`.${t}`)) || i.allow_all_domains || !i.allowed_domains || i.allowed_domains.length === 0 ? !0 : i.allowed_domains.some((t) => A === t || A.endsWith(`.${t}`));
 }
-function YS(i) {
+function TS(i) {
   i ? an.delete(i) : an.clear();
 }
 var Ry = Object.defineProperty, Gy = Object.getOwnPropertyDescriptor, WC = (i, A, e, t) => {
@@ -46239,7 +46239,38 @@ var DS = Object.defineProperty, pS = Object.getOwnPropertyDescriptor, wt = (i, A
     (C = i[I]) && (g = (t ? C(A, e, g) : C(g)) || g);
   return t && g && DS(A, e, g), g;
 };
-const mE = 5e3;
+const mE = 5e3, _S = {
+  AT: "664 123 4567",
+  DE: "151 2345 6789",
+  CH: "78 123 45 67",
+  FR: "6 12 34 56 78",
+  IT: "312 345 6789",
+  ES: "612 34 56 78",
+  PT: "912 345 678",
+  NL: "6 12345678",
+  BE: "470 12 34 56",
+  PL: "512 345 678",
+  CZ: "601 123 456",
+  RO: "712 345 678",
+  BG: "88 123 4567",
+  GR: "691 234 5678",
+  HR: "91 234 5678",
+  SE: "70 123 45 67",
+  DK: "20 12 34 56",
+  FI: "41 234 5678",
+  EE: "5123 4567",
+  LV: "21 234 567",
+  LT: "612 34567",
+  IE: "85 012 3456",
+  LU: "628 123 456",
+  SK: "912 345 678",
+  MT: "9696 1234",
+  CY: "96 123456",
+  HU: "20 123 4567",
+  GB: "7400 123456",
+  US: "212 555 0123",
+  CA: "416 555 0123"
+};
 let ot = class extends ti {
   constructor() {
     super(...arguments), this.agentId = "", this.apiBaseUrl = mi, this.skipFetch = !1, this.manifestOverride = null, this.theme = "", this.view = { kind: "loading" }, this.manifest = null, this.selectedCountry = null, this.phoneRaw = "", this.phoneError = "", this.apiError = null, this.pickerOpen = !1, this.pickerSearch = "", this.pollAbort = null, this.pollTimer = null, this.lastFocusedBeforeOpen = null, this.onDocumentKey = (i) => {
@@ -46283,9 +46314,16 @@ let ot = class extends ti {
     }
   }
   adoptManifest(i) {
-    this.manifest = i;
-    const A = i.allowed_countries.filter((g) => g.enabled), t = this.detectCountryFromLocale(A) ?? A.find((g) => g.code === "AT") ?? A[0];
-    this.selectedCountry = (t == null ? void 0 : t.code) ?? null, this.view = { kind: "closed" };
+    const A = {
+      ...i,
+      allowed_countries: i.allowed_countries.map((I) => ({
+        ...I,
+        example: I.example || _S[I.code] || ""
+      }))
+    };
+    this.manifest = A;
+    const e = A.allowed_countries.filter((I) => I.enabled), g = this.detectCountryFromLocale(e) ?? e.find((I) => I.code === "AT") ?? e[0];
+    this.selectedCountry = (g == null ? void 0 : g.code) ?? null, this.view = { kind: "closed" };
   }
   detectCountryFromLocale(i) {
     var g;
@@ -46524,7 +46562,7 @@ let ot = class extends ti {
               type="tel"
               autocomplete="tel"
               inputmode="tel"
-              placeholder=${(e == null ? void 0 : e.dial_code) ?? ""}
+              placeholder=${(e == null ? void 0 : e.example) ?? ""}
               .value=${this.phoneRaw}
               ?disabled=${t}
               @input=${(I) => this.onPhoneInput(I.target.value)}
@@ -46554,12 +46592,9 @@ let ot = class extends ti {
     `;
   }
   renderCountryPicker(i, A) {
-    const e = this.manifest.allowed_countries, t = this.pickerSearch ? e.filter((I) => {
-      const C = this.pickerSearch.toLowerCase();
-      return I.name.toLowerCase().includes(C) || I.dial_code.includes(C) || I.code.toLowerCase().includes(C);
-    }) : e, g = [
-      ...t.filter((I) => I.enabled),
-      ...t.filter((I) => !I.enabled)
+    const e = this.manifest.allowed_countries, t = this.pickerSearch.trim().toLowerCase(), g = t.replace(/\D/g, ""), I = t ? e.filter((o) => !!(o.name.toLowerCase().includes(t) || o.code.toLowerCase().includes(t) || g && o.dial_code.replace(/\D/g, "").startsWith(g))) : e, C = [
+      ...I.filter((o) => o.enabled),
+      ...I.filter((o) => !o.enabled)
     ];
     return pA`
       <div class="picker">
@@ -46568,12 +46603,12 @@ let ot = class extends ti {
           type="button"
           aria-haspopup="listbox"
           aria-expanded=${this.pickerOpen}
-          @click=${(I) => {
-      I.preventDefault(), this.pickerOpen = !this.pickerOpen, this.pickerOpen && setTimeout(() => {
-        const C = this.renderRoot.querySelector(
+          @click=${(o) => {
+      o.preventDefault(), this.pickerOpen = !this.pickerOpen, this.pickerOpen && setTimeout(() => {
+        const n = this.renderRoot.querySelector(
           ".picker-search"
         );
-        C == null || C.focus();
+        n == null || n.focus();
       }, 30);
     }}
         >
@@ -46589,25 +46624,25 @@ let ot = class extends ti {
                   type="text"
                   placeholder="Search country or +code"
                   .value=${this.pickerSearch}
-                  @input=${(I) => this.pickerSearch = I.target.value}
+                  @input=${(o) => this.pickerSearch = o.target.value}
                 />
                 <div class="picker-list">
-                  ${g.map(
-      (I) => pA`
+                  ${C.map(
+      (o) => pA`
                       <button
                         type="button"
                         role="option"
-                        aria-disabled=${!I.enabled}
-                        aria-selected=${this.selectedCountry === I.code}
-                        class="picker-item ${I.enabled ? "" : "disabled"}"
+                        aria-disabled=${!o.enabled}
+                        aria-selected=${this.selectedCountry === o.code}
+                        class="picker-item ${o.enabled ? "" : "disabled"}"
                         @click=${() => {
-        I.enabled && this.selectCountry(I.code);
+        o.enabled && this.selectCountry(o.code);
       }}
                       >
-                        <span class="flag">${I.flag}</span>
-                        <span class="name">${I.name}</span>
-                        <span class="dial">${I.dial_code}</span>
-                        ${I.enabled ? Ee : pA`<span class="badge">coming soon</span>`}
+                        <span class="flag">${o.flag}</span>
+                        <span class="name">${o.name}</span>
+                        <span class="dial">${o.dial_code}</span>
+                        ${o.enabled ? Ee : pA`<span class="badge">coming soon</span>`}
                       </button>
                     `
     )}
@@ -46852,12 +46887,15 @@ ot.styles = $g`
 
     /* ---------- Card ---------- */
     .card {
-      width: 320px;
-      max-height: 480px;
+      width: 360px;
+      max-height: 560px;
       background: var(--cb-bg);
       border-radius: var(--cb-radius);
       box-shadow: var(--cb-shadow);
-      overflow: hidden;
+      /* visible so the country-picker popover can extend upward beyond the
+       * card's body without being clipped. The card itself still keeps its
+       * rounded corners — they are just border-radius, not a clip mask. */
+      overflow: visible;
       display: flex;
       flex-direction: column;
       animation: card-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -46896,7 +46934,8 @@ ot.styles = $g`
     }
     .card-body {
       padding: 4px 20px 20px;
-      overflow-y: auto;
+      /* visible so the country-picker popover isn't clipped on top */
+      overflow: visible;
     }
 
     /* ---------- Form ---------- */
@@ -46942,25 +46981,27 @@ ot.styles = $g`
     }
     .picker-panel {
       position: absolute;
-      top: 44px;
+      bottom: calc(100% + 6px);
       left: 0;
-      width: 280px;
-      max-height: 280px;
+      width: 320px;
+      max-height: 380px;
       background: var(--cb-bg);
       border: 1px solid var(--cb-border);
       border-radius: 10px;
       box-shadow: var(--cb-shadow);
-      z-index: 1;
+      z-index: 10;
       display: flex;
       flex-direction: column;
+      overflow: hidden;
     }
     .picker-search {
-      margin: 8px;
-      padding: 6px 10px;
+      margin: 10px 10px 6px;
+      padding: 8px 12px;
       border: 1px solid var(--cb-border);
-      border-radius: 6px;
-      font-size: 13px;
+      border-radius: 8px;
+      font-size: 14px;
       outline: none;
+      flex: 0 0 auto;
     }
     .picker-search:focus {
       border-color: var(--cb-primary);
@@ -46968,18 +47009,20 @@ ot.styles = $g`
     .picker-list {
       overflow-y: auto;
       padding-bottom: 6px;
+      flex: 1 1 auto;
+      min-height: 0;
     }
     .picker-item {
       display: grid;
-      grid-template-columns: 28px 1fr auto auto;
-      gap: 8px;
+      grid-template-columns: 26px 1fr auto auto;
+      gap: 10px;
       align-items: center;
       width: 100%;
-      padding: 8px 12px;
+      padding: 10px 14px;
       border: none;
       background: transparent;
       cursor: pointer;
-      font-size: 13px;
+      font-size: 14px;
       color: var(--cb-fg);
       text-align: left;
     }
@@ -47150,17 +47193,17 @@ export {
   $A as PillCall,
   XA as PillFloatingCall,
   kn as SoundManager,
-  JS as applyTheme,
-  YS as clearConfigCache,
+  YS as applyTheme,
+  TS as clearConfigCache,
   lt as darkPresets,
-  LS as darkThemes,
+  vS as darkThemes,
   Fn as fetchWidgetConfig,
-  FS as getColorPreset,
-  US as getPresetNames,
+  US as getColorPreset,
+  LS as getPresetNames,
   jC as getTheme,
-  KS as getThemeNames,
+  JS as getThemeNames,
   Un as isDomainAllowed,
   xt as lightPresets,
-  vS as lightThemes,
+  KS as lightThemes,
   SC as themes
 };