@intl-tel-input/svelte 28.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-2016 Jack O'Connor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,14 @@
+# IntlTelInput Svelte Component
+
+A Svelte 5 component for the [intl-tel-input](https://github.com/jackocnr/intl-tel-input) JavaScript plugin. View the [source code](https://github.com/jackocnr/intl-tel-input/blob/master/packages/svelte/src/IntlTelInput.svelte).
+
+[Explore docs »](https://intl-tel-input.com/docs/svelte-component)
+
+## Running the demos locally
+
+1. Initialise the submodules: `git submodule update --init --recursive`
+2. Install dependencies: `npm install`
+3. Build: `npm run build`
+4. Run a demo: `npm run svelte:demo` and copy the given URL into your browser.
+
+This defaults to the validation demo — to run a different one, set the `DEMO` env var, e.g. `DEMO=simple npm run svelte:demo`. View the full list of [available demos](https://github.com/jackocnr/intl-tel-input/tree/master/packages/svelte/demo).

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@intl-tel-input/svelte",
+  "version": "28.0.0",
+  "description": "A Svelte component for the intl-tel-input JavaScript plugin",
+  "type": "module",
+  "license": "MIT",
+  "author": "Jack O'Connor (http://jackocnr.com)",
+  "types": "./src/IntlTelInput.svelte.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/IntlTelInput.svelte.d.ts",
+      "svelte": "./src/IntlTelInput.svelte",
+      "import": "./src/IntlTelInput.svelte"
+    },
+    "./with-utils": {
+      "types": "./src/IntlTelInput.svelte.d.ts",
+      "svelte": "./src/IntlTelInputWithUtils.svelte",
+      "import": "./src/IntlTelInputWithUtils.svelte"
+    }
+  },
+  "files": [
+    "src/*",
+    "LICENSE",
+    "package.json",
+    "README.md"
+  ],
+  "dependencies": {
+    "intl-tel-input": "^28.0.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jackocnr/intl-tel-input.git",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://intl-tel-input.com/docs/svelte-component",
+  "bugs": "https://github.com/jackocnr/intl-tel-input/issues",
+  "keywords": [
+    "intl-tel-input",
+    "svelte",
+    "component",
+    "international",
+    "telephone",
+    "phone",
+    "input",
+    "flag",
+    "dropdown",
+    "validation",
+    "typescript"
+  ]
+}

package/src/IntlTelInput.svelte

@@ -0,0 +1,233 @@
+<script module lang="ts">
+  import intlTelInput, { type Iti } from "intl-tel-input";
+  export { intlTelInput };
+</script>
+
+<script lang="ts">
+  // Resolves to IntlTelInput.svelte.d.ts (the type declaration file for this component).
+  import type { Props } from "./IntlTelInput.svelte";
+  import type { SomeOptions, ValidationError } from "intl-tel-input";
+  import { onMount, onDestroy } from "svelte";
+
+  // Props
+  let {
+    disabled = false,
+    readonly = false,
+    inputProps = {},
+    usePreciseValidation = false,
+    initialValue = "",
+    value = undefined,
+    onChangeNumber,
+    onChangeCountry,
+    onChangeValidity,
+    onChangeErrorCode,
+    onOpenCountryDropdown,
+    onCloseCountryDropdown,
+    onStrictReject,
+    ...initOptions
+  } = $props() as Props;
+
+  type StrictRejectDetail = {
+    source: "key" | "paste";
+    rejectedInput: string;
+    reason: "invalid" | "max-length";
+  };
+
+  // State
+  let inputElement: HTMLInputElement | undefined = $state();
+  let instance: Iti | undefined = $state();
+  // Classes the plugin adds directly to the input (e.g. iti__tel-input)
+  let pluginInputClasses = $state("");
+  let lastEmittedNumber: string | undefined = $state();
+  let lastEmittedCountry: string | undefined = $state();
+  let lastEmittedValidity: boolean | undefined = $state();
+  let lastEmittedErrorCode: ValidationError | null | undefined = $state();
+  let hasInitialized = $state(false);
+  // if an input event fires before utils has loaded, we defer the update until the promise resolves
+  let pendingUpdate = false;
+
+  // Validation helper
+  const isValid = (): boolean | null => {
+    if (!instance) return null;
+    return usePreciseValidation
+      ? instance.isValidNumberPrecise()
+      : instance.isValidNumber();
+  };
+
+  // Update handlers
+  const updateValidity = () => {
+    if (!instance) return;
+    // if utils has not loaded yet, isValidNumber/getValidationError will throw. defer until the promise resolves.
+    if (!intlTelInput.utils) {
+      pendingUpdate = true;
+      return;
+    }
+    const isCurrentlyValid = isValid();
+    if (isCurrentlyValid === null) return;
+
+    const valid = !!isCurrentlyValid;
+    const errorCode = valid ? null : instance.getValidationError();
+
+    if (valid !== lastEmittedValidity) {
+      lastEmittedValidity = valid;
+      onChangeValidity?.(valid);
+    }
+
+    if (errorCode !== lastEmittedErrorCode) {
+      lastEmittedErrorCode = errorCode;
+      onChangeErrorCode?.(errorCode);
+    }
+  };
+
+  const updateValue = () => {
+    if (!instance?.isActive()) {
+      return;
+    }
+    // if utils has not loaded yet, getNumber will throw. defer until the promise resolves.
+    if (!intlTelInput.utils) {
+      pendingUpdate = true;
+      return;
+    }
+    const number = instance.getNumber() ?? "";
+    if (number !== lastEmittedNumber) {
+      lastEmittedNumber = number;
+      onChangeNumber?.(number);
+    }
+    updateValidity();
+  };
+
+  const updateCountry = () => {
+    if (!instance?.isActive()) {
+      return;
+    }
+    const country = instance.getSelectedCountryData()?.iso2 ?? "";
+    if (country !== lastEmittedCountry) {
+      lastEmittedCountry = country;
+      onChangeCountry?.(country);
+    }
+    updateValue();
+  };
+
+  const handleOpenDropdown = (): void => onOpenCountryDropdown?.();
+  const handleCloseDropdown = (): void => onCloseCountryDropdown?.();
+  const handleStrictReject = (e: Event): void => {
+    const { source, rejectedInput, reason } = (e as CustomEvent<StrictRejectDetail>).detail;
+    onStrictReject?.(source, rejectedInput, reason);
+  };
+
+  // Lifecycle
+  onMount(() => {
+    if (inputElement) {
+      instance = intlTelInput(inputElement, initOptions as SomeOptions);
+      pluginInputClasses = inputElement.className;
+      if (disabled) instance.setDisabled(disabled);
+      if (readonly) instance.setReadonly(readonly);
+
+      inputElement.addEventListener("open:countrydropdown", handleOpenDropdown);
+      inputElement.addEventListener("close:countrydropdown", handleCloseDropdown);
+      inputElement.addEventListener("strict:reject", handleStrictReject);
+
+      lastEmittedCountry = instance.getSelectedCountryData()?.iso2 ?? "";
+      hasInitialized = true;
+
+      // wait for utils to load before calling methods that require it (getNumber, setNumber, isValidNumber, etc.)
+      instance.promise.then(() => {
+        if (!instance?.isActive()) return;
+        if (initialValue) instance.setNumber(initialValue);
+        // if an input event fired during the utils-loading gap, replay it now so the skipped emissions fire.
+        // otherwise seed silently so we don't fire change callbacks on initial mount.
+        if (pendingUpdate) {
+          pendingUpdate = false;
+          updateCountry();
+        } else {
+          lastEmittedNumber = instance.getNumber() ?? "";
+          const initialValid = isValid();
+          if (initialValid !== null) {
+            lastEmittedValidity = !!initialValid;
+            lastEmittedErrorCode = initialValid ? null : instance.getValidationError();
+          }
+        }
+      });
+    }
+  });
+
+  onDestroy(() => {
+    if (inputElement) {
+      inputElement.removeEventListener("open:countrydropdown", handleOpenDropdown);
+      inputElement.removeEventListener("close:countrydropdown", handleCloseDropdown);
+      inputElement.removeEventListener("strict:reject", handleStrictReject);
+    }
+    instance?.destroy();
+  });
+
+  // Watch disabled prop changes (only after initialization)
+  $effect(() => {
+    if (hasInitialized && instance) {
+      instance.setDisabled(disabled);
+    }
+  });
+
+  // Watch readonly prop changes (only after initialization)
+  $effect(() => {
+    if (hasInitialized && instance) {
+      instance.setReadonly(readonly);
+    }
+  });
+
+  // Watch value prop changes (only after initialization).
+  // If value is undefined, the component is uncontrolled — do not touch the input
+  // (otherwise we would clobber any initialValue with an empty string on mount).
+  $effect(() => {
+    if (!hasInitialized || !instance || value === undefined) {
+      return;
+    }
+    const next = value ?? "";
+    // wait for utils to load before calling methods that require it
+    instance.promise.then(() => {
+      if (!instance?.isActive()) return;
+      const currentCanonical = instance.getNumber() ?? "";
+      const isFocused = document.activeElement === inputElement;
+      if (isFocused || currentCanonical === next) {
+        return;
+      }
+      instance.setNumber(next);
+      updateValidity();
+    });
+  });
+
+  // Expose instance and input for parent access
+  export function getInstance(): Iti | undefined {
+    return instance;
+  }
+  export function getInput(): HTMLInputElement | undefined {
+    return inputElement;
+  }
+
+  const warnInputProp = (prop: string): void => {
+    console.warn(`intl-tel-input: ignoring inputProps.${prop} - see docs for more info.`);
+  };
+
+  const ignoredInputProps = new Set(["type", "value", "disabled", "readonly", "oninput"]);
+
+  const sanitizeInputProps = (props: Record<string, unknown>) => {
+    const rest: Record<string, unknown> = {};
+    for (const [key, val] of Object.entries(props)) {
+      if (ignoredInputProps.has(key)) {
+        warnInputProp(key);
+      } else if (key === "class") {
+        rest[key] = `${pluginInputClasses} ${val}`;
+      } else {
+        rest[key] = val;
+      }
+    }
+    return rest;
+  };
+</script>
+
+<!-- inputProps must come first, so cannot override the other required props -->
+<input
+  {...sanitizeInputProps(inputProps)}
+  bind:this={inputElement}
+  type="tel"
+  oninput={updateCountry}
+/>

package/src/IntlTelInput.svelte.d.ts

@@ -0,0 +1,36 @@
+// Hand-written because svelte2tsx can't generate correct prop types for Svelte 5's $props() rune.
+// See: https://github.com/sveltejs/svelte/discussions/13164
+import type { Component } from "svelte";
+import type { Iti, SomeOptions, ValidationError } from "intl-tel-input";
+import intlTelInput from "intl-tel-input";
+
+export type StrictRejectSource = "key" | "paste";
+export type StrictRejectReason = "invalid" | "max-length";
+
+export type Props = SomeOptions & {
+  disabled?: boolean;
+  readonly?: boolean;
+  inputProps?: Record<string, unknown>;
+  initialValue?: string;
+  value?: string | null;
+  usePreciseValidation?: boolean;
+  onChangeNumber?: (number: string) => void;
+  onChangeCountry?: (iso2: string) => void;
+  onChangeValidity?: (isValid: boolean) => void;
+  onChangeErrorCode?: (errorCode: ValidationError | null) => void;
+  onOpenCountryDropdown?: () => void;
+  onCloseCountryDropdown?: () => void;
+  onStrictReject?: (source: StrictRejectSource, rejectedInput: string, reason: StrictRejectReason) => void;
+};
+
+export { intlTelInput };
+
+declare const IntlTelInput: Component<
+  Props,
+  {
+    getInstance: () => Iti | undefined;
+    getInput: () => HTMLInputElement | undefined;
+  }
+>;
+
+export default IntlTelInput;

package/src/IntlTelInputWithUtils.svelte

@@ -0,0 +1,24 @@
+<script module lang="ts">
+  import intlTelInput from "intl-tel-input";
+  import utils from "intl-tel-input/utils";
+  intlTelInput.utils = utils as typeof intlTelInput.utils;
+  export { intlTelInput };
+</script>
+
+<script lang="ts">
+  import IntlTelInput from "./IntlTelInput.svelte";
+  import type { ComponentProps } from "svelte";
+  import type { Iti } from "intl-tel-input";
+
+  let { ...props }: ComponentProps<typeof IntlTelInput> = $props();
+  let inner: ReturnType<typeof IntlTelInput> | undefined = $state();
+
+  export function getInstance(): Iti | undefined {
+    return inner?.getInstance();
+  }
+  export function getInput(): HTMLInputElement | undefined {
+    return inner?.getInput();
+  }
+</script>
+
+<IntlTelInput bind:this={inner} {...props} />