@stubber/form-fields 2.2.0 → 2.2.1

package/dist/form-fields/sub/array-builder-field.svelte

@@ -12,13 +12,12 @@
 
 <script>import { Button } from "@stubber/ui/button";
 import * as Collapsible from "@stubber/ui/collapsible";
+import { Label } from "@stubber/ui/label";
 import { get as get_store_value } from "svelte/store";
-import FieldLabel from "../FieldLabel.svelte";
+import FieldExprToggle from "../FieldExprToggle.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import FormField from "../form-field.svelte";
 import { build_field } from "../utils";
-import FieldExprToggle from "../FieldExprToggle.svelte";
-import { Label } from "@stubber/ui/label";
 export let fieldStore;
 const new_entry_field = $fieldStore?.params?.new_entry_field || {
   fieldtype: "text"

package/dist/form-fields/sub/telephone-field.svelte

@@ -1,29 +1,34 @@
 <script context="module">import {} from "../interfaces";
 </script>
 
-<script>import intlTelInput from "intl-tel-input";
-import "intl-tel-input/build/css/intlTelInput.css";
+<script>import intlTelInput, { Iti } from "intl-tel-input";
+import "intl-tel-input/styles";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import { set_value_details } from "../utils";
 export let fieldStore;
-let iti;
+let iti = null;
 function setupInput(input_element) {
+  setup_intl_tel_input(input_element);
+}
+async function setup_intl_tel_input(input_element) {
   iti = intlTelInput(input_element, {
-    initialCountry: "auto",
-    geoIpLookup: (callback) => {
-      fetch("https://ipapi.co/json").then((res) => res.json()).then((data) => callback(data.country_code)).catch(() => callback("us"));
+    loadUtils: () => import("intl-tel-input/utils"),
+    initialCountryLookup: async () => {
+      const res = await fetch("https://ipapi.co/json");
+      const data = await res.json();
+      return data?.country_code || "us";
     },
-    utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js"
+    separateDialCode: false
   });
   const itis = document.querySelectorAll("div.iti");
   itis.forEach((iti2) => {
     iti2.style["width"] = "100%";
   });
   input_element.addEventListener("countrychange", () => set_number_details());
+  await iti.promise;
   set_number_details();
 }
-$: if ($fieldStore.value) set_number_details();
 let last_set_value = null;
 function set_number_details(force = false) {
   if (!iti) return;
@@ -31,9 +36,8 @@ function set_number_details(force = false) {
   last_set_value = $fieldStore.value;
   const formatted_number = iti.getNumber();
   const is_valid = iti.isValidNumber();
-  const country_data = iti.getSelectedCountryData();
-  delete country_data?.node;
-  if (is_valid && (force || formatted_number !== $fieldStore.value)) {
+  const country_data = iti.getSelectedCountry();
+  if (is_valid && formatted_number !== $fieldStore.value) {
     $fieldStore.value = formatted_number;
   }
   if ($fieldStore.value) {
@@ -43,24 +47,19 @@ function set_number_details(force = false) {
     });
   }
 }
-if ($fieldStore.value) {
-  setTimeout(() => {
-    $fieldStore.value = $fieldStore.value || "";
-    set_number_details(true);
-  }, 100);
-}
 </script>
 
 <FieldLabel {fieldStore} />
 <div
-  class="w-full bg-surface-100 flex space-x-4 focus:outline-primary-400 relative mt-2 rounded-md"
+  class="relative mt-2 flex w-full space-x-4 rounded-md bg-surface-100 focus:outline-primary-400"
 >
   <input
     use:setupInput
     bind:value={$fieldStore.value}
+    on:input={() => set_number_details()}
     type="tel"
     id={$fieldStore.id}
-    class="border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-[invalid]:border-destructive aria-[invalid]:ring-destructive/50 aria-[invalid]:focus-visible:ring-destructive/50"
+    class="shadow-xs flex h-9 w-full min-w-0 rounded-md border border-input bg-background px-3 py-1 text-base outline-none ring-offset-background transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive aria-[invalid]:ring-destructive/50 aria-[invalid]:focus-visible:ring-destructive/50 md:text-sm dark:bg-input/30"
     aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
     aria-describedby="message-{$fieldStore.id}"
   />

package/dist/form-fields/sub/telephone-field.svelte.d.ts

@@ -6,7 +6,7 @@ export interface ITelephoneFieldParams {
 export interface ITelephoneField extends IBaseField<ITelephoneFieldParams> {
     fieldtype: "telephone";
 }
-import "intl-tel-input/build/css/intlTelInput.css";
+import "intl-tel-input/styles";
 declare const __propDef: {
     props: {
         fieldStore: Writable<IBuiltField<ITelephoneFieldParams>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",
@@ -74,7 +74,7 @@
     "fast-equals": "^5.0.1",
     "github-markdown-css": "^5.2.0",
     "html5-qrcode": "^2.3.8",
-    "intl-tel-input": "^18.2.1",
+    "intl-tel-input": "^29.1.1",
     "jsonata": "^2.0.3",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.1",