@alikhalilll/a-tel-input 1.0.1

package/web-types.json

@@ -0,0 +1,526 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@alikhalilll/a-tel-input",
+  "version": "1.0.1",
+  "js-types-syntax": "typescript",
+  "description-markup": "markdown",
+  "framework": "vue",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "vue"
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "vue-components": [
+        {
+          "name": "ATelInput",
+          "source": {
+            "module": "@alikhalilll/a-tel-input",
+            "symbol": "ATelInput"
+          },
+          "props": [
+            {
+              "name": "allowedDialCodes",
+              "type": "string[]",
+              "required": false,
+              "description": "Whitelist of allowed dial-digit codes (no `+`), e.g. `['20', '966']`.\nCountries outside this list are still shown in the picker but rendered as disabled."
+            },
+            {
+              "name": "class",
+              "type": "ClassValue",
+              "required": false
+            },
+            {
+              "name": "contentClass",
+              "type": "string",
+              "required": false,
+              "description": "Forwarded to ACountrySelect: classes for the popover content surface."
+            },
+            {
+              "name": "countries",
+              "type": "CountryOption<RestCountry>[]",
+              "required": false,
+              "description": "Provide your own country list, forwarded to ACountrySelect."
+            },
+            {
+              "name": "defaultCountry",
+              "type": "string",
+              "required": false,
+              "description": "Initial country. Accepts either an ISO2 code (`'EG'`) or a dial-digit string\n(`'20'`, `'+20'`). When set, the picker is visible at mount with this country\npre-selected — overrides the hidden-until-detected default."
+            },
+            {
+              "name": "detectCountry",
+              "type": "DetectionStrategy",
+              "required": false,
+              "description": "Country auto-detect strategy. Defaults to `'auto'` — try IP geolocation first, then\ntimezone, then `navigator.language`, finally `defaultCountry`."
+            },
+            {
+              "name": "detectDebounceMs",
+              "type": "number",
+              "required": false,
+              "description": "Debounce window (ms) for `detectFromInput` detection. Each keystroke schedules the\nlibphonenumber parse + lookup; bursts of typing/paste collapse into a single call.\nClearing the input is not debounced — the picker hides immediately. Default 150ms."
+            },
+            {
+              "name": "detectFromInput",
+              "type": "boolean",
+              "required": false,
+              "description": "When true, the country picker is hidden until a leading dial code is detected in the\nphone input. Every keystroke runs a longest-prefix match against known dial codes; on\nfirst match the picker reveals with that country and the matched dial digits are\nstripped from `phone`. Skips the onMount IP/timezone/locale detection chain."
+            },
+            {
+              "name": "detector",
+              "type": "((options: DetectCountryOptions) => Promise<string | null | undefined>)",
+              "required": false,
+              "description": "Fully custom country detection. When provided, this function runs in place of the\nbuilt-in chain — `detectCountry`-style options are still honored but the function\nreceives them and is free to ignore them."
+            },
+            {
+              "name": "dir",
+              "type": "ATelInputDir",
+              "required": false,
+              "description": "Text direction. Omit (or pass `'auto'`) to inherit from the page — RTL pages get an\nRTL field automatically. Pass `'ltr'` / `'rtl'` to force it."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "required": false
+            },
+            {
+              "name": "drawerClass",
+              "type": "string",
+              "required": false,
+              "description": "Forwarded to ACountrySelect: classes for the mobile drawer surface."
+            },
+            {
+              "name": "emptyText",
+              "type": "string",
+              "required": false
+            },
+            {
+              "name": "errorClass",
+              "type": "string",
+              "required": false,
+              "description": "Classes for the error message line."
+            },
+            {
+              "name": "errorMessages",
+              "type": "Partial<Record<PhoneValidationReason, string>>",
+              "required": false,
+              "description": "Error labels keyed by reason. Each gets a sensible English default."
+            },
+            {
+              "name": "fieldClass",
+              "type": "string",
+              "required": false,
+              "description": "Classes for the outer wrapper that holds country select + input."
+            },
+            {
+              "name": "flagUrl",
+              "type": "((iso2: string, width: number) => string)",
+              "required": false,
+              "description": "Override the flag URL builder, forwarded to ACountrySelect."
+            },
+            {
+              "name": "hintClass",
+              "type": "string",
+              "required": false,
+              "description": "Classes for the helper hint line."
+            },
+            {
+              "name": "inputClass",
+              "type": "string",
+              "required": false,
+              "description": "Classes for the inner phone field input element."
+            },
+            {
+              "name": "ipEndpoint",
+              "type": "string",
+              "required": false,
+              "description": "Override the IP geolocation endpoint. Must return JSON with `country_code` or `country`."
+            },
+            {
+              "name": "loading",
+              "type": "boolean",
+              "required": false
+            },
+            {
+              "name": "loadingText",
+              "type": "string",
+              "required": false
+            },
+            {
+              "name": "locale",
+              "type": "string",
+              "required": false,
+              "description": "BCP-47 locale (e.g. `'ar'`, `'fr'`). When set, country names render localized via\n`Intl.DisplayNames` and the format hint uses the locale's numerals."
+            },
+            {
+              "name": "messages",
+              "type": "TelInputMessagesInput",
+              "required": false,
+              "description": "Localized UI strings. A single bag covering the picker, validation errors, and a11y\nlabels. Individual props (`searchPlaceholder`, `emptyText`, `loadingText`,\n`errorMessages`) take precedence over the matching `messages` key when both are set."
+            },
+            {
+              "name": "placeholder",
+              "type": "string",
+              "required": false
+            },
+            {
+              "name": "popoverClass",
+              "type": "string",
+              "required": false,
+              "description": "Forwarded to ACountrySelect: classes for the desktop popover surface."
+            },
+            {
+              "name": "scrollLock",
+              "type": "\"none\" | \"events\" | \"body\"",
+              "required": false,
+              "description": "How page scroll is blocked while the country popover is open. Defaults to `'events'`\n(sticky-safe document-level lock). Pass `'body'` for the legacy\n`body { overflow: hidden }` lock, or `'none'` to leave page scrolling alone."
+            },
+            {
+              "name": "searcher",
+              "type": "((query: string, country: CountryOption) => boolean)",
+              "required": false,
+              "description": "Custom search predicate, forwarded to ACountrySelect."
+            },
+            {
+              "name": "searchPlaceholder",
+              "type": "string",
+              "required": false,
+              "description": "Localized strings for the country picker UI."
+            },
+            {
+              "name": "showValidation",
+              "type": "boolean",
+              "required": false,
+              "description": "Light up the field's validation styling — coloured border + ring on the input and the\nerror message line below — when the number is valid / invalid. Default `false`, so the\nfield stays neutral and validation surfacing is left to the consumer (via the\n`validation` ref exposure)."
+            },
+            {
+              "name": "showValidationIcon",
+              "type": "boolean",
+              "required": false,
+              "description": "Show the green check / red alert icon at the end of the field. Default `false`; opt\nin with `true`. Independent of `showValidation` — you can show the icon without the\ncoloured field, or vice versa. The slots `#valid-icon` / `#error-icon` still apply."
+            },
+            {
+              "name": "size",
+              "type": "Size",
+              "required": false
+            }
+          ],
+          "slots": [
+            {
+              "name": "chevron",
+              "description": "Forwarded to ACountrySelect — replace the chevron."
+            },
+            {
+              "name": "detecting",
+              "description": "Replace the spinner shown in the picker slot during the debounce window."
+            },
+            {
+              "name": "empty"
+            },
+            {
+              "name": "error",
+              "description": "Replace the error message rendered when invalid."
+            },
+            {
+              "name": "error-icon",
+              "description": "Replace the warning icon shown when the number fails validation."
+            },
+            {
+              "name": "flag",
+              "description": "Forwarded — replace any flag rendering."
+            },
+            {
+              "name": "group-header",
+              "description": "Forwarded — section header."
+            },
+            {
+              "name": "hint",
+              "description": "Replace the dim helper line shown below the input when empty."
+            },
+            {
+              "name": "item",
+              "description": "Forwarded — replace each country list row."
+            },
+            {
+              "name": "loading"
+            },
+            {
+              "name": "prefix",
+              "description": "Content before the country select trigger (e.g. an icon)."
+            },
+            {
+              "name": "search",
+              "description": "Forwarded — search bar."
+            },
+            {
+              "name": "suffix",
+              "description": "Content between the input and the validation icons."
+            },
+            {
+              "name": "trigger",
+              "description": "Forwarded to ACountrySelect — replace the trigger button."
+            },
+            {
+              "name": "valid-icon",
+              "description": "Replace the green check shown when the number validates."
+            }
+          ],
+          "js": {
+            "events": [
+              {
+                "name": "update:country"
+              },
+              {
+                "name": "update:phone"
+              }
+            ]
+          }
+        },
+        {
+          "name": "ACountrySelect",
+          "source": {
+            "module": "@alikhalilll/a-tel-input",
+            "symbol": "ACountrySelect"
+          },
+          "description": "Props for ACountrySelect — the standalone country picker. Surface\nseparately so it can be used outside `ATelInput` with full type support.",
+          "props": [
+            {
+              "name": "allCountriesLabel",
+              "type": "string",
+              "required": false
+            },
+            {
+              "name": "allowedDialCodes",
+              "type": "string[]",
+              "required": false,
+              "description": "ISO2 codes that are selectable. Others are listed but disabled."
+            },
+            {
+              "name": "class",
+              "type": "ClassValue",
+              "required": false
+            },
+            {
+              "name": "contentClass",
+              "type": "ClassValue",
+              "required": false
+            },
+            {
+              "name": "countries",
+              "type": "CountryOption<RestCountry>[]",
+              "required": false,
+              "description": "Provide your own country list (bypasses the REST Countries fetch)."
+            },
+            {
+              "name": "countryLabel",
+              "type": "string",
+              "required": false,
+              "description": "Prefix of the trigger's `aria-label` when a country is selected, e.g. `\"Country\"`."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "required": false
+            },
+            {
+              "name": "drawerClass",
+              "type": "ClassValue",
+              "required": false
+            },
+            {
+              "name": "emptyText",
+              "type": "string",
+              "required": false
+            },
+            {
+              "name": "flagUrl",
+              "type": "((iso2: string, width: number) => string)",
+              "required": false,
+              "description": "Override the flag URL builder, e.g. `(iso, w) => `/flags/${iso}.svg``."
+            },
+            {
+              "name": "kbdClose",
+              "type": "string | null",
+              "required": false
+            },
+            {
+              "name": "kbdOpen",
+              "type": "string | null",
+              "required": false,
+              "description": "Override the right-side kbd hints. Pass `null` to hide."
+            },
+            {
+              "name": "loadingText",
+              "type": "string",
+              "required": false
+            },
+            {
+              "name": "locale",
+              "type": "string",
+              "required": false,
+              "description": "BCP-47 locale — country names render localized via `Intl.DisplayNames`."
+            },
+            {
+              "name": "maxResults",
+              "type": "number",
+              "required": false,
+              "description": "Cap the number of matching countries shown in search results."
+            },
+            {
+              "name": "popoverClass",
+              "type": "ClassValue",
+              "required": false
+            },
+            {
+              "name": "scrollLock",
+              "type": "\"none\" | \"events\" | \"body\"",
+              "required": false,
+              "description": "How page scroll is blocked while the popover is open. Default `'events'`."
+            },
+            {
+              "name": "searcher",
+              "type": "((query: string, country: CountryOption) => boolean)",
+              "required": false,
+              "description": "Custom search predicate. Default: substring match on the precomputed `search_key`."
+            },
+            {
+              "name": "searchPlaceholder",
+              "type": "string",
+              "required": false
+            },
+            {
+              "name": "selectCountryLabel",
+              "type": "string",
+              "required": false,
+              "description": "Trigger's `aria-label` when no country is selected."
+            },
+            {
+              "name": "size",
+              "type": "Size",
+              "required": false,
+              "description": "Drives the trigger button padding + text size. Matches ATelInput's `size`."
+            },
+            {
+              "name": "suggestedLabel",
+              "type": "string",
+              "required": false
+            },
+            {
+              "name": "suggestedLimit",
+              "type": "number",
+              "required": false,
+              "description": "Max items rendered under the \"Suggested\" header (current + recents, deduped)."
+            },
+            {
+              "name": "triggerClass",
+              "type": "ClassValue",
+              "required": false
+            }
+          ],
+          "slots": [
+            {
+              "name": "chevron",
+              "description": "Replace the chevron icon."
+            },
+            {
+              "name": "empty",
+              "description": "Replace the empty/no-results state."
+            },
+            {
+              "name": "flag",
+              "description": "Replace just the flag rendered in the trigger and items."
+            },
+            {
+              "name": "group-header",
+              "description": "Replace a section header."
+            },
+            {
+              "name": "item",
+              "description": "Replace each country list row."
+            },
+            {
+              "name": "item-check",
+              "description": "Replace just the right-side check icon for the selected row."
+            },
+            {
+              "name": "loading",
+              "description": "Replace the loading state."
+            },
+            {
+              "name": "search",
+              "description": "Replace the entire search bar (input + icon + kbd)."
+            },
+            {
+              "name": "search-icon",
+              "description": "Replace the search-bar leading icon."
+            },
+            {
+              "name": "trigger",
+              "description": "Replace the entire country picker trigger button."
+            }
+          ],
+          "js": {
+            "events": [
+              {
+                "name": "update:selected"
+              }
+            ]
+          }
+        },
+        {
+          "name": "ACountryFlag",
+          "source": {
+            "module": "@alikhalilll/a-tel-input",
+            "symbol": "ACountryFlag"
+          },
+          "description": "Props for ACountryFlag — the standalone flag image component. Renders a\n`flagcdn` image for an ISO2 code with an automatic text-badge fallback when the\nimage fails to load. Surface separately so it can be used outside `ATelInput`\n(e.g., in a custom country picker).",
+          "props": [
+            {
+              "name": "alt",
+              "type": "string",
+              "required": false
+            },
+            {
+              "name": "class",
+              "type": "ClassValue",
+              "required": false
+            },
+            {
+              "name": "flagUrl",
+              "type": "FlagUrlBuilder",
+              "required": false,
+              "description": "Function `(iso2, width) => string` — fully replace the URL builder."
+            },
+            {
+              "name": "iso2",
+              "type": "string",
+              "required": true,
+              "description": "ISO 3166-1 alpha-2 country code, case-insensitive."
+            },
+            {
+              "name": "src",
+              "type": "string | null",
+              "required": false,
+              "description": "Optional explicit URL override. When set, `iso2` / `width` / `flagUrl` are ignored."
+            },
+            {
+              "name": "width",
+              "type": "number",
+              "required": false,
+              "description": "Pixel width served by flagcdn. 40 is crisp at retina up to ~24px wide."
+            }
+          ],
+          "slots": [
+            {
+              "name": "empty",
+              "description": "Rendered when the flag URL is unavailable and no ISO2 text fallback can be derived."
+            }
+          ]
+        }
+      ]
+    }
+  }
+}