{"_id":"@duotalk/intl-phone-input","_rev":"5-e3a3bff5f37c389bf489fd4c57a5b9bd","name":"@duotalk/intl-phone-input","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@duotalk/intl-phone-input","version":"1.0.0","keywords":["phone","international","web-component","custom-element","input","form"],"author":{"name":"Duotalk","email":"you@example.com"},"license":"MIT","_id":"@duotalk/intl-phone-input@1.0.0","maintainers":[{"name":"ramon-c-duotalk","email":"ramon@duotalk.com.br"}],"homepage":"https://github.com/duotalk/intl-phone-input#readme","bugs":{"url":"https://github.com/duotalk/intl-phone-input/issues"},"dist":{"shasum":"a723001546d4c730e966c7ac023184281f9a0a7b","tarball":"https://registry.npmjs.org/@duotalk/intl-phone-input/-/intl-phone-input-1.0.0.tgz","fileCount":259,"integrity":"sha512-Fd7AswdqmbKCkhlw9n38+7Uybl0fDsmC78pDg9k/N+xHOx/5N6v8UOzYftlxmWb592sJIYvv/w7AO71Vr68y3w==","signatures":[{"sig":"MEUCIQCpd9deIpsGtkiSgCPzgVTOXwbyG1oHA4i5PZ2HmoV/twIgR/X2fYycf9i8Kk8sjc5l+bD/iFc2uCsq5tMdZyTrS/M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":692809},"main":"./dist/index.js","type":"module","module":"./dist/index.js","engines":{"node":">=16.0.0"},"exports":{".":{"import":"./dist/index.js","browser":"./dist/index.js","default":"./dist/index.js"},"./define":{"import":"./dist/define.js","default":"./dist/define.js"},"./intl-phone-input":{"import":"./dist/intl-phone-input.js","default":"./dist/intl-phone-input.js"}},"gitHead":"7a9cccab6eadc9e4e40a94ce886f076d3cd56f3f","scripts":{"build":"node scripts/build.js","clean":"rm -rf dist","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"ramon-c-duotalk","email":"ramon@duotalk.com.br"},"repository":{"url":"git+https://github.com/duotalk/intl-phone-input.git","type":"git"},"_npmVersion":"11.5.1","description":"Framework-agnostic international phone number input delivered as a Web Component.","directories":{"example":"examples"},"sideEffects":true,"_nodeVersion":"24.7.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/intl-phone-input_1.0.0_1761144609538_0.08866761588910932","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@duotalk/intl-phone-input","version":"1.0.1","keywords":["phone","international","web-component","custom-element","input","form"],"author":{"name":"Duotalk","email":"you@example.com"},"license":"MIT","_id":"@duotalk/intl-phone-input@1.0.1","maintainers":[{"name":"ramon-c-duotalk","email":"ramon@duotalk.com.br"}],"homepage":"https://github.com/duotalk/intl-phone-input#readme","bugs":{"url":"https://github.com/duotalk/intl-phone-input/issues"},"dist":{"shasum":"704157dd9fd9a4ca1886afa70642bf47deb841d8","tarball":"https://registry.npmjs.org/@duotalk/intl-phone-input/-/intl-phone-input-1.0.1.tgz","fileCount":259,"integrity":"sha512-gQXIasVVBYuhd/bt7dWMA7mvEzjHEPTXyEjsh5DjvxVubarRZy/BgRvOzlV2HkyaZ35YKuF5NhixCuuJoIDVUA==","signatures":[{"sig":"MEUCIQCIStUJzIedDbXDEW9iXzn8x2isOMmNF4BLwVPiXctbcwIgUQAp8SHHaHx+hp0ydIgYzZScMeJpiOL1npWjM6CEh1A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":693037},"main":"./dist/index.js","type":"module","module":"./dist/index.js","engines":{"node":">=16.0.0"},"exports":{".":{"import":"./dist/index.js","browser":"./dist/index.js","default":"./dist/index.js"},"./define":{"import":"./dist/define.js","default":"./dist/define.js"},"./intl-phone-input":{"import":"./dist/intl-phone-input.js","default":"./dist/intl-phone-input.js"}},"gitHead":"8a38a8da41c6fc044e9774610222e1d09b496f48","scripts":{"build":"node scripts/build.js","clean":"rm -rf dist","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"ramon-c-duotalk","email":"ramon@duotalk.com.br"},"repository":{"url":"git+https://github.com/duotalk/intl-phone-input.git","type":"git"},"_npmVersion":"11.5.1","description":"Framework-agnostic international phone number input delivered as a Web Component.","directories":{"example":"examples"},"sideEffects":true,"_nodeVersion":"24.7.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/intl-phone-input_1.0.1_1761144792376_0.6794972513184838","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@duotalk/intl-phone-input","version":"1.0.2","keywords":["phone","international","web-component","custom-element","input","form"],"author":{"name":"Duotalk","email":"you@example.com"},"license":"MIT","_id":"@duotalk/intl-phone-input@1.0.2","maintainers":[{"name":"ramon-c-duotalk","email":"ramon@duotalk.com.br"}],"homepage":"https://github.com/duotalk/intl-phone-input#readme","bugs":{"url":"https://github.com/duotalk/intl-phone-input/issues"},"dist":{"shasum":"4e42e261f263be52b02b4c5d312aa88b2ea0eaf4","tarball":"https://registry.npmjs.org/@duotalk/intl-phone-input/-/intl-phone-input-1.0.2.tgz","fileCount":259,"integrity":"sha512-AS7N8RXL8lmBqUt/K/YB6tpiDgUd8STUJbgjpT1R6mLKlAqRLjMYOXyvQflLtPm3BuHga5HqlCfSN1LWJRERPA==","signatures":[{"sig":"MEUCIQCOZ17ivL/ZZFXKQUlZR+z8k0JXqMKOZRGrRQMJRBfOuwIgBdTB5GLjcDplVUMKZ3K3Sq7pMaJWkqpT+7ztcp5wDHM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":701339},"main":"./dist/index.js","type":"module","module":"./dist/index.js","engines":{"node":">=16.0.0"},"exports":{".":{"import":"./dist/index.js","browser":"./dist/index.js","default":"./dist/index.js"},"./define":{"import":"./dist/define.js","default":"./dist/define.js"},"./intl-phone-input":{"import":"./dist/intl-phone-input.js","default":"./dist/intl-phone-input.js"}},"gitHead":"2fa1b2e7aadf942dccb7c0b4b8978e731ee67b73","scripts":{"build":"node scripts/build.js","clean":"rm -rf dist","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"ramon-c-duotalk","email":"ramon@duotalk.com.br"},"repository":{"url":"git+https://github.com/duotalk/intl-phone-input.git","type":"git"},"_npmVersion":"11.5.1","description":"Framework-agnostic international phone number input delivered as a Web Component.","directories":{"example":"examples"},"sideEffects":true,"_nodeVersion":"24.7.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/intl-phone-input_1.0.2_1761152577717_0.033207531423524284","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@duotalk/intl-phone-input","version":"1.0.3","keywords":["phone","international","web-component","custom-element","input","form"],"author":{"name":"Duotalk","email":"you@example.com"},"license":"MIT","_id":"@duotalk/intl-phone-input@1.0.3","maintainers":[{"name":"ramon-c-duotalk","email":"ramon@duotalk.com.br"}],"homepage":"https://github.com/duotalk/intl-phone-input#readme","bugs":{"url":"https://github.com/duotalk/intl-phone-input/issues"},"dist":{"shasum":"b2a87bfa357f411c2144f6b6b2a5c48684133e6c","tarball":"https://registry.npmjs.org/@duotalk/intl-phone-input/-/intl-phone-input-1.0.3.tgz","fileCount":259,"integrity":"sha512-+um+4JYl2qVksy36A1BME+SM+M+on0PgeD+6wSccEefUaq0cmr9ZZQbR25LpOomBl8De+D0nO2G8nEQ58ViJcA==","signatures":[{"sig":"MEUCIQDF2azGWVZWg1l1Etecmc9tdEFZ99rAIe3Z37kM7dfyQAIgM9yBi2j4yT37PdPrfZkxHikUJ+IG+SKnvv7pMJUpvsA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":701351},"main":"./dist/index.js","type":"module","module":"./dist/index.js","engines":{"node":">=16.0.0"},"exports":{".":{"import":"./dist/index.js","browser":"./dist/index.js","default":"./dist/index.js"},"./define":{"import":"./dist/define.js","default":"./dist/define.js"},"./intl-phone-input":{"import":"./dist/intl-phone-input.js","default":"./dist/intl-phone-input.js"}},"gitHead":"3d9eee28c2b89d6674c447b48e249ac70a3e8cc0","scripts":{"build":"node scripts/build.js","clean":"rm -rf dist","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"ramon-c-duotalk","email":"ramon@duotalk.com.br"},"repository":{"url":"git+https://github.com/duotalk/intl-phone-input.git","type":"git"},"_npmVersion":"11.5.1","description":"Framework-agnostic international phone number input delivered as a Web Component.","directories":{"example":"examples"},"sideEffects":true,"_nodeVersion":"24.7.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/intl-phone-input_1.0.3_1761153881530_0.3080982240858614","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@duotalk/intl-phone-input","version":"1.0.4","description":"Framework-agnostic international phone number input delivered as a Web Component.","keywords":["phone","international","web-component","custom-element","input","form"],"homepage":"https://github.com/duotalk/intl-phone-input#readme","bugs":{"url":"https://github.com/duotalk/intl-phone-input/issues"},"repository":{"type":"git","url":"git+https://github.com/duotalk/intl-phone-input.git"},"license":"MIT","author":{"name":"Duotalk","email":"you@example.com"},"type":"module","exports":{".":{"import":"./dist/index.js","browser":"./dist/index.js","default":"./dist/index.js"},"./define":{"import":"./dist/define.js","default":"./dist/define.js"},"./intl-phone-input":{"import":"./dist/intl-phone-input.js","default":"./dist/intl-phone-input.js"}},"main":"./dist/index.js","directories":{"example":"examples"},"scripts":{"clean":"rm -rf dist","build":"node scripts/build.js","prepublishOnly":"npm run clean && npm run build"},"engines":{"node":">=16.0.0"},"publishConfig":{"access":"public"},"module":"./dist/index.js","sideEffects":true,"_id":"@duotalk/intl-phone-input@1.0.4","gitHead":"ca5caf3fcf7b7118b1cfa7374f2e73d0e8038eb3","_nodeVersion":"24.7.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-VYsYrjqgb5HG1Gx0ahnHhWaX/jlfgDaLjwv4KhbbOivfFSGyC5VnAVZY5XhuPYRb2ukKVqll5aFkvBG6clMveg==","shasum":"2e7314d0516d973cd1758798a4b3960d3758241e","tarball":"https://registry.npmjs.org/@duotalk/intl-phone-input/-/intl-phone-input-1.0.4.tgz","fileCount":259,"unpackedSize":700890,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDLb69pua/D2WCLgqc4re85cHvPxYDbGlAV4/+DONPPqAIhAJLUKRgDnJoEYv/qiF8ZOZbG2+rgUzgnm4dKoAsWDAPi"}]},"_npmUser":{"name":"ramon-c-duotalk","email":"ramon@duotalk.com.br"},"maintainers":[{"name":"ramon-c-duotalk","email":"ramon@duotalk.com.br"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/intl-phone-input_1.0.4_1761159891956_0.1095385743496522"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-22T14:50:09.420Z","modified":"2025-10-22T19:04:52.403Z","1.0.0":"2025-10-22T14:50:09.750Z","1.0.1":"2025-10-22T14:53:12.584Z","1.0.2":"2025-10-22T17:02:57.932Z","1.0.3":"2025-10-22T17:24:41.720Z","1.0.4":"2025-10-22T19:04:52.193Z"},"bugs":{"url":"https://github.com/duotalk/intl-phone-input/issues"},"author":{"name":"Duotalk","email":"you@example.com"},"license":"MIT","homepage":"https://github.com/duotalk/intl-phone-input#readme","keywords":["phone","international","web-component","custom-element","input","form"],"repository":{"type":"git","url":"git+https://github.com/duotalk/intl-phone-input.git"},"description":"Framework-agnostic international phone number input delivered as a Web Component.","maintainers":[{"name":"ramon-c-duotalk","email":"ramon@duotalk.com.br"}],"readme":"# Intl Phone Input\n\nAurora-inspired international phone number input delivered as a framework-agnostic Web Component. Ships with a curated country dataset, localisation helpers, and a fully customisable glassmorphism UI.\n\n## Highlights\n\n- Zero-dependency Custom Element that works in any framework.\n- Country list with localisation, preferred/allowed filters, dial-code matching, and examples.\n- “Aurora” default theme with a rich token set for light/dark or brand-specific styles.\n- SSR-safe definition helpers so you can opt-in to registering the element in SPA, SSR, or MPA setups.\n\n## Installation\n\n```bash\nnpm install @duotalk/intl-phone-input\n# or\npnpm add @duotalk/intl-phone-input\n```\n\nUse the scoped package name above or rename it before publishing to npm if you plan to release under a different scope.\n\n### CDN / Direct `<script type=\"module\">`\n\n```html\n<script\n  type=\"module\"\n  src=\"https://cdn.jsdelivr.net/npm/@duotalk/intl-phone-input/dist/index.js\"\n></script>\n```\n\nReplace the CDN base once you publish (jsDelivr will point to the latest version automatically).\n\n## Quick Start\n\n### Auto-registration (browser)\n\n```js\nimport \"@duotalk/intl-phone-input\";\n// <intl-phone-input> is now available globally\n```\n\n### Manual registration (SSR-friendly)\n\n```js\nimport { defineIntlPhoneInput } from \"@duotalk/intl-phone-input/define\";\n\ndefineIntlPhoneInput(); // registers \"intl-phone-input\"\n// defineIntlPhoneInput(\"my-phone-input\"); // custom tag name\n```\n\n### Basic markup\n\n```html\n<intl-phone-input\n  default-country=\"br\"\n  preferred-countries=\"br,us,pt,ar\"\n  placeholder-as-example\n  language=\"pt-BR\"\n></intl-phone-input>\n```\n\nListen for updates:\n\n```js\nconst input = document.querySelector(\"intl-phone-input\");\n\ninput.addEventListener(\"input\", (event) => {\n  console.log(event.detail); // \"+554899999999\" or \"\"\n});\n\ninput.addEventListener(\"country-change\", (event) => {\n  console.log(event.detail); // { iso2, dialCode, name, displayName }\n});\n```\n\n## Attributes\n\n| Attribute                | Type               | Default | Description                                                                                    |\n| ------------------------ | ------------------ | ------- | ---------------------------------------------------------------------------------------------- |\n| `value`                  | `string`           | `\"\"`    | E.164 value reflected as an attribute.                                                         |\n| `default-country`        | `string`           | `auto`  | ISO2 code used when no value is present.                                                       |\n| `preferred-countries`    | comma separated    | `\"\"`    | Country ISO2 codes pinned to the top.                                                          |\n| `allowed-countries`      | comma separated    | `\"\"`    | Optional whitelist (falls back to all).                                                        |\n| `placeholder-as-example` | boolean attribute  | off     | Use example numbers as placeholders.                                                           |\n| `autocomplete`           | `string`           | `tel`   | Forwarded to the native `<input>`.                                                             |\n| `disabled`, `required`   | boolean attributes | off     | Forwarded to the native `<input>`.                                                             |\n| `appearance`             | token list         | `\"\"`    | Optional UI toggles: `borderless`, `shadowless`, `no-radius`, `no-effects`. Combine as needed. |\n| `country-display`        | enum               | `name`  | Selector label format: `name` (full), `abbr` (ISO), or `none` (hide).                          |\n| `language`               | `string` (BCP 47)  | browser | Controls UI strings and country name localisation.                                             |\n\n## Events\n\n| Event            | Detail payload                                |\n| ---------------- | --------------------------------------------- |\n| `input`          | `string` – live E.164 value (or `\"\"`).        |\n| `change`         | `string` – committed value after blur/input.  |\n| `country-change` | `{ iso2, dialCode, name, displayName }`.      |\n| `valid`          | `{ isValid: true }`.                          |\n| `invalid`        | `{ isValid: false }`.                         |\n| `focus` / `blur` | Native events forwarded from the inner input. |\n\n## Styling the Aurora Theme\n\nThe component uses a custom design system built with CSS custom properties. Override them per element to match your brand:\n\n```css\nintl-phone-input {\n  --ipi-surface: linear-gradient(135deg, #fdf2f8, #f8fafc);\n  --ipi-input-surface: rgba(255, 255, 255, 0.85);\n  --ipi-text: #0f172a;\n  --ipi-muted: rgba(71, 85, 105, 0.75);\n  --ipi-border: rgba(148, 163, 184, 0.35);\n  --ipi-focus: #ec4899;\n  --ipi-shadow: 0 20px 45px rgba(236, 72, 153, 0.25);\n}\n```\n\nCore tokens you can override:\n\n| Variable                                                         | Purpose                                                                 |\n| ---------------------------------------------------------------- | ----------------------------------------------------------------------- |\n| `--ipi-font-family`                                              | Base font family.                                                       |\n| `--ipi-surface`                                                  | Background for the outer field.                                         |\n| `--ipi-input-surface`                                            | Background for the `<input>` portion.                                   |\n| `--ipi-border`, `--ipi-border-strong`                            | Border colours for the shell and dropdown.                              |\n| `--ipi-focus`                                                    | Accent colour used on focus/active states.                              |\n| `--ipi-text` / `--ipi-muted`                                     | Text and secondary text colours.                                        |\n| `--ipi-accent`                                                   | Highlight colour for the selector iconography.                          |\n| `--ipi-radius`                                                   | Corner radius applied to the shell & dropdown.                          |\n| `--ipi-dropdown-bg`                                              | Dropdown container background.                                          |\n| `--ipi-highlight`                                                | Hover/active colour for country options.                                |\n| `--ipi-shadow`                                                   | Shadow used by the outer field.                                         |\n| `--ipi-scrollbar`                                                | Scrollbar colour inside the dropdown.                                   |\n| `--ipi-flag-size`                                                | Size of rendered emoji flags.                                           |\n| `--ipi-backdrop`                                                 | `backdrop-filter` applied to field/dropdown.                            |\n| `--dd-z`                                                         | Override the dropdown `z-index` if needed.                              |\n| `--ipi-field-border`                                             | Border declaration for the shell; set to `0 solid transparent` to hide. |\n| `--ipi-field-shadow` / `--ipi-field-focus-shadow`                | Resting/focused box shadows for the shell.                              |\n| `--ipi-field-focus-translate`                                    | Vertical offset applied to the shell on focus.                          |\n| `--ipi-input-disabled-background`                                | Background colour when the input is disabled.                           |\n| `--ipi-dropdown-shadow`                                          | Shadow used by the dropdown panel.                                      |\n| `--ipi-dropdown-border-width`                                    | Border width for the dropdown; use `0` to remove it.                    |\n| `--ipi-dropdown-radius`                                          | Border radius for the dropdown panel.                                   |\n| `--ipi-search-background` / `--ipi-search-focus-background`      | Surface colours for the search field.                                   |\n| `--ipi-option-hover-background`                                  | Background applied when hovering list rows.                             |\n| `--ipi-option-selected-background`                               | Background for the selected country option.                             |\n| `--ipi-country-option-hover-transform`                           | Transform applied to hovered country rows.                              |\n| `--ipi-country-name-white-space` / `--ipi-country-name-overflow` | Control ellipsis behaviour in the list.                                 |\n| `--ipi-transition-duration` / `--ipi-option-transition-duration` | Animation timings for shell and list.                                   |\n| `--ipi-transition-easing`                                        | Easing curve shared by interactive transitions.                         |\n\nTip: declare the token overrides on `.dark intl-phone-input` or container elements to theme per section.\n\n### Appearance tokens\n\nUse the `appearance` attribute to tone down the built-in chrome without having to override CSS:\n\n```html\n<intl-phone-input appearance=\"borderless no-effects\"></intl-phone-input>\n```\n\n| Token        | Effect                                                        |\n| ------------ | ------------------------------------------------------------- |\n| `borderless` | Removes the outer shell border and dropdown border.           |\n| `shadowless` | Strips shadows from the shell, dropdown, and flag avatar.     |\n| `no-radius`  | Forces square corners by zeroing the shell & dropdown radius. |\n| `no-effects` | Disables hover/focus animations and highlight backgrounds.    |\n\nTokens can be combined freely, and you can still override the CSS variables above for finer control.\n\n### Selector label modes\n\nControl the flag selector caption with `country-display`:\n\n```html\n<intl-phone-input country-display=\"abbr\"></intl-phone-input>\n```\n\n- `name` (default) renders the fully localised country name.\n- `abbr` shows the ISO 3166-1 alpha-2 code instead.\n- `none` hides the country name, leaving just the flag and dial code.\n\n## Extending the Country list\n\nProvide additional country metadata before the component loads. Entries are merged by `iso2`.\n\n```html\n<script>\n  window.IntlPhoneInputCountriesExtra = [\n    {\n      iso2: \"mx\",\n      name: \"México\",\n      dialCode: \"52\",\n      mask: \"## #### ####\",\n      example: \"+52 55 1234 5678\",\n      exampleDisplay: \"55 1234 5678\",\n      lengths: [10],\n    },\n  ];\n</script>\n<script type=\"module\" src=\"/dist/index.js\"></script>\n```\n\nFor complete programmatic control you can import the builder:\n\n```js\nimport { buildCountryList } from \"@duotalk/intl-phone-input/intl-phone-input\"; // exposed through the dist copy\n```\n\n## Local Development\n\n```bash\nnpm install      # install once\nnpm run build    # copies ./src → ./dist\n```\n\n- `examples/` contains ready-to-open demos (Web Component + Vue 2/3).\n- `scripts/build.js` is used by `npm run build` and `npm publish` to keep `dist` in sync.\n\n## Examples\n\n- `examples/index.html` – vanilla web component demo.\n- `examples/vue2-demo.html` – Vue 2 Options API example.\n- `examples/vue3-demo.html` – Vue 3 Composition API example.\n","readmeFilename":"README.md"}